/* ═══════════════════════════════════════
   MEDIA OMNI — QUIZ CSS
═══════════════════════════════════════ */
body { background: var(--paper); }
#main-nav { background:rgba(5,15,44,.95); backdrop-filter:blur(20px); border-bottom-color:rgba(255,255,255,.08); }

/* ── PAGES ── */
.q-page { display:none; max-width:1200px; margin:0 auto; padding:88px 24px 40px; }
.q-page.active { display:block; }

/* ── HUB ── */
.hub-title { font-family:var(--f-display); font-size:1.8rem; font-weight:800; letter-spacing:-.03em; margin-bottom:6px; }
.hub-sub { font-size:.9rem; color:var(--muted); margin-bottom:36px; }
.type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:36px; }
.type-card { background:var(--white); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:28px; cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s; }
.type-card:hover { transform:translateY(-4px); box-shadow:0 12px 36px rgba(37,99,235,.1); border-color:rgba(37,99,235,.3); }
.type-card.disabled { opacity:.55; cursor:not-allowed; }
.type-card.disabled:hover { transform:none; box-shadow:none; border-color:var(--border); }
.tc-ic { font-size:1.75rem; margin-bottom:14px; }
.tc-tt { font-family:var(--f-display); font-size:.95rem; font-weight:700; margin-bottom:6px; letter-spacing:-.02em; }
.tc-ds { font-size:.82rem; color:var(--muted); line-height:1.65; margin-bottom:14px; }

/* ── BENCH SETUP ── */
.bench-setup { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; }
.bench-setup h2 { font-family:var(--f-display); font-size:1.25rem; font-weight:800; margin-bottom:6px; }
.bench-setup p { font-size:.88rem; color:var(--muted); margin-bottom:24px; }
.filter-label { font-family:var(--f-mono); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px; }
.filter-group { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.fb { padding:.6rem 1rem; border-radius:var(--r-sm); border:1.5px solid var(--border); background:var(--paper); color:var(--muted); font-weight:600; font-size:.82rem; cursor:pointer; transition:all .15s; font-family:var(--f-body); }
.fb:hover { border-color:rgba(37,99,235,.4); color:var(--blue); }
.fb.ap { border-color:var(--blue); background:var(--border2); color:var(--blue); }
.start-btn { width:100%; padding:14px; background:var(--g-blue); color:var(--white); border:none; border-radius:var(--r-pill); font-family:var(--f-body); font-weight:700; font-size:.95rem; box-shadow:0 4px 20px rgba(37,99,235,.35); transition:opacity .18s,transform .2s; }
.start-btn:hover { opacity:.9; transform:translateY(-2px); }

/* ── BENCH QUIZ ── */
.bench-quiz { display:none; max-width:640px; margin:0 auto; }
.bq-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.bq-round { font-size:.78rem; color:var(--muted); font-weight:500; }
.bq-quit { background:none; border:1px solid var(--border); color:var(--muted); padding:.4rem .85rem; border-radius:var(--r-sm); font-size:.78rem; font-family:var(--f-body); transition:border-color .18s,color .18s; }
.bq-quit:hover { border-color:var(--error); color:var(--error); }
.scoreboard { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px; }
.sb-item { background:var(--white); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 8px; text-align:center; }
.sb-val { font-family:var(--f-display); font-size:1.2rem; font-weight:800; display:block; }
.sb-lbl { font-family:var(--f-mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-top:2px; display:block; }
.sb-ok .sb-val{color:var(--success)} .sb-fail .sb-val{color:var(--error)} .sb-left .sb-val{color:var(--warning)} .sb-str .sb-val{color:#6366f1} .sb-tot .sb-val{color:var(--muted)}
.badges-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.rbadge { display:inline-flex; align-items:center; gap:.35rem; font-family:var(--f-mono); font-size:.68rem; font-weight:600; padding:.25rem .7rem; border-radius:var(--r-pill); text-transform:uppercase; letter-spacing:.06em; }
.rbadge-green { background:rgba(16,185,129,.1); color:var(--success); border:1px solid rgba(16,185,129,.2); }
.rbadge-red   { background:rgba(239,68,68,.1);  color:var(--error);   border:1px solid rgba(239,68,68,.2); }
.streak-flash { text-align:center; font-size:.8rem; font-weight:700; color:#6366f1; padding:.5rem; border-radius:var(--r-sm); background:rgba(99,102,241,.08); margin-bottom:10px; display:none; }
/* Timer */
.timer-wrap { margin-bottom:12px; }
.timer-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.timer-lbl { font-size:.75rem; color:var(--muted); }
.timer-cnt { font-family:var(--f-mono); font-size:.88rem; font-weight:700; color:var(--warning); }
.timer-cnt.warn { color:var(--error); animation:blink .5s infinite alternate; }
@keyframes blink { from{opacity:1}to{opacity:.3} }
.timer-bar { height:5px; background:var(--border); border-radius:3px; overflow:hidden; }
.timer-fill { height:100%; border-radius:3px; transition:width 1s linear; }
.tf-ok   { background:linear-gradient(90deg,var(--success),#34d399); }
.tf-warn { background:linear-gradient(90deg,var(--warning),var(--error)); }
/* Progress */
.prog-wrap { margin-bottom:12px; }
.prog-top { display:flex; justify-content:space-between; margin-bottom:6px; }
.prog-lbl { font-size:.75rem; color:var(--muted); }
.prog-plat { font-family:var(--f-mono); font-size:.65rem; font-weight:700; padding:.2rem .6rem; border-radius:var(--r-pill); background:var(--border2); color:var(--blue); }
.prog-bar { height:4px; background:var(--border); border-radius:3px; overflow:hidden; }
.prog-fill { height:100%; border-radius:3px; transition:width .4s; background:var(--g-blue); }
/* Notices */
.notice { padding:.6rem 1rem; border-radius:var(--r-sm); font-size:.8rem; font-weight:600; text-align:center; display:none; margin-bottom:10px; }
.n-retry   { background:rgba(239,68,68,.06); border:1px solid rgba(239,68,68,.15); color:var(--error); }
.n-timeout { background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.2); color:var(--error); font-weight:700; }
/* Question card */
.q-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; margin-bottom:12px; }
.q-ctx { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.q-ctx-row { display:flex; align-items:center; gap:8px; }
.q-ctx-lbl { font-family:var(--f-mono); font-size:.6rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); width:90px; flex-shrink:0; }
.q-ctx-tag { font-family:var(--f-mono); font-size:.72rem; font-weight:600; padding:.18rem .55rem; border-radius:6px; }
.ct-p{background:var(--paper2);color:var(--ink)} .ct-o{background:rgba(16,185,129,.1);color:var(--success)} .ct-c{background:rgba(99,102,241,.1);color:#6366f1} .ct-a{background:rgba(245,158,11,.1);color:var(--warning)}
.q-divider { height:1px; background:var(--border); margin-bottom:14px; }
.q-rev-lbl { font-family:var(--f-mono); font-size:.65rem; font-weight:700; color:#6366f1; text-transform:uppercase; letter-spacing:.1em; margin-bottom:6px; display:none; }
.q-text { font-size:1rem; font-weight:600; line-height:1.65; color:var(--ink); }
.q-text strong { color:var(--blue); font-weight:800; }
/* Options */
.opts { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.opt { padding:.8rem 1rem; border-radius:var(--r-md); border:1.5px solid var(--border); background:var(--white); color:var(--ink); font-size:.875rem; font-weight:600; cursor:pointer; text-align:left; display:flex; align-items:center; gap:12px; transition:all .15s; width:100%; }
.opt:hover:not(.disabled) { border-color:var(--blue); background:var(--paper); }
.opt.correct { border-color:var(--success); background:rgba(16,185,129,.07); color:var(--success); }
.opt.wrong   { border-color:var(--error);   background:rgba(239,68,68,.07);   color:var(--error); }
.opt.faded   { opacity:.4; cursor:default; }
.opt.disabled{ cursor:default; }
.opt-lbl { min-width:24px; height:24px; border-radius:6px; background:var(--paper); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:800; flex-shrink:0; color:var(--muted); }
/* Bench verdict */
.bv-box { border-radius:var(--r-md); overflow:hidden; margin-bottom:12px; display:none; border:1px solid var(--border); }
.bv-row { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1rem; }
.bv-wrong { background:rgba(239,68,68,.05); } .bv-right { background:rgba(16,185,129,.05); }
.bv-lbl { font-family:var(--f-mono); font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); }
.bv-val { font-family:var(--f-display); font-size:1.1rem; font-weight:800; }
.bv-wrong .bv-val{color:var(--error)} .bv-right .bv-val{color:var(--success)}
/* Explain */
.exp-box { background:var(--border2); border:1px solid rgba(37,99,235,.2); border-radius:var(--r-md); padding:14px 16px; margin-bottom:12px; font-size:.82rem; line-height:1.7; display:none; }
.exp-lbl { font-family:var(--f-mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:5px; }
.btn-next { width:100%; padding:.875rem; border-radius:var(--r-md); border:none; font-weight:800; font-size:.9rem; cursor:pointer; background:var(--g-blue); color:var(--white); display:none; transition:opacity .2s,transform .2s; box-shadow:0 4px 16px rgba(37,99,235,.3); }
.btn-next:hover { opacity:.9; transform:translateY(-1px); }

/* ── BENCH RESULT ── */
.bench-result { display:none; max-width:600px; margin:0 auto; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:36px; text-align:center; }
.br-em { font-size:3.5rem; margin-bottom:12px; }
.br-name { font-family:var(--f-display); font-size:1rem; font-weight:700; color:var(--warning); }
.br-date { font-size:.78rem; color:var(--muted); margin-bottom:16px; }
.br-score { font-family:var(--f-display); font-size:4rem; font-weight:800; background:var(--g-blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin:.625rem 0; }
.br-grade { font-size:1rem; font-weight:700; margin-bottom:6px; }
.br-sub { font-size:.85rem; color:var(--muted); margin-bottom:20px; }
.chips-row { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:20px; }
.chip-c { padding:.28rem .7rem; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; }
.ch-g{background:rgba(16,185,129,.1);color:var(--success)} .ch-p{background:rgba(99,102,241,.1);color:#6366f1} .ch-b{background:var(--border2);color:var(--blue)} .ch-y{background:rgba(245,158,11,.1);color:var(--warning)} .ch-o{background:rgba(249,115,22,.1);color:#f97316}
.hard-list { background:rgba(239,68,68,.04); border:1px solid rgba(239,68,68,.12); border-radius:var(--r-md); padding:16px; margin-bottom:16px; text-align:left; display:none; }
.hl-title { font-family:var(--f-mono); font-size:.65rem; color:var(--error); font-weight:800; text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.hl-item { font-size:.78rem; color:var(--error); padding:.3rem 0; border-bottom:1px solid rgba(239,68,68,.08); line-height:1.5; }
.hl-item:last-child { border:none; }
.breakdown { background:var(--paper); border:1px solid var(--border); border-radius:var(--r-md); padding:16px; margin-bottom:16px; text-align:left; max-height:200px; overflow-y:auto; }
.bd-title { font-family:var(--f-mono); font-size:.62rem; color:var(--faint); text-transform:uppercase; letter-spacing:.08em; font-weight:600; margin-bottom:12px; }
.bd-item { display:flex; align-items:center; gap:10px; padding:.45rem 0; border-bottom:1px solid var(--border); font-size:.78rem; }
.bd-item:last-child { border:none; }
.bd-q { flex:1; color:var(--muted); line-height:1.4; }
.bd-p { font-family:var(--f-mono); font-size:.65rem; font-weight:700; padding:.18rem .5rem; border-radius:6px; white-space:nowrap; }
.bd-ok{background:rgba(16,185,129,.1);color:var(--success)} .bd-1{background:rgba(245,158,11,.1);color:var(--warning)} .bd-2{background:rgba(239,68,68,.1);color:var(--error)}
.copy-btn { width:100%; padding:.75rem; border-radius:var(--r-md); border:1.5px solid var(--border); background:transparent; color:var(--muted); font-weight:700; font-size:.875rem; margin-bottom:10px; transition:border-color .2s,color .2s; }
.copy-btn:hover { border-color:var(--blue); color:var(--blue); }
.copy-btn.done { border-color:var(--success); color:var(--success); }
.br-btns { display:flex; gap:10px; }
.btn-again { flex:1; padding:.875rem; border-radius:var(--r-md); border:none; background:var(--g-blue); color:var(--white); font-weight:800; font-size:.875rem; transition:opacity .18s; }
.btn-again:hover { opacity:.88; }
.btn-other { flex:1; padding:.875rem; border-radius:var(--r-md); border:1.5px solid var(--border); background:transparent; color:var(--muted); font-weight:700; font-size:.875rem; transition:border-color .2s,color .2s; }
.btn-other:hover { border-color:var(--blue); color:var(--blue); }

/* ── DANG 2 LAYOUT ── */
#d2-page { display:none; max-width:1200px; margin:0 auto; padding:88px 24px 40px; }
.q2-meta { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px 24px; margin-bottom:16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.q2-mi { display:flex; align-items:center; gap:6px; font-size:.82rem; }
.q2-ml { color:var(--muted); } .q2-mv { font-weight:700; color:var(--ink); }
.q2-pbar { flex:1; min-width:100px; height:7px; background:var(--border); border-radius:4px; overflow:hidden; }
.q2-pfill { height:100%; background:var(--g-blue); border-radius:4px; transition:width .4s; }
.q2-timer { font-family:var(--f-mono); font-weight:800; color:var(--blue); }
.q2-timer.warn { color:var(--error); animation:blink .5s infinite alternate; }
.d2-grid { display:grid; grid-template-columns:190px 1fr 210px; gap:16px; align-items:start; }
/* Left panel */
.d2-left { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; position:sticky; top:84px; }
.d2-panel-title { font-family:var(--f-mono); font-size:.6rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); margin-bottom:10px; }
.q-nav-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-bottom:14px; }
.qnb { width:32px; height:32px; border-radius:var(--r-sm); border:1.5px solid var(--border); background:var(--paper); font-family:var(--f-mono); font-size:.72rem; font-weight:700; color:var(--muted); display:flex; align-items:center; justify-content:center; transition:all .15s; }
.qnb:hover { border-color:var(--blue); color:var(--blue); }
.qnb.cur  { border-color:var(--blue); background:var(--blue); color:var(--white); }
.qnb.ok   { border-color:var(--success); background:rgba(16,185,129,.1); color:var(--success); }
.qnb.ng   { border-color:var(--error);   background:rgba(239,68,68,.1);  color:var(--error); }
.qnb.mk   { border-color:var(--warning); background:rgba(245,158,11,.1); color:var(--warning); }
.tag-chips { display:flex; flex-wrap:wrap; gap:4px; }
.tag-chip { font-family:var(--f-mono); font-size:.6rem; font-weight:600; padding:.18rem .5rem; border-radius:var(--r-pill); background:var(--border2); color:var(--blue); }
/* Center panel */
.d2-center { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:24px; }
.d2-q-header { font-family:var(--f-mono); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:10px; }
.d2-q-text { font-size:1.05rem; font-weight:600; line-height:1.65; margin-bottom:20px; color:var(--ink); }
.d2-opts { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.d2-opt { display:flex; align-items:center; gap:12px; padding:.8rem 1rem; border:1.5px solid var(--border); border-radius:var(--r-md); cursor:pointer; transition:all .15s; background:var(--white); width:100%; }
.d2-opt:hover:not(.disabled) { border-color:var(--blue); background:var(--paper); }
.d2-opt.selected { border-color:var(--blue); background:var(--border2); }
.d2-opt.correct  { border-color:var(--success); background:rgba(16,185,129,.07); }
.d2-opt.wrong    { border-color:var(--error);   background:rgba(239,68,68,.07); }
.d2-opt.disabled { cursor:default; }
.olet { width:28px; height:28px; border-radius:var(--r-sm); background:var(--paper); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.75rem; font-weight:800; color:var(--muted); flex-shrink:0; transition:all .15s; }
.d2-opt.selected .olet { background:var(--blue); color:var(--white); border-color:var(--blue); }
.d2-opt.correct .olet  { background:var(--success); color:var(--white); border-color:var(--success); }
.d2-opt.wrong .olet    { background:var(--error);   color:var(--white); border-color:var(--error); }
.otxt { font-size:.875rem; font-weight:500; color:var(--ink); flex:1; text-align:left; }
.d2-explain { background:var(--border2); border:1px solid rgba(37,99,235,.2); border-radius:var(--r-md); padding:14px 16px; display:none; margin-bottom:14px; }
.d2-exp-title { font-family:var(--f-mono); font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); margin-bottom:5px; }
.d2-exp-text { font-size:.84rem; color:var(--ink); line-height:1.7; }
.d2-actions { display:flex; gap:8px; align-items:center; }
.btn-prev { background:none; border:1.5px solid var(--border); color:var(--muted); padding:.65rem 1rem; border-radius:var(--r-sm); font-size:.82rem; font-weight:600; transition:border-color .18s,color .18s; }
.btn-prev:hover { border-color:var(--blue); color:var(--blue); }
.btn-mark { background:none; border:1.5px solid var(--warning); color:var(--warning); padding:.65rem 1rem; border-radius:var(--r-sm); font-size:.82rem; font-weight:600; }
.btn-next-q { background:var(--blue); color:var(--white); border:none; padding:.65rem 1.25rem; border-radius:var(--r-sm); font-size:.82rem; font-weight:700; margin-left:auto; transition:background .18s; }
.btn-next-q:hover { background:var(--blue2); }
/* Right panel */
.d2-right { position:sticky; top:84px; display:flex; flex-direction:column; gap:14px; }
.d2-right-card { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; }
.ring-wrap { text-align:center; margin-bottom:10px; position:relative; display:inline-block; left:50%; transform:translateX(-50%); }
.ring-wrap svg { transform:rotate(-90deg); }
.ring-txt { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-pct { font-family:var(--f-display); font-size:1.1rem; font-weight:800; color:var(--blue); }
.ring-ok  { font-family:var(--f-mono); font-size:.58rem; color:var(--success); font-weight:600; }
.stat-2col { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.stat-box { text-align:center; padding:.55rem .4rem; background:var(--paper); border-radius:var(--r-sm); }
.stat-val { font-family:var(--f-display); font-size:1.1rem; font-weight:800; color:var(--ink); }
.stat-lbl { font-family:var(--f-mono); font-size:.58rem; color:var(--faint); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }
.rules-list { display:flex; flex-direction:column; gap:6px; }
.rule-item { display:flex; align-items:flex-start; gap:6px; font-size:.75rem; color:var(--muted); line-height:1.5; }
.btn-submit { width:100%; padding:.875rem; background:var(--error); color:var(--white); border:none; border-radius:var(--r-sm); font-family:var(--f-body); font-weight:700; font-size:.84rem; display:flex; align-items:center; justify-content:center; gap:6px; transition:background .18s; }
.btn-submit:hover { background:#dc2626; }

/* ── RESULT ── */
#res-page { display:none; max-width:560px; margin:0 auto; padding:88px 24px 40px; text-align:center; }
.res-em { font-size:3.5rem; margin-bottom:12px; }
.res-title { font-family:var(--f-display); font-size:1.5rem; font-weight:800; margin-bottom:6px; }
.res-score { font-family:var(--f-display); font-size:4.5rem; font-weight:800; background:var(--g-blue); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin:.625rem 0; }
.res-grade { font-size:.9rem; color:var(--muted); margin-bottom:.3rem; }
.res-topic { font-size:.875rem; color:var(--blue); font-weight:700; margin-bottom:24px; }
.res-breakdown { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px; margin-bottom:20px; text-align:left; max-height:250px; overflow-y:auto; }
.rbd-title { font-family:var(--f-mono); font-size:.65rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:12px; }
.rbd-item { display:flex; align-items:center; gap:10px; padding:.45rem 0; border-bottom:1px solid var(--border); font-size:.82rem; }
.rbd-item:last-child { border:none; }
.rbd-n { font-family:var(--f-mono); font-size:.7rem; font-weight:700; color:var(--faint); width:18px; flex-shrink:0; }
.rbd-q { flex:1; color:var(--ink); line-height:1.4; }
.rbd-p { font-family:var(--f-mono); font-size:.65rem; font-weight:700; padding:.18rem .5rem; border-radius:6px; white-space:nowrap; }
.rbd-ok{background:rgba(16,185,129,.1);color:var(--success)} .rbd-ng{background:rgba(239,68,68,.1);color:var(--error)}
.res-actions { display:flex; gap:10px; justify-content:center; }
.btn-retry { background:none; border:1.5px solid var(--border); color:var(--ink); padding:.75rem 1.5rem; border-radius:var(--r-sm); font-weight:600; font-size:.875rem; transition:border-color .2s; }
.btn-retry:hover { border-color:var(--blue); }
.btn-hub { background:var(--g-blue); color:var(--white); border:none; padding:.75rem 1.5rem; border-radius:var(--r-sm); font-weight:700; font-size:.875rem; box-shadow:0 4px 16px rgba(37,99,235,.3); }

/* ── POPUP ── */
.popup-overlay { position:fixed; inset:0; background:rgba(5,15,44,.5); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; z-index:900; padding:20px; }
.popup-overlay.on { display:flex; }
.popup-box { background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; max-width:320px; width:100%; text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.2); }
.popup-title { font-family:var(--f-display); font-size:1.05rem; font-weight:800; margin-bottom:8px; }
.popup-sub { font-size:.84rem; color:var(--muted); line-height:1.6; margin-bottom:24px; }
.popup-btns { display:flex; gap:10px; }
.popup-yes { flex:1; padding:.75rem; border-radius:var(--r-sm); border:none; background:var(--error); color:var(--white); font-weight:800; font-size:.84rem; }
.popup-no  { flex:1; padding:.75rem; border-radius:var(--r-sm); border:1.5px solid var(--border); background:transparent; color:var(--muted); font-weight:700; font-size:.84rem; }

/* Responsive */
@media (max-width:1024px) { .d2-grid { grid-template-columns:1fr; } .d2-left,.d2-right { position:static; } .type-grid { grid-template-columns:1fr; } }
@media (max-width:768px) { .q-page,.#d2-page { padding:80px 16px 32px; } .scoreboard { grid-template-columns:repeat(3,1fr); } }