:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #05060c;
  color: #f6f3ff;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 20%, #202543 0, #090b17 42%, #030408 100%);
}

button,
canvas {
  touch-action: none;
}

.game-shell {
  position: relative;
  width: min(100vw, 480px);
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: #090b17;
  box-shadow: 0 0 80px rgb(0 0 0 / 55%);
}

canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hud {
  position: absolute;
  z-index: 3;
  top: max(20px, env(safe-area-inset-top));
  left: 22px;
  right: 22px;
  display: grid;
  grid-template-columns: auto auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.game-shell.playing .hud,
.game-shell.finished .hud {
  opacity: 1;
  transform: translateY(0);
}

.brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: rgb(246 243 255 / 65%);
}

.brand span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ffd875;
  box-shadow: 0 0 10px #ffd875;
}

.brand strong {
  padding: 2px 4px;
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 7px;
  letter-spacing: 0.08em;
  opacity: 0.68;
}

.game-shell[data-world="light"] .brand {
  color: rgb(61 45 72 / 70%);
}

.game-shell[data-world="light"] .brand span {
  background: #8b5e22;
  box-shadow: 0 0 10px rgb(255 238 173 / 80%);
}

.game-shell[data-world="light"] .timer,
.game-shell[data-world="light"] .score {
  color: #4a354f;
  text-shadow: 0 1px 5px rgb(255 244 199 / 55%);
}

.game-shell[data-world="light"] .score {
  border-color: rgb(74 53 79 / 22%);
  background: rgb(255 246 207 / 72%);
  box-shadow: 0 4px 16px rgb(71 46 78 / 15%);
}

.game-shell[data-world="light"] .progress-track {
  background: rgb(63 43 75 / 18%);
}

.game-shell[data-world="shadow"] .brand span {
  background: #9c7cff;
  box-shadow: 0 0 10px #9c7cff;
}

.game-shell[data-world="shadow"] .timer,
.game-shell[data-world="shadow"] .score {
  color: rgb(246 243 255 / 72%);
}

.game-shell[data-world="shadow"] .score {
  border-color: rgb(203 190 255 / 24%);
  background: rgb(15 16 39 / 72%);
  box-shadow: 0 4px 18px rgb(0 0 0 / 28%), 0 0 12px rgb(144 112 255 / 12%);
}

.progress-track {
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 12%);
}

.score {
  min-width: 62px;
  padding: 6px 9px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 99px;
  background: rgb(8 9 20 / 65%);
  font-size: 13px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.055em;
  color: rgb(246 243 255 / 72%);
  text-align: center;
  white-space: nowrap;
}

.eclipse-token {
  position: relative;
  width: 24px;
  height: 24px;
  border: 1px solid rgb(206 192 255 / 18%);
  border-radius: 50%;
  background: rgb(8 9 20 / 42%);
  opacity: 0.24;
  transform: scale(0.88);
  transition: opacity 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.eclipse-token::before,
.eclipse-token::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.eclipse-token::before {
  inset: 4px;
  border: 2px solid #ffeaa6;
}

.eclipse-token::after {
  inset: 7px;
  background: #171329;
  box-shadow: 5px 0 0 -1px #9c7cff;
}

.eclipse-token[data-state="ready"] {
  border-color: rgb(255 234 166 / 48%);
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 14px rgb(255 225 135 / 34%), 0 0 18px rgb(156 124 255 / 24%);
}

.eclipse-token b {
  position: absolute;
  right: -5px;
  bottom: -4px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border: 1px solid rgb(255 234 166 / 58%);
  border-radius: 50%;
  background: #171329;
  color: #fff0ae;
  font-size: 8px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 180ms ease, transform 180ms ease;
}

.eclipse-token[data-state="ready"] b {
  opacity: 1;
  transform: scale(1);
}

.eclipse-token[data-state="spent"] {
  border-style: dashed;
  opacity: 0.5;
  filter: saturate(0.25);
}

.eclipse-token[data-state="spent"] b {
  border-color: rgb(206 192 255 / 35%);
  color: rgb(246 243 255 / 62%);
  opacity: 1;
  transform: scale(0.9);
}

.game-shell[data-world="light"] .eclipse-token {
  background: rgb(255 246 207 / 58%);
  border-color: rgb(74 53 79 / 18%);
}

.level-reset {
  position: absolute;
  z-index: 5;
  top: max(58px, calc(env(safe-area-inset-top) + 40px));
  left: 22px;
  display: none;
  padding: 6px 9px;
  border: 1px solid rgb(203 190 255 / 22%);
  border-radius: 99px;
  background: rgb(8 9 20 / 68%);
  color: rgb(246 243 255 / 68%);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.game-shell[data-level="2"].playing .level-reset {
  display: block;
}

.game-shell[data-world="light"] .level-reset {
  border-color: rgb(74 53 79 / 20%);
  background: rgb(255 246 207 / 72%);
  color: #4a354f;
}

.level-reset:focus-visible {
  outline: 2px solid #fff0ae;
  outline-offset: 3px;
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a75ff, #ffd875);
  box-shadow: 0 0 9px #b599ff;
}

.timer {
  min-width: 42px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: rgb(246 243 255 / 72%);
}

.overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 34px max(32px, env(safe-area-inset-bottom));
  text-align: center;
  background: linear-gradient(180deg, rgb(5 6 15 / 18%), rgb(5 6 15 / 42%));
  transition: opacity 260ms ease, visibility 260ms ease;
}

.game-shell.playing .overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.eyebrow {
  margin-bottom: 16px;
  color: #d7ccff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.28em;
}

h1 {
  margin: 0;
  font-size: clamp(46px, 13vw, 66px);
  line-height: 0.84;
  letter-spacing: -0.065em;
  font-weight: 900;
  text-shadow: 0 8px 32px rgb(0 0 0 / 32%);
}

h1 em {
  color: #ffd875;
  font-style: normal;
  text-shadow: 0 0 28px rgb(255 216 117 / 40%);
}

#message {
  max-width: 290px;
  margin: 22px 0 26px;
  color: rgb(246 243 255 / 70%);
  font-size: 14px;
  line-height: 1.55;
}

.level-select {
  display: none;
  width: min(100%, 280px);
  gap: 10px;
}

.game-shell.selecting .level-select {
  display: grid;
}

.game-shell.selecting #action,
.game-shell.selecting .level-menu,
.game-shell.selecting .tap-hint {
  display: none;
}

.game-shell.selecting #message {
  margin-bottom: 20px;
}

.level-choice {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  min-height: 56px;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 13px 8px 9px;
  border: 1px solid rgb(255 255 255 / 19%);
  border-radius: 14px;
  background: rgb(247 244 255 / 96%);
  color: #151426;
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 30px rgb(0 0 0 / 25%);
}

.level-choice-number {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: #19172b;
  color: #fff0ae;
  font-size: 12px;
  font-weight: 900;
}

.level-choice-copy {
  display: grid;
  gap: 3px;
}

.level-choice-copy strong,
.level-choice-state {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.level-choice-copy small {
  color: rgb(21 20 38 / 52%);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.level-choice-state {
  color: #725aa9;
  font-size: 8px;
}

.level-choice:disabled {
  border-color: rgb(255 255 255 / 9%);
  background: rgb(31 29 48 / 88%);
  color: rgb(246 243 255 / 44%);
  cursor: not-allowed;
  box-shadow: none;
}

.level-choice:disabled .level-choice-number {
  background: rgb(9 9 20 / 70%);
  color: rgb(246 243 255 / 34%);
}

.level-choice:disabled .level-choice-copy small,
.level-choice:disabled .level-choice-state {
  color: rgb(246 243 255 / 54%);
}

.level-choice:focus-visible {
  outline: 3px solid #b9a6ff;
  outline-offset: 3px;
}

#action {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 54px;
  padding: 7px 9px 7px 22px;
  border: 1px solid rgb(255 255 255 / 19%);
  border-radius: 99px;
  background: rgb(247 244 255 / 96%);
  color: #151426;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 14px 38px rgb(0 0 0 / 35%);
}

#action:focus-visible {
  outline: 3px solid #b9a6ff;
  outline-offset: 4px;
}

.level-menu {
  display: none;
  min-height: 48px;
  margin-top: 12px;
  padding: 10px 18px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 99px;
  background: rgb(8 9 20 / 48%);
  color: rgb(246 243 255 / 68%);
  font: inherit;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.12em;
  cursor: pointer;
}

.game-shell.finished .level-menu {
  display: block;
}

.game-shell.finished .tap-hint {
  display: none;
}

.level-menu:focus-visible {
  outline: 2px solid #b9a6ff;
  outline-offset: 3px;
}

kbd {
  display: grid;
  place-items: center;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 99px;
  background: #19172b;
  color: #fff;
  font-family: inherit;
  font-size: 9px;
  box-shadow: none;
}

.tap-hint {
  margin: 15px 0 0;
  color: rgb(246 243 255 / 38%);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.swap-hint {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 16px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.game-shell.playing .swap-hint.show {
  opacity: 1;
  transform: translateY(0);
}

.swap-hint span {
  padding: 8px 18px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 99px;
  background: rgb(8 9 20 / 62%);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.18em;
  backdrop-filter: blur(8px);
}

.swap-hint small {
  color: rgb(246 243 255 / 44%);
  font-size: 9px;
}

.dev-badge {
  position: absolute;
  z-index: 3;
  top: max(62px, calc(env(safe-area-inset-top) + 48px));
  right: 22px;
  display: none;
  align-items: center;
  gap: 7px;
  color: rgb(246 243 255 / 58%);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.14em;
  pointer-events: none;
}

.game-shell.playing[data-development="true"] .dev-badge {
  display: flex;
}

.dev-badge kbd {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 18%);
  background: rgb(8 9 20 / 58%);
  font-size: 9px;
}

.game-shell[data-world="light"] .dev-badge {
  color: rgb(61 45 72 / 62%);
}

.game-shell[data-world="light"] .dev-badge kbd {
  border-color: rgb(61 45 72 / 18%);
  background: rgb(255 246 207 / 58%);
  color: #4a354f;
}

.dev-pause {
  position: absolute;
  z-index: 5;
  top: max(62px, calc(env(safe-area-inset-top) + 48px));
  right: 22px;
  display: flex;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 99px;
  background: rgb(8 9 20 / 72%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, visibility 120ms ease;
}

.game-shell.playing[data-development="true"][data-paused="true"] .dev-pause {
  visibility: visible;
  opacity: 1;
}

.game-shell.playing[data-development="true"][data-paused="true"] .dev-badge {
  display: none;
}

.game-shell[data-paused="true"] .swap-hint {
  visibility: hidden;
  opacity: 0;
}

.dev-pause strong {
  color: #fff0ae;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-shadow: 0 0 10px rgb(255 216 117 / 38%);
}

.dev-pause small {
  color: rgb(246 243 255 / 68%);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.game-shell[data-world="light"] .dev-pause {
  border-color: rgb(61 45 72 / 18%);
  background: rgb(255 246 207 / 76%);
}

.game-shell[data-world="light"] .dev-pause strong {
  color: #4a354f;
  text-shadow: none;
}

.game-shell[data-world="light"] .dev-pause small {
  color: rgb(61 45 72 / 64%);
}

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

@media (min-width: 600px) {
  .game-shell {
    height: min(100dvh, 920px);
    border: 1px solid rgb(255 255 255 / 8%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hud,
  .overlay,
  .swap-hint,
  .dev-pause {
    transition-duration: 1ms;
  }
}