:root{
    --bg:#0e1117;
    --panel:#161b22;
    --accent:#22c55e;
    --accent2:#4ade80;
    --text:#e6edf3;
    --muted:#9aa4b2;
    --danger:#ef4444;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:system-ui,Segoe UI,Roboto,sans-serif;
    background:radial-gradient(circle at top,#1f2937,var(--bg));
    color:var(--text);
  }
  header{
    background:linear-gradient(90deg,var(--accent),var(--accent2));
    padding:14px 20px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 4px 12px rgba(0,0,0,.4);
  }
  header h1{margin:0;font-size:20px;color:#06210f}
  nav a{
    text-decoration:none;
    color:#06210f;
    font-weight:600;
    margin-left:14px;
    padding:6px 10px;
    border-radius:8px;
  }
  nav a.active,nav a:hover{background:rgba(0,0,0,.15)}
  main{max-width:1000px;margin:20px auto;padding:0 16px}
  .page{display:none}
  .page.active{display:block}
  .panel{
    background:var(--panel);
    border-radius:16px;
    padding:16px;
    box-shadow:0 10px 25px rgba(0,0,0,.45);
  }

  /* layout */
  .game-wrap{display:grid;grid-template-columns:280px 1fr;gap:16px}
  @media(max-width:760px){.game-wrap{grid-template-columns:1fr}}

  /* controls */
  .controls label{font-size:12px;color:var(--muted)}
  .controls select,.controls input,.controls button{
    width:100%;margin-top:6px;margin-bottom:10px;
    padding:9px;border-radius:10px;border:none;
    background:#0f141b;color:var(--text)
  }
  .controls button{
    background:linear-gradient(180deg,var(--accent2),var(--accent));
    color:#052e16;font-weight:700;cursor:pointer
  }

  .status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
  .stat{background:#0b0f14;padding:10px;border-radius:10px;text-align:center}
  .stat span{font-size:12px;color:var(--muted)}
  .stat strong{font-size:18px}

  /* board */
  .board-wrap{display:flex;justify-content:center}
  .board{display:grid;gap:3px;background:#020617;padding:10px;border-radius:14px}
  .cell{
    width:30px;height:30px;
    display:grid;place-items:center;
    border-radius:8px;
    background:linear-gradient(180deg,#374151,#1f2937);
    font-weight:800;cursor:pointer;user-select:none;
    box-shadow:inset 0 -2px 0 rgba(0,0,0,.4);
  }
  .cell.revealed{background:#0b1220;cursor:default;box-shadow:none}
  .cell.flag{background:linear-gradient(180deg,#f59e0b,#b45309);color:#1f2937}
  .cell.mine{background:linear-gradient(180deg,#ef4444,#7f1d1d)}
  .n1{color:#60a5fa}.n2{color:#4ade80}.n3{color:#facc15}.n4{color:#a78bfa}
  .n5{color:#fb7185}.n6{color:#22d3ee}.n7{color:#e5e7eb}.n8{color:#f1f5f9}

  .end.good{color:var(--accent2);font-weight:700}
  .end.bad{color:var(--danger);font-weight:700}

  /* leaderboard */
  table{width:100%;border-collapse:collapse}
  th,td{padding:10px;border-bottom:1px solid #222;text-align:left}
  th{color:var(--muted)}
  tr:nth-child(even){background:#0b0f14}