:root{
  --bg:#0f1115;
  --panel:#131722;
  --muted:#1a2030;
  --text:#e6ecff;
  --text-dim:#9bb0d3;
  --accent:#6ea8fe;
  --good:#3cdc82;
  --bad:#ff6b6b;
  --warn:#ffd166;
  --purple:#8a5cff;
  --cell:#151a26;
  --cell-lit:#1b2231;
  --grid:#0b0e14;
  --line:#21293a;
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,Segoe UI,Roboto,Arial,sans-serif}

.topbar{
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5
}
.brand{font-weight:700;letter-spacing:.5px}
.tabs{display:flex;gap:6px}
.tab{
  background:var(--muted);color:var(--text);border:1px solid var(--line);
  padding:6px 10px;border-radius:8px;cursor:pointer
}
.tab.active{background:var(--accent);color:#031633;border-color:transparent}

.auth{display:flex;gap:6px;align-items:center}
.auth input{
  background:#0d111a;border:1px solid var(--line);color:var(--text);
  padding:6px 8px;border-radius:8px;min-width:130px
}
.auth button{
  background:var(--muted);color:var(--text);
  border:1px solid var(--line);padding:6px 10px;border-radius:8px;cursor:pointer
}

.wrap{display:grid;grid-template-columns:320px 1fr;gap:14px;max-width:1200px;margin:14px auto;padding:0 14px}
.panel.left{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}

.segwrap{margin-bottom:10px}
.segmented{display:flex;gap:6px;flex-wrap:wrap}
.seg{
  background:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;cursor:pointer;color:var(--text-dim)
}
.seg.active{background:var(--accent);color:#031633;border-color:transparent}

.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center}
.counter{
  background:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font-weight:700;letter-spacing:1px
}
.reset{
  grid-column:1 / span 2;background:var(--accent);border:0;color:#031633;
  padding:8px;border-radius:8px;cursor:pointer;font-weight:700
}

.timedbar{grid-column:1 / span 2;background:#0d111a;border:1px solid var(--line);border-radius:6px;height:10px;overflow:hidden}
.timedbar .fill{height:100%;width:0%;background:var(--warn);transition:width .2s ease}

.leaderbox{margin-top:10px}
.leaderhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:var(--text-dim)}
.leaderwrap{
  max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:8px;background:var(--muted)
}
#leader{width:100%;border-collapse:collapse}
#leader th,#leader td{padding:8px;border-bottom:1px solid var(--line)}
#leader th{position:sticky;top:0;background:var(--panel)}
.right{text-align:right}
.mybest{margin-top:8px;color:var(--text-dim)}

.boardwrap{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.board{display:grid;gap:2px;background:var(--grid);padding:8px;border-radius:8px}
.cell{
  width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  background:var(--cell);border:1px solid var(--line);border-radius:4px;color:#b8c6e8;
  user-select:none
}
.cell.revealed{background:var(--cell-lit)}
.cell.mine{background:var(--bad);color:#fff}
.cell.flag::after{content:"🚩"}
.cell.snake-open{background:var(--purple);color:#fff}

.n1{color:#3da5ff}.n2{color:#45d07d}.n3{color:#ffb454}.n4{color:#d06bff}
.n5{color:#ff6b6b}.n6{color:#6be0ff}.n7{color:#e2e8f0}.n8{color:#94a3b8}

.hint{color:var(--text-dim);margin:8px 0 0}