@import url('./story-lives-v1.css');
@import url('./story-rankings-v1.css');
/* V32 story mode (M3): home card, story dialog (level map + boss briefing), story party panel and in-match boss HUD.
   Text never goes below 11px. */
.story-card{background:linear-gradient(135deg,#ffb36b,#e0664f)}
.story-card .mini-card-art{width:54px}
.story-card>span>small{color:#fff7e8}
/* phones in landscape: the card is too short for the portrait and a two-line title, so the portrait goes (Practice keeps its
   shorter title and art) */
@media (max-height:480px){.story-card .mini-card-art{display:none}.story-card>span>strong{line-height:1}}

.story-dialog{width:min(1120px,calc(100vw - 26px));max-height:calc(100dvh - 26px);padding:22px 24px;overflow:hidden;display:none}
.story-dialog[open]{display:flex;flex-direction:column}
.story-shell{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1}
.story-head{display:flex;gap:18px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding-right:46px}
.story-head h2{margin:6px 0 4px}
.story-head .eyebrow{font-size:11px}
.story-prologue{max-width:620px;margin:0;color:#4d6f8c;font-size:12px;line-height:1.55}
.story-head-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.story-progress{margin:0;font-size:12px;font-weight:800;color:#2f6a97}
.story-tabs{display:flex;gap:6px}
.story-tabs button{background:#dae9f7;border:1px solid #a4c8e4;color:#48708f;border-radius:12px;padding:8px 12px;font-size:12px;font-weight:900}
.story-tabs button[aria-selected=true]{background:#397ed1;border-color:#185cac;color:#fff;box-shadow:0 2px 0 #1b518d}
.story-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;min-height:0;flex:1}
.story-map,.story-brief{overflow-y:auto;min-height:0;overscroll-behavior:contain}
.story-map{display:flex;flex-direction:column;gap:10px;padding:2px 6px 8px 2px}
.story-chapter{background:#ffffffb3;border:1px solid #c6def0;border-radius:16px;padding:10px 12px}
.story-chapter header{display:flex;align-items:baseline;gap:8px}
.story-chapter header small{font-size:11px;font-weight:900;color:#6f93b1;letter-spacing:.6px}
.story-chapter h3{margin:0;font:800 20px/1.1 'Baloo 2',sans-serif;color:#235890}
.story-chapter>p{margin:3px 0 8px;font-size:12px;line-height:1.45;color:#56768f}
.story-levels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.story-level{display:flex;align-items:center;gap:9px;text-align:left;background:#eef6fd;border:2px solid #c3dcf0;border-radius:14px;padding:7px 9px;color:#27517a;min-height:58px;min-width:0}
.story-level:hover{border-color:#8fc2ea}
.story-level[aria-pressed=true]{border-color:#397ed1;background:#fff;box-shadow:0 0 0 3px #397ed133}
.story-level[data-state=next]{border-color:#f0b43c;background:#fff8e6}
.story-level[data-state=next][aria-pressed=true]{box-shadow:0 0 0 3px #f0b43c55}
.story-level[data-state=locked]{opacity:.62}
.story-level[data-party=current]{outline:3px dashed #39a37e;outline-offset:1px}
.story-level-text{display:flex;flex-direction:column;min-width:0}
.story-nowrap{white-space:nowrap}
.story-level-text small{font-size:11px;font-weight:900;color:#6f93b1;letter-spacing:.4px}
.story-level-text strong{font:800 15px/1.15 'Baloo 2',sans-serif;color:#1f4f7c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.story-level-text em{font-style:normal;font-size:11px;font-weight:900;color:#4b7ea9}
.story-level[data-state=cleared] .story-level-text em{color:#23865f}
.story-level[data-state=next] .story-level-text em{color:#a8680a}
.story-level[data-state=locked] .story-level-text em{color:#7a8c9b}

.story-boss-portrait{--boss-color:#557;flex:none;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--boss-color) 55%,#fff),var(--boss-color));border:2px solid #fff;box-shadow:0 2px 0 #1b518d55;overflow:hidden}
.story-boss-portrait img{width:118%;height:118%;object-fit:cover;object-position:50% 30%}
.story-boss-portrait b{color:#fff;font:900 1em/1 system-ui,sans-serif;letter-spacing:.5px;text-shadow:0 2px 0 #0003}
.story-boss-portrait.size-s{width:42px;height:42px;font-size:14px}
.story-boss-portrait.size-m{width:64px;height:64px;font-size:20px}
.story-boss-portrait.size-l{width:96px;height:96px;font-size:30px}

.story-brief{background:#fff;border:1px solid #c6def0;border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.story-brief-head{display:flex;gap:14px;align-items:center}
.story-brief-head small{font-size:11px;font-weight:900;color:#6f93b1;letter-spacing:.5px}
.story-brief-head h3{margin:2px 0;font:800 28px/1 'Baloo 2',sans-serif;color:#235890}
.story-brief-head p{margin:2px 0;font-size:12px;line-height:1.45;color:#4d6f8c}
.story-brief-head .story-species{font-weight:800;color:#2f6a97}
.story-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.story-facts li{background:#eef6fd;border-radius:10px;padding:6px 8px;display:flex;flex-direction:column}
.story-facts small{font-size:11px;font-weight:900;color:#6f93b1}
.story-facts strong{font-size:12px;color:#27517a;line-height:1.3}
.story-party-note{margin:0;font-size:11px;color:#5d7f99}
.story-skills{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.story-skills li{border-left:4px solid #f48b4f;background:#fff6ef;border-radius:0 10px 10px 0;padding:7px 10px}
.story-skills li[data-kind=summon]{border-color:#6c8fd8;background:#f1f5ff}
.story-skills li[data-kind=relocate]{border-color:#a07ae6;background:#f6f1ff}
.story-skills strong{font:800 15px/1.1 'Baloo 2',sans-serif;color:#7a3b17}
.story-skills li[data-kind=summon] strong{color:#28478a}
.story-skills li[data-kind=relocate] strong{color:#58308f}
.story-skills p{margin:3px 0 0;font-size:12px;line-height:1.45;color:#48627a}
.story-skills .story-tip{font-weight:800;color:#1f6a58}
.story-rules{margin:0;font-size:12px;line-height:1.45;color:#48627a}
.story-reward{margin:0;font-size:12px;color:#3f5f79;background:#fff8e6;border:1px solid #f3d58f;border-radius:10px;padding:8px 10px}
.story-reward[data-cleared=true]{background:#eafaf2;border-color:#9fdcbf}
.story-locked{margin:0;font-size:12px;font-weight:800;color:#a14a2a}
/* The level's main action stays in view at the bottom of the briefing while the text above it scrolls (root found Play
   level N below the visible part of the panel at every size). */
.story-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:auto;position:sticky;bottom:-14px;z-index:1;background:#fff;margin-left:-16px;margin-right:-16px;margin-bottom:-14px;padding:10px 16px 14px;border-radius:0 0 18px 18px;box-shadow:0 -10px 12px -10px #23589033}
.story-actions .primary-button{min-height:44px}
.story-actions .secondary-button{min-height:40px}
.story-hint{margin:0;font-size:12px;color:#4d6f8c}
.story-join{display:flex;flex-direction:column;gap:4px}
.story-join label{margin:0;font-size:11px}
.story-join span{display:flex;gap:6px}
.story-join input{width:92px;border-radius:10px;padding:9px 10px;font-weight:900;letter-spacing:2px;text-transform:uppercase}

/* one column only in tall narrow windows; phones in landscape keep two columns (below) with one level per row */
@media(max-width:820px) and (min-height:481px){
 .story-dialog{padding:18px 14px}
 .story-body{grid-template-columns:1fr;overflow-y:auto}
 .story-map,.story-brief{overflow:visible;min-height:auto}/* single column: both panels take their full height and the body scrolls (they overlapped at 667x375) */
 .story-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .story-head-side{align-items:flex-start}
}
@media(max-width:420px){.story-levels{grid-template-columns:1fr}.story-brief-head h3{font-size:24px}}
@media(max-height:520px) and (min-width:650px){
 .story-dialog{padding:12px 16px}
 .story-head .story-prologue{display:none}
 .story-head h2{font-size:24px;margin:2px 0}
 .story-body{gap:10px}
 .story-level{min-height:48px;padding:5px 7px}
 .story-boss-portrait.size-l{width:64px;height:64px;font-size:20px}
 .story-brief-head h3{font-size:22px}
}

/* story party in the room screen */
#room-screen.story-party .room-map-panel,#room-screen.story-party .room-reveal-rule{display:none}
#room-screen.story-party .room-heading h1{white-space:nowrap}
.story-room-panel{flex:0 1 600px;min-width:0;background:linear-gradient(150deg,#fff8ec,#ffe9d2);border:2px solid #f3c58f;border-radius:16px;padding:7px 10px;display:flex;align-items:center;gap:10px;color:#5a3a1c;box-shadow:0 3px 0 #174a9955}
#room-screen:not(.story-party) .story-room-panel{display:none}
.story-room-head{display:flex;gap:10px;align-items:center;min-width:0;flex:1}
.story-room-head>div{min-width:0}
.story-room-head small{display:block;font-size:11px;font-weight:900;letter-spacing:.4px;color:#a0632a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-room-head h2{margin:1px 0;font:800 21px/1.05 'Baloo 2',sans-serif;color:#7a3b17;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-room-head p{margin:0;font-size:11px;color:#6a4a2a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-last-result{font-weight:800;color:#a14a2a!important}
.story-last-result[data-outcome=won]{color:#1f7a55!important}
.story-room-buttons{display:flex;flex-direction:column;gap:5px;flex:none}
.story-room-buttons .secondary-button{min-height:32px;font-size:11px;padding:5px 11px;border-radius:10px}
@media(max-width:900px){.story-room-panel{flex:1 1 100%;order:3}}
/* short screens (phones in landscape): the panel names the level, so it takes the title's place instead of a new row */
@media(max-height:520px){#room-screen.story-party .room-heading>div:first-child{display:none}#room-screen.story-party .story-room-panel{flex:1 1 auto;order:0;padding:4px 8px}#room-screen.story-party .story-room-panel .story-boss-portrait.size-m{width:42px;height:42px;font-size:14px}.story-room-head h2{font-size:18px}}
.story-member .slot-team{font-size:11px}

/* in-match boss HUD */
/* Top-left, over the water beside the board: it never covers a tile a hero can stand on. On landscape phones and short
   windows the board fills the arena, so the HUD moves into a rail beside it (V32 UI-05 block below). */
.story-hud{position:absolute;top:12px;left:12px;z-index:6;display:flex;flex-direction:column;align-items:flex-start;gap:6px;pointer-events:none;max-width:min(250px,calc(50% - 20px))}
.story-hud-boss{display:flex;align-items:center;gap:8px;background:#0e3346e6;border:2px solid #ffffff55;border-radius:16px;padding:5px 10px 5px 5px;color:#fff;box-shadow:0 4px 14px #0006}
.story-hud-meter{display:flex;flex-direction:column;gap:3px;min-width:0;width:130px}
.story-hud-meter strong{font:800 14px/1 'Baloo 2',sans-serif;white-space:nowrap}
.story-hud-bar{height:9px;border-radius:5px;background:#5e727c;overflow:hidden}
.story-hud-bar i{display:block;height:100%;background:linear-gradient(90deg,#ff6b5b,#ffb36b);transition:width .2s}
.story-hud-hp{font-size:12px;font-weight:900;min-width:44px;text-align:right}
.story-hud-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.story-hud-guards,.story-hud-callout{background:#0e3346d9;color:#fff;border-radius:10px;padding:4px 9px;font-size:12px;font-weight:900;white-space:nowrap}
.story-hud-callout{background:#f48b4f;color:#2b1204}
.story-hud-callout[hidden]{display:none}
.story-hud-meter strong{overflow:hidden;text-overflow:ellipsis}
@media(max-height:520px),(max-width:640px){.story-hud{top:6px;left:6px;gap:4px}.story-hud-boss{padding:3px 7px 3px 3px;gap:6px}.story-hud-meter{width:96px}.story-hud-meter strong{font-size:12px}.story-hud-hp{min-width:34px;font-size:11px}.story-hud .story-boss-portrait.size-s{width:30px;height:30px;font-size:11px}.story-hud-guards,.story-hud-callout{font-size:11px;padding:3px 7px}}
@media(prefers-reduced-motion:reduce){.story-hud-bar i{transition:none}}
/* V32 (UI-05, QA M3): the boss's full name wraps instead of being cut ("Director Puffin…"), and the arrival countdown has
   its own line under it (one line hid it at every size) */
.story-hud-meter strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.story-hud-eta{display:block;font-weight:700;color:#ffdc9e}
/* V32 (UI-05, QA H1): in the compact arena (landscape phones, short windows) the board fills the frame, so at the frame's
   top-left the HUD hid the hero's spawn tile, the first rows and (at 667) the clock pill. It moves into a side rail and
   stacks: the name (and countdown) over the picture, bar and health, then the guards; the boss-move callout goes under the
   movement pad. Short windows without touch: the left rail, between the match label and the pad. */
@media (orientation:landscape) and (max-height:600px){
 body.is-playing .story-hud{position:fixed;top:124px;left:max(4px,env(safe-area-inset-left));right:auto;width:calc(var(--battle-rail) - 8px);max-width:none;align-items:stretch;gap:4px}
 body.is-playing .story-hud-boss{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"name name" "pic bar" "pic hp";align-items:center;gap:3px 6px;padding:4px 6px;border-radius:12px}
 body.is-playing .story-hud-meter{display:contents}
 body.is-playing .story-hud-meter strong{grid-area:name;font-size:12px;line-height:1.1}
 body.is-playing .story-hud-portrait{grid-area:pic}
 body.is-playing .story-hud .story-boss-portrait.size-s{width:26px;height:26px;font-size:11px}
 body.is-playing .story-hud-bar{grid-area:bar;align-self:end;height:8px}
 body.is-playing .story-hud-hp{grid-area:hp;min-width:0;font-size:11px;line-height:1.1;text-align:right}
 body.is-playing .story-hud-side{align-items:stretch}
 body.is-playing .story-hud-guards,body.is-playing .story-hud-callout{font-size:11px;padding:3px 7px;white-space:normal;text-align:center;line-height:1.2}
 body.is-playing .story-hud-callout{position:fixed;top:calc(57% + (var(--battle-rail) - 28px)/2 + 6px);left:max(4px,env(safe-area-inset-left));width:calc(var(--battle-rail) - 8px)}
}
@media (orientation:landscape) and (max-height:340px){body.is-playing .story-hud-callout{top:calc(59% + (var(--battle-rail) - 28px)/2 + 6px)}}
/* touch phones: the left rail holds Splash and the skill and the pad is on the right, so the HUD takes the right rail
   between help/full screen and the pad, and the callout goes under the pad there (clear of the music button) */
@media (orientation:landscape) and (max-height:600px) and (pointer:coarse) and (hover:none){
 body.is-playing .story-hud{top:calc(max(8px,env(safe-area-inset-top)) + 34px);left:auto;right:max(4px,env(safe-area-inset-right))}
 body.is-playing .story-hud-callout{left:auto;right:max(4px,env(safe-area-inset-right))}
}
/* short screens: the pinned action row is one line (the join label stays for screen readers) so the briefing keeps room */
@media (max-height:480px){
 .story-actions{flex-wrap:nowrap;align-items:center;padding-top:6px;padding-bottom:12px}
 .story-actions .primary-button{min-height:40px;flex:1 1 auto}
 .story-join label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .story-join input{width:84px}
}
@media (max-height:480px) and (max-width:820px){.story-levels{grid-template-columns:1fr}.story-actions .primary-button{white-space:nowrap;padding-left:12px;padding-right:12px}.story-join input{width:70px;letter-spacing:1px}}

/* Fable M3 review 01 (grades/m3-story-01.md), findings 2-6, 9 and 10. Floors: text 11px (14px on primary buttons),
   contrast 4.5:1, touch targets 44px. */
/* 2: the pinned Play button, and every action in the row, at the touch floor with 14px text at every size */
.story-actions .primary-button,.story-actions .secondary-button{min-height:44px;font-size:14px}
.story-join input,.story-join button{min-height:44px}
@media (max-height:480px){.story-actions .primary-button{min-height:44px}}
/* 3: phones keep the story. The header's prologue gives way on short screens; the same text opens the level map instead,
   and every chapter keeps its line (both scroll with the map). */
.story-prologue-inline{display:none}
@media(max-height:520px) and (min-width:650px){
 .story-prologue-inline{display:block;max-width:none;margin:0 2px;font-size:12px;line-height:1.45;color:#3e6485}
 .story-chapter>p{display:block;margin:2px 0 6px;font-size:12px;line-height:1.4}
}
/* 4: labels at 4.5:1 or more on their own backgrounds */
.story-head .eyebrow{color:#3a6082}
.story-chapter header small,.story-level-text small,.story-brief-head small,.story-facts small{color:#3e6485}
.story-chapter>p{color:#3e6485}
.story-level-text em{color:#3e6485}
.story-level[data-state=cleared] .story-level-text em{color:#1b6e4d}
.story-level[data-state=next] .story-level-text em{color:#8a5406}
.story-tabs button{color:#3a6082}
.story-tabs button[aria-selected=true]{background:#2f6cc0;border-color:#1d559f;color:#fff}
.story-join label{color:#3a6082;font-weight:800}
.story-party-note{color:#3e6485}
/* locked levels stay readable: the lock shows in the picture and the frame, not by fading the words */
.story-level[data-state=locked]{opacity:1;background:#f1f4f7;border-style:dashed;border-color:#b9c7d3}
.story-level[data-state=locked] .story-boss-portrait{filter:grayscale(.85);opacity:.7}
.story-level[data-state=locked] .story-level-text strong{color:#3d5266}
.story-level[data-state=locked] .story-level-text small{color:#4a5c6c}
.story-level[data-state=locked] .story-level-text em{color:#4a5c6c}
/* 5: close at 44 x 44 */
.story-dialog .dialog-close{width:44px;height:44px;font-size:24px}
.story-head{padding-right:56px}
/* 6: long boss names wrap instead of being cut off */
.story-level-text strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
/* 9: the party screen's story lines at 11px or more, readable; on short screens the crew fits above the action bar */
#room-screen.story-party .story-member .ready-badge{font-size:11px;color:#2f5878}
#room-screen.story-party .story-member .slot-team,#room-screen.story-party .story-member small{font-size:11px;color:#2f5878}
#room-screen.story-party .story-member.empty strong{color:#2f5878}
/* the shared room frame, in story parties at every size (Fable's note under the findings): 11px, and the crew count on a dark pill (it measured 2:1) */
#room-screen.story-party .room-code-badge small{font-size:11px}
#room-screen.story-party .room-back{font-size:11px}
#room-screen.story-party #room-count{font-size:11px;color:#fff;background:#123f6e;border-radius:8px;padding:2px 8px}
@media(max-height:520px){
 #room-screen.story-party .crew-panel .panel-heading{min-height:0;padding-top:2px;padding-bottom:2px}
 #room-screen.story-party .crew-panel .panel-heading h2{font-size:16px;line-height:1.2;margin:0}
 #room-screen.story-party #room-count{font-size:11px}
 #room-screen.story-party .story-member .slot-header{min-height:0;padding-top:2px;padding-bottom:2px}
 #room-screen.story-party .story-member .slot-header b{width:20px;height:20px;font-size:13px;line-height:20px}
 #room-screen.story-party .story-member .slot-character{height:38px}
 #room-screen.story-party #room-roster .empty-seat{flex:0 0 30px;min-height:30px;height:30px;width:30px;line-height:28px;font-size:20px;margin:4px 0}
 #room-screen.story-party .story-member .slot-name,#room-screen.story-party .story-member.empty strong{font-size:12px;line-height:1.25}
 #room-screen.story-party .crew-bottom>span{display:none}
 #room-screen.story-party .crew-bottom{min-height:0;padding-top:2px;padding-bottom:2px}
 /* one heading row even on the smallest phones (the room code used to wrap onto its own row at 667 x 375 and push the
    crew under the action bar): the level panel shrinks, the code and Leave stay compact; all at 11px and 44px targets */
 #room-screen.story-party .room-heading{flex-wrap:nowrap;align-items:center;gap:8px}
 #room-screen.story-party .story-room-panel{flex:1 1 0;min-width:0}
 #room-screen.story-party .room-code-badge{flex:0 0 auto;width:auto;min-height:0;padding:3px 6px 3px 10px;gap:8px}
 #room-screen.story-party .room-code-badge small{font-size:11px;line-height:1.1;max-width:40px;white-space:normal}
 #room-screen.story-party .room-code-badge strong{font-size:18px}
 #room-screen.story-party .room-code-badge button{width:44px;height:44px}
 #room-screen.story-party .room-back{flex:0 0 auto;min-height:44px;font-size:11px;padding-left:10px;padding-right:10px}
 #room-screen.story-party .story-room-buttons{flex-direction:row}
 #room-screen.story-party .story-room-buttons .secondary-button{min-height:44px;font-size:13px}
 /* names and lines wrap instead of being cut; the host's Remove takes its own row under the seat's badge */
 #room-screen.story-party #room-roster .story-member>strong,#room-screen.story-party #room-roster .story-member>small{flex:0 0 auto;min-height:0;height:auto;line-height:1.25;white-space:normal;overflow:visible;text-overflow:clip;max-width:96%;text-align:center}
 #room-screen.story-party #room-roster .story-member .slot-header{flex:0 0 auto;flex-wrap:wrap;row-gap:3px;column-gap:4px;height:auto;max-height:none}
 #room-screen.story-party #room-roster .story-member .ready-badge{white-space:nowrap;letter-spacing:0}
 #room-screen.story-party #room-roster .kick-player{position:static;flex:0 0 auto;margin:0 0 0 auto;min-height:32px;height:auto;padding:0 8px;font:800 11px/1 system-ui}
 /* the cards take their own height instead of stretching with the column beside them (the picture used to grow) */
 #room-screen.story-party #room-roster{flex:0 0 auto;height:auto;align-content:start}
 #room-screen.story-party #room-roster .story-member{height:auto;min-height:0}
 #room-screen.story-party #room-roster .slot-character{flex:0 0 auto}
 /* a seat that also carries the host's Remove row gives that row its picture's height */
 #room-screen.story-party #room-roster .story-member:has(.kick-player) .slot-character{height:20px}
}
/* the smallest phones (375px tall): a little less picture so the crew's lines clear the action bar */
@media(max-height:380px){
 #room-screen.story-party .story-member .slot-character{height:28px}
 #room-screen.story-party #room-roster .empty-seat{flex-basis:26px;min-height:26px;height:26px;width:26px;font-size:18px;line-height:24px}
 #room-screen.story-party .crew-panel .panel-heading h2{font-size:14px}
 #room-screen.story-party #room-roster .slot-character{display:none}
 /* the crew's title row gives way; each seat still says whether it is open */
 #room-screen.story-party .crew-panel .panel-heading{display:none}
}
/* narrow short screens: the host's briefing button says just Briefing, so the level panel keeps the boss's name */
@media(max-height:520px) and (max-width:740px){
 #room-screen.story-party .story-room-buttons .story-long{display:none}
 /* the room code's label sits above the code, so the level panel keeps the room it needs */
 #room-screen.story-party .room-code-badge{display:grid;grid-template-columns:auto 44px;column-gap:6px;row-gap:1px;align-items:center}
 #room-screen.story-party .room-code-badge small{grid-column:1;grid-row:1;max-width:none;white-space:nowrap}
 #room-screen.story-party .room-code-badge strong{grid-column:1;grid-row:2;line-height:1}
 #room-screen.story-party .room-code-badge button{grid-column:2;grid-row:1/3}
 /* the boss's name may take two lines; the first-clear line is in the briefing */
 #room-screen.story-party .story-room-head h2{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-height:1.05}
 #room-screen.story-party .story-room-head p:not(.story-last-result){display:none}
 #room-screen.story-party .story-room-head small{white-space:normal;line-height:1.15}
}
/* 10: the story result's button (Back to the party) at the touch floor, and its kicker readable */
.round-banner.story-result .primary-button{min-height:44px;font-size:14px}
.round-banner.story-result .eyebrow{font-size:11px}
/* Story media slots (UI-02, MED-09): a level's accepted thumbnail behind its card (a light veil keeps the text at its
   contrast), at the top of its briefing, and the opening film in its own dark frame with Skip at the corner */
.story-level[data-thumb="true"]{background-image:linear-gradient(90deg,#f7fbfff2 0%,#f7fbffe6 60%,#f7fbffa6 100%),var(--story-thumb);background-size:cover;background-position:center}
.story-brief-thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin:0 0 10px;box-shadow:0 2px 0 #0b3a6633}
/* V32 (QA L4): height fit-content (the dialog's own default): height auto with the modal's top and bottom at 0 stretched it to
   the window, a 48px black band under the 16:9 film at 1366 x 768 */
.story-film{width:min(1280px,100vw);max-width:100vw;height:fit-content;max-height:100dvh;padding:0;border:0;background:#000;overflow:hidden}
.story-film::backdrop{background:#000d}
.story-film video{display:block;width:100%;height:auto;max-height:100dvh;background:#000}
.story-film-skip{position:absolute;top:10px;right:10px;z-index:2;min-width:64px;min-height:44px;padding:0 16px;border-radius:12px;border:2px solid #ffffffcc;background:#0b2540d9;color:#fff;font:800 14px/1 'Nunito Sans',sans-serif}

/* M7: a boss skill's accepted icon beside its name in the briefing (decorative; the text carries the meaning) */
.story-skills li[data-icon] .story-skill-icon{float:left;width:40px;height:40px;margin:0 10px 4px 0;border-radius:50%;object-fit:cover}
@media(max-height:520px){.story-skills li[data-icon] .story-skill-icon{width:32px;height:32px;margin-right:8px}}
/* M7: the film button sits on the briefing's thumbnail (a play button), outside the action row (Fable m7-media-integration-01);
   without a thumbnail it is a full-width button at the top of the briefing */
.story-brief .story-watch{display:flex;align-items:center;justify-content:center;width:100%;min-height:44px;font-size:14px;margin:8px 0 4px}
.story-brief-poster{position:relative}
.story-brief-poster[data-film="true"] .story-watch{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);width:auto;max-width:calc(100% - 20px);margin:0;padding:0 18px;white-space:nowrap;box-shadow:0 4px 14px #0b2a3d66}
.story-watch-short{display:none}

/* V32 (UI-05, QA M1): short screens keep the map and the briefing side by side, so the briefing is narrow there: the three
   short facts share a row and Guards takes a full row under them (four columns wrapped Guards 8-9 times and cut
   "hammerhead" at 667); a word longer than its box wraps instead of being cut, and the shared list margin (13px under
   every item) goes, so the two rows sit together */
.story-facts strong{overflow-wrap:break-word}
@media (max-height:520px){.story-facts{grid-template-columns:repeat(3,minmax(0,1fr))}.story-facts li{margin:0}.story-facts li:nth-child(2){grid-column:1/-1;order:1}}
/* V32 (QA M5): the EXTREME badge, in words (not colour alone), on an Extreme level's card and on its briefing picture */
.story-level-foot{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px}
.story-extreme-badge{display:inline-block;padding:1px 7px;border-radius:999px;background:#a3122e;color:#fff;font:900 11px/1.35 'Nunito Sans',sans-serif;letter-spacing:.6px;box-shadow:0 1px 0 #5c0718}
.story-brief-poster>.story-extreme-badge{position:absolute;top:10px;left:10px;padding:3px 10px;font-size:12px;border:2px solid #fff;box-shadow:0 3px 10px #0b2a3d80}
.story-brief-head .story-extreme-badge{margin:0 6px 2px 0}
/* V32 (QA L1, L8): on short screens the briefing's picture is a shorter strip, so its film button clears the pinned action
   row (it sat 2px under it at 844 x 390) and the boss's name shows under it when the briefing opens; the EXTREME badge
   sits tighter in its corner, clear of the film button, and the eyebrow over the name takes its own line height (an
   Extreme level's eyebrow wraps at 667 and pushed the name under the action row) */
@media (max-height:520px){.story-brief-thumb{aspect-ratio:auto;height:clamp(80px,calc(100dvh - 290px),120px);object-position:50% 35%;margin-bottom:4px}.story-brief-poster>.story-extreme-badge{top:6px;left:6px;padding:1px 8px;font-size:11px}.story-brief-head small{display:block;line-height:1.3}
 /* V32 (UI-QA L8): on short screens an Extreme level's poster badge already says EXTREME, so the eyebrow drops its copy and stays
    on one line; a wrapped eyebrow pushed long boss names (Foreman Grubber, Director Puffington, Pharaoh Nautilus) under the actions */
 .story-eyebrow-extreme{display:none}}
/* V32 (QA L2): on short screens the join label is for screen readers only and the CODE placeholder is the visible label, so
   it reads at 4.5:1 or more (it measured about 2.9:1) */
.story-join input::placeholder{color:#587389;opacity:1}