body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 0.5rem;
  background: #f7f8fa;
  color: #222;
}

/* Full-viewport background image, faded and beneath every other UI
   element: a body::before layer pinned behind the content (z-index
   -1), so panels, the board, and dialogs all stack above it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: url("color-numbers-bg.jpg") center/cover no-repeat;
  opacity: 0.15;
  z-index: -1;
}

.menu {
  max-width: 28rem;
  margin: 3rem auto;
  text-align: center;
}

.menu h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.stats {
  color: #555;
  font-variant-numeric: tabular-nums;
}

.levels {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.5rem auto;
  max-width: 16rem;
}

.level-btn {
  font-size: 1.1rem;
  padding: 0.7rem;
  border: 1px solid #9db2d6;
  border-radius: 8px;
  background: #eef3ff;
  cursor: pointer;
}

.level-btn:hover {
  background: #dcebfd;
}

.hint {
  color: #888;
  font-size: 0.9rem;
}

:root {
  --cell: clamp(1.7rem, calc((100vw - 4rem) / 9), 2.4rem);
  --coord: 0.85rem;
}

.game {
  max-width: 30rem;
  margin: 0.5rem auto;
}

/* On phone widths the game column runs under the fixed github corner
   (80px tall, top-right); start the header below it so no content
   hides behind the octocat. */
@media (max-width: 560px) {
  .game {
    margin-top: 4.25rem;
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  body {
    padding: 0.25rem;
  }
  .menu-btn {
    padding: 0.2rem 0.35rem;
    font-size: 0.8rem;
  }
  .header-btns,
  .header-stats {
    gap: 0.25rem;
  }
  :root {
    --cell: clamp(1.5rem, calc((100vw - 3.5rem) / 9), 2rem);
    --coord: 0.75rem;
  }
  .cell {
    font-size: 1rem;
  }
  .pad-btn {
    height: 2.3rem;
    font-size: 1rem;
  }
  .coord {
    font-size: 0.6rem;
  }
}
.game-header {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.5rem;
}

.header-btns,
.header-stats {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.header-stats {
  gap: 0.7rem;
}

.menu-btn {
  padding: 0.25rem 0.45rem;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}

.level {
  font-weight: 700;
}

.timer,
.bad {
  font-variant-numeric: tabular-nums;
  color: #555;
}

.menu-btn {
  padding: 0.25rem 0.45rem;
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
}

.game-header .header-stats .level {
  margin-left: auto;
}

.help-card {
  max-width: 26rem;
  max-height: min(80vh, 40rem);
  overflow-y: auto;
  text-align: left;
  font-size: 0.9rem;
  line-height: 1.35;
}

.help-card h2 {
  font-size: 1.05rem;
  margin: 0.8rem 0 0.35rem;
}

.help-card h2:first-child {
  margin-top: 0;
}

.help-card ul {
  margin: 0;
  padding-left: 1.1rem;
}

.help-card li {
  margin: 0.2rem 0;
}

.help-card .level-btn {
  margin-top: 0.9rem;
}

.board-wrap {
  display: grid;
  grid-template-columns: var(--coord) auto;
  grid-template-rows: auto var(--coord);
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.board-wrap .board {
  grid-area: 1/2;
  margin: 0;
}

.col-labels {
  grid-area: 2/2;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.row-labels {
  grid-area: 1/1;
  display: grid;
  grid-template-rows: repeat(9, 1fr);
}

.corner {
  grid-area: 1/1;
}

.coord {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  padding: 0;
  margin: 0;
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  border: 3px solid #222;
  width: fit-content;
  margin: 0 auto;
}

/* Mini keypad that opens on a tapped cell; anchored beside the cell
   toward the board center via inline top/left/right/bottom calc.
   Inverted (dark) with a touch of transparency so it pops over the
   light board. */
.cell-keypad {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(3, calc(var(--cell) * 0.92));
  grid-auto-rows: calc(var(--cell) * 0.92);
  gap: 2px;
  padding: 3px;
  background: rgba(17, 24, 39, 0.88);
  border: 2px solid #111827;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 3;
}

.ck-btn {
  font-size: 1rem;
  padding: 0;
  border: 1px solid rgba(148, 163, 184, 0.6);
  border-radius: 6px;
  background: rgba(51, 65, 85, 0.85);
  color: #f1f5f9;
  cursor: pointer;
}

.ck-btn.erase {
  grid-column: 1/4;
  font-size: 0.85rem;
}

.ck-btn:disabled {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(100, 116, 139, 0.4);
  color: #64748b;
  cursor: default;
}

/* Customize / abandon dialogs (overlay-card based, with close X). */
.custom-card {
  position: relative;
  min-width: 16rem;
  max-width: 22rem;
  padding: 1.2rem 1.4rem;
  text-align: center;
}

.custom-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1.1rem;
}

.dialog-hint {
  color: #555;
  font-size: 0.9rem;
  margin: 0 0 0.8rem;
}

.close-x {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  border: none;
  background: none;
  font-size: 1rem;
  color: #888;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}

.close-x:hover {
  color: #222;
}

.customize-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.2rem 0 0.8rem;
}

.customize-trigger {
  margin-top: 0.6rem;
  text-align: center;
}

.mode-btn {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid #9db2d6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.mode-btn.on {
  background: #dcebfd;
  border-color: #1663d9;
}

.level-btn.danger {
  border-color: #d9a16a;
  background: #fff4e8;
}

.level-btn.resume {
  margin: 0.6rem auto 0;
  max-width: 16rem;
  background: #e7f3ec;
  border-color: #7dbb8f;
}

.cell {
  box-sizing: border-box;
  width: var(--cell);
  height: var(--cell);
  font-size: 1.15rem;
  border: 1px solid #b9c0cc;
  background: #fff;
  cursor: pointer;
  padding: 0;
}

.cell:nth-child(3n) {
  border-right: 2px solid #222;
}

.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
  border-bottom: 2px solid #222;
}

.cell.given {
  font-weight: 700;
  color: #222;
}

.cell.user {
  color: #1663d9;
}

.cell.wrong {
  color: #d91616;
}

.cell.hl {
  background: #eef3ff;
}

.cell .marks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 100%;
  height: 100%;
  line-height: 1;
  align-items: center;
}

.cell .mark {
  font-size: 0.7rem;
  color: #5a6577;
  text-align: center;
}

.cell .mark.empty {
  visibility: hidden;
}

.cell .mark.hot {
  color: #1663d9;
  font-weight: 700;
}

.cell.tutor-unit {
  background: #e7f3ec;
}

.cell.tutor-cell {
  background: #cfe8ff;
  outline: 2px solid #1663d9;
  outline-offset: -2px;
  z-index: 1;
}

.cell.tutor-cell.tutor-unit {
  background: #cfe8ff;
}

@keyframes tutorplace {
  0%, 100% {
    background: #cfe8ff;
  }
  50% {
    background: #9fe0a8;
  }
}
.cell.tutor-place {
  background: #b8ecc0;
  animation: tutorplace 1s ease-in-out infinite;
  z-index: 1;
}

@keyframes tutorelim {
  0%, 100% {
    background: #ffe3e3;
  }
  50% {
    background: #ffb3b3;
  }
}
.cell.tutor-elim {
  background: #ffd9d9;
  animation: tutorelim 0.9s ease-in-out infinite;
  z-index: 1;
}

.cell.tutor-elim .mark.hot {
  color: #d91616;
}

.cell.tutor-elim .mark.strike {
  text-decoration: line-through;
}

.learn {
  margin-top: 1rem;
  border: 1px solid #9db2d6;
  border-radius: 10px;
  background: #fff;
  padding: 0.75rem 1rem;
  max-width: 100%;
  box-sizing: border-box;
}

.learn .walkthrough-text {
  overflow-wrap: break-word;
}

.learn h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.learn-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 11rem;
  overflow-y: auto;
}

.learn-item {
  text-align: left;
  padding: 0.35rem 0.6rem;
  border: 1px solid #c3cfe8;
  border-radius: 6px;
  background: #f4f7ff;
  cursor: pointer;
  font-size: 0.9rem;
}

.learn-item:hover {
  background: #dcebfd;
}

.walkthrough-title {
  color: #1663d9;
}

.walkthrough-text {
  min-height: 2.6em;
  font-size: 0.92rem;
  margin: 0.25rem 0 0.5rem;
}

.walkthrough-progress {
  color: #888;
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.picker-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.apply-btn {
  margin-top: 0.5rem;
}

.notes-btn.on {
  background: #dcebfd;
  border-color: #1663d9;
}

.walkthrough-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.auto-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #555;
  font-size: 0.85rem;
}

.auto-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.speed-select {
  border: 1px solid #bbb;
  border-radius: 6px;
  background: #fff;
  padding: 0.15rem 0.25rem;
  font-size: 0.85rem;
}

.cell.selected {
  outline: 3px solid #222;
  outline-offset: -3px;
  z-index: 1;
}

.pad {
  display: flex;
  gap: 0.2rem;
  justify-content: center;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.pad-btn {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 0.05rem;
  height: 2.6rem;
  font-size: 1.1rem;
  border: 1px solid #9db2d6;
  border-radius: 8px;
  background: #eef3ff;
  cursor: pointer;
}

.pad-btn.erase {
  flex: 1.7 1 0;
}

.pad-btn:disabled {
  background: #dde1e8;
  border-color: #c3c9d4;
  color: #98a0ad;
  cursor: default;
}

.overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
}

.overlay-card {
  background: #fff;
  border: 2px solid #222;
  border-radius: 12px;
  padding: 1.5rem 2.5rem;
  text-align: center;
}

@keyframes winflash {
  0%, 100% {
    background: rgba(255, 255, 255, 0.85);
  }
  25% {
    background: rgba(120, 190, 255, 0.95);
  }
  50% {
    background: rgba(255, 235, 130, 0.95);
  }
  75% {
    background: rgba(150, 255, 170, 0.95);
  }
}
.win-flash {
  animation: winflash 1.2s linear 2;
}

.github-corner {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 10;
}
.github-corner svg {
  display: block;
  width: 80px;
  height: 80px;
  fill: #24292f;
}
.github-corner .octo-arm,
.github-corner .octo-body {
  fill: #fff;
}
.github-corner:hover svg {
  fill: #1663d9;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.35rem 1rem;
  background: #eef0f4;
  color: #666;
  font-size: 0.78rem;
}

footer a {
  color: #1663d9;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}