/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
  --bg:       #0f1117;
  --surface:  #1a1d2e;
  --surface2: #232640;
  --border:   #2e3255;
  --text:     #e8eaf6;
  --muted:    #7b80a8;
  --accent:   #8b5cf6;
  --accent2:  #a78bfa;
  --red:      #cc2222;
  --green:    #3dc87a;

  --cs: 30px; /* cell size */

  /* 3-D raise effect for cells */
  --raise-hi:  rgba(255,255,255,0.18);
  --raise-lo:  rgba(0,0,0,0.45);
  --cell-bg:   #232640;
  --cell-flat: #181b2c;

  /* Number colours (dark mode) */
  --n1: #6699ff; --n2: #55cc66; --n3: #ff6655;
  --n4: #aa88ff; --n5: #ff9977; --n6: #55cccc;
  --n7: #dddddd; --n8: #888888;
}

body.light {
  --bg:       #b0b8c8;
  --surface:  #c0c0c0;
  --surface2: #d4d0c8;
  --border:   #808080;
  --text:     #000000;
  --muted:    #444444;
  --accent:   #000080;

  --raise-hi:  #ffffff;
  --raise-lo:  #808080;
  --cell-bg:   #c0c0c0;
  --cell-flat: #b0b0b0;

  /* Classic Windows number colours */
  --n1: #0000ff; --n2: #008000; --n3: #ff0000;
  --n4: #000080; --n5: #800000; --n6: #008080;
  --n7: #000000; --n8: #808080;
}

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

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background .3s, color .3s;
  overflow-x: auto;
}

/* ── Top bar ────────────────────────────────────────────────────────────────── */
#top-bar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(15,17,23,0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 200;
}
body.light #top-bar { background: rgba(176,184,200,0.95); }

#back-link {
  color: var(--muted); text-decoration: none;
  font-size: 13px; padding: 4px 8px; border-radius: 6px;
  transition: color .15s, background .15s;
}
#back-link:hover { color: var(--text); background: var(--surface2); }

.top-spacer { flex: 1; }

.diff-btn {
  font-family: inherit; font-size: 12px; font-weight: 600;
  background: var(--surface2); border: 1px solid var(--border);
  color: var(--muted); border-radius: 6px;
  padding: 4px 10px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.diff-btn.active, .diff-btn:hover { color: var(--text); border-color: var(--accent); }
.diff-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

#theme-toggle {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; font-size: 15px;
  cursor: pointer;
}

/* ── Game area wrapper ──────────────────────────────────────────────────────── */
#game-wrap {
  display: flex; justify-content: center;
  padding: 68px 16px 40px;
  min-height: 100vh;
}

/* ── Classic raised panel ───────────────────────────────────────────────────── */
.ms-raised {
  border: 3px solid;
  border-color: var(--raise-hi) var(--raise-lo) var(--raise-lo) var(--raise-hi);
  background: var(--cell-bg);
  padding: 8px;
  display: inline-flex; flex-direction: column; gap: 8px;
}

.ms-inset {
  border: 2px solid;
  border-color: var(--raise-lo) var(--raise-hi) var(--raise-hi) var(--raise-lo);
  padding: 4px 6px;
}

/* ── Header strip ────────────────────────────────────────────────────────────── */
#ms-header {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
}

/* 7-segment-style display */
.ms-display {
  background: #000;
  color: #ff1111;
  font-family: 'Courier New', monospace;
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 2px 6px 0;
  min-width: 52px;
  text-align: center;
  line-height: 1.1;
  border: 2px inset var(--raise-lo);
  user-select: none;
}
body.light .ms-display { border-color: var(--raise-lo); }

/* Smiley face button */
#ms-face {
  font-size: 22px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  background: var(--cell-bg);
  border: 3px solid;
  border-color: var(--raise-hi) var(--raise-lo) var(--raise-lo) var(--raise-hi);
  border-radius: 2px;
  transition: border-color .05s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#ms-face:active {
  border-color: var(--raise-lo) var(--raise-hi) var(--raise-hi) var(--raise-lo);
}

/* ── Board grid ──────────────────────────────────────────────────────────────── */
#ms-board {
  display: grid;
  gap: 0;
  line-height: 1;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── Cell ────────────────────────────────────────────────────────────────────── */
.ms-cell {
  width: var(--cs);
  height: var(--cs);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cs) * 0.52);
  font-weight: 900;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/* Hidden / unrevealed cell — raised 3-D effect */
.ms-cell.hidden {
  background: var(--cell-bg);
  border: calc(var(--cs) * 0.083) solid;
  border-color: var(--raise-hi) var(--raise-lo) var(--raise-lo) var(--raise-hi);
}

/* Revealed cell — flat, slightly different shade */
.ms-cell.revealed {
  background: var(--cell-flat);
  border: 1px solid var(--border);
  cursor: default;
}

/* Flagged inherits hidden styling */
.ms-cell.flagged { cursor: default; }
.ms-cell.flagged::after { content: '🚩'; font-size: calc(var(--cs) * 0.48); }

/* Hit mine — red background */
.ms-cell.mine-hit {
  background: var(--red) !important;
  border-color: var(--red) !important;
}

/* Wrong flag (mine wasn't there) */
.ms-cell.wrong-flag {
  cursor: default;
}
.ms-cell.wrong-flag::after { content: '❌'; font-size: calc(var(--cs) * 0.48); }

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

/* ── Modal overlay ──────────────────────────────────────────────────────────── */
#ms-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  align-items: center; justify-content: center;
  z-index: 500;
}

.ms-modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px;
  min-width: 280px; max-width: 380px;
  display: flex; flex-direction: column; gap: 14px;
  text-align: center;
}
.ms-modal h2 { font-size: 1.7rem; font-weight: 800; }

.ms-result-time {
  font-size: 2.4rem; font-weight: 900;
  color: var(--accent2); letter-spacing: -1px;
}
.ms-result-diff { color: var(--muted); font-size: 13px; }

/* Leaderboard table */
.ms-lb { text-align: left; }
.ms-lb-title {
  font-size: 12px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 8px;
}
.ms-lb table { width: 100%; border-collapse: collapse; font-size: 13px; }
.ms-lb td { padding: 4px 6px; }
.lb-rank { color: var(--muted); width: 28px; }
.lb-name { flex: 1; }
.lb-time { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent2); }
.ms-lb tr.me { background: rgba(139,92,246,0.15); border-radius: 6px; }
.ms-lb tr.me td { color: var(--accent2); }
.ms-lb tr.me .lb-rank { color: var(--accent); }

.ms-login-hint { font-size: 12px; color: var(--muted); }

.ms-btn {
  font-family: inherit; font-weight: 700; font-size: 14px;
  border: none; border-radius: 8px; padding: 9px 24px;
  cursor: pointer; transition: opacity .15s;
  background: var(--accent); color: #fff;
}
.ms-btn:hover { opacity: .85; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 500px) {
  :root { --cs: 24px; }
  .ms-display { font-size: 18px; min-width: 44px; }
  #ms-face { font-size: 18px; width: 32px; height: 32px; }
}