* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
  html { height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: linear-gradient(160deg, #1a2a3a 0%, #2d4a5e 100%);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    justify-content: safe center;
    min-height: 100vh; min-height: 100svh; padding: 14px; user-select: none; -webkit-user-select: none;
  }
  .wrap {
    position: relative;
    width: min(560px, 100%);
    background: rgba(15, 30, 40, .55);
    border-radius: 16px; padding: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.45);
    /* 30×16 硬难度在手机上放不下整块棋盘，允许横向滑动查看（.cell 已设 touch-action: manipulation） */
    overflow-x: auto;
  }
  .hidden { display: none !important; }
  .topbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 12px; gap: 8px; flex-wrap: wrap;
  }
  .counter {
    background: rgba(0,0,0,.35); border-radius: 10px; padding: 6px 14px;
    color: #ffd76e; font-size: 18px; font-weight: 800; letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
  }
  .counter small { display: block; font-size: 9px; color: rgba(255,255,255,.5); letter-spacing: 1px; font-weight: 700; }
  .diff-row { display: flex; gap: 6px; }
  .diff-btn {
    border: none; border-radius: 8px; padding: 8px 12px; cursor: pointer;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.75);
    font-family: inherit; font-size: 13px; font-weight: 700; transition: all .12s ease;
  }
  .diff-btn.active { background: #ff9f1c; color: #fff; }
  .face-btn, #mute-btn {
    border: none; border-radius: 10px; width: 42px; height: 42px;
    font-size: 20px; cursor: pointer; background: rgba(255,255,255,.15); padding: 0;
  }
  .face-btn:active, #mute-btn:active { transform: scale(.92); }
  #board {
    display: grid; gap: 2px; margin: 0 auto;
    background: rgba(0,0,0,.3); padding: 6px; border-radius: 10px;
    touch-action: manipulation;
  }
  .cell {
    width: var(--cs); height: var(--cs);
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; font-weight: 800;
    font-size: calc(var(--cs) * 0.52);
    background: #4a6b52; cursor: pointer;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.2);
    transition: background .08s ease;
    /* iOS 长按会弹「拷贝/查找」气泡并打断触摸序列，导致长按插旗失效 */
    -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;
  }
  .cell:hover { background: #587d61; }
  .cell.open { background: #22352a; cursor: default; box-shadow: none; }
  .cell.mine-hit { background: #b33939; }
  .cell.mine-shown { background: #2a2020; }
  .cell.flag-wrong { background: #3a2a2a; }
  .n1 { color: #6db3f2; } .n2 { color: #7cb342; } .n3 { color: #e57373; }
  .n4 { color: #9575cd; } .n5 { color: #ffb74d; } .n6 { color: #4db6ac; }
  .n7 { color: #f06292; } .n8 { color: #e0e0e0; }
  .msg {
    margin-top: 12px; text-align: center; color: #fff; font-size: 15px; font-weight: 700;
    min-height: 22px; letter-spacing: .5px;
  }
  .msg.win { color: #7cb342; } .msg.lose { color: #e57373; }
  .hint { margin-top: 4px; text-align: center; color: rgba(255,255,255,.45); font-size: 11px; }
  .btn-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
  .btn-primary {
    border: none; border-radius: 12px; padding: 12px 24px; cursor: pointer;
    font-size: 15px; font-weight: 800; font-family: inherit;
    background: #ff9f1c; color: #fff; box-shadow: 0 5px 0 #c47a0e;
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn-primary:active { transform: scale(.95); box-shadow: 0 2px 0 #c47a0e; }
  .btn-ghost {
    border: none; border-radius: 12px; padding: 12px 24px; cursor: pointer;
    font-size: 15px; font-weight: 800; font-family: inherit;
    background: rgba(255,255,255,.15); color: #fff; box-shadow: 0 5px 0 rgba(0,0,0,.25);
    transition: transform .12s ease, box-shadow .12s ease;
  }
  .btn-ghost:active { transform: scale(.95); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
  .footer {
    margin-top: 16px; color: rgba(255,255,255,.55); font-size: 12px;
    text-align: center; line-height: 1.8;
  }
  .footer a { color: rgba(255,255,255,.8); text-decoration: none; }
  .footer a:hover { color: #ffd76e; }

.footer{font-size:11px;margin-top:8px}button:focus-visible{outline:3px solid #d9ff8e;outline-offset:3px}@media(prefers-reduced-motion:reduce){*{animation:none!important}}
#board{width:max-content;max-width:none}