:root {
  --xp-luna-bg: #ECE9D8;
  --xp-luna-edge: #ACA899;
  --xp-gray: #BDBDBD;
  --xp-gray-light: #D4D0C8;
  --xp-shadow: #808080;
  --xp-shadow-deep: #5A5A5A;
  --xp-highlight: #FFFFFF;
  --led-on: #FF1717;
  --led-off: #3A0000;
  --led-bg: #000000;
  --cell-size: 24px;
}

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

html, body {
  height: 100%;
  font-family: "Tahoma", "Geneva", "Lucida Grande", sans-serif;
  font-size: 11px;
  color: #000;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(255,255,255,0.55), transparent 70%),
    linear-gradient(180deg, #DAE1EB 0%, #B9C3D0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}

/* === XP Window === */
.xp-window {
  border: 1px solid #003BBE;
  border-radius: 8px 8px 0 0;
  background: var(--xp-luna-bg);
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.25);
  overflow: hidden;
}

/* === Title Bar === */
.title-bar {
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3px 0 4px;
  background:
    linear-gradient(180deg,
      #0058E6 0%,
      #1872E5 4%,
      #2D8AF5 9%,
      #2787F5 18%,
      #2382F5 35%,
      #1873E5 55%,
      #0F60D8 80%,
      #0954D5 92%,
      #0048C8 100%);
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.45);
  border-top: 1px solid #4A9FF8;
  cursor: default;
}
.title-left { display: flex; align-items: center; gap: 5px; padding-left: 2px; }
.title-icon { display: inline-flex; align-items: center; padding-top: 1px; }
.title-text { font-size: 12px; letter-spacing: 0.2px; }

.title-buttons { display: flex; gap: 1px; padding: 0 1px; }
.tb-btn {
  width: 22px; height: 22px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 3px;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: bold;
  position: relative;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.2);
}
.tb-min, .tb-max {
  background:
    linear-gradient(180deg,
      #4A9FF8 0%,
      #2787F5 35%,
      #176FE8 55%,
      #0E5DD3 85%,
      #0B53C3 100%);
}
.tb-close {
  background:
    linear-gradient(180deg,
      #F08D8D 0%,
      #DC4C4C 30%,
      #C82B2B 55%,
      #A11616 85%,
      #8C0E0E 100%);
}
.tb-btn:hover { filter: brightness(1.08); }
.tb-btn:active { filter: brightness(0.85); }

.tb-glyph-min { display: block; width: 7px; height: 2px; background: #fff; margin-top: 9px; }
.tb-glyph-max { display: block; width: 9px; height: 8px; border: 1.5px solid #fff; border-top-width: 2.5px; }
.tb-glyph-close { font-size: 14px; line-height: 1; margin-top: -2px; font-family: "Arial", sans-serif; }

/* === Menu Bar === */
.menu-bar {
  display: flex;
  gap: 2px;
  padding: 2px 4px 3px 4px;
  background: var(--xp-luna-bg);
  font-size: 11px;
  border-bottom: 1px solid var(--xp-luna-edge);
}
.menu-item { padding: 2px 7px; cursor: default; border-radius: 2px; }
.menu-item:hover { background: #316AC5; color: #fff; }
.menu-item u { text-decoration: underline; }

/* === Game frame & panel === */
.game-frame {
  background: var(--xp-luna-bg);
  padding: 9px;
}
.game-panel {
  background: var(--xp-gray);
  padding: 9px;
  box-shadow:
    inset 3px 3px 0 var(--xp-highlight),
    inset -3px -3px 0 var(--xp-shadow);
}

/* === Game header === */
.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  margin-bottom: 8px;
  background: var(--xp-gray);
  box-shadow:
    inset 2px 2px 0 var(--xp-shadow),
    inset -2px -2px 0 var(--xp-highlight);
}

/* === LED counter === */
.led-counter {
  background: var(--led-bg);
  padding: 2px 1px;
  display: inline-flex;
  gap: 0;
  box-shadow:
    inset 1px 1px 0 var(--xp-shadow),
    inset -1px -1px 0 var(--xp-highlight);
}
.led-digit { display: block; width: 16px; height: 28px; }
.led-digit .seg.on { fill: var(--led-on); }
.led-digit .seg.off { fill: var(--led-off); }

/* === Smiley === */
.smiley {
  width: 32px; height: 32px;
  background: var(--xp-gray);
  padding: 0;
  cursor: default;
  display: flex; align-items: center; justify-content: center;
  border: none;
  box-shadow:
    inset 2px 2px 0 var(--xp-highlight),
    inset -2px -2px 0 var(--xp-shadow);
}
.smiley:active, .smiley.pressed {
  box-shadow: inset 1px 1px 0 var(--xp-shadow);
}
.smiley svg { width: 26px; height: 26px; pointer-events: none; display: block; }

/* === Grid === */
.grid {
  display: grid;
  grid-template-columns: repeat(30, var(--cell-size));
  grid-template-rows: repeat(16, var(--cell-size));
  background: var(--xp-gray);
  box-shadow:
    inset 3px 3px 0 var(--xp-shadow),
    inset -3px -3px 0 var(--xp-highlight);
  padding: 3px;
  width: max-content;
}

.cell {
  width: var(--cell-size);
  height: var(--cell-size);
  background: var(--xp-gray);
  display: flex; align-items: center; justify-content: center;
  font-family: "Tahoma", "Helvetica Neue", sans-serif;
  font-weight: bold;
  font-size: 15px;
  line-height: 1;
  cursor: default;
  box-shadow:
    inset 2px 2px 0 var(--xp-highlight),
    inset -2px -2px 0 var(--xp-shadow);
  position: relative;
}
.cell.pressed,
.cell.revealed {
  box-shadow: inset 1px 1px 0 var(--xp-shadow);
}
.cell svg { width: 18px; height: 18px; display: block; pointer-events: none; }

/* Number colors */
.cell.n1 { color: #0000FF; }
.cell.n2 { color: #007B00; }
.cell.n3 { color: #FF0000; }
.cell.n4 { color: #00007B; }
.cell.n5 { color: #7B0000; }
.cell.n6 { color: #007B7B; }
.cell.n7 { color: #000000; }
.cell.n8 { color: #7B7B7B; }

.cell.mine-hit { background: #FF0000; }

.disclaimer {
  position: fixed;
  left: 0; right: 0;
  bottom: 10px;
  text-align: center;
  font-size: 11px;
  color: rgba(30, 40, 55, 0.55);
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.6);
  pointer-events: none;
  font-family: "Tahoma", "Segoe UI", sans-serif;
}

@media (max-width: 800px) {
  :root { --cell-size: 20px; }
  .cell { font-size: 13px; }
}