/* Puck & Glory: page shell and overlay screens, in the SOFT Saturday-morning cartoon look: paper
   cards with ink outlines, chunky rounded buttons with drop shadows, 'Lilita One' lettering and
   'Fredoka' text. The overlay is laid out at the logical 960 x 540 and scaled onto the letterbox
   by src/app/app.ts, so sizes here are logical pixels. The palette matches src/render3d/ui2d.ts UI. */
:root {
  --ink: #1d1b3a;
  --ink-soft: rgba(29, 27, 58, 0.55);
  --paper: #fff8ec;
  --paper-2: #f3e7d2;
  --cream: #fffdf7;
  --muted: #6b6890;
  --sky: #7fd3ff;
  --sky-deep: #3f63c9;
  --gold: #ffc83d;
  --gold-deep: #f0a21f;
  --red: #f2475b;
  --green: #4fd36a;
  --orange: #ff9a3d;
  --p1: #2ec4f0;
  --p2: #f04fb7;
  --display: 'Lilita One', 'Arial Black', Impact, sans-serif;
  --body: 'Fredoka', 'Arial Rounded MT Bold', 'Segoe UI', Arial, sans-serif;
  --pop: cubic-bezier(0.34, 1.7, 0.5, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  color: var(--ink);
  font-family: var(--body);
}
/* The letterbox bars: a sunny sky with soft stripes, so a window that is not 16:9 still looks dressed. */
body:not(.gallery-page) {
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 22px, rgba(255, 255, 255, 0) 22px 44px),
    radial-gradient(ellipse at 50% 40%, #8fd0ff 0%, #5f93e6 55%, #3f63c9 100%);
  background-color: #5f93e6;
  overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation;
  overscroll-behavior: none; -webkit-tap-highlight-color: transparent; cursor: none;
}
body.in-menu { cursor: default; }

/* The height of what can be seen. On a phone 100vh is the view with the browser's toolbars
   hidden, taller than the visible area whenever they are showing; 100dvh follows the toolbars.
   --vh is one hundredth of it, for the touch controls' sizes. (From Rescue Chopper.) */
:root { --view-h: 100%; --vh: 1vh; }
@supports (height: 100dvh) { :root { --view-h: 100dvh; --vh: 1dvh; } }

/* Both canvases sit on the letterbox rectangle (the app sets left, top, width and height). */
#game3d, #game { position: fixed; top: 0; left: 0; display: block; }
#game3d { z-index: 0; background: #9fd8ff; }
#game { z-index: 1; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- overlay screens (logical 960 x 540) ---- */
#overlay {
  position: fixed; top: 0; left: 0; width: 960px; height: 540px;
  transform-origin: 0 0; pointer-events: none; z-index: 5;
}
.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 40px; text-align: center; pointer-events: auto;
  overflow-y: auto; scrollbar-width: none;
}
.screen::-webkit-scrollbar { display: none; }
/* A list screen is a paper card with an ink outline and a chunky drop shadow. */
.screen.card {
  inset: 14px 44px 20px;
  justify-content: flex-start;
  padding: 14px 34px 16px;
  background:
    radial-gradient(circle at 1px 1px, rgba(29, 27, 58, 0.06) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border: 5px solid var(--ink);
  border-radius: 30px;
  box-shadow: 0 8px 0 var(--ink-soft), inset 0 -8px 0 rgba(29, 27, 58, 0.05);
  animation: card-in 0.34s var(--pop);
}
@keyframes card-in { from { opacity: 0; transform: translateY(18px) scale(0.94); } to { opacity: 1; transform: none; } }

/* A heading is a ribbon banner: white lettering, ink outline, on sky blue. */
h2 {
  position: relative;
  margin: 0 0 8px; padding: 2px 30px 5px;
  font-family: var(--display); font-weight: 400; font-size: 32px; letter-spacing: 0.04em; line-height: 1.15;
  color: #fff;
  background: linear-gradient(180deg, #5d86ef 0%, var(--sky-deep) 100%);
  border: 4px solid var(--ink); border-radius: 14px;
  box-shadow: 0 5px 0 var(--ink-soft);
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  transform: rotate(-1.5deg);
  flex: none;
}
.tiny { margin: 3px 0; font-size: 12px; font-weight: 500; color: var(--muted); max-width: 760px; line-height: 1.35; }
.tiny.who { font-family: var(--display); font-size: 15px; letter-spacing: 0.04em; color: var(--sky-deep); }
.tiny.warn, .status.warn { color: var(--red); font-weight: 600; }
.status { min-height: 16px; }
a { color: var(--sky-deep); text-decoration: none; }

/* ---- buttons: chunky pills with an ink outline and a drop shadow; focus bounces up in gold ---- */
.menu { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 12px auto 6px; flex: none; }
.menu.inline { flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 10px; gap: 12px; }
button, a.gallery-link {
  position: relative;
  font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.04em; line-height: 1.1;
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--paper) 55%, var(--paper-2) 100%);
  border: 3.5px solid var(--ink); border-radius: 999px;
  box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 rgba(29, 27, 58, 0.08);
  padding: 8px 26px; min-width: 220px;
  cursor: pointer; outline: none;
  transition: transform 0.16s var(--pop), background 0.12s, box-shadow 0.12s, color 0.12s;
}
.menu.inline button { min-width: 0; }
button:hover { transform: translateY(-1px); }
button:active { transform: translateY(4px) !important; box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 rgba(29, 27, 58, 0.1); }
button:disabled { color: #a8a3bf; border-color: #a8a3bf; box-shadow: 0 4px 0 #c9c4da; background: #f2eee6; cursor: default; }
/* The focused control: `.is-focus` mirrors DOM focus (src/ui/menu.ts). Not colour alone: it grows,
   lifts, wears a white halo and has arrows either side. */
button:focus, button:focus-visible, button.is-focus, a.is-focus, a:focus {
  background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 7px 0 var(--ink), 0 0 0 4px rgba(255, 255, 255, 0.85), inset 0 -4px 0 rgba(160, 90, 0, 0.18);
  animation: wobble 1.6s ease-in-out 0.3s infinite;
  z-index: 1;
}
@keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -1.2deg; } 75% { rotate: 1.2deg; } }
.menu button:focus::before, .menu button.is-focus::before { content: '▸ '; color: var(--ink); }
.menu button:focus::after, .menu button.is-focus::after { content: ' ◂'; color: var(--ink); }

/* ---- title: the logo is drawn by the scene behind; this is the menu under it ---- */
#title { justify-content: flex-end; padding: 0 40px 14px; }
.title-menu { display: flex; flex-direction: column; align-items: center; }
.title-menu .menu { margin: 0; }
.title-menu .menu.small { margin-top: 12px; }
button.big {
  font-size: 30px; letter-spacing: 0.08em; padding: 6px 54px 9px; min-width: 300px;
  color: #fff; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill;
  background: linear-gradient(180deg, #7fe08f 0%, var(--green) 55%, #2fae4d 100%);
  border-width: 4.5px;
  box-shadow: 0 7px 0 var(--ink), inset 0 -5px 0 rgba(0, 60, 20, 0.2);
}
button.big:focus, button.big.is-focus {
  background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%);
  box-shadow: 0 9px 0 var(--ink), 0 0 0 5px rgba(255, 255, 255, 0.9), inset 0 -5px 0 rgba(160, 90, 0, 0.2);
  transform: translateY(-3px) scale(1.08);
  animation: bounce 0.9s ease-in-out infinite;
}
@keyframes bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
.menu.small button { font-size: 14px; padding: 6px 16px; border-width: 3px; box-shadow: 0 4px 0 var(--ink); }
.menu.small button:focus, .menu.small button.is-focus { box-shadow: 0 6px 0 var(--ink), 0 0 0 4px rgba(255, 255, 255, 0.85); }
/* Both rows stay inside the title's width and wrap, rather than spill, as entries are added. */
.title-menu .menu.small { max-width: 880px; gap: 10px 12px; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; max-width: 880px; margin-top: 12px; }
button.version-link, a.gallery-link {
  min-width: 0; padding: 3px 14px 4px; font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0.04em;
  color: var(--ink); background: rgba(255, 248, 236, 0.85); border-width: 2.5px; box-shadow: 0 3px 0 var(--ink-soft);
}
a.gallery-link { display: inline-block; }
#sound-hint {
  position: absolute; left: 50%; top: 10px; translate: -50% 0;
  padding: 5px 16px 6px; font-family: var(--display); font-size: 14px; letter-spacing: 0.05em;
  color: var(--ink); background: var(--gold); border: 3px solid var(--ink); border-radius: 999px;
  box-shadow: 0 4px 0 var(--ink-soft);
  animation: nudge 1.4s ease-in-out infinite; white-space: nowrap;
}
@keyframes nudge { 50% { transform: scale(1.06); } }
#fs-toggle {
  pointer-events: auto; cursor: pointer;
  position: absolute; right: 10px; top: 10px; z-index: 5; min-width: 0; padding: 4px 14px 5px;
  font-family: var(--body); font-weight: 700; font-size: 12px; letter-spacing: 0.05em;
  color: var(--ink); background: rgba(255, 248, 236, 0.9); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink-soft);
}
#fs-toggle[aria-pressed="true"] { background: var(--gold); }

/* ---- mode and level: a wide choice with a line under it ---- */
.menu.choices { gap: 14px; margin-top: 10px; }
.menu.choices button {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 520px; padding: 9px 26px 11px; border-radius: 22px;
}
.choice-name { font-size: 25px; letter-spacing: 0.05em; }
.choice-note { font-family: var(--body); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; color: var(--muted); }
.menu.choices button:focus .choice-note, .menu.choices button.is-focus .choice-note { color: var(--ink); }
.menu.choices button:focus::before, .menu.choices button.is-focus::before,
.menu.choices button:focus::after, .menu.choices button.is-focus::after { content: none; }
.menu.choices button:focus .choice-name::before, .menu.choices button.is-focus .choice-name::before { content: '▸ '; }
.menu.choices button:focus .choice-name::after, .menu.choices button.is-focus .choice-name::after { content: ' ◂'; }
.menu.choices button:disabled .choice-name, .menu.choices button:disabled .choice-note { color: #a8a3bf; }
.lvl { display: inline-block; padding: 0 14px 2px; border: 3px solid var(--ink); border-radius: 12px; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.lvl-junior { background: var(--green); }
.lvl-college { background: var(--orange); }
.lvl-pro { background: var(--red); }

/* ---- options: one pill row per option, the value in a chip ---- */
.rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 4px 10px; width: 790px; margin: 2px auto 0; flex: none; }
button.row {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 35px;
  padding: 2px 6px 2px 14px; text-align: left; font-family: var(--body); font-weight: 600; font-size: 13.5px; letter-spacing: 0.01em;
  border-width: 2.5px; border-radius: 14px; box-shadow: 0 3px 0 var(--ink-soft);
}
button.row:focus, button.row.is-focus { transform: scale(1.025); box-shadow: 0 4px 0 var(--ink), 0 0 0 3px rgba(255, 255, 255, 0.9); animation: none; }
.row-label { display: flex; flex-direction: column; line-height: 1.1; color: var(--ink); }
.row:focus .row-label::before, .row.is-focus .row-label::before { content: '▸'; position: absolute; left: 5px; top: 50%; translate: 0 -55%; font-size: 12px; }
.row-note:empty { display: none; }
.row-note { margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--muted); }
.row:focus .row-note, .row.is-focus .row-note { color: #6a4a00; }
/* A short window (a phone on its side) shows the 960 x 540 layout at about 0.7: the notes grow so
   they stay readable there. */
@media (max-height: 560px) {
  .row-note { font-size: 12.5px; line-height: 1; }
  button.row { padding-top: 1px; padding-bottom: 1px; min-height: 32px; }
}
.row-value {
  flex: none; min-width: 6.4em; padding: 1px 6px 2px; text-align: center; font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: 0.04em;
  color: #fff; background: var(--sky-deep); border: 2.5px solid var(--ink); border-radius: 10px;
  -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums;
}
.row[aria-checked="false"] .row-value { background: #a8a3bf; }
.row[aria-checked="true"] .row-value { background: var(--green); }
.row-value.range::before { content: '◀ '; }
.row-value.range::after { content: ' ▶'; }
/* OPTIONS in sections (src/ui/options.ts): a row of tabs, then the open section's rows in one
   column. The body takes the card's spare height, so BACK stays put from tab to tab. */
.opt-body { display: flex; flex-direction: column; align-items: center; flex: 1 1 auto; min-height: 0; width: 100%; }
.menu.opt-tabs { margin: 0 auto 10px; gap: 8px; }
.menu.opt-tabs button { padding: 4px 16px; font-size: 15px; }
button.opt-tab[aria-selected="true"] { background: linear-gradient(180deg, #5d86ef 0%, var(--sky-deep) 100%); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
button.opt-tab[aria-selected="true"]:focus, button.opt-tab[aria-selected="true"].is-focus { background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%); }
.opt-page { display: flex; flex-direction: column; gap: 5px; width: 580px; }
#options .menu.inline { margin-top: 6px; }

/* ---- the athlete editor (src/ui/editor.ts): the 3D stage on the left shows through; the card of
   rows sits on the right at render3d/menus3d.ts EDITOR_LAYOUT.card (372, 10, 576 x 520) ---- */
#editor { padding: 0; overflow: visible; pointer-events: none; }
.editor-card {
  position: absolute; left: 372px; top: 10px; width: 576px; height: 520px;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px 10px; pointer-events: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(29, 27, 58, 0.06) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border: 5px solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 var(--ink-soft), inset 0 -8px 0 rgba(29, 27, 58, 0.05);
  animation: card-in 0.34s var(--pop);
}
.editor-head { display: flex; align-items: center; gap: 12px; flex: none; max-width: 100%; }
.editor-head h2 { font-size: 24px; margin: 0 0 4px; padding: 0 18px 3px; }
.editor-who { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
.editor-rows { width: 540px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(10, auto); gap: 3px 10px; margin-top: 4px; }
.editor-rows button.row { min-height: 34px; font-size: 13px; padding-left: 14px; }
.editor-rows .row-value { min-width: 7.6em; font-size: 13px; }
.editor-rows .row-value.name { background: var(--orange); max-width: 9.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.editor-rows .row-note { font-size: 9.5px; }
.editor-rows button.row.locked .row-value { background: #a8a3bf; }
.editor-rows button.row.locked .row-value.range::before, .editor-rows button.row.locked .row-value.range::after { content: ''; }
.editor-status { min-height: 16px; margin: 3px 0 0; }
.editor-actions { margin: 2px auto 0; gap: 10px; }
.editor-actions button { font-size: 15px; padding: 6px 16px; }
#editor-done { color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; background: linear-gradient(180deg, #7fe08f 0%, var(--green) 55%, #2fae4d 100%); }
#editor-done:focus, #editor-done.is-focus { background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%); }
input.editor-type {
  position: absolute; z-index: 3; margin: 0; padding: 2px 14px;
  font-family: var(--display); font-size: 16px; letter-spacing: 0.04em; color: var(--ink);
  background: #fff; border: 3px solid var(--sky-deep); border-radius: 14px; outline: none;
  box-shadow: 0 0 0 4px var(--gold), 0 4px 0 var(--ink-soft);
}
@media (max-height: 560px) {
  .editor-rows .row-note { font-size: 11px; }
}
body.touch .editor-rows button.row { min-height: 34px; }
body.touch .editor-rows .row-value { min-width: 7.2em; }

/* ---- the campaign (src/ui/campaign.ts): the slot picker is a card; NEW CAMPAIGN and the HQ put
   their card on the right at ui/campaign-art.ts CAMPAIGN_LAYOUT.card (372, 10, 576 x 520), the
   canvas card on the left shows through ---- */
.screen.camp { padding: 0; overflow: visible; pointer-events: none; }
.camp-card {
  position: absolute; left: 372px; top: 10px; width: 576px; height: 520px;
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 16px 10px; pointer-events: auto;
  background:
    radial-gradient(circle at 1px 1px, rgba(29, 27, 58, 0.06) 1.2px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(180deg, var(--cream) 0%, var(--paper) 60%, var(--paper-2) 100%);
  border: 5px solid var(--ink); border-radius: 26px;
  box-shadow: 0 8px 0 var(--ink-soft), inset 0 -8px 0 rgba(29, 27, 58, 0.05);
  animation: card-in 0.34s var(--pop);
}
.camp-card h2 { font-size: 26px; margin: 2px 0 4px; padding: 0 22px 3px; }
.camp-rows { width: 520px; grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 8px; margin-top: 10px; }
.camp-rows button.row { min-height: 50px; font-size: 16px; }
.camp-rows .row-value { min-width: 9em; font-size: 16px; }
.camp-rows .row-note { font-size: 11px; }
.camp-acts { margin-top: auto; margin-bottom: 4px; gap: 14px; }
button.go { color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; background: linear-gradient(180deg, #7fe08f 0%, var(--green) 55%, #2fae4d 100%); }
button.go:focus, button.go.is-focus { background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%); }
button.sure { background: linear-gradient(180deg, #ff9aa5 0%, var(--red) 60%, #c8293d 100%) !important; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.camp-head { display: flex; align-items: center; gap: 12px; flex: none; max-width: 100%; }
.camp-head h2 { font-size: 24px; margin: 0 0 2px; padding: 0 18px 3px; }
.camp-who { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 410px; font-size: 13px; }
.menu.camp-tabs { margin: 6px auto 4px; gap: 7px; flex: none; flex-wrap: nowrap; }
.menu.camp-tabs button { font-size: 15px; padding: 4px 14px; min-width: 84px; }
.menu.camp-tabs button.on { background: var(--sky-deep); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.menu.camp-tabs button.on:focus, .menu.camp-tabs button.on.is-focus { background: linear-gradient(180deg, #ffe58a 0%, var(--gold) 55%, var(--gold-deep) 100%); color: var(--ink); -webkit-text-stroke: 0; }
.camp-panel { position: relative; flex: 1 1 auto; width: 100%; min-height: 0; overflow-y: auto; scrollbar-width: thin; padding: 6px 6px 8px; }
.camp-next { margin: 2px 0 2px; font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; color: var(--sky-deep); }
.menu.camp-actions { margin: 6px auto 4px; gap: 9px; }
.menu.camp-actions button { min-width: 300px; font-size: 18px; padding: 6px 22px; }
.camp-block { margin: 10px 6px 0; padding: 6px 10px 8px; text-align: left; background: rgba(255, 255, 255, 0.7); border: 2.5px solid #c9c4da; border-radius: 14px; }
.camp-block-head { margin: 0 0 3px; font-family: var(--display); font-size: 14px; letter-spacing: 0.04em; color: var(--ink); }
.camp-block .tiny { margin: 0 0 3px; }
.camp-results { list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.camp-results.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px 10px; }
.camp-results li { padding: 1px 4px; border-radius: 6px; color: #4a4870; white-space: nowrap; }
.camp-results li.mine { grid-column: 1 / -1; font-size: 14px; color: var(--ink); }
.camp-results li.win { background: rgba(79, 211, 106, 0.25); }
.camp-results li.loss, .camp-block-head.loss { background: rgba(242, 71, 91, 0.16); }
.camp-status { min-height: 16px; margin: 2px 0 0; flex: none; }
.menu.camp-foot { margin: 2px auto 0; flex: none; }
.menu.camp-foot button { font-size: 15px; padding: 5px 18px; }
.camp-tb { margin: 0 4px 6px; text-align: left; max-width: none; font-size: 11.5px; }
.camp-table { display: flex; flex-direction: column; gap: 1px; font-variant-numeric: tabular-nums; }
.trow { display: grid; grid-template-columns: 30px 1fr 34px 34px 34px 38px 42px 42px 46px; align-items: center; padding: 1px 6px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--ink); outline: none; }
.trow span { text-align: right; }
.trow span.tteam { text-align: left; padding-left: 8px; font-family: var(--display); letter-spacing: 0.04em; }
.trow:nth-child(even) { background: rgba(29, 27, 58, 0.04); }
.trow.thead span:nth-child(2) { text-align: left; padding-left: 8px; }
.trow.thead { font-family: var(--display); font-size: 12px; color: var(--muted); background: none; }
.trow.mine { background: rgba(46, 196, 240, 0.28); }
.trow:focus, .trow.is-focus { background: var(--gold); box-shadow: 0 0 0 3px #fff, 0 3px 0 var(--ink-soft); }
.tline { margin: 3px 0; padding: 1px 0; font-family: var(--display); font-size: 11px; letter-spacing: 0.06em; color: #fff; text-align: center; background: var(--sky-deep); border-radius: 6px; }
.camp-roster { display: flex; flex-direction: column; gap: 4px; }
button.row.camp-athlete { display: grid; grid-template-columns: 44px 1fr 86px 80px 64px; min-height: 32px; padding-left: 14px; font-size: 13px; }
.camp-athlete .ath-num { font-family: var(--display); color: var(--sky-deep); }
.camp-athlete .ath-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); letter-spacing: 0.03em; }
.camp-athlete .ath-pos, .camp-athlete .ath-status { font-size: 11px; color: var(--muted); }
.camp-athlete .ath-status { color: var(--red); }
.camp-athlete .ath-build { font-size: 11px; font-family: var(--display); color: #fff; background: var(--sky-deep); border: 2px solid var(--ink); border-radius: 8px; text-align: center; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.camp-athlete .ath-build.locked { background: #a8a3bf; }
.camp-athlete .ath-build:empty { visibility: hidden; }
/* STATS (E27-2): the book and category steppers, the leaders, a team's page */
.camp-ctrls { width: 100%; grid-template-columns: 1fr 1fr; grid-auto-flow: row; grid-template-rows: none; gap: 8px; margin: 2px 0 6px; }
.camp-ctrls button.row { min-height: 38px; font-size: 14px; padding-left: 14px; }
.camp-ctrls .row-value { min-width: 0; font-size: 13px; }
.trow.ldr { grid-template-columns: 30px 1fr 54px 40px 64px; cursor: pointer; }
.trow.ldr span:nth-child(3) { text-align: center; font-family: var(--display); letter-spacing: 0.04em; }
.trow.ldr span:last-child { font-family: var(--display); font-size: 15px; color: var(--sky-deep); }
.trow.thead.ldr span:last-child { color: var(--muted); font-size: 12px; }
.camp-none { margin: 8px; }
.camp-team-head { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 6px; }
.camp-team-head button { flex: none; width: auto; min-width: 0; font-size: 14px; padding: 4px 18px; }
.camp-team-name { font-family: var(--display); font-size: 18px; letter-spacing: 0.03em; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.camp-facts { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 0 0 4px; }
.camp-fact { display: flex; flex-direction: column; align-items: center; padding: 2px 0 3px; background: #fff; border: 2px solid #c9c4da; border-radius: 9px; }
.fact-label { font-size: 9.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.fact-value { font-family: var(--display); font-size: 14px; color: var(--ink); white-space: nowrap; }
.camp-tp { margin-bottom: 6px; }
.trow.tp-sk { grid-template-columns: 30px 1fr 34px 30px 30px 30px 36px 38px 38px; }
.trow.tp-g { grid-template-columns: 30px 1fr 34px 70px 50px 46px 32px; }
/* MEDICAL (E26-4): number, name, what is wrong or what is close. */
.trow.med { grid-template-columns: 38px minmax(0, 0.8fr) minmax(0, 1.5fr); }
.trow.med span { text-align: left; }
.trow.med span:nth-child(3) { padding-left: 8px; font-size: 12px; color: var(--muted); }
.trow.med.warn span:nth-child(3) { color: var(--red); }
.trow.tp-sk span:nth-child(3) { text-align: center; }
.camp-rest-round { margin: 4px 0 1px; font-family: var(--display); }
.camp-slot.finished .camp-slot-note { color: var(--sky-deep); }
.camp-slots { display: flex; flex-direction: column; gap: 12px; width: 800px; margin-top: 10px; }
.camp-slot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: rgba(255, 255, 255, 0.75); border: 3px solid #c9c4da; border-radius: 18px; }
.camp-slot-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; text-align: left; flex: 1 1 auto; min-width: 0; }
.camp-slot-n { font-family: var(--display); font-size: 18px; color: var(--sky-deep); }
.camp-code { font-family: var(--display); font-size: 14px; color: #fff; background: var(--ink); border-radius: 8px; padding: 1px 8px 2px; }
.camp-slot-team { font-family: var(--display); font-size: 16px; letter-spacing: 0.03em; }
.camp-slot-note { flex-basis: 100%; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.menu.camp-slot-acts { margin: 0; gap: 6px 8px; flex: none; flex-wrap: wrap; justify-content: flex-end; max-width: 480px; }
.menu.camp-slot-acts button { font-size: 15px; padding: 5px 14px; }
button.danger { color: #b3263a; }
/* ---- the HQ's TRADES tab (src/ui/trade-desk.ts, E28-2, E28-4) ---- */
.trade-deadline { font-family: var(--display); letter-spacing: 0.03em; color: var(--sky-deep); }
.trade-ctrls { grid-template-columns: 1fr; }
.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 2px; }
.trade-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trade-col .camp-block-head { margin: 0 0 1px 4px; text-align: left; }
button.row.camp-athlete.trade-pick { grid-template-columns: 34px 1fr 16px 28px 44px; gap: 4px; min-height: 28px; padding: 0 6px 0 8px; font-size: 12px; }
.trade-pick .ath-ovr { font-size: 11px; font-weight: 700; color: var(--sky-deep); font-variant-numeric: tabular-nums; }
.trade-pick.on { background: linear-gradient(180deg, #a6f0b3 0%, #6fd885 100%); box-shadow: inset 0 0 0 3px var(--green), 0 3px 0 var(--ink-soft); }
.trade-answer .trade-line { margin: 0 0 4px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.trade-verdict.accept { color: #2a8f43; }
.trade-verdict.reject { color: var(--red); }
.trade-verdict.counter { color: #b07a00; }
.menu.trade-acts, .menu.trade-offer-acts { margin: 4px 0 0; gap: 8px; justify-content: flex-start; }
.menu.trade-acts button, .menu.trade-offer-acts button { font-size: 14px; padding: 4px 14px; min-width: 0; }
.trade-offer { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 2px dashed #ddd8ea; }
.trade-offer:first-of-type { border-top: 0; }
.trade-offer-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; text-align: left; }
.trade-offer-team { font-family: var(--display); font-size: 13px; letter-spacing: 0.03em; color: var(--sky-deep); }
.trade-offer-terms { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.menu.trade-offer-acts { flex: none; margin: 0; }
/* ---- the HQ's LINES tab (src/ui/lines-desk.ts, E25-3) ---- */
.lines-state { font-family: var(--display); letter-spacing: 0.03em; }
.lines-state.ok { color: #2a8f43; }
.lines-state.warn { color: var(--red); }
.menu.lines-acts { margin: 0 4px 2px; gap: 8px; justify-content: flex-start; }
.menu.lines-acts button { font-size: 14px; padding: 4px 14px; min-width: 0; }
.lines-block { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
button.row.camp-athlete.lines-row { grid-template-columns: 46px 34px minmax(0, 1fr) 14px 100px 58px 52px; gap: 4px; min-height: 30px; padding: 0 8px 0 10px; font-size: 12.5px; }
.lines-row .ath-slot { font-family: var(--display); font-size: 11.5px; color: #fff; background: var(--ink); border-radius: 7px; text-align: center; padding: 1px 0 2px; white-space: nowrap; overflow: hidden; }
.lines-row.scratch .ath-slot { background: #a8a3bf; }
.lines-row .ath-role { font-size: 11px; font-weight: 700; color: var(--sky-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines-row:focus .ath-role.range::before, .lines-row.is-focus .ath-role.range::before { content: '◀ '; }
.lines-row:focus .ath-role.range::after, .lines-row.is-focus .ath-role.range::after { content: ' ▶'; }
.lines-row .ath-tags { font-family: var(--display); font-size: 11px; color: #b07a00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines-row .ath-status { font-weight: 700; white-space: nowrap; }
.lines-row.out .ath-name { color: var(--red); }
.lines-row.on { background: linear-gradient(180deg, #a6f0b3 0%, #6fd885 100%); box-shadow: inset 0 0 0 3px var(--green), 0 3px 0 var(--ink-soft); }
.rows.lines-tools { display: flex; flex-direction: column; width: auto; gap: 4px; margin: 1px 0 4px 22px; padding: 2px 0 2px 8px; border-left: 4px solid var(--green); }
.lines-tools button.row { min-height: 32px; font-size: 13px; padding-left: 14px; }
.lines-tools .row-value { min-width: 9em; font-size: 13px; }
.menu.lines-tool-acts { margin: 0; gap: 6px; justify-content: flex-start; flex-wrap: wrap; }
.menu.lines-tool-acts button { font-size: 13px; padding: 3px 12px; min-width: 0; }
.rows.lines-tactic-rows { grid-template-columns: 1fr; }
@media (max-height: 560px) {
  .camp-rows .row-note { font-size: 13px; }
  .camp-results { font-size: 14px; }
  .trow { font-size: 14px; }
  .camp-tb, .camp-slot-note { font-size: 13px; }
}
#mode h2 { margin-bottom: 2px; }
#mode .menu.choices { gap: 8px; margin-top: 4px; }
#mode .menu.choices button { padding: 4px 26px 6px; gap: 1px; }
#mode .choice-name { font-size: 21px; }
#mode .menu.inline { margin-top: 6px; }

/* ---- controls: one seat's key and pad-button slots ---- */
.bind-tabs { margin: 0 auto 3px; gap: 10px; }
.menu.bind-tabs button { padding: 4px 18px; font-size: 15px; min-width: 130px; }
button.bind-tab.p1[aria-pressed="true"] { background: var(--p1); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
button.bind-tab.p2[aria-pressed="true"] { background: var(--p2); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
/* The two pages (E34-1): BUTTONS and SKILL, after the player tabs, set a little apart. */
.menu.bind-tabs button.bind-page { min-width: 104px; }
.menu.bind-tabs button.bind-page.buttons { margin-left: 22px; }
button.bind-page[aria-pressed="true"] { background: var(--gold); }
.bind-grid { display: flex; flex-direction: column; gap: 2px; width: 780px; flex: none; }
#controls .tiny { margin-top: 1px; margin-bottom: 1px; line-height: 1.15; }
#controls #bind-hint { font-size: 11px; }
.bind-row { display: grid; grid-template-columns: 160px 3fr 2fr; gap: 12px; align-items: center; }
.bind-label { text-align: left; font-weight: 600; font-size: 13px; color: var(--ink); }
.bind-head .bind-group, .bind-head .bind-label { font-family: var(--display); font-weight: 400; font-size: 13px; letter-spacing: 0.06em; color: var(--sky-deep); }
.bind-head .bind-group { justify-content: center; }
.bind-group { display: flex; gap: 6px; }
button.bind {
  flex: 1 1 0; min-width: 0; padding: 0 4px 1px; font-family: var(--body); font-weight: 600; font-size: 12px; letter-spacing: 0;
  border-width: 2.5px; border-radius: 10px; box-shadow: 0 3px 0 var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
button.bind:focus, button.bind.is-focus { transform: scale(1.06); animation: none; box-shadow: 0 4px 0 var(--ink), 0 0 0 3px rgba(255, 255, 255, 0.9); }
button.bind.waiting { background: var(--green); color: #fff; animation: nudge 0.7s ease-in-out infinite; }
button.bind.conflict { background: #ffd0d6; border-color: var(--red); color: var(--red); }

/* ---- controller test ---- */
.pad-panel { width: 800px; text-align: left; font-size: 12px; flex: none; }
.pad-status { font-family: var(--display); font-size: 16px; letter-spacing: 0.03em; color: var(--sky-deep); }
.pad-name { color: var(--ink); margin-top: 2px; overflow-wrap: anywhere; white-space: pre-line; min-height: 28px; font-size: 11px; }
.pad-cap { font-family: var(--display); color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.pad-num { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: pre; font-size: 11px; }
.pad-live { display: grid; grid-template-columns: 140px 1fr; gap: 18px; align-items: start; margin: 8px 0; }
.pad-stickbox { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.pad-stick { position: relative; width: 100px; height: 100px; border: 3.5px solid var(--ink); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff 0%, #dff2ff 70%, #bfe3ff 100%); box-shadow: 0 4px 0 var(--ink-soft); }
.pad-dead { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 2px dashed var(--muted); border-radius: 50%; }
.pad-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; }
.pad-dot.raw { width: 10px; height: 10px; border: 2.5px solid var(--ink); background: #fff; }
.pad-dot.shaped { width: 16px; height: 16px; background: var(--p1); border: 3px solid var(--ink); }
.pad-right { display: flex; flex-direction: column; gap: 6px; }
.pad-buttons { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.pad-button { padding: 2px 3px 3px; border: 2.5px solid var(--ink); border-radius: 9px; background: #fff; color: var(--muted); text-align: center; white-space: nowrap; font-weight: 600; font-size: 11px; }
.pad-button.on, .pad-chip.on { color: #fff; background: var(--green); font-weight: 700; transform: scale(1.06); }
.pad-reads { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.pad-chip { padding: 1px 10px 2px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; color: var(--muted); font-weight: 600; }
.pad-rumble { justify-content: flex-start; margin: 4px 0; }
.menu.pad-rumble button { padding: 3px 14px; font-size: 13px; }
.pad-log { min-height: 5em; margin: 4px 0; padding: 6px 10px; border: 2.5px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); white-space: pre-wrap; font-size: 11px; }

/* ---- about ---- */
.about-logo { display: block; width: 280px; height: 100px; margin: 0 auto 2px; }
.about-text {
  width: 680px; margin: 0 auto; padding: 6px 16px; text-align: left; background: #fff; border: 3px solid var(--ink); border-radius: 18px;
  box-shadow: 0 4px 0 var(--ink-soft); font-size: 14px; line-height: 1.36; color: var(--ink);
}
.about-text p { margin: 6px 0; }
.about-text .about-joke { color: var(--muted); font-style: italic; }
.about-foot { font-family: var(--display); letter-spacing: 0.05em; }

/* ---- credits (E29-8) ---- */
.credits-list {
  width: 720px; max-height: 360px; margin: 6px auto 0; padding: 4px 8px 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sky-deep) transparent;
  display: flex; flex-direction: column; gap: 8px; text-align: left; flex: 1 1 auto;
}
.credits-intro { margin: 2px 4px 4px; font-size: 14px; line-height: 1.36; color: var(--ink); }
.credits-head { margin: 6px 4px 0; font-family: var(--display); font-size: 16px; letter-spacing: 0.05em; color: var(--ink); }
.credits-card { padding: 8px 14px 10px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink-soft); }
.credits-card p { margin: 1px 0; font-size: 13px; color: var(--ink); }
.credits-card .credits-what { font-weight: 700; }
.credits-card .credits-by, .credits-card .credits-licence { color: var(--muted); }
.credits-card .credits-url { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }

/* ---- changelog ---- */
.changelog-list {
  width: 720px; max-height: 340px; margin: 6px auto 0; padding: 4px 8px 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--sky-deep) transparent;
  display: flex; flex-direction: column; gap: 12px; text-align: left; flex: 1 1 auto;
}
.changelog-card { padding: 10px 16px 12px; background: #fff; border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink-soft); }
.changelog-card.current { background: #fff6d6; box-shadow: 0 4px 0 var(--ink-soft), inset 6px 0 0 var(--gold); }
.changelog-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.changelog-badge, .changelog-now { padding: 1px 10px 2px; font-family: var(--display); font-size: 13px; letter-spacing: 0.04em; border: 2.5px solid var(--ink); border-radius: 999px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; }
.changelog-badge { background: var(--sky-deep); }
.changelog-now { background: var(--gold); }
.changelog-date { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--muted); }
.changelog-title { margin: 8px 0 4px; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; color: var(--ink); }
.changelog-notes { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.4; color: var(--ink); }
.changelog-notes li + li { margin-top: 3px; }

/* ---- achievements (E17-5) ---- */
.achievements-list {
  width: 640px; max-height: 340px; margin: 6px auto 0; padding: 4px 8px 8px;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--sky-deep) transparent;
  display: flex; flex-direction: column; gap: 10px; text-align: left; flex: 1 1 auto;
}
.achievement-card {
  display: flex; align-items: center; gap: 14px; padding: 8px 14px; background: #eef2f8;
  border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 4px 0 var(--ink-soft); color: var(--muted);
}
.achievement-card.unlocked { background: #fff6d6; color: var(--ink); box-shadow: 0 4px 0 var(--ink-soft), inset 6px 0 0 var(--gold); }
.achievement-medal {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 50%;
  background: #cfd8e8; font-family: var(--display); font-size: 22px; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
}
.achievement-card.unlocked .achievement-medal { background: var(--gold); }
.achievement-body { flex: 1 1 auto; min-width: 0; }
.achievement-title { margin: 0; font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: 0.02em; color: inherit; }
.achievement-how { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; }
.achievement-progress { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--sky-deep); }
.achievement-tag {
  flex: none; padding: 1px 10px 2px; font-family: var(--display); font-size: 12px; letter-spacing: 0.04em;
  border: 2.5px solid var(--ink); border-radius: 999px; background: #cfd8e8; color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
}
.achievement-tag.on { background: var(--green, #4fd36a); font-size: 15px; }

/* ---- the Rink Passport (E20-1) ---- */
.passport { display: flex; gap: 18px; align-items: flex-start; justify-content: center; flex: 1 1 auto; min-height: 0; margin-top: 4px; }
.passport-grid {
  width: 494px; max-height: 334px; padding: 6px 8px 10px; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--sky-deep) transparent;
  display: grid; grid-template-columns: repeat(4, 112px); gap: 8px 10px; align-content: start;
}
.passport-grid button.postcard {
  display: block; width: 112px; height: 76px; margin: 0; padding: 2px; min-width: 0;
  background: none; border: none; border-radius: 12px; box-shadow: none; animation: none; transform: none;
  -webkit-text-stroke: 0; cursor: pointer; transition: transform 0.12s ease-out;
}
.passport-grid button.postcard canvas { display: block; }
.passport-grid button.postcard:hover,
.passport-grid button.postcard:focus,
.passport-grid button.postcard.is-focus { background: none; transform: translateY(-3px) rotate(-1.5deg); box-shadow: 0 0 0 4px var(--gold); outline: none; animation: none; z-index: 1; }
.passport-detail { width: 290px; flex: none; text-align: left; }
.passport-big { display: block; }
.passport-title { margin: 6px 2px 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.1; color: var(--ink); }
.passport-line { margin: 3px 2px 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.passport-detail.stamped .passport-line { color: var(--sky-deep); }
.passport-slots { display: flex; gap: 8px; margin-top: 8px; }
.passport-slot {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 4px;
  border: 2.5px dashed #a8b2cc; border-radius: 12px; background: rgba(255, 255, 255, 0.5);
}
.passport-slot-name { font-family: var(--display); font-size: 12.5px; letter-spacing: 0.03em; color: var(--muted); }
.passport-slot-soon { font-size: 11px; font-weight: 700; color: #a8b2cc; text-align: center; }
.passport-slot.filled { align-items: flex-start; border-style: solid; border-color: var(--sky-deep); background: rgba(255, 255, 255, 0.85); padding: 6px 8px; }
.passport-slot.filled .passport-slot-name { color: var(--sky-deep); }
.passport-slot-head { font-weight: 700; font-size: 12px; color: var(--ink); line-height: 1.15; }
.passport-slot-text { font-size: 10.5px; line-height: 1.25; color: var(--ink); }
.passport-slot-source { font-size: 9.5px; font-weight: 700; color: var(--muted); margin-top: 2px; }
.passport-slot-menu { margin: 0; padding: 0; list-style: none; font-size: 11px; line-height: 1.3; font-weight: 600; color: var(--ink); }
.passport-slot-menu li.veg::after { content: "V"; margin-left: 4px; padding: 0 3px; border-radius: 4px; font-size: 9px; font-weight: 800; color: #fff; background: #3fb85a; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) {
  .passport-grid button.postcard { transition: none; }
  .passport-grid button.postcard:hover, .passport-grid button.postcard:focus, .passport-grid button.postcard.is-focus { transform: none; }
}

/* ---- feedback ---- */
.feedback { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 620px; flex: none; }
.feedback-cats { margin: 4px 0 0; }
button.feedback-cat { padding: 4px 20px; font-size: 15px; }
button.feedback-cat[aria-checked="true"] { background: var(--sky-deep); color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }
.feedback textarea, .feedback input {
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; outline: none; resize: none;
  box-shadow: inset 0 3px 0 rgba(29, 27, 58, 0.08);
  user-select: text; -webkit-user-select: text;
}
.feedback textarea:focus, .feedback input:focus, .feedback textarea.is-focus, .feedback input.is-focus { border-color: var(--sky-deep); box-shadow: 0 0 0 4px var(--gold); }
.feedback ::placeholder { color: #a8a3bf; }
.feedback-widget { min-height: 66px; font-size: 13px; font-weight: 500; color: var(--muted); display: flex; align-items: center; justify-content: center; }
.feedback .menu.inline { margin-top: 2px; }

/* ---- no WebGL2: a friendly cartoon card instead of the rink ---- */
#nogl { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; }
body.no-webgl #nogl { display: flex; }
body.no-webgl #overlay, body.no-webgl #touchpad, body.no-webgl #game, body.no-webgl #game3d { visibility: hidden; }
.nogl-card {
  max-width: 560px; padding: 22px 30px 20px; text-align: center;
  background: linear-gradient(180deg, var(--cream) 0%, var(--paper) 70%, var(--paper-2) 100%);
  border: 5px solid var(--ink); border-radius: 30px; box-shadow: 0 9px 0 var(--ink-soft);
  animation: card-in 0.4s var(--pop);
}
.nogl-art { width: 150px; height: 105px; animation: bounce 1.6s ease-in-out infinite; }
.nogl-title { font-family: var(--display); font-size: clamp(22px, 4vw, 34px); line-height: 1.1; letter-spacing: 0.02em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; margin: 6px 0 10px; }
.nogl-note { margin: 0; font-size: 16px; font-weight: 500; line-height: 1.4; }
.nogl-why:empty { display: none; }
.nogl-why { display: inline-block; margin: 12px 0 0; padding: 2px 12px; font-size: 12px; font-weight: 600; color: var(--muted); border: 2px dashed var(--muted); border-radius: 999px; }

/* ---- the WebGL context was lost: the game waits under a card until it comes back ---- */
#glreset { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(29, 27, 58, 0.45); }
body.gl-lost #glreset { display: flex; }
body.gl-lost #touchpad { visibility: hidden; }
.glreset-slow { display: none; margin-top: 14px; }
body.gl-slow .glreset-slow { display: block; }
.glreset-slow button { margin-top: 12px; }

/* ---- touch: the on-screen gamepad (src/ui/touchpad.ts), shown in a game once the screen is touched ----
   The game is a 16:9 letterbox, so on a phone on its side (about 2.2:1) the buttons sit mostly in
   the bars either side of the rink, and on a 4:3 tablet below it. Cartoon buttons: chunky, an ink
   outline, a glossy highlight, a drop shadow, and a bouncy press. A little see-through at rest, so
   where they do overlap the play the skaters still show. */
#touchpad {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--view-h);
  /* One button's width: a phone on its side is about 360-430 px high. --size is BUTTON SIZE. */
  --u: calc(clamp(46px, calc(var(--vh) * 15), 84px) * var(--size, 1));
  --edge-l: env(safe-area-inset-left, 0px);
  --edge-r: env(safe-area-inset-right, 0px);
  --edge-t: env(safe-area-inset-top, 0px);
  --edge-b: env(safe-area-inset-bottom, 0px);
  /* The floor the buttons stand on: the safe area, or the top of the HUD band when that is higher
     (src/ui/touchpad.ts sets --hud-clear from the letterbox). */
  --floor: max(var(--edge-b), var(--hud-clear, 0px));
  z-index: 6;
  touch-action: none;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
/* At rest, a ghost bottom left (bottom right left-handed); under a thumb the script moves it to
   where the thumb landed. Twice the stick's throw across (src/input/touch.ts TOUCH_STICK_RADIUS). */
.touch-stick {
  position: absolute;
  left: calc(var(--edge-l) + var(--u) * 1.35);
  top: calc(100% - var(--floor) - var(--u) * 1.2);
  width: calc(112px * var(--size, 1)); height: calc(112px * var(--size, 1));
  transform: translate(-50%, -50%);
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.75) 0%, rgba(223, 242, 255, 0.6) 60%, rgba(127, 211, 255, 0.55) 100%);
  box-shadow: 0 5px 0 var(--ink-soft), inset 0 -6px 0 rgba(29, 27, 58, 0.12);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.1s;
}
#touchpad.left-handed .touch-stick { left: calc(100% - var(--edge-r) - var(--u) * 1.35); }
.touch-stick.on { opacity: 0.95; }
.touch-knob {
  position: absolute; left: 50%; top: 50%;
  width: 46%; height: 46%; margin: -23% 0 0 -23%;
  border: 4px solid var(--ink); border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fff 0%, #ffe58a 28%, var(--gold) 60%, var(--gold-deep) 100%);
  box-shadow: 0 4px 0 var(--ink);
}
.touch-btn {
  --c: #4fd36a;
  --c2: #2fae4d;
  position: absolute;
  display: flex; align-items: center; justify-content: center;
  width: var(--u); height: var(--u);
  border: 4px solid var(--ink);
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 45%, var(--c2) 100%);
  box-shadow: 0 6px 0 var(--ink), inset 0 -6px 0 rgba(0, 0, 0, 0.14);
  font-family: var(--display); font-weight: 400;
  font-size: calc(var(--u) * 0.22);
  letter-spacing: 0.03em;
  -webkit-text-stroke: calc(var(--u) * 0.06) var(--ink); paint-order: stroke fill;
  opacity: 0.86;
  pointer-events: auto;
  transition: transform 0.18s var(--pop), box-shadow 0.08s, opacity 0.08s;
}
/* The glossy highlight: a white crescent near the top. */
.touch-btn::before {
  content: ''; position: absolute; left: 20%; top: 9%; width: 60%; height: 30%;
  border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.touch-label { position: relative; pointer-events: none; white-space: nowrap; }
.touch-btn svg { position: relative; width: 50%; height: 50%; fill: none; stroke: var(--ink); stroke-width: 4.5; stroke-linecap: round; pointer-events: none; }
/* PASS dragged up far enough to be a saucer: it lifts and reads SAUCER until it is let go. */
.touch-btn.saucer, .touch-btn.on.saucer { transform: translateY(-14px) scale(1.08); box-shadow: 0 8px 0 var(--ink); opacity: 1; }
/* Held: pressed down onto its shadow, squashed a little, fully opaque: not colour alone. */
.touch-btn.on {
  opacity: 1;
  transform: translateY(5px) scale(0.92, 0.88);
  box-shadow: 0 1px 0 var(--ink), inset 0 4px 0 rgba(0, 0, 0, 0.16);
  transition: transform 0.05s, box-shadow 0.05s;
}
.touch-btn.gone { display: none; }
/* SHOOT (A, green) big in the corner; PASS (X, blue) inboard of it and lower; GOALIE (Y, gold)
   above it; the skill move DEKE / POKE (orange) between GOALIE and PASS; PAUSE small, top right,
   where the HUD has nothing, and CHANGE (lilac, small) under it. The stick at its rim sprints. */
.touch-shoot {
  --c: #4fd36a; --c2: #2b9e46;
  width: calc(var(--u) * 1.45); height: calc(var(--u) * 1.45);
  right: calc(var(--edge-r) + var(--u) * 0.3);
  bottom: calc(var(--floor) + var(--u) * 0.16);
  font-size: calc(var(--u) * 0.26);
}
.touch-pass {
  --c: #5b8cff; --c2: #3558c9;
  width: calc(var(--u) * 1.12); height: calc(var(--u) * 1.12);
  right: calc(var(--edge-r) + var(--u) * 1.95);
  bottom: calc(var(--floor) + var(--u) * 0.06);
}
.touch-goalie {
  --c: #ffc83d; --c2: #e59313;
  width: calc(var(--u) * 0.98); height: calc(var(--u) * 0.98);
  right: calc(var(--edge-r) + var(--u) * 0.52);
  bottom: calc(var(--floor) + var(--u) * 1.78);
  font-size: calc(var(--u) * 0.18);
}
/* DEKE / POKE (orange) inboard of GOALIE and over PASS: optional, two-button play never needs it. */
.touch-move {
  --c: #ff8f2e; --c2: #d8661a;
  width: calc(var(--u) * 0.98); height: calc(var(--u) * 0.98);
  right: calc(var(--edge-r) + var(--u) * 1.72);
  bottom: calc(var(--floor) + var(--u) * 1.3);
  font-size: calc(var(--u) * 0.2);
}
/* CHANGE (pale lilac, ink caption) beside PAUSE (SORRY! is under it): sends a skater to the bench. */
.touch-change {
  --c: #e6dcff; --c2: #b7a3ea;
  width: calc(var(--u) * 0.8); height: calc(var(--u) * 0.8);
  right: calc(var(--edge-r) + var(--u) * 1.04);
  top: calc(var(--edge-t) + var(--u) * 0.17);
  color: var(--ink); -webkit-text-stroke: 0;
  border-width: 3px; box-shadow: 0 4px 0 var(--ink);
}
.touch-change.long { font-size: calc(var(--u) * 0.15); }
.touch-btn.long { font-size: calc(var(--u) * 0.17); letter-spacing: 0; }
.touch-shoot.long { font-size: calc(var(--u) * 0.21); }
.touch-pause {
  --c: #fff8ec; --c2: #e6d8bf;
  width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7);
  right: calc(var(--edge-r) + var(--u) * 0.22);
  top: calc(var(--edge-t) + var(--u) * 0.22);
  color: var(--ink); -webkit-text-stroke: 0;
  border-width: 3px; box-shadow: 0 4px 0 var(--ink);
  font-size: calc(var(--u) * 0.16);
}
.touch-pause.skip svg { display: none; }
/* Docked (a tablet, src/input/touch.ts dockStrip): the game sits at the top and the pad lies in
   the strip under it (--strip, set by src/ui/touchpad.ts), like a handheld: no button over the
   ice or the scoreboard band. The buttons grow with the screen (up to 96 px a unit, not the
   phone's 84) but always fit the strip; they stand in a row, SHOOT in the corner, then PASS,
   DEKE / POKE, GOALIE and CHANGE inboard; PAUSE sits in the middle of the strip. */
#touchpad.docked {
  --floor: var(--edge-b);
  --u: min(calc(clamp(46px, calc(var(--vh) * 15), 96px) * var(--size, 1)), calc(var(--strip, 156px) / 1.62));
}
#touchpad.docked .touch-btn { opacity: 0.96; }
#touchpad.docked .touch-stick { top: calc(100% - var(--floor) - var(--strip, 156px) / 2); }
#touchpad.docked .touch-shoot { bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 1.45) / 2); }
#touchpad.docked .touch-pass { right: calc(var(--edge-r) + var(--u) * 1.95); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 1.12) / 2); }
#touchpad.docked .touch-move { right: calc(var(--edge-r) + var(--u) * 3.3); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.98) / 2); }
#touchpad.docked .touch-goalie { right: calc(var(--edge-r) + var(--u) * 4.5); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.98) / 2); }
#touchpad.docked .touch-change { top: auto; right: calc(var(--edge-r) + var(--u) * 5.65); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.8) / 2); }
#touchpad.docked .touch-pause { top: auto; right: auto; left: calc(40% - var(--u) * 0.35); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.7) / 2); }
/* SORRY docked beside PAUSE in the strip, on the stick's side of it (E34-2): it used to stay top
   right, over the game. */
#touchpad.docked .touch-sorry { top: auto; right: auto; left: calc(40% - var(--u) * 1.25); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.7) / 2); }
#touchpad.docked.left-handed .touch-pass { right: auto; left: calc(var(--edge-l) + var(--u) * 1.95); }
#touchpad.docked.left-handed .touch-move { right: auto; left: calc(var(--edge-l) + var(--u) * 3.3); }
#touchpad.docked.left-handed .touch-goalie { right: auto; left: calc(var(--edge-l) + var(--u) * 4.5); }
#touchpad.docked.left-handed .touch-change { right: auto; left: calc(var(--edge-l) + var(--u) * 5.65); }
#touchpad.docked.left-handed .touch-pause { left: auto; right: calc(40% - var(--u) * 0.35); }
#touchpad.docked.left-handed .touch-sorry { left: auto; right: calc(40% - var(--u) * 1.25); }
/* SORRY! (E15-4, lilac): small, under PAUSE, out of the thumbs' way; never needed to play. */
.touch-sorry {
  --c: #c9a6ff; --c2: #9a72e0;
  width: calc(var(--u) * 0.7); height: calc(var(--u) * 0.7);
  right: calc(var(--edge-r) + var(--u) * 0.22);
  top: calc(var(--edge-t) + var(--u) * 1.08);
  border-width: 3px; box-shadow: 0 4px 0 var(--ink);
}
.touch-btn.touch-sorry.long { font-size: calc(var(--u) * 0.12); }
/* Left-handed: the buttons mirror to the left, the stick to the right. */
#touchpad.left-handed .touch-shoot { right: auto; left: calc(var(--edge-l) + var(--u) * 0.3); }
#touchpad.left-handed .touch-pass { right: auto; left: calc(var(--edge-l) + var(--u) * 1.95); }
#touchpad.left-handed .touch-goalie { right: auto; left: calc(var(--edge-l) + var(--u) * 0.52); }
#touchpad.left-handed .touch-move { right: auto; left: calc(var(--edge-l) + var(--u) * 1.72); }
/* ... and PAUSE, CHANGE and SORRY along the top go to the left with them (E34-2). */
#touchpad.left-handed .touch-pause { right: auto; left: calc(var(--edge-l) + var(--u) * 0.22); }
#touchpad.left-handed .touch-change { right: auto; left: calc(var(--edge-l) + var(--u) * 1.04); }
#touchpad.left-handed .touch-sorry { right: auto; left: calc(var(--edge-l) + var(--u) * 0.22); }

/* ---- SKILL (E34-2): the skill area takes SHOOT's corner and DEKE's place on the ice ----
   A big rounded pad of SHOOT's green, see-through at rest, lit under the thumb, with a puck dot
   following the stroke (src/ui/touchpad.ts). PASS stands beside it, GOALIE small above it; CHANGE,
   PAUSE and SORRY stay small along the top. The strokes are measured in --u (.touch-unit). */
.touch-unit { position: absolute; left: 0; top: 0; width: var(--u); height: 0; visibility: hidden; pointer-events: none; }
.touch-skill {
  position: absolute;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: calc(var(--u) * 2.35); height: calc(var(--u) * 2);
  right: calc(var(--edge-r) + var(--u) * 0.12);
  bottom: calc(var(--floor) + var(--u) * 0.08);
  border: 4px solid var(--ink);
  border-radius: 48%;
  background: radial-gradient(ellipse at 50% 32%, rgba(255, 255, 255, 0.6) 0%, rgba(79, 211, 106, 0.5) 52%, rgba(43, 158, 70, 0.62) 100%);
  box-shadow: 0 6px 0 var(--ink), inset 0 -6px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
  font-family: var(--display); font-weight: 400; font-size: calc(var(--u) * 0.27); letter-spacing: 0.03em;
  -webkit-text-stroke: calc(var(--u) * 0.06) var(--ink); paint-order: stroke fill;
  opacity: 0.8;
  pointer-events: auto; touch-action: none;
  transition: opacity 0.08s, transform 0.12s var(--pop);
}
.touch-skill.on { opacity: 1; transform: scale(0.97); }
.touch-skill.gone { display: none; }
.touch-skill .touch-label { position: relative; pointer-events: none; white-space: nowrap; }
.touch-sub {
  position: relative; pointer-events: none; white-space: nowrap; margin-top: calc(var(--u) * 0.04);
  font-family: var(--body); font-weight: 800; font-size: calc(var(--u) * 0.135); letter-spacing: 0.02em;
  -webkit-text-stroke: calc(var(--u) * 0.035) var(--ink);
}
.touch-skill-ring {
  position: absolute; inset: 11%; border: 2.5px dashed rgba(29, 27, 58, 0.35); border-radius: 50%; pointer-events: none;
}
.touch-skill-dot {
  position: absolute; left: 50%; top: 50%; display: none;
  width: calc(var(--u) * 0.36); height: calc(var(--u) * 0.36); margin: calc(var(--u) * -0.18) 0 0 calc(var(--u) * -0.18);
  border-radius: 50%; background: #1d1b3a; border: 3px solid #fff; box-shadow: 0 2px 0 var(--ink);
  pointer-events: none;
}
.touch-skill.on .touch-skill-dot { display: block; }
#touchpad.skill-on .touch-pass { right: calc(var(--edge-r) + var(--u) * 2.62); bottom: calc(var(--floor) + var(--u) * 0.1); }
#touchpad.skill-on .touch-goalie {
  width: calc(var(--u) * 0.82); height: calc(var(--u) * 0.82); font-size: calc(var(--u) * 0.155);
  right: calc(var(--edge-r) + var(--u) * 0.3); bottom: calc(var(--floor) + var(--u) * 2.24);
}
/* Two fingers on the stick's side protect the puck: the stick glows gold while they do. */
#touchpad.protecting .touch-stick { box-shadow: 0 5px 0 var(--ink-soft), 0 0 0 6px rgba(255, 200, 61, 0.75); }
#touchpad.left-handed .touch-skill { right: auto; left: calc(var(--edge-l) + var(--u) * 0.12); }
#touchpad.left-handed.skill-on .touch-pass { right: auto; left: calc(var(--edge-l) + var(--u) * 2.62); }
#touchpad.left-handed.skill-on .touch-goalie { right: auto; left: calc(var(--edge-l) + var(--u) * 0.3); }
/* Docked on a tablet: the skill area in the strip's corner, then PASS, GOALIE and CHANGE inboard. */
#touchpad.docked .touch-skill {
  width: calc(var(--u) * 2.3); height: calc(var(--u) * 1.45);
  right: calc(var(--edge-r) + var(--u) * 0.25); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 1.45) / 2);
}
#touchpad.docked.skill-on .touch-pass { right: calc(var(--edge-r) + var(--u) * 2.78); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 1.12) / 2); }
#touchpad.docked.skill-on .touch-goalie { right: calc(var(--edge-r) + var(--u) * 4.05); bottom: calc(var(--floor) + (var(--strip, 156px) - var(--u) * 0.82) / 2); }
#touchpad.docked.skill-on .touch-change { right: calc(var(--edge-r) + var(--u) * 5.05); }
#touchpad.docked.left-handed .touch-skill { right: auto; left: calc(var(--edge-l) + var(--u) * 0.25); }
#touchpad.docked.left-handed.skill-on .touch-pass { right: auto; left: calc(var(--edge-l) + var(--u) * 2.78); }
#touchpad.docked.left-handed.skill-on .touch-goalie { right: auto; left: calc(var(--edge-l) + var(--u) * 4.05); }
#touchpad.docked.left-handed.skill-on .touch-change { right: auto; left: calc(var(--edge-l) + var(--u) * 5.05); }
/* The first-use hint (E34-2): the strokes on a navy card over the top of the ice; a tap puts it away. */
.touch-hint {
  position: absolute; left: 50%; top: calc(var(--edge-t) + 8px); transform: translateX(-50%);
  width: min(560px, 66vw); box-sizing: border-box; padding: 8px 14px 10px;
  background: rgba(28, 44, 104, 0.92); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink);
  color: #fff; font-family: var(--body); font-weight: 700; font-size: clamp(10px, calc(var(--vh) * 2.9), 13px); line-height: 1.25; text-align: center;
  pointer-events: auto;
}
.touch-hint h3 {
  margin: 0 0 2px; font-family: var(--display); font-weight: 400; font-size: 1.45em; letter-spacing: 0.04em; color: var(--gold);
  -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
}
.touch-hint p { margin: 1px 0; }
.touch-hint .touch-hint-head { margin-top: 5px; font-family: var(--display); font-weight: 400; letter-spacing: 0.05em; color: #ffe58a; }
.touch-hint .touch-hint-ok {
  display: inline-block; margin-top: 7px; padding: 3px 18px 4px;
  background: var(--gold); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--display); font-weight: 400; font-size: 1.2em;
}

/* The DOM menus under a finger: bigger targets (the overlay is scaled down to about 0.7 on a phone). */
body.touch .menu.small button { font-size: 15px; padding: 11px 16px; }
body.touch button.version-link, body.touch a.gallery-link { padding: 8px 14px; }
body.touch .menu.inline button { padding-top: 11px; padding-bottom: 11px; }
body.touch .rows { gap: 5px 14px; }
body.touch button.row { min-height: 35px; }
body.touch .row-note { display: none; }
body.touch .row-value { min-width: 6.5em; }

/* ---- portrait: the game is landscape only, so a phone held upright is asked to turn ---- */
#rotate {
  position: fixed; inset: 0; z-index: 20;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 22px, rgba(255, 255, 255, 0) 22px 44px),
    radial-gradient(ellipse at 50% 40%, #8fd0ff 0%, #5f93e6 60%, #3f63c9 100%);
}
#rotate svg { width: 110px; height: 110px; fill: var(--paper); stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; animation: tilt 2.4s var(--pop) infinite; }
#rotate svg path { fill: none; stroke: var(--gold); stroke-width: 5; }
@keyframes tilt { 0%, 30% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } }
.rotate-title { font-family: var(--display); font-size: 30px; letter-spacing: 0.03em; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.rotate-note { font-size: 16px; font-weight: 600; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); border-radius: 999px; padding: 3px 16px; }
/* Not a desktop window that happens to be tall: the app sets body.rotate (input/touch.ts
   rotateWanted) where the main pointer is a finger, the screen has been touched, or the window
   is phone-narrow; and pauses a game under the card. */
body.rotate #rotate { display: flex; }

@media (prefers-reduced-motion: reduce) {
  .screen.card, #sound-hint, #rotate svg, .nogl-art, .nogl-card, button, button.big { animation: none !important; }
}

/* ---- the art gallery (gallery.html): the SOFT cartoon page, plates on paper cards ---- */
.gallery-page {
  margin: 0; padding: 24px 16px 64px; color: var(--ink); font-family: var(--body);
  background: radial-gradient(ellipse at 50% 0%, #bfe6ff 0%, #8fc4f2 45%, #5f93e6 100%) fixed;
}
.gallery-page a { color: var(--sky-deep); }
.gallery-head { text-align: center; margin-bottom: 24px; }
.gallery-head .logo {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(34px, 7vw, 76px); letter-spacing: 0.04em; color: var(--gold);
  -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink);
}
.gallery-head .logo.small { font-size: clamp(28px, 4.5vw, 48px); }
/* The flat logo's colours (src/ui/logo.ts): warm-gold PUCK, a small red ampersand, ice-blue GLORY. */
.logo .logo-puck { color: #ffc43a; }
.logo .logo-amp { color: #e4434b; font-size: 0.62em; vertical-align: 0.18em; }
.logo .logo-glory { color: #9fdcff; }
.gallery-head .subtitle {
  display: inline-block; margin-top: 10px; padding: 4px 18px; border: 3px solid var(--ink); border-radius: 999px; background: var(--paper);
  font-weight: 700; letter-spacing: 0.06em; font-size: clamp(11px, 1.5vw, 15px);
}
.gallery-nav { font-weight: 600; font-size: 14px; }
.gallery-warn { flex-basis: 100%; text-align: center; font-weight: 700; color: var(--red); }
#gallery { max-width: 1240px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
#gallery h2 {
  flex-basis: 100%; margin: 28px 0 0; padding: 0; font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 0.03em;
  color: #fff; background: none; border: 0; box-shadow: none; transform: none;
  -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill;
}
.plate { margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 100%; padding: 10px; background: var(--paper); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 5px 0 var(--ink); }
.plate canvas { display: block; border: 3px solid var(--ink); border-radius: 10px; max-width: 100%; }
.plate figcaption { font-family: var(--display); font-size: 15px; letter-spacing: 0.03em; display: flex; flex-direction: column; gap: 3px; max-width: 960px; }
.plate figcaption a { color: var(--ink); text-decoration: none; }
.plate figcaption span { color: var(--muted); font-family: var(--body); font-weight: 600; font-size: 13px; }
body.single .gallery-head { margin-bottom: 8px; }

/* UPDATE READY on the title (src/app/pwa.ts): a new build is waiting; press to switch. */
button.update-link { color: #ffe27a; font-weight: 700; }
button.update-link.hidden { display: none; }