/* ── Page layout ── */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding-bottom: 28px;
}

.arcade-title, .subtitle { position: relative; z-index: 1; }

/* ── Three-column layout ── */
.game-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 860px;
  padding: 14px 12px 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* ── Side panels ── */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 110px;
  flex-shrink: 0;
  padding-top: 2px;
}

.panel-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-label {
  font-size: 6px;
  color: var(--muted);
  letter-spacing: 2px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 4px;
}

/* Difficulty tabs — stacked on left */
.level-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.jtab {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 7px 8px;
  border: 1px solid rgba(255,0,204,0.2);
  background: #0d0820;
  color: #8877aa;
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 1px;
  text-align: left;
}
.jtab:hover { background: #1a1030; color: #cc88ff; }
.jtab.jt1.active { background: #0a1f17; color: #00f5aa; border-color: #00f5aa; text-shadow: 0 0 8px #00f5aa; }
.jtab.jt2.active { background: #1f1600; color: #ffe600; border-color: #ffe600; text-shadow: 0 0 8px #ffe600; }
.jtab.jt3.active { background: #200a00; color: #ff8c00; border-color: #ff8c00; text-shadow: 0 0 8px #ff8c00; }

/* Stats */
.stat-row {
  font-size: 8px;
  color: var(--muted);
  letter-spacing: 1px;
  padding: 4px 0;
}
.stat-row span { color: var(--cyan); }
.stat-row span.danger {
  color: #ff2244;
  animation: timerPulse 0.6s ease-in-out infinite;
}
@keyframes timerPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Action buttons */
.side-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 9px 8px;
  border: 1px solid rgba(255,0,204,0.25);
  background: transparent;
  color: var(--pink);
  cursor: pointer;
  transition: all .15s;
  letter-spacing: 1px;
  text-align: left;
  width: 100%;
}
.side-btn:hover {
  background: rgba(255,0,204,0.12);
  border-color: var(--pink);
  box-shadow: 0 0 10px rgba(255,0,204,0.2);
  color: #fff;
}
.side-btn.primary-btn {
  border-color: rgba(0,245,255,0.3);
  color: var(--cyan);
}
.side-btn.primary-btn:hover {
  background: rgba(0,245,255,0.1);
  border-color: var(--cyan);
  box-shadow: 0 0 10px rgba(0,245,255,0.2);
}

.diff-desc {
  font-size: 5px;
  color: #444;
  letter-spacing: 1px;
  line-height: 1.8;
  margin-top: 4px;
}

/* ── Board ── */
.board-container {
  flex: 1;
  min-width: 0;
  max-width: 480px;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid rgba(0,245,255,0.25);
  box-shadow: 0 0 30px rgba(0,245,255,0.06), 0 0 60px rgba(255,0,204,0.04);
  background: #08060f;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.8vw, 16px);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.1s;
  position: relative;
  user-select: none;
  aspect-ratio: 1;
}

.cell.bt { border-top:    2.5px solid rgba(255,255,255,0.3); }
.cell.br { border-right:  2.5px solid rgba(255,255,255,0.3); }
.cell.bb { border-bottom: 2.5px solid rgba(255,255,255,0.3); }
.cell.bl { border-left:   2.5px solid rgba(255,255,255,0.3); }

.cell:hover:not(.given) { background: rgba(255,255,255,0.05); }

/* Selected cell — purple border glow */
.cell.selected {
  background: rgba(123,47,255,0.18) !important;
  box-shadow: inset 0 0 0 2px var(--purple), 0 0 14px rgba(123,47,255,0.5);
}

.cell.given { cursor: inherit; color: rgba(255,255,255,0.88); }
.cell.user-ok  { color: #00f5aa; }
.cell.user-err { color: #ff2244; background: #08060f !important; }

.cell.notes-cell {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  padding: 1px;
}
.note-n {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(3px, 0.8vw, 6px);
  color: rgba(0,245,255,0.45);
  line-height: 1;
}

/* Region tints — stronger so shapes are clearly visible */
.r0 { background-color: rgba(255,  0,204,0.18); }
.r1 { background-color: rgba(  0,245,255,0.16); }
.r2 { background-color: rgba(123, 47,255,0.20); }
.r3 { background-color: rgba(255,204,  0,0.16); }
.r4 { background-color: rgba(  0,255,136,0.16); }
.r5 { background-color: rgba(255,100,  0,0.18); }
.r6 { background-color: rgba(  0,100,255,0.20); }
.r7 { background-color: rgba(255,  0, 80,0.18); }
.r8 { background-color: rgba(180,255,  0,0.16); }

/* ── Right panel: numpad ── */
.side-right {
  width: 90px;
}

.numpad-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.nkey {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  padding: 9px 4px;
  border: 1px solid rgba(255,0,204,0.25);
  background: #0d0820;
  color: #cc88ff;
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.nkey:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.nkey.active {
  background: rgba(255,140,0,0.2);
  border-color: #ff8c00;
  color: #ff8c00;
  box-shadow: 0 0 10px rgba(255,140,0,0.5), 0 0 20px rgba(255,140,0,0.2);
  text-shadow: 0 0 8px #ff8c00;
}

.erase-btn {
  font-size: 5px;
  padding: 7px 4px;
  width: 100%;
  margin-top: 4px;
  letter-spacing: 0;
}
.notes-btn {
  font-size: 5px;
  padding: 7px 4px;
  width: 100%;
  margin-top: 4px;
  letter-spacing: 0;
}
.notes-btn.active {
  background: rgba(0,245,255,0.12);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* ── Game Over popup — defined in style.css ── */

/* ── Responsive: collapse to single column on small screens ── */
@media (max-width: 600px) {
  .game-layout {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 0;
  }

  .side-panel {
    width: 100%;
    max-width: 420px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }

  .side-left { order: 1; }
  .board-container { order: 2; width: 100%; max-width: 420px; }
  .side-right { order: 3; }

  .panel-section { flex: 1; min-width: 80px; }

  .level-tabs { flex-direction: row; }
  .jtab { text-align: center; flex: 1; }

  .side-right {
    width: 100%;
    max-width: 420px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px;
  }

  .numpad-grid { display: flex; gap: 4px; flex-wrap: wrap; }
  .nkey { min-width: 32px; }
  .erase-btn, .notes-btn { width: auto; flex: 1; }
  .panel-label { width: 100%; }
  .diff-desc { width: 100%; }
}