.g-card{background:var(--color-surface);border:1px solid var(--color-border-strong);max-width:760px;box-shadow:var(--shadow-lg);border-radius:28px;margin-inline:auto;padding:clamp(1.5rem,4vw,2.5rem)}.g-top{color:var(--color-text-muted);justify-content:space-between;gap:1rem;margin-bottom:1.75rem;font:600 .95rem/1 ui-monospace,monospace;display:flex}.g-q{font:600 clamp(1.3rem, 3vw, 1.75rem)/1.35 var(--font-display);color:var(--color-primary);margin:0 0 1.75rem}.g-duel{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}.g-pair{text-align:left;min-height:190px;transition:transform .25s var(--ease), border-color .2s;border:3px solid #0000;border-radius:20px;justify-items:start;gap:.5rem;padding:1.6rem;display:grid}.g-pair b{font:800 2.6rem/1 var(--font-display)}.g-pair span{font-size:1.1rem}.g-pair:not(:disabled):hover{border-color:var(--color-accent);transform:translateY(-4px)}.g-ratio{color:#fff;background:#0000008c;border-radius:999px;margin-top:auto;padding:.4rem .7rem;font:700 .95rem/1 ui-monospace,monospace}.g-pair.win,.g-opt.win{border-color:var(--color-ok)!important}.g-pair.lose,.g-opt.lose{opacity:.85;border-color:#f87171!important}.g-opts{gap:.8rem;display:grid}.g-opt{text-align:left;background:var(--color-surface-2);border:2px solid var(--color-border);color:var(--color-text);transition:border-color .2s, transform .2s var(--ease);border-radius:16px;padding:1.1rem 1.3rem;font-size:1.1rem;font-weight:500}.g-opt:not(:disabled):hover{border-color:var(--color-accent);transform:translate(4px)}.g-feedback{min-height:1.5rem;color:var(--color-text-muted);flex-wrap:wrap;align-items:center;gap:.75rem;margin-top:1.5rem;font-size:1.05rem;display:flex}.g-btn{font:600 1.05rem/1 var(--font-display);color:#fff;background:linear-gradient(120deg, var(--color-accent), var(--color-accent-hover));box-shadow:0 10px 28px -12px var(--glow);transition:transform .25s var(--ease);border-radius:999px;justify-content:center;align-items:center;padding:.85rem 1.6rem;text-decoration:none;display:inline-flex}.g-btn:hover{color:#fff;text-decoration:none;transform:translateY(-2px)}.g-ghost{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border-strong);box-shadow:none}.g-ghost:hover{color:var(--color-text)}.g-arena{background:radial-gradient(circle at 1px 1px, var(--color-border-strong) 1px, transparent 0) 0 0/24px 24px, var(--color-bg-2);border:1px dashed var(--color-border-strong);border-radius:20px;height:380px;position:relative;overflow:hidden}.g-target{background:radial-gradient(circle, var(--color-reward), var(--color-accent));box-shadow:0 0 0 6px #ffb93833, 0 0 34px var(--color-reward);border:0;border-radius:50%;animation:1.2s infinite tpulse;position:absolute}@keyframes tpulse{50%{box-shadow:0 0 0 12px #ffb93814, 0 0 44px var(--color-reward)}}.g-result{text-align:center}.g-result .g-score{background:linear-gradient(100deg, var(--color-accent-ink), var(--color-cyan), var(--color-reward));color:#0000;-webkit-background-clip:text;background-clip:text;margin:1rem 0;font-size:clamp(2.2rem,6vw,3.5rem)}.g-learn{max-width:56ch;color:var(--color-text-muted);margin:0 auto 2rem}.g-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.g-save{color:var(--color-text-muted);justify-items:center;gap:.7rem;margin-top:1.25rem;display:grid}.g-save p{margin:0}.g-saved{color:var(--color-ok);margin-top:1rem;font-weight:600}.g-xp{color:var(--color-reward);margin-top:1.5rem;font:600 .95rem/1 ui-monospace,monospace}.g-mock{background:var(--color-bg-2);border:1px dashed var(--color-border-strong);border-radius:18px;place-items:center;margin-bottom:1.5rem;padding:1.5rem;display:grid}.m-card{color:#1a1c2c;background:#fff;border-radius:16px;gap:.8rem;width:min(100%,340px);padding:1.25rem;font-size:1rem;display:grid}.m-field{border:1px solid #c9cde0;border-radius:10px;padding:.8rem 1rem}.m-ph{color:#9aa0b5}.m-btn{text-align:center;color:#fff;background:#5a3df0;border-radius:10px;padding:.8rem;font-weight:600}.m-red{background:#dc2626}.m-row{align-items:center;gap:.6rem;display:flex}.m-tiny{border:1px solid #999;border-radius:3px;padding:2px;font-size:8px;line-height:1}.m-grey{color:#c4c4c4;margin:0}.m-spin{text-align:center;font-size:2.4rem;animation:1.2s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.m-err{color:#b91c1c;background:#fee2e2;border-radius:10px;padding:.9rem;font-family:ui-monospace,monospace}@media (width<=560px){.g-duel{grid-template-columns:1fr}.g-arena{height:320px}}