/* 桌面端与手机端同一套页面：面板在宽屏靠右停靠，在窄屏变成底部抽屉。
   不做两套页面 —— 两套一定会漂移（和 iOS/Web 功能同步是同一个道理）。 */

:root{
  --bg:#0b0b0d; --fg:#f2f2f4; --dim:#9a9aa2; --line:#2a2a30;
  --accent:#2fd6a6; --warn:#ffb020; --bad:#ff6b6b;
  --glass:rgba(22,22,26,.72); --panel-w:360px; --pad:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--fg);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans",sans-serif;
  -webkit-text-size-adjust:100%;overscroll-behavior:none}
button,select{font:inherit;color:inherit}
.hidden{display:none!important}
.glass{background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line);border-radius:14px}

#stage{position:fixed;inset:0;display:grid;place-items:center;background:#000;touch-action:none}
#canvas{width:100%;height:100%;display:block}
#l1{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* HUD */
#hud{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;
  display:flex;flex-wrap:wrap;gap:4px 12px;padding:8px 12px;max-width:min(92vw,640px);
  font-variant-numeric:tabular-nums;font-size:12px;cursor:pointer;
  transition:opacity .2s,transform .2s}
#hud .m{display:flex;gap:5px;align-items:baseline;white-space:nowrap}
#hud .m b{font-weight:600}
#hud .k{color:var(--dim)}
#hud .mark{width:100%;color:var(--dim);font-size:11px}

/* 观看态：画面之外什么都不留。左滑呼出控制面板即进入「控制态」。
   钉住（pinned）的浮层是用户显式要求常驻的，观看态也留着。 */
body:not(.controls) #hud:not(.pinned),
body:not(.controls) .panel-float:not(.pinned){opacity:0;pointer-events:none}

/* 呼出入口：观看态里唯一常驻的控件，所以不能挂 .panel-float（那类浮层观看态会隐掉）。
   面板打开后它就没用了，而且桌面端会被抽屉盖住，直接隐去。 */
#summon{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;
  width:38px;height:38px;padding:0;display:grid;place-items:center;cursor:pointer;
  color:var(--fg);background:var(--glass);backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:12px;
  opacity:.85;transition:opacity .2s,transform .2s;z-index:4}
#summon svg{width:22px;height:22px;display:block}
#summon:hover{opacity:1;transform:scale(1.04)}
#summon:active{transform:scale(.96)}
body.controls #summon{opacity:0;pointer-events:none}

/* 首次进来提示一次左滑，几秒后自己淡掉 */
#swipe-hint{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  padding:8px 12px;border-radius:999px;font-size:12px;pointer-events:none;
  opacity:.85;transition:opacity .6s}
#swipe-hint.gone,body.controls #swipe-hint{opacity:0}

#hint{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);padding:9px 16px;border-radius:999px;font-size:13px}

#boot{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
#boot-box{padding:16px 20px;font-size:13px;width:min(340px,86vw);text-align:left}
#boot-text{font-weight:600;margin-bottom:9px}
#boot-bar{height:4px;border-radius:999px;background:#2a2a30;overflow:hidden;margin-bottom:10px}
#boot-bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--accent);
  transition:width .3s ease}
#boot-steps{margin:0;padding:0;list-style:none;font-size:11.5px;color:var(--dim);
  font-variant-numeric:tabular-nums}
#boot-steps li{display:flex;justify-content:space-between;gap:12px;padding:1px 0}
#boot-steps li b{font-weight:500;color:var(--fg)}
#boot-steps li.slow b{color:var(--warn)}
#boot-total{margin-top:8px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}
#boot-box.bad #boot-text{color:var(--bad)}
#boot.done{display:none}

/* 设备面板 */
.panel-float{position:absolute;left:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  padding:10px 12px;font-size:12px;max-width:min(88vw,320px);cursor:pointer;
  transition:opacity .2s}
#device-brief{display:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.panel-float h2{margin:0 0 6px;font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.panel-float dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:2px 10px}
.panel-float dt{color:var(--dim);white-space:nowrap}
.panel-float dd{margin:0;font-variant-numeric:tabular-nums;text-align:right;word-break:break-all}

/* 控制面板 */
/* 面板永远是右侧抽屉（桌面与手机一致）：左滑拉出、右滑推回。
   收起时整块滑出屏幕，连把手都不留 —— 观看态就该只有画面。 */
#panel{position:fixed;top:0;right:0;height:100%;width:var(--panel-w);max-width:88vw;
  display:flex;flex-direction:column;
  background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-left:1px solid var(--line);transition:transform .26s cubic-bezier(.22,.61,.36,1);z-index:5}
#panel.collapsed{transform:translateX(101%)}
#panel-toggle{position:absolute;left:-34px;top:50%;transform:translateY(-50%);
  width:30px;height:56px;border-radius:12px 0 0 12px;border-right:0;display:grid;place-items:center;cursor:pointer}
#panel-toggle span{width:0;height:0;border:6px solid transparent;border-right-color:var(--fg)}
#panel.collapsed #panel-toggle{opacity:0;pointer-events:none}
#panel-body{overflow-y:auto;padding:calc(env(safe-area-inset-top,0px) + 14px) var(--pad)
  calc(env(safe-area-inset-bottom,0px) + 20px);-webkit-overflow-scrolling:touch}
#panel section{padding:12px 0;border-top:1px solid var(--line)}
#panel section:first-of-type{border-top:0}
#panel h2{margin:0 0 9px;font-size:11px;color:var(--dim);font-weight:600;letter-spacing:.04em}
.note{margin:7px 0 0;font-size:11px;color:var(--dim);line-height:1.45}
.row{display:flex;align-items:center;gap:8px;margin:7px 0}
.row.wrap{flex-wrap:wrap}
.row .grow{flex:1;min-width:0}

#lang-row{margin-bottom:4px}

/* 分段控件 */
.seg{display:flex;gap:4px;background:#17171c;border:1px solid var(--line);border-radius:11px;padding:3px}
.seg button{flex:1;padding:8px 6px;border:0;border-radius:8px;background:transparent;
  font-size:12.5px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seg button.on{background:var(--accent);color:#04140f;font-weight:600}

/* 语言选择有六种，一行挤不下：排成两行各三个。其余 .seg（模式/镜头/连线）都是 2~3 个，不受影响。 */
#lang-row{flex-wrap:wrap}
#lang-row button{flex:1 1 28%}

/* 胶囊按钮 */
.chip{padding:7px 11px;border:0;border-radius:999px;background:#232329;font-size:12px;cursor:pointer}
.chip.on{background:var(--accent);color:#04140f;font-weight:600}
.chip.sm{padding:6px 9px;font-size:11.5px}
.btn{padding:9px 13px;border:0;border-radius:10px;background:#232329;font-size:13px;cursor:pointer}
.btn.primary{background:var(--accent);color:#04140f;font-weight:600}
.btn.danger{background:var(--bad);color:#fff;font-weight:600}
.btn:disabled{opacity:.45;cursor:default}

/* 开关 */
.sw{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0;cursor:pointer}
.sw span{font-size:13px}
.sw i{flex:none;width:42px;height:25px;border-radius:999px;background:#33333b;position:relative;transition:background .16s}
.sw i::after{content:"";position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;
  background:#fff;transition:transform .16s}
.sw.on i{background:var(--accent)}
.sw.on i::after{transform:translateX(17px)}

/* 滑杆 */
.slider{display:flex;align-items:center;gap:9px;margin:8px 0}
.slider label{font-size:12px;color:var(--dim);white-space:nowrap}
.slider input{flex:1;min-width:0;accent-color:var(--accent)}
.slider output{font-size:11.5px;color:var(--dim);width:42px;text-align:right;font-variant-numeric:tabular-nums}

/* 槽位 */
.slot{flex:1;padding:8px 4px;border:0;border-radius:10px;background:#1e1e24;cursor:pointer;text-align:center}
.slot b{display:block;font-size:13px}
.slot em{display:block;font-size:9.5px;color:var(--dim);font-style:normal}
.slot.on{background:var(--accent);color:#04140f}
.slot.on em{color:#04140f;opacity:.75}

/* 手机端：面板改成底部抽屉，画面优先 */
/* 窄屏：浮层默认收成一行，点一下展开。屏幕就那么大，画面优先。 */
@media (max-width:860px){
  #hud{font-size:11px;gap:3px 10px;padding:6px 10px;max-width:calc(100vw - 62px);
    flex-wrap:nowrap;overflow:hidden}
  #hud .mark{display:none}
  #hud.expanded{flex-wrap:wrap;overflow:visible}
  #hud.expanded .mark{display:block}
  #device-brief{display:block}
  #device #device-full{display:none}
  #device.expanded #device-brief{display:none}
  #device.expanded #device-full{display:block}
  .panel-float{padding:7px 11px;border-radius:11px}
}

@media (max-width:860px){
  /* 手机上也是右侧抽屉，交互与桌面一致：左滑拉出 */
  #panel{width:min(88vw,380px)}
  .panel-float{bottom:calc(env(safe-area-inset-bottom,0px) + 12px);font-size:11px;max-width:calc(100vw - 20px)}
  #hint{bottom:calc(env(safe-area-inset-bottom,0px) + 60px)}
  .chip,.btn{min-height:36px}     /* 触摸目标 */
  .seg button{padding:10px 6px}
}
/* 开了「显示放大」的 iPhone 逻辑宽度只有 320，再收一档 */
@media (max-width:380px){
  :root{--pad:10px}
  #hud{font-size:10.5px;gap:2px 8px;padding:5px 9px}
  .panel-float{font-size:10.5px;padding:6px 9px}
  .seg button{padding:9px 4px;font-size:12px}
  .chip{padding:6px 9px}
  .chip.sm{padding:5px 8px;font-size:11px}
}