/* Newly rendered oblique metal portals, transparent windows, shared room movement. */
.ward-story .ward-table{left:calc(var(--ward-center) - 55vh);top:auto;bottom:-20vh;width:185vh}
.ward-story .ward-table-motion{aspect-ratio:1600/806}
.ward-story .ward-frame{top:-40vh;height:180vh!important;z-index:160;pointer-events:none;overflow:visible}
.ward-story .ward-frame img{position:absolute;inset:0;width:100%;height:100%!important;object-fit:fill!important;filter:none!important;transform:none}
.ward-story .ward-frame-entry{left:calc(var(--room-left) - 82vh);width:90vh}
.ward-story .ward-frame-exit{left:calc(var(--room-left) + var(--room-width) - 45vh);width:90vh}
/* One corner-pinned image, label, hit surface and selected effect per card. */
.ward-story .ward-dossiers{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;display:block;transform:none;pointer-events:none}
.ward-story .ward-dossier{position:absolute;left:0;top:0;right:auto;bottom:auto;flex:none;padding:0;border:0;background:none;transform-origin:0 0;pointer-events:auto;translate:none;transition:filter .25s}
.ward-story .ward-dossier img{display:block;width:100%;height:100%;object-fit:fill!important;filter:none!important}
.ward-story .ward-dossier[aria-pressed=true]{translate:none;background:none;box-shadow:none;filter:drop-shadow(0 0 8px #e6313670)}
.ward-story .ward-dossier[aria-pressed=true] img{filter:brightness(1.2)!important}
.ward-story .ward-dossier-label{position:absolute;left:0;top:0;bottom:auto;width:160px;height:80px;display:flex;align-items:center;justify-content:center;transform-origin:0 0;font:bold 48px monospace;background:none;color:#fff;text-shadow:0 1px 4px #000;pointer-events:none}
.ward-story .ward-routes{display:block!important;position:absolute;inset:0;width:100%;height:100%;opacity:.9;z-index:6;pointer-events:none;stroke-width:1.6}
.ward-story .ward-routes path{opacity:.22;stroke-dasharray:4 5}
.ward-story[data-selected='0'] [data-route='0'],.ward-story[data-selected='1'] [data-route='1'],.ward-story[data-selected='2'] [data-route='2'],.ward-story[data-selected='3'] [data-route='3']{opacity:1}
.ward-story .ward-map-markers{display:block!important;position:absolute;inset:0;opacity:1;z-index:7;pointer-events:none}
.ward-story .ward-map-markers button{pointer-events:auto;background:#121518a0;border:1px solid #ffffff38;width:40px;height:30px;border-radius:2px;color:#ddd}
.ward-story .ward-map-markers button[aria-pressed=true]{color:#fff;border-color:#ed3038;background:#251517d9}
@media(max-aspect-ratio:1/1){
 .ward-story .ward-table{left:calc(var(--ward-center) - 86vh);width:185vh;bottom:-16vh}
}
@media(prefers-reduced-motion:reduce){.ward-story .ward-dossier{transition:none}}
/* Keep the complete table and its four route endpoints inside the architecture. */
.ward-story{--room-width:max(125vw,270vh);--room-left:calc(var(--ward-center) - var(--room-width)*.5)}
@media(max-aspect-ratio:1/1){.ward-story{--room-width:240vh;--room-left:calc(var(--ward-center) - 120vh)}}
.ward-story img.ward-room{object-fit:fill!important}
/* The entrance window now looks into the room; the opaque corner stays ahead of the tabletop. */
.ward-story .ward-frame-entry{left:calc(var(--room-left) - 25vh)}

/* Glazing follows each opening, so metal and room remain crisp around the pane. */
.ward-window{position:absolute;inset:0;pointer-events:none;backdrop-filter:blur(2px) saturate(.78) brightness(.93);-webkit-backdrop-filter:blur(2px) saturate(.78) brightness(.93);background:linear-gradient(112deg,#b9d4df14 0%,#bfd0dd04 31%,#ebf5ff19 33%,#ebf5ff03 38%,#7b96a20b 72%,#d8eaf318 100%)}
.ward-window-left-narrow{clip-path:polygon(48.3% 20.6%,56.8% 18.8%,56.8% 82.5%,48.3% 80.8%)}
.ward-window-left-wide{clip-path:polygon(60.5% 18.1%,79.9% 13.9%,79.9% 87%,60.5% 83.2%)}
.ward-window-right{clip-path:polygon(4.8% 12.4%,44.8% 8.1%,44.8% 93.1%,4.8% 88.9%)}
.ward-frame img{z-index:1}.ward-window{z-index:0}
/* Distant panes do not retain backdrop capture surfaces. No glass animation clock. */
.ward-frame.effects-paused .ward-window{backdrop-filter:none;-webkit-backdrop-filter:none;background:none}
/* Size backdrop capture to the panes, rather than the full oversized metal artwork. */
.ward-window{inset:auto}
.ward-window-left-narrow{left:48.3%;top:18.8%;width:8.5%;height:63.7%;clip-path:polygon(0 2.83%,100% 0,100% 100%,0 97.33%)}
.ward-window-left-wide{left:60.5%;top:13.9%;width:19.4%;height:73.1%;clip-path:polygon(0 5.75%,100% 0,100% 100%,0 94.8%)}
.ward-window-right{left:4.8%;top:8.1%;width:40%;height:85%;clip-path:polygon(0 5.06%,100% 0,100% 100%,0 95.06%)}

/* Equal rigid rectangles: no corner pin, perspective, shear or individual size changes. */
.ward-story .ward-dossier{transform-origin:0 0;clip-path:none;border:2px solid #151719;border-radius:1px;box-sizing:border-box;box-shadow:0 2px 3px #0008;overflow:hidden}
.ward-story .ward-dossier img{object-fit:contain!important;aspect-ratio:16/9}
.ward-story .ward-dossier-label{left:4px;top:auto;bottom:3px;width:auto;height:auto;font:bold 10px/1.1 monospace;padding:2px 4px;background:#0c0e10c9;text-shadow:none;transform:none!important}
.ward-story .ward-dossier[aria-pressed=true]{border-color:#e53941;box-shadow:0 0 8px #e6313650;filter:none}
/* Bring the campaign title toward the tabletop, with centered readable captions. */
.ward-story .ward-title{left:calc(var(--ward-center) - 12vh);top:20vh;text-align:center}
.ward-story .ward-title>span{display:block;width:100%;max-width:100%;text-align:center}
.ward-story .ward-credit,.ward-story .ward-episodes-credit{font-size:13px;line-height:1.5}
.ward-story .ward-title .art-cue{text-align:center;font-size:12px}
@media(max-aspect-ratio:1/1){.ward-story .ward-title{left:calc(var(--ward-center) - 18vh);top:15vh}.ward-story .ward-credit,.ward-story .ward-episodes-credit{font-size:12px}.ward-story .ward-title .art-cue{font-size:11px}}