/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-gradient);
  color: var(--text-primary);
  transition: background 0.3s, color 0.3s;
  user-select: none;
  -webkit-user-select: none;
  overflow-x: hidden;
}

/* =============================================
   THEME: 暗夜紫 (default)
   ============================================= */
:root, [data-theme="dark-purple"] {
  --bg-gradient: linear-gradient(135deg, #0d0221, #1a0a2e, #2d1b4e);
  --panel-bg: rgba(30, 15, 60, 0.55);
  --panel-border: rgba(180, 140, 255, 0.15);
  --cell-bg: rgba(60, 40, 100, 0.5);
  --cell-hover: rgba(100, 70, 160, 0.5);
  --cell-revealed: rgba(20, 10, 45, 0.6);
  --cell-revealed-alt: rgba(25, 15, 50, 0.6);
  --text-primary: #e0d0ff;
  --text-secondary: #b0a0d0;
  --accent: #9b6dff;
  --accent-hover: #b088ff;
  --danger: #ff4466;
  --success: #44ff88;
  --num-1: #6eb5ff;
  --num-2: #5cd65c;
  --num-3: #ff5555;
  --num-4: #b380ff;
  --num-5: #ff8844;
  --num-6: #44ccbb;
  --num-7: #ff6699;
  --num-8: #999999;
  --ad-border: rgba(180, 140, 255, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="minimal-white"] {
  --bg-gradient: linear-gradient(135deg, #d0d0d0, #e8e8e8, #f5f5f5);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(0, 0, 0, 0.1);
  --cell-bg: rgba(200, 200, 200, 0.5);
  --cell-hover: rgba(180, 180, 200, 0.5);
  --cell-revealed: rgba(220, 220, 220, 0.6);
  --cell-revealed-alt: rgba(210, 210, 210, 0.6);
  --text-primary: #2d2d2d;
  --text-secondary: #666666;
  --accent: #5577cc;
  --accent-hover: #6688dd;
  --danger: #cc3333;
  --success: #33aa55;
  --num-1: #2266cc;
  --num-2: #228833;
  --num-3: #cc3333;
  --num-4: #6633aa;
  --num-5: #cc6622;
  --num-6: #228877;
  --num-7: #cc3366;
  --num-8: #777777;
  --ad-border: rgba(0, 0, 0, 0.2);
  --modal-overlay: rgba(0, 0, 0, 0.4);
}

[data-theme="forest-green"] {
  --bg-gradient: linear-gradient(135deg, #051005, #0d1f0d, #1a3a1a);
  --panel-bg: rgba(20, 45, 20, 0.55);
  --panel-border: rgba(100, 200, 100, 0.15);
  --cell-bg: rgba(30, 70, 30, 0.5);
  --cell-hover: rgba(50, 110, 50, 0.5);
  --cell-revealed: rgba(10, 30, 10, 0.6);
  --cell-revealed-alt: rgba(15, 35, 15, 0.6);
  --text-primary: #c0f0c0;
  --text-secondary: #80b080;
  --accent: #44cc44;
  --accent-hover: #66dd66;
  --danger: #ff5544;
  --success: #44ff66;
  --num-1: #66ccff;
  --num-2: #55dd55;
  --num-3: #ff5555;
  --num-4: #aa66ff;
  --num-5: #ff8844;
  --num-6: #44ccaa;
  --num-7: #ff6699;
  --num-8: #99aa99;
  --ad-border: rgba(100, 200, 100, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="sakura-pink"] {
  --bg-gradient: linear-gradient(135deg, #1a0a14, #2d1a24, #4a2d3a);
  --panel-bg: rgba(60, 25, 40, 0.55);
  --panel-border: rgba(255, 150, 180, 0.15);
  --cell-bg: rgba(90, 35, 55, 0.5);
  --cell-hover: rgba(130, 55, 80, 0.5);
  --cell-revealed: rgba(35, 10, 20, 0.6);
  --cell-revealed-alt: rgba(40, 15, 25, 0.6);
  --text-primary: #ffd0dd;
  --text-secondary: #d090a0;
  --accent: #ff7799;
  --accent-hover: #ff99aa;
  --danger: #ff4466;
  --success: #77dd88;
  --num-1: #88bbff;
  --num-2: #77dd77;
  --num-3: #ff6666;
  --num-4: #cc88ff;
  --num-5: #ff9966;
  --num-6: #55ccbb;
  --num-7: #ff77aa;
  --num-8: #bb99aa;
  --ad-border: rgba(255, 150, 180, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="ocean-blue"] {
  --bg-gradient: linear-gradient(135deg, #050d1a, #0a1628, #1a3050);
  --panel-bg: rgba(15, 35, 70, 0.55);
  --panel-border: rgba(80, 160, 255, 0.15);
  --cell-bg: rgba(25, 55, 100, 0.5);
  --cell-hover: rgba(40, 80, 150, 0.5);
  --cell-revealed: rgba(8, 20, 40, 0.6);
  --cell-revealed-alt: rgba(12, 25, 45, 0.6);
  --text-primary: #c0ddff;
  --text-secondary: #80a0cc;
  --accent: #5599ff;
  --accent-hover: #77aaff;
  --danger: #ff5566;
  --success: #55dd88;
  --num-1: #66aaff;
  --num-2: #55dd66;
  --num-3: #ff6666;
  --num-4: #9966ff;
  --num-5: #ff8844;
  --num-6: #44ccbb;
  --num-7: #ff6699;
  --num-8: #889999;
  --ad-border: rgba(80, 160, 255, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="sunset-orange"] {
  --bg-gradient: linear-gradient(135deg, #1a0d05, #2d1a0a, #4a3020);
  --panel-bg: rgba(70, 35, 20, 0.55);
  --panel-border: rgba(255, 160, 80, 0.15);
  --cell-bg: rgba(100, 50, 25, 0.5);
  --cell-hover: rgba(150, 75, 35, 0.5);
  --cell-revealed: rgba(40, 15, 5, 0.6);
  --cell-revealed-alt: rgba(45, 20, 8, 0.6);
  --text-primary: #ffe0cc;
  --text-secondary: #cc9966;
  --accent: #ff8833;
  --accent-hover: #ffaa55;
  --danger: #ff4444;
  --success: #66cc55;
  --num-1: #77aaff;
  --num-2: #66cc55;
  --num-3: #ff5544;
  --num-4: #9966dd;
  --num-5: #ee8833;
  --num-6: #44bbaa;
  --num-7: #ee5577;
  --num-8: #aa9977;
  --ad-border: rgba(255, 160, 80, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="mint-cyan"] {
  --bg-gradient: linear-gradient(135deg, #051510, #0a1f1a, #1a3a30);
  --panel-bg: rgba(20, 55, 45, 0.55);
  --panel-border: rgba(80, 220, 180, 0.15);
  --cell-bg: rgba(30, 80, 60, 0.5);
  --cell-hover: rgba(45, 120, 90, 0.5);
  --cell-revealed: rgba(8, 30, 20, 0.6);
  --cell-revealed-alt: rgba(12, 35, 25, 0.6);
  --text-primary: #c0ffe8;
  --text-secondary: #70b090;
  --accent: #44cc99;
  --accent-hover: #66ddbb;
  --danger: #ff5566;
  --success: #55ee88;
  --num-1: #66bbdd;
  --num-2: #55dd66;
  --num-3: #ff6666;
  --num-4: #9966ee;
  --num-5: #ff8844;
  --num-6: #44ccbb;
  --num-7: #ff6699;
  --num-8: #889999;
  --ad-border: rgba(80, 220, 180, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.6);
}

[data-theme="graphite-gray"] {
  --bg-gradient: linear-gradient(135deg, #0d0d0d, #1a1a1a, #2d2d2d);
  --panel-bg: rgba(40, 40, 40, 0.55);
  --panel-border: rgba(255, 255, 255, 0.1);
  --cell-bg: rgba(60, 60, 60, 0.5);
  --cell-hover: rgba(90, 90, 90, 0.5);
  --cell-revealed: rgba(20, 20, 20, 0.6);
  --cell-revealed-alt: rgba(25, 25, 25, 0.6);
  --text-primary: #e8e8e8;
  --text-secondary: #aaaaaa;
  --accent: #cccccc;
  --accent-hover: #e0e0e0;
  --danger: #ff5555;
  --success: #55dd55;
  --num-1: #6699dd;
  --num-2: #55cc55;
  --num-3: #dd4444;
  --num-4: #9966cc;
  --num-5: #dd7733;
  --num-6: #44aaaa;
  --num-7: #cc5588;
  --num-8: #888888;
  --ad-border: rgba(255, 255, 255, 0.15);
  --modal-overlay: rgba(0, 0, 0, 0.7);
}

/* =============================================
   LIGHT THEME VARIANTS
   ============================================= */
[data-theme="dark-purple-light"] {
  --bg-gradient: linear-gradient(135deg, #e8ddf8, #f0e8ff, #ddd0f8);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(120, 80, 180, 0.15);
  --cell-bg: rgba(210, 190, 240, 0.5);
  --cell-hover: rgba(180, 150, 220, 0.5);
  --cell-revealed: rgba(240, 235, 250, 0.7);
  --cell-revealed-alt: rgba(230, 220, 245, 0.7);
  --text-primary: #3a2060;
  --text-secondary: #7a6090;
  --accent: #7b4dcc;
  --accent-hover: #9468dd;
  --danger: #dd3355;
  --success: #33aa55;
  --num-1: #3355cc;
  --num-2: #338833;
  --num-3: #cc3333;
  --num-4: #7733bb;
  --num-5: #cc6622;
  --num-6: #339988;
  --num-7: #cc3366;
  --num-8: #777777;
  --ad-border: rgba(120, 80, 180, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="minimal-white-light"] {
  --bg-gradient: linear-gradient(135deg, #fafafa, #ffffff, #f5f5f5);
  --panel-bg: rgba(255, 255, 255, 0.7);
  --panel-border: rgba(0, 0, 0, 0.08);
  --cell-bg: rgba(230, 230, 230, 0.6);
  --cell-hover: rgba(210, 210, 220, 0.6);
  --cell-revealed: rgba(245, 245, 245, 0.8);
  --cell-revealed-alt: rgba(238, 238, 238, 0.8);
  --text-primary: #1a1a1a;
  --text-secondary: #888888;
  --accent: #4466bb;
  --accent-hover: #5577cc;
  --danger: #cc3333;
  --success: #33aa55;
  --num-1: #2255aa;
  --num-2: #227733;
  --num-3: #cc3333;
  --num-4: #6633aa;
  --num-5: #bb5511;
  --num-6: #228877;
  --num-7: #cc3366;
  --num-8: #666666;
  --ad-border: rgba(0, 0, 0, 0.15);
  --modal-overlay: rgba(0, 0, 0, 0.3);
}

[data-theme="forest-green-light"] {
  --bg-gradient: linear-gradient(135deg, #d8f0d8, #e8f8e8, #c8e8c8);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(60, 160, 60, 0.15);
  --cell-bg: rgba(180, 220, 180, 0.5);
  --cell-hover: rgba(150, 200, 150, 0.5);
  --cell-revealed: rgba(235, 245, 235, 0.7);
  --cell-revealed-alt: rgba(225, 240, 225, 0.7);
  --text-primary: #1a3a1a;
  --text-secondary: #5a8a5a;
  --accent: #33aa33;
  --accent-hover: #44cc44;
  --danger: #dd4444;
  --success: #33bb44;
  --num-1: #3388cc;
  --num-2: #339933;
  --num-3: #cc3333;
  --num-4: #7733cc;
  --num-5: #cc6622;
  --num-6: #339988;
  --num-7: #cc3366;
  --num-8: #668866;
  --ad-border: rgba(60, 160, 60, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="sakura-pink-light"] {
  --bg-gradient: linear-gradient(135deg, #fde8f0, #fff0f5, #fddde8);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(220, 120, 160, 0.15);
  --cell-bg: rgba(245, 200, 215, 0.5);
  --cell-hover: rgba(235, 180, 200, 0.5);
  --cell-revealed: rgba(252, 238, 245, 0.7);
  --cell-revealed-alt: rgba(248, 230, 240, 0.7);
  --text-primary: #4a2035;
  --text-secondary: #996677;
  --accent: #dd5588;
  --accent-hover: #ee77aa;
  --danger: #dd3355;
  --success: #44bb66;
  --num-1: #4488cc;
  --num-2: #44aa44;
  --num-3: #cc4444;
  --num-4: #8844cc;
  --num-5: #cc6622;
  --num-6: #44aa99;
  --num-7: #cc4477;
  --num-8: #887788;
  --ad-border: rgba(220, 120, 160, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="ocean-blue-light"] {
  --bg-gradient: linear-gradient(135deg, #d8e8f8, #e0f0ff, #cce0f8);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(60, 120, 200, 0.15);
  --cell-bg: rgba(190, 215, 240, 0.5);
  --cell-hover: rgba(160, 195, 225, 0.5);
  --cell-revealed: rgba(238, 245, 252, 0.7);
  --cell-revealed-alt: rgba(228, 240, 250, 0.7);
  --text-primary: #152840;
  --text-secondary: #5a7890;
  --accent: #3377cc;
  --accent-hover: #5599dd;
  --danger: #dd4455;
  --success: #33bb55;
  --num-1: #3366bb;
  --num-2: #339944;
  --num-3: #cc3333;
  --num-4: #6633bb;
  --num-5: #cc6622;
  --num-6: #339999;
  --num-7: #cc3366;
  --num-8: #668888;
  --ad-border: rgba(60, 120, 200, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="sunset-orange-light"] {
  --bg-gradient: linear-gradient(135deg, #fde8d8, #fff0e0, #fddcc8);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(220, 140, 60, 0.15);
  --cell-bg: rgba(245, 210, 170, 0.5);
  --cell-hover: rgba(235, 190, 150, 0.5);
  --cell-revealed: rgba(252, 242, 230, 0.7);
  --cell-revealed-alt: rgba(248, 235, 220, 0.7);
  --text-primary: #4a2a15;
  --text-secondary: #996644;
  --accent: #dd6622;
  --accent-hover: #ee8844;
  --danger: #dd3333;
  --success: #44aa44;
  --num-1: #3388cc;
  --num-2: #339944;
  --num-3: #cc4444;
  --num-4: #7744cc;
  --num-5: #cc6611;
  --num-6: #44aa99;
  --num-7: #cc4466;
  --num-8: #887766;
  --ad-border: rgba(220, 140, 60, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="mint-cyan-light"] {
  --bg-gradient: linear-gradient(135deg, #d0f0e8, #ddf8f0, #c8ece0);
  --panel-bg: rgba(255, 255, 255, 0.55);
  --panel-border: rgba(60, 180, 150, 0.15);
  --cell-bg: rgba(180, 225, 210, 0.5);
  --cell-hover: rgba(155, 205, 190, 0.5);
  --cell-revealed: rgba(235, 248, 243, 0.7);
  --cell-revealed-alt: rgba(225, 243, 237, 0.7);
  --text-primary: #153a30;
  --text-secondary: #4a8070;
  --accent: #33aa88;
  --accent-hover: #44ccaa;
  --danger: #dd4455;
  --success: #33bb55;
  --num-1: #3377bb;
  --num-2: #339944;
  --num-3: #cc3333;
  --num-4: #6633bb;
  --num-5: #cc6622;
  --num-6: #33aa99;
  --num-7: #cc3366;
  --num-8: #668888;
  --ad-border: rgba(60, 180, 150, 0.3);
  --modal-overlay: rgba(0, 0, 0, 0.35);
}

[data-theme="graphite-gray-light"] {
  --bg-gradient: linear-gradient(135deg, #e8e8e8, #f2f2f2, #e0e0e0);
  --panel-bg: rgba(255, 255, 255, 0.6);
  --panel-border: rgba(0, 0, 0, 0.1);
  --cell-bg: rgba(210, 210, 210, 0.5);
  --cell-hover: rgba(190, 190, 200, 0.5);
  --cell-revealed: rgba(242, 242, 242, 0.75);
  --cell-revealed-alt: rgba(235, 235, 235, 0.75);
  --text-primary: #1a1a1a;
  --text-secondary: #777777;
  --accent: #666666;
  --accent-hover: #888888;
  --danger: #dd3333;
  --success: #33aa44;
  --num-1: #3355aa;
  --num-2: #338844;
  --num-3: #cc3333;
  --num-4: #6644aa;
  --num-5: #bb5511;
  --num-6: #339988;
  --num-7: #cc3366;
  --num-8: #666666;
  --ad-border: rgba(0, 0, 0, 0.15);
  --modal-overlay: rgba(0, 0, 0, 0.3);
}

/* === Navbar === */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  margin: 12px 12px 0;
  background: var(--panel-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
}

.logo {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.nav-stats {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-family: 'Courier New', monospace;
}

.face-indicator {
  font-size: 1.5rem;
  line-height: 1;
  min-width: 36px;
  text-align: center;
  transition: transform 0.2s;
}

.restart-btn {
  font-size: 0.85rem;
  background: var(--accent);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all 0.2s;
  white-space: nowrap;
}
.restart-btn:hover { background: var(--accent-hover); transform: scale(1.05); }
.restart-btn:active { transform: scale(0.95); }

.status-bar {
  text-align: center;
  padding: 6px 12px;
  margin: 8px 12px 0;
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 10px;
  min-height: 20px;
  transition: all 0.3s;
}
.status-bar.win {
  background: rgba(68, 255, 100, 0.2);
  color: var(--success);
  border: 1px solid rgba(68, 255, 100, 0.3);
}
.status-bar.lose {
  background: rgba(255, 68, 100, 0.2);
  color: var(--danger);
  border: 1px solid rgba(255, 68, 100, 0.3);
}

.settings-btn {
  font-size: 1.3rem;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 10px;
  color: var(--text-primary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s;
}
.settings-btn:hover { background: var(--cell-hover); }

/* === Main Layout === */
.main-container {
  display: flex;
  flex: 1;
  margin: 12px;
  gap: 12px;
  min-height: 0;
}

/* === Sidebar (10%) === */
.sidebar {
  width: 10%;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.ad-slot {
  aspect-ratio: 3 / 2;
  background: var(--panel-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 2px dashed var(--ad-border);
  border-radius: 12px;
  overflow: hidden;
}
.ad-slot a {
  display: block;
  width: 100%;
  height: 100%;
}
.ad-slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.leaderboard {
  flex: 1;
  background: var(--panel-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 8px;
  overflow-y: auto;
}
.leaderboard h3 {
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 8px;
  color: var(--text-secondary);
}
.lb-section {
  margin-bottom: 6px;
}
.lb-section .lb-title {
  font-size: 0.65rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;
}
.lb-section .lb-score {
  font-size: 0.7rem;
  font-family: 'Courier New', monospace;
  color: var(--text-primary);
  padding: 1px 4px;
}
.lb-section .lb-score.highlight {
  color: var(--accent);
  font-weight: 700;
}

/* === Game Area (90%) === */
.game-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.board-container {
  background: var(--panel-bg);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.board {
  display: grid;
  gap: 2px;
  user-select: none;
  -webkit-user-select: none;
}

.cell {
  width: 32px;
  height: 32px;
  background: var(--cell-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  transition: background 0.1s, transform 0.1s;
}
.cell:hover {
  background: var(--cell-hover);
}
.cell:active {
  transform: scale(0.92);
}

.cell.revealed {
  background: var(--cell-revealed);
  cursor: default;
}
.cell.revealed:nth-child(odd) {
  background: var(--cell-revealed-alt);
}
.cell.revealed:hover {
  background: var(--cell-revealed);
}
.cell.revealed:active {
  transform: none;
}

.cell.flagged::after {
  content: '🚩';
  font-size: 0.8rem;
}

.cell.mine {
  background: var(--danger) !important;
}
.cell.mine::after {
  content: '💣';
  font-size: 0.85rem;
}

.cell.mine-exploded {
  background: #ff0000 !important;
}
.cell.mine-exploded::after {
  content: '💥';
  font-size: 0.85rem;
}

.cell.wrong-flag {
  background: rgba(255, 100, 100, 0.3) !important;
}
.cell.wrong-flag::after {
  content: '❌';
  font-size: 0.7rem;
}

/* Number colors */
.cell.n1 { color: var(--num-1); }
.cell.n2 { color: var(--num-2); }
.cell.n3 { color: var(--num-3); }
.cell.n4 { color: var(--num-4); }
.cell.n5 { color: var(--num-5); }
.cell.n6 { color: var(--num-6); }
.cell.n7 { color: var(--num-7); }
.cell.n8 { color: var(--num-8); }

/* === Hint Bar === */
.hint-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  margin: 0 12px 12px;
  background: var(--panel-bg);
  backdrop-filter: blur(12px) saturate(1.2);
  -webkit-backdrop-filter: blur(12px) saturate(1.2);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

/* === Modal === */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--modal-overlay);
  z-index: 100;
  align-items: center;
  justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--panel-bg);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 28px;
  min-width: 380px;
  max-width: 90vw;
  box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.modal-header h2 { font-size: 1.2rem; }

.modal-close {
  background: none;
  border: 1px solid var(--panel-border);
  color: var(--text-primary);
  font-size: 1.5rem;
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.modal-close:hover { background: var(--cell-hover); }

.setting-group { margin-bottom: 24px; }
.setting-group h3 {
  font-size: 0.9rem;
  margin-bottom: 12px;
  color: var(--text-secondary);
}

/* Difficulty buttons */
.difficulty-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.diff-btn {
  padding: 8px 16px;
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 0.85rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: all 0.2s;
}
.diff-btn:hover { background: var(--cell-hover); }
.diff-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Custom fields */
.custom-fields {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
.custom-fields label {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.custom-fields input {
  width: 64px;
  padding: 6px 8px;
  margin-left: 4px;
  background: var(--cell-bg);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.85rem;
}
.custom-fields input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Theme mode toggle */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.theme-mode-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.mode-switch {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  background: var(--cell-bg);
  border: 1px solid var(--panel-border);
  cursor: pointer;
  position: relative;
  transition: all 0.3s;
}
.mode-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.3s;
}
.mode-switch.light {
  background: var(--accent);
}
.mode-switch.light::after {
  background: #fff;
  transform: translateX(24px);
}

/* Theme buttons */
.theme-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.theme-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn.active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 3px var(--accent);
}

/* === Responsive === */
@media (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  .sidebar {
    width: 100%;
    flex-direction: row;
    min-width: unset;
    order: 2;
  }
  .ad-slot {
    aspect-ratio: unset;
    width: 120px;
    height: 80px;
    flex-shrink: 0;
  }
  .leaderboard {
    flex: 1;
    padding: 6px;
  }
  .leaderboard h3 { font-size: 0.7rem; }
  .lb-section { display: inline-block; margin-right: 8px; }
  .game-area { order: 1; }
  .cell { width: 24px; height: 24px; font-size: 0.7rem; }
  .board { gap: 1px; }
  .board-container { padding: 8px; }
  .nav-stats { gap: 10px; }
  .stat { font-size: 0.75rem; }
  .modal { min-width: unset; width: 95vw; padding: 20px; }
}

@media (max-width: 480px) {
  .cell { width: 20px; height: 20px; font-size: 0.6rem; }
  .logo { font-size: 1rem; }
  .navbar { padding: 8px 12px; margin: 6px 6px 0; }
  .main-container { margin: 6px; gap: 6px; }
  .hint-bar { margin: 0 6px 6px; font-size: 0.7rem; gap: 8px; }
  .ad-slot { width: 75px; height: 50px; }
}