:root { --bg:#0a0a2a; --fg:#fff; --accent:#ffd400; --right:#1faa4b; --wrong:#c0263c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font: 600 clamp(18px, 2.6vw, 28px)/1.3 system-ui, sans-serif;
  color: var(--fg); background: var(--bg);
  overflow: hidden;
}
/* The disc's own rendered loops are the visual layer. Keep them near full
   strength; a vignette + scrim below keeps text legible over busy frames. */
#bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2; opacity: 0.85;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, #0009 0%, #0002 30%, #0002 60%, #000b 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, #000a 100%);
}
#app { height: 100%; display: flex; }
.screen {
  margin: auto; width: min(900px, 94vw);
  padding: max(16px, env(safe-area-inset-top)) 16px;
  display: flex; flex-direction: column; gap: 18px;
}
h1 { font-size: clamp(28px, 7vw, 64px); color: var(--accent); text-align: center; margin: 0; }
.hint { font-size: 0.7em; opacity: 0.8; font-weight: 400; }
select, .big {
  font: inherit; padding: 14px 18px; border-radius: 12px; border: 2px solid var(--accent);
  background: #fff; color: #000; min-height: 48px;
}
.big { background: var(--accent); cursor: pointer; font-size: 1.2em; }

#game header {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-radius: 12px;
  background: #000000a8; border: 1px solid #ffffff1f;
  backdrop-filter: blur(3px);
}
.category {
  color: var(--accent); text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.92em; text-shadow: 0 2px 6px #000;
}
.qvalue { font-size: 1.3em; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 2px 6px #000; }
.qvalue:empty { display: none; }
.score { font-size: 1.4em; color: var(--accent); text-shadow: 0 2px 6px #000; }
.question {
  font-size: clamp(20px, 3.4vw, 34px); min-height: 2em;
  padding: 14px 18px; border-radius: 12px;
  background: #000000a8; border: 1px solid #ffffff1f; backdrop-filter: blur(3px);
  text-shadow: 0 2px 8px #000;
}

.answers { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .answers { grid-template-columns: 1fr 1fr; } }
.answer {
  font: inherit; text-align: left; padding: 18px 20px; min-height: 64px;
  border-radius: 14px; border: 2px solid #fff6; background: #ffffff14; color: var(--fg);
  cursor: pointer; transition: transform .05s, background .15s;
}
.answer:not(:disabled):active { transform: scale(0.98); }
.answer:not(:disabled):hover { background: #ffffff28; }
.answer:disabled { opacity: 0.85; cursor: default; }
.answer.right { background: var(--right); border-color: #fff; }
.answer.wrong { background: var(--wrong); border-color: #fff; }
.answer:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}