/* Crusaders Hoops '26. Tokens and rules: docs/STYLE-GUIDE.md */
:root {
  --ink: #111;
  --paper: #FFF8E7;
  --pop: #FFD400;
  --hot: #D7263D;
  --navy: #0B1F4B;
  --crusader: #CF2027;
  --crusader-2: #106BB4;
  --gold: #F9AF19;
  --go: #1FA84F;
  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --dots: radial-gradient(rgb(255 255 255 / .09) 22%, transparent 24%) 0 0 / 10px 10px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--dots), var(--navy);
  color: var(--ink);
  font: 1rem/1.5 "Atkinson Hyperlegible", system-ui, sans-serif;
}
h1, h2, .logo, .card-name, .hud, .btn { font-family: Bangers, "Atkinson Hyperlegible", sans-serif; letter-spacing: .03em; font-weight: 400; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .5rem; line-height: 1.1; }
h2 { font-size: 2rem; margin: 0 0 1rem; }
img { max-width: 100%; height: auto; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

main { max-width: 1320px; margin: 0 auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.screen { min-height: calc(100vh - 32px); }

/* Panels */
.panel, .title-panel, .comic-dialog {
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.panel { max-width: 1000px; margin: 0 auto; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.hint { margin: .25rem 0 1rem; }
.hint.small, .fine { font-size: .95rem; }
.fine { margin-top: 1.25rem; max-width: 34rem; }
.error { color: var(--hot); font-weight: 700; background: var(--paper); border: 3px solid var(--hot); padding: .5rem .75rem; }
.status { font-weight: 700; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .45rem 1.1rem;
  font-size: 1.35rem; color: var(--ink); background: var(--pop);
  border: 4px solid var(--ink); border-radius: 4px; box-shadow: var(--shadow);
  cursor: pointer; text-decoration: none;
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 2px 2px 0 var(--ink); }
.btn.ghost { background: var(--paper); }
.btn.big { font-size: 2rem; min-height: 64px; padding: .5rem 2rem; }
.btn.small { font-size: 1.1rem; min-height: 44px; padding: .3rem .9rem; box-shadow: var(--shadow-sm); }
.btn-col { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-top: 1.5rem; }

/* Focus: yellow band inside an ink ring (visible on paper and on navy) */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px var(--pop), var(--shadow);
}
.play:focus-visible { outline-offset: -3px; box-shadow: inset 0 0 0 6px var(--pop); }
h1:focus-visible, h1:focus { outline: none; box-shadow: none; }

/* Title */
.title-screen { position: relative; display: grid; place-items: center; padding: 1rem 0; }
.title-cover {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border: 4px solid var(--ink); box-shadow: var(--shadow);
}
.title-panel { position: relative; max-width: 560px; margin: 2rem 1rem; }
.title-logo { display: block; width: min(260px, 70%); margin: -4rem auto .5rem; filter: drop-shadow(4px 4px 0 var(--ink)); }
.logo { font-size: clamp(2.6rem, 7vw, 4.2rem); text-align: center; -webkit-text-stroke: 1px var(--ink); color: var(--ink); }
.logo .yr { color: var(--hot); }
.tag { text-align: center; font-weight: 700; margin-top: 0; }
.title-panel .btn-col { align-items: stretch; }

/* Radio cards and rows */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; }
.list { display: grid; gap: .6rem; }
.card, .row {
  position: relative; display: flex; flex-direction: column; gap: .25rem;
  background: #fff; border: 4px solid var(--ink); padding: .9rem; padding-top: 1.1rem; cursor: pointer;
}
.row { flex-direction: row; align-items: center; gap: .9rem; padding: .6rem .9rem; }
.card input, .row input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.card:has(input:checked), .row:has(input:checked) { border-width: 7px; padding: calc(.9rem - 3px); background: var(--paper); }
.row:has(input:checked) { padding: calc(.6rem - 3px) calc(.9rem - 3px); }
.card:has(input:focus-visible), .row:has(input:focus-visible) { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--pop); }
.badge {
  display: none; position: absolute; top: -14px; right: 10px;
  background: var(--pop); color: var(--ink); border: 2px solid var(--ink);
  font: 700 1rem/1.3 "Atkinson Hyperlegible", sans-serif; padding: 0 .4rem;
}
.card:has(input:checked) .badge, .row:has(input:checked) .badge { display: block; }
.card-name { font-size: 1.6rem; line-height: 1.1; }
.row .card-name { font-size: 1.4rem; flex: 1; }
.card-desc { font-size: .95rem; }
.card-stripe { height: 10px; margin: -.3rem -.3rem .3rem; background: linear-gradient(90deg, var(--crusader) 60%, var(--crusader-2) 60% 85%, var(--gold) 85%); border: 2px solid var(--ink); }
.card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border: 3px solid var(--ink); margin-bottom: .4rem; }
.swatch { width: 32px; height: 32px; flex: none; border: 3px solid var(--ink); background: var(--c); }

/* Tables */
.table-wrap { overflow-x: auto; border: 4px solid var(--ink); background: var(--paper); }
table { border-collapse: collapse; width: 100%; }
caption { text-align: left; font-weight: 700; padding: .5rem .75rem; }
th, td { padding: 8px 10px; border-bottom: 2px solid var(--ink); text-align: left; white-space: nowrap; }
thead th { background: var(--navy); color: #fff; font-family: "Atkinson Hyperlegible", sans-serif; font-weight: 700; }
tbody th { font-weight: 700; }
td input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--navy); }
.mug { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--ink); vertical-align: middle; margin-right: .5rem; object-fit: cover; display: inline-block; }
.mug.none { background: var(--crusader); }
.tagnote { font-weight: 400; font-size: .85rem; background: var(--pop); border: 2px solid var(--ink); padding: 0 .3rem; margin-left: .3rem; }

/* Game stage */
.game-screen { padding: 0; }
.stage { position: relative; max-width: 1280px; margin: 0 auto; }
.hud { display: flex; justify-content: space-between; align-items: stretch; gap: .5rem; margin-bottom: .5rem; }
.hud-team, .hud-mid {
  display: flex; align-items: center; gap: .75rem;
  background: var(--navy); color: #fff; border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: .25rem .9rem;
  font-size: 1.5rem; outline: 3px solid #fff; outline-offset: -6px;
}
.hud-team.home { border-left: 12px solid var(--crusader); }
.hud-team.away { border-right: 12px solid var(--opp, #fff); }
.hud-score { font-size: 2.2rem; font-variant-numeric: tabular-nums; min-width: 2.2ch; text-align: center; }
.hud-mid { color: var(--pop); font-variant-numeric: tabular-nums; }
.play { position: relative; aspect-ratio: 16 / 9; border: 4px solid var(--ink); box-shadow: var(--shadow); background: #000; }
.play canvas { display: block; width: 100%; height: 100%; }
.play .overlay { position: absolute; inset: 0; pointer-events: none; }
/* Loading screen (Explore and matches): docs/STYLE-GUIDE.md "Progress bar" */
.loading-screen { display: grid; place-items: center; padding: 1rem 0; }
.loading-panel { width: min(100%, 32rem); }
.loading-panel progress {
  display: block; width: 100%; height: 20px; margin: .75rem 0 .25rem;
  appearance: none; -webkit-appearance: none; border: 4px solid var(--ink); border-radius: 0; background: var(--paper); color: var(--navy);
}
.loading-panel progress::-webkit-progress-bar { background: var(--paper); }
.loading-panel progress::-webkit-progress-value { background: repeating-linear-gradient(-45deg, var(--navy) 0 10px, #1a3366 10px 20px) 0 0 / 28px 28px; animation: loading-stripes 1.6s linear infinite; }
.loading-panel progress::-moz-progress-bar { background: var(--navy); }
@keyframes loading-stripes { to { background-position: 28px 0; } }
/* (the global reduced-motion rules' `*` doesn't reach pseudo-elements) */
@media (prefers-reduced-motion: reduce) { html:not(.motion-ok) .loading-panel progress::-webkit-progress-value { animation: none; } }
.reduce-motion .loading-panel progress::-webkit-progress-value { animation: none; }
.loading-panel .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.under, .under-btns { display: flex; gap: .75rem; align-items: center; }
.under { margin-top: .75rem; }
.ticker {
  flex: 1; margin: 0; min-height: 44px; background: var(--paper); border: 3px solid var(--ink);
  padding: .45rem .9rem; font-weight: 700; font-size: 1.1rem;
}
.ticker.quote:empty { display: none; }
.ticker.quote { margin-top: .75rem; font-style: italic; }

/* Touch pad */
.pad { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1rem; padding-bottom: env(safe-area-inset-bottom); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dpad { display: grid; grid-template: ". u ." ". . ." / 64px 64px 64px; grid-template-areas: ". u ." "l . r" ". d ."; gap: 8px; }
.dpad [data-key=ArrowUp] { grid-area: u; } .dpad [data-key=ArrowLeft] { grid-area: l; }
.dpad [data-key=ArrowRight] { grid-area: r; } .dpad [data-key=ArrowDown] { grid-area: d; }
.acts { display: grid; grid-template-columns: repeat(2, minmax(88px, 1fr)); gap: 8px; }
.pad button {
  min-width: 64px; min-height: 64px; font: 700 1.05rem/1.2 "Atkinson Hyperlegible", sans-serif;
  background: var(--paper); color: var(--ink); border: 4px solid var(--ink); box-shadow: var(--shadow); border-radius: 4px;
}
.pad .shoot { background: var(--pop); }
/* one SVG triangle for every arrow (iOS draws the arrow glyphs as emoji); turned on the icon, never the button (presses move it) */
.pad .arrow { display: block; width: 24px; height: 24px; margin: auto; fill: currentColor; pointer-events: none; }
.pad [data-key=ArrowLeft] .arrow { transform: rotate(-90deg); }
.pad [data-key=ArrowRight] .arrow { transform: rotate(90deg); }
.pad [data-key=ArrowDown] .arrow { transform: rotate(180deg); }
.phone .pad .arrow { width: 22px; height: 22px; }
.pad button.down { box-shadow: none; transform: translate(6px, 6px); }

/* Dialogs */
.comic-dialog { max-width: 32rem; width: calc(100% - 32px); max-height: calc(100vh - 32px); overflow: auto; color: var(--ink); }
.comic-dialog::backdrop { background: rgb(11 31 75 / .8); }
.settings fieldset { margin-bottom: 1rem; }
.settings legend { font-weight: 700; margin-bottom: .25rem; }
.settings label { display: flex; align-items: center; gap: .6rem; min-height: 44px; }
.settings input { width: 24px; height: 24px; accent-color: var(--navy); }
.keys th[scope=row] { white-space: normal; }
.keys td { white-space: normal; }
.places { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .6rem; }
.places .btn { width: 100%; flex-direction: column; align-items: flex-start; font-size: 1.3rem; }
.places .card-desc { font-family: "Atkinson Hyperlegible", sans-serif; letter-spacing: 0; }
.comic-dialog form .btn { margin-top: .5rem; }
.comic-dialog h2[tabindex="-1"]:focus { outline: none; box-shadow: none; }
/* Links (credits, licences): ink on paper, the underline marks them (never colour alone), never removed */
.comic-dialog a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.comic-dialog a:hover { text-decoration-thickness: 2px; }
.comic-dialog a:focus-visible { box-shadow: 0 0 0 5px var(--pop); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.credits { padding-left: 1.25rem; line-height: 1.5; }
.credits li + li { margin-top: .5rem; }

.results-line { font-size: 1.4rem; font-weight: 700; }

@media (max-width: 640px) {
  .hud-team, .hud-mid { font-size: 1.1rem; padding: .2rem .5rem; }
  .hud-score { font-size: 1.75rem; }
  .under { flex-wrap: wrap; }
  .title-logo { margin-top: -2rem; }
}

/* Install hint (title screen): docs/STYLE-GUIDE.md "Install hint" */
.install { margin: 0 0 1.25rem; border: 4px solid var(--ink); background: #fff; padding: .75rem 1rem; }
.install h2 { font-size: 1.5rem; margin: 0 0 .25rem; }
.install p { margin: 0 0 .75rem; }
.install .btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Phone play (html classes from mobile.js layoutClasses): docs/STYLE-GUIDE.md "Phone play". Either way up (owner,
   answers.md 30: no rotate prompt); desktop never gets these. */
.phone .pad { gap: .75rem; }
.phone .dpad { grid-template-columns: 56px 56px 56px; gap: 6px; }
.phone .acts { grid-template-columns: repeat(2, minmax(72px, 1fr)); gap: 8px; align-self: flex-end; }
.phone .pad button { min-width: 56px; min-height: 56px; font-size: 1rem; box-shadow: var(--shadow-sm); }
html.phone:not(.reduce-motion) .pad button.down { transform: translate(4px, 4px); }

.phone.playing, .phone.playing body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.phone.playing main { padding: 0; max-width: none; }
.phone.playing .screen { min-height: 0; }
.phone.playing .game-screen {
  --edge-t: calc(env(safe-area-inset-top) + 8px); --edge-b: calc(env(safe-area-inset-bottom) + 8px);
  --edge-l: calc(env(safe-area-inset-left) + 8px); --edge-r: calc(env(safe-area-inset-right) + 8px);
  --side: calc(max(env(safe-area-inset-left), env(safe-area-inset-right)) + 8px + 196px); /* a pad cluster and its inset */
}
.phone.playing .stage { position: fixed; inset: 0; max-width: none; margin: 0; }
.phone.playing .play { position: absolute; inset: 0; aspect-ratio: auto; border: 0; box-shadow: none; }
.phone.playing .hud { position: absolute; z-index: 2; top: var(--edge-t); left: 50%; transform: translateX(-50%); margin: 0; pointer-events: none; }
.phone.playing #explore .hud { left: var(--edge-l); transform: none; }
.phone.playing .hud-team, .phone.playing .hud-mid { font-size: 1.1rem; padding: .1rem .5rem; }
.phone.playing .hud-score { font-size: 1.75rem; line-height: 1.2; }
.phone.playing .under { display: contents; }
.phone.playing .under-btns { position: absolute; z-index: 3; top: var(--edge-t); right: var(--edge-r); gap: 8px; }
.phone.playing .ticker {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 2 * var(--side));
  min-height: 0; margin: 0; padding: .3rem .7rem; font-size: 1rem; line-height: 1.5; border-width: 4px;
}
.phone.playing #ticker, .phone.playing #ex-hint { bottom: var(--edge-b); }
.phone.playing #ex-ticker { top: calc(var(--edge-t) + 60px); max-width: calc(100% - 2 * var(--edge-l) - 2 * 220px); }
.phone.playing .ticker:not(.shown) { visibility: hidden; opacity: 0; }
html.phone.playing:not(.reduce-motion) .ticker { transition: opacity .3s, visibility .3s; }
.phone.playing .pad {
  position: fixed; z-index: 3; left: 0; right: 0; bottom: 0; margin: 0; align-items: flex-end;
  padding: 0 var(--edge-r) var(--edge-b) var(--edge-l); pointer-events: none;
}
.phone.playing .pad > * { pointer-events: auto; }
.phone.playing .acts { grid-template-columns: repeat(2, 76px); }
.phone.playing .acts button { padding: 2px 4px; }
/* see-through so the court shows: ink glyphs on 75% paper stay above 7:1 over any scene; the paper ring outside the ink
   border keeps one ring at 3:1 on dark scenes too */
.phone.playing .pad button { background: rgb(255 248 231 / .75); outline: 2px solid var(--paper); }
.phone.playing .pad .shoot { background: var(--pop); }
.phone.playing .pad button:focus-visible { outline: 3px solid var(--ink); outline-offset: 0; box-shadow: 0 0 0 6px var(--paper); }

/* Portrait: too narrow for the HUD beside the top buttons or a toast between the pad clusters, so the HUD takes the
   row under the buttons, the quote sits under the HUD, and the ticker / help toasts sit just above the pad (a d-pad is
   3 x 56px + 2 x 6px = 180px tall). */
.phone-portrait.playing .hud { top: calc(var(--edge-t) + 52px); }
.phone-portrait.playing .ticker { max-width: calc(100% - var(--edge-l) - var(--edge-r)); }
.phone-portrait.playing #ticker, .phone-portrait.playing #ex-hint { bottom: calc(var(--edge-b) + 188px); }
.phone-portrait.playing #ex-ticker { top: calc(var(--edge-t) + 104px); max-width: calc(100% - var(--edge-l) - var(--edge-r)); }
/* the narrowest phones (360px Androids, 320px SE-size): the pad clusters shrink but every button stays 56px or more */
@media (max-width: 375px) { .phone.playing .acts { grid-template-columns: repeat(2, 64px); } }
@media (max-width: 340px) {
  .phone.playing .pad { gap: 8px; }
  .phone.playing .dpad { gap: 4px; }
  .phone.playing .acts { grid-template-columns: repeat(2, 56px); }
}

/* Reduced motion: OS setting or in-game toggle */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ok) * { transition: none !important; animation: none !important; }
}
.reduce-motion * { transition: none !important; animation: none !important; }
.reduce-motion .btn:hover, .reduce-motion .btn:active, .reduce-motion .pad button.down { transform: none; }

@media (forced-colors: active) {
  .card:has(input:checked), .row:has(input:checked) { outline: 4px solid Highlight; }
  .btn { border-color: ButtonText; }
  .loading-panel progress { border-color: CanvasText; }
  .loading-panel progress::-webkit-progress-value { background: Highlight; }
  .loading-panel progress::-moz-progress-bar { background: Highlight; }
  .pad button, .ticker, .install { background: Canvas; border-color: ButtonText; }
  .pad .arrow { fill: ButtonText; }
}