/* 经典扫雷 - 手机竖屏优先 + 电脑端适配 */
:root{
  --bg:#0f172a;
  --panel:#111827;
  --accent:#22d3ee;
  --accent-2:#60a5fa;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --danger:#ef4444;
  --success:#22c55e;
  --warn:#f59e0b;
  --cell:#1f2937;
  --cell-hover:#273244;
  --flag:#fb7185;
}
*{box-sizing:border-box}
html,body{height:100%;}
body{margin:0;background:linear-gradient(180deg,#0b1220,#0f172a);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Microsoft Yahei",sans-serif;-webkit-tap-highlight-color:transparent}

.app{min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:12px;}
.header{display:flex;flex-direction:column;gap:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:12px 12px 10px;backdrop-filter:blur(6px)}
.title{margin:0;font-size:20px;letter-spacing:1px}
.hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:center}
.hud-item{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:8px 6px}
.hud-item .label{font-size:12px;color:var(--muted)}
.hud-item .value{font-size:18px;font-weight:700;color:#fff}
.btn{appearance:none;border:none;background:#1e293b;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;outline:none;transition:.15s transform,.15s background;display:inline-flex;align-items:center;justify-content:center}
.btn:active{transform:scale(.98)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.btn.primary:active{filter:brightness(.95)}

.main{display:flex;flex-direction:column;gap:12px}
.board-wrapper{display:flex;justify-content:center;align-items:center}
.board{display:grid;gap:4px;touch-action:manipulation;user-select:none;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:6px;width:100%;max-width:92vw}
.cell{display:grid;place-items:center;background:var(--cell);border-radius:8px;border:1px solid rgba(255,255,255,0.06);font-weight:700;color:#9ca3af;box-shadow:inset 0 -1px 0 rgba(255,255,255,0.04);aspect-ratio:1/1;font-size:clamp(12px, 2.2vw, 18px)}
.cell.revealed{background:#0b1220;color:#e5e7eb}
.cell:hover{background:var(--cell-hover)}
.cell.flag::after{content:"🚩"}
.cell.mine.revealed{background:#3b0d0d;color:#fff}
.cell.mine.revealed::after{content:"💣"}
.cell[data-n="1"].revealed{color:#60a5fa}
.cell[data-n="2"].revealed{color:#34d399}
.cell[data-n="3"].revealed{color:#f87171}
.cell[data-n="4"].revealed{color:#a78bfa}
.cell[data-n="5"].revealed{color:#fbbf24}
.cell[data-n="6"].revealed{color:#22d3ee}
.cell[data-n="7"].revealed{color:#e879f9}
.cell[data-n="8"].revealed{color:#cbd5e1}

.tips{font-size:12px;color:var(--muted);text-align:center}
.toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:rgba(17,24,39,.95);border:1px solid rgba(255,255,255,.08);padding:10px 14px;border-radius:10px}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:14px}
.modal{width:min(520px,92vw);background:linear-gradient(180deg,#0f172a,#0b1320);border:1px solid rgba(255,255,255,0.08);border-radius:14px;padding:16px 14px}
.modal h2{margin:4px 0 8px;font-size:20px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:8px 0 14px}
.stats .card{background:var(--panel);border:1px solid rgba(255,255,255,0.06);border-radius:10px;padding:10px}
.stats .card .k{font-size:12px;color:var(--muted)}
.stats .card .v{font-size:18px;font-weight:700}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}

/* 响应式：手机竖屏优先 */
@media (min-width: 480px){
  .title{font-size:22px}
}
@media (min-width: 640px){
  .app{padding:18px}
  .hud{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (min-width: 1024px){
  .board{ max-width: 420px; }
  .header{ padding:10px 10px 8px; }
  .hud-item{ padding:6px 4px; }
  .hud-item .value{ font-size:16px; }
  .title{ font-size:18px; }
}
@media (orientation: landscape) and (max-width: 900px){
  .board{transform:scale(.9)}
}