:root{color-scheme:dark;--ink:#f2e7cf;--muted:#b5b6a2;--paper:#142c29;--line:#baa9803b;--gold:#e2c48d;--teal:#264f47;--red:#a54734;font-family:Georgia,'Noto Serif CJK SC','Songti SC',serif;background:#0e201e;color:var(--ink)}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 15%,#294137,#0e201e 78%);min-height:100vh}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;border:1px solid var(--line);background:#203d36;padding:10px 16px;min-height:44px;transition:background .18s,transform .18s,border-color .18s}button:hover{background:#365a49;border-color:#ddc38d}button:active{transform:translateY(1px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #f2d89a;outline-offset:4px}button[hidden],[hidden]{display:none!important}#app{max-width:1600px;margin:auto;padding:0 24px}.masthead{height:84px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none}.seal{writing-mode:vertical-rl;padding:5px 7px;background:#9d4434;color:#ffe9bc;border:1px solid #dcac77;font-size:15px;letter-spacing:4px;box-shadow:0 0 0 3px #9d44344d}.brand strong{font-size:26px;letter-spacing:5px;font-weight:500}.eyebrow{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-bottom:5px}.masthead nav{display:flex;gap:7px}.masthead nav button{background:transparent;border-color:transparent;font:12px system-ui,sans-serif;letter-spacing:.3px}.dashboard{display:flex;justify-content:center;gap:0;border-block:1px solid var(--line);margin-bottom:14px;background:#0c211b70}.stat{flex:1;display:flex;align-items:center;justify-content:center;gap:14px;padding:12px;max-width:230px;border-right:1px solid var(--line)}.stat:last-child{border:0}.stat-label{font:10px system-ui,sans-serif;color:#b0baa8}.stat strong{font-size:21px;font-weight:400;color:#edcf97}.stage-shell{position:relative;width:100%;min-width:0;min-height:650px;aspect-ratio:16/9;border:1px solid #b599643f;isolation:isolate;box-shadow:0 20px 70px #0005;background:#122c25;overflow:hidden}.scene{position:absolute;inset:0;overflow:hidden;background:#142c27}.scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:2}.scene[data-has-art="true"] img{object-fit:contain;z-index:2}.scene-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#051a2166,transparent 30%,transparent 52%,#09271e9c);z-index:4;pointer-events:none}#phaser-stage{position:absolute;inset:0;z-index:3;pointer-events:none}#phaser-stage canvas{display:block;max-width:100%;max-height:100%}#phaser-stage[data-ready="false"] canvas{opacity:0}.scene-heading{position:absolute;top:25px;left:32px;z-index:6;pointer-events:none;text-shadow:0 2px 7px #031c17}.scene-heading>span{font:10px system-ui,sans-serif;letter-spacing:2px;color:#e5d9ba}.scene-heading h1{font-size:29px;letter-spacing:3px;font-weight:400;margin:9px 0}.scene-heading p{margin:0;max-width:500px;font:12px/1.8 system-ui,sans-serif;color:#eee0c6}.hotspots{position:absolute;inset:0;z-index:7;pointer-events:none}.hotspot{pointer-events:auto;position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;background:#132f26df;border:1px solid #d6ba7880;border-radius:24px;padding:6px 13px 6px 6px;min-height:42px;font-size:12px;box-shadow:0 5px 20px #061b1766;white-space:nowrap}.hotspot:hover{transform:translate(-50%,-50%) scale(1.04)}.hotspot-orb{display:grid;place-items:center;width:29px;height:29px;border-radius:50%;background:#e0bd7b;color:#183f32;font-size:21px;box-shadow:0 0 22px #ffe1a04d}.cast{position:absolute;left:25px;top:130px;display:flex;gap:9px;z-index:8;max-width:calc(100% - 50px);overflow-x:auto;padding:7px 3px 13px}.cast-person{padding:0;display:flex;flex-direction:column;flex:0 0 75px;background:#152e28ed;border:1px solid #c9b27a70;min-height:0;box-shadow:0 6px 15px #14201577}.cast-person img{width:73px;height:97px;object-fit:contain;background:#eee1c2;display:block}.cast-person span{font-size:10px;padding:7px 3px}.cast-person:hover{transform:translateY(-4px)}.character-card{position:absolute;top:128px;right:30px;width:170px;z-index:8;box-shadow:0 10px 35px #061a13aa;background:#142e28;border:1px solid #cfba8599;animation:card-entry .35s ease-out}.character-card>img{display:block;width:100%;aspect-ratio:3/4;object-fit:contain;background:#eddfc0}.character-card>span{display:block;text-align:center;padding:9px;font-size:14px;letter-spacing:2px}.interaction-panel{position:absolute;left:27px;right:27px;bottom:25px;z-index:9;background:linear-gradient(115deg,#112d27f7,#183c33ed);border:1px solid #bca87570;box-shadow:0 12px 40px #0006;backdrop-filter:blur(9px);padding:20px 24px;max-height:50%;overflow:auto}.story-topline{display:flex;align-items:center;gap:15px;margin-bottom:11px}.story-topline #chapter{font-size:12px;letter-spacing:2px;color:#e2c58d}.story-topline #beat-position{font-size:10px;color:var(--muted);margin-left:auto}#read-more{font-size:11px;padding:4px 10px;min-height:32px}.story{font-size:17px;line-height:1.85;letter-spacing:.4px;min-height:34px;overflow-wrap:anywhere}.story p{margin:0}.story-actions{display:flex;justify-content:flex-end;gap:9px}.story-actions:not(:empty){margin-top:12px}.story-actions button{background:#a44b33;border-color:#d79562;color:#ffefd1;padding:10px 22px;font-size:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;max-height:195px;overflow:auto}.actions:not(:empty){margin-top:15px}.action{display:flex;gap:10px;align-items:center;background:#294d3edc;text-align:left;font-size:12px;line-height:1.5;padding:9px 12px;min-width:120px}.action .number{font-size:9px;color:#cebc8e}.action .arrow{margin-left:auto;color:#dbc08d}.action.primary{background:#a94d32;border-color:#e0b67c}.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0 24px;margin:15px 0;padding:0 18px;border:1px solid var(--line);background:#132b24}.field{display:flex;justify-content:space-between;gap:20px;align-items:center;font-size:12px;min-height:46px;border-bottom:1px solid var(--line)}.field span{color:#b4b9a5}.field strong{font-weight:400;color:#ead1a6}.under-story{display:flex;justify-content:space-between;gap:20px;padding:12px 2px;font:10px/1.6 system-ui,sans-serif;color:#92a492}footer{display:flex;gap:20px;align-items:center;justify-content:space-between;font:9px/1.6 system-ui,sans-serif;color:#91a391;padding:6px 0 12px}footer button{background:none;border:none;min-height:32px;padding:4px 0;font-size:10px}.development{max-width:55%}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}dialog{background:#182f27;color:var(--ink);border:1px solid #ccb78070;width:min(700px,92vw);max-height:86vh;box-shadow:0 20px 100px #000a;padding:24px 30px}dialog::backdrop{background:#071f1cd9;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:15px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:22px;font-weight:400;letter-spacing:2px}.modal-head button{background:none;border:none;font:28px system-ui,sans-serif;padding:5px 12px}.modal-copy,.journal-scene{font-size:14px;line-height:1.9}.save-code{display:block;width:100%;height:180px;resize:vertical;background:#091f18;border:1px solid #9d926a;color:#e5dcc3;padding:13px;font:11px/1.6 monospace;word-break:break-all}.modal-buttons{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}.modal-buttons .danger{background:#a34833}.modal-status{background:#4d452c;border-left:3px solid #d5b16e;padding:12px 15px;font-size:13px;line-height:1.7}.source-help,.journal-entry{border-top:1px solid var(--line);padding-top:12px;margin-top:15px;font-size:13px;line-height:1.9}summary{cursor:pointer;color:#dfc58b}.journal-entry p{color:#c5cab7}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:90vw;padding:14px 22px;border:1px solid #cbb27a;background:#173b2e;box-shadow:0 10px 30px #0007;z-index:40;font:13px/1.5 system-ui,sans-serif}.draft-scene{position:absolute;inset:0;background:radial-gradient(ellipse at 65% 20%,#426969,#203d46 68%)}.draft-moon{position:absolute;left:23%;top:20%;width:80px;height:80px;border-radius:50%;background:#ead7a5;box-shadow:0 0 80px #ebd99d4d}.draft-roof{position:absolute;bottom:0;left:0;right:0;height:25%;background:repeating-linear-gradient(0deg,transparent 0 20px,#263632aa 20px 25px),repeating-linear-gradient(90deg,#725f48 0 35px,#b69a67 35px 39px,#5a5544 39px 44px);transform:perspective(300px) rotateX(20deg)}.scene[data-location="shrine"] .draft-scene{background:radial-gradient(ellipse at 50% 50%,#aa8046,#332e27 65%)}.scene[data-location="shrine"] .draft-moon{width:190px;height:260px;left:43%;top:18%;border-radius:45% 45% 0 0;border:24px solid #9a682f;background:#5a4e33;box-shadow:0 0 0 25px #5f362a}.scene[data-location="shrine"] .draft-roof{background:#6b3322;height:18%;left:27%;right:27%;bottom:15%;transform:none}#app[data-mode="title"] .stage-shell{min-height:660px}#app[data-mode="title"] .scene-heading{top:70px;left:55px}#app[data-mode="title"] .scene-heading h1{font-size:54px;letter-spacing:10px}#app[data-mode="title"] .interaction-panel{left:55px;right:auto;width:min(450px,calc(100% - 110px));bottom:60px}#app[data-mode="title"] .actions{display:grid;grid-template-columns:1fr 1fr}#app[data-mode="title"] .action:first-child{grid-column:1/-1;font-size:16px;padding:15px}#app[data-mode="title"] .dashboard{display:none}#app[data-mode="explore"] .interaction-panel{max-height:29%;padding:14px 20px}#app[data-mode="explore"] .story{font-size:14px;min-height:0}#app[data-mode="characters"] .cast{max-width:calc(100% - 245px)}#app[data-mode="characters"] .interaction-panel{max-height:41%}@keyframes card-entry{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}@media(min-width:1450px){.stage-shell{min-height:760px}.interaction-panel{left:40px;right:40px;bottom:32px;padding:25px 30px}.story{font-size:20px}.character-card{width:205px;right:40px;top:145px}}@media(max-width:900px){#app{padding:0 13px}.masthead{height:75px}.brand strong{font-size:23px}.stage-shell{aspect-ratio:auto;min-height:650px}.scene>img{top:0;height:auto;aspect-ratio:16/9}.scene-vignette{background:linear-gradient(180deg,#10271a55,transparent 35%,#112a1e 85%)}.scene-heading{top:20px;left:23px}.scene-heading h1{font-size:24px}.scene-heading p{max-width:350px;font-size:11px}.character-card{width:130px;right:20px;top:115px}.cast{top:112px;left:20px;gap:6px}.cast-person{flex-basis:61px}.cast-person img{width:59px;height:79px}.interaction-panel{left:16px;right:16px;bottom:20px;max-height:45%;padding:17px 20px}.story{font-size:16px}.stat{padding:10px 6px;gap:7px}.stat strong{font-size:17px}.stat-label{font-size:9px}.hotspots{height:auto;aspect-ratio:16/9}.hotspot{font-size:10px;min-height:35px;padding:4px 10px 4px 4px}.hotspot-orb{width:25px;height:25px;font-size:18px}.actions{max-height:200px}.action{min-width:100px;font-size:11px}.field-grid{grid-template-columns:repeat(3,1fr);gap:0 16px}.field{font-size:11px}#app[data-mode="explore"] .interaction-panel{max-height:36%}#app[data-mode="title"] .scene-heading{left:30px;top:35px}#app[data-mode="title"] .scene-heading h1{font-size:43px}#app[data-mode="title"] .interaction-panel{left:30px;bottom:35px;width:min(420px,calc(100% - 60px))}}@media(max-width:600px){#app{padding:0 8px}.masthead{height:68px;gap:8px}.brand{gap:9px}.brand strong{font-size:20px;letter-spacing:3px}.brand .eyebrow{font-size:7px;letter-spacing:1px}.seal{font-size:12px;padding:4px}.masthead nav{gap:0}.masthead nav button{font-size:10px;padding:8px;min-height:40px}.dashboard{display:grid;grid-template-columns:repeat(3,1fr);margin-bottom:8px}.stat{padding:8px;max-width:none}.stat:nth-child(3){border:0}.stat strong{font-size:16px}.stage-shell{min-height:720px}.scene>img{height:100%;object-fit:contain;object-position:center top}.scene-heading{top:15px;left:18px;right:18px}.scene-heading h1{font-size:22px;margin:6px 0}.scene-heading>span{font-size:8px}.scene-heading p{font-size:10px;line-height:1.6;max-width:290px}.cast{top:235px;left:15px;right:15px;max-width:none;padding-bottom:10px}.cast-person{flex-basis:56px}.cast-person img{width:54px;height:72px}.cast-person span{font-size:9px}.character-card{top:233px;right:15px;width:110px}.character-card>span{font-size:11px;padding:5px}.interaction-panel{left:12px;right:12px;bottom:14px;max-height:46%;padding:15px}.story{font-size:15px;line-height:1.75}.story-topline{margin-bottom:9px}.story-topline #chapter{font-size:11px;letter-spacing:1px}.actions{gap:6px;max-height:200px}.action{font-size:11px;padding:8px;min-width:calc(50% - 6px);flex:1}.action .number{display:none}.story-actions button{min-height:42px;padding:8px 16px}.hotspot{font-size:9px;min-height:32px;gap:4px}.hotspot-orb{width:20px;height:20px;font-size:14px}.hotspots{top:80px}.field-grid{grid-template-columns:repeat(2,1fr);padding:0 12px}.field{font-size:11px}.under-story{font-size:8px;gap:12px;padding:10px 3px}footer{font-size:8px;gap:10px;flex-wrap:wrap}footer .development{max-width:none;flex:1 1 65%}footer #art-status{order:3}#app[data-mode="title"] .stage-shell{min-height:650px}#app[data-mode="title"] .scene-heading{left:23px;top:28px}#app[data-mode="title"] .scene-heading h1{font-size:36px;letter-spacing:6px}#app[data-mode="title"] .interaction-panel{left:18px;width:calc(100% - 36px);bottom:24px}#app[data-mode="title"] .action:first-child{font-size:14px}#app[data-mode="explore"] .interaction-panel{max-height:44%}#app[data-mode="characters"] .cast{max-width:calc(100% - 140px);top:240px}#app[data-mode="characters"] .interaction-panel{max-height:41%}dialog{padding:16px 20px}.modal-head h2{font-size:19px}.modal-copy{font-size:13px}}@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media(max-width:600px){.hotspots{top:130px;left:14px;right:14px;height:auto;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;align-content:start}.hotspot{position:static!important;transform:none!important;min-height:35px;text-align:left;justify-content:flex-start;white-space:normal}#app[data-mode="explore"] .cast{top:272px}.stage-shell:has(.hotspots:not(:empty)){min-height:770px}}

.scene>img{object-position:center top}

/* Responsive scene-first shell. Art, Canvas and hotspots share one 8:5 plane. */
#app{padding:0 clamp(8px,2vw,28px)}main{position:relative}.masthead{height:auto;min-height:76px;flex-wrap:wrap;padding:12px 0}.masthead nav{flex-wrap:wrap}.masthead nav button{min-height:44px}.dashboard{flex-wrap:wrap}.stat{min-width:0}.stage-shell,#app[data-mode] .stage-shell{aspect-ratio:auto;min-height:0;padding-top:62.5%;overflow:visible;display:flex;flex-direction:column}.scene{bottom:auto;height:auto;aspect-ratio:8/5;width:100%;position:absolute;top:0;left:0}.scene>img,.scene[data-has-art="true"] img{width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center}.hotspots{inset:0;aspect-ratio:auto;height:100%;display:block}.hotspot{position:absolute!important;transform:translate(-50%,-50%)!important;min-height:44px;max-width:32%;white-space:normal;text-align:left}.scene-heading,#app[data-mode="title"] .scene-heading{top:18px;left:22px;right:22px}.scene-heading p{max-width:65%;font-size:12px}.scene-heading h1,#app[data-mode="title"] .scene-heading h1{font-size:clamp(21px,2.5vw,34px);letter-spacing:3px}.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{position:relative;inset:auto;order:1;max-width:100%;padding:12px 14px;margin:0;background:#102820}.cast-person{flex-basis:68px;min-height:44px}.cast-person img{width:66px;height:88px}.character-card{top:100px;right:24px;width:clamp(85px,12vw,150px)}.interaction-panel,#app[data-mode] .interaction-panel{position:relative;inset:auto;order:2;width:auto;max-height:none;margin:0;padding:20px 24px;overflow:visible;box-shadow:none}.actions{max-height:none;overflow:visible}.action{min-height:44px}.story-actions button,#read-more{min-height:44px}.story{font-size:17px}.game-panel{position:fixed;right:clamp(8px,3vw,40px);top:85px;width:min(420px,calc(100vw - 16px));max-height:calc(100dvh - 100px);overflow:auto;z-index:25;background:#142e27fa;border:1px solid #ba9d63;box-shadow:0 18px 70px #0009;padding:16px}.panel-heading{display:flex;justify-content:space-between;align-items:center}.panel-heading h2{font-size:20px;margin:0}.panel-heading button{font-size:24px}.panel-tabs{display:flex;margin:12px 0;gap:6px}.panel-tabs button{flex:1;padding:9px 6px;font-size:13px}.panel-tabs button[aria-pressed=true]{background:#88623b;border-color:#e5c186}.notebook-note{font:13px/1.8 system-ui,sans-serif;color:#cbd4bb}.notebook-action{display:block;width:100%;text-align:left;margin:7px 0}.notebook-person{display:inline-flex;align-items:center;width:calc(50% - 8px);margin:4px;gap:8px;padding:5px;font-size:12px}.notebook-person img{height:58px;width:44px;object-fit:contain}.notebook-person:disabled{opacity:.5;cursor:default}.game-panel .dashboard{display:grid;grid-template-columns:repeat(2,1fr)}.game-panel .stat{padding:10px 4px}.game-panel .field-grid{grid-template-columns:1fr;margin:10px 0}.field strong{overflow-wrap:anywhere}.under-story,footer{flex-wrap:wrap}.scene-vignette{background:linear-gradient(#08231b9c,transparent 28%,transparent 80%,#10282055)}
@media(min-width:1100px){.stage-shell{max-width:1280px;margin:auto}.interaction-panel{border-top:1px solid #bcab7866}.actions{gap:10px}.action{flex:0 1 auto}.game-panel{top:90px}}
@media(max-width:600px){.masthead{gap:6px;padding:9px 0}.brand strong{font-size:20px}.masthead nav{width:100%;justify-content:space-between}.masthead nav button{font-size:12px;padding:8px}.dashboard{grid-template-columns:repeat(3,minmax(0,1fr))}.stat{gap:5px;padding:8px 4px}.stat-label{font-size:10px}.stat strong{font-size:16px}.scene-heading,#app[data-mode="title"] .scene-heading{top:9px;left:12px;right:12px}.scene-heading h1,#app[data-mode="title"] .scene-heading h1{font-size:20px;margin:4px 0}.scene-heading>span{font-size:8px}.scene-heading p{display:none}.hotspot{min-height:44px;padding:5px 8px;font-size:10px;gap:4px;max-width:35%}.hotspot-orb{display:none}.character-card{top:76px;right:12px;width:68px}.character-card>span{font-size:10px;padding:4px}.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{padding:9px;gap:7px}.cast-person{flex-basis:58px}.cast-person img{width:56px;height:65px}.cast-person span{font-size:10px}.interaction-panel,#app[data-mode] .interaction-panel{padding:15px 12px}.story{font-size:15px;line-height:1.8}.action{flex:1 1 calc(50% - 8px);min-width:0;font-size:12px}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;padding:0 10px}.field{gap:8px}.game-panel{top:12px;max-height:calc(100dvh - 24px)}dialog{max-height:calc(100dvh - 24px);padding:16px}.under-story{font-size:10px}footer{font-size:9px}.notebook-person{min-height:64px}}
@media(max-height:500px) and (orientation:landscape){.game-panel{top:8px;max-height:calc(100dvh - 16px)}.masthead{min-height:54px}.stage-shell{max-width:850px}.scene-heading p{display:none}}
/* Let the scene establish its own intrinsic height, including narrow embed widths. */
.stage-shell,#app[data-mode] .stage-shell{padding-top:0}.scene{position:relative;inset:auto;flex:none;order:0;aspect-ratio:8/5}.hotspots{position:absolute}
/* Dense source-map anchors cannot guarantee 44px separation on a phone.
   The complete, labelled source action tray directly below the scene stays available. */
@media(max-width:600px){.hotspots{display:none}}
/* Shared ink, timber, paper and cinnabar palette from the frozen vector art. */
:root{--ink:#f3e7ce;--muted:#c0ad8c;--paper:#30251e;--line:#a98e665e;--gold:#e3c08c;--teal:#75563d;--red:#b65d40;background:#241c18}body{background:radial-gradient(ellipse at 50% 15%,#514032,#241c18 78%)}button{background:#513d2e}button:hover{background:#75563d}.dashboard{background:#30251ecc}.stat-label{color:#c6b492}.stat strong{color:#efd19c}.stage-shell,.scene{background:#30251e}.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{background:#30251e}.cast-person,.character-card{background:#443225;border-color:#a98e66}.cast-person img,.character-card>img{background:#e3d6b9}.interaction-panel,#app[data-mode] .interaction-panel{background:linear-gradient(115deg,#30251efc,#483327f5);border-color:#a98e6680}.action{background:#644a34}.action.primary,.story-actions button{background:#a95037;border-color:#cb9569}.field-grid{background:#30251e}.field span,.under-story,footer{color:#c0ad8c}.game-panel,dialog{background:#35281ffa;border-color:#a98e66}.notebook-note,.journal-entry p{color:#dfcfac}.save-code{background:#211a15}.hotspot{background:#35281feb}.hotspot-orb{color:#30251e}.scene-vignette{background:linear-gradient(#30251e88,transparent 28%,transparent 80%,#30251e55)}#toast{background:#513d2e}

/* Account saves remain outside the scene; narrow screens wrap controls. */
.cloud-progress{max-width:1000px;margin:16px auto;padding:12px 16px;border:1px solid #aa9470;border-radius:8px;background:#f5ecdb;color:#332b22;font:14px/1.5 system-ui,sans-serif;box-sizing:border-box}.cloud-progress p{margin:0 0 8px}.cloud-progress-actions{display:flex;flex-wrap:wrap;gap:8px}.cloud-progress button{min-height:44px;padding:8px 12px;font:inherit;cursor:pointer}.cloud-progress button:disabled{opacity:.5;cursor:default}

/* Shared full-width vector viewport. Reading/actions are a separate scrollable row. */
#app{max-width:none;padding:0;min-height:360px;height:100svh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.masthead{flex:none;min-height:58px;padding:8px 18px;gap:12px}.brand strong{font-size:23px}.masthead nav button{min-height:38px}.masthead .eyebrow{font-size:8px}
#app>main{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto}.dashboard{flex:none;margin:0}.stat{padding:7px 10px;max-width:none;gap:8px}.stat strong{font-size:17px}.stat-label{font-size:10px}
.stage-shell,#app[data-mode] .stage-shell{width:100%;max-width:none;margin:0;flex:1;min-height:0;overflow:visible;border:0;box-shadow:none}
.scene{flex:1;min-height:170px;aspect-ratio:auto;overflow:hidden}.scene>img,.scene[data-has-art="true"] img{object-fit:cover}
#phaser-stage canvas{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:cover}
.scene-heading,#app[data-mode="title"] .scene-heading{top:12px;left:18px;right:18px}.scene-heading h1,#app[data-mode="title"] .scene-heading h1{font-size:24px;margin:5px 0}.scene-heading p{display:none}
.scene-view-toggle{position:absolute;right:14px;top:12px;z-index:8;min-height:36px;padding:6px 10px;background:#443225ed;font:11px system-ui,sans-serif;border:1px solid #ccb27c;border-radius:4px}
.character-card{top:70px;right:16px;width:70px}.character-card>span{font-size:10px;padding:4px}
.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{flex:none;padding:5px 12px;gap:6px;align-items:center}
.cast-person{flex:0 0 auto;flex-direction:row;align-items:center;min-height:44px;padding:3px 7px 3px 3px;gap:4px}.cast-person img{width:29px;height:39px}.cast-person span{padding:3px 0;font-size:10px}
.interaction-panel,#app[data-mode] .interaction-panel{flex:none;max-height:37dvh;overflow:auto;padding:10px 18px;min-height:0}.story-topline{margin-bottom:6px}.story{font-size:15px;line-height:1.65;min-height:0}.actions{margin-top:8px!important;gap:6px}.actions:empty{display:none}.action{min-height:40px;padding:7px 10px;font-size:12px}.story-actions:not(:empty){margin-top:7px}.story-actions button,#read-more{min-height:36px;padding:7px 12px}
#fields,.under-story{display:none}#app>footer{flex:none;min-height:22px;padding:3px 15px;gap:12px}footer .development{max-width:none}footer button{min-height:24px}.game-panel{top:66px;max-height:calc(100dvh - 80px)}
@media(max-width:600px){#app{min-height:520px}.masthead{padding:6px 10px;gap:5px}.masthead .brand strong{font-size:18px}.masthead .brand .eyebrow{display:none}.masthead .seal{font-size:11px}.masthead nav{width:auto;margin-left:auto;gap:0}.masthead nav button{font-size:10px;padding:6px;min-height:36px}.masthead .brand{gap:6px}.dashboard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.stat{padding:5px;font-size:10px}.stat strong{font-size:14px}.stat-label{font-size:9px}.scene{min-height:220px}.scene-heading,#app[data-mode="title"] .scene-heading{top:10px;left:12px;right:12px}.scene-heading h1,#app[data-mode="title"] .scene-heading h1{font-size:19px}.scene-view-toggle{top:10px;right:10px;font-size:10px;min-height:34px}.character-card{top:67px;width:58px;right:12px}.interaction-panel,#app[data-mode] .interaction-panel{padding:10px 12px;max-height:37dvh}.story{font-size:14px}.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{padding:5px 8px}.cast-person img{width:25px;height:34px}.cast-person span{font-size:9px}.game-panel{top:10px;max-height:calc(100dvh - 20px)}#app>footer{font-size:8px;padding:3px 10px}.action{font-size:11px}.scene-heading>span{font-size:8px}}
@media(max-height:520px) and (orientation:landscape){#app{min-height:280px}.masthead{min-height:42px;padding:4px 14px}.masthead .brand strong{font-size:18px}.masthead .eyebrow,.masthead .seal{display:none}.masthead nav button{min-height:32px;padding:5px 10px;font-size:11px}.stat{padding:4px 8px}.stat strong{font-size:13px}.stat-label{font-size:9px}.scene{min-height:90px}.scene-heading h1,#app[data-mode="title"] .scene-heading h1{font-size:17px}.scene-heading>span{font-size:8px}.character-card{top:15px;right:16px;width:47px}.character-card>span{font-size:8px}.scene-view-toggle{top:9px;min-height:30px}.cast,#app[data-mode="explore"] .cast,#app[data-mode="characters"] .cast{padding:3px 10px}.cast-person{min-height:32px}.cast-person img{width:20px;height:27px}.interaction-panel,#app[data-mode] .interaction-panel{max-height:38dvh;padding:7px 14px}.story{font-size:12px;line-height:1.5}.story-topline{margin-bottom:4px}.story-topline #chapter{font-size:10px}.action{min-height:33px;font-size:10px;padding:5px 9px}.actions{gap:5px;margin-top:5px!important}.story-actions button,#read-more{min-height:30px;font-size:10px;padding:5px 10px}#app>footer{min-height:17px;padding:0 14px;font-size:8px}footer button{min-height:20px;font-size:9px}}

.scene-fit-toggle{position:absolute;right:14px;top:54px;z-index:8;min-height:34px;padding:6px 10px;background:#443225ed;font:11px system-ui,sans-serif;border:1px solid #ccb27c;border-radius:4px}.scene[data-fit=contain]>img,.scene[data-fit=contain] #phaser-stage canvas{object-fit:contain}.scene[data-fit=contain]{background:#554633}@media(max-height:520px) and (orientation:landscape){.scene-fit-toggle{top:9px;right:135px;min-height:30px;font-size:10px}.character-card{right:255px}}@media(max-width:600px){.scene-fit-toggle{right:10px;top:51px;font-size:10px}.character-card{top:94px}}