/* 横屏手机：整屏铺满、不留黑边 (允许拉伸)。舞台 = 整个视口；所有贴美术的 UI 都按视口百分比定位 → 与拉伸后的背景始终对齐 */
  :root{--gw:100vw; --gh:100vh;}
  html,body{margin:0;height:100%;background:#1a1410;overflow:hidden;font-family:Consolas,Menlo,monospace;color:#eee;}
  #wrap{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
  /* 画布拉伸铺满整个视口 (内部分辨率仍 1280×720；点击映射按 x/y 各自缩放，不受拉伸影响) */
  canvas{background:#2a2018;image-rendering:pixelated;image-rendering:crisp-edges;cursor:crosshair;
         width:100vw;height:100vh;
         touch-action:none;}
  #hud{position:fixed;top:10px;left:10px;font-size:16px;line-height:1.5;text-shadow:1px 1px 0 #000;pointer-events:none;user-select:none;}
  #hint{position:fixed;bottom:10px;left:10px;font-size:14px;opacity:.72;text-shadow:1px 1px 0 #000;pointer-events:none;}
  body.touch #hint{display:none;}   /* 触屏设备不需要键位提示条 */
  /* overlay 铺满整个视口；大厅按钮(position:fixed)按视口百分比定位，背景 object-fit:fill 也铺满 → 任意比例都对齐、无黑边 */
  #overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.75);font-size:28px;flex-direction:column;gap:16px;text-align:center;z-index:200;}
  #overlay button{font:inherit;padding:10px 22px;background:#c4453a;color:#fff;border:0;cursor:pointer;letter-spacing:2px;}
  #overlay button:hover{background:#e25448;}
  .small{font-size:17px;opacity:.85;}

  /* 主菜单模式：用 主菜单.webp 当背景 + play按钮.webp 当开始按钮 */
  #overlay.menu{background:#000;padding:0;gap:0;}
  #overlay.menu #menuBg{position:absolute;inset:0;width:100%;height:100%;
                        object-fit:fill;image-rendering:pixelated;
                        image-rendering:crisp-edges;user-select:none;pointer-events:none;}
  #overlay.menu #playBtn{position:absolute;left:50%;bottom:8%;
                         transform:translateX(-50%);
                         width:min(calc(var(--gw)*0.36),420px);height:auto;cursor:pointer;
                         image-rendering:pixelated;image-rendering:crisp-edges;
                         filter:drop-shadow(0 6px 0 rgba(0,0,0,.6));
                         transition:transform .12s ease;user-select:none;}
  #overlay.menu #playBtn:hover{transform:translateX(-50%) scale(1.07);}
  #overlay.menu #playBtn:active{transform:translateX(-50%) scale(0.98);}

  /* 选关界面 (分章节翻页) */
  /* 横屏手机：选关整体可滚动(safe center→不裁切)，所有尺寸 clamp 随屏缩放，恒 5 列 (横屏永远够宽) */
  /* 顶部对齐 + 可滚动 (避免 center+overflow 的裁切/不能滚 bug)；各行 flex-shrink:0 不被压扁 */
  #overlay.select{background:rgba(10,8,14,0.97);justify-content:flex-start;align-items:center;overflow-y:auto;padding:clamp(8px,2vh,20px) clamp(8px,2vw,20px);gap:0;}
  #overlay.select > *{flex-shrink:0;}            /* 选关各行不压缩 (.lo-scroll 在商店/技能里另设 flex:1 覆盖) */
  .ls2-head{display:flex;align-items:baseline;gap:clamp(8px,1.6vw,16px);justify-content:center;flex-wrap:wrap;margin-bottom:clamp(6px,1.4vh,14px);}
  .ls2-title{font-size:clamp(20px,3.4vw,34px);font-weight:bold;letter-spacing:clamp(2px,0.5vw,6px);color:#ffd866;
             text-shadow:2px 2px 0 #000,0 0 16px rgba(255,150,40,.35);}
  .ls2-sub{font-size:clamp(11px,1.5vw,16px);color:#9fe0ff;letter-spacing:1px;}
  .ls2-tabs{display:flex;flex-wrap:wrap;gap:clamp(4px,0.7vw,6px);justify-content:center;margin-bottom:clamp(5px,1vh,10px);}
  /* 百关段选择条 (第一级)：与章节条同样式，略加间距区分层级 */
  .ls2-blocks{margin-bottom:clamp(4px,0.9vh,8px);}
  .ls2-block{font-size:clamp(10px,1.3vw,14px);}
  .ls2-tab{font:inherit;font-size:clamp(11px,1.5vw,15px);letter-spacing:1px;padding:clamp(4px,0.8vh,7px) clamp(7px,1.1vw,12px);cursor:pointer;
           background:#2a2419;color:#b6a87f;border:2px solid #4a4030;border-radius:6px;transition:all .1s;}
  .ls2-tab:hover{color:#ffe6a0;border-color:#7a663c;}
  .ls2-tab.active{background:#5a3a1c;color:#ffd866;border-color:#c4773a;}
  .ls2-tab.locked{opacity:.55;}
  /* 章节横向滑动条 (单行、左右滑动、细滚动条)：直接列出全部章节 */
  .ls2-chrow{display:flex;flex-wrap:nowrap;gap:clamp(4px,0.7vw,6px);overflow-x:auto;overflow-y:hidden;
             width:min(960px,96vw);margin-bottom:clamp(8px,1.5vh,16px);padding:4px 2px;
             scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#6a552e transparent;}
  .ls2-chrow::-webkit-scrollbar{height:7px;}
  .ls2-chrow::-webkit-scrollbar-thumb{background:#6a552e;border-radius:4px;}
  .ls2-chrow::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border-radius:4px;}
  .ls2-chrow .ls2-tab{flex:0 0 auto;white-space:nowrap;}
  .ls2-chsub{font-size:clamp(11px,1.5vw,16px);color:#d8c89a;letter-spacing:2px;margin-bottom:clamp(6px,1.4vh,14px);}
  .ls2-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(6px,1.1vw,16px);
            width:min(960px,96vw);margin-bottom:clamp(8px,1.5vh,18px);}
  .ls2-cell{position:relative;aspect-ratio:4/3;background:linear-gradient(180deg,#332c20,#241e15);
            border:3px solid #5a4d30;color:#eee;cursor:pointer;border-radius:clamp(6px,1vw,10px);padding:clamp(4px,1vh,8px) clamp(3px,0.7vw,6px);
            display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1px,0.5vh,4px);
            font:inherit;box-shadow:0 4px 0 rgba(0,0,0,.45);transition:transform .1s,border-color .1s;overflow:hidden;}
  .ls2-cell:hover:not(:disabled){transform:translateY(-3px) scale(1.04);border-color:#ffd866;}
  .ls2-cell.boss{background:linear-gradient(180deg,#4a1f1f,#301414);border-color:#a23a3a;}
  .ls2-cell.elite{background:linear-gradient(180deg,#46371a,#2e2410);border-color:#b3852f;}
  .ls2-cell.locked{opacity:.45;cursor:not-allowed;filter:grayscale(.55);box-shadow:none;}
  .ls2-num{font-size:clamp(18px,3.3vw,38px);font-weight:bold;line-height:1;color:#f3e8cf;text-shadow:2px 2px 0 #000;}
  .ls2-tag{font-size:clamp(9px,1.25vw,13px);line-height:1.2;color:#d8c8a8;text-align:center;
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
  .ls2-stars{font-size:clamp(13px,1.9vw,22px);letter-spacing:2px;min-height:0;white-space:nowrap;}
  .ls2-stars .on{color:#ffd24a;}
  .ls2-stars .off{color:rgba(255,255,255,.18);}
  .ls2-nav{display:flex;gap:clamp(8px,1.4vw,14px);align-items:center;flex-wrap:wrap;justify-content:center;}
  .ls2-navbtn{font:inherit;font-size:clamp(12px,1.6vw,16px);letter-spacing:1px;padding:clamp(7px,1.2vh,10px) clamp(12px,2vw,22px);cursor:pointer;
              background:#5a3a1c;color:#ffe6a0;border:2px solid #c4773a;border-radius:6px;transition:all .1s;}
  .ls2-navbtn:hover:not(:disabled){background:#6e4a26;}
  .ls2-navbtn:disabled{opacity:.35;cursor:not-allowed;}
  .ls2-navbtn.ghost{background:#3a352b;border-color:#5a4d30;color:#cdbf9c;}

  .btn-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
  #overlay button.ghost{background:#43413a;}
  #overlay button.ghost:hover{background:#5a564c;}
  .stars-big{font-size:40px;color:#ffd84a;letter-spacing:8px;}

  /* 配装 / 商店 */
  .ls2-loadout{margin-left:18px;font:inherit;font-size:16px;letter-spacing:1px;padding:8px 16px;cursor:pointer;
               display:inline-flex;align-items:center;gap:8px;background:#5a3a1c;color:#ffe6a0;
               border:2px solid #c4773a;border-radius:8px;transition:all .1s;}
  .ls2-loadout:hover{background:#74491f;}
  .ls2-loadout img{width:22px;height:22px;opacity:.9;}
  .lo-scroll{width:min(1000px,95vw);flex:1 1 auto;min-height:0;overflow-y:auto;padding:4px 14px;
             display:flex;flex-direction:column;gap:20px;}
  .lo-sec{}
  .lo-sectitle{font-size:19px;color:#ffd866;letter-spacing:2px;text-align:left;margin-bottom:12px;}
  .lo-cap{font-size:13px;color:#9fe0ff;margin-left:8px;letter-spacing:0;}
  .lo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;}
  .lo-cell{position:relative;background:linear-gradient(180deg,#332c20,#241e15);border:3px solid #5a4d30;
           border-radius:10px;padding:10px 6px;cursor:pointer;display:flex;flex-direction:column;
           align-items:center;gap:6px;font:inherit;transition:transform .1s,border-color .1s;}
  .lo-cell:hover{transform:translateY(-2px);border-color:#ffd866;}
  .lo-cell.sel{border-color:#7af07a;background:linear-gradient(180deg,#2a3a20,#1d2614);}
  .lo-cell.locked{opacity:.9;}
  .lo-cell img{width:54px;height:54px;object-fit:contain;image-rendering:pixelated;}
  .lo-name{font-size:14px;color:#f1e8d2;letter-spacing:1px;}
  .lo-badge{font-size:13px;color:#9fe07a;letter-spacing:1px;}
  .lo-badge.buy{color:#ffd84a;}
  .lo-empty{font-size:15px;color:#b6a87f;padding:14px;}
  .lo-msg{min-height:22px;font-size:15px;color:#ff8a6b;letter-spacing:1px;opacity:0;transition:opacity .2s;}
  .lo-msg.show{opacity:1;}

  /* 主菜单右上角账号 */
  #menuAccount{position:absolute;top:clamp(8px,1.5vw,20px);right:clamp(8px,1.5vw,22px);display:flex;align-items:center;gap:clamp(6px,1.2vw,14px);z-index:5;
               background:rgba(20,14,9,.66);padding:clamp(4px,0.8vw,9px) clamp(8px,1.3vw,16px);border:2px solid #6f5f3a;border-radius:10px;
               box-shadow:0 4px 14px rgba(0,0,0,.5);}
  #menuAccount .acc-user{font-size:clamp(12px,1.7vw,20px);font-weight:bold;color:#ffe6a0;letter-spacing:1px;text-shadow:2px 2px 0 #000;}
  #menuAccount .acc-logout{font:inherit;font-size:clamp(11px,1.4vw,17px);font-weight:bold;padding:clamp(5px,0.8vw,9px) clamp(9px,1.5vw,20px);cursor:pointer;letter-spacing:2px;
            background:#5a3a1c;color:#ffe6a0;border:2px solid #c4773a;border-radius:7px;transition:all .12s;}
  #menuAccount .acc-logout:hover{background:#74491f;color:#ffd866;transform:scale(1.05);}

  /* 主菜单底部：隐私政策 / 数据安全 (画风与账号条一致) */
  #menuLegal{position:absolute;left:clamp(8px,1.5vw,20px);bottom:clamp(8px,1.5vw,18px);display:flex;gap:clamp(6px,1vw,10px);z-index:5;}
  #menuLegal .menu-legal-btn{font:inherit;font-family:Consolas,Menlo,monospace;font-size:clamp(10px,1.3vw,14px);font-weight:bold;letter-spacing:1px;
            padding:clamp(5px,0.8vw,8px) clamp(8px,1.3vw,14px);cursor:pointer;color:#d8c9a0;
            background:rgba(20,14,9,.66);border:2px solid #6f5f3a;border-radius:8px;transition:all .12s;text-shadow:1px 1px 0 #000;}
  #menuLegal .menu-legal-btn:hover{color:#ffd866;border-color:#c4773a;transform:translateY(-2px);}

  /* 设置面板的"返回主菜单"按钮 */
  #set-tomenu{display:block;width:100%;margin:6px 0 4px;font:inherit;font-size:17px;letter-spacing:2px;
              padding:11px 0;cursor:pointer;background:#7a2f24;color:#ffe0d4;border:2px solid #c4453a;
              border-radius:6px;transition:all .12s;}
  #set-tomenu:hover{background:#9a3a2c;color:#fff;}

  /* 设置面板的"删除账号"按钮 (危险操作，更暗的红) */
  #set-delacct{display:block;width:100%;margin:6px 0 4px;font:inherit;font-size:15px;letter-spacing:1px;
              padding:10px 0;cursor:pointer;background:#2a1212;color:#ff9c8a;border:2px solid #8a2b22;
              border-radius:6px;transition:all .12s;}
  #set-delacct:hover{background:#3a1818;color:#ffb3a3;border-color:#c4453a;}

  /* 设置面板的条款入口：隐私政策 / 数据安全 (删除账号下方，两个并排) */
  #set-legal{display:flex;gap:8px;margin:6px 0 4px;}
  #set-legal button{flex:1;font:inherit;font-size:13px;letter-spacing:1px;padding:9px 0;cursor:pointer;
              background:rgba(20,14,9,.66);color:#d8c9a0;border:2px solid #6f5f3a;border-radius:6px;transition:all .12s;}
  #set-legal button:hover{color:#ffd866;border-color:#c4773a;}

  /* 开场动画全屏播放 */
  #introWrap{position:fixed;inset:0;z-index:400;background:#000;display:flex;
             align-items:center;justify-content:center;cursor:pointer;}
  #introVideo{width:100%;height:100%;object-fit:contain;background:#000;}
  #introSkip{position:absolute;bottom:32px;right:36px;font:inherit;font-size:18px;letter-spacing:2px;
             padding:10px 24px;cursor:pointer;background:rgba(20,15,10,.82);color:#ffd866;
             border:2px solid #c4773a;border-radius:6px;transition:all .12s;}
  #introSkip:hover{background:rgba(90,58,28,.92);transform:scale(1.05);}
  #introHint{position:absolute;font-size:30px;color:#ffe6a0;letter-spacing:4px;
             text-shadow:0 0 18px rgba(255,160,40,.6);pointer-events:none;}
  #introLoading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
                justify-content:center;gap:16px;background:#000;pointer-events:none;}
  #introLoading .il-text{font-size:18px;color:#c2b48f;letter-spacing:2px;}

  /* ───── 触屏操作 ───── */
  /* touchControls 铺满视口；控件尺寸 clamp(最小可点, 随屏高缩放, 最大) → 短屏不会太小、高屏不会过大 */
  #touchControls{position:fixed;inset:0;z-index:120;pointer-events:none;display:none;}
  body.playing.touch #touchControls{display:block;}
  body.paused #touchControls{display:none;}
  /* 左摇杆 (尺寸随屏高；位置按视口百分比) */
  #joystick{position:absolute;left:calc(7% + env(safe-area-inset-left));bottom:calc(9% + env(safe-area-inset-bottom));
            width:clamp(96px,calc(var(--gh)*0.30),240px);height:clamp(96px,calc(var(--gh)*0.30),240px);
            pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;}
  #joyBase{position:absolute;inset:0;width:100%;height:100%;opacity:0.5;pointer-events:none;user-select:none;}
  /* 用负 margin 居中 (摇杆方形→ -21% 即半个 42% 旋钮)，把 transform 让给 bindJoystick 的位移逻辑，避免 reset 时旋钮偏位 */
  #joyKnob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;
           background:rgba(255,255,255,0.30);border:2px solid rgba(255,255,255,0.6);
           box-shadow:0 0 16px rgba(0,0,0,0.4);pointer-events:none;}
  /* 右侧开火 / 换弹：左右开火同一排，换弹在「向右开火」正上方。整体上移，给底部技能栏让位 */
  #touchRight{position:absolute;right:calc(9% + env(safe-area-inset-right));bottom:calc(18% + env(safe-area-inset-bottom));
              display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;
              column-gap:clamp(8px,calc(var(--gh)*0.025),22px);row-gap:clamp(6px,calc(var(--gh)*0.017),16px);align-items:center;justify-items:center;pointer-events:none;}
  .tbtn{width:clamp(58px,calc(var(--gh)*0.145),120px);height:clamp(58px,calc(var(--gh)*0.145),120px);border-radius:50%;border:2px solid rgba(255,255,255,0.4);
         background:rgba(20,16,12,0.4);cursor:pointer;pointer-events:auto;touch-action:none;
         display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;
         transition:background .1s,transform .08s;}
  .tbtn:active{background:rgba(90,58,28,0.6);transform:scale(0.93);}
  .tbtn img{width:56%;height:56%;opacity:0.85;pointer-events:none;user-select:none;}
  .tbtn.fire{width:clamp(68px,calc(var(--gh)*0.165),138px);height:clamp(68px,calc(var(--gh)*0.165),138px);}
  #btnReload{width:clamp(48px,calc(var(--gh)*0.11),92px);height:clamp(48px,calc(var(--gh)*0.11),92px);}
  /* 网格：换弹(行1,列2) 在 向右开火(行2,列2) 上方；左开火(行2,列1) 与右开火同排 */
  #btnReload{grid-column:2;grid-row:1;}
  #btnFireL{grid-column:1;grid-row:2;}
  #btnFireR{grid-column:2;grid-row:2;}

  /* ───── 触屏控件布局编辑模式 (#layout) ───── */
  body.ctledit #touchControls{display:block !important;z-index:580;}   /* 抬到大厅/菜单 overlay(200) 之上，可见可拖 */
  body.ctledit #joystick,
  body.ctledit #touchRight{outline:2px dashed #ffb020;outline-offset:4px;border-radius:12px;
                 background:rgba(255,176,32,0.08);touch-action:none;cursor:move;}
  body.ctledit #joystick,
  body.ctledit #touchRight{pointer-events:auto;}
  /* 大小滑块行 */
  #ctlEditPanel .cep-sl{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:5px 0;color:#e7dcc0;}
  #ctlEditPanel .cep-sl input[type=range]{flex:1;min-width:130px;}
  /* 技能栏代理 (canvas 技能栏在编辑器里的可拖代理方块) */
  #sbProxy{position:fixed;z-index:590;display:flex;align-items:center;justify-content:center;
           border:2px dashed #ffb020;border-radius:10px;background:rgba(255,176,32,0.14);
           color:#ffdd66;font:bold 13px monospace;letter-spacing:2px;cursor:move;
           touch-action:none;user-select:none;box-shadow:0 0 14px rgba(255,176,32,0.35);}
  #ctlEditPanel,#lobbyEditPanel{position:fixed;left:50%;top:14px;transform:translateX(-50%);z-index:600;
                background:rgba(16,12,8,0.94);border:1px solid #ffb020;border-radius:10px;
                padding:10px 14px;color:#e7dcc0;font:12px/1.5 monospace;max-width:92vw;
                box-shadow:0 6px 28px rgba(0,0,0,0.6);}
  #ctlEditPanel .cep-title,#lobbyEditPanel .cep-title{font-size:14px;font-weight:bold;color:#ffb020;margin-bottom:2px;}
  #ctlEditPanel .cep-tip,#lobbyEditPanel .cep-tip{color:#9a8f78;margin-bottom:6px;}
  #ctlEditPanel #cep-out,#lobbyEditPanel #lep-out{margin:0 0 8px;white-space:pre-wrap;color:#bfe88a;
                background:rgba(0,0,0,0.4);padding:6px 8px;border-radius:6px;}
  #ctlEditPanel .cep-btns,#lobbyEditPanel .cep-btns{display:flex;gap:8px;flex-wrap:wrap;}
  #ctlEditPanel button,#lobbyEditPanel button{flex:1;min-width:88px;padding:8px 10px;border-radius:6px;cursor:pointer;
                border:1px solid #5a4a2c;background:#2a2114;color:#e7dcc0;font:12px monospace;}
  #ctlEditPanel button:active,#lobbyEditPanel button:active{background:#3a2e18;}

  /* 加载动画 (黑屏期间) */
  /* 没网络全屏图 (强制联网，点任意处重连) */
  #noNetScreen{position:fixed;inset:0;z-index:600;background:#0a0705;cursor:pointer;
               display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;}
  #noNetScreen img{max-width:82vw;max-height:70vh;object-fit:contain;image-rendering:pixelated;}
  #noNetScreen .nn-tip{color:#e7dcc0;font-size:20px;letter-spacing:2px;text-shadow:2px 2px 0 #000;
               animation:nn-blink 1.2s ease-in-out infinite;}
  @keyframes nn-blink{0%,100%{opacity:.5;}50%{opacity:1;}}
  #loadingScreen{position:fixed;inset:0;z-index:500;background:radial-gradient(ellipse at center,#1b140d 0%,#0a0705 80%);
                 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
                 transition:opacity .5s ease;}
  #loadingScreen.hide{opacity:0;pointer-events:none;}
  #loadingScreen .ld-title{font-size:46px;font-weight:bold;letter-spacing:6px;color:#e7dcc0;
                 text-shadow:2px 2px 0 #000,0 0 22px rgba(255,150,40,.4);}
  #loadingScreen .ld-sub{font-size:16px;color:#8aa06a;letter-spacing:3px;margin-top:-6px;}
  #loadingScreen .ld-spinner{width:54px;height:54px;margin:6px 0;border:6px solid #3a3122;
                 border-top-color:#ffb020;border-radius:50%;animation:ld-spin .9s linear infinite;}
  @keyframes ld-spin{to{transform:rotate(360deg);}}
  #loadingScreen .ld-barwrap{width:min(420px,80vw);height:16px;background:#241e15;border:2px solid #5a4d30;border-radius:8px;overflow:hidden;}
  #loadBar{height:100%;width:0;background:linear-gradient(90deg,#c4773a,#ffd24a);transition:width .15s ease;}
  #loadingScreen .ld-row{display:flex;gap:14px;font-size:15px;color:#c2b48f;letter-spacing:1px;}
  #loadingScreen #loadPct{color:#ffd24a;font-weight:bold;}

  /* ───── 移动端适配 ───── */
  /* 选关网格/字号/账号框现已全部用 clamp(…vw…) 自适应；旧的按宽度切列数(3列/2列)在横屏手机会把格子顶大，已移除。
     恒 5 列 + 整体可滚动，横屏任何尺寸都铺得下。 */
  @media (max-width: 820px){
    #hint{font-size:11px;}
  }
  @media (max-width: 540px){
    #overlay{font-size:22px;}
    .ls2-head{margin-top:6px;flex-direction:column;gap:2px;}
    .brand-main{font-size:26px;}
    #loadingScreen .ld-title{font-size:32px;}
  }

  /* 设置面板 (BGM / SFX 音量) */
  #settingsBackdrop{position:fixed;inset:0;background:rgba(0,0,0,0.55);
                    z-index:240;display:none;}
  #settingsPanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
                 background:rgba(20,15,10,0.97);color:#eee;
                 padding:22px 26px;border:2px solid #c4453a;border-radius:8px;
                 font:14px Consolas,Menlo,monospace;min-width:340px;
                 z-index:250;display:none;box-shadow:0 8px 40px rgba(0,0,0,0.7);}
  #settingsPanel h3{margin:0 0 16px;color:#ffdd66;font-size:18px;letter-spacing:2px;}
  #settingsPanel .row{margin:14px 0;}
  #settingsPanel .row > label{display:block;margin-bottom:6px;color:#ccc;}
  #settingsPanel .slider-wrap{display:flex;align-items:center;gap:12px;}
  #settingsPanel input[type=range]{flex:1;height:28px;cursor:pointer;}
  #settingsPanel .v{width:52px;text-align:right;color:#ffdd66;font-weight:bold;}
  #settingsPanel #set-close{margin-top:16px;width:100%;padding:10px;
                            background:#c4453a;color:#fff;border:0;font:inherit;
                            cursor:pointer;border-radius:4px;letter-spacing:2px;}
  #settingsPanel #set-close:hover{background:#e25448;}

  /* 升级 / 皮肤面板 */
  #upgradeBackdrop{position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:300;display:none;}
  #upgradePanel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
    background:rgba(18,13,9,0.98);color:#eee;border:2px solid #c4453a;border-radius:10px;
    padding:18px 22px;font:14px Consolas,Menlo,monospace;width:min(700px,94vw);
    max-height:92vh;overflow:auto;z-index:310;display:none;box-shadow:0 10px 50px rgba(0,0,0,0.85);}
  #upgradePanel h2{margin:0;color:#ffdd66;font-size:22px;letter-spacing:2px;}
  .up-head{display:flex;justify-content:space-between;align-items:center;
           margin-bottom:8px;flex-wrap:wrap;gap:10px;}
  .up-stats{font-size:14px;color:#ccc;}
  .up-stats b{color:#ffdd66;} .up-stats .pt{color:#7af07a;} .up-stats .co{color:#ffd84a;}
  .up-tabs{display:flex;gap:8px;margin:10px 0;}
  .up-tabs button{flex:1;padding:8px;background:#332820;color:#ccc;border:1px solid #554;
                  border-radius:5px;cursor:pointer;font:inherit;}
  .up-tabs button.active{background:#c4453a;color:#fff;border-color:#e25448;}
  .up-row{display:flex;align-items:center;gap:10px;padding:9px 6px;border-bottom:1px solid #2a2018;}
  .up-row .ic{font-size:20px;width:26px;text-align:center;}
  .up-row .info{flex:1;min-width:0;}
  .up-row .nm{color:#ffdd66;font-weight:bold;}
  .up-row .ds{color:#aaa;font-size:12px;}
  .up-dots{letter-spacing:2px;color:#ffaa30;font-size:13px;margin-top:2px;}
  .up-row button{font:inherit;border:0;border-radius:4px;cursor:pointer;padding:5px 10px;color:#fff;}
  .up-buy{background:#3a7a3a;} .up-buy:hover{background:#4caa4c;}
  .up-buy:disabled{background:#333;color:#777;cursor:not-allowed;}
  .up-dn{background:#7a3a3a;padding:5px 8px;} .up-dn:hover{background:#aa4c4c;}
  .up-cost{font-size:12px;color:#7af07a;min-width:48px;text-align:right;}
  .up-cost.no{color:#a55;}

  /* 分区标题 + 技能卡片网格 (升级面板优化) */
  .up-sec{margin:16px 0 2px;color:#ffdd66;font-weight:bold;font-size:14px;letter-spacing:1px;
          border-bottom:1px solid #443;padding-bottom:5px;}
  .sk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;margin-top:8px;}
  .sk-card{background:#231a12;border:1px solid #443;border-radius:8px;padding:10px 12px;
           display:flex;flex-direction:column;gap:7px;}
  .sk-card.locked{border-style:dashed;border-color:#6a6a45;background:#1e1810;}
  .sk-top{display:flex;gap:10px;align-items:center;}
  .sk-ic{width:48px;height:48px;flex:0 0 48px;border-radius:8px;background:rgba(0,0,0,0.4);
         border:1px solid #554;image-rendering:pixelated;object-fit:contain;}
  .sk-ic.emoji{display:flex;align-items:center;justify-content:center;font-size:30px;}
  .sk-name{color:#ffdd66;font-weight:bold;font-size:15px;}
  .sk-key{color:#a9d6ff;font-size:11px;background:#1b2630;border:1px solid #3a4a55;border-radius:4px;
          padding:1px 6px;margin-left:6px;white-space:nowrap;}
  .sk-lock{color:#d9a14a;font-size:11px;margin-left:6px;white-space:nowrap;}
  .sk-blurb{color:#b8b0a4;font-size:12px;line-height:1.5;}
  .sk-up{display:flex;align-items:center;gap:8px;border-top:1px solid #2a2018;padding-top:6px;}
  .sk-up .l{flex:1;min-width:0;}
  .sk-up .un{color:#ddd;font-size:12px;}
  .sk-up .un b{color:#ffd060;}
  .sk-up .dots{letter-spacing:2px;color:#ffaa30;font-size:12px;margin-top:1px;}
  .up-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:0 18px;margin-top:4px;}
  .skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));gap:10px;margin-top:6px;}
  .skin-card{background:#241a12;border:2px solid #443;border-radius:8px;padding:10px;text-align:center;}
  .skin-card.sel{border-color:#ffdd66;box-shadow:0 0 10px rgba(255,221,102,0.4);}
  .skin-sw{width:50px;height:50px;border-radius:50%;margin:0 auto 6px;border:2px solid #000;}
  .skin-card .snm{color:#eee;font-size:13px;margin-bottom:6px;}
  .skin-card button{font:inherit;border:0;border-radius:4px;padding:5px 8px;cursor:pointer;color:#fff;width:100%;}
  .skin-buy{background:#3a6a9a;} .skin-buy:hover{background:#4c8aca;}
  .skin-buy:disabled{background:#333;color:#777;cursor:not-allowed;}
  .skin-sel{background:#3a7a3a;} .skin-sel:hover{background:#4caa4c;}
  .skin-cur{background:#555;cursor:default;}
  #up-close{margin-top:14px;width:100%;padding:10px;background:#c4453a;color:#fff;border:0;
            font:inherit;cursor:pointer;border-radius:5px;letter-spacing:2px;}
  #up-close:hover{background:#e25448;}
  .up-dev{margin-top:12px;padding:10px;border:1px dashed #6a6;border-radius:6px;background:#12160e;}
  .up-dev b{color:#9be09b;}
  .up-dev button{margin:3px;font:inherit;background:#3a4a3a;color:#fff;border:0;border-radius:4px;
                 padding:5px 9px;cursor:pointer;}
  .up-dev button:hover{background:#5a7a5a;}

  /* ════════ 西部废土风 UI 主题 (覆盖 + 新页面) ════════ */
  /* 通用按钮：木牌质感 (取代之前的纯红，统一画风) */
  #overlay button{background:linear-gradient(180deg,#6e4423,#46290f);color:#f2e3c0;
                  border:2px solid #b8843a;border-radius:6px;text-shadow:1px 1px 0 #2a1808;
                  box-shadow:0 3px 0 #2a1808,inset 0 1px 0 rgba(255,220,150,.22);letter-spacing:2px;}
  #overlay button:hover{background:linear-gradient(180deg,#855127,#583414);border-color:#ffd877;}
  #overlay button:active{transform:translateY(2px);box-shadow:0 1px 0 #2a1808;}
  #overlay button.ghost{background:linear-gradient(180deg,#4a443a,#2f2a22);border-color:#6a5d44;color:#d8c8a4;}
  #overlay button.ghost:hover{background:linear-gradient(180deg,#5d564a,#3d3830);border-color:#caa860;}
  .ls2-navbtn,.ls2-navbtn.ghost{box-shadow:0 3px 0 #1c120a,inset 0 1px 0 rgba(255,220,150,.18);}

  /* 选关/商店/技能 页背景：废土棕黑渐晕 */
  #overlay.select{background:radial-gradient(ellipse at center,#241a12 0%,#0b0704 88%);}
  .ls2-title{text-shadow:3px 3px 0 #000,0 0 18px rgba(255,150,40,.45);}

  /* 章节标签：需压过 #overlay button 的红 (id 选择器) */
  #overlay.select .ls2-tab{background:linear-gradient(180deg,#3a2c1a,#241811);border:2px solid #6a5230;
                           color:#cdb78a;box-shadow:0 2px 0 #160d06;}
  #overlay.select .ls2-tab:hover{background:linear-gradient(180deg,#4a3720,#2e2013);border-color:#caa860;color:#ffe6a0;}
  #overlay.select .ls2-tab.active{background:linear-gradient(180deg,#7a4e22,#4a2e14);border-color:#ffd877;color:#ffe6a0;}
  #overlay.select .ls2-tab.locked{opacity:.5;}

  /* 关卡格：通缉令木牌 (高优先级压过 #overlay button 的红) */
  #overlay.select .ls2-cell{
    background:repeating-linear-gradient(91deg,rgba(0,0,0,.05) 0 3px,rgba(255,235,190,.02) 3px 6px),
               linear-gradient(180deg,#48351f,#2c1e12);
    border:3px solid #8a6a36;border-radius:9px;color:#f1e6cd;
    box-shadow:0 4px 0 #160d06,inset 0 0 0 1px rgba(255,220,150,.12);}
  #overlay.select .ls2-cell:hover:not(:disabled){border-color:#ffd877;transform:translateY(-3px) scale(1.03);}
  #overlay.select .ls2-cell.boss{background:linear-gradient(180deg,#5a241c,#341310);border-color:#bf543c;}
  #overlay.select .ls2-cell.elite{background:linear-gradient(180deg,#5a431c,#312510);border-color:#c9962f;}
  #overlay.select .ls2-cell.locked{opacity:.5;filter:grayscale(.5);box-shadow:0 4px 0 #100a05;}

  /* 商店/技能 卡片：木牌 */
  #overlay.select .lo-cell{
    background:linear-gradient(180deg,#412f1c,#271a10);border:3px solid #7a5d33;border-radius:9px;
    color:#f1e6cd;box-shadow:0 3px 0 #160d06,inset 0 1px 0 rgba(255,220,150,.16);}
  #overlay.select .lo-cell:hover:not(:disabled){border-color:#ffd877;transform:translateY(-2px);}
  #overlay.select .lo-cell.sel{border-color:#8fe06a;background:linear-gradient(180deg,#33401f,#1d2711);
    box-shadow:0 3px 0 #0c1206,0 0 14px rgba(143,224,106,.35);}
  #overlay.select .lo-cell.locked{opacity:1;filter:none;}            /* 商店「未拥有=可购买」不灰显 */
  #overlay.skills .skill-cell.locked{opacity:.66;filter:grayscale(.5);}  /* 技能「未解锁」略灰，仍可点解锁 */
  .lo-sectitle{text-shadow:1px 1px 0 #000;}
  .lo-cap{color:#caa860 !important;}

  /* 新元素：皮肤色球 / emoji 图标 / 技能说明 / 锁定徽标 */
  .lo-sw{width:54px;height:54px;border-radius:50%;border:2px solid #1a1208;
         box-shadow:0 0 10px rgba(0,0,0,.5),inset -3px -4px 8px rgba(0,0,0,.4),inset 2px 2px 6px rgba(255,255,255,.35);}
  .lo-emoji{font-size:42px;line-height:54px;height:54px;}
  .lo-blurb{font-size:11px;line-height:1.4;color:#c4b58c;margin:1px 2px 2px;}
  .lo-badge.lock{color:#e0a05a;}
  .skills-grid{grid-template-columns:repeat(auto-fill,minmax(208px,1fr));}
  .skill-cell{justify-items:center;}
  /* 技能/属性卡里的 解锁/携带/强化 按钮 (木牌风，#overlay.skills 前缀压过 #overlay button 的默认红) */
  #overlay.skills .skill-cell,#overlay.skills .stat-cell{cursor:default;}
  #overlay.skills .skill-cell:hover,#overlay.skills .stat-cell:hover{transform:none;border-color:#7a5d33;}
  #overlay.select .skl-act{font:inherit;font-size:13px;cursor:pointer;width:100%;margin-top:6px;padding:6px 8px;
           border-radius:6px;border:2px solid #7a5d33;background:linear-gradient(180deg,#5a3a1c,#3a2510);
           color:#f1e6cd;letter-spacing:1px;box-shadow:none;}
  #overlay.select .skl-act:hover:not(:disabled){border-color:#ffd877;background:linear-gradient(180deg,#6e4423,#46290f);}
  #overlay.select .skl-act.on{border-color:#8fe06a;background:linear-gradient(180deg,#33401f,#1f2911);color:#bfe88a;}
  #overlay.select .skl-act:disabled{opacity:.45;cursor:not-allowed;}
  #overlay.select .skl-tag{font-size:12px;color:#9fd8ff;margin-top:6px;}
  #overlay.select .skl-up{display:flex;align-items:center;gap:6px;justify-content:space-between;width:100%;margin-top:5px;}
  #overlay.select .skl-uname{font-size:11px;color:#cdbb90;text-align:left;flex:1;}
  #overlay.select .skl-uname b{color:#ffd877;}
  #overlay.select .skl-ubtn{font:inherit;font-size:11px;cursor:pointer;padding:4px 8px;border-radius:5px;
           white-space:nowrap;border:1px solid #5a4d30;background:#2e2516;color:#ffd877;box-shadow:none;letter-spacing:0;}
  #overlay.select .skl-ubtn.wide{width:100%;margin-top:6px;}
  #overlay.select .skl-ubtn:hover:not(:disabled){border-color:#ffd877;background:#3a2e18;}
  #overlay.select .skl-ubtn:disabled{opacity:.45;cursor:not-allowed;color:#999;}
  #overlay.select .skl-dots{font-size:11px;color:#ffaa30;letter-spacing:1px;margin-top:3px;}

  /* ── 游戏大厅 (hub) ── */
  #overlay.lobby{background:#000;padding:0;gap:0;overflow:hidden;}
  #lobbyBg,#lobbyBgVid{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;
           image-rendering:pixelated;image-rendering:crisp-edges;user-select:none;pointer-events:none;}
  #lobbyBgVid{image-rendering:auto;}  /* 视频用平滑缩放 */
  #overlay.lobby .lobby-top{position:absolute;top:18px;left:0;right:0;z-index:3;
           display:flex;justify-content:space-between;padding:0 28px;box-sizing:border-box;}
  #overlay.lobby .lobby-topleft,#overlay.lobby .lobby-topright{display:flex;align-items:center;gap:12px;}
  .coin-ic{width:clamp(18px,2.4vw,30px);height:clamp(18px,2.4vw,30px);object-fit:contain;image-rendering:pixelated;vertical-align:-8px;}
  #overlay.lobby .lobby-coins{font-size:clamp(14px,1.9vw,24px);}
  #overlay.lobby .lobby-coins .coin-ic{width:clamp(20px,2.7vw,34px);height:clamp(20px,2.7vw,34px);vertical-align:-9px;margin-right:2px;}
  .lo-badge .coin-ic,.ls2-sub .coin-ic{width:22px;height:22px;vertical-align:-5px;}
  /* 设置按钮：与关卡内右上角同款 (深方块 + 灰边 + 黄齿轮 ⚙) */
  #overlay.lobby .lobby-settings{display:flex;align-items:center;justify-content:center;cursor:pointer;
           width:clamp(34px,3.8vw,48px);height:clamp(34px,3.8vw,48px);padding:0;border-radius:6px;border:1px solid #9a9a9a;color:#ffdd66;
           background:rgba(15,12,10,.82);font-size:clamp(20px,2.4vw,30px);line-height:1;box-shadow:none;text-shadow:1px 1px 0 #000;}
  #overlay.lobby .lobby-settings:hover{border-color:#ffd877;background:rgba(42,28,14,.88);}
  #overlay.lobby .lobby-settings:active{transform:translateY(1px);}
  #lobbyEditPanel .lep-size{display:flex;align-items:center;gap:8px;margin:6px 0 8px;color:#e7dcc0;}
  #lobbyEditPanel .lep-size input{flex:1;}
  #lobbyEditPanel .lep-steprow{display:flex;align-items:center;gap:6px;margin:0 0 8px;color:#cdb78a;}
  #lobbyEditPanel .lep-step{flex:none;min-width:0;padding:4px 12px;}
  #lobbyEditPanel .lep-step.active{background:#7a4e22;border-color:#ffd877;color:#ffe6a0;}
  #lobbyEditPanel .lep-row{display:flex;align-items:center;gap:12px;margin:6px 0;}
  #lobbyEditPanel .lep-rlabel{width:42px;color:#ffd877;font-weight:bold;}
  #lobbyEditPanel .lep-pad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(2,28px);gap:3px;}
  #lobbyEditPanel .lep-dir{flex:none;min-width:0;padding:0;font-size:16px;line-height:1;}
  #lobbyEditPanel .lep-dir.up{grid-column:2;grid-row:1;}
  #lobbyEditPanel .lep-dir.left{grid-column:1;grid-row:2;}
  #lobbyEditPanel .lep-dir.down{grid-column:2;grid-row:2;}
  #lobbyEditPanel .lep-dir.right{grid-column:3;grid-row:2;}
  .lobby-who,.lobby-coins{font-size:clamp(13px,1.7vw,21px);font-weight:bold;color:#ffe6a0;letter-spacing:1px;
           text-shadow:2px 2px 0 #000;background:rgba(20,12,6,.6);border:2px solid #8a6a36;
           border-radius:8px;padding:clamp(3px,0.6vw,6px) clamp(8px,1.3vw,16px);}
  .lobby-lv{font-size:clamp(12px,1.55vw,19px);font-weight:bold;color:#ffd877;letter-spacing:1px;text-shadow:2px 2px 0 #000;
           background:rgba(20,12,6,.6);border:2px solid #8a6a36;border-radius:8px;padding:clamp(3px,0.6vw,6px) clamp(7px,1.1vw,14px);}
  /* 体力：大厅顶栏(绿底胶囊+图标) / 选关副标题(小图标) / 体力不足浮条 */
  .lobby-stamina{font-size:clamp(13px,1.7vw,21px);font-weight:bold;color:#bff0b0;letter-spacing:1px;text-shadow:2px 2px 0 #000;
           background:rgba(16,26,12,.62);border:2px solid #4f7a3a;border-radius:8px;padding:clamp(3px,0.6vw,6px) clamp(7px,1.1vw,14px);
           display:inline-flex;align-items:center;gap:6px;}
  .sta-ic{width:clamp(18px,2.4vw,30px);height:clamp(18px,2.4vw,30px);object-fit:contain;image-rendering:pixelated;}
  .ls2-sub .sta-ic-sm{width:22px;height:22px;object-fit:contain;vertical-align:-5px;image-rendering:pixelated;margin-right:2px;}
  #staToast{position:fixed;left:50%;top:16%;transform:translate(-50%,-8px);z-index:9999;
           background:rgba(34,14,10,.95);border:2px solid #d2553a;border-radius:10px;
           color:#ffd6c2;font-size:20px;font-weight:bold;letter-spacing:1px;padding:12px 22px;
           text-shadow:1px 1px 0 #000;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;}
  #staToast.show{opacity:1;transform:translate(-50%,0);}
  #overlay.lobby .lobby-uptip{position:absolute;left:50%;top:clamp(56px,9vh,84px);transform:translateX(-50%);z-index:3;
           font:inherit;font-size:clamp(12px,1.5vw,18px);font-weight:bold;letter-spacing:1px;cursor:pointer;color:#0c1a08;
           padding:clamp(5px,0.9vw,9px) clamp(11px,1.7vw,22px);border-radius:10px;border:2px solid #8fe06a;
           background:linear-gradient(180deg,#bfe88a,#7ac84a);
           box-shadow:0 3px 0 #2a4018,0 0 16px rgba(143,224,106,.5);
           animation:uptip-pulse 1.2s ease-in-out infinite;}
  #overlay.lobby .lobby-uptip:hover{filter:brightness(1.08);}
  @keyframes uptip-pulse{0%,100%{transform:translateX(-50%) scale(1);}50%{transform:translateX(-50%) scale(1.045);}}
  #overlay.lobby .lobby-logout{font:inherit;font-size:16px;font-weight:bold;letter-spacing:1px;cursor:pointer;
           color:#f2d8b0;padding:7px 16px;border-radius:8px;border:2px solid #8a5a36;
           background:linear-gradient(180deg,#6e4423,#46290f);box-shadow:0 3px 0 #2a1808;}
  #overlay.lobby .lobby-logout:hover{border-color:#ffd877;background:linear-gradient(180deg,#855127,#583414);}
  #overlay.lobby .lobby-logout:active{transform:translateY(2px);box-shadow:0 1px 0 #2a1808;}
  #overlay.lobby .lobby-title{position:absolute;top:9%;left:50%;transform:translateX(-50%);z-index:3;
           font-size:42px;font-weight:bold;letter-spacing:10px;color:#ffd877;
           text-shadow:3px 3px 0 #000,0 0 22px rgba(255,150,40,.55);white-space:nowrap;}
  /* 三个图片按钮：默认布局 (来自布局编辑器，按 2048 基准换算成百分比/vw 自适应) */
  /* fixed 挂在 overlay 上 (overlay 铺满视口且无 transform)，左下角锚点 left%/bottom */
  #overlay.lobby .lobby-btn{position:fixed;bottom:0;z-index:4;background:none;border:0;border-radius:0;padding:0;
           box-shadow:none;cursor:pointer;transition:transform .12s ease,filter .12s;
           filter:drop-shadow(0 5px 6px rgba(0,0,0,.55));}
  #overlay.lobby .lobby-btn[data-lk="sel"]{left:24.9%;}
  #overlay.lobby .lobby-btn[data-lk="skills"]{left:52.2%;}
  #overlay.lobby .lobby-btn[data-lk="shop"]{left:62.9%;}
  #overlay.lobby .lobby-btn:hover{transform:translateY(-6px) scale(1.06);filter:drop-shadow(0 8px 9px rgba(0,0,0,.6)) brightness(1.08);}
  #overlay.lobby .lobby-btn:active{transform:translateY(-1px) scale(1.02);}
  /* 编辑布局时禁用按钮缩放/位移，否则拖动定位会跳 */
  #overlay.lobby.lobbyediting .lobby-btn,
  #overlay.lobby.lobbyediting .lobby-btn:hover,
  #overlay.lobby.lobbyediting .lobby-btn:active{transform:none;filter:none;transition:none;}
  #overlay.lobby .lobby-btn img{display:block;width:clamp(58px,calc(var(--gw)*0.114),240px);height:auto;
           object-fit:contain;image-rendering:pixelated;image-rendering:crisp-edges;}
  #overlay.lobby .ls2-nav{position:absolute;left:22px;bottom:20px;z-index:3;}
  #overlay.lobby .lobby-editbtn{position:absolute;left:22px;bottom:20px;z-index:3;font:inherit;
           font-size:14px;letter-spacing:1px;cursor:pointer;color:#cdb78a;padding:8px 14px;border-radius:8px;
           border:1px dashed #6a5d44;background:rgba(20,12,6,.55);box-shadow:none;}
  #overlay.lobby .lobby-editbtn:hover{border-color:#ffd877;color:#ffe6a0;background:rgba(40,26,12,.7);}

  @media (max-width:760px),(max-height:460px){
    #overlay.lobby .lobby-title{font-size:30px;letter-spacing:6px;top:7%;}
    /* 大厅顶栏/按钮尺寸已由上面的 clamp(…vw…) 统一自适应，这里不再用固定 px 覆盖 (否则小屏反而被顶大) */
    .skills-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  }