/* ============================================================================
   2 Minute Drill — game styles (ui-game scope)
   All game screens rendered into #game. Uses ui-shell tokens with local
   fallbacks so the game never depends on load order.
   Mobile-first: 390x844 baseline, works from 320px.
   ========================================================================== */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-700-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-800-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/barlow-condensed-900-latin.woff2") format("woff2");
}

/* ------------------------------------------------------------------ base */
#game.game-mount {
  display: block;
  margin: 0;
  padding: 0;
  /* Reserve the game's first-paint height so inserting the loading/intro/result
     screens never shifts the SEO content below it (CLS < 0.05 requirement). */
  min-height: calc(100dvh - var(--md-chrome-h, 58px));
  scroll-margin-top: calc(var(--md-chrome-h, 58px) + 6px);
}

#game {
  /* local aliases so a missing token never breaks the layout */
  --md-bg: var(--bg, #070B14);
  --md-bg2: var(--bg-2, #0B1220);
  --md-panel: var(--panel, #0F1A2B);
  --md-panel2: var(--panel-2, #142238);
  --md-line: var(--line, rgba(255, 255, 255, 0.10));
  --md-line-strong: var(--line-strong, rgba(255, 255, 255, 0.20));
  --md-ink: var(--ink, #F3F7FF);
  --md-ink2: var(--ink-2, #C6D3E6);
  --md-muted: var(--muted, #8CA1BD);
  --md-faint: var(--faint, #5D7290);
  --md-gold: var(--gold, #F5C542);
  --md-gold2: var(--gold-2, #FFD97A);
  --md-goldink: var(--gold-ink, #201603);
  --md-ice: var(--ice, #7DD3FC);
  --md-flag: var(--flag, #F04438);
  --md-green: var(--g-green, #34D399);
  --md-yellow: var(--g-yellow, #FACC15);
  --md-orange: var(--g-orange, #FB923C);
  --md-red: var(--g-red, #F87171);
  --md-display: var(--display, "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif);
  --md-body: var(--body, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --md-r-sm: var(--r-sm, 8px);
  --md-r-md: var(--r-md, 14px);
  --md-r-lg: var(--r-lg, 22px);
  --md-r-xl: var(--r-xl, 30px);
  --md-shadow-card: var(--shadow-card, 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.9));
  --md-shadow-pop: var(--shadow-pop, 0 24px 60px -20px rgba(0, 0, 0, 0.85));

  position: relative;
  color: var(--md-ink);
  font-family: var(--md-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#game [hidden] { display: none !important; }

#game *,
#game *::before,
#game *::after { box-sizing: border-box; }

#game button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#game a { color: var(--md-gold); }

#game :focus-visible {
  outline: 2px solid var(--md-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

#game .md-ic {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
}

#game .sr-only,
#game .md-live {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

#game .md-screen {
  position: relative;
  min-height: 420px;
  isolation: isolate;
  background: var(--md-bg);
}

#game .md-app-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% -12%, rgba(125, 211, 252, 0.13), transparent 62%),
    radial-gradient(700px 500px at 8% 12%, rgba(245, 197, 66, 0.07), transparent 65%),
    radial-gradient(800px 600px at 92% 0%, rgba(29, 122, 71, 0.16), transparent 62%),
    linear-gradient(180deg, #0A1524 0%, var(--md-bg) 46%, #05090F 100%);
}
#game .md-app-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, transparent 0 78%, rgba(29, 122, 71, 0.10) 78% 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 100%);
}

#game .md-eyebrow {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font: 700 9.5px/1.25 var(--md-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-muted);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 420px) {
  #game .md-eyebrow { font-size: 10.5px; letter-spacing: 0.12em; }
}
#game .md-live-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--md-gold);
  box-shadow: 0 0 0 4px rgba(245, 197, 66, 0.16);
  animation: md-pulse 2.2s ease-in-out infinite;
}

/* ---------------------------------------------------------------- buttons */
#game .md-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: var(--md-r-md);
  font: 800 17px/1 var(--md-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-ink);
  border: 1px solid var(--md-line);
  background: var(--md-panel2);
  transition: transform 0.12s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
#game .md-btn:active { transform: translateY(1px) scale(0.995); }
#game .md-btn .md-ic { width: 18px; height: 18px; }

#game .md-btn-gold {
  color: var(--md-goldink);
  background: linear-gradient(180deg, var(--md-gold2) 0%, var(--md-gold) 52%, #E7B52F 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 -2px 0 rgba(120, 80, 0, 0.25) inset,
    0 10px 26px -10px rgba(245, 197, 66, 0.6);
}
#game .md-btn-gold:hover { filter: brightness(1.05); }
#game .md-btn-ghost {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--md-line-strong);
  color: var(--md-ink2);
}
#game .md-btn-ghost:hover { background: rgba(255, 255, 255, 0.08); }
#game .md-btn[disabled] { opacity: 0.45; cursor: not-allowed; }

#game .md-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 11px;
  color: var(--md-ink2);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.15s ease, color 0.15s ease;
}
#game .md-icon-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--md-ink); }
#game .md-icon-btn .md-ic { width: 20px; height: 20px; }

/* --------------------------------------------------------------- loading */
#game .md-screen-loading {
  display: grid;
  place-items: center;
  min-height: calc(100dvh - var(--md-chrome-h, 58px));
  background: var(--md-bg);
}
#game .md-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 24px 64px;
  text-align: center;
}
#game .md-loading-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--md-panel2), #070B14);
  border: 1px solid rgba(245, 197, 66, 0.5);
  color: var(--md-gold);
  box-shadow: 0 0 60px rgba(245, 197, 66, 0.14);
  animation: md-float 3.6s ease-in-out infinite;
}
#game .md-loading-ball { width: 38px; height: 38px; }
#game .md-loading-word {
  font: 900 34px/1 var(--md-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--md-ink);
}
#game .md-loading-word span { color: var(--md-gold); padding: 0 4px; }
#game .md-loading-label {
  margin: 4px 0 0;
  min-height: 20px;
  color: var(--md-muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
#game .md-loadbar {
  width: min(280px, 70vw);
  height: 5px;
  border-radius: 99px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
#game .md-loadbar i {
  display: block;
  height: 100%;
  width: 4%;
  border-radius: inherit;
  background: linear-gradient(90deg, #D9A92A, var(--md-gold2));
  box-shadow: 0 0 14px rgba(245, 197, 66, 0.6);
  transition: width 0.35s ease;
}
#game .md-loading-note {
  margin: 0;
  color: var(--md-faint);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- error */
#game .md-screen-error {
  display: grid;
  place-items: center;
  min-height: 60vh;
  padding: 40px 16px;
}
#game .md-error-card {
  width: min(480px, 100%);
  padding: 28px 24px;
  border-radius: var(--md-r-lg);
  background: var(--md-panel);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-card);
  text-align: center;
}
#game .md-error-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: var(--md-flag);
  border-radius: 50%;
  background: rgba(240, 68, 56, 0.12);
}
#game .md-error-card h2 {
  margin: 0 0 8px;
  font: 800 26px/1.1 var(--md-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
#game .md-error-card p { margin: 0 0 18px; color: var(--md-muted); font-size: 14.5px; line-height: 1.55; }
#game .md-error-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#game .md-error-actions .md-btn { text-decoration: none; }
#game .md-error-card .md-fineprint { margin-top: 18px; }
#game .md-fineprint {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--md-faint);
}

/* ------------------------------------------------------------- shared card */
#game .md-wrap { width: min(680px, 100%); margin: 0 auto; padding: 18px 16px 40px; }
#game .md-card {
  position: relative;
  border-radius: var(--md-r-xl);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0) 26%),
    linear-gradient(180deg, var(--md-panel) 0%, #0A1220 100%);
  border: 1px solid var(--md-line);
  box-shadow: var(--md-shadow-card), 0 40px 80px -40px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* ----------------------------------------------------------------- intro */
#game .md-screen-intro { min-height: calc(100dvh - var(--md-chrome-h, 58px)); }
#game .md-wrap-intro { position: relative; }
#game .md-mode-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 auto 14px;
  width: fit-content;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--md-line);
}
#game .md-mode-tab {
  min-height: 36px;
  padding: 8px 16px;
  border-radius: 99px;
  font: 700 12.5px/1 var(--md-body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}
#game .md-mode-tab:hover { color: var(--md-ink2); }
#game .md-mode-tab.is-active {
  color: var(--md-goldink);
  background: var(--md-gold);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

#game .md-intro-card {
  padding: 22px 20px 20px;
  --you: #334155;
  --opp: #334155;
}
#game .md-intro-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--you) 0 42%, var(--md-gold) 42% 58%, var(--opp) 58% 100%);
  opacity: 0.95;
}
#game .md-intro-card::after {
  content: "";
  position: absolute;
  inset: 6px 0 auto;
  height: 60px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
#game .md-intro-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 6px 0 12px;
}
#game .md-daylabel {
  margin: 0;
  flex: none;
  font: 700 10px/1 var(--md-body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--md-gold);
  background: rgba(245, 197, 66, 0.1);
  border: 1px solid rgba(245, 197, 66, 0.28);
  border-radius: 99px;
  padding: 6px 10px;
}
#game .md-matchline {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--md-ink2);
}
#game .md-headline {
  margin: 6px 0 0;
  font: 900 clamp(48px, 15.5vw, 88px)/0.92 var(--md-display);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--md-ink);
  text-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
#game .md-subline {
  margin: 8px 0 18px;
  font: 700 clamp(15px, 4.6vw, 22px)/1.2 var(--md-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-muted);
}
#game .md-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}
#game .md-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  position: relative;
  min-width: 0;
}
#game .md-roundel {
  display: grid;
  place-items: center;
  width: clamp(52px, 15vw, 66px);
  height: clamp(52px, 15vw, 66px);
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(7, 11, 20, 0.5) 0%, rgba(7, 11, 20, 0.18) 72%, rgba(7, 11, 20, 0) 100%),
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.3), transparent 48%),
    var(--tc, #334155);
  border: 3px solid var(--tc2, rgba(255, 255, 255, 0.3));
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.7), 0 0 0 2px rgba(0, 0, 0, 0.35);
  color: #F3F7FF;
  font: 900 clamp(17px, 4.6vw, 22px)/1 var(--md-display);
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#game .md-team-name {
  font: 700 12.5px/1.2 var(--md-body);
  color: var(--md-ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
#game .md-you-tag {
  position: absolute;
  top: -6px;
  right: -2px;
  padding: 3px 7px;
  border-radius: 99px;
  background: var(--md-gold);
  color: var(--md-goldink);
  font: 800 9px/1 var(--md-body);
  letter-spacing: 0.12em;
}
#game .md-score {
  font: 900 clamp(40px, 12vw, 64px)/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--md-ink);
  white-space: nowrap;
}
#game .md-score span { color: var(--md-faint); padding: 0 2px; font-weight: 700; }
#game .md-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
#game .md-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--md-line);
  color: var(--md-ink2);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
#game .md-chip b { color: var(--md-ink); font-weight: 700; }
#game .md-chip-strong {
  background: rgba(245, 197, 66, 0.09);
  border-color: rgba(245, 197, 66, 0.32);
  color: var(--md-gold2);
  font-weight: 600;
}
#game .md-btn-play {
  width: 100%;
  min-height: 58px;
  font-size: 22px;
  letter-spacing: 0.14em;
  border-radius: 16px;
  margin-bottom: 4px;
}
#game .md-btn-play .md-btn-arrow { width: 22px; height: 22px; }
#game .md-resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  margin: 0 0 12px;
  border-radius: var(--md-r-md);
  background: rgba(125, 211, 252, 0.07);
  border: 1px solid rgba(125, 211, 252, 0.24);
}
#game .md-resume b { display: block; font-size: 13.5px; }
#game .md-resume span { font-size: 12px; color: var(--md-muted); }
#game .md-resume-actions { display: flex; gap: 6px; }
#game .md-resume-actions .md-btn { min-height: 40px; padding: 8px 14px; font-size: 14px; }
#game .md-story {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--md-r-md);
  background: rgba(255, 255, 255, 0.03);
  border-left: 3px solid var(--md-gold);
}
#game .md-story p { margin: 0; color: var(--md-ink2); font-size: 14.5px; line-height: 1.58; }
#game .md-story-more {
  margin-top: 6px;
  padding: 4px 0;
  min-height: 32px;
  color: var(--md-gold);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#game .md-coach-line {
  margin: 16px 0 6px;
  font: 600 clamp(16px, 4.6vw, 19px)/1.45 var(--md-body);
  color: var(--md-ink2);
  text-align: center;
}
#game .md-coach-line b { color: var(--md-ink); }
#game .md-real-line {
  margin: 0 0 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--md-faint);
}
#game .md-real-line b { color: var(--md-muted); }
#game .md-intro-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--md-line);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-streak {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--md-muted);
}
#game .md-streak b { color: var(--md-gold); }
#game .md-intro-disclaimer {
  margin: 18px auto 0;
  max-width: 52ch;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--md-faint);
}
#game .md-engine-note {
  margin: 16px auto 0;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 99px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  color: var(--md-faint);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- field */
#game .md-screen-field {
  position: fixed;
  top: var(--md-chrome-h, 56px);
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  min-height: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #05090F;
}
/* note: the field screen is fixed below the sticky header; body scroll is NOT
   locked because overflow:hidden on html/body would break the site's sticky header. */

#game .md-hud {
  position: relative;
  z-index: 30;
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 54px;
  padding: 5px 10px;
  background: rgba(7, 11, 20, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#game .md-hud-btn { width: 36px; height: 38px; min-width: 36px; background: rgba(255, 255, 255, 0.04); }
#game .md-hud-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 42px;
}
#game .md-hud-abbr {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--tc, #223048);
  color: #F3F7FF;
  font: 800 13px/1 var(--md-display);
  letter-spacing: 0.05em;
  isolation: isolate;
}
#game .md-hud-abbr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(7, 11, 20, 0.6);
}
#game .md-hud-sub { display: flex; align-items: center; gap: 3px; height: 7px; }
#game .md-posdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--md-gold);
  background: transparent;
  box-shadow: 0 0 6px rgba(245, 197, 66, 0.55);
}
#game .md-hud-sub { gap: 4px; }
#game .md-tos { display: flex; gap: 2px; }
#game .md-tos i {
  width: 5px;
  height: 6px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}
#game .md-tos i.is-on { background: var(--md-gold); }
#game .md-hud-score {
  font: 900 26px/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  color: var(--md-ink);
  min-width: 22px;
  text-align: center;
}
#game .md-hud-score.is-score { color: var(--md-gold2); }
#game .md-hud-score.is-flip { animation: md-scoreflip 0.65s cubic-bezier(0.2, 0.9, 0.2, 1); }
#game .md-hud-clock {
  flex: 1;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
#game .md-hud-q {
  font: 800 9px/1 var(--md-body);
  letter-spacing: 0.18em;
  color: var(--md-muted);
  margin-bottom: 2px;
}
#game .md-hud-t {
  font: 900 19px/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  color: var(--md-ink);
  letter-spacing: 0.01em;
}
#game .md-hud-running {
  margin-top: 2px;
  font: 700 7.5px/1 var(--md-body);
  letter-spacing: 0.14em;
  color: var(--md-green);
}
#game .md-hud-running.is-stop { color: var(--md-orange); }
#game .md-hud-team[data-team="opp"] { text-align: center; }

#game .md-stage { position: relative; flex: 1; min-height: 0; }
#game .md-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0A3D24;
  cursor: pointer;
  touch-action: manipulation;
}
#game .md-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#game .md-field-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.5) 0.5px, transparent 0.6px),
    radial-gradient(rgba(0, 0, 0, 0.5) 0.5px, transparent 0.6px);
  background-size: 3px 3px, 4px 4px;
  background-position: 0 0, 1px 2px;
}
#game .md-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 90px 12px rgba(0, 0, 0, 0.45);
}
#game .md-skip-hint {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 99px;
  background: rgba(5, 9, 15, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--md-ink2);
  font-size: 11px;
  letter-spacing: 0.06em;
  animation: md-fadein 0.4s ease 0.45s both;
  backdrop-filter: blur(6px);
}
#game .md-skip-hint .md-ic { width: 13px; height: 13px; }

#game .md-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
#game .md-bottom > * { pointer-events: auto; }
#game .md-side-extra { display: none; }
#game .md-side-title {
  margin: 0 0 8px;
  font: 700 9px/1 var(--md-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#game .md-side-list li {
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(245, 197, 66, 0.35);
  color: var(--md-ink2);
  font-size: 11.5px;
  line-height: 1.45;
}
#game .md-side-spot {
  margin-top: 10px;
  padding: 10px 11px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--md-line);
  color: var(--md-muted);
  font-size: 11px;
  line-height: 1.5;
}
#game .md-side-spot b { color: var(--md-ink2); }

#game .md-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  background: rgba(10, 18, 32, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px 18px 0 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#game .md-status-left {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
#game .md-status-left b {
  font: 800 14px/1 var(--md-display);
  letter-spacing: 0.04em;
  color: var(--md-ink);
  text-transform: uppercase;
}
#game .md-status-left span {
  font-size: 10.5px;
  color: var(--md-muted);
  letter-spacing: 0.04em;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-status-left span:empty { display: none; }
#game .md-status-right { display: flex; align-items: center; gap: 6px; flex: none; }
#game .md-clockstate {
  font: 700 8px/1 var(--md-body);
  letter-spacing: 0.12em;
  color: var(--md-green);
  white-space: nowrap;
}
#game .md-clockstate.is-stop { color: var(--md-orange); }
#game .md-look {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 46vw;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(245, 197, 66, 0.12);
  border: 1px solid rgba(245, 197, 66, 0.34);
  color: var(--md-gold2);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-look b { color: var(--md-ink); font-weight: 800; }
#game .md-tempo {
  padding: 5px 8px;
  min-height: 26px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--md-line);
  color: var(--md-muted);
  font: 700 9px/1 var(--md-body);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#game .md-tempo.is-on { color: var(--md-gold); border-color: rgba(245, 197, 66, 0.4); }

#game .md-dock {
  position: relative;
  background:
    linear-gradient(180deg, rgba(20, 34, 56, 0.98), rgba(10, 18, 32, 0.99));
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0;
  padding: 4px 12px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -24px 60px -20px rgba(0, 0, 0, 0.9);
}
#game .md-dock.is-hidden { display: none; }
#game .md-dock-grip {
  width: 38px;
  height: 4px;
  margin: 2px auto 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
}
#game .md-dock-head {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 8px;
}
#game .md-dock-title {
  font: 800 17px/1 var(--md-display);
  letter-spacing: 0.1em;
  color: var(--md-ink);
  text-transform: uppercase;
}
#game .md-dock-sub {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--md-muted);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-dock-help {
  flex: none;
  width: 26px;
  height: 26px;
  min-width: 26px;
  min-height: 26px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  color: var(--md-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--md-line);
}
#game .md-fams {
  display: flex;
  gap: 3px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--md-line);
}
#game .md-fam {
  position: relative;
  flex: 1;
  min-height: 38px;
  padding: 8px 4px 9px;
  font: 700 13.5px/1 var(--md-body);
  letter-spacing: 0.1em;
  color: var(--md-muted);
  text-transform: uppercase;
  transition: color 0.15s ease;
}
#game .md-fam::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -1px;
  height: 2.5px;
  border-radius: 2px;
  background: transparent;
  transition: background-color 0.15s ease;
}
#game .md-fam.is-active { color: var(--md-gold); }
#game .md-fam.is-active::after { background: var(--md-gold); box-shadow: 0 0 12px rgba(245, 197, 66, 0.6); }
#game .md-fam:hover { color: var(--md-ink2); }

#game .md-calls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}
#game .md-call {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 52px;
  padding: 8px 8px 8px 9px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease;
}
#game .md-call:hover,
#game .md-call:focus-visible {
  border-color: rgba(245, 197, 66, 0.5);
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.1), rgba(245, 197, 66, 0.02));
}
#game .md-call:active { transform: scale(0.97); }
#game .md-call-ico { color: var(--md-gold); flex: none; display: grid; place-items: center; }
#game .md-call-ico .md-ic { width: 19px; height: 19px; }
#game .md-call-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#game .md-call-txt b {
  font: 600 12px/1.2 var(--md-body);
  color: var(--md-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: 0.005em;
}
#game .md-call-txt small {
  font: 700 8.5px/1 var(--md-display);
  letter-spacing: 0.08em;
  color: var(--md-faint);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-keynum {
  position: absolute;
  top: 4px;
  right: 5px;
  font: 700 8px/1 var(--md-body);
  color: rgba(255, 255, 255, 0.22);
}
#game .md-call-nfl {
  position: absolute;
  right: 6px;
  bottom: 5px;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(125, 211, 252, 0.12);
  color: var(--md-ice);
  font: 700 7.5px/1.35 var(--md-body);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
#game .md-special .md-call-nfl {
  position: static;
  margin-left: auto;
  align-self: center;
  background: rgba(255, 255, 255, 0.07);
  color: var(--md-muted);
}
#game .md-choice .md-call-nfl { display: none; }

/* ---- status strip: clock state + your timeouts + look tell all at 390px */
#game .md-toscount {
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--md-line);
  color: var(--md-ink2);
  font: 700 8.5px/1 var(--md-body);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
#game .md-toscount.is-none { color: var(--md-faint); opacity: 0.65; }

/* ---- "how every call rated" panel inside the result banner */
#game .md-rate {
  margin: 0 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}
#game .md-rate summary {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 8px 11px;
  cursor: pointer;
  list-style: none;
  font: 700 10.5px/1.2 var(--md-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--md-ink2);
}
#game .md-rate summary::-webkit-details-marker { display: none; }
#game .md-rate summary::after {
  content: "+";
  margin-left: auto;
  color: var(--md-gold);
  font-size: 14px;
  line-height: 1;
}
#game .md-rate[open] summary::after { content: "–"; }
#game .md-rate summary span {
  min-width: 18px;
  padding: 2px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 9px;
  text-align: center;
}
#game .md-rate-head {
  display: grid;
  grid-template-columns: 1fr 46px 54px;
  gap: 6px;
  padding: 0 11px 5px;
  font: 700 8px/1 var(--md-body);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-rate-head span:not(:first-child) { text-align: right; }
#game .md-rate-list {
  margin: 0;
  padding: 0 6px 6px;
  list-style: none;
  max-height: min(34dvh, 280px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overscroll-behavior: contain;
}
#game .md-rate-list li {
  display: grid;
  grid-template-columns: 1fr 46px 54px;
  gap: 6px;
  align-items: center;
  padding: 6px 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.022);
}
#game .md-rate-list li.is-best { background: rgba(52, 211, 153, 0.12); box-shadow: inset 2px 0 0 var(--md-green); }
#game .md-rate-list li.is-pick { background: rgba(125, 211, 252, 0.11); box-shadow: inset 2px 0 0 var(--md-ice); }
#game .md-rate-list li.is-best.is-pick { background: rgba(52, 211, 153, 0.12); }
#game .md-rate-list li.is-implausible { opacity: 0.5; }
#game .md-rate-list li.is-implausible .md-rate-wp { color: var(--md-muted); }
#game .md-rate-list b {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--md-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-rate-tag {
  flex: none;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(52, 211, 153, 0.85);
  color: #06231A;
  font: 800 7px/1.4 var(--md-body);
  font-style: normal;
  letter-spacing: 0.06em;
}
#game .md-rate-tag-pick { background: var(--md-ice); color: #06222E; }
#game .md-rate-nfl { font: 600 10px/1 var(--md-body); color: var(--md-faint); text-align: right; }
#game .md-rate-wp { font: 800 11.5px/1 var(--md-display); color: var(--md-ink2); text-align: right; font-variant-numeric: tabular-nums; }
#game .md-rate-list li.is-best .md-rate-wp { color: #6EF0C0; }
#game .md-rate-list li.is-pick .md-rate-wp { color: var(--md-ice); }

/* ---------- pass target picker ---------- */
#game .md-call.has-targets {
  border-color: rgba(125, 211, 252, 0.3);
}
#game .md-call-target-hint {
  position: absolute;
  left: 4px;
  bottom: 3px;
  color: rgba(125, 211, 252, 0.75);
  font-size: 8px;
  line-height: 1;
}
#game .md-target-back .md-ic { transform: rotate(90deg); }
#game .md-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 7px;
}
#game .md-target {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 72px;
  padding: 8px 10px 7px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
#game .md-target:hover,
#game .md-target:focus-visible,
#game .md-target.is-selected {
  border-color: var(--md-ice);
  background: linear-gradient(180deg, rgba(125, 211, 252, 0.16), rgba(125, 211, 252, 0.03));
  box-shadow: 0 0 0 1px rgba(125, 211, 252, 0.35) inset;
}
#game .md-target:active { transform: scale(0.98); }
#game .md-target-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
#game .md-target-top b {
  font: 800 13px/1 var(--md-display);
  letter-spacing: 0.06em;
  color: var(--md-ice);
}
#game .md-target-r {
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--md-ink2);
  font: 800 9.5px/1 var(--md-body);
}
#game .md-target-name {
  max-width: 100%;
  font: 700 12.5px/1.15 var(--md-body);
  color: var(--md-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-target-vs {
  font-size: 9.5px;
  color: var(--md-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-target .md-keynum { top: 5px; right: 6px; }
#game .md-target-auto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: var(--md-ink2);
  font: 700 11px/1 var(--md-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
#game .md-target-auto .md-ic { width: 16px; height: 16px; color: var(--md-gold); }
#game .md-target-auto:hover,
#game .md-target-auto.is-selected {
  border-color: var(--md-gold);
  background: rgba(245, 197, 66, 0.1);
  color: var(--md-gold2);
}
#game .md-banner-target { color: var(--md-ice); }

/* special-teams defense choice cards */
#game .md-choice.is-selected {
  border-color: var(--md-gold);
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.18), rgba(245, 197, 66, 0.03));
  box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.4) inset;
}

/* keep the expanded rate panel usable in the overlay on short screens */
@media (max-height: 700px) {
  #game .md-rate-list { max-height: 26dvh; }
}


#game .md-specials {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#game .md-special {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-height: 42px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(245, 197, 66, 0.07);
  border: 1px solid rgba(245, 197, 66, 0.26);
  color: var(--md-gold2);
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
#game .md-special:hover { background: rgba(245, 197, 66, 0.13); border-color: rgba(245, 197, 66, 0.5); }
#game .md-special .md-ic { width: 17px; height: 17px; color: var(--md-gold); }
#game .md-special span { display: flex; flex-direction: column; min-width: 0; }
#game .md-special b {
  font: 800 11px/1.15 var(--md-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--md-gold2);
  white-space: nowrap;
}
#game .md-special small {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-special-clock { border-color: rgba(125, 211, 252, 0.32); background: rgba(125, 211, 252, 0.07); }
#game .md-special-clock b { color: var(--md-ice); }
#game .md-special-clock .md-ic { color: var(--md-ice); }

/* defense */
#game .md-defs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 8px;
}
#game .md-def-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 10px 9px;
  min-height: 96px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
#game .md-def-card:active { transform: scale(0.98); }
#game .md-def-card.is-selected {
  border-color: var(--md-gold);
  background: linear-gradient(180deg, rgba(245, 197, 66, 0.16), rgba(245, 197, 66, 0.03));
  box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.35) inset, 0 8px 24px -12px rgba(245, 197, 66, 0.5);
}
#game .md-def-ico { color: var(--md-gold); margin-bottom: 2px; }
#game .md-def-ico .md-ic { width: 24px; height: 24px; }
#game .md-def-name {
  font: 800 14px/1 var(--md-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-ink);
}
#game .md-def-desc { font-size: 9.5px; line-height: 1.35; color: var(--md-muted); }
#game .md-def-q {
  margin-top: auto;
  font: 700 8px/1 var(--md-body);
  letter-spacing: 0.1em;
  color: var(--md-faint);
  text-transform: uppercase;
}
#game .md-specials-st { margin-bottom: 8px; }
#game .md-specials-st .md-special.is-selected {
  border-color: var(--md-gold);
  background: rgba(245, 197, 66, 0.16);
  box-shadow: 0 0 0 1px rgba(245, 197, 66, 0.3) inset;
}
#game .md-dock-actions { display: flex; gap: 7px; align-items: stretch; }
#game .md-btn-commit { flex: 1; min-height: 50px; font-size: 18px; }
#game .md-btn-timeout { flex: none; min-height: 50px; padding: 10px 14px; font-size: 13px; gap: 6px; }
#game .md-btn-timeout small { color: var(--md-muted); font-family: var(--md-body); font-size: 9.5px; }

/* pat / kick choices */
#game .md-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-bottom: 4px;
}
#game .md-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 86px;
  padding: 12px;
  border-radius: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.1s ease;
}
#game .md-choice:hover,
#game .md-choice:focus-visible { border-color: rgba(245, 197, 66, 0.55); background: rgba(245, 197, 66, 0.09); }
#game .md-choice:active { transform: scale(0.98); }
#game .md-choice-ico { color: var(--md-gold); }
#game .md-choice-ico .md-ic { width: 22px; height: 22px; }
#game .md-choice b {
  font: 800 15px/1.1 var(--md-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-ink);
}
#game .md-choice small { font-size: 10px; color: var(--md-muted); }

/* playing */
#game .md-dock.is-playing { padding-top: 0; }
#game .md-playing-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px 2px;
}
#game .md-playing-pulse {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--md-gold);
  box-shadow: 0 0 0 0 rgba(245, 197, 66, 0.55);
  animation: md-ping 1.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}
#game .md-playing-label {
  flex: 1;
  min-width: 0;
  font: 800 13px/1.2 var(--md-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--md-ink2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: var(--md-ink2);
  font: 700 11px/1 var(--md-body);
  letter-spacing: 0.1em;
}
#game .md-skip-btn .md-ic { width: 13px; height: 13px; }

/* banner */
#game .md-banner {
  background:
    linear-gradient(180deg, rgba(22, 38, 62, 0.99), rgba(9, 16, 29, 0.995));
  border-top: 1px solid rgba(245, 197, 66, 0.35);
  border-radius: 20px 20px 0 0;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 -26px 70px -16px rgba(0, 0, 0, 0.92), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: md-rise 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
#game .md-banner.is-good { border-top-color: rgba(52, 211, 153, 0.7); }
#game .md-banner.is-bad { border-top-color: rgba(248, 113, 113, 0.7); }
#game .md-banner-top {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
#game .md-banner-kicker {
  width: 100%;
  font: 700 8.5px/1 var(--md-body);
  letter-spacing: 0.16em;
  color: var(--md-faint);
  text-transform: uppercase;
  margin-bottom: 1px;
}
#game .md-banner-headline {
  flex: 1;
  min-width: 0;
  font: 900 clamp(24px, 7.2vw, 34px)/1 var(--md-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-ink);
}
#game .md-banner.is-good .md-banner-headline { color: #6EF0C0; }
#game .md-banner.is-bad .md-banner-headline { color: #FF9C9C; }
#game .md-banner-wp {
  flex: none;
  text-align: right;
  font: 900 22px/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
#game .md-banner-wp small {
  display: block;
  font: 600 8.5px/1 var(--md-body);
  letter-spacing: 0.06em;
  color: var(--md-faint);
  margin-top: 3px;
}
#game .md-banner-wp.is-up { color: var(--md-green); }
#game .md-banner-wp.is-down { color: var(--md-red); }
#game .md-banner-narr {
  margin: 7px 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--md-ink2);
}
#game .md-banner-grade {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 11px;
}
#game .md-grade-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 7px;
  font: 800 10px/1 var(--md-body);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  animation: md-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;
}
#game .md-grade-chip i { font-style: normal; font-size: 12px; }
#game .md-grade-chip.g-green { color: #062E21; background: var(--md-green); }
#game .md-grade-chip.g-yellow { color: #2A2100; background: var(--md-yellow); }
#game .md-grade-chip.g-orange { color: #2B1200; background: var(--md-orange); }
#game .md-grade-chip.g-red { color: #330706; background: var(--md-red); }
#game .md-grade-chip.g-neutral { color: var(--md-muted); background: rgba(255, 255, 255, 0.08); }
#game .md-grade-best { font-size: 10.5px; color: var(--md-muted); }
#game .md-banner-actions { display: flex; gap: 7px; }
#game .md-banner-actions .md-btn { min-height: 46px; flex: 1; font-size: 15px; }
#game .md-banner-actions .md-btn-ghost { flex: 0 0 auto; padding: 10px 14px; font-size: 12.5px; }
#game .md-banner-actions .md-btn-gold { flex: 1.4; }

/* ---------------------------------------------------------------- result */
#game .md-screen-result { min-height: calc(100dvh - var(--md-chrome-h, 58px)); }
#game .md-wrap-result { position: relative; }
#game .md-confetti-static {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    radial-gradient(3px 5px at 8% 18%, rgba(245, 197, 66, 0.5), transparent 60%),
    radial-gradient(4px 3px at 22% 8%, rgba(52, 211, 153, 0.35), transparent 60%),
    radial-gradient(3px 6px at 78% 12%, rgba(125, 211, 252, 0.35), transparent 60%),
    radial-gradient(4px 4px at 92% 26%, rgba(245, 197, 66, 0.4), transparent 60%),
    radial-gradient(2px 4px at 64% 4%, rgba(248, 113, 113, 0.3), transparent 60%);
}
#game .md-result-head { text-align: center; margin-bottom: 18px; }
#game .md-result-head .md-eyebrow { justify-content: center; margin-bottom: 8px; }
#game .md-result-title {
  margin: 0;
  font: 900 clamp(34px, 9.4vw, 52px)/0.95 var(--md-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
#game .md-result-matchup {
  margin: 7px 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-ink2);
}
#game .md-result-day {
  margin: 0;
  font: 700 10px/1 var(--md-body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--md-gold);
}
#game .md-result-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px 0 20px;
}
#game .md-ring {
  position: relative;
  width: min(238px, 62vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
#game .md-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
#game .md-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 9;
}
#game .md-ring-arc {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s ease-out;
  filter: drop-shadow(0 0 10px rgba(245, 197, 66, 0.35));
}
#game .md-ring-center { text-align: center; }
#game .md-ring-num {
  display: flex;
  align-items: baseline;
  justify-content: center;
  font: 900 clamp(54px, 17vw, 82px)/0.9 var(--md-display);
  font-variant-numeric: tabular-nums;
  color: var(--md-ink);
}
#game .md-ring-num i { font-style: normal; font-size: 0.42em; color: var(--md-gold); margin-left: 2px; }
#game .md-ring-cap {
  margin-top: 6px;
  font: 700 9px/1 var(--md-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-grade-badge {
  position: absolute;
  right: -2px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  font: 900 27px/1 var(--md-display);
  color: #07100C;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.8), 0 0 0 5px rgba(7, 11, 20, 0.9);
}
#game .md-grade-badge.g-green { background: var(--md-green); }
#game .md-grade-badge.g-yellow { background: var(--md-yellow); }
#game .md-grade-badge.g-orange { background: var(--md-orange); }
#game .md-grade-badge.g-red { background: var(--md-red); }
#game .md-pct-caption {
  margin: 6px 0 0;
  max-width: 30ch;
  text-align: center;
  font: 800 12px/1.5 var(--md-body);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--md-ink2);
}
#game .md-pct-caption b { color: var(--md-gold); }
#game .md-pct-sub { margin: 4px 0 0; font-size: 11px; color: var(--md-faint); }

#game .md-scoreline {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "you score opp" "final final final";
  align-items: center;
  gap: 6px;
  padding: 14px 16px 10px;
  border-radius: var(--md-r-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--md-line);
}
#game .md-scoreline-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--md-ink2);
}
#game .md-scoreline-team small { color: var(--md-gold); font-size: 8.5px; letter-spacing: 0.1em; }
#game .md-scoreline-team-opp { justify-content: flex-end; text-align: right; }
#game .md-scoreline-team .md-roundel { width: 34px; height: 34px; font-size: 12px; border-width: 2px; }
#game .md-scoreline-score {
  grid-area: score;
  font: 900 clamp(34px, 9vw, 46px)/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  color: var(--md-ink);
  padding: 0 6px;
}
#game .md-scoreline-score span { color: var(--md-faint); padding: 0 1px; }
#game .md-scoreline-score.is-win { color: #6EF0C0; }
#game .md-scoreline-score.is-loss { color: #FF9C9C; }
#game .md-scoreline-score.is-tie { color: var(--md-yellow); }
#game .md-scoreline-final {
  grid-area: final;
  text-align: center;
  font: 700 9px/1 var(--md-body);
  letter-spacing: 0.18em;
  color: var(--md-faint);
  margin-top: 2px;
}

#game .md-result-cards { display: grid; gap: 8px; margin-top: 10px; }
#game .md-result-card {
  padding: 14px 16px;
  border-radius: var(--md-r-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--md-line);
}
#game .md-card-kicker {
  margin: 0 0 5px;
  font: 700 9px/1 var(--md-body);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-coach-card h3 {
  margin: 0 0 6px;
  font: 800 clamp(22px, 6vw, 28px)/1.05 var(--md-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--md-ink);
}
#game .md-why { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
#game .md-why li {
  position: relative;
  padding-left: 13px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--md-muted);
}
#game .md-why li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--md-gold);
}
#game .md-wpa-card { display: flex; flex-direction: column; gap: 2px; }
#game .md-wpa-big {
  font: 900 clamp(38px, 11vw, 50px)/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
#game .md-wpa-big.is-up { color: #6EF0C0; }
#game .md-wpa-big.is-down { color: #FF9C9C; }
#game .md-card-note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--md-muted); }
#game .md-card-note b { color: var(--md-ink2); }
#game .md-real-beat { font: 800 clamp(18px, 5.2vw, 23px)/1.1 var(--md-display); letter-spacing: 0.03em; text-transform: uppercase; }
#game .md-real-beat.is-good { color: #6EF0C0; }
#game .md-real-beat.is-bad { color: #FF9C9C; }
#game .md-real-beat.is-even { color: var(--md-yellow); }

#game .md-share { display: flex; gap: 8px; margin-top: 12px; }
#game .md-share .md-btn { flex: 1; min-height: 48px; font-size: 13px; padding: 10px 12px; }
#game .md-btn-share .md-ic { width: 16px; height: 16px; }
#game .md-next-drive {
  margin: 14px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--md-muted);
}
#game .md-next-drive b { color: var(--md-gold); }
#game .md-streak-line {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12px;
  color: var(--md-faint);
}
#game .md-decisions {
  margin-top: 16px;
  border-radius: var(--md-r-md);
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
#game .md-decisions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  min-height: 46px;
  cursor: pointer;
  font: 800 13px/1 var(--md-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--md-ink2);
  list-style: none;
}
#game .md-decisions summary::-webkit-details-marker { display: none; }
#game .md-decisions summary span {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 10px;
  text-align: center;
}
#game .md-decision-list { margin: 0; padding: 4px 10px 10px; list-style: none; display: flex; flex-direction: column; gap: 3px; }
#game .md-decision {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 8px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.025);
}
#game .md-decision-mark {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #07100C;
}
#game .md-decision-mark.g-green { background: var(--md-green); }
#game .md-decision-mark.g-yellow { background: var(--md-yellow); }
#game .md-decision-mark.g-orange { background: var(--md-orange); }
#game .md-decision-mark.g-red { background: var(--md-red); }
#game .md-decision-mark.g-neutral { background: rgba(255, 255, 255, 0.15); color: var(--md-ink2); }
#game .md-decision-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#game .md-decision-main b {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .md-decision-main small { font-size: 10px; color: var(--md-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#game .md-decision-wp {
  flex: none;
  font: 800 12px/1 var(--md-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
#game .md-decision-wp.is-up { color: #6EF0C0; }
#game .md-decision-wp.is-down { color: #FF9C9C; }
#game .md-decision-empty { padding: 12px; color: var(--md-muted); font-size: 12px; text-align: center; }

#game .md-result-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#game .md-result-actions .md-btn { flex: 1 1 46%; min-height: 52px; font-size: 14px; }
#game .md-result-balanced {
  margin: 14px 0 0;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--md-faint);
}
#game .md-wrap-result .md-fineprint { margin: 12px auto 0; max-width: 54ch; text-align: center; }
#game .md-result-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 90px 20px;
  text-align: center;
}
#game .md-result-loading p {
  margin: 0;
  font: 800 15px/1 var(--md-display);
  letter-spacing: 0.18em;
  color: var(--md-ink2);
}
#game .md-result-loading small { font-size: 12px; color: var(--md-faint); max-width: 34ch; }

/* ---------------------------------------------------------------- sheets */
#game .md-sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
#game .md-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 6, 12, 0.72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease;
}
#game .md-sheet {
  position: relative;
  width: min(560px, 100%);
  max-height: 82dvh;
  overflow-y: auto;
  padding: 8px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, #16263E, #0A1220);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 0;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, 0.8);
  transform: translateY(100%);
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#game .md-sheet-wrap.is-on .md-sheet-backdrop { opacity: 1; }
#game .md-sheet-wrap.is-on .md-sheet { transform: translateY(0); }
#game .md-sheet-grip {
  width: 38px;
  height: 4px;
  margin: 2px auto 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
}
#game .md-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
#game .md-sheet-head h2 {
  margin: 0;
  font: 800 22px/1 var(--md-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#game .md-sheet-empty { color: var(--md-muted); font-size: 13px; text-align: center; padding: 24px 0; }
#game .md-menu-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
#game .md-menu-mode {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px;
  min-height: 64px;
  border-radius: 12px;
  border: 1px solid var(--md-line);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
}
#game .md-menu-mode b { font: 800 14px/1 var(--md-display); letter-spacing: 0.06em; text-transform: uppercase; }
#game .md-menu-mode small { font-size: 9.5px; color: var(--md-muted); }
#game .md-menu-mode.is-active { border-color: var(--md-gold); background: rgba(245, 197, 66, 0.1); }
#game .md-menu-mode.is-active b { color: var(--md-gold); }
#game .md-menu-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
#game .md-menu-item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--md-line);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--md-ink2);
  text-align: left;
}
#game .md-menu-item:last-child { border-bottom: 0; }
#game .md-menu-item .md-ic { color: var(--md-muted); }
#game .md-menu-item span { margin-left: auto; color: var(--md-gold); font-size: 12px; }
#game .md-menu-note { margin: 0 0 14px; font-size: 11px; line-height: 1.5; color: var(--md-faint); }
#game .md-btn-close { width: 100%; }
#game .md-pbp-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 52dvh;
  overflow-y: auto;
}
#game .md-pbp-list li {
  padding: 9px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border-left: 2px solid rgba(245, 197, 66, 0.4);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--md-ink2);
}
#game .md-how p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; color: var(--md-ink2); }
#game .md-how b { color: var(--md-ink); }
#game .md-grade-key { margin: 0 0 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
#game .md-grade-key li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--md-muted); }
#game .md-grade-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 800;
  color: #07100C;
}
#game .md-grade-dot.g-green { background: var(--md-green); }
#game .md-grade-dot.g-yellow { background: var(--md-yellow); }
#game .md-grade-dot.g-orange { background: var(--md-orange); }
#game .md-grade-dot.g-red { background: var(--md-red); }
#game .md-how-note { font-size: 11.5px; color: var(--md-faint); }

/* ----------------------------------------------------------------- toast */
#game .md-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 200;
  transform: translate(-50%, 20px);
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 12px;
  background: rgba(15, 26, 43, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.8);
  color: var(--md-ink);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#game .md-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
#game .md-toast[data-kind="bad"] { border-color: rgba(248, 113, 113, 0.5); }

/* -------------------------------------------------------------- keyframes */
@keyframes md-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.82); }
}
@keyframes md-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes md-ping {
  0% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0.55); }
  70% { box-shadow: 0 0 0 10px rgba(245, 197, 66, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 197, 66, 0); }
}
@keyframes md-scoreflip {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-9px) scale(1.18); color: var(--md-gold2); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes md-rise {
  from { transform: translateY(26px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@keyframes md-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes md-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------- wide / desktop */
@media (min-width: 640px) {
  #game .md-wrap { padding: 24px 24px 48px; }
  #game .md-intro-card { padding: 28px 28px 24px; }
  #game .md-calls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #game .md-result-cards { grid-template-columns: 1fr 1fr; }
  #game .md-coach-card { grid-column: 1 / -1; }
  #game .md-share .md-btn { font-size: 14px; }
  #game .md-banner-actions .md-btn-gold { flex: 0 0 190px; }
  #game .md-dock { padding-left: 16px; padding-right: 16px; }
}

@media (min-width: 960px) {
  #game .md-screen-field { top: var(--md-chrome-h, 60px); }
  #game .md-hud { height: 58px; padding: 6px 16px; gap: 12px; }
  #game .md-hud-btn { width: 38px; height: 40px; }
  #game .md-hud-clock { min-width: 84px; }
  #game .md-hud-score { font-size: 30px; }
  #game .md-hud-abbr { font-size: 14px; height: 22px; min-width: 40px; }
  #game .md-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 388px;
    gap: 14px;
    padding: 14px;
  }
  #game .md-field {
    position: relative;
    inset: auto;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  }
  #game .md-bottom { position: relative; left: auto; right: auto; bottom: auto; min-height: 0; overflow: hidden; }
  #game .md-side-extra {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin-top: 10px;
    padding: 12px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.018);
  }
  #game .md-status { border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 12px; }
  #game .md-dock {
    flex: 0 0 auto;
    min-height: 0;
    overflow-y: auto;
    max-height: 64%;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 12px 14px 16px;
    box-shadow: var(--md-shadow-card);
  }
  #game .md-dock.is-hidden { display: none; }
  #game .md-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game .md-call { min-height: 54px; }
  #game .md-call-txt b { font-size: 13px; }
  #game .md-call-txt small { font-size: 9px; }
  #game .md-banner { border-radius: 18px; animation: md-fadein 0.25s ease both; }
  #game .md-banner-headline { font-size: 30px; }
  #game .md-banner-actions { margin-top: 2px; }
  #game .md-banner-actions .md-btn { min-height: 48px; }
  #game .md-skip-hint { top: 16px; }
  #game .md-result-cards { grid-template-columns: 1.1fr 1fr; }
  #game .md-coach-card { grid-column: auto; }
  #game .md-real-card { grid-column: 1 / -1; }
  #game .md-wrap-result { padding-top: 34px; }
  #game .md-share { gap: 10px; }
  #game .md-mode-tabs { margin-bottom: 18px; }
}

@media (min-width: 1240px) {
  #game .md-stage { grid-template-columns: minmax(0, 1fr) 420px; }
}

/* small phones */
@media (max-width: 359px) {
  #game .md-wrap { padding: 12px 10px 32px; }
  #game .md-intro-card { padding: 16px 14px 16px; }
  #game .md-calls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game .md-defs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game .md-def-card { min-height: 84px; }
  #game .md-hud { gap: 4px; padding: 5px 8px; }
  #game .md-hud-btn { width: 34px; min-width: 34px; height: 36px; }
  #game .md-hud-score { font-size: 23px; }
  #game .md-hud-t { font-size: 17px; }
  #game .md-dock { padding-left: 9px; padding-right: 9px; }
  #game .md-call { padding: 7px 7px 7px 8px; min-height: 50px; }
  #game .md-call-txt b { font-size: 11px; }
  #game .md-call-ico .md-ic { width: 17px; height: 17px; }
  #game .md-status { padding: 5px 9px; min-height: 30px; }
  #game .md-status-left b { font-size: 12.5px; }
  #game .md-status-left span { font-size: 9.5px; }
  #game .md-banner-headline { font-size: 22px; }
  #game .md-btn { font-size: 15px; }
  #game .md-dock-title { font-size: 15px; }
}

/* landscape phones: keep the dock compact */
@media (max-height: 520px) and (max-width: 959px) {
  #game .md-screen-field { min-height: 320px; }
  #game .md-hud { height: 46px; }
  #game .md-status { display: none; }
  #game .md-dock { max-height: 62dvh; overflow-y: auto; }
  #game .md-calls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #game .md-defs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game .md-skip-hint { display: none; }
}

/* ------------------------------------------------------ reduced motion */
@media (prefers-reduced-motion: reduce) {
  #game *,
  #game *::before,
  #game *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  #game .md-loading-mark { animation: none; }
  #game .md-live-pip { animation: none; }
}
#game.md-reduce *,
#game.md-reduce *::before,
#game.md-reduce *::after,
.md-reduce #game *,
.md-reduce #game *::before,
.md-reduce #game *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* high contrast preference: strengthen separations */
@media (prefers-contrast: more) {
  #game .md-card,
  #game .md-dock,
  #game .md-banner,
  #game .md-result-card { border-color: rgba(255, 255, 255, 0.4); }
  #game .md-call,
  #game .md-choice,
  #game .md-def-card { border-color: rgba(255, 255, 255, 0.32); }
  #game .md-call-txt b,
  #game .md-card-note,
  #game .md-why li { color: var(--md-ink); }
}