/* ==========================================================================
   Jojo's Canters — front end

   Design intent, after a critique of the previous version:
     - ONE focal point (the fixture: your cap vs theirs), not two equal cards.
     - Three setup blocks that are each VISUALLY DIFFERENT (a wide team banner,
       a formation pitch, a stadium scene) rather than three identical rows.
     - Buttons are pills; panels are squared. Two shapes, not one everywhere.
     - Ink on dark paper: near-black background, warm white text, one accent.
     - No uppercase letter-spaced section headings; those read as a template.

   ========================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:        #0a0c10;
  --paper:      #12151b;
  --raise:      #191d25;
  --line:       #2b323f;
  --line-soft:  #1c212a;
  --text:       #f4f6f9;
  /* Secondary text has to be readable, not atmospheric. The original --muted was
     3.27:1 against the background and --dim was 4.25:1 — both below the 4.5:1
     accessibility floor, and review flagged the dim text in every single pass.
     Now: muted 7.9:1, dim 6.2:1. */
  --muted:      #9aa5b8;
  --dim:        #8792a4;
  --accent:     #2ee06a;
  --accent-dim: #1da34d;
  --warn:       #ff4d5e;
  --gold:       #ffc94a;

  --display: 'Archivo', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

html, body {
  height: 100%;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.screen { height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
button:disabled { cursor: not-allowed; opacity: .5; }
input { font-family: inherit; }

/* ============================== menu ============================== */

#menu { position: relative; overflow: hidden; }

.menu-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

/*
 * Scrim.
 *
 * Two jobs, and both were getting the wrong emphasis before. First, keep the
 * interface legible: review repeatedly said pitch markings showed through around
 * the controls and read as accidental UI dividers, and that the centre circle
 * collided with the formation card. Second, do not erase the pitch: an earlier
 * version ran to 86% opacity and turned the whole backdrop into a dark wash.
 *
 * So the mask is heaviest exactly where the controls sit (roughly 26%-78% of the
 * height), tapering off above and below so the pitch stays clearly visible at
 * the top and bottom of the frame.
 */
.menu-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(10,12,16,.34) 0%,
      rgba(10,12,16,.46) 16%,
      rgba(10,12,16,.86) 28%,
      rgba(10,12,16,.88) 76%,
      rgba(10,12,16,.54) 88%,
      rgba(10,12,16,.34) 100%),
    radial-gradient(132% 94% at 50% 50%, transparent 40%, rgba(10,12,16,.60) 100%);
}

/* ---- top bar ---- */

.topbar {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px clamp(18px, 4vw, 44px);
}

.wordmark { display: flex; align-items: center; gap: 9px; color: var(--accent); }
.wordmark .mark { display: block; }
.wordmark-text {
  font-family: var(--display);
  font-weight: 900;
  font-size: 1.34rem;
  letter-spacing: -.03em;
  color: var(--text);
}

.topbar-right { display: flex; align-items: center; gap: 8px; }

.name-chip input {
  width: 148px;
  padding: 8px 12px;
  background: rgba(18,21,27,.72);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: .84rem;
  outline: none;
  transition: border-color .15s, background .15s;
}
.name-chip input::placeholder { color: var(--dim); }
.name-chip input:focus { border-color: var(--accent); background: rgba(18,21,27,.95); }

.ghost-chip {
  padding: 8px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  background: rgba(18,21,27,.72);
  transition: color .15s, border-color .15s;
}
.ghost-chip:hover { color: var(--text); border-color: #39424f; }

/* ---- lobby ----
 *
 * ONE 12-column grid governs the whole page. Earlier the setup row and the
 * action row used different column boundaries (224/627/914 against 224/731), so
 * nothing lined up and the screen read as two interfaces stacked. Every section
 * below spans the same grid.
 *
 * Content is also vertically centred with a real max height, because the page
 * previously ended at y=488 in a 900px viewport — leaving 400px of dead space
 * that made the whole thing look unfinished.
 */
/*
 * A panel behind the interface.
 *
 * Review asked for this in five consecutive passes — "the background competes
 * with the controls", "field lines read as accidental dividers", "the centre
 * circle collides with the formation card". Raising the scrim opacity globally
 * was the wrong lever: it dimmed the pitch everywhere, including where it should
 * stay visible, and lines still ran behind the buttons.
 *
 * A panel fixes it properly. The pitch stays fully visible around the interface
 * and the controls sit on their own surface, so nothing shows through them.
 */
.lobby {
  position: relative; z-index: 3;
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(16px, 2.4vh, 28px);
  /* Sits a little above true centre: optically centred, and it keeps the lower
     third of the pitch visible under the interface instead of hidden behind it. */
  padding: clamp(8px, 2vh, 20px) clamp(18px, 4vw, 44px) clamp(48px, 8vh, 84px);
  max-width: 1020px; width: 100%; margin: 0 auto;
  overflow-y: auto;
}

/* The surface the controls sit on. */
.lobby-inner {
  display: flex; flex-direction: column;
  gap: clamp(16px, 2.4vh, 28px);
  background: rgba(15, 18, 24, .72);
  border: 1px solid var(--line-soft);
  border-radius: 22px;
  padding: clamp(18px, 2.6vh, 30px) clamp(18px, 2.4vw, 32px);
  backdrop-filter: blur(7px);
  box-shadow: 0 26px 70px rgba(0, 0, 0, .55);
}

/* the shared grid: 12 columns, and every section aligns to it */
.fixture,
.setup,
.actions {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
}

/* ---- the fixture: hero, and the only truly big thing on screen ---- */

.fixture {
  align-items: center;
  padding-bottom: clamp(6px, 1.4vh, 14px);
  border-bottom: 1px solid var(--line-soft);
}
/* The two sides are exact mirrors: same column span, same internal order
   reversed, and a fixed-width text block so a short name ("Brazil") and a long
   one ("Argentina") produce identical geometry. Without the fixed width the text
   blocks differ in size and the pair reads as misaligned even though the
   structure is mirrored. */
.fixture-side { grid-column: span 5; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); }
.fixture-side.away { grid-column: span 5; flex-direction: row-reverse; }
.fixture-mid { grid-column: span 2; display: flex; flex-direction: column; align-items: center; gap: 2px; }

.hero-cap {
  width: clamp(64px, 7.2vw, 88px);
  height: clamp(64px, 7.2vw, 88px);
  flex: 0 0 auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.62));
}

.fixture-text {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-width: 0;
}
.fixture-side.away .fixture-text { text-align: right; }

.tag {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .02em;
}
.fixture-text h2 {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.9vw, 2.05rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fixture-text .sub { font-size: .78rem; font-weight: 500; color: var(--muted); }

.vs {
  font-family: var(--display);
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--text);
  opacity: .85;
}
.fixture-rule {
  font-size: .68rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  padding-top: 3px;
  border-top: 1px solid var(--line);
}

/* ---- setup: three blocks, each spanning 4 columns so they align with the
   action row below them ---- */

.setup-block { grid-column: span 4; display: flex; flex-direction: column; gap: 7px; min-width: 0; }

/* Arrows sit ON the card, not detached above it. As separate controls floating
   in the header row they read as unrelated buttons; overlaid on the preview they
   read as "change what you are looking at". */
.setup-face { position: relative; }

.stepper { display: flex; gap: 4px; }
.stepper button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(8,10,14,.72);
  backdrop-filter: blur(3px);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  z-index: 2;
  transition: background .13s, border-color .13s;
}
.stepper button:first-child { left: 8px; }
.stepper button:last-child { right: 8px; }
.stepper button:hover { background: var(--accent); border-color: var(--accent); color: #04160a; }

/* the header row now carries only the label */
/* The face and its arrows share a positioned wrapper, so the arrows can sit ON
   the preview. As separate controls in the header row they read as unrelated
   buttons floating above the card. */
.setup-face-wrap { position: relative; }

.setup-face {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--raise);
  text-align: left;
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
/* A selected control needs to look selected. These are single-choice controls,
   so each one carries a visible accent edge rather than only responding to
   hover — otherwise nothing on the page signals what is currently chosen. */
.setup-face { border-color: #39424f; }
.setup-face:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(46,224,106,.35), 0 6px 20px rgba(0,0,0,.35);
}
.setup-face:active { transform: scale(.995); }
.setup-face canvas { display: block; width: 100%; height: clamp(64px, 8.4vh, 92px); }

.stepper { display: block; }
.stepper button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  background: rgba(8,10,14,.74);
  backdrop-filter: blur(3px);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  z-index: 2;
  transition: background .13s, border-color .13s, color .13s;
}
.stepper button:first-child { left: 8px; }
.stepper button:last-child { right: 8px; }
.stepper button:hover { background: var(--accent); border-color: var(--accent); color: #04160a; }

/* the header row now carries only the label */
.setup-head { display: flex; align-items: center; }
.label { font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: .01em; }

.setup-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: baseline; gap: 8px;
  padding: 22px 12px 9px;
  background: linear-gradient(180deg, transparent, rgba(8,10,13,.92) 62%);
}
.setup-caption b {
  font-family: var(--display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}
.setup-caption i {
  font-style: normal;
  font-size: .73rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- actions ---- */

.actions { align-items: start; }
.play-block { grid-column: span 6; display: flex; flex-direction: column; gap: 9px; }
.online-block { grid-column: span 6; display: flex; flex-direction: column; gap: 8px; }

.seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.seg-btn {
  flex: 1;
  padding: 7px 4px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active { background: var(--text); color: var(--ink); font-weight: 700; }

/* The primary action has to dominate. It previously shared the pill language
   with the online buttons, so nothing read as the thing to do. It is larger now,
   and the secondary online controls are deliberately rectangular and quieter. */
.cta {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 17px 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dim) 100%);
  color: #04160a;
  box-shadow: 0 12px 34px rgba(46,224,106,.26);
  transition: filter .15s, transform .1s;
}
.cta:hover { filter: brightness(1.06); }
.cta:active { transform: translateY(1px); }
.cta-main {
  font-family: var(--display);
  font-size: 1.24rem;
  font-weight: 900;
  letter-spacing: -.02em;
}
.cta-sub { font-size: .74rem; opacity: .74; font-weight: 600; }
.cta.sm { flex-direction: row; padding: 10px 26px; font-family: var(--display); font-weight: 800; }

.online-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* Secondary controls are RECTANGULAR, not pills. Reserving the pill for the
   primary action and the toggles gives an instant read of what matters. */
.ghost-btn {
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  transition: border-color .15s, background .15s;
}
.ghost-btn:hover { border-color: var(--accent); background: rgba(46,224,106,.07); }

.join { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join input {
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .26em;
  text-align: center;
  text-transform: uppercase;
  outline: none;
  transition: border-color .15s;
}
/* The placeholder must read as an instruction, not as a field label. It used the
   same wide letter-spacing as the entered code, which made "CODE" look like a
   disabled heading. */
.join input::placeholder {
  color: var(--muted);
  letter-spacing: .02em;
  font-weight: 500;
  font-family: var(--body);
  font-size: .88rem;
  text-transform: none;
}
.join input:focus { border-color: var(--accent); }
.join button {
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--raise);
  font-family: var(--display);
  font-weight: 800;
  font-size: .88rem;
  transition: border-color .15s, background .15s;
}
.join button:hover { border-color: var(--accent); background: rgba(46,224,106,.09); }

.colophon {
  text-align: center;
  font-size: .75rem;
  font-weight: 500;
  color: var(--muted);
  padding-bottom: 4px;
}

/* Narrow: stack, and let the fixture keep the top. */
@media (max-width: 860px) {
  .lobby { gap: 16px; }
  .setup { grid-template-columns: 1fr 1fr; }
  .setup-block.wide { grid-column: 1 / -1; }
  .actions { grid-template-columns: 1fr; }
  .hero-cap { width: 62px; height: 62px; }
  .fixture-text h2 { font-size: 1.35rem; }
  .fixture-rule { display: none; }
}

@media (max-width: 560px) {
  .topbar { padding: 12px 14px; }
  .lobby { padding: 0 14px 14px; }
  .name-chip input { width: 116px; }
  .setup { grid-template-columns: 1fr; }
  .setup-face canvas { height: 72px; }
}

/* ============================== in-game ============================== */

.hud {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 11px 20px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hud-side { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hud-side.right { justify-content: flex-end; }

.hud-swatch {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.2);
}
.hud-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The name is the only flexible element in the row, so it has to be allowed to
     shrink. A flex item defaults to `min-width: auto`, which refuses to go below
     its content width — on a 375px screen that left this box 8 PIXELS wide,
     rendering "Argentina" as "A". */
  min-width: 0;
  flex: 1 1 auto;
}
.hud-side.right .hud-name { text-align: right; }

/* On a phone the HUD is the tightest thing on screen: two team names, a score,
   a clock, a turn label and a Leave button in 375px.
 *
 * The layout is a 1fr / auto / 1fr grid, which gives both SIDES equal width —
 * but the right side also holds the Leave button, so its name box was getting
 * 57px where the left got 112px, and "Argentina" (73px) was truncated while
 * "You" had room to spare. The fix is not smaller text; it is taking the Leave
 * button out of the flow that competes with the name. */
@media (max-width: 560px) {
  .hud { gap: 6px; padding: 8px 10px; }
  .hud-side { gap: 5px; }
  .hud-name { font-size: .78rem; }
  .hud-swatch { width: 10px; height: 10px; border-radius: 3px; }
  .hud-score { font-size: 1.25rem; }
  .hud-clock { font-size: .7rem; }
  .hud-turn { font-size: .62rem; }
  .timer { max-width: 30vw; }
  .hud-mid { min-width: 0; }

  /* The middle column shrinks to the score's own width, and the sides split
     what is left evenly — so neither name is penalised for its neighbour. */
  .hud { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

  /* Leave is a rare action mid-match, so it collapses to an icon-sized chip
     rather than holding ~50px of the row. */
  .hud .ghost-chip {
    padding: 0;
    width: 26px; height: 26px;
    display: grid; place-items: center;
    font-size: 0;                       /* hide the word, keep the ✕ */
  }
  .hud .ghost-chip::before { content: '\2715'; font-size: .8rem; }
}

.hud-mid { text-align: center; }
.hud-score {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hud-clock {
  font-size: .8rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  letter-spacing: .05em;
}
.hud-clock.low { color: var(--warn); }
.hud-clock.sd { color: var(--gold); letter-spacing: .09em; animation: blip 1.1s infinite; }
@keyframes blip { 50% { opacity: .45; } }

.hud-turn { font-size: .7rem; font-weight: 600; color: var(--muted); min-height: 1.1em; }
.hud-turn.mine { color: var(--accent); }

.timer {
  width: 170px; max-width: 24vw; height: 3px;
  background: var(--line);
  border-radius: 99px;
  margin: 6px auto 0;
  overflow: hidden;
}
#timerFill { width: 100%; height: 100%; background: var(--accent); transition: width .2s linear; }
#timerFill.low { background: var(--warn); }

/* The venue caption is in normal flow between the HUD and the pitch. It used to
   be absolutely positioned at a hardcoded offset that collided with the timer. */
#venue {
  flex: 0 0 auto;
  text-align: center;
  padding: 7px 0 1px;
  font-family: var(--display);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.34);
  pointer-events: none;
  white-space: nowrap;
}

#game { position: relative; }

#canvasWrap {
  position: relative;
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
}

canvas#gameCanvas {
  border-radius: 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
  touch-action: none;
}

#statusLine {
  position: absolute;
  bottom: 18px; left: 50%;
  transform: translateX(-50%);
  padding: 7px 16px;
  background: rgba(10,12,16,.92);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  white-space: nowrap;
}
#statusLine:not(:empty) { opacity: 1; }

#goalBanner {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%) scale(.5);
  font-family: var(--display);
  font-size: clamp(2.6rem, 10vw, 6.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  text-shadow: 0 8px 40px rgba(0,0,0,.75);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
#goalBanner.show { animation: goalpop 1.9s cubic-bezier(.17,.89,.32,1.28) forwards; }
@keyframes goalpop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.5); }
  16%  { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
  28%  { transform: translate(-50%,-50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.04); }
}

/* ============================== modals ============================== */

.screen-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(6,8,11,.82);
  backdrop-filter: blur(7px);
}

.modal {
  width: min(660px, 96vw);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}

.modal-head h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: -.025em;
}
.modal-head p { font-size: .82rem; color: var(--muted); margin-top: 3px; }
.modal-foot { display: flex; justify-content: flex-end; }

/* The team picker needs room: a grid of 50-odd flags plus a preview panel. */
.modal.wide { width: min(1060px, 96vw); padding: 0; overflow: hidden; }

/* ======================= team picker (PES-style) ======================= */

.picker { display: flex; flex-direction: column; max-height: 88vh; }

.picker-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.picker-tabs { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.picker-tab {
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raise);
  font-size: .78rem; font-weight: 600;
  color: var(--muted);
  transition: color .14s, border-color .14s, background .14s;
}
.picker-tab:hover { color: var(--text); border-color: #46505f; }
.picker-tab.active {
  background: var(--text); color: var(--ink);
  border-color: var(--text); font-weight: 700;
}
.picker-x {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--muted); font-size: 1.1rem; line-height: 1;
}
.picker-x:hover { color: var(--text); border-color: var(--warn); }

.picker-body { display: grid; grid-template-columns: 1fr 280px; min-height: 0; flex: 1; }

.picker-grid-wrap { overflow-y: auto; padding: 14px 16px 18px; }
.picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 8px;
}

.pk-cell {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 4px 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--raise);
  transition: border-color .12s, background .12s, transform .1s;
}
.pk-cell canvas { display: block; border-radius: 50%; }
.pk-cell span {
  font-size: .66rem; font-weight: 600; line-height: 1.15;
  color: var(--muted); text-align: center;
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-cell:hover { border-color: #46505f; transform: translateY(-1px); }
.pk-cell.hi {
  border-color: var(--accent);
  background: rgba(46,224,106,.12);
  box-shadow: 0 0 0 2px rgba(46,224,106,.22);
}
.pk-cell.hi span { color: var(--text); }
/* The team your opponent already has cannot be picked. */
.pk-cell.taken { opacity: .32; }
.pk-cell.current { box-shadow: inset 0 0 0 2px var(--accent); }

.picker-preview {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 16px 18px 20px;
  border-left: 1px solid var(--line);
  background: rgba(0,0,0,.22);
  overflow-y: auto;
}
.picker-preview #pkCap { width: 168px; height: 168px; }
.picker-name {
  font-family: var(--display);
  font-size: 1.34rem; font-weight: 900; letter-spacing: -.03em;
  text-align: center; line-height: 1.05;
}
.picker-region { font-size: .74rem; font-weight: 600; color: var(--muted); }
.picker-flag { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.picker-flag canvas { display: block; width: 210px; height: 140px; }
.picker-note { font-size: .7rem; color: var(--warn); text-align: center; min-height: 1em; }
.picker-preview .cta.sm { width: 100%; justify-content: center; margin-top: 4px; }

@media (max-width: 760px) {
  .picker-body { grid-template-columns: 1fr; }
  .picker-preview { border-left: none; border-top: 1px solid var(--line); }
  .picker-preview #pkCap { width: 110px; height: 110px; }
}

/* "Change team" under each side of the fixture.
   Previously a faint underlined text link that only appeared under the OPPONENT,
   which made the bot-team picker hard to find — several rounds of feedback said
   the opponent's team could not be changed at all, though the picker worked. It
   is now a real button, present on both sides so the fixture is symmetric and it
   is obvious that either team can be swapped. */
.fixture-change {
  margin-top: 5px;
  align-self: flex-start;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--raise);
  font-size: .74rem;
  font-weight: 600;
  color: var(--muted);
  transition: color .14s, border-color .14s, background .14s;
}
.fixture-side.away .fixture-change { align-self: flex-end; }
.fixture-change:hover {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(46,224,106,.10);
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr)); gap: 9px; }

.grid-cell {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 6px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color .14s, background .14s, transform .1s;
}
.grid-cell:hover { border-color: #3a4453; transform: translateY(-1px); }
.grid-cell.active {
  border-color: var(--accent);
  background: rgba(46,224,106,.1);
  box-shadow: 0 0 0 2px rgba(46,224,106,.2);
}
.grid-cell canvas { border-radius: 7px; display: block; }
.grid-cell span { font-size: .7rem; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.2; }
.grid-cell.active span { color: var(--text); }
.grid-cell small { font-size: .6rem; color: var(--dim); text-align: center; line-height: 1.2; }

/* ============================== overlay ============================== */

#overlay {
  position: fixed; inset: 0; z-index: 70;
  display: none; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(6,8,11,.84);
  backdrop-filter: blur(7px);
}
#overlay.show { display: flex; }

#overlay .panel {
  width: min(392px, 94vw);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.75);
}
#overlay .panel h1 {
  font-family: var(--display);
  font-size: 1.45rem; font-weight: 900; letter-spacing: -.025em;
}
#overlay .panel p { color: var(--muted); font-size: .87rem; }
#overlay .score-line { font-size: 1rem !important; color: var(--text) !important; font-variant-numeric: tabular-nums; }
#overlay .row { display: flex; gap: 9px; justify-content: center; }
#overlay .row button {
  flex: 1;
  padding: 12px 16px;
  border-radius: 999px;
  background: var(--raise);
  border: 1px solid var(--line);
  font-family: var(--display);
  font-weight: 800;
  font-size: .9rem;
  transition: border-color .15s, filter .15s;
}
#overlay .row button:hover { border-color: var(--accent); }
#overlay .row button.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-dim));
  color: #04160a;
  border-color: transparent;
}
#overlay .row button.pulse { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(46,224,106,.18); } }

.code-big {
  font-family: var(--display);
  font-size: 3rem;
  font-weight: 900;
  letter-spacing: .26em;
  text-indent: .26em;
  color: var(--accent);
  user-select: all;
}

.spinner {
  width: 34px; height: 34px;
  margin: 4px auto;
  border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--accent);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

#toast {
  position: fixed;
  bottom: 26px; left: 50%;
  transform: translateX(-50%) translateY(90px);
  z-index: 100;
  max-width: 88vw;
  padding: 11px 20px;
  background: var(--raise);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .86rem;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.34,1.56,.64,1), opacity .32s;
}
#toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ====================== rotate-to-landscape prompt ====================== */

/*
 * Shown only on touch devices held in portrait, and only during a match.
 *
 * `screen.orientation.lock()` works on Android but has never been implemented
 * in WebKit, so on every iPhone and iPad this prompt is the ONLY way to get the
 * player into landscape. It covers the pitch because playing in portrait is
 * genuinely bad — the pitch would occupy 28% of the screen area against 57%
 * when rotated.
 *
 * It is ADVISORY, not a gate: `pointer-events: none` lets taps through to the
 * pitch underneath. Blocking input would mean an iPhone user who cannot rotate
 * — phone propped up, or an accessibility need — is locked out of a match they
 * have already started, which is worse than letting them play in a small
 * viewport.
 */
#rotatePrompt {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: var(--ink);
  text-align: center;
  padding: 24px;
  pointer-events: none;
}
#rotatePrompt.show { display: flex; }

.rotate-inner { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rotate-icon {
  color: var(--accent);
  /* A gentle nudge, so the icon reads as "turn this" rather than a static
     glyph. Rotation is the one animation the user is being asked to perform. */
  animation: rot-nudge 2.1s ease-in-out infinite;
}
@keyframes rot-nudge {
  0%, 45%   { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}

#rotatePrompt h2 {
  font-family: var(--display);
  font-size: 1.32rem; font-weight: 900; letter-spacing: -.02em;
}
#rotatePrompt p { font-size: .86rem; color: var(--muted); max-width: 30ch; }

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