/* Original supplied artwork; only the outside presentation margins are clipped. */
#game-shell { --rail: min(280px, 28vw); }
#game-shell .layout { grid-template-columns: minmax(0,1fr) minmax(0,var(--rail)); }
#hero-dock { display:block; width:100%; min-width:0; padding:0; border:0; background:#10101b; overflow:auto; scrollbar-width:thin; }
#hero-dock::before, #hero-dock > :not(#exact-panel) { display:none !important; }
#exact-panel { position:relative; width:100%; aspect-ratio:488 / 1720; overflow:hidden; container-type:inline-size; }
#exact-panel::after { content:''; position:absolute; left:3%; right:3%; bottom:0; height:5px; border-bottom:2px solid #737fb5; background:#16182e; pointer-events:none; }
#exact-panel > .exact-art { position:absolute; top:0; left:-36.885246%; width:173.770492%; height:auto; max-width:none; pointer-events:none; user-select:none; }
#exact-panel #heroes { display:contents; }
#exact-panel .exact-hit, #exact-panel #heroes .card { position:absolute !important; margin:0 !important; padding:0 !important; min-width:0 !important; min-height:0 !important; max-width:none !important; border:0 !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; transform:none !important; opacity:0 !important; cursor:pointer; overflow:hidden; touch-action:none; }
#exact-panel #heroes .card { width:41.6% !important; height:18.26% !important; }
#exact-panel #heroes .card:nth-child(1) { left:6.35%; top:14.77%; }
#exact-panel #heroes .card:nth-child(2) { left:52.46%; top:14.77%; }
#exact-panel #heroes .card:nth-child(3) { left:6.35%; top:34.07%; }
#exact-panel #heroes .card:nth-child(4) { left:52.46%; top:34.07%; }
#exact-panel .exact-hit:focus-visible, #exact-panel #heroes .card:focus-visible { opacity:1 !important; color:transparent !important; outline:2px solid white; outline-offset:-3px; }
#exact-panel #heroes .card:focus-visible > * { visibility:hidden; }
#exact-panel .exact-hit, #exact-panel #heroes .card { z-index:3; }
#exact-panel .sidebar-live { position:absolute; z-index:2; pointer-events:none; display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--display-font); font-weight:700; line-height:1; background:linear-gradient(110deg,#17182f,#111326); }
#exact-panel .live-round { font-size:8cqw; color:#fff; }
#boss-health { position:absolute; top:58px; left:50%; transform:translateX(-50%); width:min(440px,80%); min-height:42px; display:flex; align-items:center; gap:9px; padding:5px 10px; border:1px solid #8793ba; border-radius:5px; background:#141829ed; color:#fff; pointer-events:none; z-index:8; }
#boss-health img { width:34px; height:34px; object-fit:contain; }
#boss-health>div { flex:1; min-width:0; }
#boss-health strong { display:block; font-size:13px; line-height:1.3; }
#boss-health .boss-mechanic { display:block; margin-top:3px; color:#d8dff2; font-size:10px; line-height:1.15; }
#boss-health>span { font:12px Arial,sans-serif; white-space:nowrap; }
.boss-track { height:6px; margin-top:4px; background:#34364f; overflow:hidden; border-radius:3px; }
.boss-track i { display:block; height:100%; background:#f56094; transition:width .12s linear; }
#boss { width:min(520px,88%); max-width:none; left:50%; right:auto; transform:translateX(-50%); padding:14px; gap:12px; }
#boss img { width:100px; height:110px; object-fit:contain; }
#boss h2 { font-size:21px; }
#boss p { font-size:15px; line-height:1.4; }
#legacy-lesson-panel { width:fit-content; max-width:calc(100% - var(--rail) - 24px); min-height:0; height:auto; align-items:end; }
#legacy-lesson-panel .lesson-copy { width:max-content; max-width:min(460px,calc(100vw - var(--rail) - 150px)); min-height:0; height:auto; padding:20px 26px; }
#legacy-lesson-panel #lesson-text { max-width:40ch; font-size:16px; line-height:1.45; white-space:normal; overflow-wrap:break-word; }
#legacy-lesson-panel #lesson-title { font-size:19px; line-height:1.25; }
#legacy-lesson-panel #lesson-note { font-size:12px; }
#legacy-lesson-panel #lesson-note:empty, #legacy-lesson-panel #lesson-feedback:empty { display:none; }
#legacy-lesson-panel #lesson-portrait { max-width:140px; max-height:190px; object-fit:contain; }
@media(max-width:650px) { #legacy-lesson-panel { max-width:calc(100% - 16px); } #legacy-lesson-panel .lesson-copy { max-width:calc(100vw - 120px); padding:16px 20px; } #legacy-lesson-panel #lesson-portrait { max-width:85px; } #boss-health { top:46px; } }
@media(prefers-reduced-motion:reduce) { .boss-track i { transition:none; } }
#round-status, #round-status .hud-label, #round-status #wave { color:#fff !important; -webkit-text-fill-color:#fff !important; }
#exact-panel .live-action { border-radius:50%; background:#0b1426; font-size:10cqw; text-shadow:0 0 8px #9aefff; }
#exact-panel .live-action.unavailable { color:#788199; }
#exact-panel .live-setting { font-size:5.5cqw; color:#25edfc; align-items:flex-start; padding-top:.5cqw; }
#exact-panel .live-setting[data-on]::after { content:''; position:absolute; width:7cqw; height:2cqw; bottom:.5cqw; right:1cqw; border-radius:2cqw; background:#126075; }
#exact-panel .live-setting[data-on]::before { content:''; z-index:1; position:absolute; width:3cqw; height:3cqw; bottom:0; right:1cqw; border-radius:50%; background:#28f4ff; box-shadow:0 0 6px #19e6ff; }
#exact-panel .live-setting[data-on=false] { color:#939bb1; }
#exact-panel .live-setting[data-on=false]::before { right:5cqw; background:#939bb1; box-shadow:none; }
#exact-panel .hero-state { background:transparent; border-radius:2.5cqw; }
#exact-panel .hero-state.unaffordable { background:#05081399; z-index:2; }
#exact-panel .hero-state.selected { box-shadow:inset 0 0 0 2px #ffe675; }
#exact-panel .live-price { font-size:6cqw; }
#exact-panel .live-threat { justify-content:flex-start; gap:3cqw; border-radius:1.5cqw; font-size:4.8cqw; padding-right:2cqw; }
#exact-panel .live-threat img { width:23%; height:100%; object-fit:contain; }
#exact-panel .live-threat span { min-width:0; }
#exact-panel .live-threat b { display:block; font-size:4.7cqw; }
#exact-panel .live-threat small { display:block; margin-top:2cqw; font-size:3.8cqw; color:#b3c2ec; }
#exact-panel .live-health { width:21%; height:2.8cqw; margin-left:auto; background:#292c45; flex-shrink:0; border-radius:1cqw; overflow:hidden; }
#exact-panel .live-health i { height:100%; display:block; background:#ff376f; }

/* One layout owns the dialogue: column and portrait always have the same width. */
#board { container-type:size; }
#board #legacy-lesson-panel {
 --portrait:clamp(88px,12vw,154px);
 position:absolute; left:10px; right:auto; bottom:10px; top:auto;
 display:grid; grid-template-columns:var(--portrait) minmax(0,420px);
 width:max-content; max-width:calc(100% - 20px); max-height:calc(100% - 24px);
 margin:0; padding:0; gap:0; align-items:end; overflow:visible; z-index:20;
 background:none; border:0; box-shadow:none; pointer-events:none;
}
#board #legacy-lesson-panel::before,#board #legacy-lesson-panel::after { display:none; }
#board #legacy-lesson-panel #lesson-portrait {
 display:block; position:relative; inset:auto; grid-column:1; grid-row:1;
 width:var(--portrait); max-width:none; height:var(--portrait); max-height:none;
 margin:0; object-fit:contain; object-position:bottom; clip-path:none;
 border:0; background:none; filter:none;
}
#board #legacy-lesson-panel .lesson-copy {
 grid-column:2; grid-row:1; width:auto; min-width:0; max-width:none;
 margin:0 0 8px 0; padding:23px 20px 15px; height:auto; min-height:0;
 max-height:calc(100dvh - 110px); max-height:calc(100cqh - 24px); overflow-y:auto; pointer-events:auto;
}
#board #legacy-lesson-panel .lesson-copy::before { inset:0; background:#fff; clip-path:polygon(4% 0,95% 0,100% 8%,100% 92%,95% 100%,4% 100%,0 92%,0 8%); }
#board #legacy-lesson-panel .lesson-copy::after { inset:3px; background:#241a30; clip-path:polygon(4% 0,95% 0,100% 8%,100% 92%,95% 100%,4% 100%,0 92%,0 8%); }
#board #legacy-lesson-panel #lesson-speaker { position:static; display:table; transform:none; margin:0 0 10px; padding:3px 9px; font-size:15px; line-height:1.2; }
#board #legacy-lesson-panel #lesson-title { display:block; color:#fff; text-transform:none; letter-spacing:normal; font-size:16px; margin:0 0 8px; }
#board #legacy-lesson-panel #lesson-text { display:block; margin:0 0 10px; padding:0; max-width:39ch; font:600 16px/1.4 var(--ui-font); color:#fff; }
#board #legacy-lesson-panel #lesson-note { display:block; font-size:12px; line-height:1.4; margin:0 0 8px; color:#c4cde7; }
#board #legacy-lesson-panel #lesson-note:empty { display:none; }
#board #legacy-lesson-panel .speech-tail { display:none; }
#board #legacy-lesson-panel #lesson-continue { min-height:34px; padding:7px 12px; font-size:13px; }
@media(max-width:650px) {
 #board #legacy-lesson-panel { --portrait:78px; left:5px; bottom:5px; max-width:calc(100% - 10px); }
 #board #legacy-lesson-panel .lesson-copy { padding:15px 13px 10px; }
 #board #legacy-lesson-panel #lesson-text { font-size:14px; }
}

/* Live, aligned interiors retain the existing artwork's three button frames. */
#exact-panel .control-tile { display:grid; grid-template-rows:1fr 1.1fr 1fr; justify-items:center; align-items:center; padding:1cqw 0 .6cqw; border-radius:1cqw; background:linear-gradient(120deg,#1d203b,#111426); }
#exact-panel .live-setting.control-tile[data-on]::before,#exact-panel .live-setting.control-tile[data-on]::after { content:none !important; display:none !important; }
#exact-panel .control-label { color:#b9c7ee; font:700 3cqw/1 var(--ui-font); letter-spacing:.035em; }
#exact-panel .control-state { color:#29edfa; font:700 5cqw/1 var(--display-font); }
#exact-panel .control-switch { position:relative; width:7cqw; height:2.8cqw; border-radius:3cqw; background:#126075; }
#exact-panel .control-switch::after { content:''; position:absolute; top:.3cqw; right:.3cqw; width:2.2cqw; height:2.2cqw; border-radius:50%; background:#34f1fa; box-shadow:0 0 3px #27dfea; }
#exact-panel .control-tile[data-on=false] .control-switch { background:#45495e; }
#exact-panel .control-tile[data-on=false] .control-switch::after { right:auto; left:.3cqw; background:#b7bfd3; box-shadow:none; }
#exact-panel .control-tile[data-on=false] .control-state { color:#a8b1c8; }
#exact-panel .live-action { display:flex; gap:1.4cqw; padding:0; text-shadow:none; }
#exact-panel .live-action[data-mode=pause]::before,#exact-panel .live-action[data-mode=pause]::after { content:''; display:block; width:1.65cqw; height:7cqw; background:#fff; border-radius:.4cqw; }
#exact-panel .live-action[data-mode=play]::before { content:''; display:block; width:0; height:0; margin-left:.8cqw; border-top:3.5cqw solid transparent; border-bottom:3.5cqw solid transparent; border-left:5.5cqw solid #fff; }
#exact-panel .live-action[data-mode=idle]::before { content:''; width:2cqw; height:2cqw; border-radius:50%; background:#8490a9; }
/* Decorative outskirts fill letterboxing while the playable map stays 3:2. */

#board #legacy-lesson-panel .lesson-copy #lesson-choices{position:static;display:grid;grid-template-columns:1fr;grid-column:auto;grid-row:auto;margin:10px 0;gap:8px;width:auto}
#board #legacy-lesson-panel .lesson-choice{min-height:40px;padding:10px 18px;font-size:14px;line-height:1.35;text-align:left}
#board #legacy-lesson-panel #lesson-feedback.incorrect-feedback{color:#fff;background:#9c2038;padding:10px 14px;border-radius:5px}
#board #legacy-lesson-panel #lesson-feedback.correct-feedback{color:#fff;background:#246449;padding:10px 14px;border-radius:5px}
#board #legacy-lesson-panel .lesson-choice.incorrect{background:#b62d45;color:#fff}
#board #legacy-lesson-panel .lesson-choice.answered{background:#246449;color:#fff}
/* Reference dialogue: portrait, separate speech bubble, then independent replies. */
#board #legacy-lesson-panel{--portrait:clamp(145px,20vw,260px);grid-template-columns:calc(var(--portrait)*.58) minmax(0,440px);grid-template-rows:auto auto;align-items:end;gap:14px 0;isolation:isolate}
#board #legacy-lesson-panel #lesson-portrait{width:var(--portrait);height:var(--portrait);grid-row:1 / 3;align-self:end;z-index:-1}
#board #legacy-lesson-panel .lesson-copy{grid-row:1;align-self:start;margin:0 0 70px;padding:26px 24px 18px;overflow:visible;max-width:440px}
#board #legacy-lesson-panel .lesson-copy::before{clip-path:polygon(5% 0,86% 0,100% 13%,100% 88%,91% 100%,12% 96%,0 118%,5% 88%,0 80%,0 12%)}
#board #legacy-lesson-panel .lesson-copy::after{clip-path:polygon(5% 0,86% 0,100% 13%,100% 88%,91% 100%,12% 96%,0 118%,5% 88%,0 80%,0 12%)}
#board #legacy-lesson-panel #lesson-speaker{position:absolute;top:-13px;left:25px;transform:rotate(-5deg);font-size:18px;margin:0}
#board #legacy-lesson-panel #lesson-text{font-size:18px;line-height:1.35}
#board #legacy-lesson-panel.responding .lesson-copy{margin-bottom:0;width:max-content;max-width:100%;padding:25px 28px 16px}
#board #legacy-lesson-panel.responding #lesson-title,#board #legacy-lesson-panel.responding #lesson-note{display:none}
#board #legacy-lesson-panel #lesson-choices{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.65fr);gap:10px 6px;margin:0 0 15px;width:min(580px,calc(100cqw - var(--portrait)*.58 - 28px));pointer-events:auto}
#board #legacy-lesson-panel .lesson-choice{grid-column:1;position:relative;clip-path:polygon(12% 0,94% 0,100% 50%,94% 100%,12% 100%,8% 70%,0 65%,9% 38%);border:0;border-radius:0;background:#fff;color:#111937;padding:13px 24px 13px 34px;font-size:17px;font-weight:800;line-height:1.2;min-height:54px;width:100%;filter:drop-shadow(0 2px 1px #15224d)}
#board #legacy-lesson-panel #lesson-feedback{grid-column:2;align-self:center;margin:0;font-size:14px;line-height:1.3;padding:12px;clip-path:polygon(0 0,92% 0,100% 50%,92% 100%,0 100%)}
#board #legacy-lesson-panel #lesson-feedback:empty{display:none}
#board #legacy-lesson-panel .lesson-choice.incorrect{background:#c71d35;color:#fff}
#board #legacy-lesson-panel .lesson-choice.answered{background:#247d61;color:#fff}
#battle-frame{background-color:#303234;background-image:url('art/metropolis-passage-2x.webp');background-repeat:repeat;background-position:center;background-size:var(--city-width,1200px) var(--city-height,800px)}
@media(max-width:700px){#board #legacy-lesson-panel{--portrait:130px}#board #legacy-lesson-panel #lesson-text{font-size:15px}#board #legacy-lesson-panel .lesson-choice{font-size:14px}#board #legacy-lesson-panel #lesson-choices{grid-template-columns:minmax(0,1fr)}#board #legacy-lesson-panel #lesson-feedback{grid-column:1;grid-row:auto!important}}
#board #legacy-lesson-panel .speech-tail{display:block;position:absolute;left:-23px;bottom:-22px;top:auto;width:64px;height:50px;transform:rotate(105deg);z-index:-1}
#board #legacy-lesson-panel .lesson-choice{width:fit-content;max-width:100%;min-width:170px;background:#17234d;isolation:isolate}
#board #legacy-lesson-panel .lesson-choice::before{content:'';position:absolute;inset:3px;z-index:-1;background:var(--answer-fill,#fff);clip-path:inherit}
#board #legacy-lesson-panel .lesson-choice.incorrect{background:#fff;--answer-fill:#c71d35}
#board #legacy-lesson-panel .lesson-choice.answered{background:#fff;--answer-fill:#247d61}
#exact-panel > .bibleman-reference-card{position:absolute;left:7.4%;top:17.38%;width:39.2%;height:10.35%;object-fit:cover;object-position:50% 12%;background:radial-gradient(ellipse at center,#075fca,#081542);pointer-events:none;transform:none}
#battle-frame{background:#303234!important}

/* Villain interludes reuse the bottom-left lesson staging without overlapping it. */
#board #legacy-lesson-panel.villain-briefing{--portrait:clamp(190px,25vw,330px);grid-template-columns:calc(var(--portrait)*.62) minmax(0,480px);bottom:0}
#board #legacy-lesson-panel.villain-briefing #lesson-portrait{width:var(--portrait);height:var(--portrait);object-fit:contain;object-position:left bottom;filter:drop-shadow(8px 5px 0 #090b13);z-index:0}
#board #legacy-lesson-panel.villain-briefing .lesson-copy{margin:0 0 38px 8px;border-left:5px solid var(--villain-color);padding-left:26px}
#board #legacy-lesson-panel.villain-briefing .lesson-copy::before{background:#fff1d8}
#board #legacy-lesson-panel.villain-briefing .lesson-copy::after{background:linear-gradient(120deg,#251520,#17131f)}
#board #legacy-lesson-panel.villain-briefing #lesson-speaker{background:var(--villain-color);color:#11131c;transform:rotate(-3deg)}
#board #legacy-lesson-panel.villain-briefing #lesson-title{display:block;color:#ffc7b8;font-weight:800;letter-spacing:.08em}
#board #legacy-lesson-panel.villain-briefing #lesson-note{display:block;color:#ffd8a8;font-size:13px}
#board #legacy-lesson-panel.villain-briefing #lesson-continue{color:#fff!important;border-bottom:2px solid var(--villain-color)}
@media(max-width:700px){#board #legacy-lesson-panel.villain-briefing{--portrait:155px;grid-template-columns:95px minmax(0,360px)}#board #legacy-lesson-panel.villain-briefing .lesson-copy{margin-left:0;padding-left:20px}}