:root{--bg:#0e0f15;--panel:#121522;--text:#e8ecf1;--muted:#9fb0c3;--accent:#ffd166;--ok:#06d6a0;--bad:#ef476f;}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;color:var(--text);background:radial-gradient(1200px 600px at 20% -10%, #2a2f4b 0%, #121522 40%, #0e0f15 100%);}
.header{display:flex;gap:14px;align-items:center;padding:18px 22px;border-bottom:1px solid rgba(255,255,255,.06);} .header h1{margin:0;font-size:clamp(20px,2.4vw,28px)} .header .subtitle{color:var(--muted);font-size:14px}
.container{max-width:980px;margin:24px auto 56px;padding:0 16px}.card{background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.banner{position:relative;min-height:180px;display:flex;align-items:end;justify-content:center;background:radial-gradient(600px 240px at 60% -30%, rgba(255,209,102,.4), transparent 70%), radial-gradient(400px 200px at 20% -40%, rgba(6,214,160,.25), transparent 70%), url('assets/card.png');background-size:cover;background-position:center;border-bottom:1px solid rgba(255,255,255,.08)}
.banner img{height:200px;transform:translateY(12px);filter:drop-shadow(0 18px 30px rgba(0,0,0,.45))} .panel{padding:18px}
.story{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.06);padding:14px 16px;border-radius:14px;font-size:15px;line-height:1.5}
.controls{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap} button{cursor:pointer;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);padding:12px 16px;color:var(--text);border-radius:12px;font-size:16px}
button.primary{background:linear-gradient(180deg, #ffd166, #ffb703);color:#1a1300;border-color:#ffb703;font-weight:700} button:disabled{opacity:.6;cursor:not-allowed}
.hud{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px;margin-bottom:8px} .progress{width:100%;height:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;overflow:hidden} .progress>div{height:100%;width:0;background:linear-gradient(90deg, var(--accent), #ffa500);transition:width .25s ease}
.board{background:#0f1322;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:18px} #numberline{position:relative;height:160px}
.line{position:absolute;left:40px;right:40px;top:80px;height:2px;background:#e5e7eb} .tick{position:absolute;top:70px;width:2px;height:20px;background:#e5e7eb} .tick-label{position:absolute;top:94px;transform:translateX(-50%);font-size:12px;color:var(--muted)}
.token{position:absolute;top:20px;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);user-select:none;touch-action:none} .token .label{font-weight:700}
.token.dragging{outline:3px dashed rgba(255,255,255,.4)} .badge{display:inline-block;padding:6px 10px;border-radius:999px;font-weight:700;background:linear-gradient(90deg, #06d6a0, #ffd166);color:#1a1300}
.feedback{margin-top:10px;color:var(--muted)} .correct{outline:3px solid var(--ok)} .wrong{outline:3px solid var(--bad)} .hide{display:none!important}