:root{--bg:#080d16;--s1:#111926;--s2:#192434;--s3:#223147;--edge:#334256;--paper:#f4eee2;--sub:#a7b5c5;--gold:#f0c986;--goldD:#ac8554;--green:#91c8ba;--pink:#d8a7a0;--shadow:rgba(0,0,0,.35);font-family:'DM Sans',system-ui,sans-serif;color:var(--paper);background:var(--bg)}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg)}body{margin:0;min-height:100dvh}button,input,textarea,select{font:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}button:disabled{cursor:not-allowed;opacity:.43}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}a{color:var(--gold)}.grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.18;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.17' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
#app{min-height:100dvh}.serif{font-family:'Cormorant Garamond',Georgia,serif}.eyebrow{text-transform:uppercase;letter-spacing:.19em;color:var(--gold);font-size:.66rem;font-weight:700}.muted{color:var(--sub)}.subtle{font-size:.78rem;color:var(--sub);line-height:1.5}.btn{border:1px solid var(--edge);border-radius:12px;background:var(--s2);color:var(--paper);min-height:43px;padding:11px 15px;font-weight:600}.btn.primary{border-color:#f5daaa;background:linear-gradient(135deg,#f7d89f,#ddb87a);color:#172031;box-shadow:0 5px 28px #e9be7730}.btn.ghost{background:transparent}.btn.text{border:0;background:transparent;color:var(--gold)}.btn.tiny{font-size:.74rem;padding:6px 10px;min-height:32px}.btn.block{width:100%}.btn:hover:not(:disabled){border-color:var(--goldD)}
/* Creation */
.setup{max-width:1140px;margin:auto;min-height:100dvh;display:grid;grid-template-columns:1fr 1.04fr}.setup-art{position:relative;min-height:550px;padding:clamp(28px,5vw,75px);overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 65% 31%,#30455488 0,#101d2d 50%,#090f1a 100%)}.setup-art::before{content:"";position:absolute;inset:13%;border:1px solid #bba1733a;border-radius:49% 49% 5% 5%;box-shadow:inset 0 0 0 19px #0d182466,inset 0 0 0 21px #bba17322;pointer-events:none}.setup-art::after{content:"✧";position:absolute;top:31%;left:50%;transform:translateX(-50%);font:clamp(100px,14vw,220px)/1 'Cormorant Garamond';color:#e6c38c77;text-shadow:0 0 110px #e0c68899;pointer-events:none}.setup-art>*{position:relative;z-index:1}.brand{display:flex;align-items:center;gap:10px;font-size:.77rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.brandmark{height:30px;width:30px;display:grid;place-items:center;border:1px solid #f2ca8a66;transform:rotate(45deg);color:var(--gold)}.brandmark span{transform:rotate(-45deg);font-family:Georgia;font-size:21px}.setup-art h1{font-size:clamp(59px,7vw,105px);font-weight:500;line-height:.88;letter-spacing:-.025em;margin:13px 0 18px;max-width:540px}.setup-art p{max-width:430px;color:#dfd5c6;line-height:1.7;font-size:.95rem}.setup-art footer{font-size:.75rem;color:#b3b1ae;line-height:1.5}.setup-main{padding:clamp(24px,5vw,62px);background:linear-gradient(130deg,#121c2b,#0b121e);display:flex;flex-direction:column;justify-content:center;gap:22px}.setup-main h2{font-size:clamp(35px,4vw,50px);line-height:1;margin:0;font-weight:500}.setup-main p{color:var(--sub);line-height:1.5;margin:7px 0 0}.identity-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.identity-card{border:1px solid var(--edge);background:#18253890;border-radius:15px;min-height:88px;display:flex;align-items:center;gap:12px;padding:13px;text-align:left;color:var(--paper);transition:background .2s}.identity-card.selected{border-color:var(--gold);background:#deb67813;box-shadow:inset 0 0 0 1px #e6c88741}.avatar{flex:0 0 auto;width:44px;height:44px;border:1px solid #e7c58b50;border-radius:12px;background:linear-gradient(145deg,#304256,#111b2b);display:grid;place-items:center;font:600 21px 'Cormorant Garamond';color:var(--gold)}.identity-card b{display:block;font-size:.79rem}.identity-card small{display:block;margin-top:5px;font-size:.68rem;color:var(--sub);line-height:1.3}.formfield{display:grid;gap:8px;font-size:.78rem}.formfield input,.formfield select{width:100%;border:1px solid var(--edge);background:#0d1624;color:var(--paper);border-radius:11px;min-height:48px;padding:12px}.setup-error{color:var(--pink);font-size:.8rem}
/* gameplay shell */
.game{height:100dvh;display:grid;grid-template-columns:minmax(0,1fr) 306px;grid-template-rows:auto minmax(0,1fr);max-width:1600px;margin:auto;border-left:1px solid #33425633;border-right:1px solid #33425633}.header{grid-column:1/-1;display:flex;align-items:center;gap:18px;min-height:76px;padding:13px 26px;border-bottom:1px solid var(--edge);background:#0d1522}.head-title{flex:1;min-width:0}.head-title strong{display:block;font:600 27px/1 'Cormorant Garamond';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.head-title span{font-size:.66rem;color:var(--sub);letter-spacing:.12em}.top-stats{display:flex;align-items:center;gap:8px}.stat-pill{border:1px solid #49576b;background:#1b2635a3;min-height:35px;border-radius:999px;padding:6px 11px;display:flex;align-items:center;gap:7px;color:#e7ded0;white-space:nowrap;font-size:.75rem}.stat-pill strong{color:var(--gold)}.iconbtn{width:36px;height:36px;border:1px solid var(--edge);border-radius:11px;background:#1a2433;color:var(--paper);font-size:1.15rem}.story-area{min-height:0;display:flex;flex-direction:column;background:radial-gradient(ellipse at top,#24324961,transparent 65%),#0b121e}.story-top{max-width:760px;width:100%;margin:0 auto;padding:19px 24px 15px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #35445b77;gap:10px}.chapter-heading{font:500 29px/1 'Cormorant Garamond'}.chapter-heading span{display:block;font:700 9px/1.5 'DM Sans';letter-spacing:.2em;color:var(--gold);text-transform:uppercase}.location-badge{font-size:.72rem;color:var(--sub);display:flex;align-items:center;gap:6px}.transcript{max-width:760px;width:100%;margin:0 auto;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 24px 28px;scrollbar-width:thin;scrollbar-color:#50607844 transparent}.transcript>*{max-width:660px}.passage{position:relative;margin:0 0 25px;padding:0 5px;animation:rise .25s ease both}.passage .speaker{font-size:.64rem;color:var(--gold);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:9px}.passage p{font:500 clamp(19px,2.1vw,23px)/1.48 'Cormorant Garamond',Georgia,serif;color:#f1e8d9;letter-spacing:.007em;margin:0;white-space:pre-wrap}.passage.character p{border-left:2px solid #cbb08299;padding-left:18px;color:#e8ded0;font-size:21px}.passage.player{margin-left:auto;max-width:86%;background:#1d2c3c;border:1px solid #3a4b5d;border-radius:15px 15px 4px 15px;padding:12px 17px}.passage.player .speaker{color:#a7d4c8;margin-bottom:6px}.passage.player p{font:400 13px/1.65 'DM Sans';color:#e0e8ed}.passage.event{border-left:2px solid var(--green);padding:7px 12px 7px 14px;background:#7dc3b710;border-radius:0 10px 10px 0;margin-bottom:22px}.passage.event p{font:500 12px/1.5 'DM Sans';color:#b6dbd2}.passage.notice p{font:400 12px/1.6 'DM Sans';color:#b5c0cc}.passage.notice{border:1px solid var(--edge);padding:13px;border-radius:10px}.pending-dots{font-family:Georgia;font-size:25px;color:var(--gold);letter-spacing:.3em;animation:blink 1s linear infinite}.end-panel{border:1px solid #bda27670;background:#bda2760c;border-radius:12px;padding:18px;margin-bottom:24px}.end-panel h3{font:500 28px 'Cormorant Garamond';margin:0 0 8px}.end-panel p{color:var(--sub);font-size:.8rem;line-height:1.6}
.composer-box{border-top:1px solid #2c3d55;background:linear-gradient(180deg,#101826f0,#101722);padding:12px max(19px,calc((100% - 720px)/2)) max(12px,env(safe-area-inset-bottom))}.prompt-hints{display:flex;gap:7px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}.prompt-hints::-webkit-scrollbar{display:none}.hint-chip{flex:0 0 auto;border:1px solid #34475c;background:#1a2839;border-radius:999px;padding:8px 12px;color:#c5d2da;font-size:.72rem;max-width:270px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hint-chip:hover{border-color:var(--goldD)}.composer{border:1px solid #5a6c7d;min-height:69px;border-radius:13px;background:#1b2839;display:flex;align-items:end;gap:8px;padding:10px 9px 10px 14px;box-shadow:0 2px 20px #050a1169}.composer textarea{flex:1;resize:none;border:0;outline:0;min-width:0;min-height:41px;max-height:130px;background:transparent;color:var(--paper);font-size:.89rem;line-height:1.4;padding:8px 0;overflow-y:auto}.composer textarea::placeholder{color:#a3b2c0}.sendbtn{flex:0 0 auto;border:0;border-radius:9px;background:var(--gold);color:#172030;width:43px;height:43px;font-size:1.16rem;font-weight:700}.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:8px;font-size:.67rem;color:var(--sub)}.composer-foot b{font-weight:500;color:var(--green)}
/* sidebar */
.side{min-width:0;border-left:1px solid var(--edge);background:#101824;overflow-y:auto;padding:19px 18px 28px;scrollbar-width:thin}.side-section{border:1px solid #344458;border-radius:14px;background:#151f2c;margin-bottom:12px;padding:17px}.side-head{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-bottom:13px}.side-head strong{font:600 23px/1 'Cormorant Garamond'}.side-head button{background:transparent;border:0;color:var(--gold);font-size:.7rem}.rows{display:grid;gap:8px}.info-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.76rem}.info-row span{color:var(--sub)}.info-row b{font-size:.75rem}.progress{height:5px;border-radius:20px;background:#364356;overflow:hidden;margin:8px 0 4px}.progress span{display:block;height:100%;background:linear-gradient(90deg,#a38d68,#dfc28a)}.coin{display:flex;justify-content:space-between;align-items:center;gap:7px;border-bottom:1px solid #ffffff10;padding:8px 0;font-size:.75rem}.coin:last-child{border:0}.coin b{font-size:.9rem}.copper{color:#c78865}.silver{color:#bdc6d1}.gold{color:var(--gold)}.item-tag{display:inline-flex;gap:5px;align-items:center;border:1px solid #35465a;border-radius:8px;background:#202d3e;padding:7px 9px;color:#d5dfeb;font-size:.7rem;margin:0 5px 6px 0}.quest-line{font-size:.78rem;color:#dcd8ce;line-height:1.6}.mini-map{border:1px solid #4a5461;border-radius:11px;overflow:hidden;margin:9px 0;background:#18222f}.mini-map img{width:100%;height:125px;object-fit:cover;object-position:center 40%;filter:saturate(.6) sepia(.09)}.mini-map button{width:100%;text-align:left;background:#1a2837;color:var(--gold);border:0;padding:10px 12px;font-size:.74rem}.nearby{display:grid;gap:6px}.nearby button{border:1px solid #3a485b;border-radius:9px;background:#1c2a3a;color:var(--paper);text-align:left;font-size:.73rem;padding:9px}.nearby small{display:block;color:var(--sub);margin-top:4px}.side-buttons{display:flex;gap:8px;margin-bottom:14px}.side-buttons button{flex:1;font-size:.73rem}.bottom-nav{display:none}
/* mobile overlays */
.scrim{position:fixed;inset:0;background:#050810c9;z-index:30;display:flex;align-items:center;justify-content:center;padding:16px}.drawer{max-height:min(760px,90dvh);height:auto;overflow:auto;width:min(600px,100%);border:1px solid #657184;border-radius:20px;background:linear-gradient(#1c2a3a,#111a28);box-shadow:0 22px 90px #000b;position:relative;padding:22px;overscroll-behavior:contain}.drawer .drawer-top{display:flex;align-items:start;justify-content:space-between;gap:12px;margin-bottom:18px}.drawer .drawer-top h2{margin:5px 0 0;font:600 36px/1 'Cormorant Garamond'}.drawer .drawer-top .iconbtn{flex:0 0 auto}.drawer h3{font:600 25px 'Cormorant Garamond';margin:21px 0 10px}.card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-button{background:#162434;border:1px solid #46566a;color:var(--paper);text-align:left;border-radius:12px;padding:12px;min-height:80px}.card-button b{font-size:.82rem;display:block}.card-button small{font-size:.67rem;color:var(--sub);display:block;margin-top:6px;line-height:1.5}.card-button.selected{border-color:var(--gold);background:#e8c78b11}.map-viewport{position:relative;height:330px;overflow:auto;border-radius:12px;border:1px solid #665d51;background:#7c6e5a}.map-viewport img{width:100%;min-width:340px;max-width:none;display:block;pointer-events:none}.map-controls{display:flex;gap:8px;margin-top:12px}.map-controls button{flex:1}.nearby-list{display:flex;gap:6px;overflow:auto;margin-top:12px;padding-bottom:7px}.nearby-list button{flex:0 0 auto}.drawer-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid #ffffff16}.drawer-item strong{display:block;font-size:.8rem}.drawer-item small{display:block;color:var(--sub);font-size:.68rem;margin-top:5px}.drawer-item .btn{min-width:87px}.settings-row{display:flex;justify-content:space-between;gap:10px;margin:10px 0}
#toast{position:fixed;bottom:calc(env(safe-area-inset-bottom) + 26px);left:50%;transform:translateX(-50%);background:#223449;border:1px solid #52677c;box-shadow:0 12px 35px #0009;border-radius:12px;padding:12px 18px;max-width:min(92vw,500px);font-size:.78rem;z-index:100;display:none}#toast.active{display:block}
@keyframes rise{from{opacity:.15;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{50%{opacity:.25}}
@media(max-width:900px){.game{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr) auto}.side{display:none}.header{grid-column:1;padding:12px 17px;min-height:70px}.header .brand{font-size:.58rem}.top-stats .stat-pill:nth-child(3){display:none}.story-top{padding:14px 17px}.transcript{padding:22px 17px}.composer-box{padding:10px 13px 12px}.bottom-nav{display:flex;justify-content:space-around;gap:8px;background:#0d1522;border-top:1px solid var(--edge);padding:8px 8px max(8px,env(safe-area-inset-bottom));grid-column:1}.bottom-nav button{background:transparent;border:0;flex:1;color:#adbbc8;display:grid;justify-items:center;gap:4px;min-height:45px;font-size:.66rem}.bottom-nav button b{font-size:1.1rem;font-weight:400}.bottom-nav button.active{color:var(--gold)}.composer-foot{display:none}.setup{grid-template-columns:1fr;display:block}.setup-art{min-height:280px;padding:28px 26px}.setup-art::before{inset:14% 8%}.setup-art::after{top:28%;left:75%;font-size:130px}.setup-art h1{max-width:320px;font-size:56px}.setup-art p{font-size:.78rem;max-width:300px}.setup-art footer{display:none}.setup-main{padding:27px 23px 50px}.setup-main h2{font-size:36px}}
@media(max-width:420px){.header{gap:8px;padding:10px 13px}.head-title strong{font-size:22px}.head-title span{font-size:.56rem}.stat-pill{font-size:.65rem;padding:6px 8px}.top-stats{gap:5px}.top-stats .stat-pill:nth-child(2){display:none}.identity-card{padding:9px;gap:8px;min-height:75px}.avatar{width:36px;height:36px}.identity-card b{font-size:.72rem}.identity-card small{font-size:.62rem}.chapter-heading{font-size:25px}.location-badge{font-size:.66rem}.passage p{font-size:21px}.passage.character p{font-size:20px}.transcript{padding:18px 15px}.composer{min-height:60px}.composer-box{padding:8px 10px}.drawer{padding:17px}.card-grid{gap:6px}.card-button{padding:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}
/* Keep the transcript and horizontal suggestion chips from widening narrow phones. */
.game,.story-area,.header,.story-top,.transcript,.composer-box,.bottom-nav{min-width:0;max-width:100%}
.prompt-hints{min-width:0;width:100%;max-width:100%}
@media(max-width:900px){.game{grid-template-columns:minmax(0,1fr)}}
/* Readability wins over entry animation on small devices. */
.passage{animation:none}
.passage p{color:#f8f2e8}
.passage.character p{color:#fff2dd}

/* V0.7 · persistent player HUD and atlas refinements */
.field-status{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.26fr);gap:8px;margin-bottom:10px;min-width:0}
.field-status button{color:var(--paper);border:1px solid #48576b;border-radius:12px;min-width:0;background:linear-gradient(120deg,#213145,#152233);text-align:left}
.field-status button:focus-visible{outline:2px solid var(--gold)}
.field-location{display:flex;align-items:center;gap:10px;padding:7px 8px;min-height:64px}
.field-map{flex:0 0 48px;height:48px;background-image:url('/assets/erilea_atlas_v07.webp');background-size:340% auto;background-position:74% 56%;border:1px solid #c4a87566;border-radius:8px;box-shadow:inset 0 0 12px #0004}
.field-loc-copy{display:grid;gap:1px;min-width:0}.field-loc-copy small,.field-kit small{font-size:.6rem;font-weight:700;letter-spacing:.11em;color:#afbed0;white-space:nowrap}.field-loc-copy strong{font-size:.79rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.field-loc-copy em{font-style:normal;color:#d5d3c5;font-size:.65rem}.field-chevron{margin-left:auto;color:var(--gold);align-self:flex-start}
.field-kit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px}
.field-kit button{padding:9px 11px;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:5px}
.field-wealth span{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}.field-wealth b{font-size:1.02rem;white-space:nowrap}.field-wealth i{font-style:normal;font-size:.52rem;font-weight:700}.field-equipped span{display:flex;align-items:flex-start;flex-direction:column;gap:3px;overflow:hidden}.field-equipped b{font-size:.69rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}.field-separator{color:var(--gold)}
.side-gear{padding:10px 0 15px;display:grid;gap:9px}
.inventory-money{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.money-unit{padding:12px 10px;border:1px solid #475466;background:#1a2a3b;border-radius:12px;display:grid;gap:7px}.money-unit span,.gear-slots small{font-size:.58rem;letter-spacing:.13em;color:#adc0d0}.money-unit strong{font-size:1.5rem}.gear-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:15px 0}.gear-slots>div{display:grid;gap:7px;border:1px solid #5b6070;border-radius:12px;padding:13px;background:#1f2c3a;min-height:72px}.gear-slots strong{font-size:.85rem}.item-count{font-size:.7rem;font-family:'DM Sans';font-weight:400;color:var(--sub)}.gear-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.map-viewport{overflow:auto;overscroll-behavior:contain;touch-action:pan-x pan-y;max-height:52dvh;height:350px;background:#132b3e}.atlas-canvas{position:relative;width:100%;min-width:100%;height:auto;line-height:0}.atlas-canvas img{display:block;width:100%;min-width:0;height:auto;max-width:none;pointer-events:none}
.atlas-pin{position:absolute;transform:translate(-12%,-35%);display:flex;align-items:center;gap:3px;background:transparent;border:0;color:#fff;font-size:.65rem;line-height:1.2;z-index:2;filter:drop-shadow(0 2px 2px #061520)}.pin-dot{width:12px;height:12px;background:var(--gold);border-radius:50%;border:3px solid #163346;outline:2px solid #f9e5ae;box-shadow:0 0 0 7px #ffd99670}.pin-label{display:block;padding:5px 7px;margin-left:4px;border-radius:5px;background:#14283df2;border:1px solid #f2d19a;white-space:nowrap;color:#fff;font-weight:700}.atlas-current{display:grid;gap:4px;background:#213145;border:1px solid #52617a;padding:12px 14px;border-radius:12px}.atlas-current strong{font-size:.86rem}.atlas-current small{color:var(--sub);font-size:.72rem}.map-controls{gap:6px}.map-controls button{padding:8px}
@media(max-width:900px){.field-status{grid-template-columns:1fr;gap:6px}.field-location{min-height:45px;padding:5px 8px;gap:8px}.field-map{height:36px;width:36px;flex-basis:36px}.field-loc-copy{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px}.field-loc-copy small{grid-column:1/-1;font-size:.52rem}.field-loc-copy strong{font-size:.72rem}.field-loc-copy em{font-size:.62rem}.field-chevron{display:none}.field-kit{grid-template-columns:1fr 1.1fr;gap:6px}.field-kit button{min-height:52px;padding:7px 9px}.field-kit small{font-size:.5rem}.field-wealth b{font-size:.94rem}.field-equipped b{font-size:.63rem}.field-wealth span{gap:9px}.composer-box{padding-top:7px}.prompt-hints{padding-bottom:8px}.drawer{max-height:94dvh}.map-viewport{height:310px}.field-status{max-height:none}}
@media(max-width:375px){.field-map{display:none}.field-loc-copy{width:100%}.field-wealth span{gap:6px}.field-wealth b{font-size:.85rem}.field-equipped b{font-size:.61rem}.field-kit button{padding:6px 7px}.field-status{margin-bottom:7px}.prompt-hints{padding-bottom:6px}}
@media(max-height:640px) and (max-width:900px){.field-location{min-height:34px}.field-kit button{min-height:40px}.hint-chip{padding:6px 9px}.composer{min-height:51px}}

@media(max-width:600px){.head-title strong>span{display:none}.head-title strong{font-size:25px}.field-equipped small{color:#dbc89d}.composer-foot{display:flex;padding-top:1px;margin-top:4px;font-size:.62rem}.composer-foot>span:first-child{display:none}.field-kit button{gap:4px}}
@media(max-width:360px){.head-title strong{font-size:22px}}
/* V0.8 · Focused story interface, compact HUD and two-layer atlas */
:root{--app-height:100dvh}
.game{height:var(--app-height,100dvh)}
.header{min-height:63px;padding:9px 21px}
.story-top{padding-top:12px;padding-bottom:11px}
.transcript{scroll-padding-bottom:20px}
.composer-box{position:relative;z-index:2;padding-top:9px;padding-bottom:max(10px,env(safe-area-inset-bottom))}
.field-status{grid-template-columns:minmax(155px,.95fr) minmax(0,1.6fr);gap:8px;margin-bottom:9px}
.field-location{min-height:52px;padding:6px 9px}
.field-map{width:39px;height:39px;flex-basis:39px}
.field-loc-copy small,.field-kit small{font-size:.59rem;letter-spacing:.08em}
.field-loc-copy strong{font-size:.79rem}
.field-loc-copy em{font-size:.62rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-kit{min-width:0;grid-template-columns:minmax(0,1fr) minmax(0,1.13fr);gap:7px}
.field-kit button{padding:7px 9px;min-height:52px;gap:2px;overflow:hidden}
.field-wealth span{gap:8px;flex-wrap:nowrap;white-space:nowrap}
.field-wealth b{font-size:.95rem}
.field-wealth i{font-size:.56rem}
.field-equipped span{width:100%}
.field-equipped b{font-size:.67rem}
.prompt-hints{padding-bottom:7px}
.hint-chip{padding:6px 11px}
.composer{min-height:58px;padding:6px 8px 6px 13px}
.composer textarea{min-height:35px;max-height:90px;font-size:16px;line-height:1.45;padding:6px 0}
.sendbtn{width:43px;height:43px}
/* map as usable navigation, not a big scrolling book page */
.scrim{padding:13px;align-items:center}
.drawer{width:min(980px,100%);max-height:min(900px,96dvh);padding:22px 25px 27px;background:linear-gradient(#172334,#0d1623)}
.drawer .drawer-top{position:sticky;top:-23px;z-index:12;background:linear-gradient(#172334 80%,#172334e8);padding:7px 0 10px;margin-bottom:9px}
.drawer .drawer-top h2{font-size:35px}
.map-status{display:flex;align-items:center;gap:11px;border:1px solid #51647a;background:#202e42;padding:11px 13px;border-radius:13px;min-width:0}
.map-pulse{display:grid;place-items:center;width:35px;height:35px;flex:0 0 35px;background:#c89f6633;color:#f7d494;border-radius:11px;font-size:23px}
.map-status>span:nth-child(2){display:grid;gap:3px;flex:1;min-width:0}
.map-status small{font-size:.58rem;letter-spacing:.1em;color:#b5c0c8}
.map-status strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-weather{font-size:.68rem;color:#dae2de;white-space:nowrap}
.map-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;border:1px solid #3c5168;border-radius:13px;background:#0d1828;margin:13px 0}
.map-tabs button{min-height:42px;color:#aebed0;border:0;background:transparent;border-radius:9px;font-weight:650;font-size:.78rem}
.map-tabs button.chosen{background:#344357;color:#ffe0a2;box-shadow:0 1px 6px #0004}
.district-map{position:relative;height:365px;overflow:hidden;border:1px solid #66745f;border-radius:16px;background:radial-gradient(ellipse at 42% 21%,#2d423e80,transparent 70%),linear-gradient(142deg,#20303c,#111e2c 52%,#20354a);box-shadow:inset 0 0 65px #0c172a;isolation:isolate}
.district-map:after{position:absolute;inset:0;content:'';pointer-events:none;opacity:.25;background-image:radial-gradient(#ced0af 0.6px,transparent 0.6px);background-size:13px 13px;z-index:-1}
.district-topline{position:absolute;top:12px;left:13px;right:13px;display:flex;justify-content:space-between;gap:5px;font-size:.57rem;color:#b3c4c6;letter-spacing:.08em;z-index:2}
.district-roads{position:absolute;width:100%;height:100%;inset:0;z-index:0;pointer-events:none}
.district-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);min-width:81px;max-width:100px;background:#17283aeb;color:#edebe0;border:1px solid #617789;border-radius:10px;padding:6px 5px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.66rem;line-height:1.15;box-shadow:0 8px 20px #0006;touch-action:manipulation}
.district-pin.here{border-color:#f2ce86;background:#3b3640;box-shadow:0 0 0 3px #eac37b22,0 8px 20px #0008}
.district-pin .district-symbol{font-size:1.17rem;line-height:1.2;color:#f3d18b}
.district-pin em{position:absolute;top:-10px;right:-12px;border:1px solid #ffe7ac;background:#e1b974;color:#162333;padding:3px 5px;border-radius:99px;font-size:.47rem;font-style:normal;font-weight:900}
.map-guidance{display:grid;gap:5px;background:#1b2b3a;border:1px solid #425569;border-radius:11px;padding:11px 13px;margin-top:10px;font-size:.74rem;line-height:1.45}
.map-guidance b{color:#e9c58b}
.map-guidance span{color:#b5c5d2}
.district-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px}
.district-place{min-width:0;display:flex;gap:10px;align-items:center;text-align:left;background:#1b2938;border:1px solid #405166;color:#eceae3;border-radius:12px;padding:12px;min-height:65px}
.district-place.here{background:#e8c78313;border-color:#cba86d}
.district-place>span:nth-child(2){min-width:0;flex:1}
.district-place b{font-size:.75rem;display:block}
.district-place small{color:#adb9c4;font-size:.62rem;line-height:1.3;display:block;margin-top:5px}
.place-indicator{color:var(--gold);font-size:1rem}
.place-arrow{color:var(--gold);font-size:.64rem}
.map-world-wrap{overflow:hidden;background:#152636;border-radius:14px;border:1px solid #6a6c69}
.map-viewport{height:clamp(260px,52dvh,555px);max-height:none;border:0;border-radius:0;background:#204355;overflow:auto;touch-action:pan-x pan-y;overscroll-behavior:contain;scrollbar-color:#c9a36d #102332}
.atlas-canvas{min-width:100%;position:relative}
.atlas-canvas img{width:100%;display:block;user-select:none;pointer-events:none}
.atlas-pin{min-height:36px;transform:translate(-30%,-50%);padding:4px;z-index:4}
.pin-label{padding:6px 9px;box-shadow:0 6px 17px #0007}
.map-controls{display:flex;align-items:center;gap:7px;padding:8px;background:#142436;margin:0}
.map-controls button{min-height:41px;flex:1;border-radius:9px;font-weight:700}
.map-zoom-level{font-size:.7rem;min-width:35px;color:#d2d2ca;text-align:center}
/* keyboard-first mobile state: keep transcript and input visible */
@media(max-width:900px){
 .game{grid-template-rows:auto minmax(0,1fr) auto}
 .header{min-height:55px;padding:7px 14px}
 .story-top{padding:10px 13px}
 .chapter-heading{font-size:24px}
 .location-badge{display:none}
 .composer-box{padding:7px 10px max(8px,env(safe-area-inset-bottom));}
 .field-status{grid-template-columns:1fr;gap:5px;margin-bottom:6px}
 .field-location{min-height:36px;padding:4px 8px;gap:8px}
 .field-map{height:30px;width:30px;flex-basis:30px}
 .field-loc-copy{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 7px}
 .field-loc-copy small{display:none}
 .field-loc-copy strong{font-size:.71rem}
 .field-loc-copy em{font-size:.61rem}
 .field-kit{grid-template-columns:1.1fr .9fr;gap:5px}
 .field-kit button{padding:6px 9px;min-height:41px;gap:1px}
 .field-kit small{font-size:.50rem}
 .field-wealth b{font-size:.88rem}
 .field-wealth i{font-size:.53rem}
 .field-wealth span{gap:8px}
 .field-equipped b{font-size:.63rem}
 .field-equipped span{flex-direction:row;gap:7px}
 .field-equipped span b{max-width:50%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .composer-foot{display:none}
 .prompt-hints{padding-bottom:6px}
 .hint-chip{padding:6px 9px;font-size:.67rem}
 .composer{min-height:51px;padding:5px 6px 5px 10px}
 .composer textarea{min-height:33px;max-height:100px;font-size:16px}
 .bottom-nav{min-height:52px;padding-top:6px;padding-bottom:max(6px,env(safe-area-inset-bottom))}
 .bottom-nav button{min-height:37px}
 .scrim{padding:0;align-items:stretch}
 .drawer{width:100%;height:100dvh;max-height:100dvh;border-radius:0;border:0;padding:13px 13px max(28px,env(safe-area-inset-bottom));overscroll-behavior:contain}
 .drawer .drawer-top{top:-14px;padding-top:8px;margin-bottom:7px}
 .drawer .drawer-top h2{font-size:31px}
 .map-viewport{height:min(45dvh,480px)}
 .district-map{height:335px}
 .district-places{grid-template-columns:1fr 1fr;gap:6px}
 .district-place{padding:9px;min-height:60px}
 .district-place small{font-size:.6rem}
 .map-weather{font-size:.63rem}
 html.typing .header,html.typing .story-top,html.typing .bottom-nav,html.typing .prompt-hints,html.typing .composer-foot{display:none!important}
 html.typing .game{grid-template-rows:minmax(0,1fr);height:var(--app-height,100dvh)}
 html.typing .story-area{height:100%;min-height:0}
 html.typing .transcript{padding:12px 13px 15px;flex:1;min-height:0}
 html.typing .composer-box{flex:0 0 auto;padding:5px 8px max(6px,env(safe-area-inset-bottom));}
 html.typing .field-status{margin:0 0 5px;gap:3px}
 html.typing .field-location{min-height:26px;padding:3px 8px}
 html.typing .field-map{display:none}
 html.typing .field-loc-copy{grid-template-columns:minmax(0,1fr) auto}
 html.typing .field-loc-copy strong{font-size:.65rem}
 html.typing .field-loc-copy em{font-size:.59rem}
 html.typing .field-kit button{min-height:32px;padding:3px 8px}
 html.typing .field-kit small{display:none}
 html.typing .field-wealth b{font-size:.8rem}
 html.typing .field-equipped b{font-size:.62rem}
 html.typing .composer{min-height:49px;border-color:#bda77d}
 html.typing .composer textarea{max-height:75px;font-size:16px}
}
@media(max-width:380px){
 .field-wealth span{gap:5px}.field-wealth b{font-size:.77rem}
 .field-equipped b{font-size:.6rem}
 .district-pin{min-width:69px;max-width:78px;font-size:.57rem;padding:5px 3px}
 .district-pin .district-symbol{font-size:1.1rem}
 .district-map{height:320px}
 .map-status{gap:8px;padding:8px}
 .map-status strong{font-size:.75rem}
 .map-weather{font-size:.6rem}
 .map-tabs button{font-size:.72rem}
 .drawer{padding-left:10px;padding-right:10px}
}

/* V0.9: quiet unobtrusive status toasts, not transcript noise */
#toast{bottom:calc(env(safe-area-inset-bottom) + 98px);background:#203729;border:1px solid #75966a;color:#f7f8ed;font-weight:650;font-size:.8rem;max-width:calc(100vw - 28px);text-align:center;padding:10px 15px;pointer-events:none;z-index:110}
@media(max-width:900px){#toast{bottom:calc(env(safe-area-inset-bottom) + 112px)}}
@media(max-width:420px){.passage p{font-size:19px;line-height:1.62}.transcript{padding:16px 16px}.passage{margin-bottom:19px}}