/* One-screen scoreboard, sized from its own box so it reads the same on any phone.
   Single high-contrast look on purpose: it has to work in direct sun. */
:root {
  --turf: #10231b;
  --turf-2: #1b3a2d;
  --chalk: #f6f7f1;
  --chalk-dim: #b9c7bc;
  --ink: #101511;
  --flag: #ffd21f;
  --alert: #ff6b4a;
  --ok: #6fe39b;
  --display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --body: Barlow, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --blue: #1558c0; --red: #d21f33; --green: #14803f; --gold: #ffc61a;
  --orange: #f26a1b; --purple: #63339c; --black: #15171b; --white: #f5f5ef;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--turf); color: var(--chalk); font-family: var(--body); -webkit-text-size-adjust: 100%; }
#app { height: 100dvh; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
[hidden] { display: none !important; }
.fs-screen { height: 100%; container-type: size; position: relative; overflow: hidden; background: var(--turf); }

.team-blue { --team: var(--blue); --on: #fff; }
.team-red { --team: var(--red); --on: #fff; }
.team-green { --team: var(--green); --on: #fff; }
.team-gold { --team: var(--gold); --on: var(--ink); }
.team-orange { --team: var(--orange); --on: var(--ink); }
.team-purple { --team: var(--purple); --on: #fff; }
.team-black { --team: var(--black); --on: #fff; }
.team-white { --team: var(--white); --on: var(--ink); }

/* Fan board */
.board { height: 100%; display: grid; grid-template-rows: 1fr auto 1fr; }
.side { background: var(--team); color: var(--on); min-height: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3cqh 16px; text-align: center; }
.side-name { font: 900 clamp(26px, 9cqw, 64px)/1 var(--display); text-transform: uppercase; letter-spacing: .02em; max-width: 100%; overflow-wrap: anywhere; }
.side-score { font: 900 min(31cqh, 62cqw)/.92 var(--display); font-variant-numeric: tabular-nums; }
.side-score.bump { animation: bump .6s ease-out; }
@keyframes bump { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
.mid { background: var(--ink); color: var(--chalk); padding: 10px 16px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 2px; text-align: center; }
.mid-period { font: 900 clamp(30px, 10cqw, 60px)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.mid-period.final { color: var(--flag); }
.mid-status { font: 600 14px/1.25 var(--body); color: var(--chalk-dim); display: flex; align-items: center; gap: 7px; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.dot.off { background: var(--alert); }
@container (min-aspect-ratio: 1/1) {
  .board { grid-template-rows: 1fr auto; grid-template-columns: 1fr 1fr; }
  .board .mid { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 18px; padding: 6px 16px; }
  .side-score { font-size: min(62cqh, 34cqw); }
}
@media (prefers-reduced-motion: reduce) { .side-score.bump { animation: none; } }

/* Simple centred pages */
.page { height: 100%; overflow-y: auto; padding: 28px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; align-items: center; }
.page-inner { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 18px; }
.page h1 { font: 900 clamp(40px, 12cqw, 56px)/1 var(--display); text-transform: uppercase; margin: 0; letter-spacing: .01em; }
.page p { margin: 0; line-height: 1.45; color: var(--chalk-dim); }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.field input, .team-setup input { background: var(--chalk); color: var(--ink); border: 0; border-radius: 6px; padding: 13px; font-size: 18px; width: 100%; }
.primary { background: var(--flag); color: var(--ink); border: 0; border-radius: 6px; padding: 15px; font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.quiet { background: transparent; color: var(--chalk); border: 2px solid var(--chalk-dim); border-radius: 6px; padding: 12px; font-weight: 700; }
.error { color: #ffb4a3; font-weight: 600; min-height: 1.3em; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.swatch { aspect-ratio: 1; background: var(--team); border: 2px solid rgba(255,255,255,.35); border-radius: 50%; padding: 0; min-width: 0; }
.swatch[aria-pressed="true"] { outline: 3px solid var(--flag); outline-offset: 2px; border-color: transparent; }
.format { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.format button, .periods button { background: var(--turf-2); border: 0; border-radius: 6px; padding: 12px 4px; font-weight: 700; }
.format button[aria-pressed="true"], .periods button[aria-pressed="true"] { background: var(--flag); color: var(--ink); }
.team-setup { display: flex; flex-direction: column; gap: 8px; }

/* Scorekeeper */
.keep { height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 8px max(8px, env(safe-area-inset-right, 0px)) 8px max(8px, env(safe-area-inset-left, 0px)); }
.keep-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 34px; }
.sync { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; min-width: 0; }
.menu-btn { background: var(--turf-2); border: 0; border-radius: 6px; padding: 7px 12px; font-weight: 700; flex: none; }
.teams { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.team { background: var(--team); color: var(--on); border-radius: 8px; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 8px; gap: 6px; }
.team-name { font: 900 22px/1.05 var(--display); text-transform: uppercase; text-align: center; overflow-wrap: anywhere; }
.team-score { font: 900 min(17cqh, 36cqw)/.95 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.score-btns { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 6px; }
.score-btns button { background: var(--chalk); color: var(--ink); border: 0; border-radius: 6px; font: 900 clamp(22px, 5cqh, 34px)/1 var(--display); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px; min-height: 0; }
.score-btns button small { font: 700 11px/1 var(--body); }
.score-btns button:active { background: var(--flag); }
.score-btns .td { grid-column: 1 / -1; }
.score-btns .minus { background: rgba(0,0,0,.28); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.team-white .score-btns button:not(.minus), .team-gold .score-btns button:not(.minus) { background: var(--ink); color: #fff; }
.team-white .score-btns .minus, .team-gold .score-btns .minus { color: var(--ink); background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.4); }
.periods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.periods button { padding: 10px 2px; font-size: 15px; }
.periods .wide-2 { grid-column: span 2; }
.undo { background: var(--turf-2); border: 0; border-radius: 6px; padding: 11px; font-weight: 700; }
.undo:disabled { opacity: .45; }

/* Sheets over the scorekeeper screen */
.sheet { position: absolute; inset: 0; background: var(--turf); z-index: 5; }
.qr-box { background: #fff; padding: 14px; border-radius: 8px; align-self: center; width: min(72cqw, 300px); }
.qr-box svg, .print-qr svg { display: block; width: 100%; height: auto; }
.copy-line { overflow-wrap: anywhere; font-weight: 600; color: var(--chalk); }
.confirm { display: flex; flex-direction: column; gap: 8px; border: 2px solid var(--alert); border-radius: 8px; padding: 12px; }

/* Printable signs and scorekeeper cards */
.print-tools { background: var(--turf); color: var(--chalk); padding: 20px 16px; }
.print-tools .page-inner { margin: 0 auto; }
.print-area { background: #fff; color: #111; padding: 16px; font-family: var(--body); }
.print-title { font: 900 26px/1 var(--display); text-transform: uppercase; margin: 8px 0 12px; }
.print-grid { display: grid; gap: 12px; }
.print-grid.signs { grid-template-columns: repeat(2, 1fr); }
.print-grid.cards { grid-template-columns: repeat(3, 1fr); }
.sign, .kcard { border: 2px dashed #777; padding: 14px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; break-inside: avoid; min-width: 0; color: #111; background: #fff; }
.sign-brand { font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: #14803f; }
.sign-brand.small { font-size: 15px; }
.sign-head { font: 900 34px/1 var(--display); text-transform: uppercase; }
.sign-no { font: 900 24px/1 var(--display); background: #111; color: #fff; padding: 3px 10px; }
.print-qr { width: 100%; max-width: 230px; }
.kcard .print-qr { max-width: 130px; }
.sign-url { font-size: 12px; overflow-wrap: anywhere; font-weight: 600; }
.kcard-head { font: 900 20px/1 var(--display); text-transform: uppercase; }
.kcard small { font-size: 11px; line-height: 1.25; }
@media print {
  html, body, #app { height: auto; background: #fff; }
  .print-tools { display: none; }
  .print-area { padding: 0; }
  .sign, .kcard { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .print-grid.signs { grid-template-columns: repeat(2, 1fr); }
  .sign { page-break-inside: avoid; }
  @page { margin: .4in; }
}