/* ============================================================
   SudokuProLab — style.css
   ============================================================ */

:root {
  --bg:          #0f0f13;
  --surface:     #1a1a22;
  --surface2:    #24242f;
  --border:      #2e2e3d;
  --text:        #e8e8f0;
  --text-muted:  #6b6b80;
  --accent:      #7c6af7;
  --accent-glow: rgba(124,106,247,0.25);
  --accent2:     #f7a26a;
  --cell-given:  #e8e8f0;
  --cell-user:   #7c6af7;
  --cell-note:   #6b6b80;
  --cell-error:  #f76a6a;
  --cell-select: rgba(124,106,247,0.18);
  --cell-peer:   rgba(124,106,247,0.07);
  --cell-match:  rgba(124,106,247,0.22);
  --easy-color:  #6af7a2;
  --med-color:   #f7d06a;
  --hard-color:  #f76a6a;
  --radius:      12px;
  --radius-sm:   8px;
  --shadow:      0 8px 32px rgba(0,0,0,0.45);
  --transition:  0.18s ease;
}

[data-theme="light"] {
  --bg:          #f4f4f8;
  --surface:     #ffffff;
  --surface2:    #ebebf3;
  --border:      #d4d4e0;
  --text:        #1a1a2e;
  --text-muted:  #888898;
  --cell-given:  #1a1a2e;
  --cell-user:   #5b4de0;
  --cell-peer:   rgba(124,106,247,0.05);
  --cell-select: rgba(124,106,247,0.12);
  --shadow:      0 4px 20px rgba(0,0,0,0.1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background var(--transition), color var(--transition);
}

/* ── HEADER ─────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(15,15,19,0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
[data-theme="light"] .site-header { background: rgba(244,244,248,0.88); }

.header-inner {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
}

.logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text);
  font-size: 1.15rem; letter-spacing: -0.3px;
  flex-shrink: 0;
}
.logo-icon { font-size: 1.3rem; }
.logo-text strong { color: var(--accent); }

.header-nav { display: flex; gap: 6px; flex: 1; justify-content: center; }

.nav-btn {
  background: none; border: 1px solid transparent;
  color: var(--text-muted); font-size: 0.85rem; font-weight: 500;
  padding: 6px 14px; border-radius: 20px; cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
}
.nav-btn:hover, .nav-btn.active {
  background: var(--surface2);
  border-color: var(--border);
  color: var(--text);
}
.nav-btn.active { color: var(--accent); border-color: var(--accent); }

.theme-toggle {
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--text); width: 36px; height: 36px; border-radius: 50%;
  cursor: pointer; font-size: 1rem; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── MAIN ────────────────────────────────────────────────── */
.main-container { flex: 1; max-width: 760px; margin: 0 auto; width: 100%; padding: 24px 16px 48px; }

.view { display: none; animation: fadeIn 0.22s ease; }
.view.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── PUZZLE HEADER ──────────────────────────────────────── */
.puzzle-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
}
.puzzle-meta { display: flex; align-items: center; gap: 12px; }
.puzzle-date { font-size: 1rem; font-weight: 600; color: var(--text); }

.difficulty-badge {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 20px; text-transform: uppercase;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text-muted);
}
.difficulty-badge.simple   { background: rgba(106,247,162,0.12); border-color: #6af7a2; color: #6af7a2; }
.difficulty-badge.easy     { background: rgba(247,208,106,0.12); border-color: #f7d06a; color: #f7d06a; }
.difficulty-badge.moderate { background: rgba(247,208,106,0.12); border-color: #f7d06a; color: #f7d06a; }
.difficulty-badge.hard     { background: rgba(247,106,106,0.12); border-color: #f76a6a; color: #f76a6a; }
.difficulty-badge.expert   { background: rgba(247,106,106,0.15); border-color: #f76a6a; color: #f76a6a; }

.timer-block {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 14px;
}
.timer-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 1px; color: var(--text-muted); }
.timer-display { font-family: 'JetBrains Mono', monospace; font-size: 1.1rem; font-weight: 600; color: var(--text); min-width: 52px; }
.timer-btn {
  background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.9rem;
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.timer-btn:hover { background: var(--accent-glow); }

/* ── SUDOKU BOARD ───────────────────────────────────────── */
.board-wrap {
  display: flex; justify-content: center; margin-bottom: 20px;
}

.sudoku-board {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  width: min(500px, 94vw);
  height: min(500px, 94vw);
  border: 2.5px solid var(--text);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px var(--border);
}

.cell {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(1rem, 2.8vw, 1.35rem);
  font-weight: 500;
  cursor: pointer;
  position: relative;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  transition: background 0.1s;
  user-select: none;
  color: var(--cell-given);
}

/* thick box borders */
.cell:nth-child(3n)     { border-right: 2px solid color-mix(in srgb, var(--text) 40%, transparent); }
.cell:nth-child(9n)     { border-right: none; }
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) { border-bottom: 2px solid color-mix(in srgb, var(--text) 40%, transparent); }
.cell:nth-child(n+73)   { border-bottom: none; }

.cell.given { color: var(--cell-given); font-weight: 700; }
.cell.user-entered { color: var(--cell-user); font-weight: 600; }
.cell.error { color: var(--cell-error) !important; background: rgba(247,106,106,0.1) !important; }
.cell.selected { background: var(--cell-select) !important; }
.cell.peer     { background: var(--cell-peer); }
.cell.match    { background: var(--cell-match); }

.cell:hover:not(.given) { background: var(--cell-select); }

/* notes grid inside cell */
.cell-notes {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 100%; height: 100%; padding: 1px;
}
.cell-note {
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.38rem, 1vw, 0.5rem); color: var(--cell-note); font-weight: 600;
}

/* ── NUMPAD ─────────────────────────────────────────────── */
.numpad {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 16px;
}

.num-btn {
  width: clamp(38px, 9vw, 52px); height: clamp(38px, 9vw, 52px);
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text); font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 600;
  border-radius: var(--radius-sm); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.num-btn:hover  { border-color: var(--accent); color: var(--accent); background: var(--accent-glow); }
.num-btn.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.erase-btn { font-size: 1.1rem; }

/* ── ACTIONS ────────────────────────────────────────────── */
.board-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 32px;
}

.action-btn {
  background: var(--surface); border: 1.5px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; font-weight: 600;
  padding: 8px 18px; border-radius: 20px; cursor: pointer;
  transition: all var(--transition);
}
.action-btn:hover { border-color: var(--accent); color: var(--accent); }
.action-btn.notes-on { border-color: var(--accent2); color: var(--accent2); background: rgba(247,162,106,0.1); }
.action-btn.danger:hover { border-color: var(--cell-error); color: var(--cell-error); }
.reveal-btn { border-color: var(--accent2); color: var(--accent2); }

/* ── YESTERDAY BANNER ───────────────────────────────────── */
.yesterday-banner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
  margin-top: 8px;
}
.banner-label {
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted);
  margin-bottom: 16px; text-align: center;
}

.mini-board {
  width: min(280px, 80vw) !important;
  height: min(280px, 80vw) !important;
  margin: 0 auto;
  border-width: 2px !important;
  pointer-events: none;
}
.mini-board .cell { font-size: clamp(0.55rem, 1.8vw, 0.8rem) !important; }
.mini-board .cell-notes { display: none !important; }

/* ── ARCHIVE ────────────────────────────────────────────── */
.archive-header { text-align: center; margin-bottom: 28px; }
.archive-header h2 { font-size: 1.5rem; margin-bottom: 6px; }
.archive-header p  { color: var(--text-muted); font-size: 0.9rem; }

.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.archive-card {
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px 10px;
  text-align: center; cursor: pointer;
  transition: all var(--transition); text-decoration: none; color: var(--text);
  display: block;
}
.archive-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 4px 16px var(--accent-glow); }
.archive-card .arc-date { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 4px; }
.archive-card .arc-day  { font-size: 1.1rem; font-weight: 700; }
.archive-card .arc-diff { font-size: 0.7rem; font-weight: 600; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.archive-card.today-card { border-color: var(--accent); background: var(--accent-glow); }
.archive-card.future-card { opacity: 0.3; pointer-events: none; }

.loading-msg { color: var(--text-muted); text-align: center; padding: 40px; grid-column: 1/-1; }

/* ── RULES ──────────────────────────────────────────────── */
.rules-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 32px; max-width: 560px; margin: 0 auto;
}
.rules-card h2 { font-size: 1.4rem; margin-bottom: 20px; }
.rules-list { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.rules-list li { font-size: 0.92rem; line-height: 1.6; color: var(--text-muted); }
.rules-list li strong { color: var(--text); }
.difficulty-guide { margin-top: 28px; border-top: 1px solid var(--border); padding-top: 20px; }
.difficulty-guide h3 { font-size: 0.9rem; margin-bottom: 12px; }
.diff-row { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 8px; }
.diff-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.diff-dot.easy   { background: var(--easy-color); }
.diff-dot.medium { background: var(--med-color); }
.diff-dot.hard   { background: var(--hard-color); }

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 200;
  animation: fadeIn 0.2s ease;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 40px 32px; text-align: center;
  max-width: 340px; width: 90%; box-shadow: var(--shadow);
}
.modal-icon { font-size: 3rem; margin-bottom: 12px; }
.modal-card h2 { font-size: 1.4rem; margin-bottom: 8px; }
.modal-card p  { color: var(--text-muted); font-size: 0.9rem; }
.modal-sub { margin-top: 6px; }
.modal-close-btn {
  margin-top: 24px; background: var(--accent); color: #fff; border: none;
  padding: 10px 28px; border-radius: 20px; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; transition: opacity var(--transition);
}
.modal-close-btn:hover { opacity: 0.85; }

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer {
  text-align: center; padding: 20px; font-size: 0.78rem;
  color: var(--text-muted); border-top: 1px solid var(--border);
}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .header-inner { padding: 10px 14px; gap: 10px; }
  .logo-text    { font-size: 1rem; }
  .nav-btn      { padding: 5px 10px; font-size: 0.78rem; }
  .puzzle-header { flex-direction: column; align-items: flex-start; }
}