@font-face {
  font-family: 'AA Galaxy';
  src: url('AA-GALAXY.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

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

/* =========================================================================
   THEMES  (editorial palette — flat surfaces, hairline borders)
   ========================================================================= */
:root, [data-theme="sand"] {
  --bg: #ece0cf; --bg-card: #fbf6ec; --bg-card2: #f4ebd8;
  --border: #d3c3a0; --border-light: #e0d3b8;
  --text: #3a2a1a; --text-mid: #6a5237; --text-soft: #8a7256;
  --accent: #7a3f1c; --accent-light: #92502a; --accent-glow: rgba(122,63,28,0.15);
  --gold: #eab543; --gold-dark: #c9922f; --gold-glow: rgba(234,181,67,0.28);
  --green: #7a3f1c; --green-bg: #7a3f1c; --green-border: #eab543; --green-glow: rgba(122,63,28,0.18);
  --red: #7a3f1c; --red-bg: #ece0cf; --red-border: #b78a55; --red-glow: rgba(122,63,28,0.2);
  --header-bg: #5c2f14; --slot-hover-num: #f0e4cf;
  --confetti1:#c2956a;--confetti2:#eab543;--confetti3:#d4a373;--confetti4:#8b5e3c;
  --on-accent: #fbf3e6;
}

[data-theme="ocean"] {
  --bg: #0f2942; --bg-card: #163757; --bg-card2: #1a4068;
  --border: #2a5a8a; --border-light: #24507e;
  --text: #e2eaf3; --text-mid: #a8c4df; --text-soft: #7a9bbd;
  --accent: #38bdf8; --accent-light: #5ccbfa; --accent-glow: rgba(56,189,248,0.22);
  --gold: #fbbf24; --gold-dark: #d4991a; --gold-glow: rgba(251,191,36,0.25);
  --green: #34d399; --green-bg: #0d3d2e; --green-border: #28a87a; --green-glow: rgba(52,211,153,0.2);
  --red: #143a56; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #0c2138; --slot-hover-num: #1e5580;
  --confetti1:#38bdf8;--confetti2:#fbbf24;--confetti3:#34d399;--confetti4:#818cf8;
  --on-accent: #04263b;
}

[data-theme="forest"] {
  --bg: #0f2a1a; --bg-card: #153824; --bg-card2: #1a422c;
  --border: #2a6b45; --border-light: #235a3a;
  --text: #e2f3ea; --text-mid: #a8d4bc; --text-soft: #7ab896;
  --accent: #4ade80; --accent-light: #6ee7a0; --accent-glow: rgba(74,222,128,0.22);
  --gold: #fbbf24; --gold-dark: #d4991a; --gold-glow: rgba(251,191,36,0.25);
  --green: #34d399; --green-bg: #0d3328; --green-border: #28a87a; --green-glow: rgba(52,211,153,0.2);
  --red: #143d28; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #0c2416; --slot-hover-num: #1a5030;
  --confetti1:#4ade80;--confetti2:#fbbf24;--confetti3:#34d399;--confetti4:#a3e635;
  --on-accent: #05240f;
}

[data-theme="royal"] {
  --bg: #1a1030; --bg-card: #251848; --bg-card2: #2d1e55;
  --border: #5a3d9e; --border-light: #4a3288;
  --text: #eee5ff; --text-mid: #c4b0e8; --text-soft: #9880c8;
  --accent: #a78bfa; --accent-light: #c4b0fa; --accent-glow: rgba(167,139,250,0.22);
  --gold: #fbbf24; --gold-dark: #d4991a; --gold-glow: rgba(251,191,36,0.25);
  --green: #34d399; --green-bg: #152e28; --green-border: #28a87a; --green-glow: rgba(52,211,153,0.2);
  --red: #2a1b4a; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #150c28; --slot-hover-num: #3a2570;
  --confetti1:#a78bfa;--confetti2:#fbbf24;--confetti3:#f472b6;--confetti4:#818cf8;
  --on-accent: #1c1040;
}

[data-theme="sunset"] {
  --bg: #2a1510; --bg-card: #3d1e18; --bg-card2: #48251e;
  --border: #8a4a35; --border-light: #723c2a;
  --text: #fce8e0; --text-mid: #e0b8a5; --text-soft: #c09080;
  --accent: #fb923c; --accent-light: #fdba74; --accent-glow: rgba(251,146,60,0.22);
  --gold: #fbbf24; --gold-dark: #d4991a; --gold-glow: rgba(251,191,36,0.25);
  --green: #34d399; --green-bg: #1a3028; --green-border: #28a87a; --green-glow: rgba(52,211,153,0.2);
  --red: #4a2418; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #23110c; --slot-hover-num: #5a3020;
  --confetti1:#fb923c;--confetti2:#fbbf24;--confetti3:#f87171;--confetti4:#fdba74;
  --on-accent: #2a1206;
}

[data-theme="midnight"] {
  --bg: #0a0e1a; --bg-card: #111827; --bg-card2: #1a2035;
  --border: #374151; --border-light: #2a3446;
  --text: #f1f5f9; --text-mid: #94a3b8; --text-soft: #64748b;
  --accent: #e2e8f0; --accent-light: #f1f5f9; --accent-glow: rgba(226,232,240,0.14);
  --gold: #fbbf24; --gold-dark: #d4991a; --gold-glow: rgba(251,191,36,0.25);
  --green: #34d399; --green-bg: #0d2820; --green-border: #28a87a; --green-glow: rgba(52,211,153,0.2);
  --red: #1e2636; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #080b14; --slot-hover-num: #1e2a40;
  --confetti1:#e2e8f0;--confetti2:#fbbf24;--confetti3:#38bdf8;--confetti4:#a78bfa;
  --on-accent: #0a0e1a;
}

/* --accent here is deliberately a deep steel blue, not a light tint: it is painted
   behind the active team card, whose points sit on it in --gold. Anything lighter
   drops that pair below 4.5:1 — the reason midnight needs its own overrides below. */
[data-theme="navy"] {
  --bg: #0d1526; --bg-card: #16203a; --bg-card2: #1d2b4d;
  --border: #2e4470; --border-light: #263a5f;
  --text: #e8eef8; --text-mid: #a3b6d2; --text-soft: #7186a5;
  --accent: #1c5882; --accent-light: #2471a6; --accent-glow: rgba(28,88,130,0.25);
  --gold: #f5c451; --gold-dark: #cf9f33; --gold-glow: rgba(245,196,81,0.25);
  --green: #3ecf8e; --green-bg: #0d2b22; --green-border: #2aa572; --green-glow: rgba(62,207,142,0.2);
  --red: #1a2740; --red-bg: #0d2618; --red-border: #2a6b45; --red-glow: rgba(40,100,65,0.3);
  --header-bg: #0a1120; --slot-hover-num: #24365c;
  --confetti1:#f5c451;--confetti2:#3ecf8e;--confetti3:#2471a6;--confetti4:#a78bfa;
  --on-accent: #eaf3fb;
}

:root { --slot-h: 72px;
  --shadow: 0 1px 3px rgba(40,30,10,0.05); --shadow-lg: 0 18px 44px rgba(40,40,25,0.14);
  --danger: #e53e3e; --danger-dark: #c53030; --danger-bg: rgba(229,62,62,0.10); --danger-glow: rgba(229,62,62,0.28);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --ease: cubic-bezier(.22,.85,.32,1);
  --cta:#f0a830; --cta-dark:#b07820; --cta-deep:#8a5e18;
}

body {
  font-family: 'AA Galaxy','Readex Pro','Tajawal',sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; overflow-x: hidden; user-select: none;
}

/* TV MODE */
body.tv-mode { font-size: 1.25em }
body.tv-mode .q-text { font-size: clamp(1.8rem,4.5vw,2.8rem) }
body.tv-mode .flip-card { height: 90px }
body.tv-mode .flip-front .txt, body.tv-mode .flip-back .txt { font-size: 1.5rem }
body.tv-mode .flip-front .num, body.tv-mode .flip-back .num { font-size: 1.8rem; width: 60px }
body.tv-mode .flip-back .pts { font-size: 1.6rem; width: 80px }
body.tv-mode .team-pts { font-size: 4rem }
body.tv-mode .strike-x { width: 65px; height: 65px; font-size: 2.2rem }

/* ===== ICONS ===== */
.icon {
  width:1em; height:1em; display:inline-block; vertical-align:-0.15em;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.editor-search-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-soft); width:1.1em; height:1.1em }

/* ===== ACCESSIBILITY ===== */
button:focus-visible, a:focus-visible, input:focus-visible,
.theme-dot:focus-visible, .opt-btn:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important; animation-iteration-count:1 !important;
    transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}

/* ===== BACKGROUND ===== */
.bg {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 85% 45% at 50% -8%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 68%),
    var(--bg);
}
.bg::before {
  content:''; position:absolute; inset:0; opacity:1;
  background-image:radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1.7px, transparent 2px);
  background-size:22px 22px;
  -webkit-mask:none;
  mask:none;
}

.app { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column }

/* =========================================================================
   MEDALLION MOTIF (reusable brand mark)
   ========================================================================= */
.medallion {
  border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px var(--gold), 0 0 0 9px var(--accent), 0 0 0 11px var(--gold), var(--shadow-lg);
}
.medallion-ring {
  border-radius:50%; border:2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}

/* =========================================================================
   HEADER (in-game)
   ========================================================================= */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 22px; background:var(--header-bg);
  border-bottom:2px solid var(--gold); gap:12px;
}
.header-logo { font-family:'AA Galaxy','Lalezar',cursive; font-size:1.7rem; color:var(--on-accent); flex-shrink:0; letter-spacing:.5px }
.vol-wrap { display:flex; align-items:center; gap:6px; flex-shrink:0 }
.header-btns { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.header-icon-btn {
  background:color-mix(in srgb, #fff 12%, transparent); border:1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:11px; padding:6px 11px; font-size:1.05rem; cursor:pointer; color:var(--on-accent);
  transition:all 0.25s var(--ease); line-height:1;
}
.header-icon-btn:hover { background:var(--gold); color:var(--accent); border-color:var(--gold) }
.header-icon-btn:active { transform:translateY(1px) }

/* In-game settings */
.ig-settings-card { max-width:420px; text-align:center }
.ig-settings-card .option-btns { justify-content:center }
.ig-settings-card .theme-picker { justify-content:center }
.ig-setting { margin:16px 0 }
.ig-setting label { display:block; font-size:0.85rem; font-weight:700; color:var(--text-mid); margin-bottom:10px }
.sound-toggle {
  background:color-mix(in srgb, #fff 12%, transparent); border:1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  border-radius:11px; padding:7px 13px; font-size:1.1rem; cursor:pointer; color:var(--on-accent);
  transition:all 0.25s var(--ease);
}
.sound-toggle:hover { background:var(--gold); color:var(--accent) }
.sound-toggle.muted { opacity:0.45 }
.vol-slider {
  width:70px; height:5px; -webkit-appearance:none; appearance:none;
  background:color-mix(in srgb, #fff 20%, transparent); border-radius:3px; outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:2px solid var(--accent); cursor:pointer;
}
.vol-slider::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%;
  background:var(--gold); border:2px solid var(--accent); cursor:pointer;
}

/* Timer - LED Digital Display */
.led-timer { display:flex; flex-direction:column; align-items:center; gap:8px }
.led-label {
  display:flex; align-items:center; gap:4px;
  font-size:0.68rem; font-weight:800; letter-spacing:0.5px;
  color:var(--text-soft); text-transform:uppercase;
}
.led-label .icon { width:0.9em; height:0.9em }
.led-display {
  background:linear-gradient(160deg, #0b0f16, #171f2b);
  border:2px solid color-mix(in srgb, var(--gold) 45%, #1a1f28);
  border-radius:50%; width:104px; height:104px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.6),
    0 8px 18px rgba(0,0,0,0.18),
    0 0 0 6px color-mix(in srgb, var(--bg-card) 80%, transparent);
  position:relative; overflow:hidden;
}
.led-display::after {
  content:''; position:absolute; inset:9px; border-radius:50%;
  border:1.5px dashed color-mix(in srgb, var(--gold) 40%, transparent); pointer-events:none;
}
.led-num {
  font-family:'AA Galaxy','Lalezar','Tajawal',sans-serif;
  font-size:2.5rem; font-weight:900;
  color:var(--gold); letter-spacing:1px; line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 12px var(--gold-glow), 0 0 26px var(--gold-glow);
  position:relative; z-index:1;
  transition:color 0.3s, text-shadow 0.3s;
}
.led-num.warn { color:#ffce54; text-shadow:0 0 12px rgba(255,206,84,0.55) }
.led-num.danger {
  color:#ff6b6b; text-shadow:0 0 12px rgba(255,107,107,0.6);
  animation:ledPulse 0.5s ease infinite;
}
@keyframes ledPulse { 0%,100%{opacity:1; transform:scale(1)} 50%{opacity:0.6; transform:scale(0.96)} }
.timer-ctrl-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:6px 18px; border-radius:20px; font-family:'AA Galaxy','Tajawal',sans-serif;
  font-size:0.75rem; font-weight:700; cursor:pointer; border:0; transition:all 0.25s var(--ease);
}
.timer-ctrl-btn .icon { width:0.85em; height:0.85em }
.timer-ctrl-btn.play { background:var(--cta); color:#fff; border-bottom:3px solid var(--cta-dark) }
.timer-ctrl-btn.play:hover { filter:brightness(1.05) }
.timer-ctrl-btn.pause { background:var(--danger); color:#fff; border-bottom:3px solid var(--danger-dark) }
.timer-ctrl-btn.pause:hover { filter:brightness(1.05) }
.timer-ctrl-btn:active { transform:translateY(2px); border-bottom-width:1px }

/* =========================================================================
   SCOREBOARD  (flat editorial cards)
   ========================================================================= */
.scoreboard { display:flex; justify-content:center; align-items:center; gap:20px; padding:20px 22px 8px; max-width:1040px; margin:0 auto; width:100% }
.team-card {
  flex:1; max-width:340px; padding:16px 24px; text-align:center; position:relative;
  transition:all 0.35s var(--ease); border-radius:var(--r-xl);
  background:var(--bg-card2);
  border:2px solid var(--border-light);
}
.team-card .team-name { color:var(--text-mid) }
.team-card .team-pts { color:var(--text-soft) }
.team-card.playing {
  background:var(--accent); border-color:var(--gold);
  box-shadow:0 12px 26px var(--accent-glow), inset 0 0 0 4px color-mix(in srgb, var(--gold) 35%, transparent);
}
.team-card.playing .team-name { color:color-mix(in srgb, var(--gold) 70%, #fff) }
.team-card.playing .team-pts { color:var(--gold) }
.team-card.playing::before {
  content:'دورهم الآن'; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  white-space:nowrap; background:var(--gold); color:var(--accent);
  font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:800; font-size:0.72rem;
  padding:3px 16px; border-radius:20px;
}
.team-name { font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:700; font-size:1.15rem; margin-bottom:2px; transition:color 0.35s }
.team-pts { font-family:'AA Galaxy','Lalezar',cursive; font-size:3rem; line-height:1; transition:color 0.35s }
.round-pts { font-size:0.75rem; color:var(--text-soft); margin-top:3px }
.round-pts span { color:var(--gold-dark); font-weight:700 }

/* =========================================================================
   QUESTION  (flat, hairline underline)
   ========================================================================= */
.question-bar {
  margin:18px auto 0; max-width:1000px; width:calc(100% - 44px);
  padding:20px 24px; border-radius:0;
  position:relative; text-align:center;
  background:transparent;
  border-bottom:1px solid var(--border-light);
}
.q-text { font-family:'AA Galaxy','Tajawal',sans-serif; font-size:clamp(1.4rem,3.6vw,2rem); font-weight:800; color:var(--text); position:relative; z-index:1 }
.q-badge {
  display:inline-block; margin-top:10px; font-size:0.72rem; font-weight:800; letter-spacing:2px;
  color:var(--gold-dark); background:transparent; padding:2px 0; border:0;
}

/* =========================================================================
   BOARD (flip cards — flat)
   ========================================================================= */
.board {
  display:grid; grid-template-columns:1fr 1fr;
  gap:12px; padding:22px; flex:1; max-width:1000px; margin:0 auto; width:100%;
}
.flip-card { height:var(--slot-h); perspective:900px; cursor:pointer }
.flip-card.revealed { cursor:default }
.flip-inner {
  position:relative; width:100%; height:100%;
  transition:transform 0.6s cubic-bezier(0.4,0.2,0.2,1);
  transform-style:preserve-3d;
}
.flip-card.revealed .flip-inner { transform:rotateX(180deg) }
.flip-front, .flip-back {
  position:absolute; inset:0; display:flex; align-items:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:15px; overflow:hidden;
}
/* Front (hidden) */
.flip-front {
  background:var(--bg-card2);
  border:1.5px solid var(--border-light);
  transition:border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.flip-card:not(.revealed):hover .flip-front {
  box-shadow:var(--shadow-lg); border-color:var(--gold); transform:translateY(-2px);
}
.flip-card:not(.revealed):active .flip-front { transform:translateY(0) scale(0.99) }
.flip-front .num {
  width:52px; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'AA Galaxy','Lalezar',cursive; font-size:1.5rem; color:var(--text-soft);
  background:transparent; flex-shrink:0;
  border-left:1.5px solid var(--border-light); transition:all 0.3s;
}
.flip-card:not(.revealed):hover .flip-front .num { color:var(--gold-dark) }
.flip-front .txt { flex:1; padding:0 16px; font-size:1.2rem; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center }
.flip-front .dots { color:var(--text-soft); letter-spacing:6px; font-size:1.3rem; opacity:0.5 }
/* Back (revealed) — deep green with gold */
.flip-back {
  transform:rotateX(180deg);
  background:var(--accent);
  border:1.5px solid var(--gold);
}
.flip-back .num {
  width:52px; height:100%; display:flex; align-items:center; justify-content:center;
  font-family:'AA Galaxy','Lalezar',cursive; font-size:1.5rem; color:var(--accent);
  background:var(--gold); flex-shrink:0;
}
.flip-back .txt { flex:1; padding:0 16px; font-size:1.2rem; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff }
.flip-back .pts {
  min-width:68px; height:100%; display:flex; align-items:center; justify-content:center; padding:0 6px;
  font-family:'AA Galaxy','Lalezar',cursive; font-size:1.3rem; color:var(--gold);
  background:transparent; flex-shrink:0;
  border-right:1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
}
/* midnight's --accent is a pale near-white tone (meant for buttons/highlights), which
   turns the revealed-answer bar white and clashes with its white text. Swap it for gold
   there specifically, and move the number badge to a dark chip so it still stands out. */
[data-theme="midnight"] .flip-back { background:var(--gold); border-color:var(--gold-dark) }
[data-theme="midnight"] .flip-back .num { background:var(--bg); color:var(--gold) }
[data-theme="midnight"] .flip-back .pts { color:var(--bg); border-right-color:color-mix(in srgb, var(--bg) 45%, transparent) }
/* Same near-white --accent shows up as a background on the two surfaces below.
   Gold reads as "your turn" far better than a white slab, and ties them to the
   revealed bars above. Text flips dark so it stays legible on gold. */
[data-theme="midnight"] .team-card.playing {
  background:var(--gold); border-color:var(--gold-dark);
  box-shadow:0 12px 26px var(--gold-glow), inset 0 0 0 4px color-mix(in srgb, var(--bg) 22%, transparent);
}
[data-theme="midnight"] .team-card.playing .team-name { color:color-mix(in srgb, var(--bg) 72%, transparent) }
[data-theme="midnight"] .team-card.playing .team-pts { color:var(--bg) }
[data-theme="midnight"] .team-card.playing::before { background:var(--bg); color:var(--gold) }
[data-theme="midnight"] .ctrl-next { background:var(--gold); border-bottom-color:var(--gold-dark) }

/* ===== STRIKES ===== */
.strikes-display { display:flex; justify-content:center; gap:14px; padding:10px 0 }
.strike-x { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border:2.5px solid var(--border-light); border-radius:50%; font-size:1.7rem; font-weight:900; color:transparent; background:transparent; transition:all 0.3s; opacity:0.45 }
.strike-x.hit { border-color:var(--danger); color:#fff; background:var(--danger); opacity:1; animation:xhit 0.5s cubic-bezier(0.34,1.56,0.64,1) }
@keyframes xhit { 0%{transform:scale(0) rotate(-25deg)} 60%{transform:scale(1.35) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }

/* =========================================================================
   CONTROLS
   ========================================================================= */
.controls-bar { padding:14px 22px 22px; display:flex; flex-direction:column; gap:10px; max-width:1000px; margin:0 auto; width:100% }
.controls-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
.ctrl-btn {
  padding:13px 26px; border:0; border-radius:13px;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1rem; font-weight:800;
  cursor:pointer; transition:all 0.25s var(--ease); display:flex; align-items:center; gap:6px;
  background:var(--bg-card2); color:var(--text-mid);
  border:2px solid var(--border-light);
}
.ctrl-btn:hover { transform:translateY(-2px) }
.ctrl-btn:active { transform:translateY(1px) }
.ctrl-team { background:var(--bg-card2); color:var(--text-mid); border:2px solid var(--border-light) }
.ctrl-team.active-team {
  background:var(--cta); color:#fff; border-color:transparent;
  border-bottom:4px solid var(--cta-dark);
}
.ctrl-strike { background:var(--danger); color:#fff; border-color:transparent; border-bottom:4px solid var(--danger-dark) }
.ctrl-award { background:var(--accent); color:var(--on-accent); border-color:transparent; border-bottom:4px solid color-mix(in srgb, var(--accent) 60%, #000) }
/* --on-accent, not #fff: every dark theme's --accent is a light tint, so white
   label on it sat between 1.2:1 and 2.7:1. .ctrl-award beside it already got this right. */
.ctrl-next { background:var(--accent); color:var(--on-accent); border-color:transparent; border-bottom:4px solid color-mix(in srgb, var(--accent) 55%, #000) }
.ctrl-reset { background:var(--bg-card2); color:var(--text-soft); border:2px solid var(--border-light) }

/* ===== OVERLAYS ===== */
.overlay-x { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; pointer-events:none; background:rgba(0,0,0,0.15) }
.overlay-x.show { display:flex }
.overlay-x .big { font-size:min(50vw,280px); font-weight:900; color:var(--danger); line-height:1; text-shadow:0 0 60px var(--danger-glow); animation:popX 0.9s cubic-bezier(0.34,1.56,0.64,1) forwards }

/* ===== BUZZER / ROOMS ===== */
.buzzer-room-card {
  background:var(--bg-card); border:1.5px solid var(--border-light);
  border-radius:var(--r-lg); padding:20px; text-align:center; margin-bottom:16px;
}
.buzzer-code { font-family:'AA Galaxy','Lalezar',cursive; font-size:2.4rem; letter-spacing:8px; color:var(--gold-dark); direction:ltr; margin-bottom:8px }
.buzzer-hint { font-size:0.85rem; color:var(--text-soft); margin-bottom:14px; line-height:1.6 }
.buzzer-hint span { font-weight:800; color:var(--text); direction:ltr; display:inline-block; word-break:break-all }
.buzzer-slots { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.buzzer-slot {
  display:flex; flex-direction:column; gap:4px; align-items:center;
  background:var(--bg-card2); border:2px solid var(--border-light); border-radius:12px;
  padding:10px 20px; min-width:150px;
}
.buzzer-slot .bs-label { font-weight:800; color:var(--text-mid); font-size:0.85rem }
.buzzer-slot .bs-status { color:var(--text-soft); font-size:0.9rem }
.buzzer-slot.joined { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-card2)) }
.buzzer-slot.joined .bs-status { color:var(--accent); font-weight:800 }

.overlay-buzz { display:none; justify-content:center; padding:14px 20px 0; width:100% }
.overlay-buzz.show { display:flex }
.buzz-banner {
  display:flex; align-items:center; gap:10px; max-width:90%; min-width:0;
  background:var(--gold); color:var(--accent); font-family:'AA Galaxy','Lalezar',cursive;
  font-size:clamp(1rem,3vw,1.5rem); font-weight:900; padding:12px 30px; border-radius:20px;
  box-shadow:0 8px 24px rgba(0,0,0,0.18); animation:buzzBannerIn 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
.buzz-banner span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.buzz-banner .icon { width:1.1em; height:1.1em; flex-shrink:0 }
@keyframes buzzBannerIn { from{opacity:0; transform:translateY(-14px) scale(0.9)} }
@keyframes popX { 0%{transform:scale(0) rotate(-30deg);opacity:0} 45%{transform:scale(1.15) rotate(5deg);opacity:1} 75%{opacity:1} 100%{opacity:0} }
.overlay-check { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; pointer-events:none }
.overlay-check.show { display:flex }
.overlay-check .big { font-size:min(40vw,220px); color:var(--accent); text-shadow:0 0 60px var(--accent-glow); animation:popCheck 0.75s cubic-bezier(0.34,1.56,0.64,1) forwards }
@keyframes popCheck { 0%{transform:scale(0);opacity:0} 50%{transform:scale(1.2);opacity:1} 80%{opacity:1} 100%{opacity:0} }

/* =========================================================================
   MODAL
   ========================================================================= */
.modal-bg { position:fixed; inset:0; z-index:100; background:rgba(30,25,10,0.5); backdrop-filter:blur(6px); display:none; align-items:center; justify-content:center }
.modal-bg.show { display:flex }
.modal-card {
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  border-top:5px solid var(--gold);
  border-radius:22px; padding:38px 44px; text-align:center;
  max-width:460px; width:90%;
  box-shadow:var(--shadow-lg);
  animation:modalIn 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes modalIn { from{transform:scale(0.6);opacity:0} }
.modal-card h2 { font-family:'AA Galaxy','Lalezar',cursive; font-size:2rem; color:var(--accent); margin-bottom:6px }
.modal-card .m-pts { font-family:'AA Galaxy','Lalezar',cursive; font-size:3.2rem; color:var(--gold-dark); margin:6px 0 }
.modal-card p { color:var(--text-soft); margin-bottom:18px; font-size:1rem }
.modal-card > button {
  padding:14px 36px; border:0; border-bottom:4px solid var(--cta-dark);
  border-radius:12px; background:var(--cta); color:#fff;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1.05rem; font-weight:800;
  cursor:pointer; transition:all 0.25s var(--ease);
}
.modal-card > button:hover { filter:brightness(1.05) }
.modal-card > button:active { transform:translateY(2px); border-bottom-width:2px }

/* =========================================================================
   NAVBAR  (clean solid pill)
   ========================================================================= */
.navbar {
  position:sticky; top:14px; z-index:40; margin:14px 16px 0;
  border-radius:var(--r-xl);
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  box-shadow:0 8px 22px rgba(50,40,20,0.07);
}
.nav-inner {
  display:flex; align-items:center; gap:var(--sp-4);
  max-width:1040px; margin:0 auto; padding:11px var(--sp-5);
}
.nav-logo {
  font-family:'AA Galaxy','Lalezar',cursive; font-size:1.7rem;
  color:var(--accent); flex-shrink:0; margin-left:auto;
}
.nav-links { display:flex; gap:var(--sp-1); align-items:center }
.nav-link {
  text-decoration:none; color:var(--text-mid); font-size:0.88rem; font-weight:700;
  padding:7px 14px; border-radius:var(--r-sm); transition:all 0.2s var(--ease);
  font-family:'AA Galaxy','Tajawal',sans-serif;
}
.nav-link:hover { color:var(--accent) }
.nav-link.current { color:var(--accent); background:var(--accent-glow) }
.nav-play {
  padding:9px 24px; border:0; border-bottom:3px solid var(--cta-dark); border-radius:var(--r-md);
  background:var(--cta); color:#fff;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:0.88rem; font-weight:800;
  cursor:pointer; transition:all 0.25s var(--ease);
  margin-right:auto;
}
.nav-play:hover { filter:brightness(1.05); transform:translateY(-1px) }
.nav-play:active { transform:translateY(2px); border-bottom-width:1px }
.nav-accent-line { display:none }
.nav-burger {
  display:none; background:none; border:1.5px solid var(--border-light);
  border-radius:8px; padding:4px 10px; font-size:1.3rem; color:var(--text);
  cursor:pointer;
}
.nav-mobile {
  position:fixed; top:70px; left:16px; right:16px; z-index:39;
  border-radius:var(--r-lg);
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; padding:8px 16px 12px;
}
.nav-mobile.hidden { display:none }
.nav-link-m {
  text-decoration:none; color:var(--text-mid); font-size:0.95rem; font-weight:700;
  padding:10px 12px; border-radius:8px; transition:all 0.2s;
  font-family:'AA Galaxy','Tajawal',sans-serif;
}
.nav-link-m:hover { color:var(--accent); background:var(--accent-glow) }

@media(max-width:700px) {
  .nav-links, .nav-play { display:none }
  .nav-burger { display:block }
}
@media(min-width:701px) {
  .nav-mobile { display:none !important }
}

/* =========================================================================
   LANDING
   ========================================================================= */
.landing-scroll { max-width:1080px; margin:0 auto; overflow-y:auto; scroll-behavior:smooth }

/* Hero — editorial + medallion */
.hero-section {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; min-height:86vh; padding:var(--sp-7) var(--sp-4) var(--sp-8);
  text-align:center; position:relative; gap:0;
}
.hero-glow, .hero-glow2 { display:none }
.hero-medallion {
  width:150px; height:150px; margin-bottom:var(--sp-5);
}
.hero-medallion .medallion-ring { width:104px; height:104px }
.hero-medallion .icon { width:52px; height:52px; color:var(--gold); stroke-width:2.4 }
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:0;
  color:var(--gold-dark); font-size:0.78rem; font-weight:800; letter-spacing:3px;
  padding:0; margin-bottom:var(--sp-4); text-transform:uppercase;
  position:relative; z-index:1;
}
.eyebrow-dot { width:7px; height:7px; border-radius:50%; background:var(--gold); flex-shrink:0 }
.setup-logo { font-family:'AA Galaxy','Lalezar',cursive; font-size:clamp(4rem,13vw,8rem); color:var(--accent); line-height:0.92; letter-spacing:1px }
.hero-divider {
  width:80px; height:4px; margin:var(--sp-5) 0; border-radius:3px;
  background:var(--gold); position:relative; z-index:1;
}
.hero-tagline {
  color:var(--text-mid); font-size:1.15rem; margin:0 0 var(--sp-6);
  max-width:460px; line-height:1.85; position:relative; z-index:1;
}
.hero-tagline .hl { color:var(--accent); font-weight:800 }
.hero-cta { margin-bottom:0; position:relative; z-index:1 }
.hero-scroll-hint {
  margin-top:var(--sp-7); font-size:1.8rem; color:var(--text-soft); opacity:0.4;
  animation:scrollBounce 2s ease infinite;
}
@keyframes scrollBounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(8px)} }

/* Landing sections */
.land-section { padding:var(--sp-8) var(--sp-5); max-width:940px; margin:0 auto; position:relative }
.land-title {
  font-family:'AA Galaxy','Lalezar',cursive; font-size:clamp(1.8rem,4vw,2.4rem);
  color:var(--accent); text-align:center; margin-bottom:var(--sp-2);
  letter-spacing:0.5px;
}
.land-title .icon { color:var(--gold) }
.land-section > .land-title { margin-bottom:var(--sp-7) }
/* eyebrow line above titles */
#features .land-title::before, #howto .land-title::before {
  content:''; display:block; width:70px; height:2px; background:var(--gold);
  margin:0 auto var(--sp-4);
}

/* Features — editorial numbered columns (no card boxes) */
.features-grid {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:0; max-width:940px; margin:0 auto;
  counter-reset:feat;
  border-top:2px solid var(--gold);
}
.feature-card {
  counter-increment:feat;
  background:transparent; border:0; border-radius:0;
  padding:var(--sp-6) var(--sp-4); text-align:right;
  display:flex; flex-direction:column; align-items:flex-start;
  position:relative;
  opacity:0; transform:translateY(24px);
  transition:opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1);
}
.feature-card + .feature-card { border-right:1px solid var(--border-light) }
.feature-card.in-view { opacity:1; transform:translateY(0) }
.features-grid .feature-card:nth-child(1) { transition-delay:0s }
.features-grid .feature-card:nth-child(2) { transition-delay:.08s }
.features-grid .feature-card:nth-child(3) { transition-delay:.16s }
.features-grid .feature-card:nth-child(4) { transition-delay:.24s }
.feature-card::after {
  content:counter(feat, decimal-leading-zero);
  font-family:'AA Galaxy','Lalezar',cursive; font-size:2.8rem; color:var(--gold);
  line-height:1; margin-bottom:var(--sp-3); order:-2;
}
.fc-icon { display:none }
.fc-title { font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:800; font-size:1.15rem; color:var(--text); margin-bottom:var(--sp-2); order:-1 }
.fc-desc { font-size:0.9rem; color:var(--text-soft); line-height:1.7 }

/* Steps — deep green band */
.steps-section-wrap {}
.steps-list {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6) var(--sp-6);
}
.step-item {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  padding:var(--sp-4) 0 0; border-radius:0;
  background:transparent; border:0; border-top:1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  opacity:0; transform:translateY(18px);
  transition:opacity 0.55s cubic-bezier(.16,.84,.44,1), transform 0.55s cubic-bezier(.16,.84,.44,1);
}
.step-item.in-view { opacity:1; transform:translateY(0) }
.steps-list .step-item:nth-child(1) { transition-delay:0s }
.steps-list .step-item:nth-child(2) { transition-delay:.06s }
.steps-list .step-item:nth-child(3) { transition-delay:.12s }
.steps-list .step-item:nth-child(4) { transition-delay:.18s }
.steps-list .step-item:nth-child(5) { transition-delay:.24s }
.steps-list .step-item:nth-child(6) { transition-delay:.3s }
.step-num {
  width:auto; height:auto; border-radius:0; flex-shrink:0;
  background:transparent; color:var(--gold);
  display:block; border:0;
  font-family:'AA Galaxy','Lalezar',cursive; font-size:2.2rem; line-height:1;
}
.step-text { font-size:0.92rem; color:var(--text); line-height:1.65 }
.step-text strong { display:block; color:var(--accent); font-size:1.15rem; margin-bottom:2px; font-family:'AA Galaxy','Tajawal',sans-serif }

/* Settings section — flat panel */
.settings-section {
  background:var(--bg-card);
  border:1.5px solid var(--border-light);
  border-radius:var(--r-xl); margin:0 var(--sp-4) var(--sp-6); padding:var(--sp-8) var(--sp-7);
  box-shadow:var(--shadow);
  opacity:0; transform:translateY(20px);
  transition:opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1);
}
.settings-section.in-view { opacity:1; transform:translateY(0) }
.settings-section .land-title::before {
  content:''; display:block; width:70px; height:2px; background:var(--gold); margin:0 auto var(--sp-4);
}

/* Footer */
.land-footer {
  text-align:center; padding:var(--sp-6) var(--sp-5); background:var(--header-bg);
  border-radius:var(--r-xl); margin:0 var(--sp-4) var(--sp-5);
}
.footer-text { font-size:1rem; color:var(--gold); font-family:'AA Galaxy','Lalezar',cursive }

/* =========================================================================
   SETUP
   ========================================================================= */
.setup-logo.setup { }
.setup-sub { font-size:1.1rem; color:var(--gold-dark); letter-spacing:7px; margin-bottom:6px }
.setup-desc { color:var(--text-soft); font-size:0.9rem; margin-bottom:28px; max-width:400px; text-align:center; line-height:1.8 }
.setup-inputs { display:flex; gap:14px; margin-bottom:18px; width:100% }
.setup-inputs input { flex:1; padding:13px 16px; background:var(--bg-card2); border:2px solid var(--border-light); border-radius:12px; color:var(--text); font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1rem; text-align:center; outline:none; direction:rtl; transition:all 0.25s }
.setup-inputs input:focus { border-color:var(--gold) }
.setup-inputs input::placeholder { color:var(--text-soft) }

.setup-option { width:100%; margin-bottom:18px }
.setup-option label { display:block; font-size:0.88rem; font-weight:800; color:var(--text-mid); margin-bottom:8px }
.option-btns { display:flex; gap:8px }
.opt-btn {
  flex:1; padding:11px 8px;
  border:2px solid var(--border-light); border-radius:11px;
  background:var(--bg-card2); color:var(--text-mid);
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:0.88rem; font-weight:700;
  cursor:pointer; transition:all 0.25s var(--ease); text-align:center;
}
.opt-btn:hover { border-color:var(--gold); color:var(--text) }
.opt-btn.active {
  background:var(--accent); color:var(--on-accent); border-color:var(--accent);
}
.opt-btn.active:hover { color:var(--on-accent) }

.theme-picker { display:flex; gap:10px; flex-wrap:wrap }
.theme-dot {
  width:44px; height:44px; border-radius:12px;
  border:2px solid var(--border-light); cursor:pointer; padding:5px;
  transition:all 0.25s var(--ease); background:var(--bg-card2);
  display:flex; align-items:center; justify-content:center;
}
.theme-dot span { width:100%; height:100%; border-radius:7px; display:block }
.theme-dot:hover { border-color:var(--gold); transform:translateY(-2px) }
.theme-dot.active { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-glow); transform:scale(1.06) }

.setup-actions { display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; justify-content:center }
.setup-go {
  padding:16px 52px; border:0; border-bottom:5px solid var(--cta-dark); border-radius:14px;
  background:var(--cta); color:#fff;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1.2rem; font-weight:900;
  cursor:pointer; transition:all 0.25s var(--ease);
  box-shadow:0 8px 20px rgba(240,168,48,0.3);
  display:inline-flex; align-items:center; gap:10px;
}
.play-icon { width:28px; height:28px; flex-shrink:0 }
.setup-go:hover { transform:translateY(-2px); filter:brightness(1.04) }
.setup-go:active { transform:translateY(2px); border-bottom-width:2px }
.setup-editor-btn {
  padding:16px 30px; border:2px solid var(--border-light); border-radius:14px;
  background:var(--bg-card2); color:var(--text-mid);
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1rem; font-weight:800;
  cursor:pointer; transition:all 0.25s var(--ease);
}
.setup-editor-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-2px) }
.setup-editor-btn:active { transform:translateY(1px) }

/* =========================================================================
   EDITOR
   ========================================================================= */
.editor { max-width:640px; margin:0 auto; padding:36px 20px; min-height:100vh }
.editor-header { text-align:center; margin-bottom:22px }
.editor-header h2 { font-family:'AA Galaxy','Lalezar',cursive; font-size:2.2rem; color:var(--accent) }
.editor-header h2 .icon { color:var(--gold) }
.editor-header p { color:var(--text-soft); font-size:0.95rem }
.editor-count { text-align:center; font-size:0.85rem; color:var(--text-soft); margin-bottom:16px; background:transparent; padding:8px; border-top:1px solid var(--border-light); border-bottom:1px solid var(--border-light) }
.editor-count span { color:var(--gold-dark); font-weight:700; font-size:1.2rem; font-family:'AA Galaxy','Lalezar',cursive }
.editor-search-wrap { position:relative; margin-bottom:14px }
.editor-search { width:100%; padding:12px 42px 12px 16px; border-radius:12px; border:2px solid var(--border-light); background:var(--bg-card2); color:var(--text); font-size:0.9rem; font-family:inherit }
.editor-search:focus { outline:none; border-color:var(--gold) }
.editor-search-clear { position:absolute; left:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-soft); font-size:1rem; cursor:pointer; padding:4px 8px }
.editor-search-clear:hover { color:var(--accent) }
.editor-empty { text-align:center; color:var(--text-soft); font-size:0.9rem; padding:20px; background:var(--bg-card2); border-radius:12px; margin-bottom:20px }

.editor-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; max-height:40vh; overflow-y:auto; padding-left:4px }
.eq-item { display:flex; align-items:center; gap:10px; padding:12px 14px; background:var(--bg-card); border:1.5px solid var(--border-light); border-radius:12px }
.eq-item .eq-id {
  min-width:40px; height:28px; border-radius:8px; padding:0 6px;
  background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; font-weight:800; flex-shrink:0;
  font-family:'AA Galaxy','Tajawal',monospace;
}
.eq-item .eq-text { flex:1; font-size:0.92rem; font-weight:600; color:var(--text) }
.eq-item .eq-count { font-size:0.75rem; color:var(--text-soft) }
.eq-item .eq-edit {
  background:transparent; color:var(--accent);
  border:2px solid var(--border-light);
  border-radius:10px; padding:6px 12px; cursor:pointer; font-size:0.85rem;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:700; transition:all 0.2s;
}
.eq-item .eq-edit:hover { border-color:var(--accent) }
.eq-item .eq-del {
  background:transparent; color:var(--danger);
  border:2px solid color-mix(in srgb, var(--danger) 40%, var(--border-light));
  border-radius:10px; padding:6px 12px; cursor:pointer; font-size:0.8rem;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:700; transition:all 0.2s;
}
.eq-item .eq-del:hover { border-color:var(--danger); background:var(--danger-bg) }

.editor-add { background:var(--bg-card); border:1.5px solid var(--border-light); border-top:4px solid var(--gold); border-radius:16px; padding:20px }
.ea-title { font-weight:800; font-size:1rem; color:var(--accent); margin-bottom:12px }
.ea-input { width:100%; padding:12px 14px; background:var(--bg-card2); border:2px solid var(--border-light); border-radius:10px; color:var(--text); font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1rem; outline:none; direction:rtl; margin-bottom:10px }
.ea-input:focus { border-color:var(--gold) }
.ea-answers { display:flex; flex-direction:column; gap:6px }
.ea-row { display:flex; gap:6px }
.ea-row input { padding:9px 10px; background:var(--bg-card2); border:2px solid var(--border-light); border-radius:8px; color:var(--text); font-family:'AA Galaxy','Tajawal',sans-serif; font-size:0.88rem; outline:none; direction:rtl }
.ea-row input:focus { border-color:var(--gold) }
.ea-ans { flex:1 }
.ea-pts { width:70px; text-align:center }
.editor-footer { text-align:center; margin-top:20px; padding-bottom:30px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }

/* =========================================================================
   GAME OVER + STATS
   ========================================================================= */
.gameover { display:none; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:30px 20px }
.gameover.show { display:flex }
.go-trophy {
  width:120px; height:120px; border-radius:50%; background:var(--accent);
  display:flex; align-items:center; justify-content:center; font-size:3.4rem; color:var(--gold);
  box-shadow:0 0 0 2px var(--gold), 0 0 0 9px var(--accent), 0 0 0 11px var(--gold);
  animation:bob 1.6s ease infinite;
}
.go-trophy .icon { width:1em; height:1em }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.go-label { font-size:0.85rem; letter-spacing:4px; text-transform:uppercase; color:var(--gold-dark); font-weight:800; margin-top:22px }
.go-name { font-family:'AA Galaxy','Lalezar',cursive; font-size:3.4rem; color:var(--accent); margin:6px 0 }
.go-score { font-size:1.3rem; color:var(--text-mid); margin-bottom:22px }

.stats-card { width:100%; max-width:440px; background:var(--bg-card); border:1.5px solid var(--border-light); border-radius:18px; padding:22px; box-shadow:var(--shadow) }
.stats-title { font-family:'AA Galaxy','Lalezar',cursive; font-size:1.3rem; color:var(--accent); text-align:center; margin-bottom:16px }
.stats-title .icon { color:var(--gold) }
.stats-grid { display:flex; flex-direction:column; gap:8px }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:var(--bg-card2); border-radius:10px }
.stat-label { font-size:0.85rem; color:var(--text-soft); font-weight:600 }
.stat-value { font-size:1rem; color:var(--gold-dark); font-weight:700; font-family:'AA Galaxy','Tajawal',sans-serif }

.hidden { display:none !important }

/* =========================================================================
   HISTORY
   ========================================================================= */
.history-card { max-width:500px; text-align:center }
.history-list { max-height:45vh; overflow-y:auto; margin:16px 0; display:flex; flex-direction:column; gap:8px; padding:4px }
.history-empty { color:var(--text-soft); font-size:0.9rem; padding:30px 0 }
.history-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:var(--bg-card2);
  border:1.5px solid var(--border-light);
  text-align:right; direction:rtl;
}
.history-rank {
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; flex-shrink:0; font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:800;
}
.history-rank.gold { background:var(--gold); color:var(--accent) }
.history-rank.silver { background:#94a3b8; color:#fff }
.history-rank.bronze { background:#b45309; color:#fff }
.history-rank.normal { background:var(--bg-card); color:var(--text-soft); font-size:0.8rem }
.history-info { flex:1 }
.history-winner { font-weight:800; font-size:0.95rem; color:var(--text); display:flex; align-items:center; gap:6px }
.history-detail { font-size:0.75rem; color:var(--text-soft); margin-top:2px }
.history-score { font-family:'AA Galaxy','Lalezar',cursive; font-size:1.2rem; color:var(--gold-dark); flex-shrink:0 }
.history-footer { display:flex; gap:8px; justify-content:center }
.history-footer button {
  padding:11px 24px; border:2px solid var(--border-light); border-radius:12px;
  background:var(--bg-card2); color:var(--text-mid);
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:0.9rem; font-weight:700;
  cursor:pointer; transition:all 0.25s var(--ease);
}
.history-footer button:last-child { background:var(--cta); color:#fff; border-color:transparent; border-bottom:4px solid var(--cta-dark) }
.history-footer button:hover { transform:translateY(-2px) }
.history-footer button:active { transform:translateY(1px) }

/* ===== GOOGLE SIGN-IN ===== */
.auth-or { display:flex; align-items:center; gap:10px; margin:14px 0 12px; color:var(--text-soft); font-size:0.78rem }
.auth-or::before, .auth-or::after { content:''; flex:1; height:1px; background:var(--border-light) }
/* Google's brand guidelines want the mark on a neutral surface, so this button
   deliberately sits outside the theme palette instead of using --accent. */
.auth-btn-google {
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:#fff !important; color:#3c4043 !important;
  border:2px solid #dadce0 !important; border-bottom:2px solid #dadce0 !important;
}
.auth-btn-google:hover { background:#f7f8f8 !important }
.auth-btn-google svg { flex:none }

/* ===== ACCOUNT RECOVERY ===== */
.recovery-note { color:var(--text-mid); font-size:0.88rem; line-height:1.6; margin-bottom:14px }
.recovery-note strong { color:var(--gold) }
.recovery-note-sm { font-size:0.76rem; margin:14px 0 0; color:var(--text-soft) }
/* user-select is disabled globally on body; re-enable it here or the code can't be copied by hand */
.recovery-code {
  font-family:'AA Galaxy','Lalezar',monospace; font-size:1.9rem; letter-spacing:0.06em;
  color:var(--gold); background:var(--bg); border:2px dashed var(--gold-dark);
  border-radius:var(--r-md); padding:14px 10px; margin-bottom:16px;
  user-select:all; -webkit-user-select:all; word-break:break-all;
}
.recovery-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap }
.recovery-actions .ctrl-btn { flex:1; min-width:120px; justify-content:center }
#forgotModal .auth-field { text-align:right; margin-bottom:12px }

/* =========================================================================
   SOLO MODE
   ========================================================================= */
.solo-only { display:none }
.solo-mode .solo-only { display:flex !important }
.solo-mode .group-only { display:none !important }
.solo-score-bar { display:flex; align-items:center; justify-content:center; gap:12px; padding:20px; max-width:1040px; margin:0 auto }
.solo-name { font-family:'AA Galaxy','Tajawal',sans-serif; font-weight:800; font-size:1.2rem; color:var(--accent) }
.solo-pts { font-family:'AA Galaxy','Lalezar',cursive; font-size:3rem; line-height:1; color:var(--gold-dark) }
.solo-label { font-size:0.8rem; color:var(--text-soft) }
.solo-input-area { display:flex; gap:10px; padding:8px 22px; align-items:center; max-width:1000px; margin:0 auto; width:100% }
.solo-input-area input {
  flex:1; padding:13px 18px;
  background:var(--bg-card2);
  border:2px solid var(--border-light);
  border-radius:13px; color:var(--text);
  font-family:'AA Galaxy','Tajawal',sans-serif;
  font-size:1rem; font-weight:600;
  outline:none; direction:rtl; transition:all 0.25s;
}
.solo-input-area input:focus { border-color:var(--gold) }
.solo-input-area input::placeholder { color:var(--text-soft) }
.solo-mode .flip-card { pointer-events:none }
.solo-mode .flip-card:not(.revealed):hover .flip-front { transform:none; box-shadow:none; border-color:var(--border-light) }

/* ===== CONFIRM MODAL ===== */
.confirm-card { max-width:390px; text-align:center; border-top-color:var(--danger) }
.confirm-icon { font-size:2.6rem; margin-bottom:8px; color:var(--danger) }
.confirm-card h2 { margin-bottom:8px }
.confirm-card p { margin-bottom:20px; line-height:1.6 }
.confirm-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap }
.confirm-btns .ctrl-btn { min-width:120px; justify-content:center; font-size:1rem; padding:12px 24px }

/* ===== ANIMATED SETTINGS BUTTON ===== */
.setting-btn {
  width: 40px; height: 40px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  background: color-mix(in srgb, #fff 12%, transparent);
  border-radius: 11px; cursor: pointer; border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: all 0.25s var(--ease);
}
.setting-btn:hover { background:var(--gold) }
.setting-btn .bar {
  width: 50%; height: 2px; background: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  position: relative; border-radius: 2px;
}
.setting-btn .bar::before {
  content: ""; width: 3px; height: 3px;
  background: var(--gold); position: absolute;
  border-radius: 50%; transition: all 0.3s;
}
.setting-btn:hover .bar { background:var(--accent) }
.setting-btn:hover .bar::before { background:var(--accent) }
.setting-btn .bar1::before { transform: translateX(-4px) }
.setting-btn .bar2::before { transform: translateX(4px) }
.setting-btn:hover .bar1::before { transform: translateX(4px) }
.setting-btn:hover .bar2::before { transform: translateX(-4px) }

/* ===== POWER-UP TOOLS ===== */
.tools-bar { display:flex; justify-content:center; gap:10px; padding:10px 22px; flex-wrap:wrap; max-width:1000px; margin:0 auto; width:100% }
.tool-btn {
  background:var(--bg-card2) !important;
  border:1.5px solid var(--border-light) !important;
  border-radius:11px !important;
  color:var(--text-mid) !important; font-size:0.82rem !important;
  position:relative; padding:9px 16px !important;
  transition:all 0.25s var(--ease) !important;
}
.tool-btn:hover { border-color:var(--gold) !important; transform:translateY(-2px) }
.tool-btn:active { transform:translateY(1px) !important }
.tool-cost {
  display:inline-block; font-size:0.68rem; font-weight:800;
  background:var(--danger-bg); color:var(--danger);
  padding:1px 6px; border-radius:6px; margin-right:2px;
}
.tool-btn.used { opacity:0.35; pointer-events:none }
.shield-active { animation:shieldPulse 1s ease infinite }
@keyframes shieldPulse { 0%,100%{box-shadow:0 0 0 0 var(--accent-glow)} 50%{box-shadow:0 0 12px 4px var(--accent-glow)} }

/* =========================================================================
   CINEMATIC INTRO
   ========================================================================= */
.intro {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; padding:20px; position:relative; overflow:hidden; cursor:pointer;
  transition:opacity 0.45s ease, transform 0.5s cubic-bezier(.4,0,.2,1), filter 0.5s ease;
}
.intro.leaving { opacity:0; transform:scale(1.06); filter:blur(6px); pointer-events:none }
.intro-glow {
  position:absolute; width:300px; height:300px; border-radius:50%;
  background:radial-gradient(circle, var(--gold-glow), transparent 70%);
  animation:introGlow 3.5s ease-in-out infinite alternate; pointer-events:none;
}
@keyframes introGlow { 0% { transform:scale(0.85); opacity:0.24 } 100% { transform:scale(1.35); opacity:0.5 } }
.intro-logo { text-align:center; position:relative }
.intro-line { width:0; height:3px; border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:0 auto }
.line1 { animation:lineGrow 0.9s 0.2s cubic-bezier(.16,.84,.44,1) forwards }
.line2 { animation:lineGrow 0.9s 0.55s cubic-bezier(.16,.84,.44,1) forwards }
@keyframes lineGrow { to { width:280px } }
.intro-title {
  font-family:'AA Galaxy','Lalezar',cursive;
  font-size:clamp(4rem,14vw,9rem); color:var(--accent);
  opacity:0; filter:blur(14px); transform:scale(0.92) translateY(10px);
  animation:introTitle 1s 0.35s cubic-bezier(.16,.84,.44,1) forwards; line-height:1.1;
}
@keyframes introTitle {
  0% { opacity:0; filter:blur(14px); transform:scale(0.92) translateY(10px) }
  55% { opacity:1; filter:blur(0) }
  100% { opacity:1; filter:blur(0); transform:scale(1) translateY(0) }
}
.intro-tap { margin-top:40px; font-size:0.95rem; color:var(--text-soft); opacity:0; animation:introFade 0.5s 2.8s ease forwards }
.intro-tap::after {
  content:''; display:block; width:40px; height:2px; margin:8px auto 0;
  background:var(--border); border-radius:1px; animation:tapPulse 1.5s 3s ease infinite;
}
@keyframes introFade { to { opacity:1 } }
@keyframes tapPulse { 0%,100% { opacity:0.3; width:40px } 50% { opacity:0.8; width:60px } }

/* =========================================================================
   AUTH SCREEN
   ========================================================================= */
.auth-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 20px; text-align:center }
.auth-logo { font-family:'AA Galaxy','Lalezar',cursive; font-size:3.6rem; color:var(--accent); margin-bottom:24px }
.auth-box {
  width:100%; max-width:390px; padding:32px 26px; border-radius:20px;
  background:var(--bg-card); border:1.5px solid var(--border-light); border-top:5px solid var(--gold);
  box-shadow:var(--shadow-lg);
}
.auth-box h2 { font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1.5rem; color:var(--accent); margin-bottom:20px }
.auth-field { margin-bottom:14px; text-align:right }
.auth-field label { display:flex; align-items:center; gap:6px; font-size:0.88rem; color:var(--text-soft); margin-bottom:6px; font-weight:700 }
.auth-field label .icon { color:var(--gold-dark) }
.auth-field input {
  width:100%; padding:13px 16px; font-size:1.05rem; border:2px solid var(--border-light);
  border-radius:12px; background:var(--bg-card2); color:var(--text);
  font-family:'AA Galaxy','Tajawal',sans-serif; transition:border-color 0.25s;
}
.auth-field input:focus { border-color:var(--gold); outline:none }
.auth-btn {
  width:100%; padding:14px; border:0; border-radius:12px; font-family:'AA Galaxy','Tajawal',sans-serif;
  font-size:1.15rem; font-weight:800; cursor:pointer; transition:all 0.25s var(--ease); margin-top:8px;
}
.auth-btn-primary { background:var(--cta); color:#fff; border-bottom:4px solid var(--cta-dark) }
.auth-btn-primary:hover { filter:brightness(1.04); transform:translateY(-1px) }
.auth-btn-primary:active { transform:translateY(2px); border-bottom-width:2px }
.auth-error { color:var(--danger); font-size:0.9rem; margin:10px 0; font-weight:700; animation:shake 0.4s; text-align:center }
.auth-switch { margin-top:18px; font-size:0.9rem; color:var(--text-soft); text-align:center }
.auth-link {
  background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer;
  font-family:'AA Galaxy','Tajawal',sans-serif; font-size:0.9rem; text-decoration:underline; text-underline-offset:3px;
}
.auth-link:hover { color:var(--gold-dark) }
.auth-avatar {
  width:70px; height:70px; border-radius:50%; background:var(--accent); color:var(--gold);
  display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 12px;
  box-shadow:0 0 0 2px var(--gold), 0 0 0 6px var(--accent);
}
.auth-welcome { font-family:'AA Galaxy','Lalezar',cursive; font-size:1.6rem; color:var(--accent) }
.gate-user-bar {
  display:inline-flex; align-items:center; gap:6px; padding:6px 18px; border-radius:20px; font-size:0.95rem;
  background:var(--bg-card); border:1.5px solid var(--border-light); color:var(--text-mid); margin-bottom:12px;
}
.gate-user-bar .icon { color:var(--gold-dark) }
.gate-logout {
  margin-top:20px; font-size:0.9rem; padding:9px 20px; border:2px solid var(--border-light);
  border-radius:12px; background:var(--bg-card2); color:var(--text-soft);
  cursor:pointer; transition:all 0.25s var(--ease); text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.gate-logout:hover { border-color:var(--danger); color:var(--danger) }

.nav-user-btn {
  background:var(--bg-card2); border:2px solid var(--border-light); border-radius:11px;
  font-size:0.88rem; font-weight:700; padding:6px 12px; cursor:pointer; color:var(--text-mid);
  transition:all 0.25s var(--ease); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:'AA Galaxy','Tajawal',sans-serif;
}
.nav-user-btn:hover { border-color:var(--accent); color:var(--accent) }

/* =========================================================================
   GATE SCREEN
   ========================================================================= */
.gate-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:30px 20px; text-align:center }
.gate-logo { font-family:'AA Galaxy','Lalezar',cursive; font-size:3.6rem; color:var(--accent); margin-bottom:8px }
.gate-desc { color:var(--text-soft); font-size:1.1rem; margin-bottom:30px }
.gate-cards { display:flex; gap:20px; flex-wrap:wrap; justify-content:center; max-width:700px; width:100% }
.gate-card {
  flex:1; min-width:260px; max-width:320px; padding:30px 24px; border-radius:20px;
  background:var(--bg-card); border:1.5px solid var(--border-light);
  box-shadow:var(--shadow); text-align:center;
}
.gate-premium { border-top:5px solid var(--gold) }
.gate-trial { border-top:5px solid var(--accent) }
.gate-icon { font-size:2.4rem; margin-bottom:12px; color:var(--gold-dark) }
.gate-trial .gate-icon { color:var(--accent) }
.gate-title { font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1.3rem; font-weight:800; color:var(--text); margin-bottom:6px }
.gate-sub { font-size:0.9rem; color:var(--text-soft); margin-bottom:16px; line-height:1.5 }
.gate-input-wrap input {
  width:100%; padding:12px 14px; font-size:1.1rem; border:2px solid var(--border-light);
  border-radius:12px; background:var(--bg-card2); color:var(--text);
  font-family:monospace; letter-spacing:2px; text-align:center; direction:ltr;
}
.gate-input-wrap input:focus { border-color:var(--gold); outline:none }
.gate-input-wrap { margin-bottom:14px }
.gate-btn { width:100%; padding:14px; border:0; border-radius:12px; font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1.1rem; font-weight:800; cursor:pointer; transition:all 0.25s var(--ease); display:inline-flex; align-items:center; justify-content:center; gap:6px }
.gate-btn-premium { background:var(--cta); color:#fff; border-bottom:4px solid var(--cta-dark) }
.gate-btn-premium:hover { filter:brightness(1.04); transform:translateY(-1px) }
.gate-btn-premium:active { transform:translateY(2px); border-bottom-width:2px }
.gate-btn-trial { background:var(--accent); color:var(--on-accent); border-bottom:4px solid color-mix(in srgb, var(--accent) 60%, #000) }
.gate-btn-trial:hover { filter:brightness(1.05); transform:translateY(-1px) }
.gate-btn-trial:active { transform:translateY(2px); border-bottom-width:2px }
.gate-btn-trial:disabled { opacity:0.4; cursor:not-allowed }
.gate-error { color:var(--danger); font-size:0.85rem; margin-top:10px; font-weight:700; animation:shake 0.4s }
.gate-trial-info { font-size:0.85rem; color:var(--text-soft); margin-bottom:12px }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* ===== NAV KEY BUTTON ===== */
.nav-key-btn {
  background:var(--bg-card2); border:2px solid var(--border-light); border-radius:11px;
  font-size:1rem; padding:6px 12px; cursor:pointer; color:var(--text-mid);
  transition:all 0.25s var(--ease); position:relative; font-family:'AA Galaxy','Tajawal',sans-serif;
}
.nav-key-btn:hover { border-color:var(--gold); color:var(--gold-dark) }
.nav-key-btn.active { background:var(--bg-card2); color:var(--accent); border-color:var(--accent) }
.nav-key-btn.active::after {
  content:''; position:absolute; top:-3px; right:-3px; width:10px; height:10px;
  background:var(--accent); border-radius:50%; border:2px solid var(--bg-card);
}

/* ===== KEY STATUS POPUP ===== */
.key-popup-card { max-width:400px; text-align:center }
.key-status-header { display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:18px }
.key-icon-big { font-size:2.8rem; color:var(--gold-dark) }
.key-status-badge { display:inline-block; padding:6px 20px; border-radius:20px; font-size:1rem; font-weight:800 }
.key-status-badge.active { background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border:1.5px solid var(--accent) }
.key-status-badge.inactive { background:var(--danger-bg); color:var(--danger); border:1.5px solid var(--danger-dark) }
.key-code-display { margin:16px 0; padding:14px; background:var(--bg-card2); border-radius:12px; border:1px solid var(--border-light) }
.key-label { font-size:0.8rem; color:var(--text-soft); margin-bottom:6px }
.key-code { font-family:monospace; font-size:1.3rem; font-weight:900; color:var(--gold-dark); letter-spacing:2px; direction:ltr }
.key-input-section { margin:14px 0 }
.key-input-section input {
  width:100%; max-width:280px; padding:12px 14px; font-size:1.1rem;
  border:2px solid var(--border-light); border-radius:12px; background:var(--bg-card2);
  color:var(--text); font-family:monospace; letter-spacing:2px; margin-bottom:10px;
}
.key-input-section input:focus { border-color:var(--gold); outline:none }
.key-popup-error { color:var(--danger); font-size:0.85rem; margin-top:8px; font-weight:700; animation:shake 0.4s }
.key-actions { display:flex; gap:10px; justify-content:center; margin-top:16px; flex-wrap:wrap }
.key-actions .ctrl-btn { font-size:0.95rem; padding:10px 20px }

.confetti { position:fixed; z-index:300; pointer-events:none }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media(max-width:820px) {
  .features-grid { grid-template-columns:1fr 1fr }
  .feature-card:nth-child(2) { border-right:0 }
  .feature-card:nth-child(3), .feature-card:nth-child(4) { border-top:1px solid var(--border-light) }
  .steps-list { grid-template-columns:1fr 1fr }
}

@media(max-width:640px) {
  .gate-logo { font-size:2.6rem }
  .gate-desc { font-size:0.95rem }
  .gate-cards { flex-direction:column; align-items:center }
  .gate-card { min-width:auto; max-width:100%; padding:24px 18px }
  .gate-title { font-size:1.1rem }
  .nav-key-btn { font-size:1rem; padding:5px 10px }
  .nav-user-btn { font-size:0.8rem; padding:4px 8px }
  .auth-logo { font-size:2.6rem }
  .auth-box { padding:26px 18px }
  .auth-box h2 { font-size:1.3rem }
  .auth-field input { font-size:0.95rem; padding:11px 14px }
  .auth-btn { font-size:1rem; padding:12px }

  .header { padding:10px 12px; gap:6px }
  .header-logo { font-size:1.3rem }
  .header-btns { gap:5px }
  .header-icon-btn { padding:4px 8px; font-size:0.9rem; border-radius:9px }
  .vol-slider { width:44px }
  .sound-toggle { padding:4px 8px; font-size:0.9rem }
  .buzz-banner { font-size:0.7rem; padding:6px 12px; border-radius:10px; gap:4px }
  .led-display { width:80px; height:80px }
  .led-num { font-size:1.9rem }
  .timer-ctrl-btn { font-size:0.65rem; padding:4px 12px }

  .scoreboard { gap:10px; padding:14px 12px 6px }
  .team-card { padding:10px 14px; border-radius:16px }
  .team-name { font-size:0.9rem }
  .team-pts { font-size:2rem }
  .round-pts { font-size:0.65rem }

  .question-bar { margin:12px auto 0; width:calc(100% - 24px); padding:14px 14px }
  .q-text { font-size:clamp(1.1rem,3.4vw,1.4rem) }
  .q-badge { font-size:0.62rem; margin-top:6px }
  .tools-bar { padding:6px 12px; gap:6px }

  .board { padding:14px 12px; gap:8px; grid-template-columns:1fr }
  .flip-front, .flip-back { border-radius:12px }
  .flip-card { height:56px }
  .flip-front .num, .flip-back .num { width:44px; font-size:1.2rem }
  .flip-back .pts { min-width:54px; font-size:1.1rem }
  .flip-front .txt, .flip-back .txt { font-size:0.95rem; padding:0 10px }
  .flip-front .dots { font-size:1rem; letter-spacing:4px }

  .strikes-display { gap:10px; padding:6px 0 }
  .strike-x { width:42px; height:42px; font-size:1.3rem }

  .controls-bar { padding:8px 12px 14px; gap:6px }
  .controls-row { gap:6px }
  .ctrl-btn { padding:9px 14px; font-size:0.82rem; border-radius:10px }

  .setup-inputs { flex-direction:column }
  .option-btns { flex-wrap:wrap }
  .setup-logo { font-size:clamp(3.4rem,13vw,5rem) }
  .hero-tagline { font-size:1rem }
  .hero-medallion { width:120px; height:120px }
  .hero-medallion .medallion-ring { width:84px; height:84px }
  .hero-medallion .icon { width:42px; height:42px }

  .modal-card { padding:26px 20px; margin:0 12px; border-radius:18px }
  .modal-card h2 { font-size:1.6rem }
  .modal-card .m-pts { font-size:2.6rem }

  .land-section { padding:44px 18px }
  .land-title { font-size:1.6rem }
  .step-text { font-size:0.88rem }
  .settings-section { padding:30px 18px; margin:0 12px 22px }
}

@media(max-width:380px) {
  .vol-slider { display:none }
  .header-logo { font-size:1.1rem }
  .team-pts { font-size:1.8rem }
  .board { gap:7px }
  .features-grid { grid-template-columns:1fr }
  .feature-card { border-right:0 !important; border-top:1px solid var(--border-light) }
  .feature-card:first-child { border-top:0 }
  .steps-list { grid-template-columns:1fr }
}

/* ===== LANDSCAPE MOBILE — fit everything on one screen ===== */
@media(max-width:932px) and (orientation:landscape) {
  .header { padding:4px 10px; gap:4px }
  .header-logo { font-size:1rem }
  .header-icon-btn { padding:3px 7px; font-size:0.75rem }
  .sound-toggle { padding:3px 7px; font-size:0.75rem }
  .vol-slider { width:30px; display:inline-block }

  .scoreboard { padding:4px 10px 2px; gap:8px }
  .team-card { padding:5px 14px; border-radius:12px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px }
  .team-card.playing::before { display:none }
  .team-name { font-size:0.7rem; margin-bottom:0 }
  .team-pts { font-size:1.4rem }
  .round-pts { display:none }

  .question-bar { padding:6px 12px; margin:2px auto 0 }
  .q-text { font-size:clamp(0.85rem,2.4vw,1.05rem) }
  .q-badge { font-size:0.55rem; margin-top:2px }

  .board { padding:4px 10px; gap:5px; grid-template-columns:1fr 1fr }
  .flip-card { height:34px }
  .flip-front, .flip-back { border-radius:8px }
  .flip-front .num, .flip-back .num { width:28px; font-size:0.8rem }
  .flip-back .pts { min-width:32px; font-size:0.7rem }
  .flip-front .txt, .flip-back .txt { font-size:0.7rem; padding:0 5px }
  .flip-front .dots { font-size:0.65rem; letter-spacing:2px }

  .led-display { width:52px; height:52px }
  .led-num { font-size:1.1rem }
  .led-label { display:none }
  .timer-ctrl-btn { font-size:0.55rem; padding:2px 8px }

  .tools-bar { padding:2px 10px; gap:4px }
  .tool-btn { font-size:0.6rem !important; padding:3px 8px !important }
  .tool-cost { font-size:0.52rem; padding:0px 3px }

  .strikes-display { padding:2px 0; gap:5px }
  .strike-x { width:26px; height:26px; font-size:0.85rem; border-width:2px }

  .controls-bar { padding:2px 10px 4px }
  .controls-row { gap:5px }
  .ctrl-btn { padding:4px 8px; font-size:0.6rem; border-radius:7px; gap:2px }

  .solo-input-area { padding:3px 10px; gap:5px }
  .solo-input-area input { padding:5px 10px; font-size:0.75rem }
  .solo-score-bar { padding:3px 10px }
  .solo-pts { font-size:1.4rem }

  .modal-card { padding:16px 14px; border-radius:14px; max-width:70vw }
  .modal-card h2 { font-size:1.1rem; margin-bottom:2px }
  .modal-card .m-pts { font-size:1.7rem; margin:2px 0 }
  .modal-card p { font-size:0.72rem; margin-bottom:8px }
  .modal-card > button { padding:7px 18px; font-size:0.78rem }
}

/* ===== SHORT PORTRAIT PHONES ===== */
@media(max-height:700px) and (orientation:portrait) {
  .scoreboard { padding:8px 12px 4px }
  .team-pts { font-size:1.7rem }
  .question-bar { padding:10px 14px }
  .q-badge { display:none }
  .flip-card { height:48px }
  .led-display { width:74px; height:74px }
  .led-num { font-size:1.7rem }
}

/* ===== SMALL LANDSCAPE (phones) — extra compact ===== */
@media(max-height:420px) and (orientation:landscape) {
  .board { grid-template-columns:1fr 1fr 1fr }
  .flip-card { height:28px }
  .flip-front .txt, .flip-back .txt { font-size:0.6rem }
  .flip-front .num, .flip-back .num { width:22px; font-size:0.62rem }
  .flip-back .pts { min-width:26px; font-size:0.58rem }
  .team-pts { font-size:1.2rem }
  .team-name { font-size:0.6rem }
  .question-bar { padding:3px 10px }
  .q-text { font-size:0.75rem }
  .q-badge { display:none }
  .tools-bar { display:none }
  .led-display { width:44px; height:44px }
  .led-num { font-size:0.9rem }
  .controls-bar { padding:2px 8px 3px }
  .ctrl-btn { padding:3px 7px; font-size:0.55rem }
  .strike-x { width:22px; height:22px; font-size:0.75rem }
  .strikes-display { gap:4px }
}

/* =========================================================================
   DESKTOP LARGER FONTS
   ========================================================================= */
@media(min-width:641px) {
  body { font-size: 1.1rem }
  .q-text { font-size: clamp(1.6rem,3.5vw,2.3rem) }
  .flip-front .txt, .flip-back .txt { font-size: 1.4rem }
  .flip-front .num, .flip-back .num { font-size: 1.6rem; width: 54px }
  .flip-back .pts { font-size: 1.35rem; min-width: 68px }
  .flip-front .dots { font-size: 1.3rem }
  .team-name { font-size: 1.25rem }
  .team-pts { font-size: 3.2rem }
  .ctrl-btn { font-size: 1.05rem; padding: 13px 24px }
  .header-logo { font-size: 1.9rem }
  .led-display { width:118px; height:118px }
  .led-num { font-size:3rem }
  .led-label { font-size:0.78rem }
  .timer-ctrl-btn { font-size: 0.9rem; padding: 7px 20px }
  .flip-card { height: 64px }
  .board { gap: 14px; padding: 24px 28px }
  .strike-x { font-size: 1.8rem; width: 56px; height: 56px }
  .setup-logo { font-size: clamp(5rem,11vw,8rem) }
  .hero-tagline { font-size: 1.2rem }
  .land-title { font-size: 2.4rem }
  .fc-title { font-size: 1.25rem }
  .fc-desc { font-size: 0.95rem }
  .feature-card::after { font-size: 3.2rem }
  .step-num { font-size: 2.6rem }
  .step-text { font-size: 0.98rem }
  .step-text strong { font-size: 1.3rem }
  .opt-btn { font-size: 1.05rem; padding: 12px 24px }
  .setup-option label { font-size: 1.05rem }
  .setup-go { font-size: 1.3rem; padding: 18px 48px }
  .setup-go .play-icon { width: 34px; height: 34px }
  .setup-editor-btn { font-size: 1.05rem; padding: 16px 28px }
  .eq-item .eq-text { font-size: 1.1rem }
  .eq-item .eq-count { font-size: 0.9rem }
  .ea-input, .ea-ans, .ea-pts { font-size: 1.05rem }
  .solo-input-area input { font-size: 1.2rem; padding: 14px 20px }
  .modal-card h2 { font-size: 2.2rem }
  .modal-card .m-pts { font-size: 4rem }
  .modal-card p { font-size: 1.1rem }
  .modal-card > button { font-size: 1.15rem; padding: 14px 36px }
  .question-bar { padding: 20px 30px }
  .q-badge { font-size: 0.78rem; margin-top: 10px }
  .tools-bar { padding: 10px 28px; gap: 12px }
  .tool-btn { font-size: 0.95rem !important; padding: 10px 20px !important }
  .tool-cost { font-size: 0.75rem; padding: 2px 8px }
  .scoreboard { padding: 24px 28px 10px; gap: 20px }
  .team-card { padding: 18px 26px }
  .controls-bar { padding: 16px 28px 24px }
  .controls-row { gap: 10px }
  .header { padding: 12px 28px }
  .strikes-display { padding: 10px 0; gap: 14px }
  .nav-link { font-size: 1.1rem; padding: 9px 18px }
  .nav-play { font-size: 1.05rem; padding: 11px 30px }
  .nav-logo { font-size: 2.2rem }
  .nav-inner { padding: 13px 28px }
  .sound-toggle { font-size: 1.2rem; padding: 7px 13px }
  .header-icon-btn { font-size: 1.2rem; padding: 6px 12px }
  .vol-slider { width: 80px }
  .ig-setting label { font-size: 1rem }
  .history-winner { font-size: 1.1rem }
  .history-score { font-size: 1.3rem }
  .editor-header h2 { font-size: 2rem }
  .ea-title { font-size: 1.1rem }
  .footer-text { font-size: 1.1rem }
}

/* =========================================================================
   LIVE TOUCHES  (reveal flash, timer pulse, round transition, logo, progress)
   ========================================================================= */

/* 1 — gold flash ring when an answer is revealed */
@keyframes revealFlash {
  0%   { box-shadow: 0 0 0 0 var(--gold-glow), 0 0 0 0 rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 22px rgba(234,181,67,0), 0 0 0 0 rgba(0,0,0,0); }
}
.flip-card.revealed .flip-back { animation: revealFlash 0.75s ease-out; }

/* 3 — timer circle pulse in the danger zone (last ~20%) */
@keyframes timerPulse {
  0%,100% { transform: scale(1);   box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 0 rgba(229,62,62,0.5); }
  50%     { transform: scale(0.94); box-shadow: inset 0 2px 8px rgba(0,0,0,0.6), 0 0 0 12px rgba(229,62,62,0); }
}
.led-display:has(.led-num.danger) {
  border-color: var(--danger) !important;
  animation: timerPulse 0.7s ease infinite;
}

/* 5 — animated hero logo: gentle pulse + check draws in */
@keyframes logoBob { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
@keyframes checkDraw { to { stroke-dashoffset: 0 } }
.logo-pulse { animation: logoBob 2.6s ease-in-out infinite; }
.logo-pulse .medallion-ring .icon polyline {
  stroke-dasharray: 40; stroke-dashoffset: 40;
  animation: checkDraw 1.1s 0.4s ease forwards;
}

/* 6 — round progress pips */
.q-progress { display:flex; gap:7px; justify-content:center; margin-top:14px; }
.q-progress .pip {
  width:34px; height:8px; border-radius:5px; background:var(--border-light);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.q-progress .pip.done { background:var(--accent); }
.q-progress .pip.current { background:var(--gold); transform:scaleX(1.12); }

/* 4 — round transition overlay */
.round-transition {
  position:fixed; inset:0; z-index:250; display:none;
  align-items:center; justify-content:center;
  background:radial-gradient(ellipse 70% 60% at 50% 50%, var(--header-bg), color-mix(in srgb, var(--header-bg) 80%, #000));
}
.round-transition.show { display:flex; }
@keyframes rtPop {
  0%   { transform:scale(0.5); opacity:0 }
  40%  { transform:scale(1.06); opacity:1 }
  70%  { transform:scale(1); opacity:1 }
  100% { transform:scale(1); opacity:1 }
}
@keyframes rtOut { to { opacity:0; visibility:hidden } }
.round-transition.show .rt-inner { animation: rtPop 0.7s cubic-bezier(.2,1.4,.4,1) both; text-align:center; }
.rt-eyebrow { font-family:'AA Galaxy','Tajawal',sans-serif; font-size:1rem; letter-spacing:6px; color:var(--gold); font-weight:800; margin-bottom:8px; }
.rt-title { font-family:'AA Galaxy','Lalezar',cursive; font-size:clamp(3rem,10vw,6rem); color:#fff; line-height:1; }
.rt-check { width:70px; height:70px; margin:22px auto 0; color:var(--gold); }
.rt-check svg { width:100%; height:100% }
@keyframes rtCheckDraw { to { stroke-dashoffset:0 } }
.round-transition.show .rt-check-line {
  stroke-dasharray:40; stroke-dashoffset:40;
  animation: rtCheckDraw 0.6s 0.5s ease forwards;
}
:root {
  --neutral-edge: color-mix(in srgb, var(--border) 78%, #6b5a38);
}

/* --- neutral group (cream/outline buttons) --- */
.setup-editor-btn,
.opt-btn,
.ctrl-btn,
.ctrl-team,
.ctrl-reset,
.tool-btn,
.auth-btn,
.gate-btn,
.history-footer button,
.eq-item .eq-edit {
  border: 2.5px solid var(--neutral-edge) !important;
  box-shadow: 0 5px 0 var(--neutral-edge);
}

/* --- primary CTA group (orange) --- */
.nav-play,
.setup-go,
.ctrl-team.active-team,
.auth-btn-primary,
.gate-btn-premium,
.modal-card > button,
.timer-ctrl-btn.play,
.history-footer button:last-child {
  border: 3px solid var(--cta-deep) !important;
  box-shadow: 0 6px 0 var(--cta-deep);
}

/* --- accent group (green) --- */
.opt-btn.active,
.ctrl-award,
.ctrl-next,
.gate-btn-trial {
  border: 3px solid color-mix(in srgb, var(--accent) 60%, #000) !important;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--accent) 60%, #000);
}

/* --- danger group (red) --- */
.ctrl-strike,
.timer-ctrl-btn.pause,
.eq-item .eq-del {
  border: 2.5px solid var(--danger-dark) !important;
  box-shadow: 0 5px 0 var(--danger-dark);
}

/* press-down feel: shadow collapses, button sinks */
.setup-editor-btn:active,
.opt-btn:active,
.ctrl-btn:active,
.tool-btn:active,
.auth-btn:active,
.gate-btn:active,
.history-footer button:active,
.eq-item .eq-edit:active,
.eq-item .eq-del:active,
.nav-play:active,
.setup-go:active,
.modal-card > button:active,
.timer-ctrl-btn:active {
  transform: translateY(4px) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.12) !important;
}

/* hover lift stays subtle and doesn't fight the shadow */
.ctrl-btn:hover, .opt-btn:hover, .nav-play:hover,
.setup-go:hover, .tool-btn:hover { transform: translateY(-1px) }