*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  background: #07060f; color: #f4f1ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
body { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#stage { position: relative; width: 360px; height: 640px; --s: 1; }
#game { display: block; width: 100%; height: 100%; image-rendering: pixelated; touch-action: none; }

#topbar { position: absolute; top: calc(8px * var(--s)); right: calc(8px * var(--s)); display: flex; gap: calc(6px * var(--s)); z-index: 5; }
.icon-btn {
  width: calc(34px * var(--s)); height: calc(34px * var(--s)); padding: calc(7px * var(--s));
  border: 2px solid #7c5cff; border-radius: 6px; background: rgba(13, 11, 30, .75);
  color: #f4f1ff; cursor: pointer; touch-action: manipulation;
}
.icon-btn svg { width: 100%; height: 100%; fill: currentColor; stroke: currentColor; display: block; }
.icon-btn .ico-off { display: none; }
.icon-btn.muted .ico-on { display: none; }
.icon-btn.muted .ico-off { display: block; }
.icon-btn:focus-visible, .btn:focus-visible { outline: 3px solid #2ee6ff; outline-offset: 2px; }

.screen {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: calc(20px * var(--s));
  font-size: calc(15px * var(--s));
  background: linear-gradient(180deg, rgba(7,6,15,.25), rgba(7,6,15,.72) 60%, rgba(7,6,15,.85));
}
.hidden { display: none !important; }
.logo { margin: 0 0 .3em; line-height: .9; font-family: ui-monospace, "Courier New", monospace; font-weight: 900; letter-spacing: .06em; }
.logo span { display: block; font-size: calc(64px * var(--s)); color: #fff; text-shadow: 4px 4px 0 #7c5cff, -2px -2px 0 #2ee6ff; }
.logo span + span { color: #ffd23f; text-shadow: 4px 4px 0 #ff3d7f, -2px -2px 0 #7c5cff; }
h2 { margin: 0 0 .4em; font-family: ui-monospace, "Courier New", monospace; font-size: calc(34px * var(--s)); letter-spacing: .05em; text-shadow: 3px 3px 0 #7c5cff; }
.over-title { color: #ff3d7f; text-shadow: 3px 3px 0 #2b0b1a, -2px -2px 0 #7c5cff; }
.tagline { margin: .2em 0 1.2em; color: #cfc6ff; line-height: 1.35; }
.btn {
  font: inherit; font-weight: 800; font-size: calc(22px * var(--s)); letter-spacing: .04em;
  padding: .55em 1.8em; margin: .4em 0; border: 0; border-radius: 8px; cursor: pointer;
  color: #0d0b1e; background: #ffd23f; box-shadow: 0 5px 0 #c98a00, 0 0 24px rgba(255,210,63,.35);
  touch-action: manipulation;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #c98a00; }
.best { margin: .8em 0 .2em; color: #ffd23f; }
.help { list-style: none; padding: 0; margin: 1.2em 0 0; font-size: .82em; color: #a99fd6; line-height: 1.6; }
.help b { color: #e9e4ff; }
.small { font-size: .78em; color: #a99fd6; margin-top: 1em; }
.final { font-size: 1.2em; margin: .2em 0 .5em; }
.final strong { display: block; font-size: 2.4em; color: #ffd23f; font-family: ui-monospace, "Courier New", monospace; }
.new-record { color: #2ee6ff; font-weight: 800; margin: 0 0 .3em; animation: blink .6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.stats { display: grid; grid-template-columns: auto auto; gap: .25em 1.2em; margin: 0 0 1em; text-align: left; }
.stats dt { color: #a99fd6; }
.stats dd { margin: 0; font-weight: 700; text-align: right; font-family: ui-monospace, "Courier New", monospace; }