:root {
  color-scheme: dark;
  --pink: #e784b5;
  --pink-bright: #f19ac3;
  --pink-action: #b94f83;
  --yellow: #f7bd4a;
  --teal: #48d5bd;
  --blue: #67c5e3;
  --ink: #f3f4f6;
  --muted: #a4a9b5;
  --line: #303640;
  --frame: #555d6b;
  --page: #0f1117;
  --surface: #171a22;
  --surface-raised: #252a34;
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  background: var(--page);
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

button, a { font: inherit; }
button { touch-action: manipulation; }

.game-shell {
  width: min(540px, 100%);
  height: 100svh;
  margin: 0 auto;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--surface);
  box-shadow: 0 0 60px rgba(0, 0, 0, .38);
}

.topbar {
  display: grid;
  grid-template-columns: 48px minmax(95px, 1fr) minmax(105px, 1fr) 48px;
  align-items: center;
  gap: 10px;
}

.icon-button {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--pink);
  font-weight: 900;
  font-size: 44px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.reset { font-size: 42px; }
.icon-button:active { transform: scale(.9); }

.score-card {
  min-height: 58px;
  display: grid;
  place-items: center;
  align-content: center;
  border-radius: 11px;
  background: var(--surface-raised);
  color: #fff;
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.25);
}

.score-card small {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
}

.score-card strong { font-size: 25px; line-height: 1.1; }
.score-card.best strong, .score-card.best small { color: var(--teal); }
.score-card.best { position: relative; }
.score-card.best::before {
  content: "";
  position: absolute;
  width: 46px;
  height: 15px;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  background: var(--surface-raised);
  clip-path: polygon(0 100%, 8% 55%, 30% 70%, 38% 0, 52% 52%, 72% 6%, 78% 67%, 100% 52%, 100% 100%);
}

.stage-row {
  display: grid;
  grid-template-columns: 72px 1fr 72px;
  align-items: center;
  min-height: 34px;
}

.stage-row h1 {
  margin: 0;
  color: var(--muted);
  font-size: 19px;
  text-align: center;
}

.stage-row button,
.stage-row > span {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}
.stage-row button { text-align: left; cursor: pointer; }
.stage-row button:disabled { opacity: .3; }
.stage-row > span { text-align: right; }

.message {
  min-height: 17px;
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.board-wrap {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid var(--frame);
  background: var(--surface);
  scrollbar-width: thin;
}

.board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-content: start;
}

.number-cell {
  position: relative;
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  font-size: clamp(23px, 7.4vw, 39px);
  font-weight: 500;
  cursor: pointer;
  transition: color .16s ease, background .16s ease, transform .14s ease;
}

.number-cell:nth-child(9n) { border-right: 0; }
.number-cell:active:not(.removed) { transform: scale(.86); }
.number-cell.removed {
  color: #2a303a;
  background: #14171d;
  cursor: default;
}
.number-cell.blank { cursor: default; }

.number-cell.selected {
  z-index: 1;
  color: var(--blue);
  background: #183541;
  box-shadow: inset 0 0 0 3px var(--blue);
}

.number-cell.hinted {
  z-index: 1;
  color: var(--pink-bright);
  background: #3a1f2c;
  animation: hintPulse .7s ease-in-out infinite alternate;
}

.number-cell.wrong { animation: wrong .32s ease; }
.number-cell:focus-visible { z-index: 2; outline: 3px solid var(--pink); outline-offset: -3px; }

.game-actions {
  display: flex;
  justify-content: flex-end;
  align-items: start;
  gap: 34px;
  min-height: 90px;
  padding: 4px 8px 0;
}

.round-action {
  display: grid;
  justify-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  color: var(--yellow);
  font-weight: 900;
  cursor: pointer;
}

.action-icon {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--yellow);
  color: #fff;
  box-shadow: 0 3px 0 #e7a31c;
  font-size: 38px;
  line-height: 1;
}

.action-icon i {
  position: absolute;
  right: -3px;
  top: -5px;
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 2px solid #737b89;
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 13px;
  font-style: normal;
}

.round-action strong { font-size: 14px; }
.round-action:active .action-icon { transform: translateY(2px); box-shadow: 0 1px 0 #e7a31c; }
.round-action:disabled { filter: grayscale(1); opacity: .45; }

.complete {
  position: fixed;
  z-index: 20;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 5, 9, .68);
  opacity: 0;
  backdrop-filter: blur(4px);
  transition: opacity .2s ease;
}
.complete[hidden] { display: none; }
.complete.visible { opacity: 1; }
.complete section {
  width: min(350px, 100%);
  padding: 28px;
  border-radius: 20px;
  background: var(--surface-raised);
  text-align: center;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .48);
}
.complete p { margin: 0 0 8px; color: var(--teal); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.complete h2 { margin: 0 0 22px; font-size: 30px; }
.complete button { min-height: 48px; border: 0; border-radius: 999px; background: var(--pink-action); color: #fff; padding: 0 24px; font-weight: 900; }

@keyframes hintPulse { to { box-shadow: inset 0 0 0 3px var(--pink); } }
@keyframes wrong { 25%, 75% { transform: translateX(-3px); color: #d63c56; } 50% { transform: translateX(3px); } }

@media (min-width: 560px) {
  .game-shell { padding-inline: 22px; }
  .number-cell { font-size: 37px; }
}

@media (max-height: 650px) {
  .game-shell { gap: 5px; padding-top: calc(7px + env(safe-area-inset-top)); }
  .score-card { min-height: 48px; }
  .score-card strong { font-size: 21px; }
  .game-actions { min-height: 64px; }
  .action-icon { width: 48px; height: 48px; font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}