/* Pixel Race: the paint chip wall. White card, grey-card rails, near-black ink. The eight paints are the
   only chromatic colours; seat colours mark ownership. Every control is a printed chip with four states:
   rest (hairline), pressed (ink-filled), disabled (hatched), focus (a bracket two pixels outside). */

@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); }

:root {
  --card: #ffffff;
  --rail: #ecebe6;
  --tile: #d8d7d1;
  --hair: #c9c8c2;
  --ink: #141414;
  --ink-2: #5d5f66;
  --ink-3: #9a9b97;
  --p-black: #141414; --p-white: #f5f5f5; --p-red: #e5484d; --p-orange: #f28c28;
  --p-yellow: #f5d90a; --p-green: #46a758; --p-blue: #3e8ef7; --p-brown: #8b5a2b;
  --danger: var(--p-red);
  --display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 120ms;
  --slow: 180ms;
  --chequer: repeating-conic-gradient(var(--ink) 0 25%, var(--card) 0 50%);
  --hatch: repeating-linear-gradient(135deg, var(--card) 0 5px, var(--rail) 5px 6px);
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0;
  background: var(--card);
  color: var(--ink);
  font-family: var(--body);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
  caret-color: var(--ink);
  scrollbar-width: thin;
  scrollbar-color: var(--ink) var(--rail);
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
::selection { background: var(--ink); color: var(--card); }
button { font: inherit; color: inherit; }
input, select { font: inherit; }
button, input, select, [tabindex] { outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
svg.icon { display: inline-block; vertical-align: -0.1em; }

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.screen { display: none; flex: 1; flex-direction: column; gap: 12px; min-height: 0; }
.screen.is-active { display: flex; }

/* ---------- type ---------- */
.result-title { margin: 6px 0 0; font: 800 40px/0.95 var(--display); letter-spacing: 0.005em; text-transform: uppercase; text-wrap: balance; }
.result-sub { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
.help { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; }
.footnote { margin: auto 0 0; padding-top: 10px; color: var(--ink-2); font: 600 11px/1.4 var(--display); letter-spacing: 0.1em; text-transform: uppercase; text-align: center; }
.tape { height: 12px; border: 1px solid var(--ink); background: var(--chequer) 0 0 / 12px 12px; }

/* ---------- home ---------- */
.masthead { padding-top: 4px; }
.title { margin: 0; line-height: 0; font: 800 42px/1 var(--display); text-transform: uppercase; }
.title .wordmark { display: block; max-width: 100%; height: auto; }
.codeline { display: flex; justify-content: space-between; gap: 12px; margin: 12px 0 0; font: 600 12px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.tagline { margin: 10px 0 0; font-size: 15px; line-height: 1.4; max-width: 36ch; }

.pchip { display: flex; flex-direction: column; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); text-align: left; padding: 0; overflow: hidden; }
.pchip-field { display: block; position: relative; min-height: 58px; background: var(--paint, var(--rail)); }
.pchip-strip { display: flex; flex-direction: column; gap: 3px; padding: 9px 12px 11px; border-top: 1px solid var(--ink); background: var(--card); }
.pchip-name { font: 800 20px/1 var(--display); letter-spacing: 0.005em; text-transform: uppercase; }
.pchip-code { font: 600 11px/1.3 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.pchip-btn { cursor: pointer; touch-action: manipulation; width: 100%; transition: transform var(--fast) var(--ease); }
.pchip-btn:active:not(:disabled) { transform: translateY(1px); }
.pchip-btn:active:not(:disabled) .pchip-strip { background: var(--ink); color: var(--card); }
.pchip-btn:active:not(:disabled) .pchip-code { color: var(--hair); }
.pchip-btn:disabled { cursor: default; border-color: var(--hair); }
.pchip-btn:disabled .pchip-field { background: var(--hatch); }
.pchip-btn:disabled .pchip-strip { border-top-color: var(--hair); }
.pchip-btn:disabled .pchip-name, .pchip-btn:disabled .pchip-code { color: var(--ink-3); }
.pchip-btn[hidden] { display: none; }

.pchip-hero { margin-top: 4px; }
.pchip-field-hero { display: grid; place-items: center; aspect-ratio: 1; max-height: 320px; background: var(--rail); }
#hero-canvas { display: block; }
.pchip-tag { position: absolute; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 5px 7px; border: 1px solid var(--ink); background: var(--card); font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pchip-tag:empty { display: none; }
.pchip-hero .pchip-strip { padding: 12px 12px 12px; gap: 4px; }
.pchip-hero .pchip-name { font-size: 30px; }
.pchip-hero .bar-btn { margin-top: 8px; }
.pchip-foot { margin: 6px 0 0; font-size: 13px; color: var(--ink-2); }
.pchip-foot:empty { display: none; }

.rack { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rack .pchip-strip { padding: 8px 10px 10px; gap: 2px; }
.rack .pchip-name { font-size: 18px; }

.ledger { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 46px; padding: 0 2px; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 700 15px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; }
.ledger-note { font-weight: 600; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-2); }
.ledger:active { background: var(--ink); color: var(--card); }
.ledger:active .ledger-note { color: var(--hair); }

.pchip-field-challenge { display: grid; place-items: center; height: 208px; background: var(--rail); }
#davinci-canvas { display: block; }
.pchip-challenge .pchip-strip { padding: 12px 12px 12px; gap: 4px; }
.pchip-challenge .pchip-name { font-size: 26px; }
.pchip-strip .row { margin-top: 8px; gap: 8px; }
.pchip-strip .row .bar-btn { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }
.pchip-strip .row .btn { flex: 0 0 auto; margin-top: 0; }

/* ---------- "!" help ---------- */
.pchip-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.info-btn { flex: 0 0 auto; width: 28px; height: 28px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.info-btn .icon { width: 12px; height: 12px; }
.info-btn:active, .info-btn[aria-expanded="true"] { background: var(--ink); color: var(--card); }
.pchip-slot { position: relative; }
.pchip-slot > .info-btn { position: absolute; top: 8px; right: 8px; }
.help-card { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); z-index: 30; transform: translateX(-50%); width: min(480px, calc(100vw - 32px)); display: flex; gap: 12px; align-items: flex-start; padding: 12px 12px 12px 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 28px rgba(20, 20, 20, 0.18); }
.help-card-text { margin: 0; flex: 1; font-size: 14px; line-height: 1.45; }
.help-card-close { flex: 0 0 auto; }

/* ---------- open rooms ---------- */
.rooms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 6px; font: 800 18px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.rooms-head > span:first-child { white-space: nowrap; }
.rooms-head .pchip-code { text-align: right; }
.board.rooms li { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.board.rooms li .btn { min-height: 40px; }
.room-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.room-host { font: 800 16px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-meta { font: 600 11px/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.room-status { font-size: 12px; color: var(--ink-2); }
.field .stepper { flex: 0 0 auto; }

/* ---------- power-ups ---------- */
.power-banner { position: absolute; left: 50%; top: 10px; z-index: 2; transform: translateX(-50%); max-width: calc(100% - 16px); padding: 8px 12px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 800 16px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.power-banner.is-mine { background: var(--ink); color: var(--card); }
.power-banner .icon { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; }
.ref { position: relative; }
.ref.is-splat::after { content: ""; position: absolute; inset: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%23141414' d='M48 8c9 0 12 10 20 12s18-4 22 6-6 14-4 24 12 12 8 22-16 4-24 10-8 16-18 14-8-14-16-18-20 2-22-8 10-12 12-20-10-14-4-22 12-2 18-8 1-12 8-12z'/%3E%3Ccircle fill='%23141414' cx='18' cy='20' r='6'/%3E%3Ccircle fill='%23141414' cx='84' cy='84' r='5'/%3E%3C/svg%3E") center / 100% 100% no-repeat; pointer-events: none; }
.key-hints { display: none; margin: 0; text-align: center; font: 500 12px/1.4 var(--body); color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .key-hints { display: block; } }

/* ---------- hall of fame ---------- */
.hall { display: flex; flex-direction: column; gap: 10px; }
.podium { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 8px; align-items: end; }
.plinth { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; min-height: 96px; padding: 12px 10px 10px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.plinth.is-2 { order: 1; animation: settle 0.6s var(--ease) both; }
.plinth.is-1 { order: 2; min-height: 128px; padding-top: 20px; }
.plinth.is-3 { order: 3; animation: settle 0.6s var(--ease) 0.1s both; }
.plinth.is-1::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 10px; border: 1px solid var(--ink); background: var(--chequer) 0 0 / 10px 10px; animation: tape 1.4s linear infinite; }
.plinth-rank { display: flex; align-items: center; gap: 6px; font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.plinth.is-1 .plinth-rank { color: var(--ink); }
.plinth.is-1 .plinth-rank .icon { width: 14px; height: 14px; animation: bob 1.2s ease-in-out infinite; }
.plinth-name { display: block; font: 800 20px/1 var(--display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plinth.is-1 .plinth-name { font-size: 24px; }
.plinth-name span { display: inline-block; animation: rise 0.5s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.plinth-stats { font: 600 11px/1.3 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@keyframes tape { to { background-position: 20px 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes settle { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- buttons ---------- */
.bar-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 12px 0 16px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--card); font: 800 22px/1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; text-align: left; cursor: pointer; touch-action: manipulation; transition: transform var(--fast) var(--ease); }
.bar-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-btn .flag { flex: 0 0 auto; width: 36px; height: 20px; border: 1px solid var(--card); background: var(--chequer) 0 0 / 10px 10px; }
.bar-btn:active:not(:disabled) { transform: translateY(1px); background: #000; }
.bar-btn:disabled { background: var(--hatch); color: var(--ink-2); cursor: default; }
.bar-btn:disabled .flag { border-color: var(--ink-3); opacity: 0.4; }
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 16px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 700 18px/1 var(--display); letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; touch-action: manipulation; transition: transform var(--fast) var(--ease); }
.btn:active:not(:disabled) { background: var(--ink); color: var(--card); transform: translateY(1px); }
.btn:disabled { color: var(--ink-3); border-color: var(--hair); background: var(--hatch); cursor: default; }
.btn-ghost { border-color: var(--hair); }
.btn-small { min-height: 44px; padding: 0 12px; font-size: 14px; }
.btn .icon { width: 14px; height: 14px; }
.row { display: flex; gap: 10px; }
.row > .btn { flex: 1; }
.actions { display: flex; flex-direction: column; gap: 10px; }

.seg { display: flex; gap: 0; padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.seg-btn { flex: 1; min-width: 0; border: 0; border-left: 1px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink-2); padding: 12px 6px; font: 700 15px/1 var(--display); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; touch-action: manipulation; }
.seg-btn:first-child { border-left: 0; }
.seg-btn.is-on { background: var(--ink); color: var(--card); }
.seg-btn:focus-visible { outline-offset: -3px; outline-color: var(--card); }
.seg-btn:not(.is-on):focus-visible { outline-color: var(--ink); }

.icon-btn { width: 44px; min-height: 44px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.icon-btn:active:not(:disabled) { background: var(--ink); color: var(--card); }
.icon-btn:disabled { color: var(--ink-3); border-color: var(--hair); }
.icon-btn .icon { width: 16px; height: 16px; }

/* ---------- fields and toggles ---------- */
.card { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 14px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.card-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.card-meta strong { font: 800 18px/1 var(--display); letter-spacing: 0.01em; color: var(--ink); text-transform: uppercase; }
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding-top: 12px; border-top: 1px solid var(--ink); font-size: 14px; }
.toggle { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink); cursor: pointer; }
.toggle input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); cursor: pointer; }
.toggle input:checked { background: var(--ink); }
.toggle input:checked::after { content: ""; width: 10px; height: 10px; background: var(--chequer) 0 0 / 5px 5px; }
.field { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field select { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 16px/1.2 var(--body); letter-spacing: normal; text-transform: none; }
.field input::placeholder { color: var(--ink-2); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='%23141414'%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='1' y='3' width='1' height='1'/%3E%3Crect x='2' y='4' width='1' height='1'/%3E%3Crect x='3' y='5' width='1' height='1'/%3E%3Crect x='4' y='4' width='1' height='1'/%3E%3Crect x='5' y='3' width='1' height='1'/%3E%3Crect x='6' y='2' width='1' height='1'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px; }
.field .seg { flex: 1; }
.code-input { font: 800 20px/1 var(--display) !important; letter-spacing: 0.25em !important; text-transform: uppercase !important; text-align: center; }

/* ---------- game ---------- */
.hud { display: flex; align-items: stretch; gap: 8px; }
.stat { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 6px 10px 7px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.stat-label { order: 2; margin-top: 3px; font: 600 11px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); }
.stat-value { font: 800 28px/1.05 var(--display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; letter-spacing: 0.01em; }
.stat-value.is-urgent { color: var(--danger); animation: pulse 0.5s ease-in-out infinite alternate; }
.hud.is-locked #hud-streak { color: var(--danger); }
.tier { order: 3; display: flex; gap: 3px; margin-top: 5px; }
.tier i { width: 14px; height: 5px; border: 1px solid var(--hair); background: var(--rail); }
.tier i.is-on { background: var(--ink); border-color: var(--ink); }
.ref { flex: 0 0 auto; width: var(--ref, 96px); height: var(--ref, 96px); padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--rail); overflow: hidden; cursor: zoom-in; touch-action: manipulation; }
.ref canvas { display: block; width: 100%; height: 100%; }
.bars { display: flex; flex-direction: column; gap: 6px; }
.bar { display: grid; grid-template-columns: 104px 1fr 44px; align-items: center; gap: 8px; font: 600 11px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.bar[hidden] { display: none; }
.bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-track { height: 10px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.bar-fill { height: 100%; width: 0; background: var(--ink); transition: width 0.12s linear; }
.bar-fill.is-opp { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 6px); }
.bar-pct { text-align: right; font: 800 15px/1 var(--display); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; color: var(--ink); }
.board-wrap { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; position: relative; padding-top: 4px; }
.stage { position: relative; line-height: 0; border: 1px solid var(--ink); background: var(--rail); }
#grid { display: block; touch-action: none; cursor: crosshair; }
#fx { position: absolute; inset: 0; pointer-events: none; }
.start-hint { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; pointer-events: none; }
.start-hint[hidden] { display: none; }
.start-hint-card { max-width: 84%; padding: 12px 16px 13px; border: 1px solid var(--ink); background: var(--card); color: var(--ink); font: 800 20px/1.1 var(--display); letter-spacing: 0.01em; text-transform: uppercase; }
.start-hint small { display: block; margin-top: 6px; font: 500 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 800 128px/1 var(--display); color: var(--ink); pointer-events: none; }
.countdown[hidden] { display: none; }
.btn-zoom { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); color: var(--ink); font: 800 16px/1 var(--display); cursor: pointer; touch-action: manipulation; }
.btn-zoom[hidden] { display: none; }
.palette { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 12px 0 2px; }
.swatch { display: flex; flex-direction: column; width: clamp(38px, 10.5vw, 56px); padding: 0; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); cursor: pointer; touch-action: manipulation; overflow: hidden; transition: transform var(--fast) var(--ease); }
.swatch-field { display: grid; place-items: center; width: 100%; aspect-ratio: 1; font-size: 15px; font-style: normal; }
.swatch-name { display: block; padding: 4px 0 5px; border-top: 1px solid var(--ink); background: var(--card); color: var(--ink-2); font: 700 10px/1 var(--display); letter-spacing: 0.08em; text-transform: uppercase; text-align: center; white-space: nowrap; overflow: hidden; }
.swatch.is-selected { transform: translateY(-6px); outline: 2px solid var(--ink); outline-offset: 1px; }
.swatch.is-selected .swatch-name { background: var(--ink); color: var(--card); }

/* ---------- result, boards, lists ---------- */
.result-canvas-wrap { display: grid; place-items: center; }
#result-canvas, #turn-canvas, #round-canvas { border: 1px solid var(--ink); }
#result-canvas { animation: zoomIn 0.45s var(--ease); }
.result-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.result-stats .stat-value { font-size: 24px; }
.result-delta { margin: 0; min-height: 1.2em; text-align: center; font: 700 17px/1.3 var(--display); letter-spacing: 0.01em; }
.name-prompt { display: flex; gap: 8px; align-items: center; }
.name-prompt .field { flex: 1; }
.name-prompt[hidden] { display: none; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--ink); }
.board li { display: grid; grid-template-columns: 28px 1fr auto auto auto; gap: 10px; align-items: center; padding: 9px 6px; border-bottom: 1px solid var(--hair); font-size: 14px; font-variant-numeric: tabular-nums; }
.board li.is-me { background: var(--rail); outline: 1px solid var(--ink); outline-offset: -1px; }
.board li.board-empty { display: block; padding: 14px 6px; color: var(--ink-2); text-align: center; }
.board .rank { font: 800 16px/1 var(--display); color: var(--ink-2); }
.board .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board .pct { font: 800 16px/1 var(--display); }
.board .time { font: 600 14px/1 var(--display); letter-spacing: 0.02em; }
.board .mist { color: var(--ink-2); font: 600 12px/1 var(--display); letter-spacing: 0.04em; }
.board .mist .icon { width: 12px; height: 12px; color: var(--ink); }
.board .name .dot { margin-right: 6px; vertical-align: -1px; }

/* ---------- overlay, toast ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; align-content: center; gap: 12px; background: rgba(255, 255, 255, 0.94); color: var(--ink-2); font: 600 12px/1 var(--display); letter-spacing: 0.12em; text-transform: uppercase; }
.overlay[hidden] { display: none; }
.overlay canvas { border: 1px solid var(--ink); }
.overlay p { margin: 0; }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); z-index: 20; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 14px; border-radius: var(--radius); background: var(--ink); color: var(--card); font: 700 15px/1.2 var(--display); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast[hidden] { display: none; }

@keyframes pulse { from { opacity: 1; } to { opacity: 0.5; } }
@keyframes zoomIn { from { transform: scale(0.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------- pass and play, online ---------- */
.stepper { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); font: 800 20px/1 var(--display); }
.stepper .icon-btn { width: 44px; min-height: 44px; }
.names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.name-row { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); }
.name-row input { flex: 1 1 0; width: 0; min-width: 0; padding: 4px 0; border: 0; background: transparent; color: var(--ink); font-size: 16px; outline: none; }
.name-row:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.dot { display: inline-block; flex: 0 0 auto; width: 12px; height: 12px; border: 1px solid var(--ink); }
.turn-colour { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: 14px; }
.turn-colour i { display: inline-block; flex: 0 0 auto; width: 18px; height: 18px; border: 1px solid var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.legend[hidden] { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--card); font: 600 12px/1 var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.chip.is-me { background: var(--ink); color: var(--card); }
.chip.is-me .dot { border-color: var(--card); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chips[hidden] { display: none; }
.lobby { display: flex; flex-direction: column; gap: 12px; }
#online-host-controls { display: flex; flex-direction: column; gap: 12px; }
.code { padding: 6px 0 2px; text-align: center; font: 800 56px/1 var(--display); letter-spacing: 0.22em; text-indent: 0.22em; color: var(--ink); font-variant-numeric: tabular-nums; }

@media (min-width: 520px) {
  .pchip-hero .pchip-name { font-size: 34px; }
  .result-title { font-size: 44px; }
}

/* ---------- pointer hover (desktop) ---------- */
@media (hover: hover) {
  .pchip-btn:hover:not(:disabled) .pchip-strip { background: var(--rail); }
  .btn:hover:not(:disabled) { background: var(--rail); }
  .btn:active:not(:disabled) { background: var(--ink); }
  .bar-btn:hover:not(:disabled) { background: #000; }
  .seg-btn:not(.is-on):hover { background: var(--rail); color: var(--ink); }
  .icon-btn:hover:not(:disabled) { background: var(--rail); }
  .ledger:hover { background: var(--rail); }
  .swatch:hover:not(.is-selected) { transform: translateY(-2px); }
}

/* ---------- wide screens: the hero chip pinned left, the rack and spec sheet on the right ---------- */
@media (min-width: 900px) {
  #app { max-width: 1040px; padding-left: 24px; padding-right: 24px; }
  #screen-home.is-active { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-content: start; }
  #screen-home .masthead { grid-column: 1 / -1; }
  #screen-home .pchip-hero { grid-column: 1; grid-row: 2 / span 8; align-self: start; position: sticky; top: 16px; margin-top: 0; }
  #screen-home > :not(.masthead):not(.pchip-hero) { grid-column: 2; }
  #screen-home .footnote { margin-top: 12px; }
  .pchip-field-hero { max-height: 480px; }
  .pchip-hero .pchip-name { font-size: 38px; }
}