/* =============================================================================
   impenetrablewall —— 界面样式
   明度策略：亮底（沙盘作战图纸）。对比来自「阴影与材质」，不是发光。
   本文件**只有静止的构图与材质**：全文没有 @keyframes / transition / animation，
   也没有 :hover 引起的位移 —— 所有随时间变化的东西都由 70-boot.js 的常驻主循环
   逐帧写入（opacity / transform / filter）。tools/smoke.mjs 会断言这一点。
   ========================================================================== */

:root{
  /* 亮底：纸面与油墨。最亮 #F7F0DC，最暗 #221C14 */
  --paper:      #EFE3C8;
  --paper-hi:   #F7F0DC;
  --paper-mid:  #E3D4B4;
  --paper-lo:   #D2C09B;
  --ink:        #221C14;
  --ink-2:      #4A3F2E;
  --ink-3:      #7A6B52;
  --rule:       rgba(34,28,20,.34);
  --rule-soft:  rgba(34,28,20,.16);
  --ally:       #26615E;   /* 青墨：己方 */
  --hostile:    #B3402A;   /* 锈红：敌方 / 危险 */
  --brass:      #9A7420;   /* 黄铜：指挥所与勋章 */
  --paper-tex:  none;      /* 由 00-core.js 现场生成的纸纤维（程序化，无外部素材） */
  --shadow-1:   0 1px 0 rgba(34,28,20,.10), 0 6px 14px -8px rgba(34,28,20,.45);
  --shadow-2:   0 2px 0 rgba(34,28,20,.12), 0 14px 28px -12px rgba(34,28,20,.55);
  --font-num:   "Bahnschrift","DIN Alternate","Cascadia Mono",ui-monospace,Consolas,monospace;
  --font:       "Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  --font-slab:  "Zhi Mang Xing","STKaiti","KaiTi",Georgia,"Songti SC",serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; background:var(--paper); }
body{
  font-family:var(--font);
  color:var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}
button{ font-family:var(--font); color:inherit; border:0; background:none; padding:0; cursor:pointer; }
code{ font-family:var(--font-num); background:rgba(34,28,20,.07); padding:1px 5px; border-radius:3px; }

/* ---------------------------------------------------------------- 冷启动骨架 */
#boot{
  position:fixed; inset:0; z-index:60; overflow:hidden;
  background:
    linear-gradient(0deg, var(--paper-lo), var(--paper) 42%, var(--paper-hi));
  background-image:var(--paper-tex), linear-gradient(0deg,var(--paper-lo),var(--paper) 42%,var(--paper-hi));
  display:flex; align-items:center; justify-content:center;
}
.boot-grid{
  position:absolute; inset:-10%;
  background-image:
    repeating-linear-gradient(0deg, var(--rule-soft) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, var(--rule-soft) 0 1px, transparent 1px 34px);
}
.boot-sheet{
  position:relative; width:min(78vw,420px); padding:26px 22px 20px;
  background-image:var(--paper-tex), linear-gradient(160deg,var(--paper-hi),var(--paper-mid));
  box-shadow:var(--shadow-2); border:1px solid var(--rule);
  text-align:center;
}
.boot-stamp{
  position:absolute; top:-12px; right:-10px; width:64px; height:64px; line-height:60px;
  border:2px solid var(--hostile); color:var(--hostile); border-radius:50%;
  font-family:var(--font-slab); font-size:22px; letter-spacing:2px;
  box-shadow:inset 0 0 0 3px rgba(179,64,42,.16);
}
.boot-title{
  /* 名字是一个 15 字母的单词：用等宽那一档、字号按视口缩放，保证一行放得下 */
  font-family:var(--font-num); font-weight:600; font-size:clamp(16px,4.6vw,28px);
  letter-spacing:.04em; line-height:1.15; word-break:break-all;
}
.boot-sub{ font-family:var(--font-num); font-size:11px; letter-spacing:2.4px; color:var(--ink-3); margin-top:6px; }
.boot-note{ margin-top:20px; font-size:13px; color:var(--ink-2); }
.boot-bar{ margin-top:10px; height:4px; background:var(--rule-soft); }
.boot-bar i{ display:block; height:100%; width:0%; background:var(--ink-2); }
.boot-tip{ margin-top:20px; font-size:11px; color:var(--ink-3); line-height:1.7; }

/* ------------------------------------------------------------------- 画布层 */
#stage{ position:fixed; inset:0; }
#stage canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
#gl{ pointer-events:none; }
#ui{ position:fixed; inset:0; pointer-events:none; }
/* 顶栏永远可点（它在所有页面之上）；页面与浮层的可点性由 JS 按进度逐帧写入，
   这里不再给 button 一条 blanket 规则 —— 那会让隐形的页面也接收点击。 */
#chrome{ pointer-events:auto; }

/* --------------------------------------------------------------- 全局顶栏 */
#chrome{
  position:absolute; top:0; left:0; right:0; height:46px;
  display:flex; align-items:center; gap:8px; padding:0 10px;
  background-image:var(--paper-tex), linear-gradient(180deg, rgba(247,240,220,.94), rgba(227,212,180,.72));
  border-bottom:1px solid var(--rule); box-shadow:var(--shadow-1);
}
.chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:12px; padding:6px 10px; border:1px solid var(--rule); border-radius:3px;
  background-image:var(--paper-tex), linear-gradient(180deg, rgba(247,240,220,.96), rgba(214,199,168,.9));
  box-shadow:var(--shadow-1);
}
.chip .chev{ font-style:normal; font-size:15px; line-height:1; }
#chrome-mid{ flex:1; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; color:var(--ink-2); }
.chrome-dot{ color:var(--ink-3); }
#chrome-score{ font-size:14px; }
.num{ font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:.5px; }

/* ---------------------------------------------- 广告：运行态徽标 / 位点按钮 / 自检面板 */
.adbadge{
  font-family:var(--font-num); font-size:10px; letter-spacing:.6px; padding:3px 7px; border-radius:2px;
  border:1px solid var(--rule); background:rgba(247,240,220,.7); color:var(--ink-2); white-space:nowrap;
}
.adbadge[data-mode="real"]{ border-color:var(--ally); color:var(--ally); background:rgba(38,97,94,.10); }
.adbadge[data-mode="hold"]{ border-color:var(--brass); color:var(--brass); background:rgba(154,116,32,.10); }
.adbadge[data-mode="demo"]{ border-color:var(--hostile); color:var(--hostile); background:rgba(179,64,42,.10); }
.adtool{ border-style:solid; border-color:var(--ally); color:var(--ally); }
.adbtn{ border-color:rgba(38,97,94,.55); }
.adpanel{
  border-top:1px solid var(--rule); padding-top:8px; display:flex; flex-direction:column; gap:5px;
  font-size:11px; max-height:44%; overflow:hidden;
}
.adh{ font-family:var(--font-num); font-size:10px; letter-spacing:1px; color:var(--ink-3); }
.adh2{ font-size:10.5px; color:var(--ink-3); margin-top:4px; letter-spacing:.6px; }
.adrows{ display:flex; flex-direction:column; gap:3px; }
.adrow{ display:flex; justify-content:space-between; gap:8px; line-height:1.45; }
.adrow span{ color:var(--ink-2); flex:1; }
.adrow span i{ font-style:normal; color:var(--ink-3); font-size:10px; }
.adrow b{ font-family:var(--font-num); font-size:10.5px; color:var(--ink); text-align:right; white-space:nowrap; }
.adrow.bad b{ color:var(--hostile); }
.adrow.bad span{ color:var(--hostile); }
.adrow.good b{ color:var(--ally); }
.adwarn{ color:var(--hostile); font-size:10.5px; line-height:1.5; border-left:3px solid var(--hostile); padding-left:6px; }
.adact{ display:flex; gap:8px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.seg-btn{
  font-size:11px; padding:5px 9px; border:1px solid var(--rule); border-radius:3px; color:var(--ink-2);
  background-image:var(--paper-tex), linear-gradient(180deg, var(--paper-hi), var(--paper-mid));
}
.adtip{ font-size:9.5px; color:var(--ink-3); flex:1; line-height:1.5; }

/* ------------------------------------------------------------------ 页面容器 */
#pages{ position:absolute; inset:46px 0 0; }
.page{ position:absolute; inset:0; padding:12px; opacity:0; pointer-events:none; will-change:opacity,transform; }

/* ================================ 主菜单 ================================ */
.menu{ height:100%; display:flex; flex-direction:column; gap:8px; }
.menu-head{ padding:6px 6px 0; }
.menu-title-row{ display:flex; align-items:center; gap:12px; }
.menu-title{
  margin:0; font-family:var(--font-num); font-weight:600;
  font-size:clamp(19px,5.4vw,42px); letter-spacing:.03em; line-height:1.05;
  word-break:break-word; max-width:calc(100% - 60px);
}
.seal{
  width:44px; height:44px; line-height:40px; text-align:center; border-radius:50%;
  border:2px solid var(--hostile); color:var(--hostile); font-family:var(--font-slab); font-size:20px;
  box-shadow:inset 0 0 0 3px rgba(179,64,42,.15);
}
.menu-sub{ margin:6px 0 0 4px; font-size:12.5px; color:var(--ink-2); letter-spacing:1.6px; }
.menu-line{
  margin:6px 0 0 4px; font-size:12px; color:var(--ink-3);
  border-left:3px solid var(--ink-3); padding-left:8px;
}
/* 主视觉：透明区块，让沙盘世界层透出来（占屏高 1/3 以上） */
.menu-mid{ position:relative; flex:1 1 40%; min-height:34vh; }
.menu-tag{
  position:absolute; left:6px; top:6px; font-size:11px; letter-spacing:1px;
  padding:3px 8px; border:1px solid var(--rule); color:var(--ink-2);
  background-image:var(--paper-tex), rgba(247,240,220,.78);
  transform:rotate(-1.6deg);
}
.menu-hint{ position:absolute; right:6px; bottom:20px; font-size:10.5px; color:var(--ink-3); }
.menu-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:6px;
  padding:8px 6px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.stat{ display:flex; flex-direction:column; gap:2px; }
.stat b{ font-size:19px; font-weight:600; }
.stat b i{ font-style:normal; font-size:11px; color:var(--ink-3); }
.stat span{ font-size:10.5px; color:var(--ink-3); letter-spacing:.6px; }
.menu-actions{ padding:0 6px 6px; display:flex; flex-direction:column; gap:8px; }

.btn{
  position:relative; text-align:center; border:1px solid var(--rule); border-radius:4px;
  background-image:var(--paper-tex), linear-gradient(180deg, var(--paper-hi), var(--paper-mid));
  box-shadow:var(--shadow-1); overflow:hidden;
}
.btn-primary{
  padding:12px 14px; display:flex; flex-direction:column; gap:3px; align-items:center;
  border-color:rgba(34,28,20,.55);
}
.btn-primary b{ font-size:19px; letter-spacing:3px; }
.btn-primary span{ font-size:11px; color:var(--ink-3); letter-spacing:1px; }
.btn-primary.sm{ padding:9px 16px; font-size:13px; letter-spacing:2px; }
.btn-mid{ padding:10px 12px; font-size:13.5px; letter-spacing:2px; }
.menu-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-tools{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.tool{
  font-size:11px; color:var(--ink-2); padding:5px 9px; border:1px dashed var(--rule);
  border-radius:3px; background:rgba(247,240,220,.5);
}
#m-supply{ border-style:solid; border-color:var(--brass); color:var(--brass); }

/* ============================== 游戏说明页 ============================== */
.howto{ height:100%; display:flex; flex-direction:column; gap:6px; padding:4px 6px; }
.howto-head{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; overflow:hidden; }
.howto-head h2{ margin:0; font-size:16px; letter-spacing:2px; font-family:var(--font-slab); white-space:nowrap; }
.howto-chips{ display:flex; gap:4px; flex-wrap:nowrap; }
.howto-chips i{
  font-style:normal; font-size:9.5px; padding:2px 5px; border:1px solid var(--rule-soft);
  border-radius:2px; color:var(--ink-3); white-space:nowrap;
}
.howto-chips i.on{ border-color:var(--ink-2); color:var(--ink); background:rgba(34,28,20,.06); }
.howto-stage{ position:relative; flex:0 0 34vh; min-height:190px; }
.howto-cap{
  position:absolute; left:2px; top:0; font-size:11px; letter-spacing:1px; color:var(--ink-2);
  border-left:3px solid var(--hostile); padding-left:7px; background:rgba(247,240,220,.72);
}
.howto-lines{ flex:1; display:flex; flex-direction:column; gap:7px; padding-top:4px; overflow:hidden; }
.hline{ display:flex; gap:8px; font-size:12.5px; line-height:1.55; color:var(--ink-2); }
.hline em{
  font-style:normal; font-family:var(--font-num); font-size:11px; color:var(--paper);
  background:var(--ink-2); border-radius:2px; padding:1px 5px; height:16px; line-height:14px;
  flex:0 0 auto; margin-top:1px;
}
.hline.hot{ color:var(--ink); }
.howto-foot{ display:grid; grid-template-columns:1fr 1.2fr; gap:8px; }

/* =============================== 游戏界面 =============================== */
.hud{
  position:absolute; top:6px; left:8px; right:8px; display:flex; justify-content:space-between;
  pointer-events:none; font-size:11px;
}
.hud-col{ display:flex; flex-direction:column; gap:5px; }
.hud-col.right{ align-items:flex-end; }
.hud-row{ display:flex; align-items:center; gap:6px; }
.hud-row.right{ justify-content:flex-end; }
.hud-label{ color:var(--ink-3); font-size:10.5px; letter-spacing:1px; }
.ticks{ display:grid; grid-template-columns:repeat(10,6px); gap:3px; }
.ticks i{ width:6px; height:6px; background:var(--ink-2); opacity:.85; display:block; }
.ticks i.gone{ background:transparent; box-shadow:inset 0 0 0 1px var(--rule); }
.hud-lives{ font-size:17px; }
.hud-score{ font-size:19px; }
.hud-life-icons{ display:flex; gap:3px; }
.hud-life-icons i{ width:9px; height:7px; background:var(--ally); display:block; border-radius:1px; }
.bar{ width:74px; height:6px; border:1px solid var(--rule); background:rgba(34,28,20,.06); }
.bar i{ display:block; height:100%; width:0%; background:var(--ally); }
.bar.steel i{ background:var(--brass); }
.pad{ position:absolute; left:0; right:0; bottom:0; height:38%; pointer-events:none; }
.stick{
  position:absolute; left:18px; bottom:22px; width:126px; height:126px; border-radius:50%;
  border:1.5px solid var(--rule); background-image:var(--paper-tex), radial-gradient(circle at 40% 34%, rgba(247,240,220,.5), rgba(210,192,155,.34));
  pointer-events:auto;
}
.stick-ring{ position:absolute; inset:16px; border:1px dashed var(--rule-soft); border-radius:50%; }
.stick-knob{
  position:absolute; left:50%; top:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  border:1.5px solid var(--ink-2); background-image:var(--paper-tex), linear-gradient(180deg,var(--paper-hi),var(--paper-mid));
  box-shadow:var(--shadow-1);
}
.stick-hint{ position:absolute; left:0; right:0; bottom:-16px; text-align:center; font-size:10px; color:var(--ink-3); }
.fire{
  position:absolute; right:20px; bottom:30px; width:104px; height:104px; border-radius:50%;
  border:2px solid rgba(179,64,42,.7); pointer-events:auto;
  background-image:var(--paper-tex), radial-gradient(circle at 42% 36%, var(--paper-hi), var(--paper-mid));
  box-shadow:var(--shadow-2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
}
.fire-core{ font-size:17px; letter-spacing:3px; color:var(--hostile); }
.fire-key{ font-size:9px; color:var(--ink-3); font-family:var(--font-num); }

/* =============================== 战功册 =============================== */
.records, .settings{
  /* 纸面留出纸边：既像「贴在图纸上的一张纸」，也让遮罩擦除转场看得见 */
  margin:10px auto 6px; width:100%; max-width:min(520px, 88%); max-height:calc(100% - 16px); overflow:hidden;
  padding:14px 14px 16px; display:flex; flex-direction:column; gap:10px;
  /* 面板本身就写成「图纸上贴的一张纸」：内容要压得住背后还在动的沙盘 */
  background-image:var(--paper-tex), linear-gradient(180deg, rgba(247,240,220,.95), rgba(230,216,187,.93));
  border:1px solid var(--rule); box-shadow:var(--shadow-1);
}
.records-head h2, .settings h2{ margin:0; font-size:19px; letter-spacing:4px; font-family:var(--font-slab); }
.records-sub{ margin:4px 0 0; font-size:11.5px; color:var(--ink-3); }
.records-list{ display:flex; flex-direction:column; gap:6px; }
.rrow{
  display:grid; grid-template-columns:26px 1fr auto auto; gap:8px; align-items:center;
  border:1px solid var(--rule-soft); background-image:var(--paper-tex), rgba(247,240,220,.6);
  padding:7px 9px; font-size:12px;
}
.rrow .rn{ font-family:var(--font-num); color:var(--ink-3); }
.rrow .rname{ letter-spacing:1px; }
.rrow .rstars{ display:flex; gap:3px; }
.rrow .rstars i{ width:11px; height:11px; }
.rrow .rscore{ font-family:var(--font-num); font-size:12px; color:var(--ink-2); }
.rrow.on{ border-color:var(--rule); box-shadow:var(--shadow-1); }
.records-total{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; border-top:1px solid var(--rule); padding-top:8px; }
.rt{ display:flex; flex-direction:column; gap:2px; }
.rt b{ font-size:16px; }
.rt span{ font-size:10px; color:var(--ink-3); }
.records-medals{ display:flex; gap:8px; flex-wrap:wrap; }
.medal{
  width:52px; height:52px; border-radius:50%; border:2px solid var(--brass);
  background-image:radial-gradient(circle at 38% 32%, var(--paper-hi), var(--paper-lo));
  box-shadow:var(--shadow-1); display:flex; align-items:center; justify-content:center;
  font-family:var(--font-slab); font-size:17px; color:var(--brass);
}
.medal.off{ border-color:var(--rule-soft); color:var(--rule); box-shadow:none; }

/* ================================ 设置 ================================ */
.set-list{ display:flex; flex-direction:column; gap:8px; }
.set-row{
  display:flex; align-items:center; gap:10px; font-size:12.5px;
  border-bottom:1px dashed var(--rule-soft); padding-bottom:8px;
}
.set-row .sl{ flex:1; color:var(--ink-2); }
.set-row .sv{ font-family:var(--font-num); font-size:11.5px; color:var(--ink-3); min-width:58px; text-align:right; }
.toggle{ width:46px; height:24px; border:1px solid var(--rule); border-radius:12px; background:rgba(34,28,20,.08); position:relative; }
.toggle i{ position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background-image:linear-gradient(180deg,var(--paper-hi),var(--paper-mid)); border:1px solid var(--rule); box-shadow:var(--shadow-1); }
.seg{ display:flex; border:1px solid var(--rule); border-radius:3px; overflow:hidden; }
.seg button{ font-size:11px; padding:5px 9px; border-right:1px solid var(--rule-soft); }
.seg button:last-child{ border-right:0; }
.seg button.on{ background:rgba(34,28,20,.10); color:var(--ink); }
.set-note{ font-size:10.5px; color:var(--ink-3); line-height:1.7; margin-top:auto; }

/* 界面层的擦除遮罩：盖住页面（但让顶栏留在上面），形状由 JS 每帧写 clip-path */
#wipe{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background-image:var(--paper-tex), linear-gradient(160deg, #D8C7A1, #C2AE86);
  box-shadow:inset 0 0 0 2px rgba(34,28,20,.35);
}
#wipe i{ display:block; height:12.5%; background-image:var(--paper-tex); }
#wipe i:nth-child(even){ background-color:rgba(34,28,20,.05); }

/* ================================ 浮层 ================================ */
#overlays{ position:absolute; inset:0; pointer-events:none; }
.ov{ position:absolute; inset:0; opacity:0; pointer-events:none; }
.ov[data-ov="pause"], .ov[data-ov="result"]{ display:flex; align-items:center; justify-content:center; }
.ov[data-ov="result"]{ align-items:flex-start; padding-top:16vh; }
.card{
  width:min(86vw,360px); padding:16px 16px 14px; position:relative;
  border:1px solid var(--rule);
  background-image:var(--paper-tex), linear-gradient(170deg, var(--paper-hi), var(--paper-mid));
  box-shadow:var(--shadow-2);
}
.card-stamp{
  position:absolute; top:-10px; left:14px; font-size:11px; letter-spacing:3px; padding:2px 9px;
  border:1.5px solid var(--hostile); color:var(--hostile); background:var(--paper-hi);
  transform:rotate(-2deg);
}
.card-title{ margin:6px 0 4px; font-size:18px; letter-spacing:3px; }
.card-body{ font-size:12px; color:var(--ink-2); line-height:1.6; }
.card-actions{ margin-top:14px; display:flex; flex-direction:column; gap:8px; }
.result-stars{ display:flex; gap:8px; margin:8px 0 4px; }
.result-stars i{ width:26px; height:26px; display:block; }
.result-rows{ margin-top:10px; display:flex; flex-direction:column; gap:4px; font-size:11.5px; color:var(--ink-2); }
.result-rows .rr{ display:flex; justify-content:space-between; border-bottom:1px dotted var(--rule-soft); }
.result-card.win .card-stamp{ border-color:var(--ally); color:var(--ally); }

/* 提示浮层：能被忽略、不夺焦、排队出现（§4.4） */
.ov[data-ov="tips"]{ display:flex; align-items:flex-end; justify-content:center; padding-bottom:34%; }
.tips{ display:flex; flex-direction:column; gap:6px; align-items:center; width:100%; }
.tip{
  max-width:86vw; font-size:11.5px; padding:6px 12px; color:var(--ink);
  border:1px solid var(--rule); border-left:3px solid var(--hostile);
  background-image:var(--paper-tex), rgba(247,240,220,.92);
  box-shadow:var(--shadow-1); pointer-events:none;
}
.tip.good{ border-left-color:var(--ally); }

/* 引导浮层：指向性动效（连线 + 脉动），可跳过 */
.ov[data-ov="guide"]{ }
.guide-lines{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.guide-card{
  position:absolute; left:50%; top:54%; transform:translateX(-50%);
  padding:9px 14px; font-size:12.5px; border:1px solid var(--rule);
  background-image:var(--paper-tex), rgba(247,240,220,.95); box-shadow:var(--shadow-1);
}
.guide-skip{ position:absolute; right:6px; top:-24px; font-size:10.5px; color:var(--ink-3); pointer-events:auto; }

/* ------------------------------------------------- 宽屏（≥ 8/7 宽高比）：两栏，沙盘吃一大块面板
   相机是读这些窗口的矩形来摆沙盘的（见 30-game.js 的 viewport），
   所以窗口给多大，盘面就有多大 —— 宽屏上不再是一小块飘在空白纸中央。 */
@media (min-aspect-ratio: 8/7){
  .page{ padding:14px 34px; }
  .menu{
    max-width:none; height:100%;
    display:grid; gap:10px 20px;
    grid-template-columns:minmax(300px,400px) 1fr;
    grid-template-rows:auto 1fr auto;
    align-items:start;
  }
  .menu-head{ grid-column:1; grid-row:1; padding-top:4px; }
  .menu-mid{ grid-column:2; grid-row:1 / span 3; min-height:0; height:100%; }
  .menu-stats{ grid-column:1; grid-row:2; align-self:end; max-width:none; }
  .menu-actions{ grid-column:1; grid-row:3; align-self:end; max-width:none; padding-bottom:0; }
  .menu-title{ font-size:clamp(22px,2.6vw,38px); max-width:none; }
  .menu-hint{ right:auto; left:6px; }
  .howto{
    max-width:none; height:100%;
    display:grid; gap:10px 20px;
    grid-template-columns:minmax(300px,420px) 1fr;
    grid-template-rows:auto 1fr auto;
  }
  .howto-head{ grid-column:1 / -1; grid-row:1; }
  .howto-stage{ grid-column:2; grid-row:2 / span 2; flex:none; min-height:0; height:100%; }
  .howto-lines{ grid-column:1; grid-row:2; overflow:visible; }
  .howto-foot{ grid-column:1; grid-row:3; align-self:end; }
  .records, .settings{ max-width:620px; }
  .stick{ left:24px; bottom:26px; width:132px; height:132px; }
  .fire{ right:28px; bottom:34px; width:112px; height:112px; }
  .ov[data-ov="tips"]{ padding-bottom:20%; }
}