/* Blood and Heat are isolated review studies, with Oracle's velvet and metal. */
.app-dock[hidden] { display:none!important; }
.resource-lab-app { width:min(100%,820px); padding:0 max(8px,env(safe-area-inset-right,0px)) max(22px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); }
.resource-lab-shell { min-height:100svh; overflow:hidden; position:relative; isolation:isolate; padding:12px clamp(12px,3.4vw,29px) 28px; border:1px solid #70533d80; border-radius:22px; background:radial-gradient(ellipse at 50% 27%,#220809 0%,#0a0608 55%,#060507 100%); box-shadow:0 0 0 4px #080708,0 18px 90px #000b,inset 0 0 0 4px #92704a0b; }
.resource-lab-shell::before { content:''; position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('../assets/textures/velvet.webp') center/460px;opacity:.09; }
.lab-header { position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:48px;gap:6px; }
.lab-header p { margin:0;color:#aa856b;font-size:clamp(.58rem,1.9vw,.8rem);letter-spacing:.25em;white-space:nowrap; }
.lab-header p span { display:inline-block;margin-inline:5px;color:#aa3d39; }
.lab-close { display:inline-flex;align-items:center;justify-self:start;min-height:44px;gap:9px;padding:0 12px;border:1px solid #8b654a70;border-radius:8px;background:linear-gradient(#1a0d0ede,#0a080acc);box-shadow:inset 0 0 0 2px #c7964420;color:#d7b6a0;text-decoration:none;font-size:.9rem;letter-spacing:.13em;text-transform:uppercase; }
.lab-close span { color:#cf5650;font:1.2rem Arial,sans-serif; }
.lab-close:hover { border-color:#c56959;color:#fff1dd; }
.lab-close:focus-visible { outline:2px solid #f1a08e;outline-offset:3px; }
.lab-title-block { position:relative;display:grid;justify-items:center;text-align:center;padding:8px 4px 18px; }
.lab-title-rule { display:block;width:min(240px,56vw);height:10px;margin:0 auto 10px;background:url('../assets/oracle/title-rule.png') center/contain no-repeat;filter:sepia(.7) saturate(1.5) hue-rotate(320deg);opacity:.7; }
.lab-overline { margin:0;color:#ad6e62;font-size:clamp(.67rem,2vw,.87rem);letter-spacing:.35em;line-height:1.35; }
.lab-title-block h1 { margin:0 0 -3px;max-width:100%;color:#edb8a3;font-size:clamp(2.25rem,14vw,6.7rem);font-weight:400;line-height:.98;letter-spacing:.16em;text-indent:.16em;text-shadow:0 0 20px #d1383429,0 2px 1px #020102; }
.lab-deck { margin:6px 0 0;max-width:31rem;color:#b7a49b;font-size:clamp(.98rem,3vw,1.27rem);font-style:italic;line-height:1.24; }
.lab-tabs,.lab-treatment-rail { display:grid;gap:5px;padding:4px;border:1px solid #94755575;border-radius:10px;background:linear-gradient(#1b1213,#0b090b 66%);box-shadow:0 4px 16px #0007,inset 0 1px 0 #cda06921; }
.lab-tabs { grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 10px; }
.lab-treatment-rail { grid-template-columns:repeat(3,minmax(0,1fr));margin-top:10px; }
.lab-tabs button,.lab-treatment-rail button { position:relative;min-width:0;min-height:47px;padding:6px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:#a99a91;font-size:clamp(1rem,3.7vw,1.38rem);font-weight:400;letter-spacing:.09em;text-transform:uppercase;transition:background .18s,border-color .18s,color .18s,box-shadow .18s; }
.lab-treatment-rail button { font-size:clamp(.44rem,3.7vw,1.2rem);letter-spacing:.025em;padding-inline:2px; }
.lab-tabs button+button::before,.lab-treatment-rail button+button::before { content:'';position:absolute;left:-4px;top:23%;bottom:23%;width:1px;background:linear-gradient(transparent,#a47d5666,transparent); }
.lab-tabs button[aria-selected=true],.lab-treatment-rail button[aria-selected=true] { border-color:#b487647e;background:radial-gradient(ellipse at 50% 103%,#6b1b2288,transparent 75%),linear-gradient(#2a1519,#150b0d);box-shadow:inset 0 0 0 2px #dcaa6222,inset 0 7px 17px #090307ad,0 0 15px #8c1e203b;color:#f1d8c6;text-shadow:0 0 14px #db66526b; }
.lab-tabs button:hover,.lab-treatment-rail button:hover { color:#f1d6c3;background-color:#3e151c70; }
.lab-tabs button:focus-visible,.lab-treatment-rail button:focus-visible,.lab-stage:focus-visible { outline:2px solid #f4a48a;outline-offset:3px;z-index:10; }
.lab-stage { position:relative;isolation:isolate;overflow:hidden;height:clamp(385px,105vw,530px);border:1px solid #95735898;border-radius:13px;background:#020102;box-shadow:inset 0 0 0 2px #10090a,0 13px 32px #0009;touch-action:pan-y; }
.lab-stage[role=button] { cursor:crosshair; }
.lab-stage[data-resource=blood] { background:radial-gradient(ellipse at 50% 48%,#280909,#020102 70%); }
.lab-stage[data-resource=heat] { background:radial-gradient(ellipse at 50% 72%,#2b0904,#020102 68%); }
.lab-poster,.lab-clean-plate,.lab-stage .ambient-video,.lab-atmosphere,.lab-particles,.lab-siphon,.lab-reflection,.lab-field { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;pointer-events:none; }
.lab-poster { z-index:0; }
.lab-clean-plate { z-index:0;opacity:0; }
.lab-stage.has-field .lab-clean-plate { opacity:1; }
.lab-stage .ambient-video { z-index:1;opacity:0;transition:opacity .3s ease; }
.lab-stage.is-playing .ambient-video { opacity:1; }
.lab-stage.lab-static .ambient-video { display:none; }
.lab-atmosphere { z-index:1;opacity:0;mix-blend-mode:screen; }
.lab-reflection { z-index:2;opacity:0;mix-blend-mode:screen; }
.lab-stage.has-field .lab-atmosphere { opacity:.42; }
.lab-stage.has-field .lab-reflection { opacity:.6; }
.lab-particles,.lab-siphon { z-index:2;opacity:0;mix-blend-mode:screen; }
.lab-stage.has-field .lab-particles { opacity:.55;animation:lab-sparks 8s ease-in-out infinite alternate; }
.lab-stage.has-field .lab-siphon { opacity:.4; }
@keyframes lab-sparks { from { transform:translateY(1px);opacity:.3; } to { transform:translateY(-4px);opacity:.65; } }
.lab-field { z-index:3;object-fit:cover; }
.lab-field[hidden] { display:none; }
.lab-stage-vignette { position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(0deg,#020102a1 0%,transparent 16%,transparent 85%,#020102a8),linear-gradient(90deg,#0201025b,transparent 14%,transparent 86%,#0201025b); }
.lab-stage-corners { position:absolute;inset:0;z-index:5;pointer-events:none;border:20px solid transparent;border-image:url('../assets/oracle/frame-panel-v1.png') 175/20px/0 stretch;opacity:.64; }
.lab-stage-index { position:absolute;z-index:6;bottom:13px;left:16px;color:#b89b86;font-size:.69rem;letter-spacing:.24em;text-shadow:0 1px 5px #000;pointer-events:none; }
.lab-caption { display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;padding:15px clamp(5px,2vw,18px) 0; }
.lab-caption-number { margin:2px 0 0;padding:2px 0;border-right:1px solid #98705266;color:#9b6559;font-size:1rem;letter-spacing:.08em; }
.lab-caption h2 { overflow-wrap:anywhere;margin:0;color:#e0c3af;font-size:clamp(1.4rem,4.6vw,1.9rem);font-weight:400;letter-spacing:.16em;text-transform:uppercase;line-height:1; }
.lab-caption p:not(.lab-caption-number) { margin:4px 0 0;color:#b6a49c;font-size:clamp(1rem,3vw,1.2rem);line-height:1.19; }
.lab-hint { margin:14px 5px 0;padding:9px 12px;border-top:1px solid #89563759;border-bottom:1px solid #89563759;color:#c38e77;font-size:.93rem;letter-spacing:.035em;text-align:center; }
.lab-disclaimer { margin:13px 8px 0;color:#907e79;font-size:.85rem;line-height:1.35;text-align:center; }
@media(max-width:480px){ .lab-header { grid-template-columns:1fr;row-gap:1px; }.lab-header p { grid-row:2;justify-self:center;max-width:100%;white-space:normal;text-align:center; }.lab-header-end { display:none; } }
@media(max-width:380px){ .lab-title-block h1 { letter-spacing:.14em;text-indent:.14em; }.lab-stage { height:385px; }.lab-stage-index { bottom:9px;left:11px; }.lab-treatment-rail button { padding-inline:1px; } }
@media(min-width:700px){ .resource-lab-shell { padding-inline:30px; }.lab-stage { height:530px; }.lab-title-block { padding-bottom:22px; } }
@media(prefers-reduced-motion:reduce){ .lab-tabs button,.lab-treatment-rail button,.lab-stage .ambient-video { transition:none!important; }.lab-stage .ambient-video,.lab-field { display:none!important; }.lab-particles { animation:none!important; } }
@media(prefers-contrast:more){ .resource-lab-shell,.lab-stage,.lab-tabs,.lab-treatment-rail { border-color:#d2a988; }.lab-tabs button[aria-selected=true],.lab-treatment-rail button[aria-selected=true] { border-color:#f2bb9b;background:#371317; }.lab-deck,.lab-caption p:not(.lab-caption-number),.lab-hint,.lab-disclaimer { color:#e4d2c7; } }
.lab-orb-canvas { position:absolute;inset:0;width:100%;height:100%;z-index:3;opacity:0;pointer-events:none;transition:opacity .35s; }
.has-orb-3d .lab-orb-canvas { opacity:1; }
.has-orb-3d .lab-poster { visibility:hidden; }
@media(prefers-reduced-motion:reduce){.lab-orb-canvas{display:none}.has-orb-3d .lab-poster{visibility:visible}}
.lab-version-tabs { margin:-2px 0 12px; }
.lab-version-tabs button { min-height:44px;font-size:clamp(.8rem,2.8vw,1rem);letter-spacing:.07em;white-space:normal; }

/* Film layers are composited from one decoder; never expose the packed atlas. */
.lab-stage.has-packed-film .ambient-video { opacity:0!important;pointer-events:none; }
.lab-film-canvas { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;opacity:0;pointer-events:none;transition:opacity .25s; }
.lab-stage.has-blood-film.is-playing .lab-film-canvas { opacity:1; }
@media(prefers-reduced-motion:reduce){.lab-film-canvas{display:none!important;transition:none}}

/* Black Ember keeps its approved portrait composition. The moving flame and
   coupled floor light sit over a matched still; frame edges stay fixed.
   The mask is fully opaque across the source flame's entire travel envelope. */
.lab-stage.lab-heat-cinema { width:min(100%,480px);height:auto;aspect-ratio:2/3;margin-inline:auto;background:#090808; }
.lab-heat-cinema .ambient-video { mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 95%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 95%,transparent 100%); }
.lab-heat-cinema .lab-stage-vignette { background:linear-gradient(0deg,#02010260,transparent 15%,transparent 90%,#02010230); }

/* Veiled Blood preserves the full portrait and connected pool. */
.lab-stage.lab-blood-cinema { width:min(100%,480px);height:auto;aspect-ratio:2/3;margin-inline:auto;background:#090808; }
.lab-blood-cinema .lab-stage-vignette { background:linear-gradient(0deg,#02010250,transparent 15%,transparent 90%,#02010220); }