:root{color-scheme:dark;--paper:#e9e7df;--muted:#a5b6b4;--gold:#d7bb82;--edge:#34454b;--card:#142128;--teal:#8cc8bc}*{box-sizing:border-box}body.library-page{margin:0;background:radial-gradient(ellipse at 80% 0,#1c373a 0,transparent 60%),#0b151c;color:var(--paper);font:16px/1.55 system-ui,sans-serif;min-height:100vh}button,input,textarea,select{font:inherit}button,a.primary{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}[hidden]{display:none!important}a{color:var(--gold)}.library-header{max-width:1120px;margin:auto;padding:26px 30px;display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--edge)}.wordmark{text-decoration:none;color:var(--gold);font-size:14px;font-weight:700;letter-spacing:.14em}#session-label{font-size:13px;color:var(--muted)}.library-main{max-width:1060px;margin:auto;padding:34px 30px 90px}.library-intro{margin:16px 0 34px;max-width:760px}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:700}h1{font:clamp(32px,5vw,51px)/1.13 Georgia,serif;font-weight:400;margin:14px 0}h2{font-size:21px;font-weight:600;margin:8px 0 14px}p{color:var(--muted)}.library-card{background:linear-gradient(130deg,#17292e,#111e25);border:1px solid var(--edge);border-radius:13px;padding:26px;margin:16px 0 34px;box-shadow:0 14px 45px #0002}.library-card p:first-child{margin-top:0}.library-page label{display:block;color:var(--paper);font-size:14px;margin:16px 0}.library-page input:not([type=radio]),.library-page textarea,.library-page select{display:block;width:100%;border:1px solid #526268;background:#0c1920;color:var(--paper);border-radius:6px;padding:11px 12px;margin-top:7px;min-width:0}.library-page textarea{resize:vertical}.library-page input:focus,.library-page select:focus,.library-page textarea:focus{outline:2px solid var(--teal);outline-offset:2px}.library-page button,.library-page .primary{border:1px solid #71847f;border-radius:6px;color:var(--paper);background:#233b3c;padding:10px 16px;text-decoration:none;display:inline-block}.library-page .primary{background:var(--gold);color:#132126;border-color:var(--gold);font-weight:650}.library-page button:hover:not(:disabled),.library-page a.primary:hover{filter:brightness(1.12)}.library-page :focus-visible{outline:2px solid var(--teal);outline-offset:4px}.muted{font-size:13px;color:var(--muted)}.join-card{display:grid;grid-template-columns:1fr minmax(140px,230px) auto;gap:20px;align-items:center}.join-card label{margin:0}.join-card h2{margin:0 0 3px}.join-card p{font-size:13px;margin:0}.join-card input{text-transform:uppercase}.world-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}.world-choice{border:1px solid var(--edge);border-radius:8px;padding:18px;cursor:pointer}.world-choice:has(input:checked){border-color:var(--gold);background:#273531}.world-choice strong{margin-left:8px}.world-choice p{font-size:13px;line-height:1.5;margin-bottom:0}.mode-choice{border:0;padding:0;margin:16px 0}.mode-choice legend{font-size:14px}.mode-choice label{display:inline-block;margin:10px 24px 0 0}.saved-games{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:15px;margin-bottom:32px}.saved-card{padding:20px;border:1px solid var(--edge);border-radius:9px;background:var(--card)}.saved-card h3{font-size:18px;margin:0 0 10px}.saved-card p{font-size:13px;margin:8px 0 16px}.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px}.notice{position:sticky;top:8px;z-index:10;padding:15px 20px;background:#3c2929;border:1px solid #a87c70;border-radius:8px;white-space:pre-wrap;margin-bottom:20px}.notice.success{background:#1f3a32;border-color:#76a692}.hero-row{display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--edge);padding:14px 0}.hero-row small{display:block;color:var(--muted)}.share-code{display:flex;align-items:center;gap:24px}.share-code code{font:26px monospace;letter-spacing:.12em;color:var(--gold);overflow-wrap:anywhere}#host-signin{font-size:13px;max-width:540px}#host-signin form{padding:10px 0}.back-link{font-size:13px}.room-round{border:1px solid var(--edge);border-radius:8px;background:#15282d;padding:12px;margin-bottom:14px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:12px}.room-round strong{color:var(--gold)}.room-round [role=timer]{font-variant-numeric:tabular-nums;color:#c5e6de}.room-round p{flex-basis:100%;margin:0;font-size:11px;line-height:1.5;color:#b2c5c3}.room-round a{margin-left:auto}.room-round button{padding:7px 10px;background:#3c2827;border:1px solid #976c65;border-radius:5px;color:#ffe6df}.room-guest [data-panel=settings],.room-guest #settings-shortcut,.room-guest #assistant-toggle,.room-guest #assistant-panel,.room-guest [data-panel=comic],.room-guest .scene-image-controls,.room-guest .npc-visual-card button,.room-guest .gallery-card button,.room-guest .favorite-star,.room-guest .scene-read{display:none!important}.dictation-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;flex-basis:100%}.dictation-controls span{color:var(--muted)}.dictation-controls audio{max-width:100%;height:35px}.speech-error{color:#edb0a7;white-space:pre-wrap}.generic-world:before{background:linear-gradient(120deg,#0c1b22,#122f31)!important}.generic-world .world-map-card{display:none}.generic-world .character-portrait img{max-height:400px;object-fit:contain}.library-link{color:var(--gold);font-size:12px;text-decoration:none;margin-bottom:20px;display:block}@media(max-width:700px){.library-main{padding:22px 18px 65px}.library-header{padding:20px 18px}.library-header #session-label{font-size:11px}.join-card{grid-template-columns:1fr}.join-card button{justify-self:start}.library-card{padding:20px}.share-code{flex-wrap:wrap;gap:12px}.room-round a{margin-left:0}.field-grid{grid-template-columns:1fr}}

.quest-journal{margin:0 0 24px}.quest-journal:empty{display:none}.quest-journal details{border:1px solid var(--edge);border-radius:7px;padding:12px 15px;margin:8px 0;background:#14252a}.quest-journal summary{cursor:pointer;color:var(--gold);font-size:13px}.quest-journal p{white-space:pre-wrap;font-size:13px;line-height:1.6;color:#bfceca}

/* Explicit composer rows keep round controls and dictation out of the input grid. */
#story-panel>.composer{grid-template-areas:"round round" "label tools" "choices choices" "input input" "dictation dictation" "foot foot" "status status"}
#story-panel>.composer>.room-round{grid-area:round;width:100%;min-width:0;margin:0 0 8px}
#story-panel>.composer>.dictation-controls{grid-area:dictation;width:100%;min-width:0;padding:5px 0}
#story-panel .compose-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;min-width:0}
#story-panel .compose-row>textarea{grid-column:1;grid-row:1;width:100%;min-width:0}
#story-panel .compose-row>#send-action{grid-column:2;grid-row:1;width:auto;min-width:104px;max-width:180px;padding:9px 14px;font-size:13px;line-height:1.35;white-space:normal;overflow-wrap:normal}
#story-panel .compose-row>.dictation-controls{grid-column:1/-1;grid-row:2}
#story-panel .dictation-controls button{width:auto;min-width:105px;flex:0 0 auto;background:#263e40;border:1px solid #687d78;border-radius:6px;color:#e4ebe4;padding:8px 12px;font-size:12px;line-height:1.4;white-space:nowrap}
#story-panel .dictation-controls span{font-size:11px;line-height:1.5;min-width:0;overflow-wrap:anywhere}
.room-round [role=status]{flex-basis:100%;line-height:1.5}
@media(max-width:600px){#story-panel .compose-row>#send-action{min-width:86px;max-width:125px;padding:8px 10px;font-size:12px}.room-round{padding:9px;gap:7px}#story-panel .dictation-controls{gap:7px}#story-panel .dictation-controls button{min-width:98px}}

body.has-room-background:before{background:linear-gradient(90deg,rgba(3,10,16,.76),rgba(5,14,22,.4) 42%,rgba(3,12,20,.7)),var(--room-background) center center/cover no-repeat!important}

.hero-creation-status{padding:12px 14px;border-left:3px solid var(--teal);background:#1c3437;color:#dcebe5;font-size:14px;line-height:1.6;border-radius:3px;overflow-wrap:anywhere}

/* Give the story the viewport; keep secondary controls behind small disclosures. */
.topbar{height:60px}
#story-panel.active{grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"hero roster" "toolbar roster" "stream roster" "composer roster";height:calc(100dvh - 60px);min-height:0;padding:12px 20px;gap:9px 18px}
#story-panel>.hero-strip{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;text-align:left;min-width:0}
#story-panel .hero-strip .eyebrow{display:none}
#story-panel .hero-strip h1{font-size:32px;line-height:1.12;margin:0;max-width:100%;overflow-wrap:anywhere}
#story-panel .hero-subtitle{margin:0;font-size:12px;line-height:1.45}
.story-toolbar{grid-area:toolbar;display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;min-width:0}
.story-toolbar>.music-player{flex:1 1 260px;min-width:0;margin:0;padding:6px 8px;gap:6px}
.story-toolbar .music-player button{padding:6px 9px;white-space:nowrap}
.story-toolbar #music-status{min-width:70px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.story-toolbar>.story-navigation{flex:0 1 auto;margin:0;gap:5px;min-width:0;font-size:12px}
.story-toolbar .story-navigation select,.story-toolbar .story-navigation input,.story-toolbar .story-navigation button{padding:7px 8px}
.story-toolbar .story-navigation input{width:62px}
#turn-jump-message:empty{display:none}
.music-options{position:relative;flex:none}
.music-options>summary{cursor:pointer;color:var(--gold);font-size:12px;padding:6px 8px;border:1px solid var(--edge);border-radius:5px;white-space:nowrap}
.music-options>div{position:absolute;right:0;top:calc(100% + 7px);z-index:15;min-width:220px;max-width:calc(100vw - 32px);padding:14px;background:#13272d;border:1px solid #647c77;border-radius:7px;box-shadow:0 8px 24px #0007;display:grid;gap:12px}
#story-panel>.composer{position:sticky;bottom:0;z-index:4;padding:10px 12px;grid-template-areas:"round round" "label tools" "choices choices" "input input" "dictation status" "foot foot";gap:5px 10px}
#story-panel>.composer>.room-round{position:relative;display:flex;align-items:center;gap:7px 12px;padding:7px 9px;margin:0 0 3px;font-size:12px}
.room-round [role=status]{flex-basis:auto}
.room-round a{margin-left:auto;white-space:nowrap}
.round-help{flex:none;position:static}
.round-help>summary{cursor:pointer;color:var(--gold);white-space:nowrap;padding:2px 0}
.room-round .round-help>p{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:16;margin:0;white-space:pre-wrap;background:#142b31;border:1px solid #647c77;padding:15px;border-radius:8px;box-shadow:0 8px 24px #0008;font-size:12px;line-height:1.6}
#story-panel>.composer>.dictation-controls{width:auto;align-self:center;padding:0;min-width:0}
#story-panel .dictation-controls button{min-width:0;padding:7px 10px}
.dictation-controls span:empty{display:none}
#story-panel .composer-foot>span:first-child{display:none}
#story-panel .composer-foot:has(#compose-state:empty){display:none}
#story-panel .text-engine-composer{align-self:center;text-align:right;max-width:260px;font-size:11px;line-height:1.4}
#story-panel>.story-stream{min-height:0;padding:2px 3px 8px;scroll-padding:8px}
#story-panel .story-card{padding:20px 24px 15px}
.story-card[data-has-scene-image="false"] .vn-stage:not(.is-speaking){display:none}
.vn-stage:not(.is-speaking) .vn-speaker{display:none}
#story-panel .vn-stage{margin:12px 0 16px}
#story-panel .vn-stage .vn-image{height:clamp(160px,23vh,280px)}
.scene-media:has(img:only-child){display:none}
#story-panel .story-tools{align-items:center;gap:8px 14px;padding-top:10px}
#story-panel .story-tools .scene-image-controls{margin:0;min-height:0;gap:7px}
#story-panel .story-tools .scene-image-controls button{padding:6px 9px}
.scene-cast-details{min-width:0;font-size:12px;color:var(--gold)}
.scene-cast-details:has(.npc-visuals:empty){display:none}
.scene-cast-details>summary{cursor:pointer;padding:6px 4px}
.scene-cast-details[open]{flex-basis:100%}
.scene-cast-details[open] .npc-visuals{margin:8px 0}
@media(max-width:1099px){
 #story-panel.active{grid-template-rows:auto auto auto minmax(0,1fr) auto;grid-template-areas:"hero" "toolbar" "roster" "stream" "composer";height:calc(100dvh - 60px);gap:7px;padding:12px 16px}
 #story-panel.active:has(#story-roster-details[open]){height:calc(100dvh - 60px)}
 #story-panel:has(#story-roster-details[open])>.story-stream{height:auto;min-height:0}
 .story-roster{max-height:26dvh}
}
@media(max-width:600px){
 #story-panel.active,#story-panel.active:has(#story-roster-details[open]){height:calc(100dvh - 114px);min-height:0;padding:9px 10px;gap:6px}
 #story-panel .hero-strip h1{font-size:28px}
 #story-panel .hero-subtitle{font-size:12px}
 .story-toolbar{gap:6px}
 .story-toolbar>.music-player{flex-basis:100%;padding:5px 7px}
 .story-toolbar>.story-navigation{width:100%;font-size:12px;gap:5px}
 .story-toolbar .story-navigation select,.story-toolbar .story-navigation input,.story-toolbar .story-navigation button{padding:6px 7px}
 .story-toolbar .story-navigation input{width:58px}
 #story-panel>.composer{padding:8px 10px;grid-template-areas:"round round" "label tools" "choices choices" "input input" "dictation dictation" "foot status"}
 #story-panel>.composer>.room-round{gap:5px 10px;padding:6px 8px}
 #story-panel .text-engine-composer{font-size:10px;max-width:190px}
 #story-panel .story-card{padding:17px 16px 13px}
 #story-panel .vn-stage .vn-image{height:180px}
 .story-roster{padding:6px 9px}
}
.vn-stage:not(.is-speaking) .vn-image{filter:none}