/* ============================================================
   MathSprint — Global Retro Arcade Theme
   Layered LAST over styles.css (teacher/admin/login) and
   student-styles.css (student app). Converts the whole GUI to
   match the leaderboard/tug-of-war arcade look by overriding the
   design tokens both stylesheets are built on, then adding the
   pixel-font chrome, square corners, hard block shadows, and
   CRT scanline/grid overlays.
   ============================================================ */

:root {
  /* ── shared fonts ── */
  --pixel-font: 'Press Start 2P', 'Courier New', monospace;
  --display-font: 'VT323', 'Courier New', monospace;

  /* ── main app (styles.css) tokens ── */
  --hero-font: 'Press Start 2P', 'Courier New', monospace;
  --body-font: 'VT323', 'Courier New', monospace;
  --radius-xl: 0px;
  --radius-lg: 0px;
  --radius-md: 0px;
  --radius-sm: 0px;
  --shadow-soft: 4px 4px 0 #000;
  --shadow-card: 6px 6px 0 #000;
  --panel-bg-top: rgba(10, 15, 30, 0.92);
  --panel-bg-bottom: rgba(5, 8, 15, 0.92);
  --panel-border: #000000;
  --accent: #f6c54d;
  --accent-dark: #c9962f;
  --green: #35d399;
  --red: #ff5b6e;
  --blue: #4b7dff;
  --yellow: #f6c54d;
  --control-bg: rgba(5, 8, 15, 0.78);

  /* ── student app (student-styles.css) tokens ── */
  --font: 'VT323', 'Courier New', monospace;
  --shadow-sm: 3px 3px 0 #000;
  --shadow-md: 4px 4px 0 #000;
  --shadow-lg: 6px 6px 0 #000;
  --surface: #0b1220;
  --surface-2: #080e1a;
  --surface-3: #111a2e;
  --border: #000000;
  --border-strong: #000000;
  --accent-2: #ffd76b;
  --accent-glow: rgba(246, 197, 77, 0.3);
}

/* VT323 renders small; nudge base legibility up across the app. */
body {
  font-family: var(--display-font);
  font-size: 1.12rem;
  letter-spacing: 0.01em;
}

/* ── pixel-font chrome (sized DOWN — Press Start 2P is huge per em) ── */
.masthead h1,
.student-hero h1,
.student-brand-lockup h1 {
  font-family: var(--pixel-font) !important;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem) !important;
  line-height: 1.25 !important;
  letter-spacing: 0.02em;
  text-shadow: 3px 3px 0 #000, 0 0 14px rgba(124, 137, 255, 0.7);
}

.panel__heading h2,
.hero-bar h2,
h2,
h3 {
  font-family: var(--pixel-font) !important;
  font-size: clamp(0.85rem, 1.7vw, 1.25rem) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em;
}

.eyebrow,
.student-eyebrow {
  font-family: var(--pixel-font) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.18em !important;
  color: var(--accent) !important;
  text-shadow: 0 0 10px rgba(246, 197, 77, 0.5);
}

.field span,
.field > span,
label > span,
.status-pill,
.admin-account__label,
.admin-account__meta {
  font-family: var(--pixel-font) !important;
  font-size: 0.6rem !important;
  letter-spacing: 0.1em !important;
}

/* ── buttons: flat arcade fills + hard block shadow ── */
.button,
button.button {
  font-family: var(--pixel-font) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.06em;
  border: 3px solid #000 !important;
  border-radius: 0 !important;
  box-shadow: 3px 3px 0 #000 !important;
  background: rgba(20, 28, 48, 0.96);
  color: #eef2ff;
}

.button:hover { transform: translate(-1px, -1px); }
.button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000 !important; }

.button--primary { background: var(--blue) !important; color: #05080f !important; }
.button--accent  { background: var(--accent) !important; color: #05080f !important; }
.button--ghost   { background: rgba(5, 8, 15, 0.7) !important; color: #d7def8 !important; }

/* ── square everything; kill rounded pills ── */
.status-pill,
.chip,
.chip-list .chip {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000;
}

.chip { background: var(--accent) !important; color: #05080f !important; }

/* ── inputs / selects ── */
input,
select,
textarea,
.solver-shell input {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  background: var(--control-bg) !important;
  font-family: var(--display-font) !important;
  font-size: 1.15rem !important;
  color: #eef2ff !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: 3px solid rgba(246, 197, 77, 0.35) !important;
  border-color: #000 !important;
}

/* ── panels / cards: square + hard shadow + black border ── */
.panel,
.panel--hero,
.detail-box,
.toast,
.card,
.student-card,
.admin-sidebar {
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  box-shadow: 4px 4px 0 #000 !important;
}

/* ── nav buttons ── */
.admin-nav__button {
  font-family: var(--pixel-font) !important;
  font-size: 0.62rem !important;
  letter-spacing: 0.06em;
  border-radius: 0 !important;
}

.admin-nav__button.is-active {
  border: 3px solid #000 !important;
  box-shadow: 3px 3px 0 #000;
}

/* ── data tables ── */
.data-table th {
  font-family: var(--pixel-font) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.08em;
}

/* ── CRT scanline + pixel grid overlays (reuse existing noise divs) ── */
.page-noise,
.student-noise {
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0) 0px, rgba(0, 0, 0, 0) 2px,
      rgba(0, 0, 0, 0.16) 3px, rgba(0, 0, 0, 0) 4px),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size: 100% 4px, 32px 32px, 32px 32px !important;
}

/* ── Admin sidebar: keep the menu anchored consistently ──
   styles.css pins .admin-sidebar at top:112px to clear the global masthead,
   but the masthead is hidden in the teacher portal — so on a scrolled page the
   menu dropped ~112px (the "menu isn't constant" bug). Anchor it near the top. */
#admin-view .admin-sidebar {
  top: 14px !important;
  max-height: calc(100vh - 28px) !important;
}

/* ── Tug of War create-form config ── */
.tug-ops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tug-op {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display-font) !important;
  font-size: 1.05rem !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #ecf0ff;
}
.tug-op input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  flex: none;
}
#tug-config .inline-action-row {
  grid-template-columns: 1fr 1fr;
}

/* ── Tug of War team-assignment panel (monitor) ── */
.tug-teams {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 3px solid #000;
  background: rgba(5, 8, 15, 0.6);
  box-shadow: 4px 4px 0 #000;
}
.tug-teams[hidden] { display: none; }
.tug-teams__totals {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  font-family: var(--pixel-font);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
}
.tug-teams__total--a { color: var(--blue); }
.tug-teams__total--b { color: var(--green); text-align: right; }
.tug-teams__pin { color: var(--accent); text-align: center; }
.tug-teams__totals strong { font-size: 0.9rem; }
.tug-teams__hint {
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.1rem;
  color: var(--muted, #97a3c6);
}
.tug-teams__list { display: grid; gap: 6px; }
.tug-teams__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 2px solid #000;
  background: rgba(8, 14, 26, 0.72);
}
.tug-teams__name { font-family: var(--display-font); font-size: 1.15rem; color: #eef2ff; }
.tug-teams__score { font-family: var(--pixel-font); font-size: 0.6rem; color: var(--soft, #8190b3); }
.tug-teams__btns { display: flex; gap: 6px; }
.tug-teams__btn {
  width: 38px;
  font-family: var(--pixel-font);
  font-size: 11px;
  padding: 8px 0;
  border: 3px solid #000;
  background: rgba(20, 28, 48, 0.96);
  color: #fff;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
}
.tug-teams__btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 #000; }
.tug-teams__btn.is-a { background: var(--blue); color: #05080f; }
.tug-teams__btn.is-b { background: var(--green); color: #05080f; }

.tug-teams__devices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tug-teams__rosters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tug-teams__rosters textarea {
  width: 100%;
  border-radius: 0 !important;
  border: 3px solid #000 !important;
  background: var(--control-bg) !important;
  font-family: var(--display-font) !important;
  font-size: 1.1rem !important;
  color: #eef2ff !important;
  resize: vertical;
}