:root {
  color-scheme: dark;
  --background: oklch(0.185 0.008 265);
  --card: oklch(0.24 0.009 265);
  --popover: oklch(0.28 0.011 265);
  --foreground: oklch(0.967 0.004 265);
  --muted-foreground: oklch(0.715 0.016 263);
  --faint: oklch(0.52 0.02 265);
  --accent: oklch(0.737 0.155 163);
  --green: oklch(0.82 0.176 159);
  --gold: oklch(0.8 0.13 80);
  --red: oklch(0.71 0.187 25);
  --border: oklch(1 0 0 / 8%);
  --radius: 12px;
  --home: #e8474b;
  --away: #4aa8ff;
  --font-display: "Space Grotesk", "Trebuchet MS", sans-serif;
  --font-body: "Hanken Grotesk", "Trebuchet MS", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2 {
  font-family: var(--font-display);
}

/* ---------- Buttons ---------- */

button {
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: oklch(0.18 0.028 162);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 700;
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: filter 120ms ease, transform 120ms ease;
}

button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--foreground);
  box-shadow: none;
}

button:hover,
button:focus-visible {
  filter: brightness(1.08);
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

button:active {
  transform: translateY(1px);
}

/* ---------- Form controls ---------- */

select {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--foreground);
  font: inherit;
  min-height: 42px;
  padding: 0.55rem 0.65rem;
  width: 100%;
}

select:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

label {
  color: var(--muted-foreground);
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin: 8px 0 4px;
}

/* ---------- Shell ---------- */

.shell {
  width: min(1320px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 16px 0 24px;
}

/* ---------- Scoreboard ---------- */

.scoreboard {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap: 12px;
  margin-bottom: 12px;
}

.team {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.team.away {
  justify-content: flex-end;
}

.team strong {
  font-family: var(--font-display);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.badge {
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 20px;
  width: 20px;
}

.home .badge {
  background: var(--home);
}

.away .badge {
  background: var(--away);
}

.scorebox {
  align-items: center;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  min-width: 150px;
  padding: 8px 18px;
  text-align: center;
}

.scorebox span {
  color: var(--green);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.scorebox small {
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 600;
  margin-top: 4px;
}

#help-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: none;
  color: var(--muted-foreground);
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  height: 38px;
  min-height: 38px;
  padding: 0;
  width: 38px;
}

/* ---------- Game area ---------- */

.game-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
}

.canvas-wrap {
  position: relative;
  min-width: 0;
}

canvas {
  /* Read by game.js (measureHudInsets) so the in-canvas broadcast graphics
     clear a notch in landscape; env() cannot be read from JS any other way. */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  aspect-ratio: 1120 / 720;
  background: #28764a;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 20px 55px oklch(0 0 0 / 45%);
  display: block;
  height: auto;
  width: 100%;
}

/* ---------- Sidebar / touchline ---------- */

.touchline {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 14px;
}

.side-head h1 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.05;
  margin: 8px 0 4px;
}

.backlink {
  margin: 0;
}

.backlink a {
  color: var(--muted-foreground);
  font-size: 12px;
  text-decoration: none;
}

.backlink a:hover {
  color: var(--foreground);
}

.eyebrow {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  color: var(--accent);
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin: 0;
  padding: 3px 10px;
  text-transform: uppercase;
}

.label {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 6px;
  text-transform: uppercase;
}

/* ---------- Panels ---------- */

.panel {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}

.panel p {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  line-height: 1.4;
  margin: 0 0 7px;
}

.panel p:last-child {
  margin-bottom: 0;
}

.panel strong {
  color: var(--foreground);
}

.cup-panel ol {
  color: var(--muted-foreground);
  font-size: 0.88rem;
  margin: 8px 0 0;
  padding-left: 20px;
}

.cup-panel li {
  line-height: 1.4;
  margin: 2px 0;
}

.cup-panel li.active {
  color: var(--gold);
  font-weight: 700;
}

.cup-panel li.done {
  color: var(--green);
}

.manager-panel {
  display: grid;
  gap: 6px;
}

.desk-stats {
  display: grid;
  gap: 6px;
  grid-template-columns: 1fr 1fr;
}

.desk-stats span {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted-foreground);
  font-size: 0.78rem;
  padding: 7px 8px;
}

.desk-stats strong {
  color: var(--gold);
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
}

.upgrade-row {
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 64px;
}

.upgrade-row button {
  font-size: 0.82rem;
  min-height: 42px;
  padding: 0 0.5rem;
}

#scout {
  border-top: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.84rem;
  margin-top: 6px;
  padding-top: 8px;
}

#effects {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 8px;
  color: color-mix(in srgb, var(--accent) 80%, var(--foreground));
  font-size: 0.8rem;
  padding: 8px;
}

/* ---------- Quickbar (meters + main buttons) ---------- */

.quickbar {
  display: grid;
  gap: 10px;
}

.meters {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: grid;
  gap: 8px;
  padding: 10px 12px;
}

.meters div {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 52px 1fr;
}

.meters span {
  color: var(--muted-foreground);
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

meter {
  appearance: none;
  -webkit-appearance: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  display: block;
  height: 12px;
  overflow: hidden;
  width: 100%;
}

meter::-webkit-meter-bar {
  background: var(--card);
  border: 0;
  border-radius: 999px;
}

meter::-webkit-meter-optimum-value,
meter::-webkit-meter-suboptimum-value,
meter::-webkit-meter-even-less-good-value {
  background: var(--accent);
  border-radius: 999px;
}

meter::-moz-meter-bar {
  background: var(--accent);
  border-radius: 999px;
}

.buttons {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr 1fr;
}

/* ---------- Manager Desk accordion ---------- */

.desk {
  display: grid;
  gap: 10px;
}

.desk summary {
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--foreground);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
  padding: 11px 12px;
  user-select: none;
}

.desk summary::-webkit-details-marker {
  display: none;
}

.desk summary::after {
  color: var(--muted-foreground);
  content: "▾";
  float: right;
}

.desk[open] summary::after {
  content: "▴";
}

.desk-body {
  display: grid;
  gap: 10px;
}

/* Desktop: accordion is forced open by script; hide the toggle */
@media (min-width: 900px) {
  .desk summary {
    display: none;
  }
}

/* ---------- Touch layer ---------- */

#touch-layer {
  display: none;
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 5;
}

body.touch #touch-layer {
  display: block;
}

/* A FIXED, VISIBLE pad rather than an invisible floating zone.
   The floating version put the stick wherever the thumb first landed, which
   reads as nothing being there at all — you have to already know to grab empty
   pitch. Founder Run's stick is a real circle you can see and rest a thumb on,
   and that is the one people found. Same idea here. */
#stick-zone {
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  left: calc(14px + env(safe-area-inset-left, 0px));
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(0, 0, 0, .35));
  backdrop-filter: blur(3px);
  pointer-events: auto;
  position: absolute;
  touch-action: none;
}

/* The pad itself is now the ring, so this is only a centring anchor for the
   thumb. Kept rather than deleted: the JS positions the thumb inside it and the
   element ships in index.html. */
#stick-ring {
  height: 0;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  width: 0;
}

#stick-thumb {
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 50%, transparent);
  height: 22px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
}

.action-cluster {
  align-items: flex-end;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  position: absolute;
  right: calc(12px + env(safe-area-inset-right, 0px));
}

.tbtn-row {
  align-items: center;
  display: flex;
  gap: 10px;
}

.tbtn {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 50%;
  box-shadow: none;
  color: var(--foreground);
  display: flex;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  height: 60px;
  justify-content: center;
  letter-spacing: 0.05em;
  min-height: 0;
  padding: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  width: 60px;
}

.tbtn-shoot {
  height: 68px;
  width: 68px;
}

.tbtn-small {
  height: 46px;
  width: 46px;
  font-size: 8.5px;
}

.tbtn.held,
.tbtn:active {
  background: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: none;
}

.tbtn:hover,
.tbtn:focus-visible {
  filter: none;
  outline: none;
}

/* ---------- Help overlay ---------- */

#help-overlay {
  align-items: center;
  backdrop-filter: blur(4px);
  background: oklch(0.12 0.008 265 / 78%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 50;
}

#help-overlay.dismissed {
  display: none;
}

.help-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 30px 70px oklch(0 0 0 / 50%);
  max-width: 420px;
  padding: 24px;
  width: 100%;
}

.help-card h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 12px 0 10px;
}

.help-card ul {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 18px;
  padding-left: 20px;
}

.help-card li {
  margin: 6px 0;
}

.help-card button {
  width: 100%;
}

/* ---------- Responsive: stack below 900px ---------- */

@media (max-width: 899px) {
  .shell {
    padding-top: 10px;
    width: calc(100vw - 16px);
  }

  .scoreboard {
    gap: 8px;
    margin-bottom: 8px;
  }

  .team strong {
    font-size: 0.82rem;
  }

  .scorebox {
    min-width: 118px;
    padding: 6px 12px;
  }

  .scorebox span {
    font-size: 1.3rem;
  }

  .scorebox small {
    font-size: 0.72rem;
    margin-top: 2px;
  }

  #help-btn {
    height: 34px;
    min-height: 34px;
    width: 34px;
  }

  .game-shell {
    gap: 10px;
    grid-template-columns: 1fr;
  }

  canvas {
    margin-inline: auto;
    max-height: 55vh;
    max-width: min(100%, calc(55vh * (1120 / 720)));
  }

  .touchline {
    background: transparent;
    border: 0;
    gap: 10px;
    padding: 0;
  }

  /* Slim strip right under the canvas */
  .quickbar {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    order: -1;
  }

  .meters {
    gap: 5px;
    padding: 8px 10px;
  }

  .meters div {
    grid-template-columns: 48px 1fr;
  }

  .buttons {
    grid-template-columns: auto auto;
  }

  .buttons button {
    font-size: 0.82rem;
    padding: 0.6rem 0.8rem;
  }

  .side-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .side-head h1 {
    font-size: 1.1rem;
    margin: 0;
  }
}

@media (max-width: 480px) {
  .team strong {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  button:active,
  .tbtn:active {
    transform: none;
  }
}


/* ---------- Portrait gate ---------- */
#rotate-gate {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 20;
  place-items: center;
  background: rgba(4, 10, 9, .94);
  backdrop-filter: blur(6px);
  text-align: center;
}

/* Touch devices in portrait only. A desktop browser resized narrow keeps its
   keyboard controls and needs no gate. */
body.touch #rotate-gate {
  display: grid;
}

@media (orientation: landscape) {
  body.touch #rotate-gate {
    display: none;
  }
}

.rotate-icon {
  font-size: 42px;
  color: var(--accent);
  animation: rotate-hint 2.2s ease-in-out infinite;
}

.rotate-title {
  margin: 12px 0 4px;
  font-size: 17px;
  font-weight: 700;
}

.rotate-sub {
  margin: 0;
  color: var(--faint, #8c9993);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@keyframes rotate-hint {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(78deg); }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-icon { animation: none; }
}


/* ---------- Phone landscape: the pitch gets the whole screen ---------------
   The desktop layout is a 1400px-tall two-column shell — canvas beside a 300px
   "touchline" sidebar, with a scoreboard row above. In a 376px-tall landscape
   viewport only the top slice of that is visible: the sidebar's meters and
   buttons sit below the fold, and the pitch is squeezed into a 577px column.

   Here the shell collapses to a single full-bleed canvas. The score, clock and
   team names are already drawn INSIDE the canvas by drawTvOverlay/drawHud, so
   removing the HTML scoreboard loses no information — it was duplicating the
   broadcast graphics.

   Short-and-wide only, and touch only: a laptop at this ratio keeps the full
   desktop layout because it has the room in a browser window and a keyboard. */
/* Was `and (max-height: 560px)`. The touch class already means phone/tablet
   (coarse pointer or <=899px wide); a laptop never carries it. The height guard
   could only ever fail to match, and gave nothing when it did. */
@media (orientation: landscape) {
  body.touch .scoreboard,
  body.touch .touchline,
  body.touch .quickbar {
    display: none;
  }

  body.touch .shell {
    padding: 0;
    margin: 0;
    max-width: none;
    /* The stacked layout's calc(100vw - 16px) and the base calc(100vw - 24px)
       both survive max-width: none — on a 915px phone the "full-bleed" canvas
       was 891px. */
    width: 100%;
    gap: 0;
  }

  body.touch .game-shell {
    display: block;
    height: 100dvh;
    min-height: 0;
    padding: 0;
    gap: 0;
  }

  body.touch .canvas-wrap {
    height: 100dvh;
    width: 100%;
    margin: 0;
    border-radius: 0;
    border: 0;
  }

  body.touch .canvas-wrap canvas {
    width: 100%;
    height: 100%;
    /* THE BUG (7 Sep). The stacked layout above (@media max-width: 899px) sets
       `max-height: 55vh; max-width: calc(55vh * 1120/720); margin-inline: auto`
       on canvas. On a real phone BOTH blocks match — under 899px wide AND
       landscape — and this rule won width/height but never touched the caps,
       so the canvas was clamped to a 55vh box: 277x178 CSS px on an 800x360
       phone, the 620x400 rounded rectangle in angus's screenshot. The
       emulation that "verified" full-bleed ran at 915px wide — 16px too wide
       to trigger the stacked block at all. */
    max-width: none;
    max-height: none;
    margin: 0;
    /* The base rule rounds the canvas's corners; on a full-bleed screen they
       just clip four pixels of pitch. */
    border-radius: 0;
    /* game.js resizes the backing store to this box's aspect, so normally
       there is nothing to letterbox. contain (not cover) stays as the
       fallback for the frame between a rotation and the next re-measure. */
    object-fit: contain;
    display: block;
  }

  /* Nothing below the pitch should be able to push it up or add a scrollbar. */
  body.touch {
    overflow: hidden;
  }
}