/* === Orbitalni oblik duel aesthetic — space connection variant === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#0a0e27; --bg2:#111936; --card:rgba(30,41,79,.7); --card-2:rgba(22,32,66,.85);
  --stroke:rgba(167,139,250,.25); --stroke-strong:rgba(167,139,250,.45);
  --purple:#7c3aed; --violet:#a78bfa; --violet-2:#c4b5fd; --blue:#60a5fa; --blue-2:#38bdf8;
  --cyan:#00f5ff; --pink:#ec4899; --green:#22c55e; --red:#ef4444; --gold:#fbbf24; --amber:#f59e0b;
  --text:#f8fafc; --muted:#94a3b8; --dim:#64748b;
  --grad-hero:linear-gradient(135deg,#7c3aed 0%,#a78bfa 55%,#60a5fa 100%);
  --grad-you:linear-gradient(135deg,#60a5fa 0%,#3b82f6 100%);
  --grad-opp:linear-gradient(135deg,#a78bfa 0%,#7c3aed 100%);
  --grad-gold:linear-gradient(135deg,#fbbf24 0%,#f59e0b 55%,#fbbf24 100%);
  --shadow-1:0 10px 40px -12px rgba(124,58,237,.35);
  --shadow-2:0 14px 50px -10px rgba(96,165,250,.4);
  --shadow-gold:0 0 28px rgba(251,191,36,.55);
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background:radial-gradient(ellipse at 50% 0%,#1a1f3d 0%,#0a0e27 55%,#050816 100%);
  color:var(--text); min-height:100vh; overflow-x:hidden; position:relative;
  -webkit-tap-highlight-color:transparent;
}

/* canvases */
#starCanvas,#laserCanvas,#partCanvas{position:fixed;inset:0;pointer-events:none}
#starCanvas{z-index:0}
#laserCanvas{z-index:3}
#partCanvas{z-index:4}
/* nebulas */
.nebula{position:fixed;border-radius:50%;filter:blur(70px);opacity:.42;pointer-events:none;z-index:1;animation:nbDrift 18s ease-in-out infinite}
.neb-v{width:340px;height:340px;background:radial-gradient(circle,rgba(124,58,237,.6),transparent 68%);top:-80px;left:-80px}
.neb-c{width:300px;height:300px;background:radial-gradient(circle,rgba(96,165,250,.55),transparent 68%);bottom:-60px;right:-60px;animation-delay:-9s}
@keyframes nbDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(22px,-18px) scale(1.08)}}

#edgeGlow{position:fixed;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 40px rgba(124,58,237,.22),inset 0 0 100px rgba(96,165,250,.1);opacity:1}
#edgeGlow.active{animation:edgePulse 1s ease-out}
@keyframes edgePulse{0%{box-shadow:inset 0 0 40px rgba(34,197,94,.55),inset 0 0 100px rgba(34,197,94,.3)}100%{box-shadow:inset 0 0 40px rgba(124,58,237,.22),inset 0 0 100px rgba(96,165,250,.1)}}
#screenFlash{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .18s;mix-blend-mode:screen}
#screenFlash.green{background:radial-gradient(circle at 50% 40%,rgba(34,197,94,.5),transparent 60%);opacity:1;animation:sflashAnim .55s ease-out}
#screenFlash.red{background:radial-gradient(circle at 50% 40%,rgba(239,68,68,.5),transparent 60%);opacity:1;animation:sflashAnim .55s ease-out}
#screenFlash.gold{background:radial-gradient(circle at 50% 40%,rgba(251,191,36,.55),transparent 60%);opacity:1;animation:sflashAnim .65s ease-out}
@keyframes sflashAnim{0%{opacity:1}100%{opacity:0}}

/* switch overlay */
#switchOverlay{position:fixed;inset:0;z-index:60;display:none;flex-direction:column;align-items:center;justify-content:center;padding:26px;text-align:center;gap:12px;background:rgba(5,8,22,.92);backdrop-filter:blur(14px)}
#switchOverlay.active{display:flex;animation:fadeIn .25s}
.sw-icon{font-size:3rem;line-height:1;filter:drop-shadow(0 0 18px rgba(167,139,250,.6));animation:roEmojiPop .55s cubic-bezier(.2,1.6,.4,1)}
.sw-title{font-size:1.4rem;font-weight:900;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em}
.sw-sub{font-size:.82rem;color:var(--muted);max-width:320px;line-height:1.45}
.sw-bar{width:220px;height:6px;border-radius:999px;background:rgba(148,163,184,.2);overflow:hidden;border:1px solid var(--stroke);margin-top:4px}
.sw-bar-fill{height:100%;width:0;background:var(--grad-hero);border-radius:999px;transition:width .1s linear;box-shadow:0 0 10px rgba(167,139,250,.55)}

/* round label */
.round-label{position:fixed;top:14px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:35;opacity:0;pointer-events:none;transition:transform .35s,opacity .35s}
.round-label.show{opacity:1;transform:translateX(-50%) translateY(0)}
.rl-inner{padding:8px 18px;border-radius:999px;background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--stroke-strong);color:var(--violet-2);font-weight:800;font-size:.78rem;letter-spacing:.04em;box-shadow:var(--shadow-1)}

/* countdown overlay */
.countdown-overlay{position:fixed;inset:0;z-index:62;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:12px;background:rgba(5,8,22,.88);backdrop-filter:blur(14px);text-align:center}
.countdown-overlay.active{display:flex;animation:fadeIn .25s}
.cd-num{font-size:6rem;font-weight:900;line-height:1;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(167,139,250,.55));animation:cdPulse 1s ease-in-out infinite}
@keyframes cdPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.cd-sub{font-size:.85rem;color:var(--muted);font-weight:700;letter-spacing:.02em}
.cd-starter{padding:6px 14px;border-radius:999px;font-size:.72rem;font-weight:900;letter-spacing:.03em;border:1px solid}
.cd-starter.cyan{background:rgba(96,165,250,.15);color:var(--blue);border-color:rgba(96,165,250,.4)}
.cd-starter.pink{background:rgba(236,72,153,.15);color:var(--pink);border-color:rgba(236,72,153,.4)}

/* timeout */
.timeout-overlay{position:fixed;inset:0;z-index:64;display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:10px;background:rgba(5,8,22,.92);backdrop-filter:blur(14px);text-align:center}
.timeout-overlay.active{display:flex;animation:fadeIn .25s}
.to-emoji{font-size:3.8rem;line-height:1;filter:drop-shadow(0 0 20px rgba(239,68,68,.65));animation:roEmojiPop .55s cubic-bezier(.2,1.6,.4,1)}
.to-title{font-size:1.55rem;font-weight:900;background:linear-gradient(135deg,#ef4444,#f87171);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em}
.to-sub{font-size:.8rem;color:var(--muted);line-height:1.5;max-width:320px}
.to-score{font-size:.9rem;font-weight:900;padding:8px 16px;border-radius:999px;background:rgba(251,191,36,.15);color:var(--gold);border:1px solid rgba(251,191,36,.4);letter-spacing:.03em}

/* end overlay */
.end-overlay{position:fixed;inset:0;z-index:65;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(5,8,22,.92);backdrop-filter:blur(14px)}
.end-overlay.active{display:flex;animation:fadeIn .3s}
.end-card{max-width:400px;width:100%;background:var(--card);backdrop-filter:blur(18px);border:1px solid var(--stroke-strong);border-radius:24px;padding:22px 18px;text-align:center;box-shadow:var(--shadow-1),var(--shadow-2);animation:popIn .45s cubic-bezier(.2,1.6,.4,1);display:flex;flex-direction:column;gap:10px}
@keyframes popIn{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
.end-trophy{font-size:3.4rem;line-height:1;filter:drop-shadow(0 0 20px rgba(251,191,36,.65))}
.end-title{font-size:1.45rem;font-weight:900;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.01em}
.end-sub{font-size:.8rem;color:var(--muted);line-height:1.45;max-width:340px;margin:0 auto}
.end-scores{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.es-card{padding:12px 10px;border-radius:16px;display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;border:1px solid transparent}
.es-card::before{content:"";position:absolute;inset:0;opacity:.16;pointer-events:none}
.es-card.me::before{background:var(--grad-you)}
.es-card.opp::before{background:var(--grad-opp)}
.es-card.me{border-color:rgba(96,165,250,.4)}
.es-card.opp{border-color:rgba(167,139,250,.4)}
.es-card>*{position:relative;z-index:1}
.es-label{font-size:.62rem;font-weight:800;color:var(--muted);letter-spacing:.04em}
.es-score{font-size:1.6rem;font-weight:900;background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
.es-pairs{font-size:.62rem;color:var(--violet-2);font-weight:700;letter-spacing:.04em}
.mission-log{display:flex;flex-direction:column;gap:4px;margin-top:8px;max-height:140px;overflow-y:auto;padding:4px}
.mission-log .mlog{padding:6px 10px;border-radius:8px;background:rgba(15,23,42,.55);border:1px solid var(--stroke);font-size:.68rem;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;gap:6px;align-items:center}
.mission-log .mlog .mlog-win{color:#86efac}
.mission-log .mlog .mlog-lose{color:#fca5a5}
.end-btns{display:flex;gap:10px;margin-top:10px}
.btn-glass{flex:1;padding:12px 12px;border:none;border-radius:14px;font-family:inherit;font-weight:800;font-size:.82rem;letter-spacing:.02em;cursor:pointer;color:var(--violet);background:rgba(167,139,250,.14);border:1px solid rgba(167,139,250,.32);transition:transform .15s,filter .15s}
.btn-glass.primary{background:var(--grad-hero);color:#fff;border:none;box-shadow:0 10px 28px -6px rgba(124,58,237,.55)}
.btn-glass:active{transform:scale(.97)}

/* main screen */
.screen{position:relative;z-index:6;max-width:480px;margin:0 auto;padding:14px 12px 24px;display:flex;flex-direction:column;gap:12px}
.hud{padding:10px 10px;border-radius:20px;background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--stroke);box-shadow:var(--shadow-1);display:flex;flex-direction:column;gap:10px}
.players-row{display:grid;grid-template-columns:1fr 54px 1fr;gap:8px;align-items:stretch}
.player-card{display:flex;flex-direction:column;gap:6px;padding:9px 9px;border-radius:14px;position:relative;overflow:hidden;border:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.player-card::before{content:"";position:absolute;inset:0;opacity:.14;z-index:0;pointer-events:none}
.player-card.me::before{background:var(--grad-you)}
.player-card.opp::before{background:var(--grad-opp)}
.player-card.me{border-color:rgba(96,165,250,.35)}
.player-card.opp{border-color:rgba(167,139,250,.35)}
.player-card.active-turn{border-color:var(--violet);box-shadow:0 0 0 3px rgba(167,139,250,.2),var(--shadow-1);animation:turnGlow 1.6s ease-in-out infinite}
@keyframes turnGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
.player-card>*{position:relative;z-index:1}
.pc-top{display:flex;align-items:center;gap:8px}
.pc-avatar{font-size:1.25rem;line-height:1;flex-shrink:0}
.pc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pc-name{font-size:.72rem;font-weight:800;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-meta{display:flex;gap:6px;font-size:.54rem;font-weight:700;color:var(--muted);letter-spacing:.03em}
.pc-xp{color:var(--gold)}
.pc-ping{color:var(--green)}
.pc-score{font-size:.78rem;font-weight:900;padding:4px 8px;border-radius:999px;background:rgba(251,191,36,.14);color:var(--gold);border:1px solid rgba(251,191,36,.35);letter-spacing:.02em;flex-shrink:0}
.pc-bar-wrap{height:5px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;border:1px solid rgba(167,139,250,.2)}
.pc-bar-fill{height:100%;width:0;background:var(--grad-hero);border-radius:999px;transition:width .5s ease;box-shadow:0 0 8px rgba(167,139,250,.45)}

.turn-sep{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;position:relative}
.turn-sep::before{content:"";position:absolute;inset:14% 50%;width:1px;background:linear-gradient(180deg,transparent,rgba(167,139,250,.4),transparent)}
.turn-arrow{font-size:1rem;color:var(--violet);filter:drop-shadow(0 0 8px rgba(167,139,250,.55));transition:transform .35s}
.turn-arrow.flip{transform:rotate(180deg);color:var(--pink);filter:drop-shadow(0 0 8px rgba(236,72,153,.55))}

.turn-badge{padding:5px 12px;border-radius:999px;font-size:.68rem;font-weight:900;letter-spacing:.04em;text-align:center;align-self:center;border:1px solid;max-width:240px}
.turn-badge.my-turn{background:rgba(96,165,250,.15);color:var(--blue);border-color:rgba(96,165,250,.4)}
.turn-badge.opp-turn{background:rgba(236,72,153,.15);color:var(--pink);border-color:rgba(236,72,153,.4)}

/* oxy */
.oxy-row{display:flex;align-items:center;gap:8px;padding:6px 6px}
.oxy-icon{font-size:1rem;line-height:1}
.oxy-track{flex:1;height:7px;border-radius:999px;background:rgba(148,163,184,.18);overflow:hidden;border:1px solid var(--stroke)}
.oxy-fill{height:100%;width:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:999px;transition:width 1s linear,background .3s}
.oxy-fill.warn{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.oxy-fill.danger{background:linear-gradient(90deg,#ef4444,#f87171);animation:pulseRed 1s ease-in-out infinite}
@keyframes pulseRed{0%,100%{opacity:1}50%{opacity:.7}}
.oxy-time{font-size:.72rem;font-weight:900;color:var(--violet-2);min-width:38px;text-align:right;letter-spacing:.01em}

/* mission row */
.mission-row{display:flex;justify-content:space-between;align-items:center;padding:0 2px}
.mission-text{font-size:.72rem;font-weight:800;color:var(--violet-2);letter-spacing:.02em;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round-dots{display:flex;gap:5px}
.round-dots .rd{width:8px;height:8px;border-radius:50%;background:rgba(148,163,184,.3);border:1px solid var(--stroke);transition:all .25s}
.round-dots .rd.done{background:#22c55e;border-color:#22c55e;box-shadow:0 0 8px rgba(34,197,94,.55)}
.round-dots .rd.active{background:var(--gold);border-color:var(--gold);box-shadow:0 0 10px rgba(251,191,36,.65);transform:scale(1.2)}
.round-dots .rd.lost{background:#ef4444;border-color:#ef4444}

/* game grid */
.game-grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px;padding:8px;border-radius:20px;background:var(--card);backdrop-filter:blur(14px);border:1px solid var(--stroke);box-shadow:var(--shadow-2);position:relative;min-height:320px}
.game-grid > *{min-width:0}
.game-grid.shake{animation:shake .45s}
.game-grid.opp-turn{pointer-events:none;opacity:.85}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}
.game-grid .card{padding:14px 10px;border-radius:14px;background:var(--card-2);border:1px solid var(--stroke);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:transform .18s,border-color .18s,background .18s,box-shadow .18s;min-height:78px;position:relative;overflow:hidden;user-select:none;-webkit-user-select:none}
.game-grid .card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,.12),transparent 55%);opacity:0;transition:opacity .18s;pointer-events:none}
.game-grid .card:active{transform:scale(.97)}
.game-grid .card:hover::before{opacity:1}
.game-grid .card.active{border-color:var(--violet);background:rgba(124,58,237,.2);box-shadow:0 0 0 2px rgba(167,139,250,.35),0 0 18px rgba(167,139,250,.4);animation:activePulse 1.4s ease-in-out infinite}
@keyframes activePulse{0%,100%{box-shadow:0 0 0 2px rgba(167,139,250,.35),0 0 18px rgba(167,139,250,.4)}50%{box-shadow:0 0 0 3px rgba(167,139,250,.55),0 0 28px rgba(167,139,250,.6)}}
.game-grid .card.opp-active{border-color:var(--pink);background:rgba(236,72,153,.18);box-shadow:0 0 0 2px rgba(236,72,153,.35),0 0 18px rgba(236,72,153,.4);animation:activePulse 1.4s ease-in-out infinite}
.game-grid .card.matched{border-color:rgba(34,197,94,.55);background:rgba(34,197,94,.18);color:#bbf7d0;box-shadow:0 0 16px rgba(34,197,94,.35);cursor:default;pointer-events:none}
.game-grid .card.matched .card-icon{filter:drop-shadow(0 0 10px rgba(34,197,94,.55))}
.game-grid .card.pending{border-color:rgba(167,139,250,.6);background:rgba(124,58,237,.2);color:#ddd6fe;box-shadow:0 0 16px rgba(167,139,250,.4);cursor:default;pointer-events:none;animation:scPendingPulse 1.1s ease-in-out infinite}
.game-grid .card.pending .card-icon{filter:drop-shadow(0 0 10px rgba(167,139,250,.6))}
@keyframes scPendingPulse{0%,100%{opacity:.78}50%{opacity:1}}
.game-grid .card.error{border-color:rgba(239,68,68,.6);background:rgba(239,68,68,.22);animation:cardErr .5s ease-out}
@keyframes cardErr{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.card-icon{font-size:1.6rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.card-text{font-size:.72rem;font-weight:800;color:var(--text);letter-spacing:.01em;text-align:center;line-height:1.2;min-width:0;overflow-wrap:anywhere;word-break:normal}

/* status + wait */
.status-bar{text-align:center;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:8px 10px;border-radius:12px;background:rgba(15,23,42,.5);border:1px solid var(--stroke)}
#connWait{text-align:center}

/* common */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes roEmojiPop{from{transform:scale(.3) rotate(-20deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}

@media (max-width:380px){
  .players-row{grid-template-columns:1fr 44px 1fr}
  .game-grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:8px;padding:6px}
  .game-grid .card{min-height:70px;padding:11px 8px}
  .card-icon{font-size:1.4rem}
  .card-text{font-size:.66rem}
  .cd-num{font-size:4.8rem}
}
/* Turn vignette (JS: edgeGlow.className = lead | danger) */
#edgeGlow.lead {
  box-shadow: inset 0 0 40px rgba(0, 245, 255, 0.32), inset 0 0 18px rgba(0, 245, 255, 0.14);
  opacity: 1;
}
#edgeGlow.danger {
  box-shadow: inset 0 0 40px rgba(236, 72, 153, 0.3), inset 0 0 18px rgba(236, 72, 153, 0.14);
  opacity: 1;
}
/* Ekran blic — cyan / round (koristi isti JS kao stariji build) */
#screenFlash.cyan {
  background: radial-gradient(circle at 50% 40%, rgba(0, 245, 255, 0.38), transparent 62%);
  opacity: 1;
  animation: sflashAnim 0.55s ease-out;
}
#screenFlash.round {
  background: radial-gradient(circle at 50% 40%, rgba(96, 165, 250, 0.28), transparent 58%);
  opacity: 1;
  animation: sflashAnim 0.45s ease-out;
}

/* ════════════════════════════════════════════
   GLAVNI GRADOVI — COSMETIC UPGRADE
════════════════════════════════════════════ */

/* Hide old screen */
.screen { display: none !important; }

@media (min-width: 720px) {
  .gp-page {
    max-width: 640px;
  }
}

/* ─── QUESTION CARD ─── */
.sc-question-card {
  border-radius: clamp(24px, 7vw, 34px);
  padding: clamp(14px, 3.2vw, 22px) clamp(12px, 3.5vw, 24px) clamp(16px, 3.8vw, 24px);
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 10%, rgba(115, 70, 255, 0.16), transparent 45%),
    rgba(8, 13, 40, 0.78);
  border: 2px solid rgba(170, 135, 255, 0.45);
  box-shadow:
    0 0 38px rgba(120, 80, 255, 0.18),
    inset 0 0 36px rgba(255, 255, 255, 0.035),
    0 12px 34px rgba(0,0,0,.36);
  display: flex; flex-direction: column; gap: 0;
}
.sc-card-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(96,165,250,0.15); border: 1px solid rgba(96,165,250,0.3);
  border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 800; color: #93c5fd;
  align-self: flex-start;
}
.sc-card-title {
  font-size: clamp(20px, 4.8vw, 32px);
  font-weight: 950;
  color: rgba(255,255,255,0.95);
  text-align: center;
  line-height: 1.12;
  margin: clamp(12px, 3.2vw, 18px) 0 clamp(12px, 3.2vw, 20px);
  letter-spacing: 0;
}
.sc-board-head {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(30px, 7vw, 56px) minmax(0,1fr);
  gap: clamp(5px, 1.5vw, 10px);
  align-items: center;
  margin-bottom: clamp(8px, 2.2vw, 12px);
  padding: 0 clamp(2px, .8vw, 6px);
}
.sc-column-title {
  font-size: clamp(10px, 2.4vw, 14px);
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.sc-left-title { color: #58b8ff; }
.sc-right-title { color: #ff61bd; }
.sc-board-gap { min-width: 0; }
.sc-match-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(30px, 7vw, 56px) minmax(0,1fr);
  gap: clamp(5px, 1.5vw, 10px);
  align-items: stretch;
  min-height: clamp(236px, 50vw, 320px);
  padding: 0 clamp(2px, 1vw, 4px);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}
.sc-lines-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.sc-line {
  stroke-linecap: round;
  stroke-width: clamp(3px, .8vw, 5px);
  filter: url(#scLineGlow);
}
.sc-column {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: clamp(8px, 2.2vw, 12px);
  min-width: 0;
}
.sc-question-card .game-grid,
.sc-question-card .sc-match-board {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
}
.sc-question-card .sc-option {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: clamp(54px, 12vw, 72px);
  border-radius: clamp(14px, 3.2vw, 18px);
  background: rgba(12, 18, 50, 0.78);
  display: flex;
  flex-direction: row;
  align-items: center;
  overflow: visible;
  cursor: pointer;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
  user-select: none;
  -webkit-user-select: none;
}
.sc-question-card .sc-option::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,.08), transparent 55%);
  pointer-events: none;
}
.sc-question-card .sc-option:active { transform: scale(.98); }
.sc-country-option {
  justify-content: flex-start;
  gap: clamp(7px, 2vw, 14px);
  padding: clamp(8px, 2.4vw, 12px) clamp(10px, 3vw, 16px);
}
.sc-capital-option {
  justify-content: center;
  padding: clamp(8px, 2.4vw, 12px) clamp(10px, 3vw, 16px);
  text-align: center;
}
.sc-left-option {
  border: 2px solid rgba(82, 160, 255, 0.75);
  box-shadow: 0 0 24px rgba(82, 160, 255, 0.22), inset 0 0 18px rgba(82, 160, 255, 0.04);
}
.sc-right-option {
  border: 2px solid rgba(255, 70, 180, 0.75);
  box-shadow: 0 0 24px rgba(255, 70, 180, 0.20), inset 0 0 18px rgba(255, 70, 180, 0.04);
}
.sc-question-card .sc-option.active {
  border-color: #a78bfa;
  background: rgba(124,58,237,.2);
  box-shadow: 0 0 0 2px rgba(167,139,250,.35),0 0 24px rgba(167,139,250,.45);
}
.sc-question-card .sc-option.opp-active {
  border-color: var(--pink);
  background: rgba(236,72,153,.18);
  box-shadow: 0 0 0 2px rgba(236,72,153,.35),0 0 22px rgba(236,72,153,.42);
}
.sc-question-card .sc-option.matched {
  border-color: rgba(79, 232, 164, .72);
  background: rgba(34,197,94,.14);
  color: #d8ffe9;
  box-shadow: 0 0 20px rgba(34,197,94,.26), inset 0 0 18px rgba(34,197,94,.06);
  cursor: default;
  pointer-events: none;
}
.sc-question-card .sc-option.pending {
  border-color: rgba(167,139,250,.72);
  background: rgba(124,58,237,.16);
  color: #ede9fe;
  box-shadow: 0 0 20px rgba(167,139,250,.3), inset 0 0 18px rgba(167,139,250,.06);
  cursor: default;
  pointer-events: none;
  animation: scPendingPulse 1.1s ease-in-out infinite;
}
.sc-question-card .sc-option.error {
  border-color: rgba(239,68,68,.68);
  background: rgba(239,68,68,.22);
  animation: cardErr .5s ease-out;
}
.sc-country-flag {
  flex: 0 0 auto;
  width: clamp(30px, 7.5vw, 48px);
  height: clamp(24px, 5.8vw, 36px);
  display: grid;
  place-items: center;
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1;
}
.sc-question-card .sc-card-text {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
  color: rgba(255,255,255,.94);
  font-size: clamp(12px, 2.7vw, 17px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: 0;
}
.sc-country-option .sc-card-text { text-align: left; }
.sc-capital-option .sc-card-text { text-align: center; }
.sc-node {
  position: absolute;
  top: 50%;
  width: clamp(12px, 3vw, 16px);
  height: clamp(12px, 3vw, 16px);
  border-radius: 999px;
  transform: translateY(-50%);
  z-index: 3;
}
.sc-node-right {
  right: calc(clamp(6px, 1.8vw, 9px) * -1);
  background: #5ab8ff;
  box-shadow: 0 0 16px #5ab8ff, 0 0 26px rgba(90,184,255,.48);
}
.sc-node-left {
  left: calc(clamp(6px, 1.8vw, 9px) * -1);
  background: #ff55c7;
  box-shadow: 0 0 16px #ff55c7, 0 0 26px rgba(255,85,199,.48);
}
@media (max-width: 360px) {
  .sc-match-board,
  .sc-board-head {
    grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
    gap: 4px;
  }
  .sc-country-option { gap: 6px; padding-inline: 8px; }
  .sc-question-card .sc-card-text { font-size: 12px; }
}

@media (max-width: 430px) {
  .sc-question-card {
    padding: 12px 10px 14px;
    border-radius: 22px;
  }

  .sc-card-pill {
    padding: 3px 9px;
    font-size: 11px;
  }

  .sc-card-title {
    font-size: clamp(19px, 5.8vw, 24px);
    margin: 10px 0 11px;
  }

  .sc-board-head {
    grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
    gap: 4px;
    margin-bottom: 8px;
    padding: 0;
  }

  .sc-column-title {
    font-size: 10px;
    letter-spacing: .06em;
  }

  .sc-match-board {
    grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr);
    gap: 4px;
    min-height: clamp(226px, 70vw, 288px);
  }

  .sc-column {
    gap: clamp(6px, 1.9vw, 8px);
  }

  .sc-question-card .sc-option {
    min-height: clamp(50px, 13vw, 58px);
    border-radius: 14px;
  }

  .sc-country-option,
  .sc-capital-option {
    padding: 7px 8px;
  }

  .sc-country-option {
    gap: 6px;
  }

  .sc-country-flag {
    width: clamp(26px, 8vw, 34px);
    height: clamp(20px, 6.2vw, 26px);
    font-size: clamp(21px, 6.5vw, 27px);
  }

  .sc-question-card .sc-card-text {
    font-size: clamp(11px, 3.45vw, 13px);
    line-height: 1.14;
  }

  .sc-node {
    width: 12px;
    height: 12px;
  }

  .sc-node-right { right: -6px; }
  .sc-node-left { left: -6px; }
}

/* ─── STATUS BAR ─── */
.status-bar.sc-status {
  border-radius: 20px !important;
  padding: 14px 16px !important;
  background: rgba(10,14,36,0.85) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #c4b5fd !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
  text-align: center;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .nebula,
  #edgeGlow.active,
  .cd-num,
  .player-card.active-turn,
  .oxy-fill.danger,
  .game-grid.shake,
  .game-grid .card.active,
  .game-grid .card.opp-active,
  .game-grid .card.error {
    animation: none !important;
  }

  #screenFlash,
  .sw-bar-fill,
  .round-label,
  .btn-glass,
  .player-card,
  .pc-bar-fill,
  .turn-arrow,
  .oxy-fill,
  .round-dots .rd,
  .game-grid .card,
  .game-grid .card::before,
  .timer-arc,
  .sc-question-card .sc-option {
    transition-duration: .01ms !important;
  }
}