/* ===== 主题色变量（Catppuccin Mocha 深色调） =====
     统一在此改色，全局生效。语义命名而非视觉命名，便维护。 */
  :root{
    /* 背景与面板层级：bg 最底、panel 中、panel2 顶 */
    --bg:#1e1e2e; --panel:#313244; --panel2:#45475a; --text:#cdd6f4;
    /* 语义色：accent 强调、danger 危险/踩雷、warn 警告/插旗、ok 成功/计时 */
    --accent:#89b4fa; --danger:#f38ba8; --warn:#f9e2af; --ok:#a6e3a1;
    /* 棋盘格三态：未翻、悬停、踩雷红 */
    --cell:#45475a; --cell-h:#585b70; --cell-r:#f38ba8;
    /* 1-8 邻接雷数各配一色，帮玩家快速区分数字 */
    --num1:#89b4fa; --num2:#a6e3a1; --num3:#f38ba8; --num4:#cba6f7;
    --num5:#fab387; --num6:#94e2d5; --num7:#b4befe; --num8:#f5c2e7;
  }
  /* 全局盒模型统一 border-box：宽高含 padding/border，布局算坐标不踩坑
     -webkit-tap-highlight-color:transparent：去手机点按灰高亮闪 */
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
  /* html,body 基底：深色底 + 中文优先系统字体栈
     overscroll-behavior:none：禁浏览器下拉刷新/橡皮筋，防误触出棋盘 */
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
    min-height:100vh;overscroll-behavior:none}
  /* body 纵向弹性布局居中各模块，padding 留手机安全区余量 */
  body{display:flex;flex-direction:column;align-items:center;padding:12px}

  /* 页头标题与副标题 */
  h1{font-size:20px;margin:6px 0 4px;font-weight:600}
  .sub{font-size:12px;color:#a6adc8;margin-bottom:10px}

  /* ===== 控制面板（地图大小 + 难度分段选择器） ===== */
  .panel{background:var(--panel);border-radius:12px;padding:12px;margin-bottom:10px;width:100%;max-width:720px}
  .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
  .row+.row{margin-top:8px}  /* 同面板内多行间距 */
  .label{font-size:12px;color:#a6adc8;margin-right:2px;min-width:48px;text-align:right}
  /* 分段选择器外壳：行内弹性、内嵌圆角背景 */
  .seg{display:inline-flex;background:var(--panel2);border-radius:8px;padding:3px;gap:2px}
  .seg button{border:0;background:transparent;color:#a6adc8;font-size:13px;padding:6px 10px;border-radius:6px;cursor:pointer;transition:all .15s}
  /* 选中态：强调色背景 + 深底字，一眼辨当前选择 */
  .seg button.active{background:var(--accent);color:#1e1e2e;font-weight:600}
  .seg button:hover:not(.active){color:var(--text)}

  /* ===== 状态栏（雷数计数 · 表情重开 · 计时器） ===== */
  .status{display:flex;gap:12px;align-items:center;justify-content:center;margin:6px 0 10px;width:100%;max-width:720px;flex-wrap:wrap}
  /* 单个统计胶囊：tabular-nums 让数字等宽不抖动 */
  .stat{background:var(--panel);border-radius:10px;padding:8px 14px;display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
  .stat .ico{font-size:16px}
  .stat .val{font-size:16px;font-weight:600;color:var(--accent);min-width:38px;text-align:center}
  /* 计时器单用 ok 色，与雷数区分 */
  .stat .val.timer{color:var(--ok)}
  /* 表情按钮：点按缩放反馈，user-select:none 防长按选中 */
  .face{font-size:22px;cursor:pointer;user-select:none;padding:4px 8px;border-radius:10px;background:var(--panel);transition:transform .1s}
  .face:active{transform:scale(.9)}

  /* ===== 棋盘 ===== */
  /* board-wrap 负责大图超宽时的横向滚动；-webkit-overflow-scrolling:touch 让 iOS 滚动顺滑 */
  .board-wrap{width:100%;max-width:1080px;overflow:auto;border-radius:12px;background:var(--panel);padding:8px;-webkit-overflow-scrolling:touch}
  /* board 用 CSS grid 排格，gap 为格间距；touch-action:manipulation 禁双击缩放 */
  .board{display:grid;gap:2px;margin:0 auto;touch-action:manipulation}
  /* 单格：弹性居中放数字/旗；过渡动画让翻牌/悬停有反馈 */
  .cell{background:var(--cell);border-radius:4px;display:flex;align-items:center;justify-content:center;
    font-weight:700;cursor:pointer;user-select:none;transition:background .1s;font-size:16px;line-height:1}
  .cell:hover{background:var(--cell-h)}      /* 未翻悬停：提示可点 */
  .cell.revealed{background:transparent;cursor:default}  /* 已翻：透明底，不再可点 */
  .cell.revealed:hover{background:transparent}
  .cell.flag{color:var(--warn)}              /* 插旗：旗字用警告黄 */
  .cell.mine{background:var(--cell-r)}       /* 雷：游戏结束时显露 */
  .cell.mine.exploded{background:var(--danger)}  /* 踩中的那颗雷：更刺眼红 */
  .cell.wrong-flag{background:var(--cell-r);color:var(--text)}  /* 错插的旗：结束时纠正显示 */
  /* 1-8 �邻接雷数配色，与 :root --num1..8 一一对应 */
  .cell.n1{color:var(--num1)} .cell.n2{color:var(--num2)} .cell.n3{color:var(--num3)}
  .cell.n4{color:var(--num4)} .cell.n5{color:var(--num5)} .cell.n6{color:var(--num6)}
  .cell.n7{color:var(--num7)} .cell.n8{color:var(--num8)}

  /* ===== 手机悬浮插旗按钮（触屏设备才显示） =====
     fixed 钉右下角，z-index 高于棋盘；可拖动重定位避免挡关键格 */
  .float-flag{display:none;position:fixed;right:14px;bottom:20px;z-index:40;
    width:48px;height:48px;border-radius:50%;border:0;background:var(--warn);
    color:#1e1e2e;font-size:24px;cursor:grab;box-shadow:0 4px 16px rgba(0,0,0,.4);
    transition:transform .1s, filter .15s, box-shadow .2s;user-select:none;touch-action:none}
  .float-flag:active{transform:scale(.9);cursor:grabbing}
  /* 激活态：变红 + 脉冲光圈 + 放大，提示"现在点格子是插旗不是挖" */
  .float-flag.active{
    background:var(--danger);
    box-shadow:0 0 0 4px rgba(243,139,168,.35), 0 0 18px 6px rgba(243,139,168,.5);
    animation:flagPulse 1.2s ease-in-out infinite;
    transform:scale(1.08);
  }
  /* ::after 显"插旗中"小标签，绝对定位在按钮下方 */
  .float-flag.active::after{
    content:"插旗中";
    position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
    font-size:11px;color:var(--danger);font-weight:700;white-space:nowrap;
    text-shadow:0 1px 2px #000;
  }
  /* 拖动中：禁过渡与脉冲动画，跟手移动 */
  .float-flag.dragging{cursor:grabbing;transition:none;animation:none}
  /* 脉冲关键帧：box-shadow 半径与透明度循环变化 */
  @keyframes flagPulse{
    0%,100%{box-shadow:0 0 0 4px rgba(243,139,168,.35), 0 0 18px 6px rgba(243,139,168,.5)}
    50%{box-shadow:0 0 0 8px rgba(243,139,168,.25), 0 0 24px 10px rgba(243,139,168,.35)}
  }
  /* 插旗态下棋盘格子加暗示性虚线描边，提示"现在点格子是插旗不是挖" */
  body.flag-mode .cell:not(.revealed):not(.flag){
    outline:1px dashed rgba(249,226,175,.45);
    outline-offset:-2px;
  }
  body.flag-mode .cell:not(.revealed):not(.flag):active{
    background:rgba(249,226,175,.25);
  }
  /* 仅触屏设备显悬浮按钮：hover:none 无鼠标、pointer:coarse 粗指针 */
  @media (hover:none) and (pointer:coarse){
    .float-flag{display:block}
  }

  /* ===== 手机悬浮"提示安全格"按钮（与插旗按钮同风） =====
     看广告后高亮一个安全格，帮卡局玩家破局 */
  .float-hint{display:none;position:fixed;right:14px;bottom:78px;z-index:40;
    width:48px;height:48px;border-radius:50%;border:0;background:var(--ok);
    color:#1e1e2e;font-size:22px;cursor:grab;box-shadow:0 4px 16px rgba(0,0,0,.4);
    transition:transform .1s, filter .15s;user-select:none;touch-action:none}
  .float-hint:active{transform:scale(.9);cursor:grabbing}
  .float-hint.dragging{cursor:grabbing;transition:none}
  /* busy 态：广告播放中禁用，半透 + 禁点 */
  .float-hint.busy{opacity:.45;pointer-events:none}
  .float-hint::after{
    content:"提示";
    position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);
    font-size:11px;color:var(--ok);font-weight:700;white-space:nowrap;
    text-shadow:0 1px 2px #000;
  }
  /* 安全格高亮闪烁：ok 色脉冲，z-index 抬高于其他格 */
  .cell.safe-hint{
    animation:safeBlink 0.6s ease-in-out infinite;
    z-index:6;
  }
  @keyframes safeBlink{
    0%,100%{background:var(--ok);box-shadow:0 0 0 3px rgba(166,227,161,.7),0 0 16px 6px rgba(166,227,161,.55)}
    50%{background:rgba(166,227,161,.35);box-shadow:0 0 0 6px rgba(166,227,161,.35),0 0 24px 10px rgba(166,227,161,.25)}
  }
  /* ===== 广告弹窗（模拟） =====
     inset:0 全屏遮罩，z-index:80 盖一切；.show 切显隐 */
  .ad-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;
    align-items:center;justify-content:center;z-index:80;padding:16px}
  .ad-overlay.show{display:flex}
  .ad-modal{background:#0f0f17;border-radius:16px;padding:24px;max-width:360px;width:100%;
    text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.7);font-family:inherit}
  .ad-modal .ad-label{font-size:11px;color:#6c7086;letter-spacing:2px;margin-bottom:10px}  /* "SPONSORED" 标签 */
  .ad-modal .ad-title{font-size:18px;color:var(--warn);font-weight:700;margin:6px 0 14px}
  /* 广告进度条：高 8px，ad-fill 宽度由 JS 0→100% 动画填充 5 秒 */
  .ad-modal .ad-bar{height:8px;background:#1e1e2e;border-radius:4px;overflow:hidden;margin:10px 0}
  .ad-modal .ad-bar .ad-fill{height:100%;width:0%;background:var(--ok);transition:width .2s linear}
  .ad-modal .ad-skip{font-size:12px;color:#6c7086;margin-top:10px;min-height:14px}
  .ad-modal .ad-fake{font-size:13px;color:#a6adc8;line-height:1.6;margin:8px 0;text-align:left}
  .ad-modal .ad-fake b{color:var(--accent)}
  /* 跳过按钮：默认藏，5 秒后才 .show 显出 */
  .ad-modal .ad-btn{margin-top:14px;background:var(--ok);color:#1e1e2e;border:0;
    padding:10px 22px;border-radius:8px;font-weight:700;cursor:pointer;font-size:14px;display:none}
  .ad-modal .ad-btn.show{display:inline-block}
  @media (hover:none) and (pointer:coarse){
    .float-hint{display:block}
  }

  /* ===== 详细解题思路面板 =====
     底部抽屉：下一步醒目卡片 + 可滚动完整步骤列表 */
  .hint-panel{position:fixed;left:0;right:0;bottom:0;z-index:45;background:var(--panel);
    border-radius:16px 16px 0 0;box-shadow:0 -8px 32px rgba(0,0,0,.5);
    padding:14px 16px calc(16px + env(safe-area-inset-bottom));
    display:none;max-height:72vh;flex-direction:column}
  .hint-panel.show{display:flex}
  .hp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .hp-title{font-size:15px;color:var(--accent);font-weight:700}
  .hp-close{background:var(--panel2);border:0;color:var(--text);width:28px;height:28px;
    border-radius:50%;font-size:14px;cursor:pointer;line-height:1}
  .hp-status{font-size:12px;color:#a6adc8;margin-bottom:8px}
  .hp-steps{display:flex;flex-direction:column;gap:8px}
  .hp-step{background:var(--panel2);border-radius:10px;padding:10px 12px;
    border-left:3px solid var(--ok)}
  .hp-step.flag{border-left-color:var(--warn)}
  .hp-step .act{font-size:15px;font-weight:700;color:var(--ok)}
  .hp-step.flag .act{color:var(--warn)}
  .hp-step .why{font-size:12px;color:#a6adc8;margin-top:4px;line-height:1.5}

  /* 旗目标高亮闪烁：warn 色脉冲，与安全格 safe-hint（ok 色）区分 */
  .cell.hint-flag{
    animation:flagBlink 0.6s ease-in-out infinite;
    z-index:6;
  }
  @keyframes flagBlink{
    0%,100%{box-shadow:0 0 0 2px var(--warn), inset 0 0 0 2px var(--warn)}
    50%{box-shadow:0 0 0 5px var(--warn), inset 0 0 0 2px var(--warn)}
  }

  /* 结束弹窗 */
  .overlay{position:fixed;inset:0;background:rgba(30,30,46,.75);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
  .overlay.show{display:flex}
  /* 弹窗主体：圆角卡片 + 居中文字 + 深底按钮；max-width:360px 适配手机竖屏 */
  .modal{background:var(--panel);border-radius:16px;padding:24px;max-width:360px;width:100%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .modal .big{font-size:42px;margin-bottom:8px}  /* 结束大表情 */
  .modal h2{margin:6px 0;color:var(--text)}
  .modal p{color:#a6adc8;font-size:13px;margin:6px 0}
  /* 弹窗按钮：默认强调色；hover 微提亮度反馈 */
  .modal button{margin-top:14px;background:var(--accent);color:#1e1e2e;border:0;padding:10px 22px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
  .modal button:hover{filter:brightness(1.1)}

  /* 操作提示文字：小字灰色，居中限宽 */
  .hint{font-size:11px;color:#a6adc8;margin-top:10px;text-align:center;max-width:720px;line-height:1.6}

  /* ===== 复盘模式控制条（通关/踩雷后弹出） =====
     show 类控显隐；内部两行 ctl：上行导航/进度、下行速度/续玩/退出 */
  .replay-bar{display:none;background:var(--panel);border-radius:12px;padding:10px;
    width:100%;max-width:720px;margin-top:10px;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
  .replay-bar.show{display:flex}
  .replay-bar .title{font-size:13px;color:var(--accent);font-weight:600;width:100%;text-align:center;margin-bottom:2px}
  .replay-bar .sub{font-size:11px;color:#a6adc8;width:100%;text-align:center;margin-bottom:4px}
  .replay-bar .ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center}
  /* 复盘按钮：默认 panel2 底，hover 提亮；primary/danger 为强调态 */
  .replay-bar button{border:0;background:var(--panel2);color:var(--text);font-size:13px;
    padding:7px 12px;border-radius:8px;cursor:pointer;transition:all .15s}
  .replay-bar button:hover{filter:brightness(1.15)}
  .replay-bar button.primary{background:var(--accent);color:#1e1e2e;font-weight:600}
  .replay-bar button.danger{background:var(--danger);color:#1e1e2e;font-weight:600}
  /* 进度条：flex:1 占满中段空隙，可点击跳步；fill 随 rpStep 增宽 */
  .replay-bar .progress{flex:1;min-width:160px;height:8px;background:var(--panel2);
    border-radius:4px;overflow:hidden;cursor:pointer;position:relative}
  .replay-bar .progress .fill{height:100%;width:0%;background:var(--accent);transition:width .12s linear}
  /* tick：当前步标记线，绝对定位在 progress 上 */
  .replay-bar .progress .tick{position:absolute;top:0;bottom:0;width:2px;background:var(--warn);opacity:.7}
  .replay-bar .info{font-size:12px;color:#a6adc8;font-variant-numeric:tabular-nums;min-width:80px;text-align:center}
  /* 回放速度档分段：1×/2×/4×/8× */
  .replay-bar .spd{display:inline-flex;gap:2px}
  .replay-bar .spd button{padding:5px 8px;font-size:12px}
  .replay-bar .spd button.active{background:var(--accent);color:#1e1e2e;font-weight:600}

  /* ===== 复盘操作徽章（在格子上叠出该步类型） =====
     inset box-shadow 画内描边，区分点击/插旗/踩雷三态 */
  .cell.act-click{box-shadow:inset 0 0 0 2px var(--ok)}
  .cell.act-flag{box-shadow:inset 0 0 0 2px var(--warn)}
  .cell.act-mine{box-shadow:inset 0 0 0 2px var(--danger)}
  /* 当前正回放的那一步：outline 外描边 + 提层级，眼辨"现在到哪了" */
  .cell.act-now{outline:2px solid var(--accent);outline-offset:-2px;z-index:5}

  /* ===== 账号条 =====
     居中弹性、自动换行；who 显当前用户名胶囊，b 子元素用 ok 色 */
  .account-bar{display:flex;gap:8px;align-items:center;justify-content:center;
    flex-wrap:wrap;width:100%;max-width:720px;margin-bottom:10px;font-size:13px}
  .account-bar .who{color:var(--text);background:var(--panel);padding:6px 12px;border-radius:8px}
  .account-bar .who b{color:var(--ok)}
  .account-bar button{border:0;background:var(--panel2);color:var(--text);font-size:13px;
    padding:6px 12px;border-radius:8px;cursor:pointer;transition:all .15s}
  .account-bar button:hover{filter:brightness(1.15)}
  .account-bar button.primary{background:var(--accent);color:#1e1e2e;font-weight:600}
  .account-bar button.danger{background:var(--danger);color:#1e1e2e;font-weight:600}
  /* 错误提示：独占一行居中，danger 色 */
  .account-bar .err{color:var(--danger);font-size:12px;min-height:14px;width:100%;text-align:center}

  /* ===== 存档列表弹窗 =====
     z-index:60 低于登录弹窗(70)，避免同时打开时叠错 */
  .saves-overlay{position:fixed;inset:0;background:rgba(30,30,46,.8);display:none;
    align-items:center;justify-content:center;z-index:60;padding:16px}
  .saves-overlay.show{display:flex}
  /* 80vh 限高 + overflow:auto：存档多时内滚而非撑出屏幕 */
  .saves-modal{background:var(--panel);border-radius:16px;padding:20px;max-width:520px;width:100%;
    max-height:80vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .saves-modal h3{margin:0 0 12px;color:var(--text);font-size:16px}
  .saves-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  /* 单条存档：左 meta 右两按钮；flex-wrap:wrap 让窄屏按钮换到下方 */
  .save-item{display:flex;gap:8px;align-items:center;background:var(--panel2);
    padding:10px 12px;border-radius:8px;flex-wrap:wrap}
  .save-item .meta{flex:1;min-width:120px}
  .save-item .meta .n{font-size:14px;color:var(--text);font-weight:600}  /* 存档名 */
  .save-item .meta .d{font-size:11px;color:#a6adc8}                   /* 尺寸/难度/时间 */
  .save-item button{border:0;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer}
  .save-item button.load{background:var(--ok);color:#1e1e2e;font-weight:600}    /* 载入 */
  .save-item button.share{background:var(--accent);color:#1e1e2e;font-weight:600} /* 分享 */
  .save-item button.del{background:var(--danger);color:#1e1e2e;font-weight:600}  /* 删除 */
  .share-import{display:flex;gap:8px;margin-bottom:10px}
  .share-import input{flex:1;min-width:0;border:0;border-radius:6px;padding:9px 10px;
    background:var(--panel2);color:var(--text);font-size:14px;text-transform:uppercase}
  .share-import button{border:0;border-radius:6px;padding:8px 14px;background:var(--accent);
    color:#1e1e2e;font-weight:600;cursor:pointer}
  .share-result{display:none;margin-bottom:10px;padding:10px;background:var(--panel2);border-radius:8px;
    color:var(--text);font-size:12px;text-align:center}
  .share-result.show{display:block}
  .share-result code{display:inline-block;margin:0 6px;color:var(--warn);font-size:17px;font-weight:700;
    letter-spacing:2px;user-select:all}
  .share-result button{border:0;border-radius:6px;padding:5px 9px;background:var(--ok);
    color:#1e1e2e;font-size:12px;font-weight:600;cursor:pointer}
  .share-message{min-height:16px;margin-bottom:8px;color:var(--danger);font-size:12px;text-align:center}
  .saves-empty{color:#a6adc8;font-size:13px;text-align:center;padding:20px}
  .saves-modal .close-saves{background:var(--panel2);color:var(--text);border:0;
    padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;width:100%}

  /* ===== 排行榜弹窗 =====
     z-index:62，介于存档(60)与登录(70)之间 */
  .lb-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;
    align-items:center;justify-content:center;z-index:62;padding:16px}
  .lb-overlay.show{display:flex}
  .lb-modal{background:var(--panel);border-radius:16px;padding:20px;max-width:520px;width:100%;
    max-height:80vh;overflow:auto;box-shadow:0 8px 32px rgba(0,0,0,.4)}
  .lb-modal h3{margin:0 0 4px;color:var(--text);font-size:16px;text-align:center}
  .lb-modal .lb-sub{font-size:12px;color:#a6adc8;text-align:center;margin-bottom:14px}
  .lb-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  /* 单条榜单：左排名右用时，中间 meta 显用户名/日期 */
  .lb-item{display:flex;gap:10px;align-items:center;background:var(--panel2);
    padding:10px 12px;border-radius:8px;flex-wrap:wrap}
  /* 排名数字：大粗，tabular-nums 等宽；前三名金/银/铜色 */
  .lb-item .rank{font-size:22px;font-weight:800;min-width:36px;text-align:center;
    color:var(--accent);font-variant-numeric:tabular-nums}
  .lb-item.rank-1 .rank{color:#ffd700}  /* 金 */
  .lb-item.rank-2 .rank{color:#c0c0c0}  /* 银 */
  .lb-item.rank-3 .rank{color:#cd7f32}  /* 铜 */
  .lb-item .meta{flex:1;min-width:120px}
  .lb-item .meta .who{font-size:14px;color:var(--text);font-weight:600}
  .lb-item .meta .d{font-size:11px;color:#a6adc8}
  /* 用时秒数：ok 色右对齐，tabular-nums 便比对 */
  .lb-item .time{font-size:14px;color:var(--ok);font-weight:700;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
  /* "我也玩此图"按钮：强调色，载入通关雷图挑战 */
  .lb-item button{border:0;padding:6px 12px;border-radius:6px;font-size:12px;cursor:pointer;
    background:var(--accent);color:#1e1e2e;font-weight:600}
  .lb-empty{color:#a6adc8;font-size:13px;text-align:center;padding:20px}
  .lb-modal .close-lb{background:var(--panel2);color:var(--text);border:0;
    padding:8px 16px;border-radius:8px;cursor:pointer;font-size:13px;width:100%}

  /* ===== 手机自适应（窄屏紧凑布局） =====
     max-width:600px 为手机竖屏典型阈值 */
  @media (max-width:600px){
    body{padding:6px}
    h1{font-size:18px}
    .cell{font-size:14px}                       /* 缩字以适应小格 */
    .replay-bar button{padding:6px 9px;font-size:12px}

    /* 手机端：去边框 + 监向贴边铺满，省屏空间 */
    .panel{background:transparent;border-radius:0;padding:4px 0;margin-bottom:6px}
    .board-wrap{background:transparent;border-radius:0;padding:0;max-width:100%}
    .board{margin:0;width:100% !important}      /* !important 覆盖 JS 内联宽 */
    .status{gap:8px;margin:4px 0 6px}
    .stat{padding:6px 10px;border-radius:8px}
    .stat .val{min-width:32px;font-size:14px}
    .face{padding:4px 8px;border-radius:8px}
    .hint{max-width:100%}
    .account-bar{max-width:100%}
    /* 控制面板的行在手机端紧凑排列 */
    .row{gap:6px}
    .seg button{padding:6px 8px;font-size:12px}
  }