:root{color-scheme:dark;font:15px system-ui,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;background:#10191d;color:#e6e8e2}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;display:grid;grid-template-rows:32px 1fr}
header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #344145;font-size:14px}
button{font:inherit;color:inherit;background:#243b43;border:1px solid #60767c;padding:5px 14px;cursor:pointer}button:disabled{opacity:.4;cursor:default}
header button{padding:2px 12px}
/* 第五十轮 P4：舞台去掉 1280 px 上限，按视口铺到最大的 16:9（页头 32 + 上下边距 8×2 = 48）；
   多出来的像素只在「中 / 高」画质吃到（host.js 的 bufferFor 按档封顶），「低」档缓冲仍是 1280×720。黑边做成暗色渐变。 */
main{display:flex;align-items:center;justify-content:center;padding:8px;min-height:0;background:radial-gradient(ellipse at 50% 45%,#17262b 0%,#0b1316 72%)}
#stage{position:relative;width:min(calc(100vw - 16px),calc((100vh - 48px)*16/9));width:min(calc(100vw - 16px),calc((100dvh - 48px)*16/9));aspect-ratio:16/9;background:#080e11;box-shadow:0 0 0 1px #2b3b40,0 10px 40px #000000b0}
canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
/* 平台 W3：#rotor 包住画布与覆盖层。竖屏视口下 host.js 给 body 加 rotated、按 #stage 的盒子交换宽高写进 rotor，
   再整体转 90°（:fullscreen 元素的 UA 样式带 transform:none !important，所以转的是内层不是 #stage）。 */
#rotor{position:absolute;inset:0}
body.rotated #rotor{inset:auto;left:50%;top:50%;transform:translate(-50%,-50%) rotate(90deg);transform-origin:center center}
#stage:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;background:#080e11}
#stage:fullscreen canvas{width:min(100vw,calc(100vh * 16 / 9));height:auto;aspect-ratio:16/9}
/* rotor 是绝对定位容器，stage 的 flex 无法把其中的 canvas 居中；桌面全屏在内层居中留边。 */
body:not(.mobile) #stage:fullscreen #rotor{display:flex;align-items:center;justify-content:center}
/* 第五十轮 P8 首载页：主视觉铺满舞台、底部暗色渐变托住文字；内容块贴左下（与游戏内载入遮罩同一构图），
   字号随舞台宽度走（clamp），手机旋转后同样按横屏排。淡出 300 ms 后由 host.js 设 hidden。 */
#loading{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;overflow:hidden;background:#0b1316 url(TemplateData/loading-bg.jpg) center/cover no-repeat;opacity:1;transition:opacity .3s ease}
#loading::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,#080e11f2 0%,#080e11b8 34%,#080e1140 68%,#080e1120 100%)}
#loading.leaving{opacity:0;pointer-events:none}
#loading[hidden]{display:none}
#load-panel{position:relative;width:min(760px,100%);padding:0 clamp(16px,4.5vw,64px) clamp(16px,5vh,56px);display:flex;flex-direction:column;gap:clamp(6px,1.2vh,12px)}
#load-title{margin:0;font-size:clamp(28px,4.4vw,60px);font-weight:700;letter-spacing:.14em;color:#efe6d2;text-shadow:0 2px 18px #000c}
#load-subtitle{margin:0 0 clamp(6px,1.6vh,18px);font-size:clamp(11px,1.1vw,14px);letter-spacing:.42em;color:#c8a26a}
#load-bar{position:relative;height:6px;border-radius:3px;background:#27333799;box-shadow:inset 0 0 0 1px #c8a26a40;overflow:hidden}
#load-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#9c7442,#e2c083);box-shadow:0 0 10px #e2c08366;transition:width .25s linear}
#load-text{margin:0;font-size:clamp(14px,1.35vw,17px);color:#e6e8e2}
#load-detail{margin:0;min-height:1.3em;font-size:clamp(13px,1.1vw,15px);color:#aab4b1}
#load-tip{margin:clamp(4px,1vh,10px) 0 0;font-size:clamp(13px,1.1vw,15px);color:#aab4b1cc}
#load-retry{align-self:flex-start;margin-top:4px;padding:8px 28px;border-color:#c8a26a;background:#3a2f1f}
#load-retry[hidden]{display:none}
#startup-report{align-self:flex-start;font-size:13px;min-height:44px}
#startup-report[hidden],#startup-summary[hidden]{display:none}
#startup-summary{margin:0;color:#aab4b1;font-size:12px;overflow-wrap:anywhere}
#enable-music{position:absolute;right:calc(12px + env(safe-area-inset-right));top:calc(12px + env(safe-area-inset-top));z-index:5;min-height:44px;font-size:14px;background:#243b43eb}
#enable-music[hidden]{display:none}
#storage-status{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);max-width:90vw;padding:10px 16px;background:#392d1d;border:1px solid #bc9257;z-index:2}
#retry-storage{margin-left:12px}
#start-gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#10191dee;z-index:3}
#start-gate[hidden]{display:none}
#start-button{padding:14px 40px;font-size:18px}
#start-hint{max-width:80%;text-align:center;opacity:.75;font-size:13px}
#home-hint{max-width:80%;text-align:center;font-size:13px;color:#f4d27a}
#home-hint[hidden]{display:none}
/* 真机诊断层（?diag=1）：给没有远程调试手段的手机截图用，不抢触点。 */
#diag{position:absolute;left:calc(8px + env(safe-area-inset-left));top:calc(8px + env(safe-area-inset-top));z-index:4;margin:0;padding:6px 8px;max-width:70%;font:11px/1.35 ui-monospace,Menlo,Consolas,monospace;white-space:pre-wrap;word-break:break-all;color:#d7f3d0;background:#000000b3;pointer-events:none;user-select:text;-webkit-user-select:text}
#diag[hidden]{display:none}
/* 手机 / 平板浏览器（平台 W2）：判定见 host.js 的 deviceFlags 与 C# 的 BrowserDeviceProbe。
   去掉 16:9 硬约束与页头，画布铺满安全区；竖屏同样放开，HUD 由 CombatHudLayoutSolver 的 Portrait 分支承担。 */
/* height 必须是确定值：body 只有 min-height 时 1fr 轨道会按 canvas 固有 16:9 撑高（iPhone 横屏 734×343 视口被撑到 413，页面可滚、
   底部摇杆被切）；main 的 min-height:0 去掉网格项按内容算的最小高度。全屏路径由 :fullscreen 的 UA 尺寸兜住，
   但 iPhone Safari 不支持 div 全屏，真机走的正是这条非全屏路径（W2 复核实测）。 */
body.mobile{height:100vh;height:100dvh;grid-template-rows:1fr;overscroll-behavior:none;touch-action:none;user-select:none;-webkit-user-select:none}
body.mobile header{display:none}
body.mobile main{min-height:0;overflow:hidden;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body.mobile #stage{width:100%;height:100%;aspect-ratio:auto}
body.mobile #storage-status{bottom:calc(12px + env(safe-area-inset-bottom));max-width:min(90vw,420px)}
/* 桌面全屏按 16:9 居中留边；手机屏多为 19.5:9 ~ 21:9，按 16:9 letterbox 会白扔两侧 17% 宽度，
   HUD 求解器本就按任意宽高比排版，这里让画布铺满。 */
body.mobile #stage:fullscreen{width:100%;height:100%}
body.mobile #stage:fullscreen canvas{width:100%;height:100%;aspect-ratio:auto}