/* Design tokens */
:root{
  --bg: #0b0e13;
  --bg-soft: #0f131a;
  --card: rgba(255,255,255,0.06);
  --text: #e7e7ea;
  --muted: #9aa0aa;
  --accent: #7aa2ff;
  --accent-2:#ffd36a;
  --ring: #24314a;
  --ok:#38d39f;
  --warn:#ffd36a;
  --err:#ff6b6b;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb;
    --bg-soft:#ffffff;
    --card: rgba(0,0,0,0.04);
    --text:#151922;
    --muted:#5a6270;
    --accent:#3456ff;
    --accent-2:#b8860b;
    --ring:#e6ebff;
    --ok:#1eae78;
    --warn:#b8860b;
    --err:#d94a4a;
    --shadow: 0 10px 24px rgba(0,0,0,.10);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, sans-serif}
a{color:var(--accent);text-decoration:none}
.bg{
  position:fixed;inset:0;
  background: radial-gradient(1300px 500px at 20% 10%, #1a2030, transparent),
              radial-gradient(1200px 500px at 80% 90%, #121826, transparent);
  pointer-events:none;filter:saturate(1.1);
}
.shell{max-width:720px;margin:0 auto;padding:20px}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:36px;height:36px;display:grid;place-items:center;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
h1{font-size:24px;margin:0}
.top-actions{display:flex;gap:10px;align-items:center}

.icon-btn{background:var(--card);border:1px solid var(--ring);border-radius:12px;color:var(--text);padding:8px 10px;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s}
.icon-btn:active{transform:scale(.98)}

.switch{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--ring);border-radius:12px;background:var(--card);box-shadow:var(--shadow);cursor:pointer}
.switch input{accent-color:var(--accent);}
.switch.small{padding:4px 8px;font-size:14px}

.card{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));border:1px solid var(--ring);border-radius:16px;padding:16px;box-shadow:var(--shadow);backdrop-filter: blur(6px)}
.intro .stats{display:flex;gap:12px;margin-top:8px}
.stat{flex:1;background:var(--bg-soft);border:1px solid var(--ring);border-radius:12px;padding:10px;text-align:center}
.stat .label{display:block;font-size:12px;color:var(--muted)}
.stat .value{font-weight:700;font-size:18px}
.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.badge{background:var(--card);border:1px solid var(--ring);border-radius:999px;padding:6px 10px;font-weight:600;font-size:12px}
.badge.ok{border-color:var(--ok);color:var(--ok)}
.badge.warn{border-color:var(--warn);color:var(--warn)}

.game .input-wrap{display:flex;gap:8px}
#guess{flex:1;padding:12px;border-radius:12px;border:1px solid var(--ring);background:var(--bg-soft);color:var(--text);font-size:20px;letter-spacing:2px;outline:none}
#guess:focus{box-shadow:0 0 0 3px rgba(122,162,255,.2)}
.primary{background:linear-gradient(180deg, #7aa2ff, #4e7dff);border:none;color:white;padding:12px 16px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow);transition:transform .08s}
.primary:active{transform:translateY(1px)}
.secondary{background:var(--card);border:1px solid var(--ring);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.ghost{background:transparent;border:1px dashed var(--ring);color:var(--text);padding:10px 14px;border-radius:12px;cursor:pointer}
.helpers{display:flex;gap:8px;margin-top:8px}

.progress{display:flex;gap:6px;justify-content:center;margin:12px 0}
.dot{width:10px;height:10px;border-radius:50%;background:#2a2f39;border:1px solid var(--ring);transition:transform .2s, background .2s}
.dot.active{background:var(--accent)}

.keypad{display:grid;grid-template-columns:repeat(10,1fr);gap:8px;margin-top:8px}
.keypad button{padding:12px 0;border-radius:12px;border:1px solid var(--ring);background:var(--bg-soft);color:var(--text);cursor:pointer;transition:transform .06s}
.keypad button:active{transform:scale(.98)}
.keypad .wide{grid-column:span 5}

.board{margin-top:8px}
.guesses{list-style:none;padding:0;margin:8px 0 0}
.guesses li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:10px 12px;border:1px solid var(--ring);background:var(--bg-soft);border-radius:12px;margin-top:8px}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;letter-spacing:2px;font-size:18px}
.pips{display:flex;gap:6px}
.pip{width:12px;height:12px;border-radius:50%;border:1px solid var(--ring);background:#2a2f39}
.pip.bull{background:var(--ok)}
.pip.cow{background:var(--warn)}

.result{margin-top:12px;padding:12px;border:1px solid var(--ring);background:var(--bg-soft);border-radius:16px}
.answer{opacity:.9}

.foot{opacity:.8;text-align:center;margin-top:14px}
.muted{color:var(--muted)}
.tiny{font-size:12px}

/* Canvas FX */
.fx{position:fixed;inset:0;pointer-events:none}