/* Stratum story experience. Geometry is stable; motion uses transform and opacity. */
.player-open { overflow:hidden; }
.hob-player { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:0; margin:0; border:0; background:var(--bg); color:var(--ink); overflow:hidden; font-synthesis:none; }
.hob-player::backdrop { background:transparent; }
.hob-player button { cursor:pointer; }
.hob-player button:disabled { cursor:default; opacity:.5; }
.player-header { height:72px; padding:10px 24px; display:flex; align-items:center; gap:12px; border-bottom:1px solid var(--hairline); position:relative; z-index:5; background:var(--bg); }
.player-header>button { background:transparent; color:inherit; border:0; min-width:44px; height:44px; padding:0; font:var(--type-title); }
.player-count { font:var(--type-figure); font-variant-numeric:tabular-nums; white-space:nowrap; }
.progress-ticks { display:flex; align-items:center; gap:5px; flex:1; height:24px; max-width:720px; margin:auto; }
.progress-ticks>span { position:relative; height:3px; background:var(--hairline); flex:1; }
.progress-ticks>span::before { content:''; position:absolute; inset:0; background:var(--copper); transform:scaleX(0); transform-origin:left; transition:transform var(--t-route) var(--ease-out); }
.progress-ticks>.reached::before { transform:scaleX(1); }
.progress-ticks>.hollow { background:transparent; outline:1px solid var(--ink2); }
.progress-ticks b { position:absolute; top:4px; left:40%; font:var(--type-caption); color:var(--copper); }
.player-scroll { height:calc(100% - 72px); overflow:auto; overscroll-behavior:contain; }
.player-layout { display:grid; grid-template-columns:minmax(0,55fr) minmax(0,45fr); align-items:start; min-height:100%; }
.player-visual { position:sticky; top:0; padding:32px; min-width:0; }
.player-figure { margin:0 0 24px; background:radial-gradient(ellipse at var(--spot-x,50%) 45%,#3a2522,#120c0c 72%); }
.artifact-stage { position:relative; overflow:hidden; width:fit-content; max-width:100%; margin:auto; }
.image-zoom { transform-origin:center; transition:transform var(--t-exit) var(--ease-linear),translate var(--t-object) var(--ease-out); }
.image-zoom picture { display:block; }
.image-zoom img { display:block; width:auto; max-width:100%; height:auto; max-height:calc(var(--vvh,100dvh) - 200px); object-fit:contain; }
.player-figure .credit { padding:12px; color:#BCADA8; font:var(--type-caption);  }
.player-figure .credit a { color:inherit; }
.player-reading { max-width:684px; padding:40px 32px 32px; width:100%; min-width:0; }
.player-text h1 { font:var(--type-display); margin:8px 0 20px; }
.player-text [tabindex='-1']:focus { outline:none; }
.narration-copy { position:relative; padding-left:16px; }
.narration-copy::before,.narration-copy::after { content:''; position:absolute; top:0; bottom:0; width:2px; left:0; background:var(--hairline); }
.narration-copy::after { background:var(--copper); transform:scaleY(var(--narration,0)); transform-origin:top; }
.sources-chip { margin:16px 0; background:transparent; color:var(--ink2); border:1px solid var(--hairline); border-radius:var(--r-control); padding:12px 16px; font:var(--type-figure); min-height:44px; }
.player-footer { margin-top:24px; }
.player-audio { padding:12px; background:var(--surfaceRaised); border-radius:var(--r-control); box-shadow:var(--float); border:1px solid var(--hairline); margin-bottom:16px; }
.audio-caption { display:flex; align-items:center; justify-content:space-between; gap:8px; font:var(--type-caption); color:var(--ink2); padding:0 4px 8px; }
.audio-controls { display:flex; gap:8px; align-items:center; }
.audio-controls button { flex:none; min-width:44px; height:44px; padding:0; border:0; background:transparent; color:var(--ink); font:var(--type-body); }
.audio-controls .audio-toggle { border-radius:50%; background:var(--action); color:var(--onAction); font:var(--type-title); }
.audio-controls input[type=range] { min-width:20px; flex:1; width:100%; height:44px; accent-color:var(--copper); padding:0; background:transparent; border:0; }
.audio-controls output { font:var(--type-figure); font-variant-numeric:tabular-nums; flex:none; }
.audio-error { font:var(--type-caption); margin:12px 0 0; }
.player-navigation { display:flex; gap:12px; }
.player-navigation>.button { flex:1; }
.kind-activity { display:block; }
.kind-activity .player-reading { max-width:744px; margin:auto; }
.kind-activity .player-text>h1 { font:var(--type-headline); color:var(--ink2); margin:8px 0 20px; }
.player-activity h2 { font:var(--type-title); margin-bottom:20px; }
.answer-options { display:grid; gap:12px; }
.answer-option { display:flex; align-items:center; gap:12px; min-height:60px; text-align:left; padding:16px; background:var(--surface); color:var(--ink); border:1px solid var(--hairline); border-radius:var(--r-control); width:100%; font:var(--type-body); }
.answer-option[aria-pressed=true],.match-plate[aria-pressed=true] { border:2px solid var(--copper); background:var(--surfaceRaised); padding:15px; }
.answer-option small,.sequence-slab small { display:block; font:var(--type-caption);  margin-top:4px; }
.answer-option.is-correct { border-color:var(--correct); }
.answer-option.is-incorrect { border-color:var(--incorrect); }
.answer-mark { flex:none; width:24px; }
.is-correct { color:var(--correct); }
.is-incorrect { color:var(--incorrect); }
.answer-verdict { margin-top:24px; padding:20px; background:var(--surface); border-top:1px solid var(--hairline); animation:verdict-rise var(--t-image) var(--ease-out); }
.answer-verdict h3 { font:var(--type-title); margin-bottom:16px; }
.answer-verdict h4 { margin:16px 0 8px; }
.answer-verdict li { margin:8px 0; }
.answer-verdict dt { font-weight:600; margin-top:12px; }
.answer-verdict dd { margin:4px 0 0; }
.verdict-glyph { display:inline-block; animation:glyph-in var(--t-image) var(--ease-out); }
@keyframes glyph-in { from { opacity:0; transform:scale(.7); } to { opacity:1; transform:none; } }
@keyframes verdict-rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.sequence-options { list-style:none; padding:0; display:grid; gap:12px; margin:16px 0; }
.sequence-slab { position:relative; display:flex; gap:12px; align-items:center; padding:12px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-control); min-height:76px; }
.sequence-slab>div:nth-child(2) { flex:1; min-width:0; font:var(--type-body);  }
.drag-handle { touch-action:none; cursor:grab!important; padding:0; width:36px; min-width:36px; height:52px; border:0; background:none; color:var(--ink2); font:var(--type-title); }
.sequence-slab.picked { z-index:3; box-shadow:var(--float); }
.reorder-buttons { display:flex; gap:4px; }
.reorder-buttons button { width:40px; height:44px; padding:0; background:transparent; border:1px solid var(--hairline); color:var(--ink); border-radius:var(--r-control); }
.matching-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; position:relative; margin-top:16px; }
.matching-options>div { display:flex; flex-direction:column; gap:12px; }
.match-plate { display:flex; align-items:center; gap:8px; min-height:80px; flex:1; padding:16px; text-align:left; width:100%; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--surface); color:var(--ink); font:var(--type-body);  overflow-wrap:anywhere; }
.pair-badge { font:var(--type-figure); border:1px solid var(--copper); border-radius:50%; min-width:24px; height:24px; display:grid; place-items:center; }
.pair-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }
.pair-threads path { transform-box:fill-box; transform-origin:left center; fill:none; stroke:var(--copper); stroke-width:1.5; animation:thread-in var(--t-ui) var(--ease-out); }
@keyframes thread-in { from { opacity:0; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }
.artifact-player { --bg:#120C0C; --surface:#1B1414; --surfaceRaised:#241B1A; --ink:#F2EAE6; --ink2:#BCADA8; --ink3:#9A8984; --hairline:#342826; --action:#ECE1DB; --onAction:#2A1214; --copper:#E0956A; color-scheme:dark; }
.hotspot { position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%); display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:transparent; color:#F2EAE6; font:var(--type-caption); isolation:isolate; }
.hotspot::before { content:''; position:absolute; z-index:-1; width:30px; height:30px; border:1.5px solid #E0956A; background:#120c0ce0; border-radius:50%; animation:hotspot-pulse var(--t-hotspot) var(--ease-in-out); animation-delay:calc(var(--i)*var(--t-press)); }
@keyframes hotspot-pulse { 50% { transform:scale(1.15); } }
.loupe-open .hotspot:not([aria-expanded=true]) { opacity:.35; }
.image-zoom.loupe { transform:scale(2.2)!important; transition:transform var(--t-object) var(--ease-out); }
.hotspot-plate { padding:20px; background:var(--surfaceRaised); border:1px solid var(--hairline); border-radius:var(--r-control); animation:verdict-rise var(--t-object) var(--ease-out); margin-bottom:20px; }
.hotspot-heading { display:flex; align-items:start; justify-content:space-between; gap:16px; }
.hotspot-heading h3 { font:var(--type-title); }
.hotspot-heading button,.detail-actions button { background:transparent; color:var(--ink); min-width:44px; min-height:44px; border:1px solid var(--hairline); border-radius:var(--r-control); }
.hotspot-plate .reading { font:var(--type-bodyRead);  }
.detail-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.player-details { margin:20px 0; border-top:1px solid var(--hairline); padding-top:16px; }
.player-details summary { cursor:pointer; min-height:44px; }
.player-details li { margin-bottom:16px; }
.player-details button { color:var(--copper); border:0; background:none; padding:8px 0; text-align:left; min-height:44px; }
.player-map-stage { position:relative; overflow:hidden; border:1px solid var(--hairline); }
.player-map-stage img { width:100%; height:auto; }
.player-map-stage .map-dark { position:absolute; inset:0; }
.player-map-pin { position:absolute; width:40px; height:40px; min-width:40px; padding:0; display:grid; place-items:center; transform:translate(-50%,-50%); background:var(--surfaceRaised); color:var(--ink); border:1px solid var(--copper); border-radius:50%; font:var(--type-figure); animation:place-in var(--t-route) both var(--ease-out); animation-delay:calc(var(--i)*var(--t-scene-step)); }
.player-map-pin.approximate { border:2px dashed var(--copper); }
.map-threads { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-threads path { fill:none; stroke:var(--copper); stroke-width:.3; stroke-dasharray:1 1; animation:place-in var(--t-route) both var(--ease-out); animation-delay:calc(var(--i)*var(--t-scene-step)); }
@keyframes place-in { from { opacity:0; } to { opacity:1; } }
.show-all * { animation:none!important; }
.player-places { padding-left:24px; margin-top:16px; }
.player-places button { background:none; border:0; color:var(--ink); text-align:left; padding:8px 0; min-height:44px; }
.player-places small { display:block; color:var(--ink2); font:var(--type-caption); }
.player-places p { font:var(--type-caption);  color:var(--ink2); }
.place-selected { outline:2px solid var(--copper); outline-offset:3px; }
.player-panel { position:absolute; right:0; top:0; bottom:0; width:min(620px,100%); overflow:auto; overscroll-behavior:contain; background:var(--surface); color:var(--ink); padding:28px 32px 48px; z-index:10; box-shadow:var(--float); animation:verdict-rise var(--t-tab) var(--ease-out); }
.player-panel h2 { margin:24px 48px 20px 0; }
.player-panel h3 { font:var(--type-title); margin:24px 0 12px; }
.player-panel ol { padding-left:24px; }
.player-panel li { margin-bottom:24px; font:var(--type-caption);  overflow-wrap:anywhere; }
.player-panel .credit { color:var(--ink2); }
.panel-close { position:sticky; top:0; display:block; margin-left:auto; width:44px; height:44px; background:var(--surfaceRaised); color:var(--ink); border:1px solid var(--hairline); border-radius:var(--r-control); font:var(--type-title); }
.shortcut-list { display:grid; grid-template-columns:auto 1fr; gap:16px; }
.shortcut-list dt { font-variant-numeric:tabular-nums; }
.shortcut-list dd { margin:0; }
.auto-advance { display:flex; gap:16px; margin-top:32px; }
.completion { max-width:780px; margin:auto; padding:32px; text-align:center; }
.completion h1 { font:var(--type-display); margin:12px 0 24px; }
.completion-cell { max-width:300px; margin:0 auto 24px; border:1px solid var(--hairline); padding:16px; }
.completion-cell img { max-height:200px; object-fit:contain; width:100%; animation:collect-find var(--t-count) var(--ease-out); }
.completion-cell .credit { font:var(--type-caption);  margin-top:8px; color:var(--ink2); }
@keyframes collect-find { from { opacity:0; transform:translateY(-80px) scale(1.35); } to { opacity:1; transform:none; } }
.completion .actions { display:flex; justify-content:center; gap:12px; margin:24px 0; }
.completion h2 { margin:32px 0 16px; }
.completion-next { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; text-align:left; }
.completion-next a { border-top:1px solid var(--hairline); padding:16px 0; }
.completion-next small { display:block; color:var(--ink2); margin-top:8px; }
.completion .context-promo { margin-top:24px; text-align:left; }
.mini-player { position:fixed; z-index:60; right:24px; bottom:24px; width:min(440px,calc(100% - 40px)); display:flex; align-items:center; padding:8px; gap:8px; border:1px solid var(--hairline); background:var(--surfaceRaised); color:var(--ink); box-shadow:var(--float); border-radius:var(--r-control); }
.mini-player[hidden] { display:none; }
.mini-player button { border:0; min-width:44px; min-height:44px; color:inherit; background:transparent; cursor:pointer; }
.mini-player .mini-reopen { text-align:left; flex:1; min-width:0; padding:8px; }
.mini-reopen span,.mini-reopen small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-reopen small { color:var(--ink2); font:var(--type-caption); margin-top:4px; }
.card-actions { display:flex; gap:24px; margin-top:12px; font:var(--type-caption); }
.card-actions a { min-height:44px; display:flex; align-items:center; }
.progress-badge { font:var(--type-caption); display:block; margin:8px 0; color:var(--copper); }
.progress-badge[hidden] { display:none; }
.find-locked picture { opacity:.25; filter:grayscale(1); }
.find-collected { border-bottom:2px solid #E0956A; }
.save-story { display:block; margin-top:16px; }
@media(max-width:1099px) {
 .player-layout { display:block; }
 .player-visual { position:relative; padding:20px 20px 0; }
 .player-figure { width:fit-content; max-width:100%; margin:0 auto 16px; }
 .image-zoom img { max-height:290px; max-width:100%; }
 .player-reading { padding:20px; max-width:720px; margin:auto; }
 .player-header { height:64px; padding:6px 12px; gap:6px; }
 .player-scroll { height:calc(100% - 64px); }
 .progress-ticks { gap:3px; }
 .player-panel { top:10%; border-radius:var(--r-sheet) var(--r-sheet) 0 0; width:100%; padding:12px 20px 40px; }
 .player-text h1 { font:var(--type-display); }
 .hotspot-plate { max-width:680px; margin:16px auto 0; }
 .player-map { max-width:680px; margin:auto; }
 .player-map-stage { max-height:45vh; }
 .player-map-stage img { object-fit:contain; }
 .completion { padding:24px 20px 40px; }
 .player-footer { padding-bottom:env(safe-area-inset-bottom); }
 .player-figure .credit { max-width:680px; }
 .player-places { max-width:680px; margin-left:auto; margin-right:auto; }
 .kind-activity .player-reading { padding-top:24px; }
}
@media(max-width:759px) {
 .mini-player { right:12px; width:calc(100% - 24px); bottom:calc(82px + env(safe-area-inset-bottom)); }
 .audio-controls { gap:4px; }
 .audio-controls output { font:var(--type-figure); }
 .matching-options { gap:24px; }
 .match-plate { padding:12px; font:var(--type-caption);  }
 .match-plate[aria-pressed=true] { padding:11px; }
 .sequence-slab { gap:8px; padding:10px; }
 .sequence-slab>div:nth-child(2) { font:var(--type-caption);  }
 .reorder-buttons { flex-direction:column; }
 .reorder-buttons button { width:36px; height:36px; }
 .completion-next { display:block; }
 .completion-next a { display:block; }
 .completion .actions { flex-direction:column; }
 .player-count { font:var(--type-figure); }
 .player-header>button { min-width:40px; }
 .player-map-stage { max-height:none; }
 .player-map-pin { width:36px; height:36px; min-width:36px; }
}
@media(prefers-reduced-motion:reduce) {
 .hob-player *,.hob-player *::before,.hob-player *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
 .image-zoom.loupe { transform:none!important; }
 .image-zoom { translate:none!important; }
}
@media(max-width:1099px) {
 .player-footer { position:fixed; z-index:6; left:0; right:0; bottom:0; margin:0; padding:10px 20px calc(12px + env(safe-area-inset-bottom)); background:var(--bg); border-top:1px solid var(--hairline); }
 .player-layout .player-reading { padding-bottom:220px; }
 .player-footer .player-audio { max-width:680px; margin:0 auto 12px; }
 .player-footer .player-navigation { max-width:680px; margin:auto; }
}

.artifact-player { --read-weight:350; }
.artifact-player .image-zoom img { max-height:calc(var(--vvh,100dvh) - 430px); }
@media(max-width:1099px) { .artifact-player .image-zoom img { max-height:240px; } }

.departing-scene { position:absolute; left:0; right:0; z-index:4; pointer-events:none; background:var(--bg); }
.departing-scene .player-footer { visibility:hidden; }
::view-transition-group(*) { animation-duration:var(--t-route); animation-timing-function:var(--ease-out); }
.quiet { border:0; background:none; min-height:44px; color:inherit; padding:10px 0; font:var(--type-caption); text-decoration:underline; text-underline-offset:5px; cursor:pointer; }
.cover-label .save-story { flex-basis:100%; width:100%; margin:0; text-align:left; }
@media(max-width:1099px) { .kind-narrative .image-zoom img { max-height:210px; } }
/* A checked answer is read-only, but its verdict keeps the token contrast. */
.answer-option:disabled,.match-plate:disabled { opacity:1; }
.player-map-stage img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
@media(max-width:1099px) { .player-map-stage { max-height:none; } }
.completion-cell { position:relative; overflow:hidden; }
.completion-cell::after { content:''; position:absolute; top:0; bottom:0; left:0; width:32px; background:linear-gradient(100deg,transparent,#f6eeea26,transparent); transform:translateX(-60px) skewX(-20deg); animation:cell-sweep var(--t-count) var(--ease-out); pointer-events:none; }
@keyframes cell-sweep { from { transform:translateX(-60px) skewX(-20deg); } to { transform:translateX(360px) skewX(-20deg); } }
.seen-before .hotspot::before { animation:none; }
.player-map-pin::before { content:""; position:absolute; inset:-4px; }

/* W4: desktop reading scrolls independently; the controls never leave the viewport. */
.audio-controls #player-rate { min-width:54px; padding:0 7px; border:1px solid var(--hairline); border-radius:var(--r-control); background:var(--surface); font:var(--type-caption); white-space:nowrap; }
.player-navigation>.button { padding-inline:10px; white-space:nowrap; }
@media(min-width:1100px) {
 .hob-player:not(:has(.completion)) .player-scroll { overflow:hidden; }
 .player-layout,.kind-activity.has-visual { display:grid; height:calc(var(--vvh,100dvh) - 72px); min-height:0; }
 .player-visual { position:relative; height:100%; overflow:auto; overscroll-behavior:contain; }
 .player-reading,.kind-activity .player-reading { height:100%; min-height:0; max-width:684px; padding:0 32px; display:flex; flex-direction:column; overflow:hidden; }
 .player-text { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:36px 4px 28px; scroll-padding:24px; }
 .player-footer { position:sticky; bottom:0; flex:none; margin:0; padding:16px 0 24px; background:var(--bg); z-index:3; }
 .player-footer::before { content:''; position:absolute; height:28px; left:0; right:0; top:-28px; pointer-events:none; background:linear-gradient(transparent,var(--bg)); }
 .kind-activity:not(.has-visual) { display:flex; justify-content:center; }
 .kind-activity .player-text { align-content:center; }
 .kind-activity .player-reading { max-width:744px; }
 .kind-activity.has-visual .player-reading { margin:0; }
 .kind-activity.has-visual .player-visual { display:grid; align-content:center; }
 .artifact-player .image-zoom img { max-height:calc(var(--vvh,100dvh) - 240px); }
}
.map-threads .thread-reveal { stroke:#fff; stroke-width:1; stroke-dasharray:1; stroke-dashoffset:0; animation:thread-draw var(--t-map) both var(--ease-out); animation-delay:calc(var(--i)*var(--t-ui)); }
@keyframes thread-draw { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
/* Text and controls are painted without waiting for audio or image decoding. */
.player-visual img { opacity:1; transition:opacity var(--t-ui) var(--ease-out); }
.player-visual img.decoding { opacity:0; }
.resume-audio { display:block; min-height:44px; color:var(--copper); margin-bottom:8px; }
@media(prefers-reduced-motion:reduce){.player-visual img{transition:none}}
.player-scroll,.player-text { overflow-anchor:none; }
/* W11: extra visuals stay in one viewport-bounded gallery. */
.scene-gallery { display:flex;flex-direction:column;gap:12px;min-height:0;height:100%; }
.scene-gallery>.player-figure { min-height:0;flex:1;margin:0; }
.scene-filmstrip { display:flex;gap:8px;justify-content:center;flex:none;padding:4px; }
.gallery-thumb { position:relative;display:grid;place-items:center;padding:4px;width:72px;height:56px;block-size:56px;min-height:56px;border:1px solid var(--hairline);border-radius:var(--r-row);background:var(--surface); }
.gallery-thumb img { width:64px;height:48px;object-fit:contain; }
.gallery-thumb[aria-pressed=true] { border:2px solid var(--copper); }
.player-details summary { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;min-height:44px;list-style:none;font:var(--type-headline); }
.player-details summary::-webkit-details-marker { display:none; }
.player-details summary .control-icon { transition:transform var(--t-ui) var(--ease-out); }
.player-details[open] summary .control-icon { transform:rotate(90deg); }
.player-places { padding:0;list-style:none; }
.player-places>li { display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;padding:12px 0; }
.player-places .place-number { width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--copper);border-radius:50%;color:var(--copper);font:var(--type-figure); }
.player-places button { text-align:left; }
.player-places p { margin:8px 0 0; }
.player-map-stage { overflow:hidden; }
@media(min-width:1100px) {
 .player-visual { overflow:hidden;display:flex;flex-direction:column; }
 .player-visual:has(.player-map) { overflow:auto; }
 .scene-gallery { max-height:calc(var(--vvh,100dvh) - 136px); }

 .player-text h1 { font:var(--type-display); }
 .player-text .reading { font:var(--type-bodyRead); }
}
@media(max-width:1099px) { .scene-gallery { height:auto; }.scene-gallery>.player-figure { flex:none; } }
@media(prefers-reduced-motion:reduce) { .player-details summary .control-icon { transition:none; } }
.scene-gallery>.player-figure { display:flex;align-items:center;justify-content:center;position:relative; }
.gallery-thumb { height:52px;block-size:52px;min-height:52px; }
.gallery-thumb img { height:44px; }

/* W13g: percentages refer to the real image box at every viewport. */
.scene-gallery .artifact-stage{position:relative;display:block;margin-inline:auto;width:min(100%,calc(46svh * var(--image-ratio)));aspect-ratio:var(--image-ratio);height:auto;max-height:none;overflow:hidden;flex:none}
.scene-gallery .image-zoom,.scene-gallery .image-zoom picture,.scene-gallery .image-zoom img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain}
.scene-gallery .hotspot{z-index:2}
.scene-gallery>.player-figure{background:#120c0c}
.gallery-thumb{background:color-mix(in srgb,var(--copper) 16%,var(--surface))}
.narration-copy{padding-left:0}.narration-copy::before,.narration-copy::after{display:none}
.audio-controls .audio-toggle{background:var(--surface);color:var(--copper);box-shadow:inset 0 0 0 1px var(--ink)}
.progress-ticks b{inset:-7px 0 auto;text-align:center}
@media(min-width:760px){
 .scene-gallery .artifact-stage{width:min(100%,calc((100svh - 240px) * var(--image-ratio)))}
 .kind-activity,.kind-activity.has-visual{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:auto;min-height:100%;overflow:auto}
 .hob-player:has(.kind-activity) .player-scroll{overflow:auto}
 .kind-activity .player-visual{position:static;width:200px;height:180px;padding:16px;overflow:hidden;flex:none}
 .kind-activity .scene-gallery .artifact-stage{width:min(100%,calc(148px * var(--image-ratio)))}
 .kind-activity .player-reading,.kind-activity.has-visual .player-reading{max-width:704px;width:100%;height:auto;overflow:visible;min-height:0;margin-inline:auto;padding:0 32px 24px;display:flex;justify-content:center}
 .kind-activity .player-text{flex:0 1 auto;overflow:visible;padding:16px 0}
 .kind-activity .player-footer{position:static;margin-top:24px;padding:0 0 24px;border:0}
 .kind-activity .player-footer::before{display:none}
}

/* W13k-M1: only scene surfaces cross-dissolve; the live dock is never faded. */
.hob-player .player-scroll{position:relative;isolation:isolate}
.hob-player .scene-ghost{position:absolute!important;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.hob-player .player-footer{z-index:6}
.hob-player .scene-ghost .player-footer{visibility:hidden}
@media(prefers-reduced-motion:reduce){.hob-player .scene-ghost .player-text{transform:none!important}}

.hob-player .scene-ghost img{opacity:1!important;transition:none}

/* Width/height reserve each image before decode, within P1's fixed visual rail. */
.hob-player .player-figure .image-zoom{aspect-ratio:var(--img-w)/var(--img-h)}
.hob-player .player-figure .image-zoom img{object-fit:contain}

/* W14: the frame follows the image; the surrounding column keeps its theme. */
.hob-player .scene-gallery>.player-figure{background:none}
.hob-player .scene-gallery .artifact-stage{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--lift-2)}
.hob-player .artifact-stage[data-image-alpha=true]{background:radial-gradient(50% 12% at 50% 96%,rgb(0 0 0/.18),transparent);box-shadow:none}
.hob-player [data-hotspot-stage]:has(.hotspot)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:rgb(0 0 0/.28);animation:stage-dim var(--t-dim) var(--ease-out)}
@keyframes stage-dim{from{opacity:0}to{opacity:1}}
.hob-player .player-visual{position:relative}
.scene-visual-ghost{position:absolute!important;inset:0;z-index:3;pointer-events:none;background:var(--bg)}
.scene-visual-ghost img{opacity:1!important}
@media(prefers-reduced-motion:reduce){.hob-player [data-hotspot-stage]:has(.hotspot)::after{animation:none}}