/* 今天吃什么 — tactical pick screen. A single deliberate dark theme (HUD on navy);
   light surfaces appear only where something is selected or locked. */

:root {
  --bg: #0f1923;
  --bg-2: #16222c;
  --bg-3: #1f2c38;
  --bg-4: #2a3a48;
  --line: rgba(236, 232, 225, 0.14);
  --line-2: rgba(236, 232, 225, 0.32);
  --bone: #ece8e1;
  --muted: #9aa6b1;
  --faint: #6c7780;
  --red: #ff4655;
  --red-2: #d62836;
  --red-ink: #ffd9dc;
  --teal: #3fd6c6;
  --teal-2: #1f8f86;
  --tabbar-h: 60px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* "Noto Sans SC" is only a 900-weight subset for display words, so it stays out of these stacks */
  --sans: "Barlow Semi Condensed", system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --display: "Saira Extra Condensed", "Barlow Semi Condensed", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --cjk: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --cut: 12px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body {
  font: 500 16px/1.5 var(--sans);
  color: var(--bone);
  background-color: var(--bg);
  background-image:
    linear-gradient(180deg, rgba(255, 70, 85, 0.07), transparent 38%),
    repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(236, 232, 225, 0.025) calc(25% - 1px) 25%);
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}
button, input, a, label, select { touch-action: manipulation; font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- views ---------- */

.app { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.view { position: absolute; inset: 0 0 calc(var(--tabbar-h) + var(--safe-b)); display: none; pointer-events: auto; }
body[data-tab="pick"] .view-pick { display: flex; }
body[data-tab="log"] .view-log { display: block; }
body[data-tab="map"] .view-map { display: block; pointer-events: none; }
body.drawing .view-map { bottom: 0; }

/* ---------- stage (map) ---------- */

.stage { position: fixed; inset: 0; z-index: 1; visibility: hidden; background: #0c151d; }
.map { position: absolute; inset: 0; }
body[data-tab="map"] .stage { visibility: visible; }
body:not([data-tab="map"]):not(.show) .stage .maplibregl-control-container { display: none; }
body.show .stage { visibility: visible; z-index: 30; animation: scan-in 0.45s cubic-bezier(0.5, 0, 0.2, 1) both; }
@keyframes scan-in {
  from { clip-path: inset(0 0 100% 0); filter: brightness(2.2) saturate(0); }
  to { clip-path: inset(0); filter: none; }
}
.maplibregl-ctrl-attrib { font-size: 11px; }
.maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(15, 25, 35, 0.88); color: var(--muted); }
.maplibregl-ctrl-attrib a { color: var(--muted); }
.maplibregl-ctrl-attrib-button { background-color: rgba(236, 232, 225, 0.9); }
body[data-tab="map"] .maplibregl-ctrl-bottom-right { bottom: calc(var(--tabbar-h) + var(--safe-b) + 4px); }
body.drawing .maplibregl-ctrl-bottom-right { bottom: 150px; }

/* radar sweep while the lottery scans */
.sweep {
  position: absolute; left: 50%; top: 48%;
  width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg 300deg, rgba(255, 70, 85, 0.05) 330deg, rgba(255, 70, 85, 0.22) 359deg, transparent 360deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
body.scanning .sweep { opacity: 1; animation: sweep 1.5s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }

/* ---------- pick view ---------- */

.view-pick {
  flex-direction: column;
  padding: calc(var(--safe-t) + 8px) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  gap: 10px;
}
.topbar { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.topbar-mark { width: 10px; height: 10px; background: var(--red); transform: rotate(45deg); flex: none; }
.topbar-title { flex: 1; font: 700 15px/1 var(--sans); letter-spacing: 0.12em; color: var(--muted); }
.edit-wheel { gap: 8px; }
.edit-wheel .count { font: 700 20px/1 var(--display); color: var(--bone); }

.readout { position: relative; padding: 6px 0 12px; min-height: 124px; display: flex; flex-direction: column; justify-content: flex-end; }
.readout::before { /* the selection slab behind the name */
  content: ""; position: absolute; right: -12px; top: 0; bottom: 6px; width: 42%;
  background: repeating-linear-gradient(-55deg, rgba(236, 232, 225, 0.05) 0 2px, transparent 2px 9px);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.readout-name {
  position: relative;
  margin: 0;
  font: 800 clamp(46px, 15.5vw, 84px)/0.86 var(--display);
  text-transform: uppercase;
  letter-spacing: 0.005em;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding-top: 0.06em;
}
.readout-name.is-cjk { font: 900 clamp(40px, 12.5vw, 64px)/1.05 var(--cjk); letter-spacing: 0.04em; }
.readout-name.is-new { color: var(--red); }
body.busy .readout-name { text-shadow: 2px 0 rgba(255, 70, 85, 0.55), -2px 0 rgba(63, 214, 198, 0.45); }
.readout-sub {
  position: relative;
  margin: 10px 0 0; padding-left: 14px;
  font-size: 14px; line-height: 1.4; color: var(--muted);
  min-height: 1.4em;
}
.readout-sub::before { content: ""; position: absolute; left: 0; top: 0.25em; width: 4px; height: 1em; background: var(--red); }

.roster-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; margin: 0 -4px; padding: 4px; }
.roster {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-content: start;
  grid-auto-rows: minmax(66px, 1fr);
  height: min(100%, calc(var(--rows, 3) * 106px));
  min-height: calc(var(--rows, 3) * 72px);
}
.card {
  position: relative;
  min-height: 66px;
  padding: 8px 9px 7px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4px;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background 0.12s, color 0.12s, opacity 0.25s;
}
.card-name {
  font: 700 clamp(17px, 5.2vw, 22px)/0.95 var(--display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-meta { position: relative; font-size: 12px; line-height: 1.2; color: var(--muted); }
.card-name { position: relative; }
.card-mono {
  position: absolute; right: -2px; bottom: -14px;
  font: 800 clamp(64px, 22vw, 104px)/1 var(--display);
  color: rgba(236, 232, 225, 0.05);
  pointer-events: none;
}
.card.won .card-mono { color: rgba(15, 25, 35, 0.1); }
.card-ping { display: none; }
.card:has(.card-ping) .card-meta { padding-left: 14px; }
.card:has(.card-ping) .card-meta::before { content: ""; position: absolute; left: 1px; top: 0.3em; width: 7px; height: 7px; background: var(--teal); transform: rotate(45deg); box-shadow: 0 0 6px rgba(63, 214, 198, 0.7); }
.card.won:has(.card-ping) .card-meta::before { background: var(--teal-2); box-shadow: none; }
.card-new {
  border-color: rgba(255, 70, 85, 0.55);
  background: repeating-linear-gradient(-45deg, rgba(255, 70, 85, 0.16) 0 5px, rgba(255, 70, 85, 0.04) 5px 11px), var(--bg-2);
}
.card-new .card-name { color: var(--red); font-size: clamp(22px, 7vw, 28px); }
.card-q { position: absolute; right: 8px; top: -4px; font: 800 52px/1 var(--display); color: rgba(255, 70, 85, 0.22); pointer-events: none; }
.card.hot { background: var(--bg-4); border-color: var(--line-2); }
.card.dim { opacity: 0.42; }
.card.won { background: var(--bone); color: var(--bg); border-color: var(--bone); opacity: 1; }
.card.won .card-meta { color: #3c4a56; }
.card-new.won { background: var(--red); color: var(--bone); border-color: var(--red); }
.card-new.won .card-name, .card-new.won .card-meta { color: var(--bone); }
.card-new.won .card-q { color: rgba(255, 255, 255, 0.25); }

.sel-frame { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition-property: transform, width, height; transition-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1); z-index: 2; }
.sel-frame.show { opacity: 1; }
.sel-frame i { position: absolute; width: 14px; height: 14px; border: 0 solid var(--bone); }
.sel-frame i:nth-child(1) { left: -4px; top: -4px; border-left-width: 3px; border-top-width: 3px; }
.sel-frame i:nth-child(2) { right: -4px; top: -4px; border-right-width: 3px; border-top-width: 3px; }
.sel-frame i:nth-child(3) { left: -4px; bottom: -4px; border-left-width: 3px; border-bottom-width: 3px; }
.sel-frame i:nth-child(4) { right: -4px; bottom: -4px; border-right-width: 3px; border-bottom-width: 3px; }
.sel-frame.racing i { border-color: var(--red); }
.sel-frame.won { transition-timing-function: cubic-bezier(0.3, 1.7, 0.5, 1); animation: lock-pulse 0.5s ease-out; }
@keyframes lock-pulse { 0% { filter: drop-shadow(0 0 0 var(--bone)); } 40% { filter: drop-shadow(0 0 8px var(--bone)); } 100% { filter: none; } }

.roster-empty { display: grid; gap: 8px; justify-items: start; padding: 18px; border: 1px dashed var(--line-2); font-size: 14px; color: var(--muted); }
.roster-empty p { margin: 0; }
.roster-empty-h { font: 900 22px/1.2 var(--cjk); color: var(--bone); }

.actionbar { padding: 4px; border: 1px solid var(--line-2); flex: none; }
.lockin {
  width: 100%; min-height: 66px; border: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--bone);
  background: var(--red);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: background 0.12s, transform 0.08s;
}
.lockin-label { font: 900 26px/1 var(--cjk); letter-spacing: 0.5em; padding-left: 0.5em; }
.lockin-sub { font-size: 12px; line-height: 1.2; opacity: 0.85; letter-spacing: 0.08em; }
.lockin:active:not(:disabled) { background: var(--red-2); transform: translateY(1px); }
.lockin:disabled { background: #6b2a33; color: rgba(236, 232, 225, 0.75); }
.lockin:disabled .lockin-sub { visibility: hidden; }
.lockin:focus-visible { outline-offset: 6px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 0;
  background: none;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  transition: background 0.12s, color 0.12s, transform 0.08s;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; }
.btn-red { background: var(--red); color: #fff; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.btn-red:active:not(:disabled) { background: var(--red-2); }
.btn-teal { background: var(--teal); color: var(--bg); clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)); }
.btn-ghost { border-color: var(--line-2); color: var(--bone); }
.btn-ghost:active:not(:disabled) { background: rgba(236, 232, 225, 0.08); }
.btn-sm { min-height: 44px; padding: 0 12px; font-size: 14px; }
.btn-mini { min-height: 44px; min-width: 44px; padding: 0 12px; font-size: 14px; border-color: var(--line-2); flex: none; }
.btn-mini-teal { border-color: rgba(63, 214, 198, 0.6); color: var(--teal); }
.btn-mini-quiet { border-color: var(--line); color: var(--muted); }
.btn-mini.armed { background: var(--red); border-color: var(--red); color: #fff; }
.btn-x { font-size: 22px; line-height: 1; padding: 0; color: var(--muted); border-color: transparent; }

/* ---------- tab bar ---------- */

.tabbar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding: 0 max(8px, env(safe-area-inset-left)) var(--safe-b);
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: #0b131a;
  border-top: 1px solid var(--line);
  pointer-events: auto;
  z-index: 5;
}
body.drawing .tabbar { display: none; }
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; background: none; color: var(--faint); font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
}
.tabbar button[aria-current="page"] { color: var(--bone); }
.tabbar button[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 28%; right: 28%; height: 3px; background: var(--red); }
.tab-ico { width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.ico-pick { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3z'/%3E%3Cpath d='M13 13h3v2h-1v1h-2zM21 13v3h-2v-1h-1v-2zM13 21v-3h2v1h1v2zM21 21h-3v-2h1v-1h2z'/%3E%3C/svg%3E"); }
.ico-map { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 23 12 12 23 1 12zm0 4.2L5.2 12 12 18.8 18.8 12z'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3C/svg%3E"); }
.ico-log { --m: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 4h4v4H2zM8 5h14v2H8zM2 10h4v4H2zM8 11h14v2H8zM2 16h4v4H2zM8 17h14v2H8z'/%3E%3C/svg%3E"); }

/* ---------- map view chrome ---------- */

.view-map > * { pointer-events: auto; }
.map-top { position: absolute; top: calc(var(--safe-t) + 10px); left: 12px; right: 70px; display: grid; gap: 8px; pointer-events: none; }
.map-top > * { pointer-events: auto; }
.notice {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px;
  background: rgba(15, 25, 35, 0.95);
  border: 1px solid var(--line-2);
  box-shadow: inset 4px 0 0 var(--red);
  font-size: 14px; line-height: 1.45;
}
.notice span { flex: 1; }
.notice-inline { margin: 0 0 12px; }
.draw-tip {
  padding: 10px 12px 10px 14px;
  background: rgba(15, 25, 35, 0.95); border: 1px solid rgba(63, 214, 198, 0.6);
  box-shadow: inset 4px 0 0 var(--teal);
  font-size: 14px; display: grid; gap: 2px;
}
.draw-tip strong { color: var(--teal); font-size: 15px; letter-spacing: 0.08em; }

.map-tools { position: absolute; top: calc(var(--safe-t) + 10px); right: 10px; display: grid; gap: 6px; }
body.drawing .map-tools, body.drawing .legend, body.no-gl .legend, body.no-gl #tool-pitch, body.no-gl #tool-home { display: none; }
.tool {
  width: 50px; height: 50px;
  border: 1px solid var(--line-2);
  background: rgba(15, 25, 35, 0.92);
  color: var(--bone);
  font: 700 19px/1 var(--display);
  letter-spacing: 0.04em;
}
#tool-areas { font: 700 14px/1 var(--sans); }
.legend {
  position: absolute; left: 10px; bottom: 36px;
  margin: 0; padding: 7px 10px; list-style: none;
  display: grid; grid-template-columns: auto auto; gap: 3px 14px;
  background: rgba(15, 25, 35, 0.9); border: 1px solid var(--line);
  font-size: 12px; color: var(--muted);
}
.legend li { display: flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; transform: rotate(45deg); display: inline-block; flex: none; }
.s-new { background: var(--red); }
.s-wheel { background: var(--teal); }
.s-visited { background: #c9c2b6; }
.s-blocked { background: #56626d; }

.draw-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 12px 12px calc(12px + var(--safe-b));
  background: rgba(15, 25, 35, 0.97);
  border-top: 1px solid var(--teal);
  display: grid; gap: 10px;
}
.draw-bar input, .add-row input {
  width: 100%; min-height: 48px; padding: 0 14px;
  font-size: 16px; font-weight: 500;
  border: 1px solid var(--line-2); border-radius: 0;
  background: rgba(0, 0, 0, 0.3); color: var(--bone);
}
.draw-bar input:focus, .add-row input:focus { border-color: var(--bone); outline: none; }
.draw-bar input::placeholder, .add-row input::placeholder { color: var(--faint); }
.draw-actions { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 8px; }

.pse-pin { pointer-events: none; }
.pse-pin span {
  display: block; padding: 3px 7px 2px;
  background: var(--bone); color: var(--bg);
  font: 800 15px/1 var(--display); letter-spacing: 0.08em;
  position: relative;
}
.pse-pin span::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--bone); }

.map-fallback { position: absolute; inset: calc(var(--safe-t) + 70px) 0 0; overflow-y: auto; padding: 0 14px 20px; background: var(--bg); }
.row-btn { border: 0; background: none; text-align: left; padding: 6px 0; min-height: 44px; }

/* ---------- HUD, pings, banner ---------- */

.hud { position: fixed; inset: 0 0 auto; z-index: 35; pointer-events: none; padding: calc(var(--safe-t) + 10px) 12px 0; }
.hud > * { pointer-events: auto; }
.hud-top { display: flex; align-items: flex-start; gap: 10px; }
.hud-title {
  flex: 1; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  font-size: 14px; color: var(--bone); text-shadow: 0 1px 3px #000;
}
.hud-tag { font: 800 20px/1 var(--display); letter-spacing: 0.06em; padding: 5px 9px 3px; background: var(--red); color: #fff; }
.hud[data-tone="ally"] .hud-tag { background: var(--teal); color: var(--bg); font: 900 16px/1 var(--cjk); padding: 6px 9px 5px; }
.hud-close {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--line-2); background: rgba(15, 25, 35, 0.9);
  color: var(--bone); font-size: 26px; line-height: 1;
}
.hud-name {
  margin: 12px auto 0; max-width: 94%;
  text-align: center;
  font: 800 clamp(34px, 11vw, 60px)/0.9 var(--display);
  text-transform: uppercase;
  color: var(--bone);
  text-shadow: 2px 0 rgba(255, 70, 85, 0.85), -2px 0 rgba(63, 214, 198, 0.6), 0 2px 10px #000;
  overflow-wrap: anywhere;
  pointer-events: none;
}
.hud-name.won { animation: glitch 0.35s steps(2) 2; }
.hud-name.gone { opacity: 0; transition: opacity 0.3s; }
@keyframes glitch {
  0% { transform: translate(0); clip-path: inset(0 0 55% 0); }
  50% { transform: translate(-3px, 1px); clip-path: inset(40% 0 0 0); }
  100% { transform: none; clip-path: inset(0); }
}
.hud-corner { position: fixed; width: 22px; height: 22px; border: 0 solid rgba(236, 232, 225, 0.5); pointer-events: none; }
.hud-corner.tl { left: 6px; top: calc(var(--safe-t) + 4px); border-left-width: 2px; border-top-width: 2px; }
.hud-corner.tr { right: 6px; top: calc(var(--safe-t) + 4px); border-right-width: 2px; border-top-width: 2px; }

.banner {
  position: fixed; left: 0; right: 0; top: 30%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 16px 0 14px;
  background: linear-gradient(90deg, transparent, rgba(255, 70, 85, 0.94) 14%, rgba(255, 70, 85, 0.94) 86%, transparent);
  color: #fff;
  pointer-events: none !important;
  opacity: 0;
}
.hud[data-tone="ally"] .banner { background: linear-gradient(90deg, transparent, rgba(63, 214, 198, 0.94) 14%, rgba(63, 214, 198, 0.94) 86%, transparent); color: var(--bg); }
.banner.go { animation: banner 1s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.banner-text { font: 900 clamp(34px, 11vw, 52px)/1 var(--cjk); letter-spacing: 0.32em; padding-left: 0.32em; }
.banner-sub { font: 700 14px/1 var(--sans); letter-spacing: 0.3em; padding-left: 0.3em; }
@keyframes banner {
  0% { opacity: 0; transform: scaleY(0.05); }
  14% { opacity: 1; transform: scaleY(1); }
  78% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateX(6%); }
}

.ping { width: 30px; height: 30px; pointer-events: none; --c: var(--red); --c-soft: rgba(255, 70, 85, 0.25); }
.ping-ally { --c: var(--teal); --c-soft: rgba(63, 214, 198, 0.25); }
.ping-mark {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  transform: rotate(45deg);
  background: var(--c-soft); border: 2px solid var(--c);
  transition: transform 0.08s, background 0.08s;
}
.ping::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--c); transform: rotate(45deg) scale(0.4); opacity: 0; }
.ping-name {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%);
  padding: 4px 8px 2px; background: rgba(15, 25, 35, 0.94); border-left: 3px solid var(--c);
  font: 700 17px/1 var(--display); text-transform: uppercase; white-space: nowrap; color: var(--bone);
  max-width: 62vw; overflow: hidden; text-overflow: ellipsis;
  opacity: 0;
}
.ping.on { z-index: 3; }
.ping.on .ping-mark { background: var(--c); border-color: #fff; transform: rotate(45deg) scale(1.45); box-shadow: 0 0 16px var(--c); }
.ping.on::after { animation: ping-ring 0.5s ease-out; }
.ping.on .ping-name { opacity: 1; }
.ping.out { opacity: 0.25; }
.ping.win::after { animation: ping-ring 0.9s ease-out infinite; }
.ping.win .ping-name { font-size: 20px; }
@keyframes ping-ring { 0% { opacity: 1; transform: rotate(45deg) scale(0.5); } 100% { opacity: 0; transform: rotate(45deg) scale(2.6); } }

.board {
  position: absolute; inset: calc(var(--safe-t) + 150px) 14px 46dvh;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; align-content: start; overflow: auto;
}
.board-cell { padding: 10px; border: 1px solid var(--line); background: var(--bg-2); font: 700 19px/1 var(--display); text-transform: uppercase; color: var(--muted); }
.board-cell.on { color: #fff; background: var(--red); border-color: var(--red); }
.board-cell.solo { grid-column: 1 / -1; font-size: 30px; text-align: center; }

/* ---------- sheets ---------- */

.scrim { position: fixed; inset: 0; z-index: 39; background: rgba(5, 10, 14, 0.6); }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  margin: 0 auto; width: min(100%, 540px);
  max-height: min(84dvh, 740px);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.sheet.open { transform: none; }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sheet-panel .sheet-body {
  background: var(--bg-2);
  border-top: 2px solid var(--red);
  padding: 18px 16px calc(14px + var(--safe-b));
  box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.6);
}
.sheet-h { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font: 900 21px/1.25 var(--cjk); letter-spacing: 0.08em; }
.sheet-h::before { content: ""; width: 9px; height: 9px; background: var(--red); transform: rotate(45deg); flex: none; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sheet-foot .btn { flex: 1 1 auto; }
.panel-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.empty { color: var(--muted); font-size: 14px; padding: 12px 0; list-style: none; }

.add-row { display: flex; gap: 8px; margin-bottom: 12px; }
.add-row input { flex: 1; min-width: 0; }

/* ---------- result panel (round result) ---------- */

.res {
  --tone: var(--bone);
  position: relative;
  background: var(--bg);
  border-top: 3px solid var(--tone);
  padding: 14px 16px calc(14px + var(--safe-b));
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.7);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.res::before { /* hatch in the cut corner */
  content: ""; position: absolute; right: 0; top: 0; width: 120px; height: 60px;
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--tone) 22%, transparent) 0 2px, transparent 2px 8px);
  -webkit-mask: linear-gradient(225deg, #000, transparent 70%); mask: linear-gradient(225deg, #000, transparent 70%);
  pointer-events: none;
}
.res-target { --tone: var(--red); }
.res-ally { --tone: var(--teal); }
.res-head { position: relative; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.res-via { font: 900 15px/1 var(--cjk); letter-spacing: 0.2em; padding: 6px 6px 5px 9px; background: var(--tone); color: var(--bg); }
.res-target .res-via { color: #fff; }
.res-kicker { font: 800 18px/1 var(--display); letter-spacing: 0.08em; color: var(--tone); }
.res-date { margin-left: auto; color: var(--muted); padding-right: 26px; }
.res-name {
  margin: 10px 0 2px;
  font: 800 clamp(38px, 12.5vw, 60px)/0.88 var(--display);
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.res-note { margin: 6px 0 4px; font-size: 14px; color: var(--muted); }
.stats { margin: 10px 0 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.stat { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.stat:nth-child(odd):not(.stat-wide) { border-right: 1px solid var(--line); }
.stat:nth-child(even):not(.stat-wide) { padding-left: 12px; }
.stat-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; align-items: baseline; }
.stat-wide dd { margin: 0; font-size: 14px; }
.stat dt { font-size: 12px; color: var(--muted); letter-spacing: 0.08em; }
.stat dd { margin: 2px 0 0; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere; }
.stat-key dd { font: 800 30px/1 var(--display); color: var(--tone); }
.stat small { display: block; margin-top: 3px; font: 500 12px/1.3 var(--sans); color: var(--muted); }
.res-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.res-actions > .btn { flex: 1 1 0; }
.res-actions > .btn-red, .res-actions > .btn-teal, .res-actions > .btn-wide { flex-basis: 100%; }
.res .btn-red { min-height: 54px; font: 900 20px/1 var(--cjk); letter-spacing: 0.3em; padding-left: calc(18px + 0.3em); }
.res-ok { flex-basis: 100%; text-align: center; font-weight: 700; color: var(--teal); padding: 12px 0; letter-spacing: 0.1em; }
.res-place.st-new { --tone: var(--red); }
.res-place.st-wheel { --tone: var(--teal); }
.res-place.st-visited { --tone: #c9c2b6; }
.res-place.st-blocked { --tone: #56626d; }
.res-place.st-blocked .res-via { color: var(--bone); }

.locked {
  margin: 8px 0 0; padding: 8px 0 7px;
  text-align: center;
  font: 900 22px/1 var(--cjk); letter-spacing: 0.6em; padding-left: 0.6em;
  background: var(--bone); color: var(--bg);
  animation: locked 0.42s cubic-bezier(0.3, 0.9, 0.3, 1) both;
}
@keyframes locked {
  0% { clip-path: inset(0 100% 0 0); }
  60% { clip-path: inset(0 0 0 0); background: #fff; }
  100% { clip-path: inset(0); }
}

/* ---------- rows ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-name { font-weight: 700; font-size: 17px; overflow-wrap: anywhere; line-height: 1.25; }
.row-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.row-badge { font-size: 13px; color: var(--teal); flex: none; letter-spacing: 0.06em; }
.lamp { width: 10px; height: 10px; flex: none; transform: rotate(45deg); border: 2px solid var(--faint); margin: 0 3px; }
.lamp.lit { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 8px rgba(63, 214, 198, 0.7); }
.area-label { flex-direction: row; align-items: center; gap: 12px; min-height: 48px; cursor: pointer; }
.row-text { display: flex; flex-direction: column; min-width: 0; }

.switch {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 52px; height: 28px; margin: 0;
  background: #0b131a; border: 1px solid var(--line-2); position: relative; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: var(--faint); transition: transform 0.15s, background 0.15s; }
.switch:checked { background: rgba(63, 214, 198, 0.18); border-color: var(--teal); }
.switch:checked::after { transform: translateX(24px); background: var(--teal); }

/* ---------- records view ---------- */

.view-log { overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--safe-t) + 16px) 14px 24px; }
.panel { max-width: 580px; margin: 0 auto 28px; }
.panel-h {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
  display: flex; align-items: baseline; gap: 10px;
  font: 900 19px/1.3 var(--cjk); letter-spacing: 0.1em;
}
.panel-count { margin-left: auto; font: 700 24px/1 var(--display); color: var(--muted); letter-spacing: 0.04em; }
.matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.match {
  display: grid; grid-template-columns: 5.4em minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 52px; padding-left: 12px;
  background: linear-gradient(90deg, rgba(63, 214, 198, 0.12), var(--bg-2) 40%);
  box-shadow: inset 4px 0 0 var(--teal);
}
.match-new { background: linear-gradient(90deg, rgba(255, 70, 85, 0.16), var(--bg-2) 40%); box-shadow: inset 4px 0 0 var(--red); }
.match-date { font-size: 12.5px; color: var(--muted); }
.match-name { font: 700 22px/1 var(--display); text-transform: uppercase; overflow-wrap: anywhere; padding-top: 2px; }
.match-tag { font: 800 14px/1 var(--display); letter-spacing: 0.08em; color: var(--teal); }
.match-new .match-tag { color: var(--red); }
.match .btn-x { min-width: 44px; }

.field { border: 0; margin: 0 0 16px; padding: 0; }
.field legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--muted); }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { position: relative; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 12px; border: 1px solid var(--line-2); cursor: pointer; font-size: 15px; font-weight: 700; }
.chip input { appearance: none; -webkit-appearance: none; margin: 0; width: 12px; height: 12px; transform: rotate(45deg); border: 2px solid var(--faint); flex: none; }
.chip input:checked { background: var(--teal); border-color: var(--teal); }
.chip:has(input:checked) { border-color: var(--teal); background: rgba(63, 214, 198, 0.1); }
.chip:has(input:focus-visible) { outline: 2px solid var(--teal); outline-offset: 2px; }
.chip input:focus-visible { outline: none; }
.stepper, .toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 15px; color: var(--muted); min-height: 46px; }
.toggle-row { cursor: pointer; }
.stepper-ctl { display: flex; align-items: center; gap: 4px; }
.step { width: 46px; height: 46px; border: 1px solid var(--line-2); background: none; color: var(--bone); font-size: 22px; }
.step:disabled { opacity: 0.3; }
#new-count { min-width: 2ch; text-align: center; font: 800 34px/1 var(--display); color: var(--red); }
.credit { max-width: 580px; margin: 0 auto; font-size: 12px; color: var(--muted); }
.credit a { color: var(--bone); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; z-index: 60;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 110px);
  transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px);
  padding: 11px 16px 11px 18px;
  background: var(--bg-3); border: 1px solid var(--line-2); box-shadow: inset 4px 0 0 var(--red), 0 10px 30px rgba(0, 0, 0, 0.6);
  color: var(--bone);
  font-size: 14px; line-height: 1.45;
}

/* ---------- sizes ---------- */

@media (max-height: 680px) {
  .readout { min-height: 96px; padding-bottom: 6px; }
  .readout-name { font-size: clamp(38px, 12vw, 60px); }
  .readout-sub { margin-top: 6px; font-size: 13px; }
  .roster { grid-auto-rows: minmax(54px, auto); min-height: 0; height: auto; }
  .card { min-height: 54px; padding-top: 6px; padding-bottom: 5px; }
  .card-name { font-size: clamp(16px, 5vw, 20px); }
  .lockin { min-height: 56px; }
}
@media (max-width: 340px) {
  .card { padding: 7px 7px 6px; }
  .card-meta { font-size: 11px; }
}
@media (min-width: 760px) {
  .view-pick { max-width: 620px; margin: 0 auto; right: 0; left: 0; padding-top: calc(var(--safe-t) + 20px); }
  .tabbar { left: 50%; right: auto; width: 440px; transform: translateX(-50%); border: 1px solid var(--line); border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.show .stage { animation: fade 0.2s both; }
  @keyframes fade { from { opacity: 0; } }
  .sheet { transition-duration: 0.01s; }
  .locked, .hud-name.won, .sel-frame.won, .ping.on::after, .ping.win::after { animation: none; }
  body.scanning .sweep { animation: none; opacity: 0; }
  .banner.go { animation-duration: 0.3s; }
}