@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--bg:#050907;--panel:#141c19;--panel2:#1a241e;--stroke:#64735b55;--gold:#d2b780;--gold2:#f2daa4;--mint:#95a888;--text:#d7ddd0;--muted:#869084;--red:#d77f76;--cinzel:'Cinzel',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--sans)}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.38;cursor:not-allowed}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:3px}#app{width:100%;height:100%;position:relative;isolation:isolate;overflow:hidden}.hidden{display:none!important}.world{position:absolute;inset:0;z-index:-2}.world canvas{display:block;width:100%;height:100%;touch-action:none}.world-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 32%,#070b0988 73%,#070a08 100%)}.grains{position:absolute;inset:0;pointer-events:none;opacity:.10;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.topbar{position:absolute;z-index:30;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:15px;padding:19px 31px;background:linear-gradient(#050807ec,#05080780 72%,transparent);border-bottom:1px solid #90a07c15}.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-family:var(--cinzel);border:1px solid #aaaf885b;width:46px;height:46px;display:grid;place-items:center;color:var(--gold);font-size:28px;box-shadow:0 0 22px #92995c20 inset}.brand-title{font:700 25px/1.1 var(--cinzel);letter-spacing:.19em;color:#efe4c4;text-shadow:0 1px 8px #000}.brand-sub{font-size:9px;letter-spacing:.28em;margin-top:5px;color:var(--mint)}.dotsep{margin:0 10px;font-size:6px}.top-meta{display:flex;align-items:center;gap:22px;font-size:10px;letter-spacing:.18em;color:#bac4af}.connection-indicator{font-size:9px;color:var(--mint)}.connection-indicator.offline{color:var(--red)}.icon-button{border:1px solid var(--stroke);background:#131913b0;color:var(--gold);font-size:18px;width:34px;height:34px}.surface{background:linear-gradient(145deg,#19221eee,#101613f4);border:1px solid #88947643;box-shadow:inset 0 0 0 1px #050804,inset 0 0 35px #111a16,0 24px 90px #0009;backdrop-filter:blur(16px)}.eyebrow{color:var(--gold);font:500 10px var(--cinzel);letter-spacing:.22em}.landing{position:absolute;z-index:6;top:50%;left:50%;transform:translate(-50%,-50%);padding:45px 58px 33px;width:min(610px,90vw);text-align:center}.landing:before,.modal:before,.lobby-main:before,.encounter-panel:before{content:'';position:absolute;inset:8px;border:1px solid #a4aa7c14;pointer-events:none}.hero-divider{display:flex;align-items:center;justify-content:center;gap:12px;color:var(--gold);margin:16px auto}.hero-divider:before,.hero-divider:after{content:'';width:75px;height:1px;background:linear-gradient(90deg,transparent,#9c9870)}.hero-divider:after{transform:rotate(180deg)}h1,h2,h3,p{margin-top:0}.landing h1{font:600 clamp(40px,5vw,67px)/1.16 var(--cinzel);letter-spacing:.08em;margin:0 0 18px;color:#e6dbc0;text-shadow:1px 3px 15px #000}.landing h1 em{font-weight:400;color:var(--gold);font-style:normal}.hero-desc{max-width:430px;font:15px/1.8 Georgia,serif;color:#b6bbae;margin:0 auto 27px}.hero-actions{display:flex;gap:12px;justify-content:center}.btn{padding:13px 18px;border:1px solid #716746;font-size:10px;letter-spacing:.13em;font-family:var(--cinzel);font-weight:700;min-height:44px;transition:filter .2s,transform .2s;position:relative}.btn:hover:not(:disabled){filter:brightness(1.2);transform:translateY(-1px)}.btn-gold{color:#11140e;background:linear-gradient(120deg,#9f8b5d,#efddaf 55%,#a39469);box-shadow:0 3px 19px #c7ad7340}.btn-stone{color:var(--gold2);background:linear-gradient(#2a332b,#151d19);border-color:#a5a88351}.full{width:100%}.hero-features{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:#a0a992;font-size:9px;letter-spacing:.1em;margin-top:35px}.modal-cover,.lobby-cover{position:absolute;z-index:45;inset:0;display:grid;place-items:center;background:#050907bd;backdrop-filter:blur(7px);padding:20px;overflow:auto}.modal{width:min(600px,100%);padding:30px;position:relative;max-height:94vh;overflow:auto}.modal h2,.lobby-main h2{font:600 27px var(--cinzel);color:#efe0bb;letter-spacing:.045em;margin:12px 0 25px}.modal .close{position:absolute;top:14px;right:19px;color:var(--gold);border:0;background:transparent;font-size:28px}.field{margin:15px 0}.field label{display:block;margin-bottom:8px;font-size:11px;letter-spacing:.14em;color:var(--mint)}input,select,textarea{width:100%;background:#070d0abf;border:1px solid #7c88704b;color:#ede5ce;border-radius:0;padding:12px 14px;outline:none}.field input:focus,textarea:focus{border-color:var(--gold)}.field input::placeholder,textarea::placeholder{color:#737c72}.class-label{margin:19px 0 12px}.class-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:20px}.class-tile{border:1px solid #65735e55;background:#080c09;padding:0;color:#e4ddc5;position:relative;overflow:hidden}.class-tile img{width:100%;height:95px;object-fit:cover;object-position:top;opacity:.8;display:block}.class-tile .class-title{font:600 11px var(--cinzel);padding:9px 0}.class-tile.selected{border-color:#dfc587;box-shadow:0 0 0 1px #d6c08885}.class-tile.selected:after{content:'✦';position:absolute;top:4px;right:5px;color:var(--gold);text-shadow:0 1px 5px #000}.subdued{color:var(--muted);font-size:11px;margin-top:13px;text-align:center}.host-left{position:absolute;z-index:10;left:24px;top:102px;width:228px;display:flex;flex-direction:column;gap:12px;max-height:calc(100% - 190px)}.side-caption{padding:0 8px}.players{display:flex;flex-direction:column;gap:8px}.player-card{background:linear-gradient(105deg,#14211adf,#121712d0);border:1px solid #70816250;display:flex;align-items:center;gap:10px;padding:8px;position:relative;box-shadow:0 5px 15px #0004}.player-card.active{border-color:#e1c48196;background:linear-gradient(90deg,#303222ee,#18211add)}.player-card.active:before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;background:var(--gold)}.player-portrait{width:42px;height:46px;object-fit:cover;object-position:top;border:1px solid #a0a68b37}.player-details{min-width:0;flex:1}.player-name{font:600 12px var(--cinzel);color:#eee0ba;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-class{color:#b7c1a9;font-size:10px;margin:5px 0}.player-health{background:#324036;height:3px}.player-health div{background:linear-gradient(90deg,#638657,#a4bf87);height:100%}.player-stats{color:#a5b09e;font-size:9px;margin-top:6px;display:flex;gap:9px}.mission{padding:17px}.mission h3{font:600 14px var(--cinzel);color:#dfcc9d;margin:10px 0}.mission p{font:12px/1.6 Georgia,serif;color:#a4aea3;margin-bottom:12px}.progress-track{height:6px;background:#354138}.progress-track div{height:100%;width:0%;background:linear-gradient(90deg,#5f8e6d,#c4c786);transition:width .5s}.mini-row{margin-top:9px;display:flex;justify-content:space-between;font-size:9px;color:#bbc1ad}.host-right{position:absolute;right:25px;top:106px;width:min(320px,26vw);max-height:calc(100% - 180px)}.encounter-panel{padding:22px 22px 23px;position:relative;max-height:75vh;overflow-y:auto}.encounter-panel h2{font:500 22px/1.3 var(--cinzel);color:#e7d7b6;margin:12px 0}.encounter-panel p{font:14px/1.75 Georgia,serif;color:#bcc1af}.encounter-rune{text-align:center;font:42px var(--cinzel);color:var(--gold);margin:17px 0 15px;text-shadow:0 0 24px #eac78b65}.portrait-banner{width:100%;height:140px;border:1px solid #76836655;background:radial-gradient(ellipse at 50% 20%,#52604b65,#121611);display:grid;place-items:center;font:70px var(--cinzel);color:var(--gold);margin:14px 0;overflow:hidden}.portrait-banner.spectral{background:radial-gradient(ellipse,#54415e,#11141a)}.portrait-banner svg{width:88px;height:88px}.quoted{border-left:2px solid var(--gold);padding-left:13px!important;color:#e5d6bc!important;font-style:italic}.encounter-rule{height:1px;background:linear-gradient(90deg,transparent,#84907d80,transparent);margin:17px 0}.pill{display:inline-block;border:1px solid #9eaa8855;padding:7px 11px;font:10px var(--cinzel);letter-spacing:.1em;color:#cad1b3}.host-bottom{position:absolute;z-index:9;bottom:41px;left:24px;right:25px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}.log-box{width:330px;padding:13px 16px;pointer-events:auto;max-height:130px;overflow:hidden}.log-live{float:right;color:#9bba7d}.log-entry{font:11px/1.7 var(--sans);color:#a7b1a2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.log-entry:first-child{color:#e4d6ad}.camera-hint{color:#98a18d;font-size:10px;letter-spacing:.15em;text-shadow:0 1px 6px #000}.lobby-cover{z-index:25;background:#050a08bd}.lobby-main{width:min(620px,94vw);padding:26px 32px;max-height:calc(100vh - 100px);overflow-y:auto;position:relative}.lobby-main h2{margin-bottom:8px}.lobby-sub{font:13px/1.7 Georgia,serif;color:#bdc5b5}.code-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-block:1px solid #72816d50}.room-code{font:600 31px var(--cinzel);letter-spacing:.22em;color:#e8daaf}.lobby-players{margin:15px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.lobby-slot{min-height:64px;padding:8px;border:1px solid #74866e50;text-align:center;font-size:10px;color:var(--muted);display:flex;flex-direction:column;justify-content:center;gap:5px}.lobby-slot.filled{color:#dcd5c2;background:#253024aa}.lobby-slot strong{color:var(--gold);font-family:var(--cinzel)}.lobby-footer{border-top:1px solid #7c8b7442;padding-top:17px}.ai-row{display:flex;gap:8px;margin:10px 0}.ai-row select{font-size:10px;flex:1;min-width:0}.ai-row .btn{flex-shrink:0}.ai-status{min-height:27px;color:var(--muted);font-size:11px;line-height:1.6}.ai-status.ready{color:#a9d5a0}.ai-status.bad{color:#e08f82}.ai-test{border:1px solid #70816650;padding:11px;margin:8px 0}.test-row{display:flex;gap:6px;margin-top:8px}.test-row input{min-width:0;flex:1;font-size:12px}.test-row button{flex-shrink:0}.test-output{padding:9px 0;font:italic 12px/1.5 Georgia,serif;color:#dccda6}.lobby-actions{margin-top:14px}.demo-toggle{display:flex;align-items:center;gap:8px;font-size:10px;color:#a5b09d;margin-top:13px;cursor:pointer}.demo-toggle input{width:auto;accent-color:#b6a879}.phone-only{display:none}.phone-content{margin:0 auto;max-width:560px;padding:90px 14px 50px}.phone-hero{margin-bottom:16px}.phone-hero .hero-person{display:flex;align-items:flex-start;gap:14px;margin-bottom:12px}.phone-name{font:500 23px var(--cinzel);color:#ecdbb2}.phone-role{color:var(--mint);font-size:10px;letter-spacing:.18em;margin-top:4px}.resource-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.resource{background:#151c17e6;border:1px solid #536b5461;padding:11px;text-align:center}.resource label{font:9px var(--cinzel);color:#b1bda6;letter-spacing:.07em}.resource strong{display:block;margin-top:5px;font:600 22px var(--cinzel);color:#e6d1a4}.phone-card{padding:23px;margin:14px 0 17px}.phone-card h2{font:600 25px/1.35 var(--cinzel);color:#ead9af;margin:12px 0}.phone-card p{font:15px/1.7 Georgia,serif;color:#c2c8b8}.phone-card .btn{margin-top:8px}.phone-card textarea{min-height:104px;resize:vertical;margin:8px 0}.phone-card .hint{font:12px/1.7 var(--sans);color:#a5b2a1}.phone-card .quote{font:italic 18px/1.7 Georgia,serif;color:#edd8ad;border-left:2px solid var(--gold);padding-left:14px}.phone-card .two{display:flex;gap:8px}.phone-card .two>*{flex:1}.battle-stats{display:flex;justify-content:space-between;gap:12px;margin:14px 0;padding:14px;border:1px solid #87907a48;background:#0b100ceb}.enemy-name{font:600 17px var(--cinzel);color:#d3a49e}.enemy-health{margin-top:10px;height:6px;background:#483129}.enemy-health div{height:100%;background:linear-gradient(90deg,#b0504b,#d29177)}.battle-hint{color:var(--red);font:11px var(--sans)}.notification{padding:15px 20px;font:13px/1.6 var(--sans);color:var(--mint);border-left:2px solid var(--mint);background:#1721199c}.phone-log{margin:20px 0}.score-table{width:100%;border-collapse:collapse;font-size:12px}.score-table td,.score-table th{text-align:left;padding:10px 6px;border-bottom:1px solid #7a8a7155}.score-table th{font-family:var(--cinzel);color:var(--gold)}#toast{position:fixed;z-index:90;bottom:45px;left:50%;transform:translate(-50%,24px);pointer-events:none;padding:12px 18px;background:#26332a;border:1px solid #92a188;color:#fff0cb;font-size:12px;opacity:0;transition:.2s;max-width:90vw;box-shadow:0 8px 34px #000b}#toast.visible{opacity:1;transform:translate(-50%,0)}#bottomInfo{position:absolute;bottom:0;left:0;right:0;text-align:center;color:#b1b59b75;font-size:9px;letter-spacing:.19em;padding:10px;background:linear-gradient(transparent,#030503c7)}
@media(max-width:1000px){.host-left{width:175px;left:12px}.host-right{right:12px;width:245px}.encounter-panel{padding:14px}.encounter-panel h2{font-size:18px}.host-bottom{left:12px;right:12px}.camera-hint{display:none}}
@media(max-width:700px){.topbar{padding:12px 15px}.brand-title{font-size:18px}.brand-sub{font-size:7px}.brand-icon{height:36px;width:36px;font-size:19px}.top-meta{font-size:8px;gap:9px}.top-meta #room-meta{display:none}.landing{padding:27px 23px}.landing h1{font-size:40px}.hero-actions{flex-direction:column}.hero-features{gap:8px}.host-left{top:82px;max-width:140px}.host-right{top:82px;width:190px}.mission{display:none}.player-stats{font-size:8px}.player-portrait{width:27px;height:30px}.player-card{padding:4px}.log-box{width:215px}.lobby-main{padding:22px 18px}.lobby-players{grid-template-columns:repeat(2,1fr)}.room-code{font-size:23px}.code-row .btn{font-size:9px;padding:8px}.test-row{flex-direction:column}.lobby-main h2{font-size:21px}}
body.player-mode{height:auto;overflow:auto;background:radial-gradient(ellipse at 50% 0,#263328 0,#0a110d 56%,#080b09 100%);min-height:100vh}body.player-mode #app{min-height:100vh;height:auto;overflow:visible}body.player-mode .host-only{display:none!important}body.player-mode .topbar{position:relative;top:auto;background:#090e0c;box-shadow:0 2px 25px #0008}body.player-mode .phone-only{display:block}body.player-mode #bottomInfo{position:relative;margin-top:15px}body.player-mode .phone-content{padding-top:19px}body.player-mode #landing{display:none!important}
@media(max-width:380px){.brand-sub{letter-spacing:.1em}.resource strong{font-size:18px}.class-grid{grid-template-columns:repeat(2,1fr)}}

.xp-label{font:9px var(--cinzel);letter-spacing:.1em;color:#b5c4aa;margin:10px 0 7px}

.host-ai-tools{display:grid;gap:9px;margin-top:15px}.host-ai-tools .btn{font-size:10px}

.enemy-silhouette{max-height:134px;max-width:96%;object-fit:contain;filter:drop-shadow(0 0 18px #b2c09a44)}
.phone-art{display:grid;place-items:center;height:118px;background:radial-gradient(ellipse,#64756025,transparent 66%);margin:0 0 13px}
.phone-art img{width:min(90%,310px);max-height:112px;object-fit:contain;filter:drop-shadow(0 0 18px #b2c09a33)}
/* Expedition II: individual-device adventures, public lobbies and TV parties. */
.mode-picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0 20px}
.mode-picks label{border:1px solid #768c704d;background:#101b14b8;padding:12px 10px;display:flex;gap:9px;align-items:start;cursor:pointer;color:#d5d6bb;font-size:12px;letter-spacing:0}
.mode-picks label:has(input:checked){border-color:#d1b37d;background:#2b2e1e}
.mode-picks input{width:15px;flex:none;margin:2px 0 0;accent-color:var(--gold)}
.mode-picks span{display:grid;gap:6px}.mode-picks strong{font:600 11px var(--cinzel);letter-spacing:.05em}.mode-picks small{font:11px/1.5 var(--sans);color:#acb6a6}
.public-rooms{max-height:44vh;min-height:130px;overflow-y:auto;padding:7px 0;display:grid;align-content:start;gap:7px}
.server-row{border:1px solid #7b8b6c68;background:#111d18;color:#eadbbb;text-align:left;padding:15px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.server-row:hover{background:#283526}.server-row strong{font:600 13px var(--cinzel)}.server-row span{font-size:10px;color:#a7b6a4;white-space:nowrap}
.landing .hero-actions{flex-wrap:wrap}.landing .hero-actions .btn{flex:1 1 155px}
.room-code{overflow-wrap:anywhere;letter-spacing:.08em}
body.standard-mode{overflow:hidden}
body.standard-mode #app{overflow:hidden}
body.standard-mode>.world,body.standard-mode .world{display:none}
body.standard-mode #bottomInfo{display:none}
body.standard-mode .topbar{position:relative;z-index:30;background:#090e0c;box-shadow:0 3px 20px #0007}
.standard-only{display:flex;position:relative;z-index:8;height:calc(100vh - 90px);overflow:hidden;background:radial-gradient(ellipse at 35% 45%,#243527,#070d09 72%)}
.standard-board{position:relative;flex:1 1 64%;min-width:0;overflow:hidden;box-shadow:inset -14px 0 26px #030705bd}
.standard-board canvas{width:100%;height:100%;display:block;touch-action:none}
.board-legend{position:absolute;left:20px;bottom:20px;pointer-events:none;letter-spacing:.16em;color:#ead8a4;font:600 11px var(--cinzel);text-shadow:0 2px 10px black}
.standard-controls{position:relative;flex:0 0 min(430px,36vw);min-width:300px;overflow-y:auto;background:linear-gradient(115deg,#141e18,#070c09);border-left:1px solid #6f86623a;padding:14px 18px 35px}
.standard-controls .phone-hero{padding:10px 5px 4px}.standard-controls .phone-card{padding:18px}
.standard-controls .phone-card h2{font-size:22px}.standard-controls .phone-card p{font-size:14px}
.standard-controls .phone-hero img{width:70px;height:80px}.standard-controls .phone-name{font-size:19px}
.standard-controls .resource strong{font-size:18px}
.quick-chat{position:fixed;z-index:40;right:16px;bottom:23px;display:flex;flex-direction:column;align-items:end;gap:7px;pointer-events:none}
.quick-chat>*{pointer-events:auto}
.chat-trigger{background:#283729f5;border:1px solid #b4a16f;color:#f1dfb3;padding:10px 14px;box-shadow:0 4px 20px #000c;font:600 11px var(--cinzel);letter-spacing:.06em}
.chat-menu{width:min(355px,90vw);max-height:45vh;overflow:auto;background:#111a15fa;border:1px solid #7a8c68;padding:13px;box-shadow:0 10px 38px #000e}
.chat-phrases{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:10px}
.chat-phrases button{padding:9px 7px;background:#26352b;border:1px solid #71896967;color:#e7dfca;font-size:11px}
.chat-phrases button:hover{background:#415640}
.chat-recent{width:min(340px,82vw);display:grid;gap:4px;pointer-events:none}
.chat-recent div{background:#142017d9;border-left:2px solid #b6a271;color:#d6dfcd;padding:6px 10px;font:11px var(--sans)}
.chat-recent strong{color:#eed8ab}
.chat-recent .quick-chat-entry{opacity:1;transition:opacity .5s ease}
.chat-recent .quick-chat-entry.quick-chat-fading{opacity:0}
.battle-intent{border:1px solid #bb8d6980;padding:12px;background:#39231dcc;color:#ebbaa0;font:600 11px var(--cinzel);letter-spacing:.04em;margin:15px 0}
.portrait-banner{height:205px;overflow:hidden;align-items:center;padding:7px 0}
.enemy-silhouette{height:193px;max-height:193px;max-width:96%;width:auto;object-fit:contain;object-position:center center}
.phone-art{height:175px;margin-bottom:14px}
.phone-art img{max-height:169px;height:169px;object-fit:contain;object-position:center center}
body.tv-mode .world{display:block}
@media(max-width:850px){
 body.standard-mode,body.standard-mode #app{overflow:auto;height:auto;min-height:100vh}
 body.standard-mode .topbar{position:sticky;top:0;z-index:30}
 .standard-only{height:auto;min-height:0;flex-direction:column;overflow:visible}
 .standard-board{flex:auto;width:100%;height:42svh;min-height:250px;max-height:440px;border-bottom:1px solid #71815b4f}
 .standard-controls{flex:auto;min-width:0;width:100%;overflow:visible;padding:16px max(14px,calc((100% - 560px)/2)) 100px}
 .board-legend{font-size:9px;bottom:12px;left:12px}
 .quick-chat{bottom:15px;right:10px}
}
@media(max-width:500px){.mode-picks{grid-template-columns:1fr}.server-row{display:grid}.standard-controls .phone-card{padding:17px}.brand-title{font-size:17px}.top-meta .connection-indicator{display:none}.chat-trigger span{display:none}}

/* Cinematic, non-interactive camera by default; free-look activates only in overview. */
.camera-toolbar{display:flex;align-items:center;gap:12px;justify-content:end;flex-wrap:wrap;pointer-events:auto}
.environment-caption{font:500 10px var(--cinzel);letter-spacing:.16em;color:#b5c8ac;text-shadow:0 1px 6px #000}
.camera-overview{color:#d8c89e;border:1px solid #87957780;background:#101b17e8;padding:9px 14px;font:600 10px var(--cinzel);letter-spacing:.08em;cursor:pointer;z-index:12;white-space:nowrap}
.camera-overview.active{border-color:#dfc38c;background:#374033;color:#f8dfad}
.camera-overview:hover{background:#344639}
.standard-overview{position:absolute;top:20px;right:18px}
.startup-splash{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center}
.splash-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.splash-frame video,.splash-frame img{width:100%;height:100%;object-fit:contain;background:#000;pointer-events:none}
.splash-skip{position:absolute;right:clamp(16px,3vw,45px);bottom:clamp(19px,3vw,42px);z-index:2;background:#0e130fdb;border:1px solid #ad9d78a8;color:#f3e9d2;padding:12px 20px;font:600 12px var(--cinzel);letter-spacing:.1em}
.splash-skip:hover{background:#29382c}
@media(max-width:850px){.standard-overview{top:12px;right:12px;font-size:9px;padding:8px 9px}.environment-caption{font-size:8px}}

/* Expedition III navigation and startup refinements */
#logoSplash video{display:block;width:100%;height:100%;object-fit:cover;object-position:center center;background:#000}
#warningSplash{background:#000}
#warningSplash img{display:block;width:min(78vw,1080px);height:auto;max-height:76vh;object-fit:contain;object-position:center;background:transparent;pointer-events:none}
.splash-frame{opacity:1;transition:opacity .65s ease-in-out}
.splash-frame.splash-enter{opacity:0}
.splash-frame.splash-exit{opacity:0;pointer-events:none}
.startup-splash{transition:opacity .65s ease-in-out}
.startup-splash.splash-exit{opacity:0;pointer-events:none}
.session-exit{color:#e0cba1;border:1px solid #9d90725e;background:#121914c9;padding:8px 12px;font:600 9px var(--cinzel);letter-spacing:.06em;white-space:nowrap;cursor:pointer}
.session-exit:hover{background:#343b2e;border-color:#c0ad7c}
.session-exit.hidden{display:none!important}
.menu-back{margin-top:12px;opacity:.85}
.lobby-management{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin:13px 0 4px}
.lobby-management span{font:10px var(--sans);color:#879484}
.lobby-slot{position:relative}
.kick-player{display:inline-block;margin-top:8px;background:transparent;border:1px solid #986c61a1;color:#d6a79a;padding:5px 7px;cursor:pointer;font:600 9px var(--sans);letter-spacing:.06em}
.kick-player:hover{background:#472c28}
.lobby-slot .kick-player{grid-column:1/-1;justify-self:center}
.player-card .kick-player{margin-top:5px}
.confirm-modal{max-width:450px}
.confirm-modal p{font:14px/1.6 var(--sans);color:#bdc9b7;padding:8px 0 15px}
.confirm-actions{display:flex;gap:12px;justify-content:space-between}
.confirm-actions>*{flex:1}
@media(max-width:700px){.session-exit{padding:6px 7px;font-size:8px}.top-meta{gap:5px}#warningSplash img{width:90vw;max-height:70vh}.lobby-management span{display:none}}
@media(prefers-reduced-motion:reduce){.splash-frame,.startup-splash{transition-duration:.01ms}}

/* Expedition IV: left-side quick chat, headroom for full silhouette, subtle spoken captions. */
.quick-chat{right:auto!important;left:16px!important;align-items:flex-start!important}
.chat-recent div{border-left:2px solid #b6a271}
.portrait-banner{height:210px;min-height:210px;overflow:visible!important;padding:14px 4px 7px;display:flex;justify-content:center;align-items:center}
.enemy-silhouette{height:185px!important;max-height:185px!important;max-width:100%;width:auto;object-fit:contain;object-position:center 55%;overflow:visible!important}
.phone-art{height:195px!important;min-height:195px!important;overflow:visible!important;padding-top:8px}
.phone-art img{height:180px!important;max-height:180px!important;width:90%;object-position:50% 52%;object-fit:contain!important}
.spoken-line{min-height:2.4em;white-space:pre-wrap}
#voiceToggle{padding:9px 12px;min-width:79px;font:600 10px var(--cinzel);color:#dbc798;border:1px solid #65735f;background:#111a14}
#voiceToggle:hover{background:#263525}
@media(max-width:850px){.quick-chat{left:10px!important;right:auto!important}.chat-menu{max-height:55svh}}

/* Expedition V: opening interaction unlocks ambient audio, no downloads on guest devices. */
.entrance-gate,.loading-gate{position:fixed;inset:0;z-index:5000;background:radial-gradient(ellipse at 50% 30%,#1c2921 0%,#0b110e 45%,#030503 100%);display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;overflow:auto}
.entrance-inner,.loading-inner{display:flex;flex-direction:column;align-items:center;gap:17px;width:min(94vw,550px);max-height:96vh;overflow:auto}
.entrance-inner img{width:min(260px,52vw);height:min(140px,20vh);object-fit:contain;filter:drop-shadow(0 10px 25px #000)}
.entrance-inner h1{font:500 clamp(28px,5vw,48px) var(--cinzel);letter-spacing:.13em;color:#e6d5a6;margin:4px 0}
.entrance-inner p,.loading-inner p{font:14px/1.75 Georgia,serif;color:#b1bcae;max-width:440px;margin:0}
.entrance-inner .btn{width:min(370px,92vw);min-height:52px}
.entrance-inner .entrance-note{font:11px var(--sans);color:#97a597}
.loading-gate{z-index:5050;background:#040a07ef;backdrop-filter:blur(9px)}
.loading-glyph{font:65px var(--cinzel);color:#ddc98f;animation:ironvein-loading 3s ease-in-out infinite}
.loading-inner h2{font:500 clamp(23px,5vw,35px) var(--cinzel);color:#e6d5a6;margin:0}
.loading-track{height:3px;background:#38443c;width:min(330px,85vw);overflow:hidden;margin:15px 0}
.loading-track>div{height:100%;width:35%;background:#d7c38e;animation:ironvein-loader 1.8s ease-in-out infinite}
.loading-track.is-determinate>div{width:var(--storyteller-download-progress,0%);transform:none;animation:none;transition:width .18s linear}
@keyframes ironvein-loading{50%{opacity:.4;transform:translateY(-5px)}}
@keyframes ironvein-loader{0%{transform:translateX(-110%)}100%{transform:translateX(380%)}}
.mode-picks label.visibility-locked{opacity:.34;cursor:not-allowed;filter:grayscale(1)}
.mode-picks label.visibility-locked input{pointer-events:none}
@media(prefers-reduced-motion:reduce){.loading-glyph,.loading-track>div{animation:none}.loading-track:not(.is-determinate)>div{width:100%}}

/* Expedition VI: slightly lift quick chat clear of the lower-left chronicle. */
.quick-chat{bottom:68px!important;z-index:45}
#voiceToggle.muted{opacity:.55;filter:saturate(.45);background:#111714}
.display-mode .lobby-footer,.display-mode .kick-player,.display-mode #backLobby{display:none!important}
.display-mode #voiceToggle{display:none}
.creating-tv #createHero,.creating-tv label[for=createHero],.creating-tv #createClassGrid,.creating-tv .class-label{display:none}
.creating-tv #createHero{pointer-events:none}
@media(max-width:850px){.quick-chat{bottom:75px!important;left:10px!important}}

#voiceToggle{min-width:115px;white-space:nowrap;font-size:9px}

/* Expedition VIII: world-space-style feedback, not a permanent activity feed. */
.chronicle-burst{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.9);z-index:1500;pointer-events:none;text-align:center;width:min(88vw,620px);opacity:0;display:flex;flex-direction:column;align-items:center;gap:8px;filter:drop-shadow(0 4px 16px #000);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1);}
.chronicle-burst.visible{opacity:1;transform:translate(-50%,-50%) scale(1);}
.chronicle-burst .burst-symbol{font-size:46px;color:#c8b987;line-height:1.2;text-shadow:0 3px 20px #040604;}
.chronicle-burst strong{font-family:Georgia,serif;font-size:clamp(24px,4vw,44px);color:#e8deb7;letter-spacing:.08em;text-transform:uppercase;text-shadow:0 3px 20px #000;}
.chronicle-burst span{font-size:clamp(12px,1.5vw,17px);color:#f2efe5;line-height:1.45;background:rgba(9,14,11,.66);padding:5px 16px;border-radius:7px;max-width:95%;}
.chronicle-burst.reward strong,.chronicle-burst.reward .burst-symbol{color:#f4d36b;}
.chronicle-burst.damage strong,.chronicle-burst.danger strong{color:#f09b86;}
.chronicle-burst.heal strong,.chronicle-burst.victory strong{color:#b5e4c0;}
#hostLog,#standardLog,#phoneLog{display:none!important;}
.log-box:has(#hostLog){display:none!important;}
.combat-history,.dialogue-history{background:rgba(5,10,7,.7);border:1px solid rgba(170,185,138,.22);padding:10px 12px;margin:12px 0;border-radius:7px;}
.combat-history p,.dialogue-history p{margin:4px 0!important;font-size:.9rem;opacity:.9;}
.phone-card .notification{margin-bottom:10px;}
@media(max-width:700px){.chronicle-burst{top:50%;}.chronicle-burst span{font-size:12px;}.chronicle-burst .burst-symbol{font-size:30px;}}

/* Expedition IX: the cinematic headline belongs to the board, never the UI panel.
   The current camera/board bounds are measured by the client, including TV side panels. */
.chronicle-burst{left:50%;top:50%;width:min(620px,80vw);}
.chronicle-burst strong{max-width:100%;overflow-wrap:anywhere;line-height:1.2;}
.chronicle-burst span{display:none!important;}
.inventory-section{margin:0 0 13px;border:1px solid #a5ac8157;background:linear-gradient(140deg,#1c2a20,#0d1510);box-shadow:inset 0 0 18px #04090460;}
.inventory-toggle{display:flex;align-items:center;gap:10px;padding:12px 14px;color:#e2c996;background:none;border:0;width:100%;text-align:left;font:600 12px var(--cinzel);letter-spacing:.075em;}
.inventory-toggle span{margin-left:auto;font:10px var(--sans);color:#a9b4a2;letter-spacing:.025em;}
.inventory-toggle b{font:18px var(--sans);color:#cfbc8b;}
.inventory-list{padding:6px 10px 12px;border-top:1px solid #6c7d5c55;display:grid;gap:7px;}
.inventory-item{display:flex;align-items:center;gap:10px;padding:9px;border:1px solid #a4ac7640;background:#090f0ad9;}
.inventory-icon{flex:none;width:33px;text-align:center;font-size:23px;color:#d4c595;}
.inventory-desc{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.inventory-desc strong{font:600 12px var(--cinzel);color:#e4d4ac;line-height:1.3;}
.inventory-desc strong span{color:#aab89e;font:11px var(--sans);}
.inventory-desc small{color:#b4bda9;font:11px/1.4 var(--sans);}
.inventory-use{flex:none;min-width:50px;padding:8px;font-size:10px;}
@media(max-width:650px){.chronicle-burst strong{font-size:clamp(18px,5vw,30px)}.inventory-item{gap:7px}}

/* Player-facing screens hide model/version/development controls. */
#modelSelect,.demo-toggle{display:none!important;}
body.developer-mode #modelSelect{display:block!important;}
body.developer-mode .demo-toggle{display:flex!important;}

/* Expedition XI: the browser may scroll ordinary mobile pages and the board.
   The 3D camera owns gestures only in the explicit free-look overview. */
body.player-mode,body.standard-mode{overscroll-behavior-y:auto;touch-action:pan-y;}
body.player-mode .phone-content,body.standard-mode .standard-controls{overflow-wrap:anywhere;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
body.standard-mode .standard-board canvas{touch-action:pan-y;}
@media(max-width:850px){
 body.standard-mode,body.standard-mode #app{height:auto!important;min-height:100dvh;overflow-y:visible!important;}
 body.standard-mode .standard-only{overflow:visible!important;height:auto!important;}
 body.standard-mode .standard-controls{overflow-y:visible!important;touch-action:pan-y;}
 body.standard-mode .quick-chat{position:absolute!important;top:72px!important;bottom:auto!important;left:12px!important;right:auto!important;max-width:min(82vw,320px);z-index:45;}
 body.standard-mode .chat-menu{max-height:44dvh;}
 body.player-mode .quick-chat{position:absolute!important;top:75px!important;bottom:auto!important;left:12px!important;right:auto!important;}
}
.chat-recent{opacity:0;transform:translateY(-5px);transition:opacity .25s,transform .25s;}
.chat-recent.chat-recent-visible{opacity:1;transform:translateY(0)}
.combat-impact{margin:10px 0;padding:13px 15px;background:#273629;border:1px solid #9fb98255;color:#d7e5d1;font:12px/1.6 var(--sans);}
.combat-impact strong{color:#fff0b9;font:700 19px var(--cinzel);}
.combat-impact.dealt{border-color:#d6a46c9c;background:#33271dd6;}
.combat-impact.miss{border-color:#976f6299;background:#2b1e1cd6;}

/* Campaign creation and resume listing. */
.campaign-pick{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid #8c79544d;background:#26342c99;margin:15px 0;cursor:pointer;color:#e2dbbb}
.campaign-pick input{accent-color:#a2ae85;width:20px;height:20px;flex-shrink:0}
.campaign-pick span{display:flex;flex-direction:column;gap:5px}
.campaign-pick strong{font-family:Georgia,serif;letter-spacing:.08em;font-size:14px}
.campaign-pick small{color:#aeb9a7;font-size:12px;line-height:1.35}
.campaign-tag{font-size:11px;letter-spacing:.12em;color:#d7c89e}

/* The optional spoken-text indicator preserves its full inline width at every
   stage: zero, one, two, then three baseline-aligned dots. Its text never
   enters the narration engine or synchronized multiplayer captions. */
.spoken-line.narration-waiting{opacity:.78;font-style:italic}
.spoken-line.narration-waiting::after{
 content:'';display:inline-block;width:1.4em;height:.84em;
 margin-left:.22em;vertical-align:baseline;
 background-image:
  radial-gradient(circle at .19em calc(100% - .15em),currentColor .095em,transparent .115em),
  radial-gradient(circle at .63em calc(100% - .15em),currentColor .095em,transparent .115em),
  radial-gradient(circle at 1.07em calc(100% - .15em),currentColor .095em,transparent .115em);
 background-repeat:no-repeat;
 clip-path:inset(0 100% 0 0);
 animation:ironvein-narration-dots 1.6s steps(1,end) infinite;
}
@keyframes ironvein-narration-dots{
 0%,24.99%{clip-path:inset(0 100% 0 0)}
 25%,49.99%{clip-path:inset(0 65% 0 0)}
 50%,74.99%{clip-path:inset(0 34% 0 0)}
 75%,100%{clip-path:inset(0 0 0 0)}
}
@media(prefers-reduced-motion:reduce){
 .spoken-line.narration-waiting::after{animation:none;clip-path:none}
}

/* Expedition XXII UI refinement: retain the desktop composition while
   giving narrower touchscreens comfortable controls and readable stories. */
@media (max-width:500px){
 .topbar{gap:6px;padding:10px 12px}
 .brand{gap:7px;min-width:0}
 .brand-title{font-size:16px;letter-spacing:.14em}
 .brand-sub{font-size:6px;letter-spacing:.14em}
 .top-meta{gap:4px;flex-shrink:0}
 .session-exit{min-height:40px;padding:7px 6px;font-size:8px}
 #voiceToggle{min-width:104px;min-height:40px;padding:7px 6px;font-size:8px}
 .topbar .icon-button{width:40px;height:40px;flex-shrink:0}
 body.standard-mode .standard-controls .phone-card h2{font-size:19px;line-height:1.34;overflow-wrap:break-word}
 body.standard-mode .standard-controls .phone-card .btn{min-height:44px;line-height:1.4;padding:11px 10px;white-space:normal}
 body.standard-mode .standard-controls .phone-card{padding:16px;margin-top:12px}
 body.standard-mode .standard-controls .phone-hero img{width:63px;height:72px}
 body.standard-mode .quick-chat .chat-trigger{min-width:42px;min-height:42px;display:grid;place-items:center;padding:8px 10px}
}
@media (max-width:400px){
 body.standard-mode .topbar{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:6px}
 body.standard-mode .brand{flex:1 1 100%}
 body.standard-mode .top-meta{margin-left:auto}
 body.standard-mode .quick-chat{top:116px!important}
}
@media (max-width:500px){
 .camera-overview:focus-visible,.chat-trigger:focus-visible,.session-exit:focus-visible,
 #voiceToggle:focus-visible,#audioToggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
}

/* Expedition XXIII: short reactive story hazards. */
.crisis-panel{border-color:#a98b61aa;box-shadow:0 0 18px #7d4b2824;}
.crisis-clock{margin:15px 0 12px;padding:12px 14px;border:1px solid #ae80536b;background:#38291f68;color:#f3cf8b;font:600 13px var(--cinzel);letter-spacing:.13em;text-align:center;font-variant-numeric:tabular-nums;}
.crisis-clock [data-crisis-seconds]{font-size:21px;vertical-align:middle;min-width:2ch;display:inline-block;}
@media(max-width:500px){.crisis-clock{font-size:11px;padding:11px 9px}.crisis-panel .btn{line-height:1.5}}

/* Server-authoritative action timer. Keep this within the playable viewport. */
.decision-clock-hud{position:fixed;left:50%;top:100px;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 28px);justify-content:center;padding:9px 15px;background:rgba(12,21,17,.92);border:1px solid #788e6a87;color:#e1d5a7;font:600 11px var(--cinzel,serif);letter-spacing:.1em;box-shadow:0 7px 23px #0009;pointer-events:none;transition:border-color .2s,background .2s;white-space:nowrap}
.decision-clock-hud.hidden{display:none!important}
.decision-clock-hud strong{font-size:22px;font-variant-numeric:tabular-nums;color:#f4d49d;min-width:2ch;text-align:right}
.decision-clock-hud .clock-icon{font-size:19px}
.decision-clock-hud .clock-seconds{font-size:9px;opacity:.72}
.decision-clock-hud.urgent{border-color:#df886b;background:rgba(42,20,16,.94);color:#ffddc1}
body.standard-mode .decision-clock-hud{justify-content:center}
body.tv-mode .decision-clock-hud{justify-content:center}
@media(max-width:800px){.decision-clock-hud{top:88px;font-size:9px;max-width:94vw;gap:5px;padding:7px 10px;white-space:normal;text-align:center}.decision-clock-hud strong{font-size:18px}}
@media(max-width:440px){.decision-clock-hud{top:110px;max-width:96vw}}

/* XXVI: per-device subtitles over the board. Button focus reuses the same line. */
.cc-settings{display:inline-flex;align-items:center;gap:6px;border:1px solid #65735f;background:#111a14;color:#dbc798;padding:5px 7px;font:600 10px var(--cinzel);white-space:nowrap}
.cc-settings select{width:auto;min-width:79px;max-width:114px;border:0;background:transparent;color:#ead8ac;padding:4px 2px;font:600 10px var(--sans);cursor:pointer}
.cc-settings select option{background:#132018;color:#f2e5cb}
.cc-settings:focus-within{outline:2px solid var(--gold);outline-offset:2px}
.cc-overlay{position:absolute;z-index:12;left:50%;bottom:11%;width:min(690px,65%);transform:translateX(-50%);pointer-events:none;display:none;text-align:center;justify-content:center}
.cc-overlay.cc-visible{display:flex}
.cc-inner{background:rgba(5,9,7,.82);border:1px solid #9c93724f;box-shadow:0 4px 22px #000a;border-radius:5px;padding:11px 17px;max-width:100%;color:#fff1d2;font:600 clamp(13px,1.55vw,21px)/1.45 var(--sans);text-shadow:0 1px 2px #000}
.cc-kind{display:block;font:700 9px/1.5 var(--cinzel);letter-spacing:.17em;color:#d4ba78;margin-bottom:3px}
.cc-text{white-space:pre-wrap;overflow-wrap:anywhere}
#gameStandard .standard-board{position:relative}
#gameStandard .cc-overlay{width:min(660px,82%);bottom:9%;z-index:13}
#gameHost .cc-overlay{left:49%;width:min(650px,57%);bottom:13%}
#gamePhone .cc-overlay{position:fixed;bottom:25px;width:min(540px,94vw);z-index:40}
@media(max-width:950px){.cc-settings{padding:4px}.cc-settings select{min-width:57px;max-width:83px;font-size:9px}.cc-overlay,.cc-inner{font-size:14px}#gameStandard .cc-overlay{bottom:10%;width:90%}}
@media(max-width:560px){.cc-settings span{display:none}.cc-settings select{max-width:78px;min-width:57px}.cc-inner{padding:8px 11px}.cc-overlay{width:93%;bottom:9%}}

@media(max-width:700px){.topbar{flex-wrap:wrap}.top-meta{gap:5px}#voiceToggle{min-width:87px;font-size:8px}}
@media(max-width:450px){.brand-sub{display:none}.brand-title{font-size:14px}.brand-icon{width:30px;height:30px}.top-meta{gap:4px}.cc-settings select{min-width:54px;max-width:64px}}

/* XXVII: fade subtitles at the end of a line or after the player advances.
 * Keep a layout box while hidden so CSS can animate opacity. */
.cc-overlay{display:flex;opacity:0;visibility:hidden;transition:opacity .46s ease,visibility 0s linear .46s;}
.cc-overlay.cc-visible{display:flex;opacity:1;visibility:visible;transition:opacity .18s ease,visibility 0s;}
.chat-recent{transition:opacity .5s ease,transform .5s ease;}

/* A compact mobile masthead: no horizontal overflow or controls stacked
 * beside the logo. The complete room/navigation controls remain accessible. */
@media(max-width:760px){
 .topbar,body.standard-mode .topbar,body.player-mode .topbar{
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  background:#0a110df7;border-bottom:1px solid #80916e55;min-width:0;
 }
 .topbar .brand{min-width:0;width:100%;gap:9px;justify-content:flex-start}
 .topbar .brand-icon{width:36px;height:36px;flex:0 0 36px;font-size:22px}
 .topbar .brand-title{font-size:18px;letter-spacing:.13em}
 .topbar .brand-sub{font-size:7px;letter-spacing:.12em;line-height:1.35}
 .topbar .top-meta{display:flex;flex-wrap:wrap;gap:6px;width:100%;margin:0;min-width:0;align-items:stretch;justify-content:flex-start}
 .top-meta .connection-indicator{display:block;font:600 9px/1.4 var(--sans);letter-spacing:.055em;flex:1 0 100%;min-width:0;}
 .top-meta #room-meta{display:none}
 .top-meta .session-exit:not(.hidden){flex:1 1 136px;min-width:0;min-height:38px;white-space:normal;line-height:1.3;font-size:9px;padding:7px 9px}
 .top-meta .cc-settings{flex:1 1 116px;display:flex;min-width:0;min-height:40px;max-width:none;justify-content:space-between;padding:4px 7px;gap:5px}
 .top-meta .cc-settings span{display:inline}
 .top-meta .cc-settings select{flex:1 1 auto;width:100%;max-width:none;min-width:0;font-size:11px;padding:6px 1px}
 .top-meta #voiceToggle{flex:1 1 126px;min-width:0;min-height:40px;height:auto;white-space:normal;font-size:9px;padding:6px 9px;line-height:1.3}
 .top-meta #audioToggle{flex:0 0 40px;width:40px;height:40px;min-width:40px}
 body.standard-mode .quick-chat,body.player-mode .quick-chat{top:auto!important;bottom:max(74px,env(safe-area-inset-bottom))!important;position:fixed!important;left:10px!important;z-index:55}
 body.standard-mode .chat-menu,body.player-mode .chat-menu{max-height:40dvh;max-width:calc(100vw - 25px)}
 .decision-clock-hud{max-width:calc(100vw - 18px);font-size:9px;line-height:1.25}
 #gamePhone .cc-overlay{bottom:max(18px,env(safe-area-inset-bottom));}
}
@media(max-width:420px){
 .topbar .brand-sub{display:none}
 .topbar .brand-title{font-size:17px}
 .topbar .top-meta .session-exit:not(.hidden){flex:1 1 100%;min-height:36px}
 .topbar .top-meta .cc-settings{flex:1 1 105px}
 .topbar .top-meta #voiceToggle{flex:1 1 105px}
 .topbar .top-meta #audioToggle{flex:0 0 40px}
}
@media(prefers-reduced-motion:reduce){.cc-overlay,.cc-overlay.cc-visible,.chat-recent{transition-duration:.01ms}}
@media(max-width:760px){
 .topbar .brand{padding-right:112px}
 .topbar .top-meta .connection-indicator{position:absolute;top:23px;right:max(12px,env(safe-area-inset-right));font-size:8px;letter-spacing:.025em;flex:none;white-space:nowrap;text-align:right}
}
@media(max-width:420px){
 .topbar .top-meta .session-exit:not(.hidden){flex:1 1 calc(50% - 4px);min-height:38px}
}
@media(hover:none) and (pointer:coarse){
 button[data-action]{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
}

/* XXIX: board-space particles and soft environmental lightning. Never steal input. */
#world>.atmosphere-canvas,.standard-board>.atmosphere-canvas{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%;}
#world>.atmosphere-light,.standard-board>.atmosphere-light{position:absolute;inset:0;z-index:5;pointer-events:none;background:#e1ebff;opacity:0;mix-blend-mode:screen;}
.atmosphere-light[data-firelight="1"]{opacity:.16;background:radial-gradient(circle at 50% 82%,rgba(255,188,102,.34) 0,rgba(255,146,71,.18) 18%,rgba(255,112,54,.08) 31%,transparent 58%);mix-blend-mode:screen;animation:ironvein-fireglow 5.2s ease-in-out infinite;}
.atmosphere-light.is-flashing{animation:ironvein-thunderflash .8s ease-out both;}
@keyframes ironvein-thunderflash{0%{opacity:0}5%{opacity:.26}12%{opacity:.12}21%{opacity:.32}31%{opacity:.07}47%{opacity:.18}100%{opacity:0}}
@keyframes ironvein-fireglow{0%,100%{opacity:.12;transform:scale(1)}42%{opacity:.18;transform:scale(1.02)}67%{opacity:.14;transform:scale(.99)}}
.atmosphere-canvas.fx-disabled,.atmosphere-light.fx-disabled{display:none!important}
.standard-atmosphere{position:absolute;top:20px;right:184px;}
.atmosphere-toggle[aria-pressed="false"]{opacity:.65;}
@media(max-width:760px){.standard-atmosphere{top:20px;right:170px;padding:9px 8px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.atmosphere-light.is-flashing{animation:none!important}}

/* Expedition XXX: ambient party decisions, separate from the chronicle, TTS and timers. */
.action-moments{position:fixed;z-index:22;left:50%;top:25vh;transform:translateX(-50%);width:min(450px,56vw);display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:none;text-align:center}
.action-moment{width:max-content;max-width:100%;min-width:min(245px,100%);background:linear-gradient(120deg,#0c1914ed,#1c281fef);border:1px solid #9b956979;border-left:3px solid #d0b783;box-shadow:0 8px 22px #000b,0 0 18px #9a815d1c;padding:9px 16px 11px;opacity:1;animation:action-moment-appear .25s ease backwards,action-moment-timeout .42s ease var(--action-moment-fade-delay,2600ms) forwards;overflow-wrap:anywhere}
.action-moment.is-combat{border-left-color:#d98f74;background:linear-gradient(120deg,#1f1613ef,#261d1aef)}
.action-moment.is-auto{border-left-color:#9da9ae}
.action-moment-heading{color:#d5c08c;font:600 10px/1.4 var(--cinzel);letter-spacing:.14em;text-transform:uppercase}
.action-moment.is-auto .action-moment-heading{color:#aebac0}
.action-moment-detail{margin-top:5px;color:#f5ecd5;font:14px/1.35 Georgia,serif;text-wrap:balance}
.action-moment.is-leaving{pointer-events:none}
@keyframes action-moment-appear{from{opacity:0;transform:translateY(-9px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes action-moment-timeout{from{opacity:1}to{opacity:0;transform:translateY(-7px)}}
@media(max-width:850px){.action-moment{padding:7px 12px 8px}.action-moment-heading{font-size:9px}.action-moment-detail{font-size:12px}}
@media(prefers-reduced-motion:reduce){.action-moment{animation:none}.action-moment.is-leaving{transition:none}}

.class-knack{display:block;font:600 10px/1.35 var(--cinzel);letter-spacing:.04em;margin-top:5px;color:#a6c49f}.combat-matchup{color:#c6c3a2;border-left:2px solid #a4ae87;padding-left:9px;margin:9px 0;font-size:12px}.class-knack.negative{color:#cb9f90}

/* XXXV: a clear setup notice for unconfigured static itch.io deployments. */
.relay-setup-notice{border:1px solid #886944;background:rgba(43,28,14,.9);color:#f0d8a5;font-size:.85rem;line-height:1.5;padding:12px 16px;margin:8px auto 16px;max-width:540px;text-align:left}

.relay-storage-warning{margin:0 4px 16px;border-left:3px solid #bd9657;background:rgba(49,37,15,.55);padding:10px 14px;font-size:.8rem;line-height:1.45;color:#e4c995}

/* XXXVIII — compact vital signs and pre-roll character progression */
.tiny-hp-track{width:100%;height:5px;max-width:160px;margin-top:5px;background:#331e20;border:1px solid #ae756e55;overflow:hidden;border-radius:3px}
.tiny-hp-track i{display:block;height:100%;background:linear-gradient(90deg,#8f302f,#db745d);transition:width .35s ease}
.enemy-bar{margin:6px 0 12px}
.hero-growth{margin:12px 0;padding:13px;background:#101b15;border:1px solid #7a916544}
.hero-growth .eyebrow{display:flex;gap:12px;align-items:center;justify-content:space-between}
.stat-point-count{color:#e6c688;white-space:nowrap;font-size:9px}
.hero-attributes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:10px 0}
.hero-attribute{display:flex;align-items:center;gap:5px;background:#202d22;border:1px solid #6570573d;padding:7px 8px;min-width:0;font:10px var(--sans)}
.hero-attribute span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#d1dcc5}
.hero-attribute strong{white-space:nowrap;color:#f5e5b7}.hero-attribute strong small{color:#a4b99a;font-size:8px}
.attribute-add{background:#334536;border:1px solid #a0a9807a;color:#f4db95;min-width:25px;height:26px;font-size:15px;cursor:pointer}
.attribute-add:disabled{opacity:.28;cursor:default}
.hero-equipped{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0;font:9px var(--sans);color:#c0cbb7}
.hero-equipped span{border:1px solid #687c5c55;padding:5px 7px}
.inventory-tools{display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.inventory-tools select{font-size:10px;max-width:120px;min-width:84px;background:#152219;color:#e3dbc4;border:1px solid #617754;padding:7px 4px}
.inventory-tools button:disabled{opacity:.4}
.middle-scrolling,.middle-scrolling *{cursor:grabbing!important;user-select:none!important}
@media(max-width:420px){.hero-attributes{grid-template-columns:1fr 1fr}.inventory-tools{width:100%}.inventory-item{flex-wrap:wrap}}

.hero-skill{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;color:#d6c791;font:10px var(--cinzel);margin-bottom:10px}.hero-skill span{color:#b0bda5}

/* Keep the enemy vitality meter readable beside or below the numeric HP. */
.battle-stats:has(>.tiny-hp-track){flex-direction:column;align-items:stretch}
.battle-stats:has(>.tiny-hp-track) .tiny-hp-track{max-width:100%}

/* Editions share the same UI. Lite greys out online matchmaking, not TV controller joins. */
.edition-notice{max-width:520px;margin:12px auto;color:#ceb879;font-size:12px;line-height:1.5;text-align:center}.lite-edition #browseBtn,.lite-edition .visibility-locked{filter:grayscale(.9);opacity:.42;cursor:not-allowed}.lite-edition .visibility-locked input{pointer-events:none}.lite-edition #editionNotice[hidden]{display:none}

/* Ironvein XL direct invitations: large enough for SDP codes on phones. */
#p2pModal .modal{margin:auto;max-width:calc(100vw - 20px)}
#p2pModal textarea{font-family:ui-monospace,Consolas,monospace;font-size:11px;line-height:1.45;background:#101a19;color:#eadbb9;border:1px solid #665b45;border-radius:6px;padding:10px;min-height:82px;outline-offset:2px}
#p2pModal textarea:focus{border-color:#bea36c}
#p2pModal button{min-width:100px}
#p2pModal p{margin:10px 0}
@media(max-width:480px){#p2pModal .modal{padding:14px!important}#p2pModal button{font-size:11px}}

/* Expedition XLII: usable scroll surfaces on narrow/short viewports.
   Desktop board ownership stays unchanged. Popups scroll in their own viewport. */
.modal-cover,.lobby-cover{overscroll-behavior-y:contain;touch-action:pan-y;}
.modal-cover{align-items:safe center;justify-items:center;}
.modal-cover .modal,.lobby-cover .lobby-main{min-height:0;max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
@media(max-width:760px), (max-height:700px){
 body.menu-mode #app{overflow-y:auto!important;overflow-x:hidden;overscroll-behavior-y:contain;min-height:100dvh;height:100dvh;touch-action:pan-y;-webkit-overflow-scrolling:touch;}
 body.menu-mode #landing{position:relative;top:auto;left:auto;transform:none;margin:clamp(72px,12dvh,125px) auto 56px;width:min(610px,calc(100vw - 24px));max-height:none;}
 body.menu-mode .topbar{position:sticky;top:0;z-index:30;}
 .modal-cover,.lobby-cover{padding:8px;}
 .modal-cover .modal,.lobby-cover .lobby-main{max-height:calc(100dvh - 16px);padding-bottom:max(24px,env(safe-area-inset-bottom));}
 body.player-mode,body.player-mode #app,body.player-mode .phone-content{touch-action:pan-y;-webkit-overflow-scrolling:touch;}
 body.player-mode{overflow-y:auto!important;}
 body.player-mode #gamePhone{height:auto;min-height:0;}
}
/* Firefox scroll roots: hiding overflow on HTML prevents BODY from scrolling,
   even when the phone controller is taller than the screen. */
html:has(body.player-mode){height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden;}
body.player-mode{height:auto!important;min-height:100dvh;overflow-y:visible!important;}
body.player-mode #app{height:auto!important;min-height:100dvh;overflow:visible!important;}

/* Storyteller download indication: only surfaced on actual uncached transfers. */
.loading-hint{font:italic 13px/1.55 Georgia,serif!important;color:#ddc990!important}
.loading-detail{font:12px/1.5 var(--sans)!important;color:#afbdac!important;max-width:440px;overflow-wrap:anywhere}
.loading-detail.loading-warning{color:#e6ba86!important}

/* Inform hosts about mobile WebKit model limitations without obstructing the lobby. */
.ai-mobile-note{margin:.45rem 0 .65rem;color:#e3c999;font-size:.78rem;line-height:1.45;}

/* Touchscreen gameplay: use ONE natural page scroll instead of a fixed desktop
   board swallowing swipe gestures before the Roll/Dialogue buttons can appear. */
@media (hover:none) and (pointer:coarse) and (max-width:1000px) {
 html:has(body.standard-mode),html:has(body.player-mode){height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;touch-action:pan-y!important;}
 body.standard-mode,body.standard-mode #app,body.player-mode,body.player-mode #app{height:auto!important;min-height:100dvh!important;overflow-x:clip!important;overflow-y:visible!important;touch-action:pan-y!important;}
 body.standard-mode .standard-only{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;overflow:visible!important;}
 body.standard-mode .standard-board{flex:0 0 auto!important;width:100%!important;height:min(54dvh,400px)!important;min-height:190px!important;overflow:hidden!important;}
 body.standard-mode .standard-controls{flex:0 0 auto!important;min-width:0!important;width:100%!important;height:auto!important;max-height:none!important;overflow:visible!important;padding-bottom:max(80px,env(safe-area-inset-bottom))!important;touch-action:pan-y!important;}
 body.standard-mode .standard-controls *,body.player-mode .phone-content *{overscroll-behavior-y:auto;}
 body.standard-mode .standard-board canvas{touch-action:pan-y;}
 body.player-mode .phone-content{height:auto!important;max-height:none!important;overflow:visible!important;padding-bottom:max(80px,env(safe-area-inset-bottom))!important;}
 .modal-cover,.lobby-cover{touch-action:pan-y!important;}
}
#toast.toast-narrative{font:italic 12px/1.4 Georgia,serif!important;background:#162019ed!important;border:1px solid #8b966f65!important;color:#d9cfab!important;box-shadow:0 6px 24px #0006!important;padding:9px 15px!important;bottom:max(28px,env(safe-area-inset-bottom))!important;}


/* Expedition LI: one explicit touch scroll root for every game screen.
 * Previously BODY, HTML and #app competed for scroll ownership; switching
 * modes then made gameplay appear frozen on Chromium/Android. The menu already
 * scrolls successfully inside #app, so Standard and TV-controller use it too.
 */
@media (hover:none) and (pointer:coarse) and (max-width:1000px) {
 html:has(body.standard-mode),html:has(body.player-mode),
 body.standard-mode,body.player-mode{
  height:100%!important;min-height:0!important;overflow:hidden!important;
  overscroll-behavior:none!important;
 }
 body.standard-mode #app,body.player-mode #app{
  height:100dvh!important;min-height:0!important;
  overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior-y:contain!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
 }
 body.standard-mode .standard-only{
  height:auto!important;min-height:0!important;overflow:visible!important;
  display:flex!important;flex-direction:column!important;
 }
 body.standard-mode .standard-controls{
  height:auto!important;max-height:none!important;overflow:visible!important;
  flex:0 0 auto!important;min-width:0!important;width:100%!important;
  touch-action:pan-y!important;
 }
 body.player-mode #gamePhone,
 body.player-mode .phone-content{
  height:auto!important;max-height:none!important;overflow:visible!important;
  touch-action:pan-y!important;
 }
 /* Only camera free-look owns touch. The board's setOverview() applies an
  * inline touch-action:none when manual controls are actually enabled. */
 body.standard-mode .standard-board canvas{touch-action:pan-y;}
 body.standard-mode .topbar,body.player-mode .topbar{
  position:sticky!important;top:0;z-index:30;
 }
}

/* Overlays must attach to the viewport, not to the potentially 2000px-tall
 * app. Let the overlay scroll if needed, and its panel independently when
 * the keyboard or a small landscape viewport shrinks available height. */
@media (hover:none) and (pointer:coarse) {
 .modal-cover,.lobby-cover{
  position:fixed!important;inset:0!important;height:100dvh!important;
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;
  overflow-x:hidden;overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  padding:12px!important;
 }
 .modal-cover .modal,.lobby-cover .lobby-main{
  flex:0 1 auto;max-height:calc(100dvh - 24px)!important;min-height:0!important;
  overflow-y:auto!important;overflow-x:hidden;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y!important;
  width:min(620px,100%);
 }
 .modal-cover .modal{width:min(600px,100%);}
 .chat-menu{touch-action:pan-y!important;-webkit-overflow-scrolling:touch;}
}


/* Expedition LIII: mobile board-first gameplay layout and hamburger menu.
 * Phones get a compact masthead, slide-out controls, a larger board viewport
 * and denser hero/status cards inspired by the concept mockup. Desktop keeps
 * the existing arrangement.
 */
.mobile-top-status,.mobile-menu-toggle,.mobile-menu-heading,.mobile-menu-scrim{display:none}
.mobile-top-status{min-width:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right}
.mobile-top-status #room-meta{font:600 9px/1.35 var(--cinzel);letter-spacing:.12em;color:#d8cca6;white-space:nowrap;max-width:min(42vw,220px);overflow:hidden;text-overflow:ellipsis}
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;flex-direction:column;gap:4px;width:46px;height:46px;border:1px solid #877956;background:linear-gradient(180deg,#182119f4,#101612f5);box-shadow:0 8px 24px #0008;color:#e7d3a5;flex:0 0 46px}
.mobile-menu-toggle span{display:block;width:18px;height:2px;background:currentColor;border-radius:999px;transition:transform .22s ease,opacity .22s ease}
.mobile-menu-heading{display:none;flex-direction:column;gap:5px;padding:0 2px 8px;border-bottom:1px solid #6d795d55;margin-bottom:6px}
.mobile-menu-heading strong{font:700 14px/1.2 var(--cinzel);letter-spacing:.1em;color:#efe3c0}
.mobile-menu-scrim{position:fixed;inset:0;z-index:44;background:rgba(3,6,4,.52);backdrop-filter:blur(2px)}

@media (max-width:760px){
 body.standard-mode .topbar,body.lobby-mode .topbar,body.player-mode .topbar{
  position:sticky!important;top:0;left:0;right:0;z-index:50;
  display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));
  background:linear-gradient(180deg,#08100ce8,#08100cf4 78%,#08100ce8);
  border-bottom:1px solid #76845f45;box-shadow:0 10px 32px #000a;
 }
 body.standard-mode .topbar .brand,body.lobby-mode .topbar .brand,body.player-mode .topbar .brand{padding-right:0!important;gap:10px;min-width:0}
 body.standard-mode .topbar .brand-icon,body.lobby-mode .topbar .brand-icon,body.player-mode .topbar .brand-icon{width:38px;height:38px;flex:0 0 38px;font-size:23px}
 body.standard-mode .topbar .brand-title,body.lobby-mode .topbar .brand-title,body.player-mode .topbar .brand-title{font-size:17px;letter-spacing:.14em}
 body.standard-mode .topbar .brand-sub,body.lobby-mode .topbar .brand-sub,body.player-mode .topbar .brand-sub{display:none!important}
 body.standard-mode .topbar .mobile-top-status,body.lobby-mode .topbar .mobile-top-status,body.player-mode .topbar .mobile-top-status{display:flex}
 body.standard-mode .topbar .mobile-menu-toggle,body.lobby-mode .topbar .mobile-menu-toggle,body.player-mode .topbar .mobile-menu-toggle{display:flex}
 body.standard-mode .topbar .top-meta,body.lobby-mode .topbar .top-meta,body.player-mode .topbar .top-meta{
  position:fixed;top:0;right:0;bottom:0;z-index:46;width:min(320px,84vw);max-width:84vw;
  display:flex;flex-direction:column;align-items:stretch;gap:10px;
  padding:max(18px,calc(env(safe-area-inset-top) + 12px)) max(14px,env(safe-area-inset-right)) max(22px,calc(env(safe-area-inset-bottom) + 12px)) 14px;
  background:linear-gradient(180deg,#0c1511,#101a14 26%,#0c1310);
  border-left:1px solid #7a8b6859;box-shadow:-20px 0 48px #000c;
  transform:translateX(104%);opacity:0;visibility:hidden;pointer-events:none;
  transition:transform .24s ease,opacity .24s ease,visibility 0s linear .24s;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
 }
 body.standard-mode.mobile-menu-open .topbar .top-meta,body.lobby-mode.mobile-menu-open .topbar .top-meta,body.player-mode.mobile-menu-open .topbar .top-meta{transform:translateX(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .24s ease,opacity .24s ease,visibility 0s}
 body.standard-mode.mobile-menu-open .mobile-menu-scrim,body.lobby-mode.mobile-menu-open .mobile-menu-scrim,body.player-mode.mobile-menu-open .mobile-menu-scrim{display:block}
 body.standard-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(1),body.lobby-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(1),body.player-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 body.standard-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(2),body.lobby-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(2),body.player-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(2){opacity:0}
 body.standard-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(3),body.lobby-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(3),body.player-mode.mobile-menu-open .mobile-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 body.standard-mode .topbar .top-meta .mobile-menu-heading,body.lobby-mode .topbar .top-meta .mobile-menu-heading,body.player-mode .topbar .top-meta .mobile-menu-heading{display:flex}
 body.standard-mode .topbar .top-meta #room-meta,body.lobby-mode .topbar .top-meta #room-meta,body.player-mode .topbar .top-meta #room-meta,
 body.standard-mode .topbar .top-meta .connection-indicator,body.lobby-mode .topbar .top-meta .connection-indicator,body.player-mode .topbar .top-meta .connection-indicator{display:block!important;position:static!important;max-width:none!important;text-align:left!important}
 body.standard-mode .topbar .top-meta #room-meta,body.lobby-mode .topbar .top-meta #room-meta,body.player-mode .topbar .top-meta #room-meta{font:600 11px/1.35 var(--cinzel);letter-spacing:.14em;color:#dcccc0}
 body.standard-mode .topbar .top-meta .connection-indicator,body.lobby-mode .topbar .top-meta .connection-indicator,body.player-mode .topbar .top-meta .connection-indicator{font:600 11px/1.45 var(--sans);letter-spacing:.04em;color:#b1c0a9}
 body.standard-mode .topbar .top-meta .session-exit,body.lobby-mode .topbar .top-meta .session-exit,body.player-mode .topbar .top-meta .session-exit,
 body.standard-mode .topbar .top-meta .cc-settings,body.lobby-mode .topbar .top-meta .cc-settings,body.player-mode .topbar .top-meta .cc-settings,
 body.standard-mode .topbar .top-meta #voiceToggle,body.lobby-mode .topbar .top-meta #voiceToggle,body.player-mode .topbar .top-meta #voiceToggle,
 body.standard-mode .topbar .top-meta #audioToggle,body.lobby-mode .topbar .top-meta #audioToggle,body.player-mode .topbar .top-meta #audioToggle{width:100%;max-width:none;min-height:46px;height:auto;font-size:11px;white-space:normal;justify-content:flex-start}
 body.standard-mode .topbar .top-meta .session-exit,body.lobby-mode .topbar .top-meta .session-exit,body.player-mode .topbar .top-meta .session-exit{padding:11px 12px}
 body.standard-mode .topbar .top-meta .cc-settings,body.lobby-mode .topbar .top-meta .cc-settings,body.player-mode .topbar .top-meta .cc-settings{padding:8px 10px;display:flex;justify-content:space-between;gap:8px}
 body.standard-mode .topbar .top-meta .cc-settings select,body.lobby-mode .topbar .top-meta .cc-settings select,body.player-mode .topbar .top-meta .cc-settings select{font-size:12px;padding:7px 0;max-width:none;min-width:110px}
 body.standard-mode .topbar .top-meta #voiceToggle,body.lobby-mode .topbar .top-meta #voiceToggle,body.player-mode .topbar .top-meta #voiceToggle{padding:10px 12px}
 body.standard-mode .topbar .top-meta #audioToggle,body.lobby-mode .topbar .top-meta #audioToggle,body.player-mode .topbar .top-meta #audioToggle{padding:10px 12px;font-size:16px}

 body.standard-mode .standard-only{
  display:flex!important;flex-direction:column!important;gap:0;background:radial-gradient(ellipse at 50% 18%,#203225,#050907 74%)!important;
 }
 body.standard-mode .standard-board{
  position:relative;flex:0 0 auto!important;width:100%!important;height:clamp(335px,52dvh,520px)!important;min-height:300px!important;max-height:58dvh!important;
  border-bottom:1px solid #76806142;box-shadow:inset 0 -18px 28px #030705c4;
 }
 body.standard-mode .standard-board::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,#07100d 72%,#09110e 100%);
 }
 body.standard-mode .standard-controls{
  flex:1 1 auto!important;min-width:0!important;width:100%!important;overflow:visible!important;border-left:0!important;background:transparent!important;
  margin-top:-20px;padding:0 12px max(112px,calc(env(safe-area-inset-bottom) + 90px))!important;
 }
 body.standard-mode #standardPanel,body.player-mode .phone-content{display:flex;flex-direction:column;gap:14px}
 body.standard-mode #standardLog{margin-top:12px}
 body.standard-mode .phone-hero,body.player-mode .phone-hero{
  position:relative;margin:0;background:linear-gradient(145deg,#17231ce8,#0f1713f2);border:1px solid #7482604a;box-shadow:0 18px 42px #0008;
  padding:14px 14px 12px;border-radius:16px;overflow:hidden;
 }
 body.standard-mode .phone-hero::before,body.player-mode .phone-hero::before{content:'';position:absolute;inset:1px;border:1px solid #d7c39314;border-radius:15px;pointer-events:none}
 body.standard-mode .phone-hero .hero-person,body.player-mode .phone-hero .hero-person{align-items:flex-start;gap:12px;margin-bottom:10px}
 body.standard-mode .phone-hero img,body.player-mode .phone-hero img{width:66px!important;height:74px!important;border-color:#bba87470;box-shadow:0 6px 18px #0007}
 body.standard-mode .phone-name,body.player-mode .phone-name{font-size:18px!important;line-height:1.15}
 body.standard-mode .phone-role,body.player-mode .phone-role{font-size:10px;letter-spacing:.12em}
 body.standard-mode .resource-bar,body.player-mode .resource-bar{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 body.standard-mode .resource,body.player-mode .resource{padding:10px 8px;border-radius:12px;background:#121913f0;border-color:#69795e5a}
 body.standard-mode .resource strong,body.player-mode .resource strong{font-size:17px!important;line-height:1.05}
 body.standard-mode .xp-label,body.player-mode .xp-label{margin-top:10px;font-size:10px;letter-spacing:.08em;color:#bcc6af}
 body.standard-mode .hero-growth,body.standard-mode .inventory-section,
 body.standard-mode .phone-card,body.standard-mode .phone-log,
 body.player-mode .hero-growth,body.player-mode .inventory-section,body.player-mode .phone-card,body.player-mode .phone-log{
  margin:0;border-radius:16px;background:linear-gradient(145deg,#18231de8,#101713f0);border:1px solid #74826040;box-shadow:0 18px 38px #0008;
 }
 body.standard-mode .hero-growth,body.player-mode .hero-growth{padding:14px}
 body.standard-mode .phone-card,body.player-mode .phone-card{padding:17px 15px 16px}
 body.standard-mode .phone-card h2,body.player-mode .phone-card h2{font-size:22px!important;line-height:1.28;margin-bottom:10px}
 body.standard-mode .phone-card p,body.player-mode .phone-card p{font-size:14px!important;line-height:1.62}
 body.standard-mode .phone-card .btn,body.player-mode .phone-card .btn{margin-top:9px;border-radius:12px;min-height:48px}
 body.standard-mode .phone-card textarea,body.player-mode .phone-card textarea{border-radius:12px}
 body.standard-mode .phone-log,body.player-mode .phone-log{padding:14px 15px}
 body.standard-mode .log-entry,body.player-mode .log-entry{white-space:normal;line-height:1.55}
 body.standard-mode .inventory-toggle,body.player-mode .inventory-toggle{border-radius:16px}
 body.standard-mode .inventory-list,body.player-mode .inventory-list{padding:0 14px 14px}
 body.standard-mode .inventory-item,body.player-mode .inventory-item{border-radius:12px}

 body.standard-mode .board-legend{
  left:14px!important;right:14px;bottom:14px!important;max-width:calc(100% - 28px);font-size:9px!important;line-height:1.45;
  letter-spacing:.13em;text-wrap:balance;color:#e7dbb2;text-shadow:0 2px 12px #000;
 }
 body.standard-mode .standard-overview,body.standard-mode .standard-atmosphere{
  top:14px!important;border-radius:12px;padding:10px 11px;font-size:9px!important;box-shadow:0 8px 22px #0009;background:#101914e8;
 }
 body.standard-mode .standard-overview{right:14px!important}
 body.standard-mode .standard-atmosphere{right:146px!important}
 .decision-clock-hud{max-width:calc(100vw - 22px)!important;border-radius:999px;padding:8px 12px!important;box-shadow:0 8px 28px #000a}
 body.standard-mode .quick-chat,body.player-mode .quick-chat{left:12px!important;bottom:max(14px,calc(env(safe-area-inset-bottom) + 8px))!important;z-index:48}
 body.standard-mode .chat-trigger,body.player-mode .chat-trigger{border-radius:14px;min-height:46px;padding:10px 12px}
 body.standard-mode .chat-menu,body.player-mode .chat-menu{border-radius:14px;padding:12px;max-height:40dvh}
 body.standard-mode .chat-recent,body.player-mode .chat-recent{width:min(82vw,290px);gap:6px}
 body.standard-mode .chat-recent div,body.player-mode .chat-recent div{padding:9px 11px;border-radius:10px;background:#102018eb;box-shadow:0 5px 16px #0008}
 body.standard-mode .cc-overlay,body.player-mode .cc-overlay{bottom:max(74px,calc(env(safe-area-inset-bottom) + 58px))!important}
}

@media (max-width:560px){
 body.standard-mode .resource label,body.player-mode .resource label{font-size:8px}
 body.standard-mode .resource strong,body.player-mode .resource strong{font-size:16px!important}
 body.standard-mode .phone-card h2,body.player-mode .phone-card h2{font-size:20px!important}
 body.standard-mode .standard-board{height:clamp(305px,48dvh,450px)!important;min-height:275px!important}
 body.standard-mode .standard-atmosphere{right:134px!important}

}

@media (max-width:400px){
 body.standard-mode .topbar,body.lobby-mode .topbar,body.player-mode .topbar{grid-template-columns:minmax(0,1fr) auto}
 body.standard-mode .topbar .mobile-top-status,body.lobby-mode .topbar .mobile-top-status,body.player-mode .topbar .mobile-top-status{grid-column:1 / 2;align-items:flex-start;text-align:left}
 body.standard-mode .topbar .mobile-menu-toggle,body.lobby-mode .topbar .mobile-menu-toggle,body.player-mode .topbar .mobile-menu-toggle{grid-column:2 / 3;grid-row:1 / span 2}
 body.standard-mode .standard-board{height:clamp(285px,45dvh,410px)!important;min-height:255px!important}
 body.standard-mode .standard-atmosphere{right:128px!important}
 body.standard-mode .resource-bar,body.player-mode .resource-bar{gap:6px}
}


/* Expedition LIV: only the shared TV-party lobby displays the invite QR.
   Standard hosts and phone controllers never render the card. */
.tv-join-lobby{display:flex;align-items:center;gap:20px;margin:15px 0 17px;padding:15px;
 background:linear-gradient(120deg,#1a271eee,#101712f4);border:1px solid #ab956c6d;box-shadow:inset 0 0 22px #0005}
.tv-join-qr-link{display:block;flex:0 0 auto;padding:7px;background:white;line-height:0;border-radius:5px}
.tv-join-qr{display:block;width:144px;height:144px;max-width:100%;image-rendering:pixelated;object-fit:contain}
.tv-join-instructions{flex:1;min-width:0;color:#d8dac4}
.tv-join-instructions strong{display:block;font:700 clamp(15px,2vw,22px)/1.3 var(--cinzel);letter-spacing:.1em;color:#f0dda9;margin:8px 0}
.tv-join-instructions p{font:12px/1.6 var(--sans);color:#b7c2ad;margin:0 0 12px}
.tv-join-instructions p b{color:#eed8a6}
.tv-join-room{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;font:600 10px var(--cinzel);letter-spacing:.14em;color:#adbaa3}
.tv-join-room span{font:700 21px var(--cinzel);letter-spacing:.13em;color:#f0dfa9}
@media(max-width:700px){
 .tv-join-lobby{gap:12px;padding:11px}
 .tv-join-qr{width:104px;height:104px}

}


/* Expedition LV — scrollable lobby and mobile-first action hierarchy. */
.hero-growth{min-width:0}
.hero-growth-toggle{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none;min-height:46px;padding:0 2px;color:#decda5;font:600 11px/1.4 var(--cinzel);letter-spacing:.07em;touch-action:manipulation}
.hero-growth-toggle::-webkit-details-marker{display:none}
.hero-growth-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hero-growth-chevron{font-size:20px;line-height:1;transition:transform .2s ease}
.hero-growth[open] .hero-growth-chevron{transform:rotate(180deg)}
.hero-growth-content{padding-top:13px;border-top:1px solid #84947532}
.hero-growth-content .hint{font:11px/1.5 var(--sans);color:#909e91;margin:11px 0 0}
@media(max-width:1000px) and (pointer:coarse), (max-width:760px){
 body.standard-mode #standardPanel,body.player-mode #phonePanel{display:flex;flex-direction:column;gap:14px;min-width:0}
 body.standard-mode .story-interaction-panel,body.player-mode .story-interaction-panel{order:0;min-width:0}
 body.standard-mode .phone-hero,body.player-mode .phone-hero{order:1}
 body.standard-mode .inventory-section,body.player-mode .inventory-section{order:2}
 body.standard-mode .hero-growth,body.player-mode .hero-growth{order:3}
 body.standard-mode .standard-controls{margin-top:6px!important;padding-top:8px!important}
 body.standard-mode .standard-overview{padding:8px 9px!important;font-size:8px!important;letter-spacing:.055em!important}
 /* Let the JS position the decision HUD relative to the real header/board.
    Earlier important top rules incorrectly pinned it 70px from the screen. */
}


/* Expedition LVI — one flow-based lobby viewport on phones.
 * The sticky masthead MUST take up real space; the lobby starts beneath it.
 * A centered fixed overlay previously hid the chapter/room code behind the
 * masthead while reporting no overflow to the browser. Scroll only #lobby.
 */
@media (max-width:1000px) and (pointer:coarse), (max-width:760px){
 body.lobby-mode,body.lobby-mode #app{
  height:100dvh!important;min-height:0!important;overflow:hidden!important;
  overscroll-behavior:none!important;
 }
 body.lobby-mode #app{
  display:flex!important;flex-direction:column!important;
  width:100%;touch-action:pan-y!important;
 }
 body.lobby-mode .topbar{
  position:relative!important;inset:auto!important;flex:0 0 auto!important;
  width:100%;max-width:100%;z-index:50;
 }
 body.lobby-mode #lobby.lobby-cover{
  position:relative!important;inset:auto!important;flex:1 1 0!important;
  width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
  display:flex!important;flex-direction:column!important;justify-content:flex-start!important;
  align-items:center!important;overflow-x:hidden!important;overflow-y:auto!important;
  overscroll-behavior-y:contain!important;touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
  padding:12px 12px max(28px,calc(env(safe-area-inset-bottom) + 16px))!important;
  scroll-padding-top:12px;
 }
 body.lobby-mode #lobby.lobby-cover.hidden{display:none!important}
 body.lobby-mode #lobby .lobby-main{
  flex:0 0 auto!important;display:block!important;width:min(620px,100%)!important;
  height:auto!important;min-height:0!important;max-height:none!important;
  margin:0 auto!important;overflow:visible!important;touch-action:pan-y!important;
 }
}
/* Entering a lobby must never briefly paint the offscreen menu while the
 * mobile class is applied; its open animation remains intact. */
@media (max-width:760px){
 body.lobby-mode:not(.mobile-menu-open) .topbar .top-meta{
  transition:none!important;visibility:hidden!important;opacity:0!important;
  transform:translateX(104%)!important;
 }
}


/* EXP57: in-game AI recovery is explicit, non-blocking and only offered to
 * the room's current storyteller authority. All players see simple mode. */
.narrative-state{display:inline-flex;align-items:center;justify-content:center;color:#ddc998;border:1px solid #8f846042;background:#1a2119dd;white-space:nowrap;padding:9px 11px;font:600 9px/1.25 var(--cinzel);letter-spacing:.06em}
@media(max-width:760px){
 body.standard-mode .topbar .top-meta .narrative-state,body.player-mode .topbar .top-meta .narrative-state{display:flex;min-height:42px;white-space:normal;text-align:center;font-size:10px}
}


/* EXP58: readable AI companion seats, no gameplay AI or extra UI panels. */
.lobby-slot.bot-slot{background:linear-gradient(130deg,#253423bb,#151f18cc);border-color:#9aaa766b}
.bot-badge{font:700 8px/1.4 var(--sans);letter-spacing:.08em;color:#0e170e;background:#b1c28a;border-radius:3px;padding:2px 5px;white-space:nowrap}
.lobby-empty-icon{font:24px/1 var(--cinzel);color:#a7ad8d}
.add-bot{width:100%;min-height:34px;margin-top:4px;background:#243425;border:1px solid #9caa7d82;color:#e7d8b0;padding:6px 4px;font:700 9px var(--cinzel);letter-spacing:.06em}
.add-bot:hover,.add-bot:focus-visible{background:#374736;border-color:#e2c896}
@media(max-width:600px){.lobby-slot .add-bot{min-height:40px;font-size:10px}.lobby-slot{min-width:0;overflow-wrap:anywhere}}

/* Expedition LIX — board-bound story mirror and piece inspection.
 * Visuals do not capture touches or interrupt board movement/scrolling. */
.standard-board .scene-backdrop,#world .scene-backdrop{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .9s ease;overflow:hidden}
.scene-backdrop.visible{opacity:1}
.scene-backdrop img{width:100%;height:100%;object-fit:cover;object-position:center center;filter:brightness(.28) saturate(.72) blur(2px);transform:scale(1.05)}
.scene-backdrop:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(35,57,47,.05),rgba(6,12,9,.55) 56%,rgba(5,10,8,.92) 100%)}
.scene-backdrop:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,15,12,.20),rgba(4,9,7,.82));mix-blend-mode:multiply}
.scene-backdrop[data-environment="storm"] img,.scene-backdrop[data-environment="flooded"] img{filter:brightness(.23) saturate(.68) hue-rotate(10deg) blur(2px)}
.scene-backdrop[data-environment="haunted"] img,.scene-backdrop[data-environment="rift"] img{filter:brightness(.22) saturate(.72) hue-rotate(32deg) blur(2px)}
.standard-board .story-portal,#world .story-portal{position:absolute;z-index:8;pointer-events:none;transform:translate(-50%,-50%) scale(.76);opacity:0;transition:opacity .9s ease,transform 1.25s cubic-bezier(.2,.7,.18,1);isolation:isolate;aspect-ratio:1;filter:drop-shadow(0 0 18px #76aca164)}
.story-portal.visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.story-portal .portal-aura{position:absolute;inset:-27%;border-radius:50%;background:radial-gradient(circle,#477c854a 0,#577e8460 22%,#7d8f6c1b 47%,transparent 67%);animation:mirror-breathe 6s ease-in-out infinite}
.story-portal .portal-rim{position:absolute;inset:-7%;border:2px solid #8cbbabcc;border-radius:50%;box-shadow:0 0 16px #81eddf63,0 0 22px #0b1512 inset;background:repeating-conic-gradient(from 0deg,#a9e5bc82 0deg 1deg,transparent 2deg 13deg,#bcdcbf77 14deg 15deg,transparent 16deg 30deg);-webkit-mask:radial-gradient(circle,transparent 0 46%,#000 48% 51%,transparent 53%);mask:radial-gradient(circle,transparent 0 46%,#000 48% 51%,transparent 53%);animation:mirror-spin 35s linear infinite}
.story-portal .portal-rim-inner{inset:4%;border-color:#c6b8848a;animation-duration:23s;animation-direction:reverse;opacity:.68}
.story-portal .portal-window{position:absolute;inset:9%;border-radius:50%;overflow:hidden;border:2px solid #b4cfaca6;background:radial-gradient(circle,#233732,#0b1717);box-shadow:0 0 19px #4db5acb4,0 0 18px #97d4c733 inset}
.story-portal .portal-scenery{display:block;width:100%;height:100%;object-fit:cover;opacity:.84;filter:brightness(.82) contrast(1.1) saturate(.86);animation:mirror-drift 17s ease-in-out infinite alternate}
.story-portal .portal-window:after{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse,#4d9ca521 0,#223b432e 55%,#06100ed1 99%);box-shadow:inset 0 0 24px #75b6c36e;pointer-events:none}
.story-portal .portal-mist{position:absolute;inset:-40%;background:conic-gradient(from 40deg,transparent,#f3d19d2d,transparent,#c5eadd1e,transparent,#9b90cf3d,transparent);opacity:.56;filter:blur(10px);animation:mirror-spin 23s linear infinite;mix-blend-mode:screen}
.story-portal .portal-subject{position:absolute;left:19%;top:13%;width:62%;height:72%;object-fit:contain;filter:drop-shadow(0 3px 7px #030b09) drop-shadow(0 0 9px #8bc2c9a1);z-index:1}
.story-portal .portal-caption{position:absolute;z-index:3;left:-20%;right:-20%;bottom:-11%;font:600 clamp(9px,1.8vw,13px)/1.4 var(--cinzel);letter-spacing:.04em;color:#f8e6b6;text-shadow:0 2px 5px #000,0 0 10px #000,0 0 12px #000;text-align:center;overflow-wrap:anywhere;max-height:3.2em;overflow:hidden}
.story-portal[data-environment="haunted"] .portal-scenery{filter:sepia(.1) hue-rotate(35deg) saturate(.66) brightness(.74)}
.story-portal[data-environment="rift"] .portal-scenery{filter:hue-rotate(66deg) saturate(1.12) brightness(.74)}
.story-portal[data-environment="overgrown"] .portal-scenery,.story-portal[data-environment="sanctuary"] .portal-scenery{filter:sepia(.1) hue-rotate(-17deg) saturate(1.02) brightness(.78)}
.story-portal[data-environment="storm"] .portal-scenery,.story-portal[data-environment="flooded"] .portal-scenery{filter:hue-rotate(17deg) saturate(.78) brightness(.79)}
@keyframes mirror-spin{to{transform:rotate(360deg)}}
@keyframes mirror-breathe{50%{opacity:.7;transform:scale(1.12)}}
@keyframes mirror-drift{to{transform:scale(1.13) translateY(-3%)}}
.standard-board .board-piece-tooltip,#world .board-piece-tooltip{position:absolute;z-index:24;transform:translate(-50%,-100%);opacity:0;pointer-events:none;max-width:200px;min-width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:7px 10px;border-radius:8px;background:#101c16ef;border:1px solid #c4ac78a3;box-shadow:0 8px 22px #000b;color:#f1dfb7;font:600 11px/1.35 var(--cinzel);text-shadow:0 1px 5px #000;transition:opacity .12s}
.standard-board .board-piece-tooltip.visible,#world .board-piece-tooltip.visible{opacity:1}
/* The existing action panel gains a scene glimpse at zero extra layout height. */
.phone-card.story-card-has-scene{position:relative;isolation:isolate;overflow:hidden}
.phone-card.story-card-has-scene:before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:126px;background:linear-gradient(180deg,#101b1633,#101b16f5),var(--story-scene-image) center/cover no-repeat;opacity:.32;pointer-events:none;filter:saturate(.8)}
@media(max-width:760px){
 .story-portal .portal-caption{bottom:-14%;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.story-portal .portal-aura,.story-portal .portal-rim,.story-portal .portal-scenery,.story-portal .portal-mist{animation:none!important}.story-portal{transition:opacity .2s!important}}

/* EXP60: readable name, current level and HP on desktop hover and mobile hold. */
.standard-board .board-piece-tooltip,#world .board-piece-tooltip{
 max-width:min(224px,calc(100vw - 16px));width:max-content;min-width:145px;
 white-space:normal;overflow:visible;text-overflow:clip;text-align:center;
 padding:9px 12px;line-height:1.4
}
.board-piece-tooltip .piece-tooltip-name{display:block;color:#f4deb0;font:700 12px/1.4 var(--cinzel);overflow-wrap:anywhere}
.board-piece-tooltip .piece-tooltip-stats{display:block;margin-top:3px;color:#bcc9b5;font:600 10px/1.4 var(--sans)}
@media(max-width:400px){.standard-board .board-piece-tooltip,#world .board-piece-tooltip{min-width:125px;padding:8px 9px}}

/* EXP62: environment art behind transparent WebGL; never obscure the 3D board. */
#world,.standard-board{isolation:isolate}
#world>canvas:first-child,.standard-board>canvas:first-child{position:relative;z-index:2;background:transparent}
#world>.scene-backdrop,.standard-board>.scene-backdrop{z-index:0}
#world>.scene-backdrop img,.standard-board>.scene-backdrop img{filter:brightness(.38) saturate(.75) blur(1.5px);}
#world>.scene-backdrop:before,.standard-board>.scene-backdrop:before{z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 7%,rgba(5,10,8,.28) 55%,rgba(4,8,6,.75) 100%)}
@media(prefers-reduced-motion:reduce){.scene-backdrop,.story-portal{transition-duration:.01ms!important}}

/* Inspect option artwork inside the story orb; do not steal board gestures. */
.story-portal.choice-preview .portal-window{box-shadow:0 0 26px #8dd2bfa6,0 0 22px #d6c58e42 inset;transition:box-shadow .2s}
.story-portal.choice-preview .portal-caption{color:#fff1ca}

.class-tile{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:10px 12px;background:linear-gradient(180deg,#0c120f,#080c09)}
.class-tile .class-icon{font-size:22px;line-height:1;display:grid;place-items:center;width:30px;height:30px;border:1px solid #8e8a6a50;background:#131913;border-radius:999px;color:var(--gold2)}
.class-tile .class-title{padding:0;font:600 12px var(--cinzel);letter-spacing:.04em}
.class-tile img{display:none}
.avatar-builder{display:block;margin:8px 0 18px;padding:12px;border:1px solid #65735e45;background:#0b100dec}
.avatar-builder.compact{padding:10px 12px}
.avatar-preview-wrap small{display:none}
.avatar-preview{display:none!important}
.avatar-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:end}
.avatar-actions{display:flex;gap:8px;grid-column:1/-1}
.avatar-actions .btn{flex:1}
.avatar-note{display:block;grid-column:1/-1;color:#9fac9e;font-size:11px;line-height:1.5;margin-top:2px}
.player-class-icon{opacity:.9}
.mini-avatar{position:relative;width:52px;height:68px;flex:0 0 auto;filter:drop-shadow(0 8px 14px #0008)}
.avatar-preview .mini-avatar{width:90px;height:112px}
.mini-avatar .mini-base{position:absolute;left:8px;right:8px;bottom:4px;height:12px;border-radius:999px;background:linear-gradient(180deg,var(--accent),#2b302a);box-shadow:0 0 0 2px #111, inset 0 2px 0 #ffffff22}
.mini-avatar .mini-legs{position:absolute;left:18px;bottom:16px;width:16px;height:18px;background:linear-gradient(180deg,#2f312f,#171918);border-radius:7px 7px 5px 5px}
.mini-avatar .mini-torso{position:absolute;left:14px;bottom:30px;width:24px;height:20px;background:var(--accent);border-radius:8px 8px 6px 6px;box-shadow:inset 0 -8px 0 #0000001f}
.mini-avatar .mini-head{position:absolute;left:17px;bottom:48px;width:18px;height:18px;border-radius:50%;background:var(--skin)}
.mini-avatar .mini-hair{position:absolute;left:16px;bottom:56px;width:20px;height:10px;background:var(--hair);border-radius:10px 10px 4px 4px}
.mini-avatar .mini-arms{position:absolute;left:9px;bottom:35px;width:34px;height:8px}
.mini-avatar .mini-arms:before,.mini-avatar .mini-arms:after{content:'';position:absolute;top:0;width:10px;height:8px;background:var(--accent);border-radius:5px}
.mini-avatar .mini-arms:before{left:0;transform:rotate(20deg)}
.mini-avatar .mini-arms:after{right:0;transform:rotate(-20deg)}
.mini-avatar.feminine .mini-torso{left:15px;width:22px;border-radius:9px 9px 10px 10px}
.mini-avatar.feminine .mini-legs{left:19px;width:14px}
.mini-avatar.ranger .mini-torso{height:24px;bottom:28px;border-radius:8px;background:linear-gradient(180deg,var(--accent),#1c261f)}
.mini-avatar.ranger .mini-hair{height:12px;border-radius:10px 10px 8px 8px}
.mini-avatar.ranger .mini-arms:before,.mini-avatar.ranger .mini-arms:after{background:#243026}
.mini-avatar .mini-class{position:absolute;right:-2px;top:0;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#131913;border:1px solid #8e8a6a50;color:var(--gold2);font-size:12px;box-shadow:0 2px 8px #0007}
.phone-hero .mini-avatar{width:64px;height:84px}
@media(max-width:620px){.avatar-fields{grid-template-columns:1fr 1fr}.avatar-actions{flex-direction:column}}

.story-portal.empty .portal-scenery,.story-portal.empty .portal-subject{opacity:0!important}.story-portal.empty .portal-window{background:radial-gradient(circle at 50% 48%,#274847 0,#132626 20%,#091312 46%,#040909 72%,#010303 100%);box-shadow:0 0 22px #61b8b596,0 0 22px #0d2627 inset;animation:portal-vortex-pulse 5.5s ease-in-out infinite}.story-portal.empty .portal-window:before{content:"";position:absolute;inset:-20%;border-radius:50%;background:conic-gradient(from 0deg,#0000 0 16%,#5cc2c233 23%,#0000 31%,#8ce0e02b 44%,#0000 56%,#87a1ff24 70%,#0000 82%,#5cc2c21e 100%);filter:blur(8px);animation:vortex-spin 16s linear infinite;opacity:.9;mix-blend-mode:screen}.story-portal.empty .portal-mist{opacity:.78;filter:blur(12px) saturate(1.08)}@keyframes vortex-spin{from{transform:rotate(0deg) scale(1)}to{transform:rotate(360deg) scale(1.03)}}@keyframes portal-vortex-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}.story-portal .portal-object{position:absolute;z-index:3;inset:19%;display:grid;place-items:center;filter:drop-shadow(0 0 13px #93c9a270);animation:mirror-drift 12s ease-in-out infinite alternate}
.story-portal .portal-object[hidden],.story-portal.empty .portal-object{display:none!important}
.story-portal .portal-object svg{width:100%;height:100%;max-width:150px;max-height:150px}
@media(prefers-reduced-motion:reduce){.story-portal .portal-object{animation:none!important}}

.avatar-actions{grid-column:1/-1;display:flex;gap:7px;margin-top:2px}.avatar-actions .btn{padding:8px 10px;min-height:36px;font-size:9px;flex:1}

.class-tile .class-icon svg{display:block;width:22px;height:22px;stroke:currentColor;fill:none;color:var(--gold2)}
.class-tile.selected .class-icon svg{color:#efddaf}

.avatar-builder{display:none!important}

.story-portal.empty .portal-window{background:radial-gradient(circle at 50% 48%,#1b3134 0,#0b1618 24%,#040809 52%,#020405 78%,#010202 100%);box-shadow:0 0 22px #61b8b596,0 0 22px #0d2627 inset;overflow:hidden}
.story-portal.empty .portal-window::before{content:"";position:absolute;inset:-10%;border-radius:50%;background:url("./assets/ui/portal-vortex.jpg?v=EXP68-20261025") center/cover no-repeat;opacity:.98;filter:saturate(1.05) brightness(.92);animation:ironveinVortexSpin 18s linear infinite;mix-blend-mode:screen}
.story-portal.empty .portal-window::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.92) 0 19%,rgba(4,12,15,.20) 41%,rgba(112,222,240,.10) 64%,rgba(0,0,0,0) 100%);pointer-events:none}
.story-portal.empty .portal-mist{opacity:.46;filter:blur(12px) saturate(1.02)}
@keyframes ironveinVortexSpin{from{transform:rotate(0deg) scale(1.03)}to{transform:rotate(360deg) scale(1.03)}}

.npc-orb-note{font:12px/1.6 Georgia,serif;color:#c9b98f;padding:10px 12px;margin:10px 0;border:1px solid #8e8d6e44;background:#111c18b5;text-align:center}
.orb-combat-flight{position:fixed;z-index:120;display:grid;place-items:center;pointer-events:none;border:2px solid #94bbb1;border-radius:50%;background:radial-gradient(circle,#091b1d,#091519e8);box-shadow:0 0 28px #7fefdb9e;transition:transform .76s cubic-bezier(.15,.75,.23,1),opacity .75s ease;transform-origin:top left;color:#e6d2a1}
.orb-combat-flight span{font-size:36px}

.orb-combat-flight svg{width:75%;height:75%;filter:drop-shadow(0 0 10px #c8e5cf);color:#d8c69b}

/* EXP68: subdued amethyst void, independent fading silhouettes and captions. */
.story-portal{filter:drop-shadow(0 0 12px #51426f4d)}
.story-portal .portal-aura{background:radial-gradient(circle,#56356c35 0,#372d5440 25%,#322e4114 48%,transparent 68%)}
.story-portal .portal-rim{border-color:#8c79ac9c;box-shadow:0 0 13px #8e70bf50,0 0 16px #0b0c17 inset}
.story-portal .portal-rim-inner{border-color:#aa92bb70}
.story-portal .portal-window,.story-portal.empty .portal-window{background:#08050f;box-shadow:0 0 15px #8666a55f,0 0 20px #17101f inset;border-color:#86739b75}
/* Keep the vortex behind any reveal; the image spins continuously between choices. */
.story-portal .portal-window::before,.story-portal.empty .portal-window::before{content:"";position:absolute;inset:-12%;border-radius:50%;background:url("./assets/ui/portal-vortex.jpg?v=EXP68-20261025") center/cover no-repeat;opacity:.76;filter:hue-rotate(84deg) saturate(.68) brightness(.40) contrast(1.20);animation:ironveinVortexSpin 24s linear infinite;mix-blend-mode:screen}
.story-portal .portal-window::after,.story-portal.empty .portal-window::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,rgba(1,0,6,.96) 0 23%,rgba(9,2,19,.43) 50%,rgba(40,18,57,.17) 73%,rgba(0,0,0,.22) 100%);box-shadow:inset 0 0 26px #2610348c;pointer-events:none}
.story-portal .portal-mist,.story-portal.empty .portal-mist{background:conic-gradient(from 40deg,transparent,#6548791c,transparent,#a18cbc1c,transparent,#7c549d28,transparent);opacity:.32;mix-blend-mode:screen}
.story-portal .portal-reveals{position:absolute;inset:0;pointer-events:none;z-index:6}
.story-portal .portal-reveal-layer{position:absolute;inset:0;opacity:0;transform:scale(.96);transition:opacity .22s ease,transform .26s ease;pointer-events:none;will-change:opacity,transform}
.story-portal .portal-reveal-layer.is-current{opacity:1;transform:scale(1)}
.story-portal .portal-reveal-visual{position:absolute;inset:9%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.story-portal .portal-reveal-visual .portal-object{position:absolute;inset:19%;width:auto;height:auto;animation:none;filter:drop-shadow(0 0 8px #9d75bf55);display:grid!important;place-items:center;z-index:5}
.story-portal .portal-reveal-visual .portal-object svg{width:100%;height:100%;max-width:150px;max-height:150px}
.story-portal .portal-reveal-visual .portal-subject{position:absolute;left:17%;top:11%;width:66%;height:78%;object-fit:contain;z-index:4}
.story-portal .portal-reveal-caption{position:absolute;z-index:9;left:-20%;right:-20%;bottom:-11%;font:600 clamp(9px,1.8vw,13px)/1.4 var(--cinzel);letter-spacing:.04em;color:#e9d9c8;text-shadow:0 2px 6px #000,0 0 10px #000;text-align:center;overflow-wrap:anywhere;max-height:3.2em;overflow:hidden}
.story-portal.choice-preview .portal-window{box-shadow:0 0 15px #9c7aaf77,0 0 16px #47234c48 inset}
@media(prefers-reduced-motion:reduce){.story-portal .portal-window::before{animation:none!important}.story-portal .portal-reveal-layer{transition-duration:.01ms!important}}
/* NPC likeness rises into a battle portrait rather than blinking across panels. */
.orb-combat-flight{z-index:120;overflow:hidden;background:radial-gradient(circle,#180f25,#090711f5);border:1px solid #b49bc4a9;box-shadow:0 0 26px #9263b466;transition:transform .9s cubic-bezier(.2,.72,.24,1),opacity .9s ease,border-radius .9s ease,filter .9s ease;transform-origin:top left;filter:blur(0)}
.orb-combat-flight svg{width:72%;height:72%;color:#d6bfdc;filter:drop-shadow(0 0 13px #c6a4db88)}
@keyframes ironveinCombatArrive{0%{opacity:.10;filter:blur(6px) brightness(1.25)}60%{opacity:.55;filter:blur(2px) brightness(1.07)}100%{opacity:1;filter:none}}
.orb-combat-arriving{animation:ironveinCombatArrive .84s ease-out both}
@media(prefers-reduced-motion:reduce){.orb-combat-flight{display:none!important}.orb-combat-arriving{animation:none!important}}
/* EXP69: slightly stronger, location-specific tint, composited behind WebGL.
 * No extra artwork downloads and no layer above the board. */
#world>.scene-backdrop,.standard-board>.scene-backdrop{--ironvein-locale-wash:rgba(55,84,65,.13)}
#world>.scene-backdrop[data-environment="cavern"],.standard-board>.scene-backdrop[data-environment="cavern"]{--ironvein-locale-wash:rgba(49,91,72,.17)}
#world>.scene-backdrop[data-environment="flooded"],.standard-board>.scene-backdrop[data-environment="flooded"]{--ironvein-locale-wash:rgba(32,85,122,.19)}
#world>.scene-backdrop[data-environment="overgrown"],.standard-board>.scene-backdrop[data-environment="overgrown"]{--ironvein-locale-wash:rgba(45,104,51,.17)}
#world>.scene-backdrop[data-environment="haunted"],.standard-board>.scene-backdrop[data-environment="haunted"]{--ironvein-locale-wash:rgba(81,58,117,.18)}
#world>.scene-backdrop[data-environment="storm"],.standard-board>.scene-backdrop[data-environment="storm"]{--ironvein-locale-wash:rgba(57,83,139,.19)}
#world>.scene-backdrop[data-environment="ruins"],.standard-board>.scene-backdrop[data-environment="ruins"]{--ironvein-locale-wash:rgba(115,90,57,.18)}
#world>.scene-backdrop[data-environment="sanctuary"],.standard-board>.scene-backdrop[data-environment="sanctuary"]{--ironvein-locale-wash:rgba(76,118,88,.16)}
#world>.scene-backdrop[data-environment="rift"],.standard-board>.scene-backdrop[data-environment="rift"]{--ironvein-locale-wash:rgba(102,55,136,.19)}
#world>.scene-backdrop::after,.standard-board>.scene-backdrop::after{background:linear-gradient(180deg,var(--ironvein-locale-wash),transparent 72%),linear-gradient(180deg,rgba(8,15,12,.20),rgba(4,9,7,.82));mix-blend-mode:normal}
/* The world itself reacts gently to *important* spoken physical beats. */
.atmosphere-light.is-foley-pulse:not(.is-flashing){background:radial-gradient(ellipse at 52% 56%,rgba(183,143,219,.15),transparent 55%);animation:ironvein-narration-beat .48s ease-out both}
@keyframes ironvein-narration-beat{0%{opacity:0}28%{opacity:.33}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.atmosphere-light.is-foley-pulse{animation:none!important}}

/* EXP70: the mirror is a transient visual inspection, never idle board furniture. */
.standard-board .orb-focus-vignette,#world .orb-focus-vignette{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 47%,transparent 19%,rgba(9,4,17,.06) 35%,rgba(5,2,11,.34) 76%,rgba(2,1,8,.46) 100%);transition:opacity .55s cubic-bezier(.17,.7,.25,1)}
.orb-focus-vignette.visible{opacity:1}
.standard-board .story-portal,#world .story-portal{transition:opacity .53s cubic-bezier(.16,.65,.25,1),transform .7s cubic-bezier(.16,.8,.22,1);transform:translate(-50%,-50%) scale(.86);filter:drop-shadow(0 0 12px #65487755)}
.story-portal.visible{transform:translate(-50%,-50%) scale(1);opacity:1}
@media(prefers-reduced-motion:reduce){.orb-focus-vignette{transition:none!important}.story-portal{transition:opacity .12s!important}}

/* EXP71: the transparent 3D framebuffer exposes the current biome tint,
   never an unrelated hardcoded green wash during rolls or between scenes. */
#world,.standard-board{
 background:radial-gradient(ellipse at 50% 33%,var(--ironvein-ambient-lit,#183021) 0%,var(--ironvein-ambient-mid,#0b1610) 60%,#020504 100%);
 transition:background-color .7s ease;
}
@media(max-width:850px){
 body.standard-mode .standard-only{background:radial-gradient(ellipse at 50% 20%,var(--ironvein-ambient-lit,#183021),#050907 75%)!important}
}

/* EXP71: enemy-by-enemy targeting rather than a hidden automatic choice. */
.enemy-target-group{margin:14px 0 12px}
.enemy-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px;margin-top:9px}
.enemy-target{display:flex;flex-direction:column;gap:6px;text-align:left;padding:11px;background:#121a19;border:1px solid #6a736153;color:#e8dbc7;min-width:0;font:10px var(--sans)}
.enemy-target.selected{border-color:#c49f80;background:#29231f;box-shadow:0 0 0 1px #967b5e55}
.enemy-target:disabled{opacity:.42;cursor:default}
.enemy-target strong{font:600 11px var(--cinzel);color:#e6d6b8}
.enemy-target-bar{height:4px;background:#2d2422;width:100%}
.enemy-target-bar i{display:block;height:100%;background:linear-gradient(90deg,#76332b,#b77356)}
.combat-round-note{border-left:2px solid #b7897655;padding-left:10px;font-size:12px}

/* Standard multiplayer: the other players can follow exactly what their
 * companion or bot said and how the NPC answered. */
.npc-witness .npc-dialogue-log{display:grid;gap:10px;max-height:44vh;overflow-y:auto;margin:12px 0;padding:4px 0}
.npc-exchange{padding:10px 12px;border-left:2px solid #8d8467;border-radius:2px;background:rgba(10,19,17,.48)}
.npc-exchange p{margin:3px 0!important;line-height:1.48;overflow-wrap:anywhere}
.npc-exchange strong{color:#e0d0a8}.npc-exchange span{opacity:.7}