/* ==========================================================================
   FACTOR FC · TRAINING GROUND — whiteboard drills.
   Same TTRS-DNA look as Factor FC: flat colour, purple dominant, sharp
   corners, hard keylines, Boogaloo caps. Scaled up for the whiteboard.
   ========================================================================== */

:root {
  --purple: #501a80;
  --purple2: #3d1460;
  --purple3: #2d0e47;
  --cyan: #009eff;
  --pink: #ff007e;
  --yellow: #ffec00;
  --green: #39a935;
  --green2: #2f9230;
  --orange: #ff5a00;
  --red: #bd1622;
  --ink: #000;

  --bg: #1a0a2e;
  --bg2: #241040;
  --bg3: #2e1550;

  --text: #fff;
  --text2: rgba(255, 255, 255, 0.78);
  --text3: rgba(255, 255, 255, 0.5);

  --font-display: 'Boogaloo', 'Arial Black', sans-serif;
  --font-body: 'Open Sans', 'Helvetica Neue', sans-serif;

  --keyline: 3px solid var(--ink);
  --sticker-shadow: 6px 6px 0 var(--ink);
  --sticker-shadow-sm: 4px 4px 0 var(--ink);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; margin: 0; }

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
body { min-height: 100dvh; overflow-x: clip; }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
}

button { font-family: inherit; }

.sticker-text {
  color: #fff;
  -webkit-text-stroke: 6px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0.045em 0.06em 0 var(--ink);
}

.wonk-l { rotate: -1.6deg; }
.wonk-r { rotate: 1.2deg; }

/* ---- buttons ---- */
.btn {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--pink);
  border: var(--keyline);
  box-shadow: var(--sticker-shadow-sm);
  padding: 0.55em 1.2em 0.45em;
  cursor: pointer;
  transition: translate 80ms ease, box-shadow 80ms ease;
}
.btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn--cyan { background: var(--cyan); color: var(--ink); }
.btn--yellow { background: var(--yellow); color: var(--ink); }
.btn--green { background: var(--green); color: #fff; }
.btn--ghost { background: var(--purple2); color: var(--text2); }
.btn--sm { font-size: 1rem; padding: 0.45em 0.9em 0.35em; }
.btn--big { font-size: clamp(1.4rem, 3.5vw, 2.1rem); padding: 0.6em 1.4em 0.5em; }

/* ---- top bar ---- */
.topbar {
  position: fixed;
  top: max(0.7rem, env(safe-area-inset-top));
  left: 0; right: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 max(0.9rem, env(safe-area-inset-right)) 0 max(0.9rem, env(safe-area-inset-left));
  z-index: 20;
}
.topbar .spacer { flex: 1; }
.icon-btn {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1;
  width: 2.5em;
  height: 1.9em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--purple2);
  color: #fff;
  border: var(--keyline);
  box-shadow: var(--sticker-shadow-sm);
  cursor: pointer;
  transition: translate 80ms ease, box-shadow 80ms ease;
}
.icon-btn:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.icon-btn--back { background: var(--purple2); font-size: 1.1rem; letter-spacing: 0.03em; padding: 0 0.7em; width: auto; gap: 0.3em; }
.icon-btn[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

/* ---- shared screen shell ---- */
.screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.5rem 1.2rem 4.5rem;
  position: relative;
  overflow: clip;
}
.turf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46px;
  background: repeating-linear-gradient(90deg, var(--green) 0 70px, var(--green2) 70px 140px);
  border-top: 4px solid rgba(255, 255, 255, 0.9);
  clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
  z-index: 0;
}

/* ---- landing ---- */
.crest { width: clamp(84px, 13vw, 118px); filter: drop-shadow(5px 6px 0 rgba(0, 0, 0, 0.45)); animation: pop-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.brandline { color: var(--text2); font-size: clamp(0.85rem, 2.4vw, 1.05rem); letter-spacing: 0.14em; margin-top: 0.7rem; }
.home-title { font-size: clamp(2.8rem, 11vw, 5rem); margin-top: 0.1rem; animation: rise-in 0.5s 0.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.home-sub { color: var(--yellow); font-size: clamp(1.05rem, 4vw, 1.5rem); text-shadow: 2px 2px 0 var(--ink); margin: 0.2rem 0 1.4rem; animation: rise-in 0.5s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

.panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 1.8rem);
  width: 100%;
  max-width: 760px;
  animation: rise-in 0.5s 0.3s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@media (max-width: 620px) { .panels { grid-template-columns: 1fr; max-width: 420px; } }

.panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  padding: 1.6rem 1.2rem 1.4rem;
  border: var(--keyline);
  box-shadow: var(--sticker-shadow);
  background: var(--purple);
  color: #fff;
  cursor: pointer;
  transition: translate 90ms ease, box-shadow 90ms ease;
}
.panel:hover { translate: -2px -2px; box-shadow: 8px 8px 0 var(--ink); }
.panel:active { translate: 3px 3px; box-shadow: 2px 2px 0 var(--ink); }
.panel--1 { background: var(--pink); rotate: -1.2deg; }
.panel--2 { background: var(--cyan); color: var(--ink); rotate: 1deg; }
.panel-emoji { font-size: clamp(2.6rem, 8vw, 3.8rem); line-height: 1; }
.panel-name { font-size: clamp(1.5rem, 5vw, 2.1rem); }
.panel-desc { font-family: var(--font-body); font-size: 0.92rem; line-height: 1.35; max-width: 26ch; }
.panel--1 .panel-desc { color: rgba(255,255,255,0.92); }
.panel--2 .panel-desc { color: rgba(0,0,0,0.72); }
.panel-tag { font-family: var(--font-display); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.08em; background: var(--ink); color: #fff; padding: 0.3em 0.6em 0.2em; }

.home-note { color: var(--text3); font-size: 0.88rem; max-width: 46ch; margin: 1.6rem auto 0; line-height: 1.4; animation: rise-in 0.5s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* ---- drill screen: purple control bar on a dark backdrop, then a green pitch ---- */
.drill {
  justify-content: flex-start;
  gap: clamp(0.7rem, 2vh, 1.1rem);
  padding: clamp(0.7rem, 2vw, 1.2rem);
}

/* purple control section — menu, level selectors, sound + fullscreen */
.control-bar {
  width: 100%;
  max-width: 1180px;
  display: flex;
  align-items: center;
  gap: 0.6rem 0.9rem;
  flex-wrap: wrap;
  background: var(--purple3);
  border: var(--keyline);
  box-shadow: var(--sticker-shadow-sm);
  padding: 0.55rem 0.7rem;
}
.ctrl-selectors { display: flex; align-items: center; gap: 0.55rem 0.9rem; flex-wrap: wrap; flex: 1; min-width: 0; justify-content: center; }
.ctrl-drill { color: #fff; font-size: clamp(0.95rem, 2.2vw, 1.2rem); white-space: nowrap; }
.ctrl-right { display: flex; gap: 0.5rem; margin-left: auto; }

/* level chips */
.levels { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.level-chip {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 0.35em 0.8em 0.25em;
  background: var(--purple2);
  color: var(--text2);
  border: 2.5px solid var(--ink);
  box-shadow: 2.5px 2.5px 0 var(--ink);
  cursor: pointer;
  transition: translate 70ms ease, box-shadow 70ms ease;
}
.level-chip:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.level-chip[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }

/* green pitch panel — the main game area (flat green, mowing stripes, white touchline) */
.pitch {
  background: repeating-linear-gradient(90deg, var(--green) 0 72px, var(--green2) 72px 144px);
  border: var(--keyline);
  box-shadow: inset 0 0 0 6px var(--green), inset 0 0 0 9px rgba(255, 255, 255, 0.85);
  position: relative;
}
.drill-pitch {
  width: 100%;
  max-width: 1180px;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(1rem, 3vh, 2rem) clamp(1rem, 3vw, 2.4rem) clamp(1.2rem, 3vh, 2.2rem);
}

/* scoreline strip inside the pitch */
.scoreline {
  display: flex;
  gap: 0.5rem 1.6rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(1rem, 2.6vw, 1.5rem);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
}
.scoreline b { color: var(--yellow); font-weight: 400; font-size: 1.3em; }

.drill-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.9rem, 3vh, 1.9rem);
  text-align: center;
}

.answers { display: flex; gap: clamp(0.8rem, 2.5vw, 1.6rem); justify-content: center; flex-wrap: wrap; }
.feedback {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.05rem, 3vw, 1.7rem);
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  min-height: 1.4em;
}
.feedback.ok { color: var(--yellow); }
.feedback.miss { color: #ffd7e8; }
.feedback.ghost { visibility: hidden; }

/* ball + goalpost (Drill 1) */
.wall { position: relative; height: 56px; width: min(360px, 72%); margin: 0.1rem auto; }
.ball { position: absolute; left: 0; bottom: 6px; width: 42px; height: 42px; }
.ball.fly { animation: pass-and-back 0.8s ease-in-out; }
@keyframes pass-and-back {
  0% { transform: translateX(0) rotate(0); }
  50% { transform: translateX(min(280px, 55vw)) rotate(360deg); }
  100% { transform: translateX(0) rotate(720deg); }
}
.wall-brick {
  position: absolute;
  right: 0; bottom: 0;
  width: 20px; height: 56px;
  background: var(--orange);
  border: var(--keyline);
  box-shadow: var(--sticker-shadow-sm);
}

/* Drill 1 question */
.qbig {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: 1.08;
  font-size: clamp(2.2rem, 8vw, 5rem);
  color: #fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.45);
  max-width: 18ch;
}
.numtile {
  display: inline-block;
  background: #fff;
  color: var(--purple3);
  border: 4px solid var(--ink);
  padding: 0.02em 0.24em 0;
  box-shadow: var(--sticker-shadow-sm);
  text-shadow: none;
}
.numtile--y { background: var(--yellow); color: var(--ink); }

/* reveal stamp */
.stamp {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: clamp(2.6rem, 10vw, 6rem);
  line-height: 1;
  padding: 0.1em 0.4em 0.02em;
  border: 6px solid;
  animation: pop-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.stamp--yes { color: var(--yellow); border-color: var(--yellow); }
.stamp--no { color: #ff5c8a; border-color: #ff5c8a; }
.reason { font-family: var(--font-body); font-size: clamp(1rem, 3vw, 1.5rem); color: rgba(255, 255, 255, 0.95); text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); min-height: 1.4em; }
.reason b { color: #fff; }

/* Drill 2 — hunt */
.target-line {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  color: #fff;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}
.target {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  border: 4px solid var(--ink);
  padding: 0.02em 0.28em 0;
  box-shadow: var(--sticker-shadow-sm);
  font-size: 1.3em;
}
.chip-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.6vw, 0.9rem);
  width: 100%;
  max-width: 760px;
}
@media (max-width: 560px) { .chip-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chip {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 4.5vw, 2.6rem);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--purple3);
  border: var(--keyline);
  box-shadow: var(--sticker-shadow-sm);
  cursor: pointer;
  transition: translate 70ms ease, box-shadow 70ms ease, background 70ms ease;
}
.chip:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.chip[data-state="picked"] { background: var(--cyan); color: var(--ink); }
.chip[data-state="right"] { background: var(--green); color: #fff; }
.chip[data-state="wrong"] { background: var(--red); color: #fff; text-decoration: line-through; }
.chip[data-state="missed"] { background: #fff; color: var(--purple3); border-style: dashed; box-shadow: 4px 4px 0 var(--red); }
.chip:disabled { cursor: default; }

.verdict { font-family: var(--font-body); font-size: clamp(1rem, 3vw, 1.4rem); color: #fff; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4); min-height: 1.4em; }
.verdict.ok { color: var(--yellow); }
.verdict b { color: var(--yellow); }
.team-list { font-family: var(--font-display); letter-spacing: 0.04em; color: #fff; }

/* controls row */
.controls { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; align-items: center; }

.hint-kbd { color: rgba(255, 255, 255, 0.85); font-size: 0.8rem; margin-top: 0.2rem; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35); }
.hint-kbd kbd {
  font-family: var(--font-body);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  padding: 0.05em 0.4em;
  font-size: 0.85em;
}

@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}