:root {
  color-scheme: light;
  --page-bg: #0f766e;
  --panel-bg: #c0c0c0;
  --panel-border-light: #ffffff;
  --panel-border-dark: #7b7b7b;
  --text: #111111;
  --muted: #2f3a3a;
  --control-bg: #d8d8d8;
  --control-border: #6f6f6f;
  --counter-bg: #111111;
  --counter-text: #ff2b2b;
  --cell-size: 32px;
  --bevel-size: 2px;
  --cell-hidden: #c0c0c0;
  --cell-revealed: #d7d7d7;
  --cell-border-light: #ffffff;
  --cell-border-dark: #808080;
  --mine-bg: #d7d7d7;
  --triggered-bg: #f04444;
  --flag-color: #d00000;
  --number-1: #0000ff;
  --number-2: #007a00;
  --number-3: #ff0000;
  --number-4: #00007a;
  --number-5: #7a0000;
  --number-6: #007a7a;
  --number-7: #000000;
  --number-8: #777777;
  --panel-radius: 0;
  --control-radius: 4px;
  --counter-radius: 0;
  --cell-radius: 0;
  --panel-shadow: none;
  --counter-shadow: none;
  --cell-shadow: none;
  --counter-font: "Courier New", Courier, monospace;
  --counter-text-shadow: none;
  --cell-font: Arial, Helvetica, sans-serif;
  --select-arrow: #111111;
  font-family: Arial, Helvetica, sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #18181b;
  --panel-bg: #27272a;
  --panel-border-light: #52525b;
  --panel-border-dark: #09090b;
  --text: #f4f4f5;
  --muted: #cbd5e1;
  --control-bg: #3f3f46;
  --control-border: #71717a;
  --counter-bg: #09090b;
  --counter-text: #f87171;
  --cell-hidden: #3f3f46;
  --cell-revealed: #27272a;
  --cell-border-light: #71717a;
  --cell-border-dark: #18181b;
  --mine-bg: #27272a;
  --triggered-bg: #be123c;
  --flag-color: #fb7185;
  --number-1: #60a5fa;
  --number-2: #4ade80;
  --number-3: #fb7185;
  --number-4: #a78bfa;
  --number-5: #f97316;
  --number-6: #22d3ee;
  --number-7: #f9fafb;
  --number-8: #a1a1aa;
  --select-arrow: #f4f4f5;
}

[data-theme="signal-station"] {
  color-scheme: dark;
  --page-bg:
    repeating-linear-gradient(0deg, rgba(255, 202, 40, 0.07) 0 2px, transparent 2px 8px),
    #171511;
  --panel-bg: #29261e;
  --panel-border-light: #f7c948;
  --panel-border-dark: #050505;
  --text: #ffdf6b;
  --muted: #d5b44f;
  --control-bg: #0b0b09;
  --control-border: #f7c948;
  --counter-bg: #050505;
  --counter-text: #ffdf6b;
  --cell-hidden: #0a0a08;
  --cell-revealed: #2d2a24;
  --cell-border-light: #3f392c;
  --cell-border-dark: #050505;
  --mine-bg: #1a120a;
  --triggered-bg: #e03131;
  --flag-color: #ff5c00;
  --number-1: #ffdf6b;
  --number-2: #80ff72;
  --number-3: #ff8f5f;
  --number-4: #9ed8ff;
  --number-5: #ffb24a;
  --number-6: #6ef7d8;
  --number-7: #ffffff;
  --number-8: #a8a29e;
  --panel-radius: 3px;
  --control-radius: 2px;
  --counter-radius: 2px;
  --cell-radius: 2px;
  --panel-shadow: 0 18px 0 rgba(0, 0, 0, 0.24);
  --counter-shadow: inset 0 -15px 0 rgba(255, 255, 255, 0.06);
  --cell-shadow: inset 0 -14px 0 rgba(255, 255, 255, 0.035);
  --counter-font: "Courier New", Courier, monospace;
  --counter-text-shadow: 0 0 5px rgba(255, 223, 107, 0.74);
  --cell-font: "Courier New", Courier, monospace;
  font-family: "Arial Narrow", "Trebuchet MS", Arial, sans-serif;
}

[data-theme="amber-glow"] {
  color-scheme: dark;
  --page-bg:
    repeating-linear-gradient(90deg, rgba(255, 129, 28, 0.04) 0 1px, transparent 1px 18px),
    linear-gradient(160deg, #130706 0%, #2a0e16 48%, #090504 100%);
  --panel-bg: #26100d;
  --panel-border-light: #ffb15f;
  --panel-border-dark: #501d10;
  --text: #ffe6c2;
  --muted: #f1a35b;
  --control-bg: #35140f;
  --control-border: #ff8c1a;
  --counter-bg: #080302;
  --counter-text: #ff8c1a;
  --cell-hidden: #3a1710;
  --cell-revealed: #190908;
  --cell-border-light: #ffb15f;
  --cell-border-dark: #682412;
  --mine-bg: #210b0a;
  --triggered-bg: #ff3b1f;
  --flag-color: #65ffd4;
  --number-1: #ffb15f;
  --number-2: #65ffd4;
  --number-3: #ff604a;
  --number-4: #bca7ff;
  --number-5: #ffd166;
  --number-6: #53d8fb;
  --number-7: #fff3d8;
  --number-8: #b79273;
  --panel-radius: 16px;
  --control-radius: 12px;
  --counter-radius: 14px;
  --cell-radius: 10px;
  --panel-shadow: inset 0 0 28px rgba(255, 140, 26, 0.18), 0 18px 35px rgba(0, 0, 0, 0.45);
  --counter-shadow: 0 0 20px rgba(255, 140, 26, 0.62), inset 0 0 18px rgba(255, 140, 26, 0.16);
  --cell-shadow: inset 0 0 12px rgba(255, 177, 95, 0.16);
  --counter-font: Georgia, "Times New Roman", serif;
  --counter-text-shadow: 0 0 8px #ff8c1a, 0 0 18px rgba(255, 140, 26, 0.8);
  --cell-font: Georgia, "Times New Roman", serif;
  font-family: Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--page-bg);
  background-size: 32px 32px, 100% 100%;
}

button,
select {
  font: inherit;
}

.app-shell {
  width: max-content;
  min-width: 100%;
  min-height: 100vh;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.game-panel {
  --board-width: calc(var(--columns) * var(--cell-size));
  --chrome-width: 288px;
  --surface-width: max(var(--board-width), var(--chrome-width));
  --surface-outer-width: calc(var(--surface-width) + var(--bevel-size) + var(--bevel-size));
  width: min-content;
  max-width: none;
  padding: 14px;
  background: var(--panel-bg);
  border-top: var(--bevel-size) solid var(--panel-border-light);
  border-left: var(--bevel-size) solid var(--panel-border-light);
  border-right: var(--bevel-size) solid var(--panel-border-dark);
  border-bottom: var(--bevel-size) solid var(--panel-border-dark);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}

.top-bar {
  width: var(--surface-outer-width);
  display: grid;
  grid-template-columns: var(--surface-outer-width);
  gap: 8px;
  align-items: flex-start;
  justify-items: center;
  margin-bottom: 12px;
}

.title-row {
  width: var(--surface-outer-width);
  display: grid;
  place-items: center;
  text-align: center;
}

h1 {
  width: 100%;
  margin: 0;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0;
  text-align: center;
}

.selectors {
  width: 288px;
  display: grid;
  grid-template-columns: 124px 156px;
  gap: 8px;
  align-items: end;
  justify-content: flex-start;
}

label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  min-width: 0;
}

select {
  width: 100%;
  height: 34px;
  appearance: none;
  color: var(--text);
  background-color: var(--control-bg);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--select-arrow) 50%),
    linear-gradient(135deg, var(--select-arrow) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-repeat: no-repeat;
  background-size: 6px 6px, 6px 6px;
  border: 1px solid var(--control-border);
  border-radius: var(--control-radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 2px 0 rgba(0, 0, 0, 0.12);
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1;
  padding: 5px 28px 5px 10px;
}

.scoreboard {
  width: var(--surface-outer-width);
  display: grid;
  grid-template-columns: 82px minmax(48px, 1fr) 82px;
  gap: 8px;
  align-items: center;
  justify-content: stretch;
  padding: 8px;
  margin-bottom: 12px;
  border-top: var(--bevel-size) solid var(--panel-border-dark);
  border-left: var(--bevel-size) solid var(--panel-border-dark);
  border-right: var(--bevel-size) solid var(--panel-border-light);
  border-bottom: var(--bevel-size) solid var(--panel-border-light);
}

.counter {
  display: block;
  min-width: 82px;
  height: 38px;
  padding: 3px 6px;
  color: var(--counter-text);
  background: var(--counter-bg);
  border: 1px solid #000000;
  border-radius: var(--counter-radius);
  box-shadow: var(--counter-shadow);
  font-family: var(--counter-font);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.05;
  text-align: right;
  text-shadow: var(--counter-text-shadow);
}

.reset-button {
  position: relative;
  justify-self: center;
  width: 48px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--control-bg);
  border-top: var(--bevel-size) solid var(--cell-border-light);
  border-left: var(--bevel-size) solid var(--cell-border-light);
  border-right: var(--bevel-size) solid var(--cell-border-dark);
  border-bottom: var(--bevel-size) solid var(--cell-border-dark);
  border-radius: var(--control-radius);
  cursor: pointer;
  font-size: 1.45rem;
  line-height: 1;
}

.reset-button:active {
  border-top-color: var(--cell-border-dark);
  border-left-color: var(--cell-border-dark);
  border-right-color: var(--cell-border-light);
  border-bottom-color: var(--cell-border-light);
}

.board-frame {
  box-sizing: content-box;
  width: var(--board-width);
  margin: 0 auto;
  overflow: visible;
  border-top: var(--bevel-size) solid var(--panel-border-dark);
  border-left: var(--bevel-size) solid var(--panel-border-dark);
  border-right: var(--bevel-size) solid var(--panel-border-light);
  border-bottom: var(--bevel-size) solid var(--panel-border-light);
}

.board {
  display: grid;
  grid-template-columns: repeat(var(--columns), var(--cell-size));
  grid-template-rows: repeat(var(--rows), var(--cell-size));
  width: calc(var(--columns) * var(--cell-size));
  background: var(--cell-border-dark);
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  background: var(--cell-hidden);
  border-radius: var(--cell-radius);
  box-shadow: var(--cell-shadow);
  cursor: pointer;
  font-family: var(--cell-font);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  user-select: none;
}

.cell-hidden,
.cell-flagged {
  border-top: var(--bevel-size) solid var(--cell-border-light);
  border-left: var(--bevel-size) solid var(--cell-border-light);
  border-right: var(--bevel-size) solid var(--cell-border-dark);
  border-bottom: var(--bevel-size) solid var(--cell-border-dark);
}

.cell-hidden.cell-pressed,
.cell-flagged.cell-pressed {
  border: 1px solid var(--cell-border-dark);
}

.cell-revealed,
.cell-mine {
  background: var(--cell-revealed);
  border: 1px solid var(--cell-border-dark);
  cursor: default;
}

.cell-mine {
  background: var(--mine-bg);
  color: var(--text);
}

.cell-triggered {
  background: var(--triggered-bg);
}

.cell-flagged {
  color: var(--flag-color);
}

.cell-number-1 { color: var(--number-1); }
.cell-number-2 { color: var(--number-2); }
.cell-number-3 { color: var(--number-3); }
.cell-number-4 { color: var(--number-4); }
.cell-number-5 { color: var(--number-5); }
.cell-number-6 { color: var(--number-6); }
.cell-number-7 { color: var(--number-7); }
.cell-number-8 { color: var(--number-8); }

[data-theme="signal-station"] .cell-hidden,
[data-theme="signal-station"] .cell-flagged,
[data-theme="signal-station"] .counter {
  background:
    linear-gradient(transparent 0 45%, rgba(255, 223, 107, 0.12) 45% 50%, transparent 50%),
    var(--counter-bg);
}

[data-theme="signal-station"] .cell-hidden,
[data-theme="signal-station"] .cell-flagged {
  background:
    linear-gradient(transparent 0 45%, rgba(255, 223, 107, 0.14) 45% 50%, transparent 50%),
    var(--cell-hidden);
}

[data-theme="signal-station"] .reset-button {
  color: var(--counter-text);
  background: var(--counter-bg);
  font-family: var(--counter-font);
  font-size: 1.65rem;
  text-shadow: var(--counter-text-shadow);
}

[data-theme="amber-glow"] .counter {
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255, 140, 26, 0.18) 18% 20%, transparent 20%),
    var(--counter-bg);
}

[data-theme="amber-glow"] .cell-hidden,
[data-theme="amber-glow"] .cell-flagged {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 224, 180, 0.18), transparent 45%),
    var(--cell-hidden);
}

[data-theme="amber-glow"] .reset-button {
  color: var(--counter-text);
  background: var(--counter-bg);
  font-family: var(--counter-font);
  font-size: 1.6rem;
  text-shadow: var(--counter-text-shadow);
}

.cell:focus-visible,
.reset-button:focus-visible,
select:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
  }

  .game-panel {
    padding: 10px;
  }

  .top-bar {
    gap: 10px;
  }

  .selectors {
    justify-content: flex-start;
  }

}

.sr-only {
  display: none;
}