html, body {
  margin: 0;
  height: 100%;
  background: #0a0e1f;
  color: #e7f6ff;
  font-family: system-ui, sans-serif;
  overflow: hidden;
  position: fixed;
  inset: 0;
  width: 100%;
  touch-action: none;
}
#view {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0a0e1f;
  touch-action: none;
  z-index: 1;
}
#pause, #dash, #blast {
  z-index: 3;
  touch-action: manipulation;
  border: 0;
  color: #e7f6ff;
  font: 600 13px system-ui, sans-serif;
}
#pause {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #1a2340;
  color: #1084fe;
}
#actions {
  position: fixed;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 3;
}
#dash, #blast {
  width: 68px;
  height: 68px;
  min-width: 64px;
  min-height: 64px;
  border-radius: 50%;
  position: relative;
}
#dash {
  background:
    radial-gradient(circle at center, #0a0e1f 56%, transparent 57%),
    conic-gradient(#1084fe calc(var(--p, 1) * 1turn), #1a2340 0);
}
#blast {
  background: #1a2340;
  box-shadow: inset 0 calc(var(--b, 0) * -68px) 0 #ffc93c;
  color: #ffc93c;
}
#blast.ready { color: #0a0e1f; }
#stick {
  position: fixed;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border: 2px solid #1084fe;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
}
#nub {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1084fe;
}
.menu {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(10, 14, 31, 0.94);
  padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  overflow: auto;
  box-sizing: border-box;
}
.menu h1 { margin: 0; font-size: 28px; letter-spacing: 0.04em; color: #5ce1ff; text-align: center; }
.who { margin: 0; color: #1084fe; font-weight: 700; }
.fine { margin: 0; color: #8aa0c8; font-size: 14px; }
.choice {
  min-width: min(280px, 88vw);
  min-height: 48px;
  border-radius: 12px;
  border: 2px solid #2b3a67;
  background: #1a2340;
  color: #e7f6ff;
  font: 700 16px system-ui, sans-serif;
}
.choice.primary { background: #1084fe; border-color: #1084fe; color: #fff; min-height: 56px; }
.choice.big { min-height: 64px; font-size: 18px; }
.choice.reward {
  background: #12182c;
  color: #ffc93c;
  border-color: #ffc93c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.choice.focus { outline: 2px solid #5ce1ff; outline-offset: 2px; }
.video {
  width: 18px;
  height: 14px;
  border: 2px solid currentColor;
  border-radius: 2px;
  display: inline-block;
  position: relative;
}
.video::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent currentColor;
}
.rungs { display: flex; flex-direction: column-reverse; gap: 8px; align-items: center; width: min(360px, 100%); }
.rung {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  background: transparent;
  border: 0;
  color: #e7f6ff;
  font: 700 16px system-ui, sans-serif;
}
.rung canvas { image-rendering: pixelated; background: #0a0e1f; }
.rung.next { filter: drop-shadow(0 0 6px #5ce1ff); }
.rung.locked { color: #4c5e8a; }
.links { display: flex; gap: 8px; align-items: center; }
#dash.nudge, #blast.nudge, #stick.nudge { box-shadow: 0 0 0 3px #5ce1ff; }
#blast.pulse { animation: pulse 0.35s linear 1; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.reduce #blast.pulse, .reduce #dash.nudge { animation: none; }
@media (prefers-reduced-motion: reduce) {
  #blast.pulse { animation: none; }
}