/* ===== Minesweeper clone — themed UI =====
   Layout/geometry is fixed here; all themeable visuals are CSS custom
   properties. The XP look is the default on :root; other themes override
   tokens via html[data-theme="..."]. Add a new theme by adding a block. */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; overflow: hidden; }

/* ---------- Theme tokens ---------- */
:root,
:root[data-theme="xp"] {
  --desktop-bg: #3a6ea5;
  --desktop-bg2:
    radial-gradient(120% 90% at 50% 110%, #7ab648 0%, #4a8a2c 32%, rgba(74,138,44,0) 55%),
    linear-gradient(#5a9fd4 0%, #3f7cbb 45%, #2f66a3 100%);

  --font: Tahoma, "Segoe UI", Geneva, Verdana, sans-serif;

  --win-border: #0831d9;
  --win-radius: 8px 8px 0 0;
  --win-bg: #ece9d8;
  --win-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);

  --tb-h: 28px;
  /* Windows XP Luna caption ramp — these are the authentic scheme stops: deep
     royal at the very top, a bright azure highlight, a long mid-blue body, then
     a dark navy footer band. The earlier "too strong" look came from the white
     gloss below, not from this gradient, so only the sheen stays tamed. */
  --tb-bg: linear-gradient(#0058ee 3%, #3593ff 6%, #288eff 24%, #2295ff 51%, #0054e3 91%, #0042be 100%);
  --tb-border: #0831d9;
  --tb-text: #fff;
  --tb-text-shadow: 1px 1px 1px rgba(0,0,0,.55);
  --tb-sheen: linear-gradient(rgba(255,255,255,.26), rgba(255,255,255,0) 50%);
  /* XP: blue minimize/maximize, red-orange close. */
  --tb-btn-normal: linear-gradient(#9ac8f7 0%, #4f96e8 14%, #2c7ede 55%, #1d6ac8 88%, #1660b6 100%);
  --tb-btn-close: linear-gradient(#f7bda1 0%, #ec8054 14%, #d74d22 55%, #c84018 88%, #b8370f 100%);
  --tb-btn-border: rgba(255,255,255,.92);
  --tb-btn-radius: 3px;

  --menu-bg: #ece9d8;
  --menu-border: #d4c5a0;
  --menu-text: #000;
  --menu-hover-bg: #316ac5;
  --menu-hover-text: #fff;
  --dropdown-bg: #fff;
  --dropdown-border: #aca899;

  --body-bg: #ece9d8;
  --panel-bg: #d6d3ce;
  --bevel-light: #fff;
  --bevel-dark: #7f7f7f;
  --field-bg: #c0c0c0;

  --cell-face: #d6d3ce;
  --cell-border-light: #fff;
  --cell-border-dark: #7b7b7b;
  --cell-revealed-border: #808080;
  --led-color: #ff2b2b;
  --led-color-off: rgba(255, 43, 43, 0.12);
  --led-bg: #000;

  --n1: #0000ff; --n2: #007b00; --n3: #ff0000; --n4: #00007f;
  --n5: #7f0000; --n6: #007f7f; --n7: #000000; --n8: #808080;

  --mine-hit-bg: #f00;
  --mine-color: #000;
  --mine-hl: #fff;
  --question-color: #b00;
  --wrong-color: #d00;
  --win-glow: rgba(255, 255, 180, 0.9);

  --overlay-bg: rgba(0,0,0,.15);
  --dialog-text: #000;
  --dialog-border-cell: #b8b199;
  --btn-bg: linear-gradient(#fdfdfd, #e6e3d9);
  --btn-border: #003c74;
  --btn-text: #000;
}

body {
  font-family: var(--font);
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ---------- Desktop backdrop ---------- */
.desktop {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background: var(--desktop-bg);
  background: var(--desktop-bg2);
}

/* ---------- Matrix code rain (Virus theme) ----------
   Single fixed canvas behind the window; only painted while the Virus theme
   is active (toggled from JS), so other themes pay nothing. */
.matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 0;
  pointer-events: none;
}
:root[data-theme="virus"] .matrix-rain { display: block; }

/* ---- Window chrome ---- */
.xp-window {
  position: relative;
  z-index: 1;
  border: 1px solid var(--win-border);
  border-radius: var(--win-radius);
  background: var(--win-bg);
  box-shadow: var(--win-shadow);
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
}

.xp-window.flash { animation: winFlash 320ms ease-in-out; }
@keyframes winFlash {
  0%, 100% { box-shadow: 0 6px 24px rgba(0,0,0,.45); }
  50% { box-shadow: 0 0 0 6px var(--win-glow), 0 6px 24px rgba(0,0,0,.45); }
}

.title-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--tb-h);
  padding: 0 4px 0 6px;
  background: var(--tb-bg);
  border-bottom: 1px solid var(--tb-border);
}
.title-bar-inner { display: flex; align-items: center; gap: 5px; overflow: hidden; }
/* Glossy highlight overlay — themed via --tb-sheen (none by default) */
.title-bar::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--tb-sheen, none);
  pointer-events: none;
}
.title-icon { display: inline-flex; width: 16px; height: 16px; }
.title-icon svg { display: block; }
.title-text {
  color: var(--tb-text);
  font-weight: bold;
  font-size: 12px;
  text-shadow: var(--tb-text-shadow);
  white-space: nowrap;
}
/* ---- Caption (min / max / close) buttons ----
   Base is deliberately NEUTRAL: equal sizes, a real gap, plain shadow. The
   non-Windows themes only set colours, so they must not inherit XP chrome. */
.title-buttons { display: flex; align-items: center; gap: 2px; padding-right: 3px; }
.tb-btn {
  width: 21px; height: 21px;
  padding: 0;
  border: 1px solid var(--tb-btn-border);
  border-radius: var(--tb-btn-radius);
  color: var(--tb-text);
  cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.tb-btn svg { width: 10px; height: 10px; display: block; }
.tb-btn.minimize, .tb-btn.maximize { background: var(--tb-btn-normal); }
.tb-btn.close { background: var(--tb-btn-close); }
.tb-btn:active { filter: brightness(.85); }
.tb-btn:hover { filter: brightness(1.12); }

/* XP Luna: glossy pills, a wider close offset from the pair, and white glyphs
   carrying a hard 1px shadow. */
/* Gap must clear the near-white 1px borders on both sides, otherwise two
   adjacent buttons read as one continuous framed block. */
:root[data-theme="xp"] .title-buttons { gap: 5px; }
:root[data-theme="xp"] .tb-btn {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -4px 6px rgba(0,0,0,.25),
    inset 0 3px 5px rgba(255,255,255,.18),
    0 1px 2px rgba(0,0,0,.4);
}
:root[data-theme="xp"] .tb-btn svg { filter: drop-shadow(0 1px 0 rgba(0,0,0,.45)); }
/* Equal 5px spacing between all three; only the close is wider. */
:root[data-theme="xp"] .tb-btn.close { width: 24px; }

/* ---- Menu bar ---- */
.menu-bar {
  display: flex;
  background: var(--menu-bg);
  border-bottom: 1px solid var(--menu-border);
  padding: 1px 0;
  position: relative;
}
.menu-item { position: relative; }
.menu-label {
  display: inline-block;
  padding: 3px 8px;
  color: var(--menu-text);
  cursor: default;
}
.menu-item.open .menu-label,
.menu-label:hover { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.menu-label u { text-decoration: underline; }

.menu-dropdown {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  min-width: 150px;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  box-shadow: 2px 2px 6px rgba(0,0,0,.35);
  padding: 2px;
  z-index: 50;
}
.menu-item.open .menu-dropdown { display: block; }
.menu-dropdown button {
  display: block; width: 100%;
  position: relative;
  text-align: left;
  background: transparent; border: 0;
  padding: 4px 22px;
  font: inherit; cursor: default;
  white-space: nowrap;
  color: var(--menu-text);
}
.menu-dropdown button:hover { background: var(--menu-hover-bg); color: var(--menu-hover-text); }
.menu-dropdown button.checked { position: relative; }
.menu-dropdown button.checked::before {
  content: "\25B8";
  position: absolute; left: 8px; color: #666;
}
.menu-dropdown button.checked:hover::before { color: var(--menu-hover-text); }
.menu-dropdown hr { border: 0; border-top: 1px solid var(--menu-border); margin: 2px 1px; }

/* ---- Game body ---- */
.game-body {
  background: var(--body-bg);
  padding: 6px;
}
.bevel {
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-light);
  padding: 6px;
  background: var(--panel-bg);
}

/* Top panel with LED displays + smiley */
.top-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-light);
  padding: 4px 5px;
  margin-bottom: 8px;
  background: var(--panel-bg);
}

.led-display {
  display: flex;
  gap: 1px;
  background: var(--led-bg);
  padding: 1px 2px;
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-light);
}
.led-digit {
  width: 15px; height: 26px;
  position: relative;
  background: var(--led-bg);
}
/* Seven segments, toggled visible via .on (added in JS) */
.led-digit .seg {
  position: absolute;
  background: var(--led-color-off);
  border-radius: 1px;
}
.led-digit .seg.on { background: var(--led-color); }
/* horizontal segments: a (top), g (mid), d (bottom) */
.led-digit .seg.a { left: 3px;  right: 3px; top: 2px;   height: 3px; }
.led-digit .seg.g { left: 3px;  right: 3px; top: 11.5px; height: 3px; }
.led-digit .seg.d { left: 3px;  right: 3px; bottom: 2px; height: 3px; }
/* vertical segments: f,b (upper), e,c (lower) */
.led-digit .seg.f { left: 2px;  top: 4px;    width: 3px; height: 8px; }
.led-digit .seg.b { right: 2px; top: 4px;    width: 3px; height: 8px; }
.led-digit .seg.e { left: 2px;  bottom: 4px; width: 3px; height: 8px; }
.led-digit .seg.c { right: 2px; bottom: 4px; width: 3px; height: 8px; }

.smiley {
  width: 32px; height: 32px;
  font-size: 20px; line-height: 1;
  background: var(--panel-bg);
  border-top: 2px solid var(--bevel-light);
  border-left: 2px solid var(--bevel-light);
  border-right: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-dark);
  padding: 2px;
  cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
}
.smiley:active,
.smiley.pressed {
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-light);
}
.smiley svg { display: block; width: 26px; height: 26px; }
/* Keep inline SVG faces aligned when reused in dialogs / overlay text */
.overlay-msg svg, .icon-row svg { vertical-align: middle; }

/* Mine field */
.field-bevel {
  position: relative;
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-light);
}
.field {
  display: grid;
  background: var(--field-bg);
  --cell: 20px;
}

.cell {
  width: var(--cell); height: var(--cell);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font);
  font-size: calc(var(--cell) * 0.62); font-weight: bold;
  line-height: 1;
  cursor: default;
  border-top: 2px solid var(--cell-border-light);
  border-left: 2px solid var(--cell-border-light);
  border-right: 2px solid var(--cell-border-dark);
  border-bottom: 2px solid var(--cell-border-dark);
  background: var(--cell-face);
}
.field.locked .cell { cursor: default; }

.cell.revealed {
  border: 1px solid var(--cell-revealed-border);
  background: var(--cell-face);
  cursor: default;
}
.cell.revealed.mine-hit { background: var(--mine-hit-bg); }
.cell.revealed { color: var(--mine-color); }
.cell .mine .hl { fill: var(--mine-hl); }
.cell.flag { color: #000; }

.cell svg { display: block; width: calc(var(--cell) * 0.8); height: calc(var(--cell) * 0.8); }

.cell.question { color: var(--question-color); }

.cell.wrong { position: relative; }
.cell.wrong::after {
  content: "";
  position: absolute; left: 10%; top: 46%;
  width: 80%; height: 2px; background: var(--wrong-color);
  transform: rotate(45deg);
  pointer-events: none;
}

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

/* Win border pulse */
.xp-window.win .bevel { animation: winBevel 700ms ease-in-out 2; }
@keyframes winBevel {
  50% { background: var(--win-glow); }
}

/* Overlay (exit) */
.overlay {
  touch-action: manipulation;
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 200;
}
.overlay[hidden] { display: none; }
.overlay-msg {
  touch-action: manipulation;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-radius: 6px;
  padding: 18px 26px;
  font-size: 12px;
  color: var(--dialog-text);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}

/* ---- Dialog / modal ---- */
.dialog-backdrop {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  overflow: auto;
  display: grid; place-content: center; place-content: safe center;
  z-index: 300;
}
.dialog {
  width: min(460px, calc(100vw - 24px));
  /* Keep the panel at least as tall as its content so an overflowing dialog
     grows and lets the backdrop scroll (overflow:hidden alone would let the
     grid row shrink and clip the OK button on very short viewports). */
  min-height: max-content;
  display: flex; flex-direction: column;
  background: var(--win-bg);
  border: 1px solid var(--win-border);
  border-radius: var(--win-radius);
  box-shadow: 0 8px 30px rgba(0,0,0,.5);
  overflow: hidden;
}
.dialog .title-bar { flex: 0 0 auto; }
.dialog-content { padding: 16px; color: var(--dialog-text); }
.dialog-content h2 { font-size: 14px; margin: 0 0 10px; }
.dialog-content p { margin: 0 0 8px; line-height: 1.5; }
.dialog-content ul { margin: 0 0 8px; padding-left: 18px; line-height: 1.6; }
.dialog-content table { border-collapse: collapse; width: 100%; }
.dialog-content td, .dialog-content th { border: 1px solid var(--dialog-border-cell); padding: 4px 8px; text-align: center; }
.dialog-content th { background: var(--panel-bg); }
.dialog-content .icon-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.dialog-buttons {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 16px 14px;
  flex: 0 0 auto;
}
.xp-btn {
  min-width: 75px;
  padding: 4px 12px;
  font: inherit;
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  color: var(--btn-text);
  cursor: default;
}
.xp-btn:hover { filter: brightness(1.05); }
.xp-btn:active { filter: brightness(.95); }

/* ---- Rollback button (God Mode, shown on loss) ---- */
.rollback-btn {
  position: absolute; right: 4px; bottom: 4px;
  z-index: 10;
  padding: 4px 10px;
  font: inherit; font-weight: bold;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: 3px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  animation: rollIn 180ms ease-out;
}
.rollback-btn svg { width: 14px; height: 14px; display: block; }
.rollback-btn:hover { filter: brightness(1.08); }
.rollback-btn[hidden] { display: none; }
@keyframes rollIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- Status bar ---- */
.status-bar {
  margin-top: 6px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--menu-text);
  background: var(--panel-bg);
  border-top: 1px solid var(--bevel-dark);
  border-left: 1px solid var(--bevel-dark);
  border-right: 1px solid var(--bevel-light);
  border-bottom: 1px solid var(--bevel-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Responsive chrome: shrink fixed UI on small screens ---- */
@media (max-width: 640px), (max-height: 640px) {
  .desktop { padding: 8px; }
  .game-body { padding: 4px; }
  .bevel { padding: 4px; }
  .top-panel { margin-bottom: 5px; padding: 3px 4px; }
}

/* Keep tap/click targets comfortable on touch devices */
@media (hover: none) and (pointer: coarse) {
  .menu-label { padding: 8px 12px; }
  /* Doubled class + attribute lifts this above the per-theme caption sizes, so
     touch targets survive the Vista/Classic width and height overrides. */
  :root[data-theme] .title-buttons .tb-btn.tb-btn { width: 30px; height: 30px; }
  :root[data-theme] .title-buttons .tb-btn.tb-btn svg { width: 13px; height: 13px; }
}

/* ============================================================
   THEMES — override tokens only. Add a new theme by copying a
   block and changing the values + selector.
   ============================================================ */

/* ---------- Vista / Aero glass ---------- */
:root[data-theme="vista"] {
  /* Vista "Bloom"-style wallpaper: broad soft aurora blooms over a deep blue base. */
  --desktop-bg: #0f3f6e;
  --desktop-bg2:
    radial-gradient(46% 42% at 50% -6%, rgba(210,245,255,.5) 0%, rgba(140,200,240,0) 70%),
    radial-gradient(34% 30% at 22% 8%, rgba(120,255,190,.5) 0%, rgba(60,180,130,0) 66%),
    radial-gradient(30% 28% at 74% 6%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 68%),
    radial-gradient(58% 52% at 16% 84%, rgba(120,225,140,.6) 0%, rgba(60,170,120,0) 62%),
    radial-gradient(52% 48% at 82% 78%, rgba(90,205,255,.55) 0%, rgba(40,140,200,0) 62%),
    radial-gradient(72% 58% at 50% 110%, rgba(185,255,205,.5) 0%, rgba(80,200,140,0) 66%),
    linear-gradient(160deg, #1b5f9e 0%, #0f3f6e 45%, #071f3c 100%);

  --font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  --win-border: rgba(180, 210, 240, .6);
  --win-radius: 8px 8px 5px 5px;
  --win-bg: rgba(255, 255, 255, .06);
  --win-shadow:
    inset 0 0 0 1px rgba(255,255,255,.28),
    0 0 0 1px rgba(40,80,130,.5),
    0 14px 48px rgba(8, 24, 48, .6);

  --tb-h: 34px;
  /* Neutral dark veil only — adds lightness contrast, no blue hue. Keeps the
     white caption legible without tinting the glass. */
  --tb-bg: rgba(12, 16, 22, .26);
  --tb-border: rgba(160,200,240,.7);
  --tb-text: #fff;
  --tb-text-shadow: 0 0 6px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6);
  /* No glossy highlight overlay — Vista is plain tinted glass, not shiny. */
  --tb-sheen: none;
  /* Aero caption buttons: glossy light-blue glass, red-orange close. */
  --tb-btn-normal: radial-gradient(120% 130% at 50% 0%, rgba(255,255,255,.95) 0%, rgba(214,235,250,.8) 45%, rgba(150,195,230,.85) 100%);
  --tb-btn-close: radial-gradient(120% 130% at 50% 0%, rgba(255,236,226,.95) 0%, rgba(247,168,136,.88) 45%, rgba(205,72,34,.92) 100%);
  --tb-btn-border: rgba(255,255,255,.85);
  --tb-btn-radius: 4px;

  --menu-bg: rgba(255, 255, 255, .12);
  --menu-border: rgba(150,180,210,.7);
  --menu-text: #0b2942;
  --menu-hover-bg: #cde3f7;
  --menu-hover-text: #06182e;
  --dropdown-bg: #f6f9fc;
  --dropdown-border: #7f9db9;

  --body-bg: transparent;
  --panel-bg: rgba(255, 255, 255, .16);
  --bevel-light: #ffffff;
  --bevel-dark: #97a9bd;
  --field-bg: #cfd8e4;

  --cell-face: #dfe7f0;
  --cell-border-light: #ffffff;
  --cell-border-dark: #93a6ba;
  --cell-revealed-border: #aebccb;
  --led-color: #26a6ff;
  --led-color-off: rgba(38,166,255,.15);
  --led-bg: #0b1622;

  --n1: #0a52d6; --n2: #168a16; --n3: #d41a1a; --n4: #3a1a9e;
  --n5: #8a3a12; --n6: #0f8f8f; --n7: #1a1a1a; --n8: #767676;

  --mine-hit-bg: #ff5a5a;
  --question-color: #b00;
  --wrong-color: #d00;
  --win-glow: rgba(180, 220, 255, 0.95);

  --overlay-bg: rgba(10, 25, 45, .35);
  --dialog-text: #10233a;
  --dialog-border-cell: #b0bfce;
  --btn-bg: linear-gradient(#f6fafd, #d7e3ef);
  --btn-border: #5b7f9f;
  --btn-text: #10233a;
}
/* Aero glass: real-time backdrop blur + light caption glyphs on glossy pills */
:root[data-theme="vista"] .xp-window,
:root[data-theme="vista"] .dialog {
  /* saturate kept near 1 so the glass does not amplify the wallpaper's blue. */
  backdrop-filter: blur(16px) saturate(1.1) brightness(1.04);
  -webkit-backdrop-filter: blur(16px) saturate(1.1) brightness(1.04);
}
:root[data-theme="vista"] .title-bar { border-radius: 7px 7px 0 0; }
/* Vista/7 Aero: wide, short rounded glass rects, thin dark glyphs with a white
   glow, and a wider red close — separated by real gaps, unlike XP's flush pair. */
:root[data-theme="vista"] .title-buttons { gap: 2px; padding-right: 4px; }
:root[data-theme="vista"] .tb-btn {
  width: 31px; height: 21px;
  color: #12324a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.45),
    0 1px 3px rgba(0,0,0,.5);
}
:root[data-theme="vista"] .tb-btn svg { filter: drop-shadow(0 0 1px rgba(255,255,255,.95)); }
:root[data-theme="vista"] .tb-btn.close { width: 37px; color: #40100a; }

/* Covered tiles: light blue with a white translucent glass triangle in the
   bottom-right corner. The triangle is a background layer (not a pseudo-element
   or clip-path), so it adds no extra boxes per cell. */
:root[data-theme="vista"] .cell:not(.revealed) {
  background:
    linear-gradient(315deg, rgba(255,255,255,.5), rgba(255,255,255,0) 65%) right bottom / 45% 45% no-repeat,
    linear-gradient(#a9d1f0, #528abe);
}
:root[data-theme="vista"] .cell:not(.revealed).flag { color: #000; }

/* ---------- Cyberpunk (neon) ---------- */
:root[data-theme="cyberpunk"] {
  --desktop-bg: #05010c;
  --desktop-bg2:
    radial-gradient(120% 90% at 80% -10%, rgba(255,45,249,.25), transparent 55%),
    radial-gradient(120% 100% at 10% 110%, rgba(0,229,255,.22), transparent 55%),
    linear-gradient(#0a0118, #05010c);

  --font: "Rajdhani", "Segoe UI", Tahoma, sans-serif;

  --win-border: #ff2bf9;
  --win-radius: 2px;
  --win-bg: #0c0a1a;
  --win-shadow: 0 0 0 1px rgba(0,229,255,.4), 0 0 30px rgba(255,45,249,.35), 0 0 60px rgba(0,229,255,.2);

  --tb-h: 30px;
  --tb-bg: linear-gradient(90deg, #1a0033, #2a0b4a 50%, #12002a);
  --tb-border: #ff2bf9;
  --tb-text: #00e5ff;
  --tb-text-shadow: 0 0 8px rgba(0,229,255,.9);
  --tb-sheen: linear-gradient(rgba(0,229,255,.22), rgba(0,229,255,0) 45%);
  --tb-btn-normal: linear-gradient(#123, #08202f);
  --tb-btn-close: linear-gradient(#ff2bf9, #7a0060);
  --tb-btn-border: rgba(0,229,255,.6);
  --tb-btn-radius: 2px;

  --menu-bg: #0c0a1a;
  --menu-border: #2a1b45;
  --menu-text: #d6f7ff;
  --menu-hover-bg: #ff2bf9;
  --menu-hover-text: #05010c;
  --dropdown-bg: #12082a;
  --dropdown-border: #ff2bf9;

  --body-bg: #0c0a1a;
  --panel-bg: #141026;
  --bevel-light: #2c2350;
  --bevel-dark: #05010c;
  --field-bg: #070512;

  --cell-face: #17112b;
  --cell-border-light: #3a2c63;
  --cell-border-dark: #05010c;
  --cell-revealed-border: #241a40;
  --led-color: #00ffd5;
  --led-color-off: rgba(0,255,213,.14);
  --led-bg: #04101a;

  --n1: #00e5ff; --n2: #39ff14; --n3: #ff2b6b; --n4: #b026ff;
  --n5: #ff9e00; --n6: #00fff0; --n7: #ff2bf9; --n8: #c8c8ff;
  --mine-color: #0affff;
  --mine-hl: #0affff;

  --mine-hit-bg: #4a0010;
  --question-color: #ff2bf9;
  --wrong-color: #ff2b6b;
  --win-glow: rgba(0, 255, 213, 0.5);

  --overlay-bg: rgba(0, 0, 0, .6);
  --dialog-text: #d6f7ff;
  --dialog-border-cell: #2a1b45;
  --btn-bg: linear-gradient(#1a1030, #0c0a1a);
  --btn-border: #ff2bf9;
  --btn-text: #00e5ff;
}
:root[data-theme="cyberpunk"] .title-text { text-transform: uppercase; letter-spacing: 2px; }
:root[data-theme="cyberpunk"] .led-digit .seg.on { box-shadow: 0 0 5px var(--led-color); }

/* Neon glow: numbers, flags, mines, and the smiley face */
:root[data-theme="cyberpunk"] .cell.revealed[data-n] {
  font-weight: 700;
  text-shadow: 0 0 4px currentColor, 0 0 9px currentColor;
}
:root[data-theme="cyberpunk"] .cell .flag { filter: drop-shadow(0 0 3px #0affff); }
:root[data-theme="cyberpunk"] .cell .mine { filter: drop-shadow(0 0 2px currentColor); }
:root[data-theme="cyberpunk"] .smiley svg { filter: drop-shadow(0 0 3px rgba(10, 255, 255, .9)); }
:root[data-theme="cyberpunk"] .xp-window,
:root[data-theme="cyberpunk"] .cell { position: relative; }
:root[data-theme="cyberpunk"] .xp-window::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- Classic (Windows 95/98 gray) ---------- */
:root[data-theme="classic"] {
  --desktop-bg: #008080;
  --desktop-bg2: #008080;

  --font: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif;

  --win-border: #dfdfdf;
  --win-radius: 0;
  --win-bg: #c0c0c0;
  --win-shadow: 2px 2px 8px rgba(0,0,0,.5);

  --tb-h: 22px;
  /* Win95 active caption: solid navy, no gradient. */
  --tb-bg: #000080;
  --tb-border: #dfdfdf;
  --tb-text: #fff;
  --tb-text-shadow: none;
  --tb-sheen: none;
  --tb-btn-normal: #c0c0c0;
  --tb-btn-close: #c0c0c0;
  --tb-btn-border: #dfdfdf;
  --tb-btn-radius: 0;

  --menu-bg: #c0c0c0;
  --menu-border: #808080;
  --menu-text: #000;
  --menu-hover-bg: #000080;
  --menu-hover-text: #fff;
  --dropdown-bg: #c0c0c0;
  --dropdown-border: #dfdfdf;

  --body-bg: #c0c0c0;
  --panel-bg: #c0c0c0;
  --bevel-light: #ffffff;
  --bevel-dark: #808080;
  --field-bg: #808080;

  --cell-face: #c0c0c0;
  --cell-border-light: #dfdfdf;
  --cell-border-dark: #808080;
  --cell-revealed-border: #808080;
  --led-color: #f00;
  --led-color-off: rgba(255, 0, 0, .12);
  --led-bg: #000;

  --n1: #0000ff; --n2: #008000; --n3: #ff0000; --n4: #000080;
  --n5: #800000; --n6: #008080; --n7: #000000; --n8: #808080;

  --mine-hit-bg: #f00;
  --question-color: #000;
  --wrong-color: #d00;
  --win-glow: rgba(255, 255, 0, 0.85);

  --overlay-bg: rgba(0,0,0,.25);
  --dialog-text: #000;
  --dialog-border-cell: #808080;
  --btn-bg: #c0c0c0;
  --btn-border: #dfdfdf;
  --btn-text: #000;
}
/* Win95 caption buttons: flat silver with a hard 2px 3D bevel that inverts when
   pressed. No gloss and no hover brightening — the bevel is the whole affordance. */
:root[data-theme="classic"] .title-buttons { gap: 2px; padding-right: 2px; }
:root[data-theme="classic"] .tb-btn {
  width: 18px; height: 16px;
  border: 1px solid;
  border-color: #dfdfdf #000 #000 #dfdfdf;
  border-radius: 0;
  background: #c0c0c0;
  color: #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
:root[data-theme="classic"] .tb-btn:hover,
:root[data-theme="classic"] .tb-btn:active { filter: none; }
:root[data-theme="classic"] .tb-btn:active {
  border-color: #000 #dfdfdf #dfdfdf #000;
  box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}
:root[data-theme="classic"] .tb-btn:active svg { transform: translate(1px, 1px); }
:root[data-theme="classic"] .tb-btn svg {
  width: 10px; height: 9px;
  shape-rendering: crispEdges;
  filter: none;
}
:root[data-theme="classic"] .menu-dropdown { box-shadow: 2px 2px 0 rgba(0,0,0,.4); }

/* ---------- Virus (toxic biohazard) ---------- */
:root[data-theme="virus"] {
  --desktop-bg: #031a06;
  --desktop-bg2:
    radial-gradient(120% 100% at 50% 0%, #0a3d12 0%, #04170a 55%, #010a03 100%);
  --font: "Share Tech Mono", Consolas, monospace;

  --win-border: #1f7a2e;
  --win-radius: 2px;
  --win-bg: #06180b;
  --win-shadow: 0 0 0 1px rgba(60,255,110,.25), 0 0 26px rgba(40,220,90,.35), 0 8px 30px rgba(0,0,0,.6);

  --tb-h: 28px;
  --tb-bg: linear-gradient(90deg, #052e0d, #0c5a1c 50%, #052e0d);
  --tb-border: #2fae45;
  --tb-text: #b6ffbf;
  --tb-text-shadow: 0 0 8px rgba(80,255,120,.9);
  --tb-sheen: linear-gradient(rgba(150,255,170,.18), rgba(150,255,170,0) 45%);
  --tb-btn-normal: linear-gradient(#0d5019, #062a0d);
  --tb-btn-close: linear-gradient(#7a1414, #3a0808);
  --tb-btn-border: rgba(120,255,150,.5);
  --tb-btn-radius: 2px;

  --menu-bg: #06180b;
  --menu-border: #1f7a2e;
  --menu-text: #a6f5b0;
  --menu-hover-bg: #1f9e3a;
  --menu-hover-text: #04170a;
  --dropdown-bg: #08210e;
  --dropdown-border: #2fae45;

  --body-bg: #06180b;
  --panel-bg: #0a2410;
  --bevel-light: #1f7a2e;
  --bevel-dark: #010a03;
  --field-bg: #04140a;

  --cell-face: #0c2c14;
  --cell-border-light: #1f6b2c;
  --cell-border-dark: #020c04;
  --cell-revealed-border: #14401d;
  --led-color: #4dff7c;
  --led-color-off: rgba(77,255,124,.14);
  --led-bg: #020a04;

  --n1: #38ff7e; --n2: #a6ff3d; --n3: #ffe14d; --n4: #4dffd2;
  --n5: #ff9e3d; --n6: #7cffb2; --n7: #d4ff4d; --n8: #6bffde;

  --mine-hit-bg: #3a0d0d;
  --mine-color: #79ff9a;
  --mine-hl: #0a2410;
  --question-color: #ffe14d;
  --wrong-color: #ff5a5a;
  --win-glow: rgba(90,255,140,.6);

  --overlay-bg: rgba(0,10,3,.7);
  --dialog-text: #c7ffcf;
  --dialog-border-cell: #1f7a2e;
  --btn-bg: linear-gradient(#0d3a17, #06180b);
  --btn-border: #2fae45;
  --btn-text: #b6ffbf;
}
:root[data-theme="virus"] .cell.revealed[data-n] {
  font-weight: 700;
  text-shadow: 0 0 4px currentColor, 0 0 9px currentColor;
}
:root[data-theme="virus"] .led-digit .seg.on { box-shadow: 0 0 5px var(--led-color); }
:root[data-theme="virus"] .title-text { text-transform: uppercase; letter-spacing: 1px; }
:root[data-theme="virus"] .cell .mine { filter: drop-shadow(0 0 2px currentColor); }
:root[data-theme="virus"] .cell.flag { color: var(--mine-color); }
:root[data-theme="virus"] .cell .flag { filter: drop-shadow(0 0 3px #4dff7c); }
:root[data-theme="virus"] .smiley svg { filter: drop-shadow(0 0 3px rgba(77,255,124,.9)); }

/* ---------- Ocean (aqua / seafoam) ---------- */
:root[data-theme="ocean"] {
  --desktop-bg: #0a3d62;
  --desktop-bg2:
    radial-gradient(130% 100% at 50% 0%, #2e7fb5 0%, #14568a 45%, #0a3d62 100%);
  --font: "Quicksand", "Segoe UI", Tahoma, sans-serif;

  --win-border: #0b6ea8;
  --win-radius: 10px 10px 0 0;
  --win-bg: #dff1f7;
  --win-shadow: 0 8px 28px rgba(4,30,50,.5);

  --tb-h: 30px;
  --tb-bg: linear-gradient(#3aa0d8 0%, #1f7fbf 45%, #166aa5 55%, #0f5c93 100%);
  --tb-border: #0b6ea8;
  --tb-text: #ffffff;
  --tb-text-shadow: 0 1px 2px rgba(0,40,70,.6);
  --tb-sheen: linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,0) 50%);
  --tb-btn-normal: linear-gradient(#7fd0f0, #2f8fc7);
  --tb-btn-close: linear-gradient(#ff9a7a, #e0552f);
  --tb-btn-border: #eaf7ff;
  --tb-btn-radius: 6px;

  --menu-bg: #eaf6fb;
  --menu-border: #b7dcea;
  --menu-text: #0a3d5c;
  --menu-hover-bg: #2f8fc7;
  --menu-hover-text: #ffffff;
  --dropdown-bg: #f2fbff;
  --dropdown-border: #9ccfe2;

  --body-bg: #eaf6fb;
  --panel-bg: #cfe9f2;
  --bevel-light: #ffffff;
  --bevel-dark: #8bb9cb;
  --field-bg: #a9d4e4;

  --cell-face: #bfe2ee;
  --cell-border-light: #ffffff;
  --cell-border-dark: #6fa6bd;
  --cell-revealed-border: #97c2d3;
  --led-color: #0e6b8f;
  --led-color-off: rgba(14,107,143,.14);
  --led-bg: #d7eef6;

  --n1: #0a5aa8; --n2: #0f8a5f; --n3: #d84315; --n4: #6a2ea8;
  --n5: #a8320f; --n6: #0f8a8a; --n7: #123a5c; --n8: #5a7a8a;

  --mine-hit-bg: #ff6a4d;
  --mine-color: #0a2a3c;
  --mine-hl: #ffffff;
  --question-color: #0a5aa8;
  --wrong-color: #c62828;
  --win-glow: rgba(180,240,255,.9);

  --overlay-bg: rgba(6,40,60,.35);
  --dialog-text: #0a3d5c;
  --dialog-border-cell: #9ccfe2;
  --btn-bg: linear-gradient(#f2fbff, #cfe9f2);
  --btn-border: #2f8fc7;
  --btn-text: #0a3d5c;
}
/* Ocean tiles are soap bubbles: round, translucent, bright rim + specular
   highlight. Only background gradients are used (no pseudo-elements/shadows),
   so it stays fast on large grids. */
:root[data-theme="ocean"] .field { background: linear-gradient(#6fb0d6, #3f88b5); }
:root[data-theme="ocean"] .cell {
  border: none;
  border-radius: 50%;
}
:root[data-theme="ocean"] .cell:not(.revealed) {
  background:
    radial-gradient(circle at 33% 28%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.3) 10%, rgba(255,255,255,0) 24%),
    radial-gradient(circle at 50% 50%, rgba(200,235,248,.35) 0%, rgba(120,180,215,.5) 55%, rgba(90,160,200,.8) 80%, rgba(235,250,255,.95) 93%, rgba(120,180,215,.5) 100%);
}
:root[data-theme="ocean"] .cell.revealed {
  background: radial-gradient(circle at 50% 42%, #eefaff 0%, #cfe9f2 72%, #a9d4e4 100%);
}
:root[data-theme="ocean"] .cell.revealed.mine-hit {
  background: radial-gradient(circle at 50% 42%, #ffe0d2 0%, #ff8a6a 60%, #ff6a4d 100%);
}

/* ---------- Crayon (hand-drawn paper) ---------- */
:root[data-theme="crayon"] {
  --desktop-bg: #f6ecd6;
  --desktop-bg2:
    radial-gradient(120% 100% at 50% 0%, #fff7e6 0%, #f2e4c6 60%, #e8d5ab 100%);
  --font: "Patrick Hand", "Comic Sans MS", "Segoe Print", cursive;

  --win-border: #e07a1f;
  --win-radius: 14px 14px 10px 10px;
  --win-bg: #fffaf0;
  --win-shadow: 4px 5px 0 rgba(0,0,0,.18);

  --tb-h: 34px;
  --tb-bg: linear-gradient(90deg, #ff6b6b, #ffa94d 25%, #ffe066 50%, #6bcb77 72%, #4dabf7 100%);
  --tb-border: #e07a1f;
  --tb-text: #4a2c00;
  --tb-text-shadow: 1px 1px 0 rgba(255,255,255,.6);
  --tb-sheen: none;
  --tb-btn-normal: #fffaf0;
  --tb-btn-close: #ff8787;
  --tb-btn-border: #4a2c00;
  --tb-btn-radius: 8px;

  --menu-bg: #fffaf0;
  --menu-border: #d9b38c;
  --menu-text: #4a2c00;
  --menu-hover-bg: #ffd43b;
  --menu-hover-text: #4a2c00;
  --dropdown-bg: #fffdf7;
  --dropdown-border: #d98b3f;

  --body-bg: #fffaf0;
  --panel-bg: #ffedcf;
  --bevel-light: #ffffff;
  --bevel-dark: #d9a86c;
  --field-bg: #f3d9a8;

  --cell-face: #ffe9c2;
  --cell-border-light: #fff6e6;
  --cell-border-dark: #cf9b52;
  --cell-revealed-border: #d9b38c;
  --led-color: #e8590c;
  --led-color-off: rgba(232,89,12,.12);
  --led-bg: #fff3dd;

  --n1: #1971c2; --n2: #2f9e44; --n3: #e03131; --n4: #6741d9;
  --n5: #e8590c; --n6: #0c8599; --n7: #862e9c; --n8: #5c3b17;

  --mine-hit-bg: #ffc9c9;
  --mine-color: #343a40;
  --mine-hl: #ffffff;
  --question-color: #e8590c;
  --wrong-color: #e03131;
  --win-glow: rgba(255,224,102,.9);

  --overlay-bg: rgba(120,80,20,.2);
  --dialog-text: #4a2c00;
  --dialog-border-cell: #d9b38c;
  --btn-bg: #fff3dd;
  --btn-border: #d98b3f;
  --btn-text: #4a2c00;
}
:root[data-theme="crayon"] .cell { border-radius: 6px; }
:root[data-theme="crayon"] .cell:not(.revealed) {
  border: 2px solid #b06a1f;
  background: #ffcf85;
}
:root[data-theme="crayon"] .cell.revealed {
  border: 1px solid #d9b38c;
  background: #fffdf5;
}
:root[data-theme="crayon"] .title-text { letter-spacing: .5px; }