/**
 * 「低空泰州」互动小游戏 — 页面外壳样式（蓝色科技版，2026.10.9 P3）
 *
 * 为什么单独一份、不复用 /assets/game_shell.css：
 *   游艺频道那份是「书院风」（宣纸/水乡绿、楷体），而本组游戏属「低空泰州」
 *   无人机专题（深蓝/天蓝科技标语体系）。混用会让专题里的游戏页看起来是另一个站。
 *   所以这里复制同一套 DOM 契约、只换配色与字体 —— 外壳脚本（lx_game_shell_v3.js）零改动。
 *
 * 🔴 DOM 契约必须与 lx_game_shell_v3.js 一致（少一个 id 外壳就写不进去）：
 *   #gLvName #gTime>#gTimeVal #gRulesBtn
 *   #gBar（空容器） #cv #gTargetTip
 *   #gLevels（空容器） #gRules（空容器）
 *   #gMask > #gResultTitle #gStars #gScore #gAgain #gNext .g-tip
 *
 * 🔴 引用顺序（不能反）：/assets/style.css → 本文件 → /assets/game_mobile.css
 */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; background: #e6f0fa; font-family: system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif; }

.g-app { display: flex; flex-direction: column; align-items: center; }
.g-app > * { flex-shrink: 0; }
.main-layout { grid-template-columns: 180px 1fr; }
@media (max-width: 767px) { .main-layout { grid-template-columns: 1fr; } }

/* 顶栏 */
.g-top { width: 100%; max-width: 640px; background: linear-gradient(180deg, #0a3f78, #062b52); color: #eaf4ff; padding: 8px 14px 10px; display: flex; align-items: center; gap: 10px; box-shadow: 0 2px 10px rgba(6,43,82,.25); }
.g-back { color: #eaf4ff; text-decoration: none; font-size: calc(20px * var(--fs-scale, 1.1)); width: 32px; text-align: center; flex-shrink: 0; }
.g-title { font-size: calc(16px * var(--fs-scale, 1.1)); letter-spacing: 1px; font-weight: 700; }
.g-sub { font-size: calc(11px * var(--fs-scale, 1.1)); color: #9ec9f2; margin-top: 2px; }
.g-top-right { margin-left: auto; font-size: calc(12px * var(--fs-scale, 1.1)); color: #c3ddf7; white-space: nowrap; }
.g-time { flex-shrink: 0; font-size: calc(12px * var(--fs-scale, 1.1)); color: #c3ddf7; letter-spacing: 1px; white-space: nowrap; }
.g-time b { font-weight: 700; }
.g-time.low, .g-time.low b { color: #ff9a7a; }
.g-rules-btn { flex-shrink: 0; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.12); color: #eaf4ff; border-radius: 14px; padding: 3px 10px; font-size: calc(11.5px * var(--fs-scale, 1.1)); font-family: inherit; cursor: pointer; }

/* 状态栏 */
.g-bar { width: 100%; max-width: 640px; background: #f2f8ff; border-bottom: 1px solid #cfe2f6; padding: 7px 14px; display: flex; align-items: center; gap: 14px; font-size: calc(13px * var(--fs-scale, 1.1)); color: #24507f; overflow-x: auto; white-space: nowrap; }
.g-bar .b-item { display: flex; align-items: center; gap: 4px; }
.g-bar .b-val { color: #0a57aa; font-weight: 700; min-width: 22px; text-align: center; }

/* 画布舞台 */
.g-stage { width: 100%; max-width: 640px; flex: 1; display: flex; align-items: center; justify-content: center; background: #e6f0fa; position: relative; min-height: 0; }
#cv { display: block; max-width: 100%; max-height: 100%; touch-action: none; border-radius: 6px; }
.g-target { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); background: rgba(6,43,82,.86); color: #eaf4ff; font-size: calc(13px * var(--fs-scale, 1.1)); padding: 5px 14px; border-radius: 16px; letter-spacing: .5px; white-space: nowrap; z-index: 5; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }

/* 结算弹窗 */
.g-mask { position: fixed; inset: 0; background: rgba(6,30,58,.62); display: none; align-items: center; justify-content: center; z-index: 100; }
.g-mask.show { display: flex; }
.g-panel { background: linear-gradient(180deg, #f7fbff, #e4efff); border: 2px solid #6fa8e0; border-radius: 16px; width: 84%; max-width: 340px; padding: 24px 20px 20px; text-align: center; box-shadow: 0 12px 34px rgba(6,43,82,.4); }
.g-panel h2 { color: #0a3f78; font-size: calc(23px * var(--fs-scale, 1.1)); letter-spacing: 2px; margin-bottom: 8px; }
.g-stars { font-size: calc(40px * var(--fs-scale, 1.1)); letter-spacing: 8px; margin: 8px 0; color: #f5a623; }
.g-stars .off { filter: grayscale(1); opacity: .3; }
.g-score { color: #24507f; font-size: calc(14.5px * var(--fs-scale, 1.1)); margin-bottom: 14px; line-height: 1.75; }
.g-btns { display: flex; gap: 10px; justify-content: center; }
.g-btn { flex: 1; padding: 10px 0; border: 1px solid #6fa8e0; background: #f7fbff; color: #0a57aa; font-size: calc(15px * var(--fs-scale, 1.1)); font-family: inherit; border-radius: 9px; cursor: pointer; letter-spacing: 1px; }
.g-btn.main { background: linear-gradient(180deg, #1d7ee0, #0a57aa); color: #f7fbff; border-color: #0a57aa; }
.g-btn:active { opacity: .82; }
.g-tip { font-size: calc(12px * var(--fs-scale, 1.1)); color: #4a729e; margin-top: 12px; line-height: 1.7; }
.g-tip a { color: #0a57aa; }

/* 关卡条 */
.g-levels { width: 100%; max-width: 640px; background: #f2f8ff; border-top: 1px solid #cfe2f6; padding: 8px 10px; display: flex; gap: 8px; overflow-x: auto; }
.g-lv { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; border: 1px solid #b8d4ef; background: #f7fbff; color: #0a57aa; font-size: calc(12px * var(--fs-scale, 1.1)); font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.g-lv.cur { background: #0a57aa; color: #f7fbff; border-color: #0a57aa; }
.g-lv.done { background: #dff3e6; border-color: #56a06e; color: #2f7a4a; }
.g-lv.locked { background: #eaeef3; border-color: #d6dde5; color: #9aa7b4; cursor: not-allowed; }
.g-levels::-webkit-scrollbar { display: none; }

/* 得分规则公示栏 */
.g-rules { width: 100%; max-width: 640px; background: #f2f8ff; border-top: 1px solid #cfe2f6; padding: 9px 14px 11px; font-size: calc(12px * var(--fs-scale, 1.1)); color: #4a729e; line-height: 1.9; }
.g-rules b { color: #0a57aa; }
.g-rules .r-line { display: flex; gap: 6px; }
.g-rules .r-k { flex-shrink: 0; color: #0a57aa; font-weight: 700; }

/* 画布按视口收缩（手机端 /assets/game_mobile.css 会盖掉，属预期） */
.g-stage { flex: 0 0 auto; }
#cv { max-height: max(360px, calc(100vh - 420px)); }
@media (max-width: 767px) { #cv { max-height: max(320px, calc(100vh - 436px)); } }

/* 规则浮层（手机端由 /assets/game_mobile.js 调用，桌面直接展开 .g-rules） */
.g-rules.fold { display: none; }
.g-rules.fold.open { display: block; }

/* 专题联动提示（三个游戏页共用，见 includes/lowalt_game_shell.php） */
.lo-note { width: 100%; max-width: 640px; background: #eaf4ff; border-top: 1px solid #cfe2f6; border-bottom: 1px solid #cfe2f6;
  padding: 8px 14px; font-size: calc(12px * var(--fs-scale, 1.1)); color: #24507f; line-height: 1.7; }
.lo-note b { color: #0a57aa; }
.lo-note a { color: #0a57aa; text-decoration: none; white-space: nowrap; }