:root { padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
[hidden] { display: none !important; }

/* Layout: a locked entry screen, then the path as a descent through underground car park levels B1 to B6.
   Deliberately single dark theme: this is the underground. */
:root {
  --void: #070707;
  --concrete: #111111;
  --slab: #171616;
  --line: #262424;
  --ash: #A39B92; /* lighter grey so 12px labels pass 4.5:1 on the dark cards (2026-11-12) */
  --bone: #E9E3D6;
  --red: #FF1F4F;
  --red-dim: rgba(255, 31, 79, 0.14);
  --red-glow: rgba(255, 31, 79, 0.45);
  --sodium: #E8A33A;
  --tape: #3FBF73;
  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
  --body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
}
/* grain + scanlines */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 0%, transparent 40%, rgba(0,0,0,0.65) 100%);
}
::selection { background: var(--red); color: #000; }

/* ---------- Gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 40; background: var(--void);
  display: grid; place-items: center;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: max(24px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-bottom, 0px));
  transition: opacity 0.9s ease, visibility 0.9s;
}
#gate.open { opacity: 0; visibility: hidden; }
.gate-box { width: 100%; max-width: 460px; display: grid; gap: 26px; }
.gate-mark { font-family: var(--display); font-size: 84px; line-height: 1; color: var(--red-ink); text-shadow: 0 0 28px var(--red-glow); animation: flicker 5s infinite; }
.log { font-family: var(--mono); font-size: 13px; color: var(--ash); display: grid; gap: 6px; min-height: 7.5em; }
.log p { margin: 0; }
.log p.hot { color: var(--bone); }
.log .cur { display: inline-block; width: 8px; height: 14px; background: var(--red); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
.gate-form { display: grid; gap: 10px; }
.gate-form label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
.gate-row { display: flex; gap: 8px; }
.gate-row input {
  flex: 1; min-width: 0; font: 500 16px var(--mono); letter-spacing: 0.25em; text-transform: uppercase;
  background: var(--concrete); color: var(--bone); border: 1px solid var(--line); border-radius: 3px;
  padding: 12px; outline: none;
}
.gate-row input:focus { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-dim), 0 0 14px var(--red-dim); }
.gate-row button {
  font: 500 12px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; padding: 0 16px;
  background: var(--red); color: #000; border: 0; border-radius: 2px; cursor: pointer;
}
.gate-row button:focus-visible, .gate-row input:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }
.gate-msg { font-family: var(--mono); font-size: 12px; min-height: 1.4em; margin: 0; color: var(--ash); }
.gate-msg.bad { color: var(--red-ink); animation: shake 0.35s; }
.hint { font-family: var(--mono); font-size: 12px; color: var(--ash); }
.hint b { color: var(--ash); font-weight: 500; }

@keyframes blink { 50% { opacity: 0; } }
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.3; } 94% { opacity: 1; } 96% { opacity: 0.5; } }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---------- Page ---------- */
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-block: 28px 64px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  display: grid; gap: 30px;
}
.top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; }
.brand { display: grid; gap: 4px; }
.brand .word { font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; color: var(--ash); }
.brand h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 5vw, 46px); line-height: 1.1; text-wrap: balance; }
.brand h1 span { color: var(--red-ink); text-shadow: 0 0 22px var(--red-glow); margin-right: 10px; }
.signout { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); text-decoration: none; border: 1px solid var(--line); padding: 6px 10px; border-radius: 2px; }
.signout:hover { color: var(--red-ink); border-color: var(--red); }

/* Identity strip */
.strip { border: 1px solid var(--line); background: var(--concrete); border-radius: 4px; padding: 20px 22px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.strip-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: end; justify-content: space-between; }
.kv { display: grid; gap: 2px; min-width: 0; }
.kv .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
.kv .v { font-family: var(--display); font-size: 22px; font-weight: 800; }
.kv .s { font-size: 13px; color: var(--ash); }
.clear { color: var(--red-ink); }
.depth { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.depth i { height: 4px; background: var(--line); }
.depth i.done { background: var(--bone); }
.depth i.now { background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.next { font-family: var(--mono); font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.next b { color: var(--sodium); font-weight: 500; letter-spacing: 0.12em; }

/* Main */
.main { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 760px) { .main { grid-template-columns: minmax(0, 1fr); } .main .detail { order: -1; } }

/* Levels: car park pillar signage */
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lvl {
  width: 100%; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 10px 14px 10px 10px; border: 1px solid transparent; border-radius: 3px;
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.lvl:hover { border-color: var(--line); }
.lvl:focus-visible { outline: 1px solid var(--red); outline-offset: 2px; }
.lvl[aria-current="true"] { background: var(--slab); border-color: var(--line); }
.pillar {
  height: 56px; display: grid; place-items: center; border-radius: 2px;
  font-family: var(--mono); font-weight: 500; font-size: 20px; letter-spacing: 0.04em;
  background: var(--concrete); color: #4d4946; border: 1px solid var(--line);
  /* hazard stripe along the bottom like a painted pillar */
  background-image: repeating-linear-gradient(-45deg, transparent 0 6px, rgba(255,255,255,0.03) 6px 12px);
}
.done .pillar { color: var(--bone); }
.now .pillar { color: #000; background: var(--red); border-color: var(--red); box-shadow: 0 0 24px var(--red-glow); background-image: none; }
.lvl .txt { display: grid; min-width: 0; }
.lvl .name { font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.lvl .name .kj { font-family: var(--display); color: var(--red-ink); }
.lvl .state { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.now .state { color: var(--red-ink); }
.lvl .stat { font-family: var(--mono); font-size: 14px; color: var(--ash); }
.done .stat { color: var(--tape); }
.now .stat { color: var(--red-ink); animation: blink 1.4s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .now .stat, .gate-mark, .log .cur { animation: none; } }

/* Redaction */
.redact { background: var(--bone); color: transparent; border-radius: 1px; user-select: none; padding: 0 2px; opacity: 0.85; }
.locked .redact { background: #2b2827; }

/* Detail */
.detail { border: 1px solid var(--line); background: var(--concrete); border-radius: 4px; padding: 28px; display: grid; gap: 24px; min-width: 0; }
@media (max-width: 480px) { .detail { padding: 20px; } }
.d-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
.d-kanji { font-family: var(--display); font-weight: 800; font-size: 72px; line-height: 1; color: var(--red-ink); text-shadow: 0 0 30px var(--red-glow); }
.d-head .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
.d-head h2 { margin: 4px 0; font-family: var(--display); font-size: 30px; line-height: 1.15; text-wrap: balance; }
.d-head p { margin: 0; color: var(--ash); max-width: 60ch; }
.sealed { font-family: var(--mono); font-size: 13px; color: var(--ash); border: 1px dashed #3a3634; padding: 12px 14px; border-radius: 2px; }
.sealed b { color: var(--red-ink); font-weight: 500; }
.sec { display: grid; gap: 10px; }
.sec h3 { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); font-weight: 500; }
.tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tasks li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; }
.tasks .mk { font-family: var(--mono); font-size: 13px; color: #4d4946; }
.tasks li.ok .mk { color: var(--tape); }
.tasks li.ok span:nth-child(2) { color: var(--ash); text-decoration: line-through; text-decoration-color: #4d4946; }
.tasks li.wait .mk { color: var(--sodium); }
.tasks em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--sodium); white-space: nowrap; }
.sys { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ash); border-left: 2px solid var(--line); padding: 2px 0 2px 14px; max-width: 70ch; }
.sys code { color: var(--red-ink); }
.reward { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border: 1px solid var(--red-dim); background: var(--red-dim); border-radius: 2px; }
.reward::before { content: "解"; font-family: var(--display); font-weight: 800; color: var(--red-ink); font-size: 20px; }

/* Stage extras */
.score { display: grid; gap: 8px; font-family: var(--mono); font-size: 13px; }
.score-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) 36px; gap: 12px; align-items: center; }
.track { height: 6px; background: var(--line); }
.fill { height: 100%; background: var(--bone); }
.score-row b { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; }
.score-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--line); padding-top: 10px; }
.score-total b { font-size: 24px; color: var(--red-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flag { font-family: var(--mono); font-size: 12px; padding: 3px 9px; border: 1px solid var(--sodium); color: var(--sodium); border-radius: 2px; }
.flag.good { border-color: var(--tape); color: var(--tape); }
.vote-bar { display: flex; height: 6px; background: var(--line); }
.vote-bar .yes { background: var(--tape); }
.vote-bar .no { background: var(--red); }
.vote-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }

.card {
  width: 100%; max-width: 360px; aspect-ratio: 1.586; border-radius: 8px; padding: 18px 20px;
  background: #000; border: 1px solid var(--line); color: var(--bone);
  display: grid; grid-template-rows: auto 1fr auto; position: relative; overflow: hidden;
  box-shadow: 0 0 40px rgba(255, 31, 79, 0.12);
}
.card::after { content: "頂"; position: absolute; right: -4px; bottom: -30px; font-family: var(--display); font-weight: 800; font-size: 150px; line-height: 1; color: var(--red-ink); opacity: 0.85; text-shadow: 0 0 30px var(--red-glow); }
.card > * { position: relative; z-index: 1; }
.card .c-top { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); }
.card .c-name { align-self: end; font-family: var(--display); font-weight: 800; font-size: 22px; }
.card .c-meta { font-family: var(--mono); font-size: 12px; color: var(--ash); }

.foot { font-family: var(--mono); font-size: 12px; color: var(--ash); max-width: 75ch; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; }
.foot button { font: inherit; color: var(--ash); background: none; border: 1px solid var(--line); padding: 4px 10px; border-radius: 2px; cursor: pointer; }
.foot button:hover { color: var(--red-ink); border-color: var(--red); }

.id-box { display: grid; gap: 12px; }
.discord-btn {
  display: inline-flex; justify-content: center; align-items: center; gap: 10px; padding: 12px 18px;
  font: 500 13px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  background: var(--red); color: #000; border-radius: 2px;
}
.discord-btn:focus-visible { outline: 1px solid var(--red); outline-offset: 4px; }
.loading { font-family: var(--mono); font-size: 13px; color: var(--ash); }

/* ---------- Web app additions ---------- */
.nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nav a, .btn {
  font: 500 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none;
  color: var(--ash); border: 1px solid var(--line); padding: 7px 12px; border-radius: 2px; background: none; cursor: pointer;
}
.nav a:hover, .btn:hover { color: var(--red-ink); border-color: var(--red); }
.nav a[aria-current="page"] { color: var(--bone); border-color: var(--bone); }
.btn.primary { background: var(--red); color: #000; border-color: var(--red); }
.btn.primary:hover { color: #000; filter: brightness(1.1); }
.btn:disabled { opacity: 0.5; cursor: wait; }
.panel { border: 1px dashed #3a3634; border-radius: 3px; padding: 16px; display: grid; gap: 12px; }
.panel h4 { margin: 0; font: 500 12px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-ink); }
.field { display: grid; gap: 6px; }
.field label { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.field input, .field textarea {
  font: 15px var(--body); color: var(--bone); background: var(--void); border: 1px solid var(--line);
  border-radius: 2px; padding: 10px 12px; width: 100%; min-width: 0;
}
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--red); }
.note { font-family: var(--mono); font-size: 12px; color: var(--ash); margin: 0; }
.note.bad { color: var(--red-ink); }
.note.good { color: var(--tape); }
.code-big { font: 500 28px var(--mono); letter-spacing: 0.12em; color: var(--red-ink); }
.thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.thumbs img { width: 72px; height: 72px; object-fit: cover; border-radius: 2px; border: 1px solid var(--line); }
.signin { display: grid; gap: 10px; }
.signin .or { font: 12px var(--mono); color: var(--ash); text-align: center; letter-spacing: 0.2em; }
.discord-btn.alt { background: #5865F2; color: #fff; }
.build { border: 1px solid var(--line); background: var(--concrete); border-radius: 4px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.build .shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.build .shots img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 2px; }
.build .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; color: var(--ash); }
.build h3 { margin: 0; font-family: var(--display); font-size: 22px; }
.vote-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.vote-row .btn.on { color: #000; background: var(--tape); border-color: var(--tape); }
.vote-row .btn.on.no { background: var(--red); border-color: var(--red); }
.grid { display: grid; gap: 18px; }
.empty { font-family: var(--mono); font-size: 13px; color: var(--ash); border: 1px dashed var(--line); padding: 24px; text-align: center; border-radius: 3px; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 8px; border-bottom: 1px solid var(--line); }
.table th { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.scroll { overflow-x: auto; }

/* ---------- CRT monitor + Tokyo neon signage (2026-11-01) ---------- */
/* Pixel labels: DotGothic16 reads like an old LED/CRT character display, in Latin and Japanese. */
:root {
  --mono: "DotGothic16", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --cyan: #3BE8FF;
  --cyan-glow: rgba(59, 232, 255, 0.45);
}

/* Faint colour fringing on big type, like a misaligned tube. */
.brand h1, .d-head h2, .kv .v, .card .c-name {
  text-shadow: -1px 0 rgba(255, 31, 79, 0.55), 1px 0 rgba(59, 232, 255, 0.45);
}

/* Neon tubes: the kanji signs glow and buzz on their own timing. */
.gate-mark, .brand h1 span, .d-kanji, .lvl .name .kj, .card::after, .reward::before {
  color: #FFF0F3;
  text-shadow:
    0 0 2px #fff,
    0 0 5px #fff,
    0 0 10px var(--red),
    0 0 22px var(--red),
    0 0 44px var(--red),
    0 0 90px var(--red-glow);
}
.gate-mark { animation: neon-buzz 6s infinite; }
.brand h1 span { animation: neon-buzz 9s 1.3s infinite; }
.d-kanji { animation: neon-buzz 7.5s 0.4s infinite; }
.lvl:nth-child(odd) .name .kj { animation: neon-buzz 11s 2s infinite; }
/* A second tube colour, as on a Shinjuku sign stack. */
.next b, .brand .word {
  color: var(--cyan);
  text-shadow: 0 0 4px var(--cyan), 0 0 14px var(--cyan-glow);
}
.brand .word { animation: neon-buzz 13s 3s infinite; }
@keyframes neon-buzz {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24% { opacity: 0.35; }
  55% { opacity: 0.6; }
}

/* The current level pillar is a lit sign box. */
.now .pillar {
  background: #1a0006; color: #FFE3EA; border-color: var(--red);
  text-shadow: 0 0 4px #fff, 0 0 10px var(--red), 0 0 22px var(--red);
  box-shadow: 0 0 12px var(--red-glow), inset 0 0 18px var(--red-glow);
}

@media (prefers-reduced-motion: reduce) {
  .gate-mark, .brand h1 span, .d-kanji, .lvl .name .kj, .brand .word { animation: none; }
}

/* ---------- App shell v2 (2026-11-01): mobile first ---------- */
body.has-tabs { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px max(8px, env(safe-area-inset-left, 0px)) calc(6px + env(safe-area-inset-bottom, 0px));
  background: rgba(7, 7, 7, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.tabbar a {
  display: grid; justify-items: center; gap: 2px; padding: 6px 0; min-height: 52px;
  font: 12px var(--mono); letter-spacing: 0.08em; color: var(--ash); text-decoration: none;
}
.tabbar .tk { font-family: var(--display); font-size: 20px; line-height: 1.1; color: #5a5552; }
.tabbar a[aria-current="page"] { color: var(--bone); }
.tabbar a[aria-current="page"] .tk { color: #FFF0F3; text-shadow: 0 0 4px #fff, 0 0 10px var(--red), 0 0 22px var(--red); }
@media (min-width: 900px) { .tabbar { left: 50%; right: auto; transform: translateX(-50%); width: 560px; border: 1px solid var(--line); border-bottom: 0; border-radius: 12px 12px 0 0; } }

.status { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pill { display: inline-flex; gap: 6px; align-items: center; font: 12px var(--mono); padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--bone); white-space: nowrap; }
.pill .tk { font-family: var(--display); color: var(--sodium); text-shadow: 0 0 8px rgba(232, 163, 58, 0.6); }
.pill.rank { color: var(--red-ink); border-color: var(--red-dim); }

/* Door forms */
.gate-input {
  width: 100%; font: 16px var(--mono); color: var(--bone); background: transparent;
  border: 0; border-bottom: 1px solid var(--line); padding: 10px 2px; text-transform: none; letter-spacing: 0.02em;
}
.gate-input, .gate-row input { caret-color: var(--red); }
.gate-input { background: var(--concrete); border: 1px solid var(--line); border-radius: 3px; padding: 12px; }
.gate-input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 1px var(--red-dim), 0 0 14px var(--red-dim); }
.gate-btn { margin-top: 8px; font: 500 14px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; background: var(--red); color: #000; border: 0; border-radius: 3px; padding: 14px; cursor: pointer; }
.gate-btn:disabled { opacity: 0.5; cursor: wait; }
.linkish { justify-self: start; background: none; border: 0; padding: 6px 0; font: 12px var(--mono); color: var(--ash); cursor: pointer; text-align: left; }
.linkish:hover, .linkish:focus-visible { color: var(--cyan); }

.btn.big { display: block; text-align: center; padding: 14px; font-size: 13px; text-decoration: none; }
.page-h { display: grid; gap: 6px; }
.page-h p { margin: 0; color: var(--ash); font-size: 14px; }
.sealed-note { font: 12px var(--mono); color: var(--ash); border: 1px dashed #3a3634; padding: 10px 12px; border-radius: 3px; }
.sealed-note b { color: var(--red-ink); font-weight: 500; }

/* ---------- Feed: swipe deck ---------- */
.deck { position: relative; height: clamp(360px, calc(100dvh - 330px), 640px); touch-action: pan-y; }
.swipe {
  position: absolute; inset: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden;
  background: var(--concrete); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); user-select: none; will-change: transform;
}
.swipe.behind { transform: scale(0.95) translateY(12px); opacity: 0.6; pointer-events: none; }
.swipe .ph { position: relative; background: #000; }
.swipe .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.swipe .dots { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; }
.swipe .dots i { flex: 1; height: 3px; background: rgba(255, 255, 255, 0.3); border-radius: 2px; }
.swipe .dots i.on { background: #fff; }
.swipe .stamp { position: absolute; top: 28px; padding: 6px 12px; font: 500 22px var(--mono); letter-spacing: 0.1em; border: 3px solid; border-radius: 6px; opacity: 0; transform: rotate(-12deg); }
.swipe .stamp.yes { left: 18px; color: var(--tape); border-color: var(--tape); text-shadow: 0 0 12px rgba(63, 191, 115, 0.8); }
.swipe .stamp.no { right: 18px; color: var(--red-ink); border-color: var(--red); transform: rotate(12deg); text-shadow: 0 0 12px var(--red-glow); }
.swipe .score-badge { position: absolute; right: 10px; bottom: 10px; font: 500 13px var(--mono); padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.7); color: var(--cyan); border: 1px solid rgba(59, 232, 255, 0.4); }
.swipe .info { padding: 14px 16px 16px; display: grid; gap: 6px; }
.swipe .info h3 { margin: 0; font-family: var(--display); font-size: 22px; line-height: 1.2; }
.swipe .info .meta { display: flex; justify-content: space-between; gap: 8px; font: 12px var(--mono); color: var(--ash); }
.swipe .info .mods { font-size: 13px; color: var(--bone); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deck-actions { display: flex; justify-content: center; align-items: center; gap: 22px; padding: 12px 0 0; }
.round { width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--line); background: var(--concrete); color: var(--bone); font-size: 26px; cursor: pointer; display: grid; place-items: center; }
.round.no { color: var(--red-ink); border-color: var(--red-dim); }
.round.yes { color: var(--tape); border-color: rgba(63, 191, 115, 0.3); }
.round.small { width: 48px; height: 48px; font-size: 13px; font-family: var(--mono); }
.round:active { transform: scale(0.94); }
.round:disabled { opacity: 0.35; }
.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; font: 13px var(--mono); padding: 10px 16px; border-radius: 999px; background: #000; border: 1px solid var(--cyan); color: var(--cyan); box-shadow: 0 0 18px var(--cyan-glow); animation: toast 1.8s forwards; white-space: nowrap; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 12%, 80% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* Comments sheet */
.sheet-bg { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.6); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 56; max-height: 78vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--slab); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (min-width: 900px) { .sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); } }
.sheet header { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); font: 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.sheet header button { background: none; border: 0; color: var(--bone); font-size: 22px; cursor: pointer; padding: 0 4px; }
.sheet .list { overflow-y: auto; padding: 12px 16px; display: grid; gap: 12px; align-content: start; }
.sheet .c b { font: 500 12px var(--mono); color: var(--bone); }
.sheet .c b i { font-style: normal; color: var(--red-ink); margin-left: 6px; }
.sheet .c p { margin: 2px 0 0; font-size: 14px; }
.sheet form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.sheet input { flex: 1; min-width: 0; font: 16px var(--body); color: var(--bone); background: var(--concrete); border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; }
.sheet input:focus { outline: none; border-color: var(--red); }

/* Lists: meets, leaderboard, registry */
.list-card { border: 1px solid var(--line); background: var(--concrete); border-radius: 10px; padding: 16px; display: grid; gap: 10px; }
.list-card h3 { margin: 0; font-family: var(--display); font-size: 20px; }
.when { font: 500 12px var(--mono); letter-spacing: 0.12em; color: var(--cyan); text-transform: uppercase; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.row-btns .btn { flex: 1; text-align: center; padding: 12px; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--concrete); }
.board li.me { border-color: var(--red); box-shadow: 0 0 14px var(--red-dim); }
.board .pl { font: 500 15px var(--mono); color: var(--ash); text-align: center; }
.board li:nth-child(1) .pl { color: #FFF0F3; text-shadow: 0 0 4px #fff, 0 0 10px var(--red); }
.board .who { min-width: 0; display: grid; }
.board .who b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board .who span { font: 12px var(--mono); color: var(--ash); letter-spacing: 0.1em; text-transform: uppercase; }
.board .pts { font: 500 14px var(--mono); color: var(--cyan); }
.reg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.reg div { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; background: var(--concrete); min-width: 0; }
.reg .no { font: 500 12px var(--mono); color: var(--red-ink); }
.reg b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reg span { font-size: 12px; color: var(--ash); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabs-mini { display: flex; gap: 6px; }
.tabs-mini button { flex: 1; font: 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 10px; background: none; color: var(--ash); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.tabs-mini button[aria-pressed="true"] { color: var(--bone); border-color: var(--red); box-shadow: 0 0 12px var(--red-dim); }

/* Bigger tap targets on phones */
@media (max-width: 600px) {
  .wrap { gap: 22px; padding-top: 18px; }
  .btn { padding: 11px 14px; }
  .top { align-items: start; }
  .detail { padding: 18px; }
  .d-kanji { font-size: 54px; }
}
.code-sm { font: 500 14px var(--mono); color: var(--cyan); letter-spacing: 0.08em; }
.table .row-btns { flex-wrap: nowrap; }

/* Tab badges and the Path hub */
.tabbar a { position: relative; }
.tabbar .badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--red); color: #000; font: 500 12px/18px var(--mono); text-align: center; box-shadow: 0 0 10px var(--red-glow); }
.hub { display: grid; gap: 8px; }
.hub[hidden] { display: none; }
.hub a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--concrete); color: var(--bone); text-decoration: none; font-size: 14px; }
.hub a:hover, .hub a:focus-visible { border-color: var(--red); }
.hub .tk { font-family: var(--display); font-size: 20px; color: #FFF0F3; text-shadow: 0 0 4px #fff, 0 0 10px var(--red); }

/* Admin build cards: car names read as names, not labels */
.build h3 { font-family: var(--display); font-size: 22px; letter-spacing: 0; text-transform: none; color: var(--bone); line-height: 1.2; }
/* Member card: the watermark sits behind the name, not over it */
.card::after { opacity: 0.28; }

/* Photo pickers in the house style */
.field input[type="file"] { padding: 10px; font: 13px var(--mono); color: var(--ash); }
.field input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 10px 14px; border: 1px solid var(--red); border-radius: 3px; background: transparent;
  color: var(--bone); font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
}
.field input[type="file"]::file-selector-button:hover { background: var(--red-dim); }

/* ---------- Red Line (2026-11-09): near-black, bone and the brand red only ---------- */
:root {
  --red: #DE003D;
  --red-ink: #F2335F; /* brand red for small text: passes 4.5:1 on the dark cards; fills and borders keep --red */
  --red-dim: rgba(222, 0, 61, 0.14);
  --red-glow: rgba(222, 0, 61, 0.4);
  --cyan: var(--bone);
  --cyan-glow: transparent;
  --sodium: #B9B1A6;
  --tape: var(--bone);
}
.brand h1, .d-head h2, .kv .v, .card .c-name { text-shadow: none; }
.brand .word { color: var(--ash); text-shadow: none; animation: none; }
.next b { color: var(--red-ink); text-shadow: none; }
.pill .tk { color: var(--red-ink); text-shadow: none; }
.btn.primary, .gate-btn, .gate-row button, .discord-btn { color: #fff; }
.tabbar .badge { color: #fff; }
.when { color: var(--red-ink); }
.board .pts, .code-sm { color: var(--bone); }
.linkish:hover, .linkish:focus-visible { color: var(--red-ink); }
.vote-bar .yes { background: var(--bone); }
.vote-bar .no { background: #4a4542; }
.toast { border-color: var(--line); color: var(--bone); background: #131111; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); }
/* Swipe stamps are solid blocks so they read on any photo. */
.swipe .stamp { border-radius: 2px; text-shadow: none; }
.swipe .stamp.yes { background: var(--red); border-color: var(--red); color: #fff; }
.swipe .stamp.no { background: var(--bone); border-color: var(--bone); color: #0a0909; }
.round.yes { color: var(--red-ink); border-color: var(--red); }
.round.no { color: var(--ash); border-color: var(--line); }

/* Tab bar: 16px pixel icons, a thin red line over the active tab. */
.tabbar a { color: var(--ash); }
.tabbar .ic { display: block; width: 16px; height: 16px; margin-top: 4px; color: #6b6460; }
.tabbar a[aria-current="page"], .tabbar a[aria-current="page"] .ic { color: var(--red-ink); }
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 2px; background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.tabbar .badge { left: calc(50% + 6px); top: 0; }

/* ---------- Road in: Friday Drop, Not yet, Build Log, vouches, seen at a meet ---------- */
.road { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.road li { position: relative; padding: 7px 0 7px 22px; border-left: 2px solid var(--line); margin-left: 6px; font: 13px var(--mono); color: var(--ash); }
.road li::before { content: ""; position: absolute; left: -7px; top: 11px; width: 12px; height: 12px; background: var(--line); }
.road li.ok { color: var(--bone); }
.road li.ok::before { background: var(--bone); }
.road li.now { color: var(--bone); }
.road li.now::before { background: var(--red); box-shadow: 0 0 8px var(--red-glow); }
.road small { display: block; font-size: 12px; color: var(--ash); }
.countdown { font: 500 34px var(--mono); letter-spacing: 0.06em; color: var(--bone); }
.boxed { border: 1px solid var(--line); background: var(--concrete); border-radius: 8px; padding: 14px 16px; display: grid; gap: 8px; }
.boxed.hot { border: 2px solid var(--red); background: #160609; box-shadow: 0 0 14px var(--red-dim); }
.boxed .k { font: 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ash); }
.boxed.hot .k { color: var(--red-ink); }
.tiplist { list-style: none; margin: 0; padding: 0; display: grid; }
.tiplist li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ash); }
.tiplist li i { width: 16px; height: 16px; border: 1px solid #4a4542; flex: none; display: grid; place-items: center; font: 12px var(--mono); font-style: normal; }
.tiplist li.done { color: var(--bone); }
.tiplist li.done i { background: var(--red); border-color: var(--red); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 12px var(--mono); padding: 8px 10px; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--ash); cursor: pointer; }
.chip[aria-pressed="true"], .chip.on { border-color: var(--red); color: var(--bone); background: var(--red-dim); }
.meter { height: 8px; background: var(--line); border-radius: 2px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--bone); }
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.ba figure { margin: 0; position: relative; aspect-ratio: 4 / 3; background: #000; overflow: hidden; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba figcaption { position: absolute; left: 6px; bottom: 6px; font: 12px var(--mono); letter-spacing: 0.08em; padding: 3px 7px; background: rgba(10, 9, 9, 0.85); color: var(--bone); }
.ba figure + figure figcaption { background: var(--red); color: #fff; }
.update { border: 1px solid var(--line); background: var(--concrete); border-radius: 10px; overflow: hidden; display: grid; }
.update .u-body { padding: 12px 14px 14px; display: grid; gap: 8px; }
.update .u-meta { display: flex; justify-content: space-between; gap: 8px; font: 12px var(--mono); color: var(--ash); }
.update p { margin: 0; font-size: 14px; }
.respect { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 14px; border-radius: 3px; border: 1px solid var(--red); background: var(--red); color: #fff; cursor: pointer; }
.respect[aria-pressed="true"] { background: transparent; color: var(--red-ink); }
.respect:disabled { opacity: 0.4; cursor: default; }
.checks { display: grid; }
.checks div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.checks small { display: block; font: 12px var(--mono); color: var(--ash); }
.checks b { font: 500 12px var(--mono); color: var(--ash); white-space: nowrap; }
.checks b.ok { color: var(--bone); }
.seen-code { font: 500 34px var(--mono); letter-spacing: 0.14em; text-align: center; padding: 16px; border: 2px solid var(--red); border-radius: 6px; color: var(--bone); }
.vouch-btn { font: 500 12px var(--mono); letter-spacing: 0.1em; padding: 0 14px; height: 44px; border-radius: 22px; border: 1px solid var(--bone); background: transparent; color: var(--bone); cursor: pointer; }
.vouch-btn[aria-pressed="true"] { background: var(--bone); color: #0a0909; }
.vouch-btn:disabled { opacity: 0.35; }
.sec-title { font: 500 12px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ash); margin: 0; }

/* ---------- Phones (2026-11-10): compact header, B1–B6 strip, flat detail ---------- */
@media (max-width: 760px) {
  .wrap { gap: 20px; padding-block: 14px 40px; }
  /* Header: title and status pills share one line on every page. */
  .top { flex-wrap: nowrap; align-items: center; gap: 10px; }
  .brand { min-width: 0; gap: 2px; }
  .brand .word { font-size: 12px; letter-spacing: 0.18em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand h1 { font-size: 26px; white-space: nowrap; }
  .brand h1 span { margin-right: 6px; }
  .status { flex: none; justify-content: flex-end; max-width: 58%; gap: 4px; }
  .pill { font-size: 12px; padding: 4px 8px; gap: 4px; }

  .strip { padding: 16px; gap: 12px; }
  .kv .v { font-size: 20px; }

  /* Levels: six compact pillars above the detail instead of six tall rows below it. */
  .main { gap: 14px; }
  .main .detail { order: 0; }
  .levels { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
  .lvl { grid-template-columns: minmax(0, 1fr); padding: 0; gap: 0; border: 0; }
  .lvl .txt, .lvl .stat { display: none; }
  .pillar { height: 48px; font-size: 15px; }
  .lvl[aria-current="true"] { background: none; }
  .lvl[aria-current="true"] .pillar { outline: 2px solid var(--bone); outline-offset: 2px; }

  /* Detail: no box around it on phones, so text uses the full width. */
  .detail { border: 0; background: none; padding: 4px 0 0; gap: 22px; }
  .d-head { gap: 14px; }
  .d-kanji { font-size: 44px; }
  .d-head h2 { font-size: 26px; }
  .sys { padding-left: 10px; }
  .panel { padding: 14px; }
  .hub a { padding: 12px 14px; }
}
@media (max-width: 760px) {
  .vouch-btn { white-space: nowrap; padding: 0 12px; }
  .deck-actions { gap: 14px; }
  .round { width: 58px; height: 58px; }
  .round.small { width: 46px; height: 46px; }
}
/* Short phones: the swipe hint gives its space to the card. */
@media (max-width: 760px) and (max-height: 700px) { #hint { display: none; } }
/* Admin on phones: photos as a row of thumbnails, so one build fits on a screen. */
@media (max-width: 760px) {
  .build { padding: 14px; gap: 12px; }
  .build .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .build .vote-row { display: grid; gap: 8px; }
  .build .vote-row .btn { width: 100%; text-align: center; padding: 12px; }
}

/* Door on phones (2026-11-10): the box never grows past the screen (Safari sizes the grid to the input's
   default width otherwise), and the passphrase box has one clean focus ring, not two. */
#gate { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.gate-box { min-width: 0; }
.gate-row input:focus-visible { outline: none; }
.gate-row input:focus { box-shadow: 0 0 12px var(--red-dim); }
.gate-row button { flex: none; min-height: 48px; }
@media (max-width: 420px) {
  .gate-mark { font-size: 68px; }
  .log { font-size: 14px; }
  .gate-row input { letter-spacing: 0.15em; }
}
/* Safari sizes grid tracks from an input's built-in width (about 20 characters). Pin every level to the
   screen and let the passphrase box start at zero width, so it can only fill what's left beside ENTER. */
.gate-box, .gate-form, .gate-row { width: 100%; max-width: 460px; min-width: 0; }
.gate-box, .gate-form { grid-template-columns: minmax(0, 1fr); }
.gate-row input { width: 0; flex: 1 1 0; }

/* Tab bar is solid, so page text never shows through it (Safari drew the old translucent bar see-through). */
.tabbar { background: #0a0909; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Member claim: the old member list to find yourself in. */
.pick { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; }
.pick button { display: flex; gap: 12px; align-items: center; text-align: left; min-height: 46px; padding: 10px 12px; background: var(--concrete); color: var(--bone); border: 1px solid var(--line); border-radius: 3px; font: 15px var(--body); cursor: pointer; }
.pick button b { font: 500 13px var(--mono); color: var(--red-ink); flex: none; }
.pick button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick button:hover, .pick button:focus-visible { border-color: var(--red); outline: none; }
.picked { margin: 0; font: 13px var(--mono); color: var(--bone); }
.picked b { color: var(--red-ink); font-weight: 500; }

/* Admin card: same card, marked as admin with a red tag and border. */
.card.admin { border-color: var(--red); box-shadow: 0 0 18px var(--red-dim); }
.card.admin .c-top span:last-child { background: var(--red); color: #fff; padding: 2px 8px; letter-spacing: 0.2em; }

/* ---------- Status levels + achievement badges (2026-11-11) ---------- */
.bdg { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #131111; color: var(--ash); }
.bdg .ic { width: 22px; height: 22px; }
.bdg.xs { width: 18px; height: 18px; border-radius: 4px; border: 0; background: none; }
.bdg.xs .ic { width: 14px; height: 14px; }
.bdg.lg { width: 72px; height: 72px; border-radius: 16px; }
.bdg.lg .ic { width: 38px; height: 38px; }
.bdg.t1 { color: var(--ash); }
.bdg.t2 { color: var(--bone); border-color: #4a4542; }
.bdg.t3 { color: var(--red-ink); border-color: var(--red); }
.bdg.t4 { color: #fff; background: var(--red); border-color: var(--red); box-shadow: 0 0 16px var(--red-glow); }
.bdg.ach { color: var(--bone); border-color: var(--red); background: #1c0a0f; }
.bdg.locked { opacity: 0.32; }
.bdg.xs.t3, .bdg.xs.t4 { color: var(--red-ink); background: none; box-shadow: none; }
.pill .bdg.xs { margin: -2px 0 -2px -2px; }

.statusbox { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.statusbox h2 { margin: 0; font-family: var(--display); font-size: 24px; }
.statusbox .sub { font: 12px var(--mono); color: var(--ash); letter-spacing: 0.08em; }
.lvlbar { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 8px; }
.lvlbar i { display: block; height: 100%; background: var(--red); box-shadow: 0 0 10px var(--red-glow); }
.ladder-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.ladder-row .bdg { width: 100%; height: auto; aspect-ratio: 1; }
.ladder-row .bdg .ic { width: 55%; height: 55%; }
.achs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ach { display: flex; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--concrete); min-width: 0; }
.ach div { min-width: 0; display: grid; gap: 2px; }
.ach b { font-size: 13px; }
.ach span { font: 12px var(--mono); color: var(--ash); line-height: 1.35; }
.ach.off b { color: var(--ash); }

.unlock { position: fixed; left: 50%; top: calc(16px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center; padding: 12px 16px 12px 12px; border-radius: 12px; background: #131111; border: 1px solid var(--red); box-shadow: 0 0 28px var(--red-glow), 0 12px 30px rgba(0,0,0,0.6); color: var(--bone); width: max-content; max-width: calc(100vw - 32px); animation: unlock 3.6s ease forwards; }
.unlock span { display: grid; gap: 2px; font-size: 14px; }
.unlock b { font: 600 12px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red-ink); }
@keyframes unlock { 0% { opacity: 0; transform: translate(-50%, -14px) scale(0.96); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -8px); } }
@media (prefers-reduced-motion: reduce) { .unlock { animation: none; } }

.board .bdg { width: 34px; height: 34px; border-radius: 8px; }
.board .bdg .ic { width: 18px; height: 18px; }
.board.top li { grid-template-columns: 28px 34px minmax(0, 1fr) auto; }
.board.top li:nth-child(-n+3) .pl { color: var(--red-ink); }

/* Admin activity log */
.log-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-height: 520px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--concrete); }
.log-list li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px; }
.log-list li:last-child { border-bottom: 0; }
.log-list .when { font-size: 12px; padding-top: 2px; }
.log-list em { display: block; font-style: normal; font: 12px var(--mono); color: var(--ash); margin-top: 2px; }

/* ---------- Profiles: one car photo, bio, upgrades, socials ---------- */
.plink { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plink:hover, .plink:focus-visible { text-decoration-color: var(--red); }
.pf { display: grid; gap: 22px; }
.pf-hero { position: relative; margin: 0; border-radius: 12px; overflow: hidden; background: var(--concrete); aspect-ratio: 4 / 5; border: 1px solid var(--line); }
.pf-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-none { height: 100%; display: grid; place-items: center; font: 500 12px var(--mono); letter-spacing: 0.24em; color: var(--ash); }
.pf-tag { position: absolute; top: 12px; left: 12px; font: 500 12px var(--mono); letter-spacing: 0.14em; padding: 5px 9px; background: var(--red); color: #fff; text-transform: uppercase; }
.pf-id { display: grid; gap: 10px; }
.pf-car { margin: 0; font-family: var(--display); font-size: 28px; line-height: 1.15; text-wrap: balance; }
.pf-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; font: 12px var(--mono); color: var(--ash); }
.pf-level { display: inline-flex; align-items: center; gap: 8px; color: var(--bone); }
.pf-bio { margin: 0; font-size: 16px; line-height: 1.6; max-width: 65ch; white-space: pre-line; }
.pf-sec { display: grid; gap: 12px; }
.pf-ups { list-style: none; margin: 0; padding: 0; }
.pf-ups .chip { cursor: default; color: var(--bone); }
.pf-socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.pf-socials .btn { display: grid; gap: 2px; text-align: left; min-height: 56px; }
.pf-socials .btn b { font: 500 12px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ash); }
.pf-socials .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: none; letter-spacing: 0; font: 500 15px var(--body); color: var(--bone); }
.pf-actions { display: grid; gap: 10px; }
.pf-actions:empty { display: none; }
.pf-photo { aspect-ratio: 4 / 5; max-width: 220px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--concrete); display: grid; place-items: center; font: 12px var(--mono); color: var(--ash); }
.pf-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Notifications: the bell and the inbox ---------- */
.pill.bell { color: var(--ash); text-decoration: none; padding: 5px 9px; }
.pill.bell .ic { width: 13px; height: 13px; }
.pill.bell.on { color: var(--bone); border-color: var(--red); background: var(--red-dim); }
.pill.bell b { font: 500 12px var(--mono); color: var(--bone); }
.pill.bell:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inbox a, .inbox .ib { display: grid; grid-template-columns: 10px 1fr; gap: 4px 12px; padding: 14px 14px 14px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--concrete); color: inherit; text-decoration: none; }
.inbox a:hover, .inbox a:focus-visible { border-color: var(--ash); }
.inbox .dot { grid-row: 1 / span 3; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
.inbox .new .dot { background: var(--red); }
.inbox .t { font-weight: 700; line-height: 1.35; }
.inbox .new .t { color: var(--bone); }
.inbox li:not(.new) .t { color: #c9c2b8; }
.inbox .b { font-size: 14px; line-height: 1.5; color: #c9c2b8; }
.inbox .w { font: 12px var(--mono); color: var(--ash); letter-spacing: 0.04em; }
.inbox .k { color: var(--red-ink); text-transform: uppercase; letter-spacing: 0.12em; margin-right: 8px; }

/* ---------- Organized upgrades: editor on Me, build sheet on profiles ---------- */
.upg-wrap { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.upg-wrap legend { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); padding: 0; margin-bottom: 4px; }
.upg { border: 1px solid var(--line); border-radius: 10px; background: var(--void); }
.upg.has { border-color: #3a3535; }
.upg summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; cursor: pointer; font-weight: 700; }
.upg summary::-webkit-details-marker { display: none; }
.upg summary::after { content: "+"; font: 500 18px var(--mono); color: var(--ash); margin-left: 4px; }
.upg[open] summary::after { content: "−"; }
.upg summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; border-radius: 10px; }
.upg .cnt { margin-left: auto; font: 500 12px var(--mono); color: var(--red-ink); }
.upg-fields { display: grid; gap: 12px; padding: 4px 14px 16px; }
.bsheet { display: grid; gap: 10px; }
.bs-g { border: 1px solid var(--line); border-radius: 10px; background: var(--concrete); padding: 14px; }
.bs-g h4 { margin: 0 0 10px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red-ink); }
.bs-g dl, .pf-quick { margin: 0; display: grid; gap: 0; }
.bs-g dl div, .pf-quick div { display: grid; grid-template-columns: minmax(96px, 38%) 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.bs-g dl div:first-child { border-top: 0; padding-top: 0; }
.bs-g dt, .pf-quick dt { font: 12px var(--mono); color: var(--ash); letter-spacing: 0.04em; }
.bs-g dd, .pf-quick dd { margin: 0; font-weight: 500; color: var(--bone); overflow-wrap: anywhere; }
.pf-quick { border: 1px solid var(--line); border-radius: 10px; padding: 2px 14px; }
.pf-quick div:first-child { border-top: 0; }
.upg-fields input::placeholder { color: #5f5a55; font-style: italic; }
/* The header shows bell, streak and XP; rank lives on the Path and Me (UX review 2026-11-12). */

/* ---------- Tap targets and inputs (UX review 2026-11-12) ---------- */
/* Every control is at least 44px tall. Inputs are 16px so iPhone doesn't zoom in when you tap a field. */
.btn, .nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn.big { display: flex; }
.field input, .field textarea, .field select, select { font-size: 16px; min-height: 44px; }
.tabs-mini button { min-height: 44px; }
.respect { min-height: 44px; }
/* Names: a taller tap area without moving the layout. */
.plink { display: inline-block; padding: 14px 0; margin: -14px 0; max-width: 100%; vertical-align: middle; }
/* The bell stays small to look at but takes a 44px tap. */
.pill.bell { position: relative; }
.pill.bell::after { content: ""; position: absolute; inset: -10px -6px; }

/* ---------- Me split into Me / Edit profile / Settings ---------- */
.back { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.back:hover, .back:focus-visible { color: var(--bone); }
.me-actions, .save-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.save-bar { grid-template-columns: 2fr 1fr; position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); padding: 10px 0; background: linear-gradient(to top, var(--void) 70%, transparent); z-index: 5; }
.me-links { display: grid; gap: 8px; }

/* ---------- Admin tabs ---------- */
.atabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; margin: 0 0 4px; background: var(--void); scrollbar-width: none; }
.atabs::-webkit-scrollbar { display: none; }
.atabs button { flex: none; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); background: none; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.atabs button[aria-selected="true"] { color: var(--bone); border-color: var(--red); background: var(--red-dim); }
.atabs button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.atabs b { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--red); color: #fff; font: 500 12px/20px var(--mono); letter-spacing: 0; text-align: center; }

/* ---------- Crew: car photos as avatars ---------- */
.board li, .board.top li { grid-template-columns: 28px 40px minmax(0, 1fr) auto; }
.board .av, .board .bdg { width: 40px; height: 40px; border-radius: 8px; }
.board .av { object-fit: cover; display: block; background: var(--slab); border: 1px solid var(--line); }
.reg-ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; margin-bottom: 6px; display: block; background: var(--slab); }

/* ---------- Feed: words under the swipe buttons ---------- */
.deck-actions { align-items: flex-start; }
.deck-actions .act { display: grid; grid-template-rows: 64px auto; justify-items: center; align-items: center; gap: 6px; }
.deck-actions .act > span { font: 500 12px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ash); }

/* Admin: long lists (302 member codes, everyone in the app) scroll inside their box, with search above. */
.sec[data-tab] .scroll { max-height: min(60vh, 560px); overflow: auto; overscroll-behavior: contain; border: 1px solid var(--line); border-radius: 8px; }

/* ---------- Crew card (2026-11-12): modern black card with a big brush 余白 watermark ---------- */
@property --ykc-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes ykc-spin { to { --ykc-a: 360deg; } }
@keyframes ykc-breathe { 50% { opacity: 0.7; transform: scale(1.03); } }
.ykc { --ykc-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace; position: relative; width: 100%; max-width: 420px; aspect-ratio: 1.586; border-radius: 18px; isolation: isolate; container-type: inline-size; }
.ykc-face {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; padding: 6cqw 6.2cqw 5.4cqw;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto auto auto auto;
  grid-template-areas: "brand tier" "chip kanji" "num num" "name name" "meta meta" "serial lv";
  background: radial-gradient(90% 120% at 100% 100%, rgba(222,0,61,0.08), transparent 55%), radial-gradient(80% 70% at 0% 0%, rgba(255,255,255,0.07), transparent 60%), linear-gradient(150deg, #161515, #0b0a0a);
  border: 1px solid rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 22px 44px -20px rgba(0,0,0,0.9);
}
.ykc-face::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px); background-size: 14px 14px;
  -webkit-mask: linear-gradient(120deg, transparent 30%, #000 70%); mask: linear-gradient(120deg, transparent 30%, #000 70%); }
.ykc-face > * { position: relative; z-index: 2; min-width: 0; }
/* The big brush watermark sits below the tier pill and bleeds off the bottom edge. */
.ykc-face > .ykc-wm { position: absolute; z-index: 1; right: 1cqw; top: 22cqw; writing-mode: vertical-rl; white-space: nowrap;
  font: 800 33cqw/1 "Shippori Mincho B1", var(--display); color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: linear-gradient(180deg, rgba(233,227,214,0.13), rgba(233,227,214,0.02)); pointer-events: none; }
.ykc-brand { grid-area: brand; align-self: center; font: 500 max(9px, 2.8cqw) var(--ykc-mono); letter-spacing: 0.38em; text-transform: uppercase; color: #9a928a; white-space: nowrap; overflow: hidden; }
.ykc-tier { grid-area: tier; justify-self: end; display: inline-flex; align-items: center; gap: 7px; font: 500 max(9px, 2.8cqw) var(--ykc-mono); letter-spacing: 0.24em; text-transform: uppercase;
  padding: 5px 10px 5px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); color: var(--bone); background: rgba(10,9,9,0.55); }
.ykc-tier i { width: 6px; height: 6px; border-radius: 50%; background: #9a928a; }
.ykc-chip { grid-area: chip; align-self: center; width: 11cqw; height: 8.4cqw; border-radius: 7px; border: 1px solid rgba(233,227,214,0.35); position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); }
.ykc-chip::before { content: ""; position: absolute; inset: 26% 0; border-top: 1px solid rgba(233,227,214,0.3); border-bottom: 1px solid rgba(233,227,214,0.3); }
.ykc-chip::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid rgba(233,227,214,0.3); }
.ykc-kanji { grid-area: kanji; align-self: center; justify-self: end; writing-mode: vertical-rl; font: 700 max(12px, 3.9cqw)/1 "Zen Kaku Gothic New", var(--body); letter-spacing: 0.3em; color: #b9b1a6; }
.ykc-num { grid-area: num; display: flex; align-items: baseline; gap: 2.2cqw; font: 900 9.4cqw/1 "Zen Kaku Gothic New", var(--body); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--bone); margin-top: 1.5cqw; }
.ykc-num small { font: 500 max(9px, 3cqw) var(--ykc-mono); letter-spacing: 0.24em; color: #9a928a; text-transform: uppercase; }
.ykc-name { grid-area: name; font: 700 5cqw/1.2 "Zen Kaku Gothic New", var(--body); color: var(--bone); margin-top: 1.6cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ykc-meta { grid-area: meta; font: 500 max(9px, 2.8cqw) var(--ykc-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #a39b92; margin-top: 1.2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ykc-serial, .ykc-lv { font: 500 max(9px, 2.6cqw) var(--ykc-mono); letter-spacing: 0.14em; text-transform: uppercase; color: #7d766f; margin-top: 1.2cqw; white-space: nowrap; }
.ykc-serial { grid-area: serial; }
.ykc-lv { grid-area: lv; justify-self: end; }

/* Zenith: champagne gold. Gold edge, chip, number, kanji and watermark, with a warm glow (Em's pick, 2026-11-12). */
.ykc-zenith { filter: drop-shadow(0 16px 30px rgba(212,180,120,0.22)); }
.ykc-zenith::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.3px; z-index: 3; pointer-events: none;
  background: linear-gradient(140deg, #f3dfae, rgba(201,166,97,0.25) 35%, rgba(201,166,97,0.25) 65%, #e7cc8f);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.ykc-zenith .ykc-face { border-color: transparent; background: radial-gradient(90% 120% at 100% 100%, rgba(201,166,97,0.16), transparent 55%), radial-gradient(80% 70% at 0% 0%, rgba(255,255,255,0.07), transparent 60%), linear-gradient(150deg, #171512, #0b0a09); }
.ykc-zenith .ykc-face > .ykc-wm { background-image: linear-gradient(180deg, rgba(231,204,143,0.40), rgba(201,166,97,0.05)); }
.ykc-zenith .ykc-num { background: linear-gradient(100deg, #fff6df, #d4b478 50%, #f6e6bd); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ykc-zenith .ykc-num small { -webkit-text-fill-color: #b9a77f; }
.ykc-zenith .ykc-kanji { color: #e7cc8f; text-shadow: 0 0 10px rgba(231,204,143,0.45); }
.ykc-zenith .ykc-tier { border-color: rgba(231,204,143,0.5); color: #f6e6bd; }
.ykc-zenith .ykc-tier i { background: #e7cc8f; box-shadow: 0 0 8px #e7cc8f; }
.ykc-zenith .ykc-chip { border-color: rgba(231,204,143,0.6); background: linear-gradient(135deg, rgba(231,204,143,0.35), rgba(201,166,97,0.08)); }

/* Admin: red bloom behind the card, a light that travels round the edge, glowing kanji and number. */
.ykc-admin { filter: drop-shadow(0 18px 34px rgba(222,0,61,0.35)); }
.ykc-bloom { position: absolute; inset: -14px; border-radius: 30px; z-index: -1; background: radial-gradient(60% 60% at 70% 60%, rgba(222,0,61,0.55), transparent 70%); filter: blur(18px); animation: ykc-breathe 4s ease-in-out infinite; }
.ykc-admin::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--ykc-a), transparent 0deg, #ff3d68 80deg, #fff 95deg, #ff3d68 110deg, transparent 150deg, transparent 220deg, rgba(222,0,61,0.6) 280deg, transparent 330deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ykc-spin 6s linear infinite; }
.ykc-admin .ykc-face { border-color: rgba(222,0,61,0.35); background: radial-gradient(80% 110% at 100% 100%, rgba(222,0,61,0.28), transparent 60%), radial-gradient(80% 70% at 0% 0%, rgba(255,255,255,0.08), transparent 60%), linear-gradient(150deg, #1a1213, #0b0708); }
.ykc-admin .ykc-face > .ykc-wm { background-image: linear-gradient(180deg, rgba(255,61,104,0.34), rgba(222,0,61,0.04)); }
.ykc-admin .ykc-tier { border-color: rgba(255,61,104,0.6); background: rgba(60,0,16,0.7); color: #fff; }
.ykc-admin .ykc-tier i { background: #ff3d68; box-shadow: 0 0 8px #ff3d68; }
.ykc-admin .ykc-kanji { color: #ff3d68; text-shadow: 0 0 12px rgba(255,61,104,0.65); }
.ykc-admin .ykc-num { color: #fff; text-shadow: 0 0 18px rgba(255,61,104,0.55); }
@media (prefers-reduced-motion: reduce) { .ykc-admin::before, .ykc-bloom { animation: none; } }

/* ---------- Meet page (/meets/:id): shareable, Going / Maybe / Can't go ---------- */
.mt { display: grid; gap: 18px; }
.mt-hero { position: relative; margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--concrete); border: 1px solid var(--line); }
.mt-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mt-noimg { height: 100%; display: grid; place-items: center; font: 800 64px var(--display); color: rgba(233,227,214,0.08); letter-spacing: 0.1em; }
.mt-state { position: absolute; top: 12px; left: 12px; font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 9px; background: rgba(10,9,9,0.8); color: var(--bone); border: 1px solid var(--line); }
.mt-state.s-live { background: var(--red); border-color: var(--red); color: #fff; }
.mt-state.s-cancelled, .mt-state.s-ended { color: var(--ash); }
.mt-title { margin: 0; font-family: var(--display); font-size: 30px; line-height: 1.15; text-wrap: balance; }
.mt-when { margin: -8px 0 0; font: 500 14px var(--mono); color: var(--bone); letter-spacing: 0.04em; }
.mt-when span { color: var(--ash); }
.mt-place { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--concrete); }
.mt-place span { font: 500 12px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ash); }
.mt-place b { font-weight: 700; }
.mt-desc { margin: 0; font-size: 16px; line-height: 1.6; white-space: pre-line; max-width: 65ch; }
.mt-org { margin: 0; color: var(--ash); }
.mt-rsvp { display: grid; gap: 8px; }
.seg3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg3 button { min-height: 52px; font: 500 13px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); background: var(--concrete); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.seg3 button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.seg3 button[data-r="cant_go"][aria-pressed="true"] { background: var(--slab); border-color: var(--ash); color: var(--bone); }
.seg3 button.hint { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.seg3 button.busy { opacity: 0.7; }
.seg3 button:disabled { cursor: wait; }
.seg3 button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.mt-going { display: grid; gap: 10px; }
.mt-going em { font-style: normal; color: var(--ash); text-transform: none; letter-spacing: 0; }
.mt-people { list-style: none; margin: 0; padding: 0; }
.mt-people .chip { display: inline-flex; align-items: center; min-height: 36px; color: var(--bone); text-decoration: none; }
.mt-share { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-share:has(> :only-child) { grid-template-columns: 1fr; }
.btn.danger { color: var(--red-ink); border-color: rgba(222,0,61,0.45); }
.note .linkish { padding: 0 2px; color: var(--bone); text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.mcard { display: grid; gap: 10px; }
.mcard-cover { display: block; margin: -16px -16px 4px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px 10px 0 0; background: var(--slab); }
.mcard-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard-title { color: inherit; text-decoration: none; }
.mcard-title:hover, .mcard-title:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.mcard-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard.s-cancelled { opacity: 0.6; }
.mcard .seg3 button { min-height: 44px; font-size: 12px; }
.checks span em { font-style: normal; font: 500 12px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin-left: 6px; }

/* ---------- Live check-in: host screen, scanned-code card, admin check-in list ---------- */
.codescreen { position: fixed; inset: 0; z-index: 80; background: rgba(7,6,6,0.97); display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.cs-inner { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; }
.cs-code { font: 900 72px/1 "Zen Kaku Gothic New", var(--body); letter-spacing: 0.16em; color: #fff; text-shadow: 0 0 26px rgba(255,61,104,0.5); font-variant-numeric: tabular-nums; }
.cs-qr { width: min(280px, 72vw); aspect-ratio: 1; background: #f1ece4; border-radius: 14px; padding: 10px; }
.cs-qr svg { width: 100%; height: 100%; display: block; }
.cs-bar { width: min(280px, 72vw); height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.cs-bar i { display: block; height: 100%; background: var(--red); transition: width 0.25s linear; }
.ci-card { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--red); border-radius: 12px; background: var(--red-dim); }
.ci-card b { display: block; font-size: 17px; }
.ci-card span { font: 500 12px var(--mono); letter-spacing: 0.08em; color: var(--bone); }
.ci-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ci-list li { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--concrete); }
.ci-list li span { font: 12px var(--mono); color: var(--ash); }

/* ---------- Feedback ---------- */
.fb-item.done { opacity: 0.6; }
.fb-body { margin: 0; white-space: pre-line; line-height: 1.55; }
.fb-shots { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-shots img { width: 96px; height: 160px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); display: block; }
.fb-dev summary { font: 500 12px var(--mono); color: var(--ash); cursor: pointer; min-height: 32px; display: flex; align-items: center; }
#fb .seg3 { margin-top: 2px; }