/* 元素观察室 · 影片放映厅
   与 lab-renderer.js 的深色实验台同源：深色银幕 + 暖白字 + 金色强调。
   面板本身是深色的，嵌在浅色纸面上，像展厅里的一间放映室。 */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(../assets/fonts/Inter-400.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(../assets/fonts/Inter-500.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(../assets/fonts/Inter-600.ttf) format('truetype')}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(../assets/fonts/Inter-700.ttf) format('truetype')}

.lab-studio{
  --lab-bg0:#0a1014;--lab-bg1:#0f1a21;--lab-bg2:#12212a;
  --lab-ink:#eef4f6;--lab-ink2:#c2d3da;--lab-muted:#87a0ac;--lab-faint:#5d7480;
  --lab-hair:rgba(255,255,255,.09);--lab-hair2:rgba(255,255,255,.18);--lab-gold:#d9ad63;
  color:var(--lab-ink);
  font-family:Inter,Manrope,"PingFang SC","Hiragino Sans GB",sans-serif;
  background:radial-gradient(120% 90% at 22% 0%,#12242e 0%,var(--lab-bg1) 46%,var(--lab-bg0) 100%);
  border-radius:16px;padding:24px 26px 20px;margin:6px 0 22px;
  box-shadow:0 22px 50px rgba(10,20,26,.30),inset 0 1px 0 rgba(255,255,255,.05);
  max-width:1240px
}
.lab-studio *{box-sizing:border-box}
.lab-studio button,.lab-studio select{font:inherit;cursor:pointer;color:inherit}
.lab-studio button{background:none;border:0;min-height:34px}
.lab-studio :focus-visible{outline:2px solid #d9ad63;outline-offset:3px;border-radius:4px}
.lab-studio a{color:var(--lab-gold);text-decoration:none}
.lab-studio a:hover{text-decoration:underline}
.lab-studio h4{margin:0 0 12px;font:600 11px/1 Inter,sans-serif;letter-spacing:.16em;color:var(--lab-faint);text-transform:uppercase}

.lab-studio-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 18px}
.lab-eyebrow{font:600 11px/1 Inter,sans-serif;letter-spacing:.2em;color:var(--lab-muted)}
.lab-studio-heading h3{margin:9px 0 0;font:500 27px/1.35 "Songti SC","Noto Serif CJK SC",serif;color:var(--lab-ink)}
.lab-runtime{font:11px/1.6 Inter,ui-monospace,monospace;color:var(--lab-muted);white-space:nowrap}
.lab-runtime span{margin:0 7px;color:var(--lab-faint)}

.lab-choices{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.lab-choices button{border:1px solid var(--lab-hair2);border-radius:999px;padding:7px 15px;font-size:12px;color:var(--lab-ink2)}
.lab-choices button[aria-pressed=true]{background:var(--lab-gold);border-color:var(--lab-gold);color:#0a1014;font-weight:600}

.lab-screen{position:relative;isolation:isolate;background:#05090c;aspect-ratio:16/9;border:1px solid var(--lab-hair2);border-radius:12px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.lab-screen video{width:100%;height:100%;display:block;object-fit:contain;background:#05090c}
.lab-screen:fullscreen{border:0;border-radius:0;display:grid;align-items:center}
.lab-screen:fullscreen video{height:100vh}
.lab-cover-play{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:11px;border:1px solid rgba(255,255,255,.35);background:rgba(12,22,28,.72);color:#fff;border-radius:999px;padding:13px 24px;font-size:13px;backdrop-filter:blur(9px);transition:transform .18s ease}
.lab-cover-play:hover{transform:translate(-50%,-50%) scale(1.03)}
.lab-cover-play[hidden],.lab-video-error[hidden]{display:none}
.lab-video-error{position:absolute;inset:auto 16px 16px;padding:14px 16px;background:rgba(60,32,20,.94);color:#f3ddcb;border-radius:8px;font-size:13px}
.lab-video-error button{border:1px solid #a68873;margin:0 10px;padding:0 12px}

.lab-controls{display:flex;align-items:center;gap:14px;padding:14px 2px 8px}
.lab-play{display:flex;align-items:center;gap:8px;min-width:88px;padding:8px 14px;border-radius:6px;background:rgba(255,255,255,.09);font-size:12px}
.lab-play:hover{background:rgba(255,255,255,.15)}
.lab-time{font:11px Inter,ui-monospace,monospace;color:var(--lab-muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lab-seek{flex:1;min-width:60px;accent-color:#d9ad63;height:22px}
.lab-speed{padding:6px 8px;background:rgba(255,255,255,.06);border:1px solid var(--lab-hair);border-radius:6px;font-size:12px}
.lab-speed option{background:#101a21;color:#eef4f6}
.lab-fullscreen{width:36px;font-size:19px;color:var(--lab-ink2)}

.lab-chapters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:4px 0 12px}
.lab-chapters button{text-align:left;border-top:2px solid var(--lab-hair);padding:9px 0 4px;color:var(--lab-faint)}
.lab-chapters button[aria-current=step]{border-color:var(--lab-gold);color:var(--lab-ink)}
.lab-chapters small{display:block;font:10px Inter,ui-monospace,monospace;margin-bottom:6px;opacity:.85}
.lab-chapters span{font-size:12px;font-weight:500}
.lab-accessible-caption{font-size:14px;line-height:1.75;min-height:25px;margin:6px 0 12px;color:var(--lab-ink2)}

.lab-context{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--lab-hair);padding:12px 0;font-size:11px;line-height:1.8;color:var(--lab-muted)}
.lab-context span span{margin:0 5px}

.lab-learning{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:4px}
.lab-panel{background:rgba(255,255,255,.035);border:1px solid var(--lab-hair);border-radius:10px;padding:16px 18px}
.lab-panel--evidence{grid-row:span 1}
.lab-panel--quiz{display:flex;align-items:flex-start}
.lab-panel--quiz .lab-quiz{flex:1}

/* 现象证据：随影片打勾 */
.lab-evidence{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.lab-evidence li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;line-height:1.55;color:var(--lab-faint);transition:color .25s ease}
.lab-evidence li button{flex:0 0 19px;width:19px;height:19px;min-height:0;margin-top:1px;border:1.4px solid rgba(255,255,255,.24);border-radius:50%;display:grid;place-items:center;padding:0}
.lab-evidence li button i{font-style:normal;font-size:11px;color:#0a1014;opacity:0;transition:opacity .2s ease}
.lab-evidence li[data-on=true]{color:var(--lab-ink)}
.lab-evidence li[data-on=true] button{background:var(--lab-gold);border-color:var(--lab-gold)}
.lab-evidence li[data-on=true] button i{opacity:1}
.lab-evidence-note{margin:12px 0 0;font-size:11px;line-height:1.6;color:var(--lab-faint)}

/* 符号表达 */
.lab-equation p,.lab-ionic p{margin:0;font-family:Inter,"Songti SC",serif}
.lab-equation small,.lab-ionic small{display:block;font:600 9.5px Inter,sans-serif;letter-spacing:.14em;color:var(--lab-faint);margin-bottom:7px}
.lab-equation p{font-size:21px;line-height:1.5;color:var(--lab-ink)}
.lab-ionic{margin-top:14px;padding-top:13px;border-top:1px solid var(--lab-hair)}
.lab-ionic p{font-size:17px;color:var(--lab-gold);line-height:1.5}
.lab-oxidation{margin-top:14px;padding-top:12px;border-top:1px solid var(--lab-hair);display:grid;gap:7px}
.lab-oxidation span{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--lab-ink2)}
.lab-oxidation b{font-size:14px;font-weight:600;min-width:26px}
.lab-oxidation em{font-style:normal;font-family:Inter,ui-monospace,monospace;font-size:13px;letter-spacing:.02em}
.lab-oxidation i{font-style:normal;font-size:11.5px;color:var(--lab-muted)}
.lab-oxidation i.ox{color:#e29a72}
.lab-oxidation i.red{color:#7fc0e0}

/* 金属活动性顺序 */
.lab-series{margin:0}
.lab-series-row{display:flex;gap:5px;flex-wrap:wrap}
.lab-series-chip{flex:1 1 auto;text-align:center;min-width:34px;padding:7px 0;border-radius:6px;background:rgba(255,255,255,.045);border:1px solid var(--lab-hair);font:500 12.5px Inter,sans-serif;color:var(--lab-faint)}
.lab-series-chip.is-self{background:var(--lab-gold);border-color:var(--lab-gold);color:#0a1014;font-weight:700}
.lab-series-chip.is-partner{border-color:rgba(217,173,99,.7);color:var(--lab-gold)}
.lab-series p{margin:11px 0 0;font-size:12px;line-height:1.65;color:var(--lab-muted)}

/* 读懂这次变化 */
.lab-levels{display:flex;gap:16px;border-bottom:1px solid var(--lab-hair);margin:0 0 12px}
.lab-levels button{padding:6px 0 9px;font-size:11.5px;color:var(--lab-muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.lab-levels button[aria-pressed=true]{color:var(--lab-gold);border-color:var(--lab-gold)}
.lab-level-copy{margin:0;font-size:13px;line-height:1.8;color:var(--lab-ink2)}
.lab-context-note{margin:11px 0 0;font-size:12.5px;line-height:1.75;color:var(--lab-muted)}
.lab-context-note b{color:var(--lab-ink2);margin-right:6px}
.lab-misconception{margin:11px 0 0;font-size:12.5px;line-height:1.75;color:var(--lab-muted)}
.lab-misconception b{color:#e0a179;margin-right:6px;font-weight:600}

/* 自测 */
.lab-quiz summary{font-size:13px;color:var(--lab-ink2);cursor:pointer;padding:2px 0 10px;list-style:none}
.lab-quiz summary::-webkit-details-marker{display:none}
.lab-quiz summary::before{content:'▸';display:inline-block;margin-right:8px;color:var(--lab-gold);transition:transform .2s ease}
.lab-quiz[open] summary::before{transform:rotate(90deg)}
.lab-quiz fieldset{margin:0;border:0;padding:0}
.lab-quiz legend{padding:0 0 10px;font-size:13.5px;line-height:1.6;color:var(--lab-ink)}
.lab-quiz [data-answer]{display:block;width:100%;margin:6px 0;padding:9px 13px;text-align:left;font-size:12.5px;border:1px solid var(--lab-hair);border-radius:7px;color:var(--lab-ink2)}
.lab-quiz [data-answer]:hover{background:rgba(255,255,255,.05)}
.lab-quiz [data-answer][aria-pressed=true]{border-color:rgba(217,173,99,.8)}
.lab-quiz [data-answer][data-correct=true]{border-color:#6ea88a;background:rgba(110,168,138,.16);color:var(--lab-ink)}
.lab-feedback{margin:10px 0 0;font-size:12.5px;line-height:1.7;color:var(--lab-ink2)}

.lab-footnote{border-top:1px solid var(--lab-hair);margin-top:16px;padding:13px 0 2px;color:var(--lab-faint);font-size:11px;line-height:1.75}
.lab-footnote p{margin:0 0 9px}
.lab-footnote>div{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.lab-record{color:var(--lab-muted)}
.lab-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 详情面板里的影片页：让银幕拿到整幅宽度 */
.pm-world .pm-folio[data-tab=film] .pm-folio-content{display:block;overflow:auto}
.pm-folio[data-tab=film] .pm-visuals{display:none}
.pm-folio[data-tab=film] .pm-dossier-header{display:none}
.pm-folio[data-tab=film] .pm-reading{height:auto!important;min-height:100%;overflow:visible!important;padding:0 26px 20px!important}
.pm-folio[data-tab=film] .pm-detail-tabs{padding:16px 0 12px;background:#f7f6f2}
.pm-folio[data-tab=film] .lab-studio{max-width:1100px}

@media(max-width:900px){
  .lab-learning{grid-template-columns:1fr}
  .lab-studio{padding:18px 16px 16px;border-radius:12px}
  .lab-studio-heading{flex-direction:column;align-items:flex-start;gap:8px}
  .lab-studio-heading h3{font-size:22px}
  .lab-chapters{gap:8px}
  .lab-chapters span{font-size:10.5px}
  .lab-context{flex-wrap:wrap}
  .lab-equation p{font-size:18px}
  .lab-ionic p{font-size:15px}
  .lab-controls{gap:9px}
  .lab-play{min-width:46px;padding:8px 10px}
  .lab-play [data-play-label]{display:none}
  .pm-folio[data-tab=film] .pm-reading{padding:0 12px 18px!important}
  .pm-folio[data-tab=film] .pm-detail-tabs{position:static}
  .pm-folio[data-tab=lab] .pm-reading{padding:0 14px 18px!important}
  .pm-folio[data-tab=lab] .pm-detail-tabs{position:static}
}
@media(prefers-reduced-motion:reduce){.lab-studio *{transition:none!important}}

/* 互动实验台所在的「变化实验」标签：银幕页沿用整幅宽度与自身滚动 */
.pm-world .pm-folio[data-tab=lab] .pm-folio-content{display:block;overflow:auto}
.pm-folio[data-tab=lab] .pm-visuals{display:none}
.pm-folio[data-tab=lab] .pm-dossier-header{display:none}
.pm-folio[data-tab=lab] .pm-reading{height:auto!important;min-height:100%;overflow:visible!important;padding:0 32px 20px!important}
.pm-folio[data-tab=lab] .pm-detail-tabs{padding:16px 0 12px;background:#f7f6f2}

/* 元素档案里的影片页外层 */
.pm-film{padding:2px 0 6px}
.pm-film-empty{color:#4b5f6a;font-size:13px;line-height:1.8;padding:18px 0}
.pm-film .lab-studio{margin-top:0}

/* =======================================================================
   镭射卡面（holo-foil.js）
   一块共用 WebGL 画布，叠在"当前这一张"卡上。alpha 由着色器自己控制
   （亮带 + 白热带心 + 星光 + 高光），因此色相能完整保留。
   ======================================================================= */
.pm-holo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  z-index: 7;
  border-radius: inherit;
  mix-blend-mode: normal;
  opacity: 1;
  /* 箔面的"彩"最终由这一道收口：只抬彩度，不动 alpha，
     所以光带更亮更艳，而它们之间的空隙依然是干净的卡面。 */
  filter: saturate(1.45);
  animation: pm-holo-in 0.3s ease both;
}
@keyframes pm-holo-out { from { opacity: 1 } to { opacity: 0 } }
.pm-holo-layer.is-out { animation: pm-holo-out 0.19s ease both }
@keyframes pm-holo-in { from { opacity: 0 } to { opacity: 1 } }

/* 镭射层接管后，关掉 CSS 版本的彩虹层，避免两层叠出脏色；
   斜向扫光也收起来——它和真实衍射条纹是同一件事的两种画法。 */
.pm-holo-card[data-holo="shader"] .pm-holo-foil,
.pm-holo-card[data-holo="shader"] .pm-holo-glare { opacity: 0 !important }
.pm-album-grid > button[data-holo="shader"]:after { opacity: 0 }
.pm-album-grid > button[data-holo="shader"]:hover:after { transform: translate(-100%) }

/* 标本随倾斜轻微视差，卡面才像有厚度 */
.pm-album-specimen img { transform: translate3d(var(--face-x, 0px), var(--face-y, 0px), 0) }
.pm-album-grid > button { transition: transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease }
.pm-album-grid > button:hover { box-shadow: inset 0 0 0 5px #fff9, 0 20px 40px color-mix(in srgb, var(--rarity) 26%, transparent) }

/* 键盘聚焦时也给到同样的镭射面 */
.pm-album-grid > button:focus-visible { outline: 2px solid var(--rarity); outline-offset: 3px }

@media (prefers-reduced-motion: reduce) {
  .pm-holo-layer { animation: none; opacity: 0.75 }
  .pm-album-specimen img { transform: none }
}