/* Snug Kart under the house system (ART.md; Template/HOUSE.md). The 3D scene is the plate and keeps
   each track's one appearance in both themes; the chrome follows the theme, on white in light (HOUSE.md 12). One face,
   no accent, no shadows, no blur; every sentence over the scene sits on a plate. The racers' tones
   live in js/palette.js. */

@font-face {
  font-family: 'Ysabeau Office';
  src: url(fonts/ysabeau-office-gw.woff2) format('woff2');
  font-weight: 400 650;
  font-display: block;
}

:root {
  --page: #ffffff;
  --sheet: #f6f9fa;
  --ink: #0f1c23;
  --ink-2: #45555d;
  --ink-3: #5b6a72;
  --line: #c9d4d8;
  --line-strong: #74858c;
  --draw: cubic-bezier(0.2, 0, 0, 1);
  --sheet-in: cubic-bezier(0.32, 0.72, 0, 1);
  --face: 'Ysabeau Office', system-ui, -apple-system, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #141d21;
    --sheet: #1c272c;
    --ink: #e6edee;
    --ink-2: #a3b1b6;
    --ink-3: #8b9a9f;
    --line: #2a373c;
    --line-strong: #64757b;
    color-scheme: dark;
  }
}

/* The safe margins of the race's plates, and the halo marks drawn straight over the scene (the
   house ghost key's recipe, ART.md 2). */
body {
  --mt: calc(max(env(safe-area-inset-top), 12px) + 8px);
  --mb: max(env(safe-area-inset-bottom), 12px);
  --ml: max(env(safe-area-inset-left), 12px);
  --mr: max(env(safe-area-inset-right), 12px);
  --stroke: #0f1c23;
  --halo: rgba(246, 249, 250, 0.6);
  --on: color-mix(in srgb, var(--ink) 12%, var(--sheet));
}
@media (prefers-color-scheme: dark) { body { --stroke: #f2f4f1; --halo: rgba(10, 16, 19, 0.45); } }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--page); color: var(--ink);
  font: 400 13.5px/1.35 var(--face);
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
body { position: fixed; inset: 0; touch-action: none; overscroll-behavior: none; }
button {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.words :focus-visible { outline-offset: -2px; } /* the ring inside a row that scrolls sideways; family-wide, 2026-10-02 */
p, h2, h3, ol { margin: 0; }
svg { display: block; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: -1px; }
.sprite { position: absolute; width: 0; height: 0; }
.plate { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 8px; }
.notice { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 14px; max-width: 300px; text-align: center; line-height: 1.4; }
.two { font-size: 11px; line-height: 15px; height: 30px; overflow: hidden; color: var(--ink-2); }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#fade { position: fixed; inset: 0; background: #141d21; opacity: 0; pointer-events: none; transition: opacity 0.15s linear; z-index: 5; }
#fade.on { opacity: 1; }

/* ── keys ── */
.solid { min-height: 44px; padding: 0 16px; border-radius: 8px; background: var(--ink); color: var(--page); font-size: 15px; font-weight: 650; }
.framed { min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 12.5px; }
.textkey { min-width: 44px; height: 44px; padding: 0 8px; font-size: 12.5px; }
.words { display: flex; overflow-x: auto; scrollbar-width: none; scroll-padding: 0 16px; touch-action: pan-x; }
.words::-webkit-scrollbar { display: none; }
.words button { position: relative; flex: 0 0 auto; min-width: 44px; height: 44px; padding: 0 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.words b { font-weight: 600; color: var(--ink); }
/* The house's selection mark: weight 620 and a tracer under what is chosen, drawn tail to head. */
.words [aria-checked="true"], .words [aria-pressed="true"] { color: var(--ink); font-weight: 620; }
.words [aria-checked="true"]::after, .words [aria-pressed="true"]::after, .racer[aria-checked="true"]::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: 9px; height: 4px;
  background:
    radial-gradient(circle at calc(100% - 2px) 50%, var(--ink) 1.9px, transparent 2.1px),
    linear-gradient(90deg, transparent, var(--ink) calc(100% - 3px), transparent calc(100% - 3px)) 0 1px / 100% 2px no-repeat;
  animation: tracer-in 160ms var(--draw);
}
@keyframes tracer-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ── screens ── */
.screen { position: fixed; inset: 0; z-index: 4; display: flex; flex-direction: column; }
#loading, #building, #lost, #pause { justify-content: center; align-items: center; padding: var(--mt) var(--mr) var(--mb) var(--ml); }
#loading { background: var(--page); }
#lost { z-index: 6; }

/* the title: the header, the plate (the scene shows through it), the bands, the record row */
.head {
  flex: 0 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 22px 44px; column-gap: 12px;
  padding: calc(6px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  background: var(--page);
}
.head h1 { grid-area: 1 / 1; font-size: 15px; font-weight: 650; line-height: 22px; margin: 0; }
/* About sits after the name and the track words stop 52 px short of the right: in full screen iOS 18
   puts Snuggery's 44 pt exit control 16 pt inside the top-right corner (NOTES decision 36). */
#btn-about { grid-area: 1 / 2; justify-self: start; margin: -11px 0; }
#tracks { grid-area: 2 / 1 / 3 / 3; margin: 0 52px 0 -8px; }
#title-plate { flex: 1 1 auto; min-height: 38%; touch-action: none; }
.bands {
  flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  padding: 8px calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  background: var(--page);
}
#racers { display: grid; grid-template-columns: repeat(8, 44px); justify-content: space-between; margin: 4px 0 2px; }
.racer { position: relative; width: 44px; height: 52px; display: grid; justify-items: center; align-content: start; padding-top: 2px; }
.racer .ring, #res-list .ring { display: block; border: 2px solid var(--ring-l); border-radius: 50%; }
.racer .ring canvas { display: block; width: 36px; height: 36px; border-radius: 50%; }
.racer[aria-checked="true"]::after { bottom: 3px; }
#racer-name { font-size: 12.5px; font-weight: 620; line-height: 16px; }
#settings { margin: 2px -8px 0; }
.record {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 53px;
  padding: 4px calc(16px + env(safe-area-inset-right)) calc(4px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  border-top: 1px solid var(--line); background: var(--page);
}
#record { min-width: 0; font-size: 12.5px; color: var(--ink-2); }
#record b { font-size: 21px; font-weight: 600; line-height: 1; color: var(--ink); margin-left: 4px; }
#record span { display: block; }
#btn-race { min-width: 112px; }
#record, #record b, #caption, #racer-name, #racer-line { transition: none; animation: none; }

/* pause and the results: sheets over the scene, no scrim */
.panel { min-width: 240px; max-width: 320px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.sheet { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 8px; }
.sheet h2 { font-size: 15px; font-weight: 650; line-height: 22px; }
#results { padding: calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); align-items: center; justify-content: center; }
#results.settling { pointer-events: none; }   /* just shown: see guardResults in js/main.js */
.results-panel { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.results-panel > * { flex-shrink: 0; }   /* a short panel scrolls; it never squeezes the chart's caption */
.res-head { font-size: 12.5px; color: var(--ink-2); line-height: 28px; }
#res-place { font-size: 21px; font-weight: 600; color: var(--ink); }
#chart { display: block; width: 100%; height: 150px; }
#res-list { list-style: none; padding: 0; display: flex; flex-direction: column; }
#res-list li { display: grid; grid-template-columns: 22px 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 36px; padding: 2px 6px; border-radius: 4px; font-size: 12.5px; }
#res-list li.me { background: var(--on); }
#res-list li.me .name { font-weight: 620; }
#res-list .place { font-weight: 560; text-align: right; }
#res-list .ring canvas { display: block; width: 24px; height: 24px; border-radius: 50%; }
#res-list .times { text-align: right; font-weight: 560; line-height: 1.2; }
#res-list .times small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); }
#res-record { font-size: 12.5px; padding: 4px 0; }
.res-buttons { display: flex; gap: 8px; margin-top: 4px; }
.res-buttons button { flex: 1 1 0; }

@media (prefers-color-scheme: dark) { .racer .ring, #res-list .ring { border-color: var(--ring-d); } }

/* ── the race: the card, the keys and the notices, each on a plate ── */
/* --ct: the countdown's (and the banners') top, below the map on a narrow phone; --ch: its plate. */
#hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; --ct: max(22%, calc(var(--mt) + 168px)); --ch: 128px; }
#card { position: absolute; left: var(--ml); top: var(--mt); padding: 8px 10px 10px; width: 154px; }
.card-place { line-height: 26px; }
#pos-n { font-size: 21px; font-weight: 600; }
#pos-of { color: var(--ink-2); }
.card-row { display: flex; justify-content: space-between; font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
#rtime { color: var(--ink); font-weight: 560; pointer-events: auto; }
#last { font-size: 12.5px; line-height: 18px; height: 18px; color: var(--ink-2); }
#strip { display: block; width: 132px; height: 24px; margin-top: 4px; }
#card *, #strip { transition: none; animation: none; }
#btn-pause { position: absolute; top: calc(var(--mt) - 3px); left: max(50%, calc(var(--ml) + 184px));   /* clear of the race card on a narrow phone */
   transform: translateX(-50%); width: 44px; height: 44px; display: grid; place-items: center; pointer-events: auto; }
.keyplate { width: 38px; height: 38px; display: grid; place-items: center; background: var(--sheet); border: 1px solid var(--line); border-radius: 6px; }
.keyplate svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; }
#minimap { position: absolute; right: var(--mr); top: calc(var(--mt) + 56px); display: block; width: 104px; height: 104px; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 8px; }
#diag { position: absolute; left: var(--ml); top: calc(var(--mt) + 160px); padding: 4px 8px; font-size: 11.5px; line-height: 1.35; white-space: pre; }
#count { position: absolute; left: 50%; top: var(--ct); transform: translateX(-50%); min-width: var(--ch); height: var(--ch); padding: 0 12px; display: grid; place-items: center; font-size: calc(var(--ch) * 0.75); font-weight: 650; line-height: 1; }
#hint { position: absolute; left: 50%; top: calc(var(--ct) + var(--ch) + 8px);   /* under the countdown's plate */
  transform: translateX(-50%); width: max-content; max-width: min(300px, calc(100% - 32px)); padding: 8px 12px; text-align: center; line-height: 1.4; }
#banner { position: absolute; left: 50%; top: var(--ct); transform: translateX(-50%); width: max-content; max-width: min(300px, calc(100% - 32px)); padding: 8px 14px; text-align: center; font-size: 15px; font-weight: 650; }
#warn { position: absolute; left: var(--ml); top: calc(var(--mt) + 118px); width: max-content; padding: 6px 12px; font-weight: 600; }   /* under the race card */
#reticle { position: absolute; left: 0; top: 0; width: 40px; height: 40px; pointer-events: none; will-change: transform; }
#reticle svg, #pad svg, #pad-ghost svg { width: 100%; height: 100%; fill: none; overflow: visible; }
.halo { stroke: var(--halo); stroke-width: 3.4; stroke-linecap: round; }
.stroke { stroke: var(--stroke); stroke-width: 1.5; stroke-linecap: round; }
#reticle .lock, #reticle.locked .open { display: none; }
#reticle.locked .lock { display: inline; }
#reticle .dot { fill: var(--stroke); }
#reticle .halo-dot { fill: var(--halo); }
.key { position: absolute; display: grid; place-items: center; pointer-events: auto; touch-action: none; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 8px; }
.key::after { content: ''; position: absolute; inset: -14px; }      /* forgiving: 14 px of extra hit */
#btn-drift { right: calc(var(--mr) + 4px); bottom: calc(var(--mb) + 18px); width: 88px; height: 88px; font-weight: 600; }
#btn-drift.on { background: color-mix(in srgb, var(--ink) 22%, var(--sheet)); }
#btn-drift[data-tier="1"] { border: 3px solid var(--ink); }
#btn-drift[data-tier="2"] { border: 3px solid var(--ink); background: var(--ink); color: var(--page); }
#btn-item { right: calc(var(--mr) + 12px); bottom: calc(var(--mb) + 126px); width: 76px; height: 76px; }
#btn-item .icon { width: 46px; height: 46px; }
#btn-item .none { font-size: 11.5px; color: var(--ink-3); }
#btn-item.empty .icon, #btn-item:not(.empty) .none { display: none; }
#btn-item.ready { border: 2px solid var(--ink); }
#btn-item.rolling .icon { opacity: 0.75; }
body[data-controls="sides"] #btn-item { bottom: calc(42% + 16px); }
body[data-controls="sides"] #btn-drift { display: none; }
body.done #btn-item, body.done #btn-drift, body.done #pad-ghost { display: none; }

/* the steering ring and the two sides */
#touch { position: fixed; inset: 0; z-index: 2; touch-action: none; display: none; }
body.racing #touch { display: block; }
#pad, #pad-ghost { position: fixed; width: 116px; height: 116px; pointer-events: none; }
#pad { margin: -58px 0 0 -58px; }
#pad-ghost { left: calc(var(--ml) + 38px); bottom: calc(var(--mb) + 88px); display: grid; place-items: center; }
#pad-ghost svg { position: absolute; inset: 0; opacity: 0.5; }
#pad-ghost .plate, #sides-hint .plate { position: relative; padding: 2px 8px; font-size: 12.5px; }
#pad-knob { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); border: 3px solid var(--sheet); transform: translate(-50%, -50%); }
body.tilt #pad-ghost { display: none; }
#sides-hint { display: none; }
body.racing[data-controls="sides"] #sides-hint { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 42%; pointer-events: none; }
#sides-hint { justify-content: space-around; align-items: flex-end; padding-bottom: calc(var(--mb) + 8px); }

/* ── About: a full-height sheet ── */
.about { position: fixed; inset: 0; z-index: 20; }
.about-sheet { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--sheet); animation: sheet-in 220ms var(--sheet-in); }
@keyframes sheet-in { from { transform: translateY(100%); } }
.about-head {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: env(safe-area-inset-top) calc(8px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  border-bottom: 1px solid var(--line);
}
.about-head h2 { font-size: 15px; font-weight: 650; }
.about-body {
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-user-select: text; user-select: text;
  padding: 0 calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.about-body section { max-width: 62ch; padding: 12px 0; border-bottom: 1px solid var(--line); }
.about-body h3 { margin: 0 0 6px; font-size: 13.5px; font-weight: 650; }
.about-body p { margin: 0 0 8px; line-height: 1.5; }
.about-body p:last-child { margin-bottom: 0; }
.about-body dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; line-height: 1.45; }
.about-body dt { color: var(--ink-2); }
.about-body dd { margin: 0; }
.license { white-space: pre-wrap; color: var(--ink-2); }
#about-close2 { margin-top: 8px; margin-left: -8px; }

@media (hover: hover) {
  .words button:hover, .textkey:hover { color: var(--ink); }
  .framed:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
}
/* eight 44 px faces need 352 px: two rows of four on a narrower phone and in the column on its side */
@media (max-width: 383px), (orientation: landscape) and (max-height: 500px) { #racers { grid-template-columns: repeat(4, 44px); justify-content: space-around; } }

/* a phone on its side: the header is one row; the plate takes the left, a column the right */
@media (orientation: landscape) and (max-height: 500px) {
  #title { display: grid; grid-template-columns: minmax(0, 1fr) 360px; grid-template-rows: auto minmax(0, 1fr) auto; }
  .head { grid-column: 1 / -1; grid-template-columns: max-content auto minmax(0, 1fr); grid-template-rows: 46px; align-items: center; padding-top: env(safe-area-inset-top); }
  #btn-about { grid-area: 1 / 2; margin: 0; }
  #tracks { grid-area: 1 / 3; margin: 0 52px 0 0; }
  #title-plate { grid-column: 1; grid-row: 2 / 4; min-height: 0; }
  .bands { grid-column: 2; grid-row: 2; padding-left: 16px; }
  .record { grid-column: 2; grid-row: 3; padding-left: 16px; }
  #hud { --ct: 18%; }
}
@media (orientation: portrait) and (max-height: 600px) { #hud { --ch: 100px; } }
@media (orientation: landscape) {
  #btn-item { right: calc(var(--mr) + 104px); bottom: calc(var(--mb) + 24px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}