/* 深色电影感外壳（共用）：全幅场景 + 浮动卡片 + 一个主控件。品牌色：夜色底、蜜黄、赤陶、松绿。
   只在 body.cinema 下生效；卡片用实色不用毛玻璃，圆角不超过 10px。 */
body.cinema{
  --c-bg:#151821;--c-card:#1D2130;--c-card2:#252A3B;--c-line:rgba(243,238,223,.09);--c-text:#F3EEDF;--c-mute:#A7A49A;--c-faint:#6E6D68;
  --c-display:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;
  background:var(--c-bg);color:var(--c-text);
}
body.cinema .app-shell{width:100%;max-width:none;height:100dvh;padding:0;display:block;position:relative}
body.cinema #stage{position:fixed;inset:0;border:0;border-radius:0;box-shadow:none;background:var(--c-bg);padding:0;display:block}
body.cinema .main{display:block;height:100%}
body.cinema .left{display:block;height:100%}
body.cinema .figure-wrap{position:absolute;inset:0;border-radius:0;background:var(--c-bg)}
body.cinema .banner,body.cinema .method-note{display:none}

/* 顶部：标志 + 模式切换 */
body.cinema .app-header{position:fixed;left:28px;right:28px;top:20px;z-index:20;min-height:0;pointer-events:none}
body.cinema .app-header>*{pointer-events:auto}
body.cinema .title-lockup{align-items:center}
body.cinema .title-lockup>div{display:none}
body.cinema .home{color:var(--c-text);font-size:1.15rem;letter-spacing:.02em}
body.cinema .home:hover{background:none;color:var(--honey)}
body.cinema .ui-switch{position:fixed;left:28px;top:54px;border:0;background:none;gap:2px}
body.cinema .ui-switch button{border:0;background:none;color:var(--c-faint);font-size:.76rem;padding:.2rem .5rem;border-radius:999px}
body.cinema .ui-switch button.on{background:var(--c-card2);color:var(--c-text)}
@media(hover:hover) and (pointer:fine){body.cinema .ui-switch button:not(.on):hover{background:none;color:var(--c-text)}}

/* 视角药丸（右上） */
body.cinema .views{display:none!important}
.cx-pill{position:absolute;right:28px;top:18px;z-index:12;display:flex;gap:4px;padding:5px;background:var(--c-card);border:1px solid var(--c-line);border-radius:999px}
.cx-pill button{border:0;border-radius:999px;background:transparent;color:var(--c-mute);font-size:.82rem;padding:.48rem .95rem}
.cx-pill button.on{background:var(--terra);color:#FEFCF6;box-shadow:0 2px 14px rgba(201,85,61,.45)}
@media(hover:hover) and (pointer:fine){.cx-pill button:not(.on):hover{color:var(--c-text);border-color:transparent}}

/* 暗角：让中心像被光照着 */
.cx-vignette{position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse 55% 60% at 56% 50%,rgba(21,24,33,0) 0,rgba(21,24,33,.25) 55%,rgba(21,24,33,.92) 100%)}

/* 大标题 */
.cx-hero{position:absolute;left:28px;top:17%;z-index:5;max-width:min(40vw,560px);pointer-events:none}
.cx-hero h2{margin:0 0 22px;font-family:var(--c-display);font-weight:500;font-size:clamp(2rem,3.7vw,4.2rem);word-break:keep-all;line-height:1.12;letter-spacing:-.01em;color:var(--c-text)}
.cx-hero .dot{color:var(--terra)}
.cx-hero p{margin:0;text-shadow:0 1px 12px #151821,0 0 4px #151821;color:var(--c-mute);font-size:.92rem;line-height:1.9}
.cx-hero p b{color:var(--c-text);font-weight:700}

/* 左下：状态卡 */
.cx-state{position:absolute;left:28px;bottom:28px;z-index:6;width:min(30vw,380px);background:var(--c-card);border:1px solid var(--c-line);border-radius:10px;padding:18px 20px 20px}
.cx-state-title{margin:0 0 6px;display:flex;align-items:center;gap:10px}
.cx-state-title span{font-size:1.6rem;line-height:1}
.cx-state-title b{font-family:var(--c-display);font-weight:600;font-size:1.42rem;line-height:1.3}
.cx-state-lead{margin:0 0 8px;font-weight:800;font-size:.9rem}
.cx-state-body{margin:0;color:var(--c-mute);font-size:.84rem;line-height:1.75}

/* 右下：主控件面板 */
.cx-panel{position:absolute;right:28px;bottom:28px;z-index:6;width:min(42vw,560px);background:var(--c-card);border:1px solid var(--c-line);border-radius:10px;padding:18px 20px 16px}
.cx-panel-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.cx-big{margin:0;display:flex;align-items:baseline;gap:6px}
.cx-big b{font-family:var(--c-display);font-weight:600;font-size:2.6rem;line-height:1;font-variant-numeric:tabular-nums}
.cx-big span{font-size:1rem;font-weight:700}
.cx-big small{color:var(--c-faint);font-size:.78rem;margin-left:6px}
.cx-badge{background:var(--honey);color:var(--ink);font-weight:800;font-size:.84rem;padding:.42rem .85rem;border-radius:999px;box-shadow:0 2px 16px rgba(239,200,90,.35);white-space:nowrap}
.cx-badge.virtual{background:var(--pine);color:#FEFCF6;box-shadow:0 2px 16px rgba(46,107,82,.5)}
.cx-badge.none{background:var(--c-card2);color:var(--c-mute);box-shadow:none}
.cx-slider{position:relative;margin:4px 0 14px}
.cx-slider input{-webkit-appearance:none;appearance:none;width:100%;height:10px;border-radius:999px;margin:0;cursor:pointer;
  background:linear-gradient(90deg,#2E6B52 0%,#5E8C5A 30%,#EFC85A 58%,#E08A4A 78%,#C9553D 100%)}
.cx-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#FEFCF6;border:0;box-shadow:0 0 0 4px rgba(254,252,246,.18),0 2px 10px rgba(0,0,0,.5)}
.cx-slider input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#FEFCF6;border:0;box-shadow:0 0 0 4px rgba(254,252,246,.18),0 2px 10px rgba(0,0,0,.5)}
.cx-ticks{position:relative;height:20px;margin-top:6px;font-size:.72rem;color:var(--c-mute)}
.cx-ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.cx-presets{display:flex;flex-wrap:wrap;gap:6px}
.cx-presets button{border:1px solid var(--c-line);background:var(--c-card2);color:var(--c-text);border-radius:999px;font-size:.78rem;font-weight:700;padding:.4rem .72rem}
.cx-presets button.on{background:#FEFCF6;color:var(--ink);border-color:#FEFCF6}
.cx-presets button.locked{color:var(--c-faint)}
.cx-presets button.fresh{animation:cxPop .6s ease-out}
@keyframes cxPop{0%{transform:scale(.8);box-shadow:0 0 0 0 rgba(239,200,90,.7)}100%{transform:scale(1);box-shadow:0 0 0 14px rgba(239,200,90,0)}}

/* 右侧竖表：像的大小（像温度计） */
.cx-gauge{position:absolute;right:42px;top:18%;bottom:calc(28px + 210px);z-index:5;width:60px;display:flex;flex-direction:column;align-items:center}
.cx-gauge-tube{position:relative;flex:1;width:14px;border-radius:999px;background:var(--c-card2);border:1px solid var(--c-line)}
.cx-gauge-tube i{position:absolute;left:2px;right:2px;bottom:2px;border-radius:999px;background:linear-gradient(0deg,var(--terra),#E08A4A);height:30%;transition:height .25s}
.cx-gauge-tube b{position:absolute;left:50%;bottom:-14px;width:30px;height:30px;transform:translateX(-50%);border-radius:50%;background:var(--terra);box-shadow:0 0 22px rgba(201,85,61,.7);transition:background .25s}
.cx-gauge.alt .cx-gauge-tube i{background:linear-gradient(0deg,var(--pine),#5E9C7E)}.cx-gauge.alt .cx-gauge-tube b{background:var(--pine);box-shadow:0 0 22px rgba(46,107,82,.8)}
.cx-gauge.off .cx-gauge-tube i{height:0!important}.cx-gauge.off .cx-gauge-tube b{background:var(--c-card2);box-shadow:none}
.cx-gauge-marks{position:absolute;inset:0 0 0 auto;right:22px;list-style:none;margin:0;padding:0;pointer-events:none}
.cx-gauge-marks li{position:absolute;right:0;bottom:calc(var(--p) * 100%);transform:translateY(50%);font-size:.66rem;color:var(--c-faint);white-space:nowrap}
.cx-gauge-marks li:after{content:"";display:inline-block;width:8px;height:1px;background:var(--c-faint);vertical-align:middle;margin-left:4px}
.cx-gauge small{margin-top:24px;font-size:.68rem;color:var(--c-mute);white-space:nowrap}

/* 画中画：白屏特写，点它切到凑近白屏 */
body.cinema .cx-pip{left:28px;right:auto;top:auto;bottom:var(--cx-pip-bottom,210px);width:min(16vw,210px);background:var(--c-card);border:1px solid var(--c-line);border-radius:10px;box-shadow:0 10px 40px rgba(0,0,0,.45);padding:8px;cursor:pointer;pointer-events:auto;z-index:6}
body.cinema .cx-pip figcaption{color:var(--c-text);font-size:.72rem;padding:2px 4px 6px}
body.cinema .cx-pip figcaption span:before{content:"● ";color:var(--terra)}
body.cinema .cx-pip figcaption em{color:var(--c-mute)}
body.cinema .cx-pip.win{box-shadow:0 0 0 2px var(--honey),0 10px 40px rgba(0,0,0,.45)}

/* 自由玩下隐藏旧控件；其他档用浮动卡片承接原侧栏和控制条 */
body.cinema .drag-hint{display:none!important}
body.cinema[data-ui="free"] .controls,body.cinema[data-ui="free"] .side{display:none!important}
body.cinema:not([data-ui="free"]) .cx-hero,body.cinema:not([data-ui="free"]) .cx-panel,body.cinema:not([data-ui="free"]) .cx-state,body.cinema:not([data-ui="free"]) .cx-gauge{display:none}
body.cinema:not([data-ui="free"]) .side{position:fixed;left:28px;top:96px;bottom:110px;z-index:8;width:min(30vw,380px);overflow:auto;border:1px solid var(--c-line);border-radius:10px;background:#FEFCF6;color:var(--ink);padding:16px 18px}
body.cinema:not([data-ui="free"]) .controls{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:9;width:min(92vw,1100px);background:var(--c-card);border:1px solid var(--c-line)}
body.cinema:not([data-ui="free"]) .cx-pip{bottom:110px;right:28px;width:min(22vw,300px)}
body.cinema .subtitle{z-index:10;bottom:110px}

@media (max-width:860px){
  body.cinema .app-shell{height:auto}
  body.cinema #stage{position:relative;height:auto}
  body.cinema .figure-wrap{position:relative;height:auto;display:block;aspect-ratio:auto}
  body.cinema #gl{position:relative;aspect-ratio:4/5;height:auto}
  .cx-hero{position:relative;left:auto;top:auto;max-width:none;padding:84px 16px 8px}.cx-hero h2{font-size:2.1rem;margin-bottom:10px}.cx-hero p{font-size:.86rem}
  .cx-vignette{display:none}
  .cx-pill{position:relative;right:auto;top:auto;margin:10px 16px;justify-content:center}.cx-pill button{flex:1;padding:.5rem .3rem}
  .cx-gauge{display:none}
  .cx-state,.cx-panel{position:relative;left:auto;right:auto;bottom:auto;width:auto;margin:10px 16px}
  body.cinema .cx-pip{position:absolute;right:24px;top:auto;bottom:auto;width:36%}
  body.cinema .ui-switch{top:50px}
}
@media (max-width:860px){body.cinema .figure-wrap{display:flex;flex-direction:column}.cx-hero{order:-2}.cx-pill{order:-1}body.cinema #gl{order:0}.cx-state{order:2}.cx-panel{order:1}body.cinema .cx-pip{top:calc(var(--cx-gl-top,300px) + 12px)}}
@media (max-width:860px){body.cinema .app-header{left:16px;right:16px}body.cinema .ui-switch{position:absolute;left:0;right:0;top:34px}body.cinema .ui-switch button{flex:1;padding:.2rem .1rem;font-size:.7rem}.cx-hero{padding-top:78px}}
@media (max-width:860px){body.cinema .ui-switch{width:auto;display:flex}body.cinema .ui-switch button{min-width:0;flex:1 1 0;font-size:.68rem;padding:.22rem 0;overflow:hidden}}

/* 标题下的“先听讲解”按钮 */
.cx-lecture{margin-top:18px;pointer-events:auto;background:transparent;border:1px solid rgba(243,238,223,.25);color:var(--c-text);border-radius:999px;font-size:.84rem;padding:.5rem 1rem}
@media(hover:hover) and (pointer:fine){.cx-lecture:hover{border-color:var(--honey);color:var(--honey)}}
.cx-hero{pointer-events:none}.cx-hero .cx-lecture{pointer-events:auto}
/* 讲解、跟着走、课堂版：原侧栏变成浅色浮卡，原控制条浮在底部 */
body.cinema:not([data-ui="free"]) .cx-pill{display:none}
body.cinema[data-ui="auto"] .side{top:96px;bottom:120px}
body.cinema .auto-cover,body.cinema .auto-end{background:rgba(21,24,33,.55)}
@media (max-width:860px){body.cinema:not([data-ui="free"]) .side{position:static;width:auto;margin:10px 16px}body.cinema:not([data-ui="free"]) .controls{position:static;transform:none;width:auto;margin:10px 16px}}
/* 侧栏换成深色：直接改它用到的颜色变量，里面的卡片、选项、表格跟着变 */
body.cinema .side{--bg:#1D2130;--panel:#252A3B;--ink:#F3EEDF;--muted:#A7A49A;--faint:#6E6D68;--hair:rgba(243,238,223,.1);--honey-soft:#3A3322;--pine-soft:#1F3329;--terra-soft:#3A2420;--pine-deep:#1F4A38}
body.cinema:not([data-ui="free"]) .side{background:var(--c-card)!important;color:var(--c-text)!important;box-shadow:0 18px 50px rgba(0,0,0,.4)}
body.cinema .side .pick canvas{background:#151821}
body.cinema .side .feedback{background:#1F4A38}
body.cinema .side .now-card{background:#1F4A38}
body.cinema[data-ui="class"] .cx-pill{display:flex}
/* 各实验自带的小读数卡也换成深色 */
body.cinema .clock-card,body.cinema .scale-card,body.cinema .angle-card{--bg:#1D2130;--panel:#252A3B;--ink:#F3EEDF;--muted:#A7A49A;--hair:rgba(243,238,223,.1);--honey-soft:#3A3322;background:#1D2130!important;color:#F3EEDF;border:1px solid rgba(243,238,223,.12)!important;box-shadow:0 14px 40px rgba(0,0,0,.4)!important}
body.cinema .clock-card small,body.cinema .scale-card small,body.cinema .angle-card small,body.cinema .scale-card em{color:#A7A49A}
body.cinema .clock-card b,body.cinema .scale-card b,body.cinema .angle-card b{color:#F3EEDF}
body.cinema .scale-card b.tip,body.cinema .ac.c b{color:#E07A62}body.cinema .scale-card b.flat,body.cinema .ac.o b{color:#7FBF9C}
body.cinema .ocular{background:#1D2130!important;border:1px solid rgba(243,238,223,.1)!important;box-shadow:0 14px 40px rgba(0,0,0,.4)!important}