/*! =========================================================
 *  流式底座 v1  ·  2026-10-15
 *  作用：页面尺寸「跟着屏幕连续变化」，不是分成几档跳
 *        —— 手机(320~430)刚好铺满 · 平板(600~1024)不缩成窄条也不拉得太宽
 *  用法：<head> 里引一行即可（路径按页面所在层级调整）
 *        <link rel="stylesheet" href="../核心/流式底座.css">
 *  对外提供 5 个变量，页面直接用：
 *        var(--u)    基准字号   最小 14px → 最大 20px
 *        var(--gap)  间距       最小  6px → 最大 14px
 *        var(--pad)  容器内边距 最小  9px → 最大 22px
 *        var(--rad)  圆角       最小 10px → 最大 18px
 *        var(--maxw) 内容宽度上限（手机=屏宽，平板=最多 880px）
 *  再加两个现成类：.flow-wrap（铺满的主容器） .flow-body（全屏骨架）
 * ========================================================= */

:root{
  /* 刻度：以视口宽为尺，线性插值，两端夹住
     vw 公式 = 斜率 * 100vw + 截距（保证在 390px 屏上取到设计基准值） */
  --u:   clamp(14px, calc(0.58vw + 11.30px), 20px);
  --gap: clamp(6px,  calc(0.75vw +  3.40px), 14px);
  --pad: clamp(9px,  calc(1.15vw +  4.40px), 22px);
  --rad: clamp(10px, calc(0.85vw +  6.20px), 18px);
  --maxw: 880px;
  /* 可视高度：手机地址栏收起/展开都算得对 */
  --vh: 100dvh;
}

/* ---- 全屏骨架：内容永远至少占满一屏，刘海/小白条自动让位 ---- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.flow-body{
  min-height:100vh;                 /* 老浏览器兜底 */
  min-height:100dvh;                /* 现代浏览器：跟真实可视区 */
}
@supports (padding:env(safe-area-inset-bottom)){
  .flow-safe-b{ padding-bottom:calc(var(--pad) + env(safe-area-inset-bottom)); }
  .flow-safe-t{ padding-top:calc(var(--pad) + env(safe-area-inset-top)); }
}

/* ---- 铺满的主容器：手机上占满整宽，平板上留出合理阅读宽度并居中 ---- */
.flow-wrap{
  width:100%;
  max-width:min(100%, var(--maxw));
  margin-inline:auto;
}

/* ---- 站内主容器「自动铺满」（白名单，只碰这些）----
   手机端不动：各页自己的手机优化继续生效
   平板及以上：把写死的 max-width（420~760px）提到流式上限，不再缩成窄条 */
/* ★ 2026-10-15 修复：加 (pointer:coarse) —— 桌面（鼠标）不再被拉宽变形，只触屏平板命中 */
@media (min-width:601px) and (pointer:coarse){
  .game-container,
  .wrap,
  .hub,
  .story-grid,
  .grade-wrap,
  .page{
    width:100%;
    max-width:min(100%, var(--maxw, 880px)) !important;
    margin-inline:auto;
  }
}

/* ---- 站内既有通用容器的「尺寸兜底」（只碰尺寸，不碰颜色/风格）----
   仅当页面引了本文件才生效 */
.flow-body > .game-container,
.flow-body > .wrap,
.flow-body > .container,
.flow-body > .page{
  width:100%;
  max-width:min(100%, var(--maxw));
  margin-inline:auto;
}

/* ---- 平板/大屏：正方形游戏画面同时听「宽」和「高」----
   为什么需要：`.canvas-wrapper` 这类容器是 width:100% + aspect-ratio:1，
   平板上铺满 → 高度也跟宽度一样大 → 必然把整页撑出屏幕。
   这里按「可视高度 − 固定开销」给它上限，画面居中，一屏就装得下 */
/* ★ 2026-10-15 修复：加 (pointer:coarse) —— 原来桌面(宽>601)也命中，
   把电脑上的画布/棋盘强压成 calc(100dvh-430px)（≈225px）→ 看着就是「按钮变形」。只触屏平板命中。 */
@media (min-width:601px) and (pointer:coarse){
  .canvas-wrapper,
  .board-wrapper,
  .field{
    max-width:min(100%, calc(100dvh - 430px));
    margin-inline:auto;
  }
}

/* ---- 平板上「高度紧」时：把通用小字行的留白压薄 ----
   为什么需要：平板宽度富余，但高度常常只比内容多一点点；
   压掉几行留白就能一屏装下，而且字号一点没动（老板视力不好，字不许变小） */
@media (min-width:601px) and (max-height:1150px) and (pointer:coarse){
  .game-title{margin-bottom:3px !important}
  .game-sub{margin-top:2px !important;margin-bottom:6px !important;line-height:1.4 !important}
  .tip, .tips, .help, .hint, .hintbar{margin-top:2px !important;margin-bottom:5px !important}
  .howto{margin:2px 0 6px !important}
  .hud, .score-board, .info-row{margin-bottom:6px !important}
  .controls, .btn-row, .tools{margin-top:6px !important}
}

/* ---- 横屏 / 矮屏（手机横屏≈390 高、平板横屏≈768 高）：高度最紧 ----
   为什么需要：这些页面是按竖屏排的，横过来高度只剩一半。
   这里只做三件事，①图例/色卡改单行横滑（省最多）②画面按可用高度收
   ③纵向留白压到最薄。**字号一律不动**（老板视力不好，字不许变小） */
/* ★ 2026-10-15 修复「电脑 Edge 里所有程序被当成手机横屏、按钮变形」：
   桌面显示器本身也是 landscape、且笔记本可视高常 <900 → 原查询在电脑上误命中。
   加 (pointer:coarse)：只有触屏设备（手机/平板）命中，鼠标桌面自动豁免。 */
@media (orientation:landscape) and (max-height:900px) and (pointer:coarse), (max-height:700px) and (pointer:coarse){
  /* ① 图例/色卡：不再一行行往下堆 */
  .legend .lg-row{
    flex-wrap:nowrap !important;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    scrollbar-width:none;
  }
  .legend .lg-row::-webkit-scrollbar{display:none}
  .legend .lg{ flex:0 0 auto; white-space:nowrap; min-height:26px; }

  /* ② 画面/棋盘：同时听「宽」和「高」，避免越宽越高 */
  .canvas-wrapper,
  .board-wrapper,
  .field{
    max-width:min(100%, calc(100dvh - 330px)) !important;
  }
  canvas{
    max-width:min(100%, calc(100dvh - 470px)) !important;
    height:auto !important;
  }

  /* ③ 留白压到最薄（只压 margin/padding，不碰字号） */
  .game-container{ padding:8px !important; border-radius:12px !important; }
  .game-title{ margin-bottom:2px !important; }
  #rulerNote{ margin-top:3px !important; margin-bottom:3px !important; }
  .game-sub{ margin:2px 0 4px !important; line-height:1.35 !important; }
  .howto{ margin:2px 0 4px !important; }
  .hud, .info-row{ margin-bottom:5px !important; }
  .legend{ margin-top:5px !important; padding:6px 9px !important; }
  .legend .lg-t{ margin:1px 0 3px !important; }
  .info{ margin-top:5px !important; }
  .btns, .controls, .btn-row, .tools{ margin-top:5px !important; }
  .home-btn{ margin-top:5px !important; }
}

/* ---- 站内习惯用的「小字/大字」工具类，跟着屏幕走 ---- */
.flow-t1{ font-size:clamp(18px, calc(1.1vw + 13.7px), 26px); }  /* 页标题 */
.flow-t2{ font-size:clamp(15px, calc(0.8vw + 12px), 20px);   }  /* 区块标题 */
.flow-p { font-size:clamp(13.5px, calc(0.5vw + 11.6px), 17px); } /* 正文 */
.flow-tap{ min-height:clamp(40px, calc(4vw + 24px), 52px); }     /* 可点热区（视力友好） */

/* ============================================================================
   2026-10-15  手机 / 平板（Edge、Chrome 等）：
   玩游戏时「按住」按钮 / 手指压在棋盘上稍久，浏览器会弹出「复制 / 刷新」等右键菜单
   （还会把按钮文字选成蓝色）。这段一次性关掉它，全站游戏页都生效，不用逐页改。
      ① user-select:none          → 长按不再把文字选蓝、不弹选择工具条
      ② -webkit-touch-callout:none → 关掉长按呼出菜单
      ③ tap-highlight 透明         → 去掉点按时的灰闪
      ④ touch-action:manipulation  → 去掉「双击缩放」带来的误触与 300ms 延迟
   范围：只到「可点控件 + 游戏卡」，普通资料页正文照旧能选中、复制。
   ============================================================================ */
button, canvas, [class*="btn"], [role="button"],
.game-container, .canvas-wrapper, .board-wrapper, .board-wrap, .board, .field {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
/* 输入框 / 可编辑区仍要能选中、编辑，别被上面的规则误伤 */
.game-container input, .game-container textarea, .game-container select,
.game-container [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
  touch-action: auto;
}