*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg: var(--ui-bg);--surface: var(--ui-surface);--surface2: var(--ui-surface-3);
  --accent: var(--ui-accent);--pink:#ec4899;--green:#10b981;
  --text: var(--ui-text);--muted: var(--ui-muted);--radius: var(--ui-radius);
}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui-font);
  background:var(--bg);color:var(--text);min-height:calc(100vh - var(--ui-bar-h, 0px));overflow-x:hidden;
}
/* ── Stars ── */
#stars{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;width:2px;height:2px;background:#fff;border-radius:50%;animation:twinkle var(--d) ease-in-out infinite alternate}
@keyframes twinkle{0%{opacity:.15;transform:scale(.8)}100%{opacity:.9;transform:scale(1.2)}}

/* ── Layout ── */
.screen{display:none;flex-direction:column;align-items:center;min-height:calc(100vh - var(--ui-bar-h, 0px));position:relative;z-index:1;padding:2rem 1rem}
.screen.active{display:flex}

/* ── Back button ── */
.btn-back{
  position:absolute;top:1.2rem;left:1.2rem;background:var(--surface2);border:1px solid #ffffff12;
  color:var(--text);padding:.5rem 1rem;border-radius:8px;cursor:pointer;font-size:.9rem;
  transition:background .2s;z-index:10;text-decoration:none;
}
.btn-back:hover{background:#ffffff12}

/* ── Shared UI ── */
.game-title{font-size:1.8rem;font-weight:700;margin:3.5rem 0 1.5rem;text-align:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;padding:.65rem 1.6rem;
  border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .15s,opacity .15s;
}
.btn:active{transform:scale(.96)}
.btn-accent{background:var(--accent);color:#fff}
.btn-green{background:var(--green);color:#fff}
.btn-pink{background:var(--pink);color:#fff}
.pill{display:inline-block;background:var(--surface2);border:1px solid #ffffff0a;padding:.25em .8em;border-radius:999px;font-size:.82rem;margin:.2rem}
.pill-green{border-color:#10b98144;color:var(--green)}
.pill-red{border-color:#ef444444;color:#ef4444}
.pill-yellow{border-color:#f59e0b44;color:#f59e0b}
.stat{text-align:center}
.stat-val{font-size:1.5rem;font-weight:700}
.stat-lbl{font-size:.75rem;color:var(--muted);text-transform:uppercase}
.game-input{
  width:100%;max-width:340px;padding:.7rem 1rem;border-radius:8px;border:2px solid #ffffff18;
  background:var(--surface);color:var(--text);font-size:1.2rem;text-align:center;outline:none;transition:border-color .15s;
}
.game-input:focus{border-color:var(--accent)}
.game-input.wrong{border-color:#ef4444!important}
.game-input.correct{border-color:var(--green)!important}
.progress-wrap{width:100%;height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}
.progress-bar{height:100%;background:var(--accent);border-radius:99px;transition:width .25s linear}
.final-score{font-size:3rem;font-weight:800;background:linear-gradient(135deg,var(--accent),var(--pink));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}