* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:#0a0e27; min-height:100vh;
  font-family:'Segoe UI', sans-serif; color:#fff;
  overflow-x:hidden; overflow-y:auto;
}

/* ── STARS ── */
.stars { position:fixed; inset:0; pointer-events:none; z-index:0; }
.star  { position:absolute; border-radius:50%; background:#fff; animation:twinkle var(--d,3s) ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.15;transform:scale(.8)} to{opacity:1;transform:scale(1.2)} }

/* ── NEBULAS ── */
.nebula { position:fixed; border-radius:50%; filter:blur(70px); opacity:.15; pointer-events:none; z-index:0; }
.nb1 { width:300px;height:300px; background:#1d4ed8; top:-60px; left:-60px; }
.nb2 { width:280px;height:280px; background:#7c3aed; bottom:80px; right:-60px; }
.nb3 { width:200px;height:200px; background:#db2777; top:45%; left:30%; }

/* ── SCREEN FLASH ── */
.screen-flash { position:fixed; inset:0; pointer-events:none; z-index:200; opacity:0; }
.screen-flash.correct { animation:flashG .5s ease; }
.screen-flash.wrong   { animation:flashR .5s ease; }
@keyframes flashG { 0%{opacity:0;background:transparent} 20%{opacity:1;background:rgba(34,197,94,.1)} 100%{opacity:0;background:transparent} }
@keyframes flashR { 0%{opacity:0;background:transparent} 20%{opacity:1;background:rgba(239,68,68,.1)} 100%{opacity:0;background:transparent} }

#pCanvas { position:fixed; inset:0; pointer-events:none; z-index:150; }

.q-card {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:18px; padding:14px;
  position:relative; overflow:hidden;
  animation:qIn .4s cubic-bezier(.34,1.56,.64,1);
}
.q-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,#1d4ed8,#7c3aed,#ec4899); }
.q-card::after  { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at top, rgba(124,58,237,.05), transparent 60%); pointer-events:none; }
@keyframes qIn { from{opacity:0;transform:translateY(16px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }

.q-tx { display:flex; align-items:center; gap:6px; margin-bottom:8px; }
.led  { width:8px; height:8px; border-radius:50%; background:#22c55e; box-shadow:0 0 6px #22c55e; animation:ledBlink .9s ease-in-out infinite; }
@keyframes ledBlink { 0%,100%{opacity:1} 50%{opacity:.2} }
.led-txt { font-size:.63rem; color:#22c55e; font-weight:700; letter-spacing:.8px; }
.q-prompt {
  font-size:.88rem; font-weight:700; color:#e2e8f0;
  text-align:center; margin-bottom:8px;
}
.q-prompt .planet { display:inline-block; animation:planetSpin 8s linear infinite; margin-right:4px; }
@keyframes planetSpin { to{transform:rotate(360deg)} }

/* ── SHAPE HOLOGRAM ── */
.shape-holo {
  position:relative; aspect-ratio: 5 / 3;
  border-radius:14px;
  background:
    radial-gradient(ellipse at center, rgba(124,58,237,.18), transparent 70%),
    linear-gradient(180deg, rgba(15,23,42,.85), rgba(8,12,32,.85));
  border:1px solid rgba(124,58,237,.2);
  box-shadow: inset 0 0 40px rgba(124,58,237,.1);
  overflow:hidden;
  animation: shapePulse 3s ease-in-out infinite alternate;
}
@keyframes shapePulse {
  from { box-shadow: inset 0 0 30px rgba(124,58,237,.08), 0 0 0 rgba(124,58,237,0); }
  to   { box-shadow: inset 0 0 50px rgba(124,58,237,.18), 0 0 14px rgba(124,58,237,.15); }
}
.shape-holo::before {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 0%, rgba(96,165,250,.1) 50%, transparent 100%);
  animation: scanSweep 3.2s linear infinite; pointer-events:none;
}
@keyframes scanSweep { 0%{transform:translateY(-100%)} 100%{transform:translateY(100%)} }
.corner { position:absolute; width:14px; height:14px; border:2px solid #7c3aed; }
.c-tl { top:8px; left:8px; border-right:none; border-bottom:none; border-radius:4px 0 0 0; }
.c-tr { top:8px; right:8px; border-left:none; border-bottom:none; border-radius:0 4px 0 0; }
.c-bl { bottom:8px; left:8px; border-right:none; border-top:none; border-radius:0 0 0 4px; }
.c-br { bottom:8px; right:8px; border-left:none; border-top:none; border-radius:0 0 4px 0; }
.shape-svg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.shape-svg svg { width:78%; height:78%; overflow:visible; }
.shape-path {
  fill:url(#shapeGrad); stroke:#c4b5fd; stroke-width:3;
  stroke-linejoin:round;
  filter: drop-shadow(0 0 12px rgba(167,139,250,.5));
  animation: shapeFloat 4s ease-in-out infinite alternate;
}
@keyframes shapeFloat { from{transform:translateY(-4px)} to{transform:translateY(4px)} }

/* ════════════════════════
   ANSWER BUTTONS
════════════════════════ */
.answers { padding:10px 14px 0; display:flex; flex-direction:column; gap:9px; }
.ans-btn {
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.1);
  border-radius:15px; padding:13px 14px;
  color:#fff; font-size:.92rem; font-weight:700;
  cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:11px;
  transition:all .15s; width:100%;
  animation:ansIn .35s cubic-bezier(.34,1.56,.64,1) both;
  position:relative; overflow:hidden;
}
.ans-btn:nth-child(1){animation-delay:.05s}
.ans-btn:nth-child(2){animation-delay:.10s}
.ans-btn:nth-child(3){animation-delay:.15s}
.ans-btn:nth-child(4){animation-delay:.20s}
@keyframes ansIn { from{opacity:0;transform:translateX(-16px)} to{opacity:1;transform:translateX(0)} }
.ans-btn:hover:not(:disabled) { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); transform:translateX(3px); }
.ans-btn:disabled { cursor:default; }
.ans-btn.correct { background:rgba(34,197,94,.15); border-color:#22c55e; box-shadow:0 0 22px rgba(34,197,94,.25); animation:bounceIn .4s cubic-bezier(.34,1.56,.64,1); }
.ans-btn.wrong   { background:rgba(239,68,68,.15);  border-color:#ef4444; box-shadow:0 0 18px rgba(239,68,68,.25); animation:shakeAns .45s ease; }
.ans-btn.reveal  { background:rgba(34,197,94,.07);  border-color:rgba(34,197,94,.3); opacity:.75; }
.ans-btn.opp-correct { border-color:#fbbf24; background:rgba(251,191,36,.08); }
.ans-btn.opp-wrong { border-color:#94a3b8; background:rgba(148,163,184,.1); opacity:.9; }
.ans-btn.selected:not(.correct):not(.wrong) { background:rgba(124,58,237,.22); border-color:rgba(167,139,250,.7); box-shadow:0 0 18px rgba(124,58,237,.32); animation:orbTapPop .2s cubic-bezier(.34,1.56,.64,1); }
@keyframes orbTapPop { 0%{transform:scale(1)} 55%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes bounceIn { 0%{transform:scale(.95)} 50%{transform:scale(1.04)} 100%{transform:scale(1)} }
@keyframes shakeAns { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(4px)} }

.ans-letter {
  width:28px; height:28px; border-radius:9px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:.78rem; flex-shrink:0;
  transition:all .2s;
}
.ans-btn.correct .ans-letter { background:rgba(34,197,94,.3); border-color:#22c55e; }
.ans-btn.wrong   .ans-letter { background:rgba(239,68,68,.3);  border-color:#ef4444; }
.ans-btn.selected:not(.correct):not(.wrong) .ans-letter { background:rgba(124,58,237,.3); border-color:rgba(167,139,250,.6); }
.ans-txt { flex:1; line-height:1.35; min-width:0; overflow-wrap:anywhere; word-break:normal; }
.ans-indicators { margin-left:auto; display:flex; gap:4px; flex-shrink:0; }
.ind {
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.6rem; opacity:0; transition:opacity .3s, transform .3s;
  transform:scale(.5);
}
.ind.show { opacity:1; transform:scale(1); }
.ind-you { background:rgba(59,130,246,.25); color:#60a5fa; border:1px solid rgba(59,130,246,.4); }
.ind-opp { background:rgba(167,139,250,.25); color:#a78bfa; border:1px solid rgba(167,139,250,.4); }

/* ── EVENT FEED ── */
.event-feed { padding:10px 14px 0; min-height:28px; text-align:center; }
.event-msg {
  font-size:.75rem; font-weight:700; padding:5px 12px;
  border-radius:20px; display:inline-block;
  animation:eventPop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes eventPop { from{opacity:0;transform:scale(.7)} to{opacity:1;transform:scale(1)} }
.event-msg.hit   { background:rgba(34,197,94,.15); border:1px solid rgba(34,197,94,.3); color:#4ade80; }
.event-msg.block { background:rgba(239,68,68,.15); border:1px solid rgba(239,68,68,.3); color:#f87171; }
.event-msg.opp   { background:rgba(251,191,36,.12); border:1px solid rgba(251,191,36,.25); color:#fbbf24; }
.event-msg.draw  { background:rgba(100,116,139,.15); border:1px solid rgba(100,116,139,.3); color:#94a3b8; }

/* ── LIGHTNING ── */
.lightning {
  position:fixed; top:0; left:50%; transform:translateX(-50%);
  font-size:4rem; z-index:180; pointer-events:none; opacity:0;
}
.lightning.fire { animation:lightningStrike .6s ease; }
@keyframes lightningStrike {
  0%{opacity:0;transform:translateX(-50%) translateY(-30px) scale(.5)}
  30%{opacity:1;transform:translateX(-50%) translateY(20px) scale(1.3)}
  70%{opacity:.8;transform:translateX(-50%) translateY(10px) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(60px) scale(.6)}
}

/* ── ROUND END OVERLAY ── */
.round-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(8,10,32,.93); backdrop-filter:blur(20px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .35s;
}
.round-overlay.show { opacity:1; pointer-events:all; }
.ro-icon { font-size:3.5rem; animation:iconBounce .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes iconBounce { from{transform:scale(0)} to{transform:scale(1)} }
.ro-title { font-size:1.5rem; font-weight:900; }
.ro-title.win  { color:#4ade80; text-shadow:0 0 24px rgba(74,222,128,.5); }
.ro-title.lose { color:#f87171; text-shadow:0 0 24px rgba(248,113,113,.5); }
.ro-title.draw { color:#fbbf24; text-shadow:0 0 24px rgba(251,191,36,.5); }
.ro-sub { color:#64748b; font-size:.88rem; line-height:1.5; max-width:280px; }
.ro-scores {
  display:flex; gap:28px; align-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:16px 28px;
}
.ros { text-align:center; }
.ros-n { font-size:2rem; font-weight:900; }
.ros-n.blue  { color:#60a5fa; text-shadow:0 0 16px rgba(96,165,250,.5); }
.ros-n.violet{ color:#c4b5fd; text-shadow:0 0 16px rgba(196,181,253,.5); }
.ros-l { font-size:.65rem; color:#475569; font-weight:700; margin-top:2px; }
.ro-divider { font-size:1.5rem; color:#475569; font-weight:900; }
.btn-cont {
  padding:13px 36px; border-radius:14px; border:none;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff; font-size:.95rem; font-weight:800;
  cursor:pointer; box-shadow:0 6px 20px rgba(124,58,237,.4);
  transition:transform .15s; letter-spacing:.3px;
}
.btn-cont:hover { transform:scale(1.05); }

/* ── FINAL OVERLAY ── */
.final-overlay {
  position:fixed; inset:0; z-index:400;
  background:rgba(6,8,28,.98); backdrop-filter:blur(24px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:18px; padding:36px; text-align:center;
  opacity:0; pointer-events:none; transition:opacity .4s;
}
.final-overlay.show { opacity:1; pointer-events:all; }
.final-trophy { font-size:5rem; animation:trophyFloat 2.5s ease-in-out infinite; }
@keyframes trophyFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }
.final-title { font-size:2.2rem; font-weight:900; line-height:1.1; }
.final-title.win  { background:linear-gradient(135deg,#fbbf24,#fef3c7,#f59e0b); background-size:200%; -webkit-background-clip:text; -webkit-text-fill-color:transparent; animation:goldS 2s linear infinite; }
.final-title.lose { color:#f87171; }
.final-title.draw { color:#94a3b8; }
@keyframes goldS { 0%{background-position:0%} 100%{background-position:200%} }
.final-sub { color:#64748b; font-size:.92rem; line-height:1.5; max-width:280px; }
.final-stats { display:flex; gap:12px; }
.fstat { display:flex; flex-direction:column; align-items:center; gap:4px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:14px 18px; }
.fstat-n { font-size:1.6rem; font-weight:900; }
.fstat-l { font-size:.6rem; color:#475569; font-weight:700; text-transform:uppercase; letter-spacing:.5px; }
.final-btns { display:flex; gap:10px; margin-top:4px; }
.btn-rematch {
  flex:1; padding:13px 18px; border-radius:14px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
  color:#e2e8f0; font-size:.9rem; font-weight:700; cursor:pointer;
}
.btn-home {
  flex:1; padding:13px 18px; border-radius:14px; border:none;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  color:#fff; font-size:.9rem; font-weight:700; cursor:pointer;
  box-shadow:0 6px 20px rgba(124,58,237,.4);
}

/* ── BOTTOM NAV ── */
nav {
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:420px;
  background:rgba(10,14,39,.92); backdrop-filter:blur(16px);
  border-top:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-around;
  padding:8px 0 max(12px,env(safe-area-inset-bottom)); z-index:100;
}
.nav-item { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.65rem; color:#64748b; cursor:pointer; text-decoration:none; }
.nav-item.active { color:#a78bfa; }
.nav-item span { font-size:1.3rem; }
.nav-orb {
  width:52px; height:52px;
  background:linear-gradient(135deg,#7c3aed,#4f46e5);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; box-shadow:0 0 20px rgba(124,58,237,.6);
  margin-top:-20px; border:3px solid rgba(10,14,39,.9);
  cursor:pointer; text-decoration:none;
  animation:orbPulse 2s ease-in-out infinite alternate;
}
@keyframes orbPulse { from{box-shadow:0 0 14px rgba(124,58,237,.5)} to{box-shadow:0 0 30px rgba(124,58,237,.9)} }

.orbitalni-shapes-load {
  position: fixed; inset: 0; z-index: 400;
  display: none; align-items: center; justify-content: center;
  background: rgba(10,14,39,.92); backdrop-filter: blur(10px);
}
.orbitalni-shapes-load.show { display: flex; }
.orbitalni-shapes-load-inner {
  font-size: 0.85rem; font-weight: 700; color: #94a3b8; letter-spacing: 0.02em;
}

/* Online duel (server state): nema lokalnog HP — runda koristi server roundEndTime / roundPublic (kao Slovons/ZG). */
/* Kratko stanje pre meča (bez duplog UI lobija — kreiranje/ulaz samo u duel-room-lobby). */
.orbital-match-wait {
  display: none;
  padding: 12px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.orbital-match-wait.show { display: block; }
.orbital-match-wait-txt {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 0 0 8px;
  line-height: 1.45;
  font-weight: 600;
}
.orbital-match-wait-link {
  font-size: 0.74rem;
  color: #c4b5fd;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(167,139,250,.45);
}
.orbital-match-wait-link:hover { color: #e9d5ff; }

/* ════════════════════════════════════════════
   ORBITAL SHAPE DUEL — COSMETIC UPGRADE
════════════════════════════════════════════ */

/* Hide nav + page padding reset */
nav { display: none !important; }
/* ─── PAGE SHELL ─── */
.gp-page {
  position: relative; z-index: 5;
  max-width: 430px; margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 18px 28px;
  display: flex; flex-direction: column;
  gap: 10px; min-height: 100dvh;
  background: transparent;
}

/* ─── TOPBAR OVERRIDES ─── */
.gp-topbar {
  position: relative !important;
  background: transparent !important;
  padding: 0 0 4px !important;
}
.gp-topbar .timer-ring-wrap { width: 48px; height: 48px; flex-shrink: 0; }
.gp-topbar .timer-ring-wrap svg { width: 100%; height: 100%; }
.gp-topbar .timer-num { font-size: 15px; }
.gp-mode-pill img {
  width: 20px; height: 20px;
  object-fit: contain; border-radius: 4px; flex-shrink: 0;
}

/* ─── TIMER RING ─── */
.timer-ring-wrap {
  width: 72px; height: 72px;
  display: grid; place-items: center; position: relative;
  align-self: center; flex-shrink: 0;
}
.timer-ring-wrap svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer-bg  { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 5; }
.timer-arc {
  fill: none; stroke: url(#obTimerGrad); stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 194.78;
  stroke-dashoffset: 194.78;
  transition: stroke-dashoffset 0.18s linear, stroke .2s;
}
.timer-num {
  font-size: 20px; font-weight: 900; color: #fff;
  position: relative; z-index: 2; line-height: 1;
}
.timer-ring-wrap.warn  .timer-arc { stroke: #f59e0b; }
.timer-ring-wrap.danger .timer-arc { stroke: #ff4f6d; }
.timer-ring-wrap.danger .timer-num { color: #ff4f6d; }

/* ─── ROUND COUNTER ─── */
.gp-round { padding: 0; }
.gp-round-label {
  font-size: 11px; font-weight: 900; letter-spacing: 0.18em;
  text-transform: uppercase; color: #fff;
  text-align: center; padding: 0; margin: 0; line-height: 1.2;
}
.gp-round-value { display: none; }

/* ─── MCQ BATTLE HEADER ─── */
.mcq-battle-header {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 52px minmax(0, 1fr);
  gap: 8px; align-items: center;
}
.mcq-player-card {
  height: 92px; min-width: 0; padding: 9px;
  border-radius: 24px; overflow: visible;
  background:
    linear-gradient(180deg, rgba(22,36,82,0.9), rgba(13,20,52,0.94)) padding-box,
    linear-gradient(135deg, #68b7ff 0%, #7d54ff 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(100,183,255,0.15), 0 4px 24px rgba(0,0,0,.3);
}
.mcq-player-card.is-rival {
  background:
    linear-gradient(180deg, rgba(54,22,67,0.9), rgba(22,13,42,0.94)) padding-box,
    linear-gradient(135deg, #ff4fb8 0%, #8a5cff 100%) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 28px rgba(255,79,184,0.15), 0 4px 24px rgba(0,0,0,.3);
}
.mcq-player-inner {
  height: 100%; display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px; align-items: center; min-width: 0;
}
.mcq-player-card.is-rival .mcq-player-inner {
  grid-template-columns: minmax(0, 1fr) 68px;
}
.mcq-avatar { width: 68px; height: 68px; position: relative; overflow: visible; flex-shrink: 0; }
.mcq-avatar-ring {
  position: absolute; inset: 0; border-radius: 999px; overflow: hidden;
  border: 3px solid var(--avatar-ring, rgba(104,183,255,0.7));
}
.mcq-avatar-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
  transform: scale(1.23) translateY(1px);
}
.mcq-player-card:not(.is-rival) .mcq-avatar-img {
  transform: scale(1.50) translateY(2px);
}
.mcq-avatar-badge {
  position: absolute; right: -5px; bottom: -5px;
  width: 26px; height: 26px; border-radius: 999px; z-index: 5;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #9b5cff, #651cff);
  border: 2.5px solid #070b20;
  box-shadow: 0 0 10px rgba(145,80,255,0.7);
}
.mcq-player-info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mcq-player-card.is-rival .mcq-player-info { align-items: flex-end; }
.mcq-player-name {
  font-size: 14px; font-weight: 900;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: rgba(255,255,255,0.88); min-width: 0;
}
.mcq-player-score {
  font-size: 42px; line-height: 0.95; font-weight: 950;
  letter-spacing: -0.02em; color: #68b7ff;
}
.mcq-player-card.is-rival .mcq-player-score { color: #ff4fb8; }
.mcq-player-card .progress-track {
  width: 100%; height: 5px; border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: none; overflow: hidden; margin-top: 1px;
}
.mcq-player-card .progress-track::before { height: 100%; border-radius: inherit; box-shadow: none; }
.mcq-player-card:not(.is-rival) .progress-track::before { background: linear-gradient(90deg, #5fa8ff, #7d54ff); }
.mcq-player-card.is-rival       .progress-track::before { background: linear-gradient(90deg, #ff4fb8, #8a5cff); }
.mcq-player-card .progress-track::after { display: none; }

/* ─── VS PILL ─── */
.mcq-vs-pill {
  width: 52px; height: 52px; border-radius: 18px;
  display: grid; place-items: center; justify-self: center;
  font-size: 22px; font-weight: 900; color: #d9c2ff;
  background: linear-gradient(180deg, rgba(76,38,130,0.85), rgba(27,18,64,0.95));
  border: 1px solid rgba(177,112,255,0.55);
  box-shadow: 0 0 20px rgba(150,70,255,0.45), inset 0 0 14px rgba(255,255,255,0.07);
}

/* ─── MATCH PROGRESS ─── */
.gp-match-progress { padding: 2px 0; }

/* ─── RIVAL BAR ─── */
.gp-rival-bar {
  border-radius: 18px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(10,14,36,0.85);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.gp-rival-bar .mcq-avatar { width: 40px !important; height: 40px !important; }
.gp-rival-text { flex: 1; font-size: 14px; font-weight: 800; color: #ff4fb8; }
.gp-rival-dots { display: flex; gap: 5px; align-items: center; }
.gp-rival-dots span {
  width: 6px; height: 6px; border-radius: 999px;
  background: rgba(255,79,184,0.6);
  animation: gpDotPulse 1.4s ease-in-out infinite;
}
.gp-rival-dots span:nth-child(2) { animation-delay: .2s; }
.gp-rival-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes gpDotPulse {
  0%,80%,100% { opacity:.25; transform:scale(.7); }
  40%          { opacity:1;   transform:scale(1.2); }
}
.gp-rival-check {
  display: none; width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  place-items: center; font-size: 16px; font-weight: 900; color: #34ef8a;
  background: rgba(52,239,138,0.12);
  border: 1.5px solid rgba(52,239,138,0.4);
  box-shadow: 0 0 12px rgba(52,239,138,0.35);
}
.gp-rival-bar.rival-answered .gp-rival-dots  { display: none; }
.gp-rival-bar.rival-answered .gp-rival-check { display: grid; }
.gp-rival-bar.rival-answered .gp-rival-text  { color: #34ef8a; }

/* ─── QUESTION CARD (SHAPE) ─── */
.ob-question-card {
  border-radius: 28px; padding: 18px 16px 16px;
  position: relative; overflow: hidden;
  background:
    linear-gradient(160deg, rgba(18,24,64,0.94) 0%, rgba(10,15,42,0.97) 100%) padding-box,
    linear-gradient(135deg, rgba(104,183,255,0.4), rgba(150,75,255,0.35), rgba(255,65,175,0.3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 0 40px rgba(100,80,255,0.12), 0 8px 32px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 12px;
  /* override old q-card styles */
  background-color: unset;
  padding: 18px 16px 16px;
}
.ob-question-card::before { display: none; }
.ob-question-card::after  { display: none; }
.ob-card-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(124,58,237,0.18); border: 1px solid rgba(124,58,237,0.3);
  border-radius: 999px; padding: 4px 12px;
  font-size: 12px; font-weight: 800; color: #c4b5fd;
  align-self: flex-start;
}
.ob-question-card .q-prompt {
  font-size: 16px; font-weight: 900; color: rgba(220,210,255,0.92);
  text-align: center; line-height: 1.3; margin: 0;
}
.ob-question-card .q-prompt .planet { display: none; }

/* ─── ANSWER GRID 2×2 ─── */
.answers {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  padding: 0 !important;
}
.answers > * {
  min-width: 0 !important;
}
.ans-btn {
  min-height: 76px !important;
  border-radius: 22px !important;
  padding: 12px !important;
  background: rgba(14,20,54,0.9) !important;
  border: 1.5px solid rgba(120,95,255,0.38) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.3), inset 0 0 18px rgba(100,90,255,0.04) !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  transform: none !important;
  animation: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.ans-btn:hover:not(:disabled) {
  transform: none !important;
  background: rgba(20,28,70,0.95) !important;
  border-color: rgba(160,120,255,0.55) !important;
}
.ans-letter {
  width: 40px !important; height: 40px !important;
  border-radius: 13px !important;
  background: linear-gradient(160deg, #a47cff, #6830e0) !important;
  border: none !important;
  box-shadow: 0 0 16px rgba(130,80,255,0.5), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  font-size: 17px !important; font-weight: 900 !important;
  color: #fff !important;
}
.ans-btn.correct {
  padding-right: clamp(52px, 14vw, 66px) !important;
  min-height: clamp(82px, 20vw, 104px) !important;
  background: linear-gradient(160deg, rgba(8,44,26,0.95), rgba(5,24,15,0.98)) !important;
  border-color: #34ef8a !important;
  box-shadow: 0 0 26px rgba(52,239,138,0.38), inset 0 0 24px rgba(52,239,138,0.07) !important;
  animation: bounceIn .4s cubic-bezier(.34,1.56,.64,1) !important;
}
.ans-btn.correct .ans-letter {
  background: linear-gradient(160deg, #2ecc71, #16a34a) !important;
  box-shadow: 0 0 18px rgba(52,239,138,0.6) !important;
}
.ans-btn.correct::after {
  content: "✓";
  position: absolute;
  right: clamp(10px, 3vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  color: #34ef8a;
  border: 2px solid rgba(52,239,138,0.55);
  box-shadow: 0 0 14px rgba(52,239,138,0.65);
  pointer-events: none;
}
.ans-btn.wrong {
  padding-right: clamp(52px, 14vw, 66px) !important;
  min-height: clamp(82px, 20vw, 104px) !important;
  background: linear-gradient(160deg, rgba(44,8,16,0.95), rgba(24,5,10,0.98)) !important;
  border-color: #ff4f6d !important;
  box-shadow: 0 0 26px rgba(255,79,109,0.38), inset 0 0 24px rgba(255,79,109,0.07) !important;
  animation: answerWrongShake .45s ease !important;
}
.ans-btn.wrong .ans-letter {
  background: linear-gradient(160deg, #ff4f6d, #991b35) !important;
  box-shadow: 0 0 18px rgba(255,79,109,0.6) !important;
}
.ans-btn.wrong::after {
  content: "×";
  position: absolute;
  right: clamp(10px, 3vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0;
  width: clamp(28px, 8vw, 36px);
  height: clamp(28px, 8vw, 36px);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 900;
  color: #ff4f6d;
  border: 2px solid rgba(255,79,109,0.55);
  box-shadow: 0 0 14px rgba(255,79,109,0.65);
  pointer-events: none;
}
.ans-btn.reveal {
  background: rgba(14,20,54,0.7) !important;
  border-color: rgba(52,239,138,0.3) !important; opacity: .75;
}
.ans-btn.opp-correct {
  border-color: #fbbf24 !important;
  background: rgba(251,191,36,0.08) !important;
}
.ans-btn.opp-wrong {
  border-color: rgba(148,163,184,0.4) !important;
  background: rgba(148,163,184,0.06) !important; opacity: .9;
}
.ans-btn.selected:not(.correct):not(.wrong) {
  padding-right: clamp(52px, 14vw, 66px) !important;
  min-height: clamp(82px, 20vw, 104px) !important;
  background: linear-gradient(160deg, rgba(70,15,80,0.88), rgba(18,8,36,0.95)) !important;
  border-color: #b855f7 !important;
  box-shadow: 0 0 26px rgba(184,85,247,0.4), inset 0 0 24px rgba(184,85,247,0.08) !important;
  animation: orbTapPop .2s cubic-bezier(.34,1.56,.64,1) !important;
}
.ans-btn.selected:not(.correct):not(.wrong) .ans-letter {
  background: linear-gradient(160deg, #c855f7, #7c1ccc) !important;
  box-shadow: 0 0 18px rgba(184,85,247,0.55) !important;
}

@media (max-width: 430px) {
  .answers:has(> .ans-btn.correct),
  .answers:has(> .ans-btn.wrong),
  .answers:has(> .ans-btn.selected) {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .answers:has(> .ans-btn.correct) > *,
  .answers:has(> .ans-btn.wrong) > *,
  .answers:has(> .ans-btn.selected) > * {
    grid-column: 1 / -1 !important;
  }

  .answers:has(> .ans-btn.correct) > .ans-btn:not(.correct):not(.wrong):not(.selected),
  .answers:has(> .ans-btn.wrong) > .ans-btn:not(.correct):not(.wrong):not(.selected),
  .answers:has(> .ans-btn.selected) > .ans-btn:not(.correct):not(.wrong):not(.selected) {
    min-height: clamp(45px, 12vw, 50px) !important;
    padding: 6px 10px !important;
    gap: 6px !important;
  }

  .ans-btn.wrong,
  .ans-btn.selected:not(.correct):not(.wrong) {
    min-height: clamp(52px, 14vw, 60px) !important;
    padding: 7px clamp(42px, 11vw, 50px) 7px 10px !important;
    gap: 7px !important;
  }

  .ans-btn.correct {
    min-height: clamp(60px, 16vw, 68px) !important;
    padding: 9px clamp(42px, 11vw, 50px) 9px 10px !important;
    gap: 8px !important;
  }

  .ans-letter {
    width: clamp(38px, 9.6vw, 42px) !important;
    height: clamp(38px, 9.6vw, 42px) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
  }

  .ans-btn.correct::after,
  .ans-btn.wrong::after {
    right: clamp(8px, 2.6vw, 10px);
    width: clamp(30px, 7.6vw, 32px);
    height: clamp(30px, 7.6vw, 32px);
    font-size: 17px;
  }

  .ans-btn.wrong {
    box-shadow: 0 0 23px rgba(255,79,109,0.34), inset 0 0 22px rgba(255,79,109,0.063) !important;
  }

  .ans-btn.wrong .ans-letter {
    box-shadow: 0 0 16px rgba(255,79,109,0.54) !important;
  }

  .ans-btn.wrong::after {
    box-shadow: 0 0 13px rgba(255,79,109,0.59);
  }

  .ans-btn.correct .ans-txt,
  .ans-btn.wrong .ans-txt,
  .ans-btn.selected .ans-txt,
  .answers:has(> .ans-btn.correct) > .ans-btn:not(.correct):not(.wrong):not(.selected) .ans-txt,
  .answers:has(> .ans-btn.wrong) > .ans-btn:not(.correct):not(.wrong):not(.selected) .ans-txt,
  .answers:has(> .ans-btn.selected) > .ans-btn:not(.correct):not(.wrong):not(.selected) .ans-txt {
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.24;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .gp-page:has(.answers > .ans-btn.correct) .ob-question-card,
  .gp-page:has(.answers > .ans-btn.wrong) .ob-question-card,
  .gp-page:has(.answers > .ans-btn.selected) .ob-question-card {
    padding: 10px;
    gap: 7px;
    border-radius: 20px;
  }

  .gp-page:has(.answers > .ans-btn.correct) .ob-question-card .q-prompt,
  .gp-page:has(.answers > .ans-btn.wrong) .ob-question-card .q-prompt,
  .gp-page:has(.answers > .ans-btn.selected) .ob-question-card .q-prompt {
    font-size: clamp(14px, 4.3vw, 16px);
    line-height: 1.24;
  }

  .gp-page:has(.answers > .ans-btn.correct) .shape-holo,
  .gp-page:has(.answers > .ans-btn.wrong) .shape-holo,
  .gp-page:has(.answers > .ans-btn.selected) .shape-holo {
    min-height: 92px;
    max-height: 116px;
  }

  .gp-page:has(.answers > .ans-btn.correct) .gp-rival-bar,
  .gp-page:has(.answers > .ans-btn.wrong) .gp-rival-bar,
  .gp-page:has(.answers > .ans-btn.selected) .gp-rival-bar {
    min-height: 50px;
    padding: 7px 10px;
    margin-top: 6px;
  }

  .gp-page:has(.answers > .ans-btn.correct) .gp-rival-bar .mcq-avatar,
  .gp-page:has(.answers > .ans-btn.wrong) .gp-rival-bar .mcq-avatar,
  .gp-page:has(.answers > .ans-btn.selected) .gp-rival-bar .mcq-avatar {
    width: 36px !important;
    height: 36px !important;
  }

  .mcq-player-card {
    height: 84px;
    padding: 7px;
  }

  .mcq-player-inner {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 7px;
  }

  .mcq-player-card.is-rival .mcq-player-inner {
    grid-template-columns: minmax(0, 1fr) 58px;
  }

  .mcq-avatar {
    width: 58px;
    height: 58px;
  }

  .mcq-avatar-ring {
    border-width: 2.5px;
  }

  .mcq-avatar-badge {
    width: 22px;
    height: 22px;
    right: -4px;
    bottom: -4px;
    font-size: 10px;
  }

  .mcq-player-score {
    font-size: 34px;
  }

  .mcq-vs-pill {
    width: 44px;
    height: 44px;
    border-radius: 15px;
    font-size: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ans-btn.wrong {
    animation: none !important;
  }
}