:root{
  /* 告诉浏览器这是深色界面。不加的话，<button> 这类控件会用浅色模式下的
     默认文字色（黑），在深色背景上就看不见了 —— 小游戏的卡片标题踩过这个坑。 */
  color-scheme:dark;
  --bg:#0d0f14;
  --panel:#171b26;
  --panel-2:#1e2431;
  --line:#2a3040;
  --text:#e9edf5;
  --muted:#98a1b3;
  --accent:#ffc247;
  --accent-ink:#1a1206;
  --violet:#8b7cff;
  --green:#4ade80;
  --red:#f87171;
  --radius:16px;
  --shadow:0 18px 40px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:
    radial-gradient(1100px 600px at 12% -12%, rgba(255,194,71,.10), transparent 62%),
    radial-gradient(900px 520px at 96% -4%, rgba(139,124,255,.13), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100%;
}

a{color:inherit;text-decoration:none}
button{
  font-family:inherit;cursor:pointer;
  /* 禁用移动端双击缩放。iOS Safari 从 10 开始忽略 user-scalable=no，
     touch-action 才是真正管用的那个。 */
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
  background:rgba(13,15,20,.82);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{
  width:38px;height:38px;flex:none;
  display:grid;place-items:center;
  border-radius:12px;
  background:linear-gradient(145deg,var(--accent),#ff9d3d);
  color:var(--accent-ink);
  font-size:20px;font-weight:800;
  box-shadow:0 6px 18px rgba(255,194,71,.28);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text strong{font-size:16px;letter-spacing:.5px}
.brand-text small{font-size:11px;color:var(--muted);letter-spacing:1.4px}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
  padding:8px 14px;border-radius:10px;
  font-size:13.5px;color:var(--muted);
  transition:.16s;
}
.nav a:hover{color:var(--text);background:var(--panel)}
.nav a.active{color:var(--accent-ink);background:var(--accent);font-weight:600}

/* ---------- layout ---------- */
.view{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:30px 22px 60px}
.footer{
  display:flex;gap:10px;justify-content:center;
  padding:22px;color:var(--muted);font-size:12px;
  border-top:1px solid var(--line);
}
.footer-dot{opacity:.5}

.hero{margin-bottom:26px}
.hero h1{
  margin:0 0 8px;font-size:clamp(26px,4.4vw,40px);letter-spacing:-.5px;
}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.7;max-width:60ch}

.section-title{
  display:flex;align-items:baseline;gap:12px;
  margin:34px 0 14px;
}
.section-title h2{margin:0;font-size:17px;letter-spacing:.3px}
.section-title span{font-size:12.5px;color:var(--muted)}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px;
}

/* ---------- form ---------- */
.field{margin-bottom:18px}
.field:last-child{margin-bottom:0}
.field-label{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--muted);letter-spacing:.6px;margin-bottom:10px;
}
.field-label b{color:var(--text);font-size:13px;letter-spacing:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--muted);
  padding:7px 14px;border-radius:999px;
  font-size:13px;transition:.15s;
}
.chip:hover{border-color:#3d4557;color:var(--text)}
.chip.on{
  background:var(--accent);border-color:var(--accent);
  color:var(--accent-ink);font-weight:600;
}

.range-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;min-width:180px;height:4px;border-radius:4px;
  background:var(--line);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px rgba(255,194,71,.16);
}
input[type=range]::-moz-range-thumb{
  width:18px;height:18px;border:none;border-radius:50%;
  background:var(--accent);cursor:pointer;
}
.range-value{
  min-width:96px;text-align:right;
  font-variant-numeric:tabular-nums;font-size:14px;color:var(--accent);font-weight:600;
}

/* ---------- buttons ---------- */
.btn{
  border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);
  padding:11px 20px;border-radius:12px;
  font-size:14px;transition:.15s;
}
.btn:hover{background:#252c3b;border-color:#3d4557}
.btn-primary{
  background:linear-gradient(140deg,var(--accent),#ff9d3d);
  border-color:transparent;color:var(--accent-ink);font-weight:700;
  box-shadow:0 10px 26px rgba(255,194,71,.22);
}
.btn-primary:hover{filter:brightness(1.06);background:linear-gradient(140deg,var(--accent),#ff9d3d)}
.btn-block{width:100%}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:14px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}

/* ---------- result cards ---------- */
.results{display:grid;gap:14px}
.play-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 18px 16px;
  position:relative;overflow:hidden;
  animation:rise .34s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.play-card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent),var(--violet));
}
.play-card.best{border-color:rgba(255,194,71,.42)}
.play-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap}
.play-name{margin:0;font-size:18px;letter-spacing:.2px}
.play-tagline{margin:6px 0 0;color:var(--muted);font-size:13px;line-height:1.6}
.match{
  margin-left:auto;flex:none;text-align:right;
}
.match-num{font-size:18px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.match-cap{display:block;font-size:11px;color:var(--muted);letter-spacing:.8px}
.meta{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.meta span{
  font-size:12px;color:var(--muted);
  background:var(--panel-2);border:1px solid var(--line);
  padding:4px 10px;border-radius:8px;
}
.rules{margin:14px 0 0;padding-left:18px;color:#c4ccdb;font-size:13px;line-height:1.85}
.rules li::marker{color:var(--accent)}
.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.card-actions .btn{padding:9px 16px;font-size:13px}

.empty{
  text-align:center;color:var(--muted);font-size:13.5px;
  padding:34px 20px;border:1px dashed var(--line);border-radius:var(--radius);
  line-height:1.8;
}

/* ---------- grids ---------- */
.grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.tile{
  color:var(--text);
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:16px;
  display:flex;flex-direction:column;gap:8px;
  transition:.16s;text-align:left;
}
.tile:hover{transform:translateY(-2px);border-color:#3d4557;background:var(--panel-2)}
.tile-icon{font-size:22px;line-height:1}
.tile-name{font-size:15px;font-weight:600}
.tile-desc{font-size:12.5px;color:var(--muted);line-height:1.6;flex:1}
.tile-tag{
  align-self:flex-start;font-size:11px;color:var(--accent);
  border:1px solid rgba(255,194,71,.3);border-radius:7px;padding:2px 8px;
}
.tile-tag.off{color:var(--muted);border-color:var(--line)}

/* ---------- modal ---------- */
.modal-backdrop{
  position:fixed;inset:0;z-index:80;
  background:rgba(6,8,12,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:fade .18s ease both;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:100%;max-width:520px;max-height:88vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow);
  animation:pop .2s ease both;
}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.modal-head{
  display:flex;align-items:center;gap:12px;
  padding:16px 18px;border-bottom:1px solid var(--line);
}
.modal-head h3{margin:0;font-size:16px}
.modal-close{
  margin-left:auto;background:none;border:none;color:var(--muted);
  font-size:20px;line-height:1;padding:4px 8px;border-radius:8px;
}
.modal-close:hover{color:var(--text);background:var(--panel-2)}
.modal-body{padding:18px}
.modal-foot{padding:0 18px 18px;display:flex;gap:10px;flex-wrap:wrap}

/* ---------- tool widgets ---------- */
.input{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--text);border-radius:10px;padding:11px 13px;font-size:14px;
  font-family:inherit;
}
.input:focus{outline:none;border-color:var(--accent)}
textarea.input{resize:vertical;min-height:88px;line-height:1.7}
.hint{font-size:12px;color:var(--muted);line-height:1.7;margin:8px 0 0}

.big-digit{
  font-size:clamp(46px,11vw,68px);font-weight:700;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;text-align:center;line-height:1.1;
  padding:14px 0 6px;
}
.digit-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.digit-row .btn{padding:8px 14px;font-size:13px}
.step-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

.name-list{display:grid;gap:8px;margin-top:6px}
.name-row{display:flex;align-items:center;gap:10px}
.name-row .input{flex:1}

.score-list{display:grid;gap:8px}
.score-row{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:9px 12px;
}
.score-name{flex:1;font-size:14px}
.score-val{
  min-width:42px;text-align:center;font-size:16px;font-weight:700;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
.icon-btn{
  width:30px;height:30px;flex:none;
  border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);
  font-size:15px;line-height:1;
}
.icon-btn:hover{background:#252c3b}

.draw-name{
  text-align:center;font-size:clamp(26px,6vw,38px);font-weight:700;
  padding:26px 10px;min-height:96px;
  display:grid;place-items:center;
  border:1px dashed var(--line);border-radius:14px;
  color:var(--accent);
}
.draw-name.rolling{color:var(--muted);font-weight:400}

.team-box{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.team-col{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:12px;
}
.team-col h4{margin:0 0 8px;font-size:13px;color:var(--accent);letter-spacing:.5px}
.team-col ul{margin:0;padding-left:18px;font-size:13.5px;line-height:1.9;color:#c4ccdb}

canvas.wheel{display:block;margin:0 auto;max-width:100%}

/* ---------- game: schulte ---------- */
.schulte-head{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:14px;
}
.stat{font-size:13px;color:var(--muted)}
.stat b{color:var(--accent);font-size:17px;font-variant-numeric:tabular-nums;margin-left:5px}
.schulte{
  display:grid;gap:8px;
  grid-template-columns:repeat(var(--n),1fr);
  user-select:none;
}
.cell{
  aspect-ratio:1;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);font-size:clamp(14px,3.4vw,21px);font-weight:600;
  display:grid;place-items:center;
  font-variant-numeric:tabular-nums;
  transition:.1s;
}
.cell:hover{border-color:#3d4557}
.cell.done{
  background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.4);
  color:transparent;
}
.cell.bad{background:rgba(248,113,113,.2);border-color:var(--red)}

/* ---------- game: reaction ---------- */
.reaction-stage{
  border-radius:14px;border:1px solid var(--line);
  background:var(--panel-2);
  padding:36px 20px;text-align:center;
  transition:background .12s;
}
.reaction-stage.go{background:rgba(74,222,128,.18);border-color:rgba(74,222,128,.5)}
.reaction-stage.toosoon{background:rgba(248,113,113,.18);border-color:var(--red)}
.reaction-msg{font-size:clamp(20px,4.6vw,28px);font-weight:700}
.reaction-sub{font-size:13px;color:var(--muted);margin-top:8px}
.reaction-scores{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin-top:14px}
.reaction-player{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:12px;text-align:center;
}
.reaction-player .k{
  display:inline-block;font-weight:700;font-size:12px;
  border:1px solid var(--line);border-radius:6px;padding:1px 7px;
  color:var(--accent);margin-bottom:6px;
}
.reaction-player .v{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- game: memory ---------- */
.memory{
  display:grid;gap:8px;
  grid-template-columns:repeat(var(--n),1fr);
}
.mcard{
  aspect-ratio:1;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);
  font-size:clamp(16px,4vw,26px);
  display:grid;place-items:center;
  transition:.16s;color:transparent;
}
.mcard:hover:not(.open):not(.matched){border-color:#3d4557}
.mcard.open,.mcard.matched{background:rgba(255,194,71,.14);border-color:rgba(255,194,71,.4);color:var(--text)}
.mcard.matched{background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.4)}

@media (max-width:600px){
  .view{padding:22px 15px 48px}
  .panel{padding:16px}
  .topbar{padding:12px 15px}
  .brand-text small{display:none}
}

/* ================= 顶栏用户区 ================= */
.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);font-size:13px;transition:.15s;
}
.user-chip:hover{border-color:#3d4557;background:#252c3b}
.user-chip .dot{
  width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;
}
.topbar-right{display:flex;align-items:center;gap:10px;margin-left:auto}

/* ================= 数独 ================= */
.sudoku-wrap{display:flex;justify-content:center;padding:4px 0 12px}
.sudoku{
  display:grid;grid-template-columns:repeat(9,1fr);
  width:min(100%,378px);
  border:2px solid #3d4557;border-radius:10px;overflow:hidden;
  background:var(--panel-2);
}
.sudoku-cell{
  aspect-ratio:1;padding:0;border:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--panel-2);color:#c4ccdb;
  font-size:clamp(13px,3.3vw,19px);font-weight:600;
  font-variant-numeric:tabular-nums;
  display:grid;place-items:center;
  transition:background .12s;
}
.sudoku-cell:nth-child(9n){border-right:0}
.sudoku-cell:nth-child(n+73){border-bottom:0}
/* 这两条必须放在 nth-child 之后：特异性相同，靠顺序取胜 */
.sudoku-cell.edge-r{border-right:2px solid #3d4557}
.sudoku-cell.edge-b{border-bottom:2px solid #3d4557}
.sudoku-cell.given{color:var(--text);background:#1a2030;font-weight:700}
.sudoku-cell.peer{background:#232a3a}
.sudoku-cell.same{background:#2b3450;color:var(--accent)}
.sudoku-cell.sel{background:rgba(255,194,71,.24)}
.sudoku-cell.filled{color:#7fb8ff}
.sudoku-cell.bad{color:var(--red);background:rgba(248,113,113,.18)}

.num-pad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.num-key{
  aspect-ratio:1.4;border-radius:11px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);
  font-size:17px;font-weight:600;transition:.14s;
}
.num-key:hover{background:#252c3b;border-color:#3d4557}
.num-key.used{opacity:.3}
.num-key.erase{
  grid-column:span 5;aspect-ratio:auto;padding:10px;
  font-size:13px;color:var(--muted);
}

/* ================= 贪吃蛇 ================= */
.snake-wrap{display:flex;justify-content:center;padding:4px 0 12px}
.snake-canvas{
  width:min(100%,360px);height:auto;display:block;
  border-radius:12px;border:1px solid var(--line);
  touch-action:none;
}
.dpad{
  display:grid;gap:8px;justify-content:center;margin-top:14px;
  grid-template-columns:repeat(3,66px);
  grid-template-rows:repeat(3,52px);
}
.dpad-btn{
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--text);border-radius:11px;font-size:17px;transition:.14s;
}
.dpad-btn:hover{background:#252c3b;border-color:#3d4557}
.dpad-btn.up{grid-area:1/2}
.dpad-btn.left{grid-area:2/1}
.dpad-btn.right{grid-area:2/3}
.dpad-btn.down{grid-area:3/2}

/* ================= 扫雷 ================= */
.mine-wrap{display:flex;justify-content:center;padding:4px 0 12px}
.mine-board{
  display:grid;gap:2px;width:min(100%,378px);
  grid-template-columns:repeat(var(--cols),1fr);
}
.mine-board.compact{width:min(100%,520px)}
.mine-cell{
  aspect-ratio:1;padding:0;
  border-radius:5px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text);
  font-size:clamp(9px,2.4vw,15px);font-weight:700;
  display:grid;place-items:center;transition:.1s;
}
.mine-cell:hover:not(.open){background:#252c3b;border-color:#3d4557}
.mine-cell.open{background:#12161f;border-color:#20263a;cursor:default}
.mine-cell.flag{background:rgba(255,194,71,.16);border-color:rgba(255,194,71,.45)}
.mine-cell.boom{background:rgba(248,113,113,.38);border-color:var(--red)}
.mine-cell.soft-mine{opacity:.5}
.mine-cell.n1{color:#7fb8ff}
.mine-cell.n2{color:#4ade80}
.mine-cell.n3{color:#f87171}
.mine-cell.n4{color:#c084fc}
.mine-cell.n5{color:#fbbf24}
.mine-cell.n6{color:#22d3ee}
.mine-cell.n7{color:#e9edf5}
.mine-cell.n8{color:#98a1b3}

/* ================= 排行榜 ================= */
.board-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}
.board-table{width:100%;border-collapse:collapse;font-size:14px}
.board-table th{
  text-align:left;font-size:12px;font-weight:500;color:var(--muted);
  padding:9px 10px;border-bottom:1px solid var(--line);
}
.board-table td{padding:11px 10px;border-bottom:1px solid rgba(42,48,64,.45)}
.board-table tr.me td{background:rgba(255,194,71,.08)}
.board-table td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:600}
.rank-badge{
  display:inline-grid;place-items:center;
  width:25px;height:25px;border-radius:7px;
  background:var(--panel-2);color:var(--muted);font-size:12px;font-weight:700;
}
.rank-badge.top1{background:linear-gradient(140deg,var(--accent),#ff9d3d);color:var(--accent-ink)}
.rank-badge.top2{background:#3a4459;color:#e9edf5}
.rank-badge.top3{background:#4a3a2a;color:var(--accent)}

/* ================= 登录 / 注册 ================= */
.auth-tabs{display:flex;gap:6px;margin-bottom:16px}
.auth-tabs button{
  flex:1;padding:10px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);
  color:var(--muted);font-size:13.5px;transition:.15s;
}
.auth-tabs button.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.auth-field{margin-bottom:13px}
.auth-field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.form-error{color:var(--red);font-size:13px;margin:10px 0 0;min-height:19px;line-height:1.5}
.form-ok{color:var(--green)}

/* ================= 联机房间 ================= */
.room-code{
  text-align:center;font-size:clamp(26px,7vw,36px);font-weight:800;
  letter-spacing:.28em;color:var(--accent);
  padding:16px 10px;border:1px dashed var(--line);border-radius:14px;
  font-variant-numeric:tabular-nums;user-select:all;
}
.room-players{display:grid;gap:8px;margin-top:16px}
.room-player{
  display:flex;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:11px;padding:10px 12px;font-size:14px;
}
.room-player .who{flex:1}
.room-player .val{color:var(--accent);font-weight:600;font-variant-numeric:tabular-nums}
.room-player.done{border-color:rgba(74,222,128,.42)}
.room-player.me{background:rgba(255,194,71,.09)}
.room-player .host-tag{
  font-size:11px;color:var(--muted);
  border:1px solid var(--line);border-radius:6px;padding:1px 6px;margin-left:8px;
}
.standings-row{
  display:flex;align-items:center;gap:12px;
  padding:11px 13px;border-radius:11px;
  background:var(--panel-2);border:1px solid var(--line);margin-bottom:8px;
}
.standings-row.win{border-color:rgba(255,194,71,.5);background:rgba(255,194,71,.1)}
.standings-row .who{flex:1}

.tile.soon{opacity:.62;cursor:default}

/* 长按游戏格会触发文字选中，手机上还会弹出系统的复制菜单 ——
   扫雷长按插旗的时候尤其烦人，按了半天弹出来的是「复制」。
   棋盘类界面本来就没有需要选中的文字，直接全禁掉。 */
.mine-board,.mine-cell,
.schulte,.cell,
.sudoku,.sudoku-cell,.num-key,
.memory,.mcard,
.dpad,.dpad-btn{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}

/* ================= 游戏通用布局 ================= */
.stat-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  justify-content:space-between;margin-bottom:12px;
}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px}

/* ================= 扫雷：插旗模式 ================= */
.flag-toggle.active{
  background:linear-gradient(140deg,var(--accent),#ff9d3d);
  border-color:transparent;color:var(--accent-ink);font-weight:700;
}
/* 插旗模式下给未翻开的格子一点视觉提示，避免手滑点错 */
.mine-board.flag-mode .mine-cell:not(.open){
  border-color:rgba(255,194,71,.5);
  background:rgba(255,194,71,.07);
}

/* ================= 手机端 ================= */
@media (max-width:600px){
  /*
   * 贪吃蛇的老问题是：棋盘 360px 加上方向键之后总高度超出屏幕，
   * 想按方向键就得先滚动，可游戏还在跑。这里用 vh 把棋盘压到
   * 一屏放得下，方向键加大到好按的尺寸。
   */
  /* 游戏弹窗比普通弹窗多占一点高度：玩的时候没法一边滚一边按 */
  .modal:has(.game-snake),.modal:has(.game-mine){max-height:96vh;}

  /* 方向键加大到 3×56，棋盘相应压小，保证一屏放得下 */
  .snake-canvas{width:max(150px,min(100%,calc(100vh - 430px)));}
  .dpad{
    grid-template-columns:repeat(3,72px);
    grid-template-rows:repeat(3,56px);
    gap:8px;margin-top:10px;
  }
  .dpad-btn{font-size:22px;}

  /* 长按棋盘上的格子会触发文字选中和复制菜单，扫雷的时候特别烦 */
  .mine-board,.mine-cell,.schulte,.cell,.sudoku,.sudoku-cell,.num-key{
    user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  }

  /* 手机上方向键再大也不够准，所以棋盘上的滑动才是主操作 */
  .snake-wrap{padding:2px 0 8px;}

  /* 操作按钮收窄，把高度让给棋盘 */
  .game-snake .btn-row{margin-top:8px;}
  .game-snake .btn{padding:8px 14px;font-size:13px;}

  /* 游戏里少留白，把空间让给棋盘 */
  .modal-body{padding:14px;}
  .stat-row{gap:10px;margin-bottom:8px;}
  .stat{font-size:12px;}
}

/* 触摸设备上的方向键：去掉 300ms 点击延迟和双击缩放 */
.dpad-btn{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.mine-cell{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}