/* KONK! — design tokens, base elements, buttons and the in-match HUD.
   One printed ink identity: ink-black surfaces, paper text, a single yellow accent. */
:root {
  /* Colour: one ink surface family, paper text, a single yellow accent. */
  --ink-rgb: 16 21 20;
  --paper-rgb: 245 241 223;
  --ink: rgb(var(--ink-rgb));
  --ink-raised: #27302d;
  --ink-pressed: #343a36;
  --paper: rgb(var(--paper-rgb));
  --paper-muted: #c0c8c0;
  --yellow: #f0cf45;
  --line: #4d5653;
  --line-strong: #8d978f;
  --warning: #ffbc83;
  --warning-flash: #744426;
  --scrim: rgb(var(--ink-rgb) / .72);
  --shadow-card: 8px 8px 0 rgb(var(--ink-rgb) / .4);
  --shadow-text: 0 2px 8px rgb(var(--ink-rgb) / .9);
  --vignette-rgb: 30 14 2; /* warm lamp-lit edge around the table, not a UI colour */
  --home-color: #d6503a;
  --away-color: #4f86c6;
  /* Type */
  /* Type scale: every font size in the UI is one of these steps. */
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px;
  --text-2xl: 32px; --text-3xl: 44px; --text-4xl: 56px; --text-5xl: 72px; --text-hero: 112px;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif; /* webfont: phones ship no Impact */
  --font-body: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  --font-chalk: 'Cabin Sketch', 'Chalkboard SE', 'Comic Sans MS', cursive;
  --font-hand: 'Patrick Hand', 'Chalkboard SE', 'Comic Sans MS', cursive;
  /* Motion */
  --spring: cubic-bezier(0.2, 1.6, 0.4, 1);
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
button { font: inherit; }
button, h1, h2, p, span { letter-spacing: 0; }

#game-canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; }
#game-canvas.can-grab { cursor: grab; }
#game-canvas.aiming { cursor: grabbing; }
#film-frame { position: fixed; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 140px 30px rgb(var(--vignette-rgb) / .55); }
.noscript { position: fixed; inset: auto 0 40% 0; text-align: center; font-size: var(--text-xl); }

/* ---- Buttons: slanted ink tags ---- */
.btn {
  min-height: 48px; max-width: 100%; padding: 12px 20px; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: var(--text-md); letter-spacing: 0; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border: 0; border-radius: 0;
  clip-path: polygon(1% 4%, 97% 0, 100% 91%, 3% 100%, 0 32%);
  box-shadow: none; transform: none; text-shadow: none; overflow-wrap: anywhere;
  transition: background 160ms ease, border-color 160ms ease;
}
.btn-primary { background: var(--yellow); color: var(--ink); }
.btn-small { font-size: var(--text-sm); padding: 8px 12px; }
.btn:disabled { opacity: .45; }
/* The slanted clip-path cuts off anything drawn outside the button, including the focus
   ring, so a keyboard-focused button squares up and shows its ring. */
.btn:focus-visible { clip-path: none; outline: 3px solid var(--yellow); outline-offset: 4px; }
/* Pressed feedback that also works on touch, where :hover never fires reliably. */
.btn:not(:disabled):active { filter: brightness(0.85); transform: translateY(1px); }
/* Secondary buttons need their own fill: on an ink card, ink-on-ink text reads as a label, not a button. */
.paper-card .btn:not(.btn-primary), .screen-title .btn:not(.btn-primary), .screen-header .btn:not(.btn-primary) { background: var(--ink-raised); color: var(--paper); }
/* Hover only where a pointer really hovers: on touch screens a tapped button would stay lit. */
@media (hover: hover) {
  .btn:hover, .paper-card .btn:not(.btn-primary):hover, .screen-title .btn:not(.btn-primary):hover,
  .screen-header .btn:not(.btn-primary):hover { background: var(--paper); color: var(--ink); }
}

.icon-btn {
  pointer-events: auto; width: 46px; height: 46px; display: grid; place-items: center; cursor: pointer;
  border-radius: 0; border: 2px solid var(--paper); background: var(--ink); color: var(--paper); box-shadow: none;
  font-family: var(--font-display); font-size: var(--text-md); backdrop-filter: blur(6px);
  transition: transform 0.2s var(--spring), background 0.2s;
}
.icon-btn:active { transform: scale(0.92); }
.icon-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.sound-btn { position: fixed; z-index: 40; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); font-size: var(--text-lg); }
.sound-btn.muted { opacity: 0.55; text-decoration: line-through; }

/* ---- HUD ---- */
.hud-layer { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.scoreboard {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; white-space: nowrap;
  width: min(440px, calc(100% - 32px)); height: 60px;
  background: var(--ink); border: 0; border-bottom: 4px solid var(--yellow); border-radius: 2px; backdrop-filter: blur(6px);
}
.team-name {
  flex: 1; min-width: 0; font: 700 var(--text-xs)/1.2 var(--font-body); letter-spacing: 0; color: var(--paper-muted);
  white-space: normal; overflow-wrap: anywhere; text-align: center;
}
.score-digits { display: flex; gap: 8px; flex-shrink: 0; min-width: 74px; justify-content: center; font: var(--text-2xl)/1 var(--font-display); color: var(--paper); }
.score-digits .dash { opacity: 0.5; }
.score-digits .pop { display: inline-block; color: var(--yellow); animation: score-confirm 300ms ease-out; }
.turn-dot { width: 4px; height: 24px; flex-shrink: 0; transition: opacity 0.3s, transform 0.35s var(--spring); }
.turn-dot.home { background: var(--home-color); }
.turn-dot.away { background: var(--away-color); }
.turn-dot.inactive { opacity: 0.2; transform: scale(0.65); }

.flick-meter {
  position: absolute; top: calc(max(14px, env(safe-area-inset-top)) + 60px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: baseline; justify-content: center; gap: 12px;
  width: min(440px, calc(100% - 32px)); height: 28px; padding: 4px 12px;
  background: var(--ink); font: var(--text-xs) var(--font-body); color: var(--paper-muted);
}
.flick-meter b { font: 700 var(--text-sm) var(--font-body); color: var(--paper); min-width: 2ch; text-align: center; }
.flick-meter b.low { color: var(--warning); }
.flick-meter b.low-attention { animation: low-attention 600ms ease-out; }
.pause-btn { position: absolute; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); }

.turn-banner {
  position: absolute; bottom: max(20px, env(safe-area-inset-bottom)); left: 16px;
  width: auto; max-width: calc(100% - 88px); min-height: 28px; padding: 12px 16px;
  font: 700 var(--text-xs)/1.4 var(--font-body); color: var(--paper); text-align: left; white-space: normal; overflow-wrap: anywhere;
  background: var(--ink); border-left: 5px solid var(--turn-color);
}

.goal-banner {
  position: absolute; bottom: 105px; left: 18px; max-width: calc(100% - 36px); width: fit-content;
  display: grid; justify-items: start; gap: 8px; padding: 12px 20px; overflow: hidden; text-align: left;
  background: var(--ink); border-left: 6px solid var(--yellow);
}
.goal-word { max-width: 100%; font: var(--text-3xl)/.95 var(--font-display); letter-spacing: 0; overflow-wrap: anywhere; color: var(--yellow); paint-order: stroke fill; }
.goal-sub { max-width: 36ch; font: 700 var(--text-sm)/1.4 var(--font-body); letter-spacing: 0; color: var(--paper); }
.replay-controls {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 130px;
  display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 4px 8px;
  background: var(--ink); border-left: 3px solid var(--yellow); pointer-events: auto;
}
#replay-label { font: 700 var(--text-xs) var(--font-body); text-transform: uppercase; overflow-wrap: anywhere; }
.replay-controls .btn { flex-shrink: 0; }

.tutorial-hand { position: absolute; left: 0; top: 0; transform: translate(var(--x, -999px), var(--y, -999px)); }
.tutorial-ring { position: absolute; left: -24px; top: -24px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--yellow); animation: tutorial-ring 1.8s ease-out infinite; }
.tutorial-finger { position: absolute; left: -20px; top: -4px; width: 40px; filter: drop-shadow(0 6px 6px rgb(var(--ink-rgb) / .55)); animation: tutorial-drag 1.8s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.tutorial-tip {
  position: absolute; left: -150px; top: 74px; max-width: min(280px, calc(100vw - 32px)); padding: 4px 12px; border-radius: 2px;
  white-space: normal; font-family: var(--font-chalk); font-size: var(--text-md); color: var(--paper); background: rgb(var(--ink-rgb) / .94); backdrop-filter: blur(4px);
}

/* Table chalk remains decorative; screen-space counters stay readable in every camera. */

/* Keyboard aiming: the hint only where a keyboard is likely; the key guide while aiming by keyboard. */
.tutorial-keys { display: none; }
@media (hover: hover) and (pointer: fine) { .tutorial-keys { display: inline; } }
.keyboard-aim-help {
  position: fixed; left: 50%; bottom: max(76px, calc(env(safe-area-inset-bottom) + 64px)); z-index: 12; transform: translateX(-50%);
  max-width: calc(100% - 32px); margin: 0; padding: 8px 12px; text-align: center;
  font: 700 var(--text-sm)/1.4 var(--font-body); color: var(--paper); background: rgb(var(--ink-rgb) / .88); border-left: 4px solid var(--yellow);
}

@keyframes tutorial-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes tutorial-drag {
  0% { transform: translate(0, 0) scale(1.2); opacity: 0; }
  15% { transform: translate(0, 0) scale(1); opacity: 1; }
  65% { transform: translate(-84px, 34px); opacity: 1; }
  80%, 100% { transform: translate(-84px, 34px); opacity: 0; }
}
@keyframes low-attention { 40% { background: var(--warning-flash); } }
@keyframes score-confirm { 40% { color: var(--yellow); } }

@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {
  .scoreboard { min-height: 52px; }
  .flick-meter { white-space: nowrap; }
  .icon-btn { width: 48px; height: 48px; touch-action: manipulation; }
}
@media (max-width: 560px) {
  .scoreboard, .flick-meter { left: 12px; transform: none; width: calc(100% - 78px); }
  .scoreboard { gap: 4px; padding-inline: 8px; }
  .team-name { font-size: var(--text-xs); }
  .goal-word { font-size: var(--text-2xl); }
}
@media (max-height: 500px) {
  .scoreboard, .flick-meter { width: 230px; left: 12px; transform: none; }
  .goal-banner { bottom: 70px; }
  .replay-controls { bottom: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .tutorial-finger, .tutorial-ring { animation: none; }
}

/* In-match chalk hints: a chalk line on the table and a short chalked note, shown once each. */
.chalk-hint-path { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.chalk-hint-path polyline { fill: none; stroke: #f6f1e4; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .85;
  filter: drop-shadow(0 1px 1.5px rgb(var(--ink-rgb) / .6)); }
.chalk-hint-label { position: fixed; left: 0; top: 0; margin: 0; max-width: min(280px, calc(100vw - 24px)); pointer-events: none; z-index: 5;
  padding: 7px 12px; border-radius: 10px; background: rgb(var(--ink-rgb) / .72); color: #f6f1e4;
  font: 700 15px/1.25 var(--font-chalk); letter-spacing: .01em; text-align: center;
  box-shadow: 0 4px 14px rgb(var(--ink-rgb) / .35); animation: chalk-hint-in .25s ease-out; }
@keyframes chalk-hint-in { from { opacity: 0; } }
.chalk-hint-glow { outline: 2px solid var(--yellow); outline-offset: 2px; animation: chalk-hint-glow 1.2s ease-in-out infinite; }
@keyframes chalk-hint-glow { 50% { outline-offset: 5px; outline-color: rgb(255 214 64 / .35); } }
@media (prefers-reduced-motion: reduce) { .chalk-hint-label, .chalk-hint-glow { animation: none; } }

/* Kwame's Corner: Kwame's line under the scoreboard, and his chalk ring on the table. */
#kwame-coach { position: fixed; top: calc(var(--safe-top, 0px) + 96px); left: 50%; transform: translateX(-50%); z-index: 5;
  width: min(460px, calc(100vw - 32px)); padding: 9px 16px 11px; border-radius: 12px; pointer-events: none;
  background: rgb(var(--ink-rgb) / .8); color: #f6f1e4; text-align: center; box-shadow: 0 6px 18px rgb(var(--ink-rgb) / .35);
  border-top: 3px solid var(--yellow); }
#kwame-coach .kwame-coach-kicker { display: block; font: 700 11px/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--yellow); }
#kwame-coach .kwame-coach-line { margin: 5px 0 0; font: 700 16px/1.3 var(--font-chalk); }
.chalk-hint-path polygon { fill: rgb(246 241 228 / .12); stroke: #f6f1e4; stroke-width: 3.5; stroke-linejoin: round; opacity: .9;
  filter: drop-shadow(0 1px 1.5px rgb(var(--ink-rgb) / .6)); }
@media (max-height: 500px) { #kwame-coach { top: 62px; padding: 6px 12px 8px; } #kwame-coach .kwame-coach-line { font-size: 14px; } }