:root{
  --bg:#0f1220; --ink:#e8ecf1; --muted:#97a0ad; --accent:#67e8f9;
  --good:#8eea5b; --bad:#ff6961; --warn:#ffcf5a;
  --grid:#1b2035; --snake:#7aa8ff; --snake-head:#c7d2fe;
  --answer-a:#ffb86b; --answer-b:#ff79c6; --answer-c:#8be9fd; --answer-d:#50fa7b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; overflow-x:hidden; /* prevent horizontal scroll */
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--ink);
  background:radial-gradient(1200px 800px at 20% -10%, #1a1f36 0%, #0f1220 40%, #0b0e19 100%);
}

header{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid #1e2338;background:#0d1022cc;backdrop-filter:blur(6px);
}
h1{font-size:20px;margin:0}.tm{font-size:12px;vertical-align:super;opacity:.8;margin-left:2px}
.controls button{margin-left:8px}
header .left, header .right{display:flex;align-items:center;gap:12px}
label{font-size:14px;color:var(--muted)}
select,button{
  background:#1b2240;color:var(--ink);border:1px solid #2c3a6a;border-radius:8px;
  padding:8px 10px;font:inherit;cursor:pointer
}
button:hover, select:hover{border-color:#4f6ad9}
button:active{transform:translateY(1px)}

main{max-width:980px;margin:0 auto;padding:16px}
.hud{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.stat{background:#121633;border:1px solid #232b55;border-radius:10px;padding:6px 10px;color:#d7def1}

.question-wrap{
  background:#101431;border:1px solid #1f2a53;border-radius:12px;padding:12px;margin-bottom:12px
}
#question{font-weight:600}
#options-legend{color:var(--muted);font-size:14px;user-select:none}

.game-wrap{position:relative;display:grid;place-items:center}

/* Make the canvas responsive without causing page scroll. We’ll also match the backing-store size in JS. */
#game{
  display:block;
  width:min(82vw, 420px);
  height:min(82vw, 420px);
  max-width:460px; max-height:460px;
  border-radius:12px;
  border:1px solid #1c244b;
  background:#0a0d20;
  box-shadow:0 10px 30px rgba(0,0,0,.4), inset 0 0 0 1px #262b4f;
}


/* Hide the touchpad on desktop; show on small screens without pushing layout down */
.touchpad{display:none; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); width:280px; text-align:center; gap:8px}
.touchpad .mid{display:flex;justify-content:space-between;gap:8px}
.touchpad button{width:72px;height:48px}

@media (max-width:700px){
  .touchpad{display:grid}
}

.toast{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  background:#161c3b;border:1px solid #2a3b77;border-radius:10px;
  padding:10px 14px;color:#e4ebff;box-shadow:0 8px 24px rgba(0,0,0,.45);
}

/* Center the footnote line */
.footnote { text-align: center; color: var(--muted); }

/* Tiny keyboard key badges */
kbd{
  display:inline-block;
  padding:2px 6px;
  border:1px solid #2b376a;
  border-bottom-width:2px;
  border-radius:6px;
  background:#161c3b;
  color:#e4ebff;
  font:12px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  vertical-align:middle;
  margin-left:6px;
}

/* Start overlay */
.overlay{
  position:fixed; inset:0;
  display:grid; place-items:center;
  background:rgba(5,10,25,.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: opacity .2s ease;
  z-index: 20;
}
.overlay.hidden{ opacity:0; pointer-events:none; }
.overlay-content{
  text-align:center;
  background:rgba(16,20,49,.85);
  border:1px solid #2a3b77;
  border-radius:14px;
  padding:22px 26px;
  box-shadow:0 12px 36px rgba(0,0,0,.45);
}
.overlay-content h2{ margin:0 0 6px 0; font-size:22px; }
.overlay-content .big{ font-size:18px; margin:6px 0 2px; }
.overlay-content .hint{ color:var(--muted); font-size:14px; margin:8px 0 0; }

/* Blur/dim the app when overlay is visible */
main.blurred{ filter: blur(1.5px) brightness(.9); }