/* In-world HUD stays small; systems live in paused, keyboard/touch accessible panels. */
body[data-release] .menu-content{max-height:100dvh;overflow-y:auto;padding-top:32px;padding-bottom:32px}
body[data-release] .menu h1{font-size:64px;letter-spacing:8px}
body[data-release] .menu .secondary{min-height:44px;margin-top:7px}
.save-status{position:absolute;z-index:8;left:26px;bottom:100px;border:1px solid #cdb98655;background:#16352ee6;color:#dcebd6;font-size:12px;padding:8px 12px;min-height:40px;border-radius:3px;max-width:275px}
.save-status[data-kind=warning]{color:#ffdc99;border-color:#d6b575}
body[data-release] .save-status{min-height:40px}
body:not([data-mode=playing]) .save-status{right:24px;top:90px;left:auto;bottom:auto}
.account-overlay{position:absolute;inset:0;z-index:40;background:#102927d9;display:grid;place-items:center;padding:20px;overflow:auto}
.account-overlay[hidden]{display:none}.account-card{width:min(450px,100%);padding:30px;background:#173b34;border:1px solid #cdbd8d;box-shadow:0 12px 50px #051e2199}
.account-card h1{font-size:36px;font-weight:400;color:#f3dfb0;margin:14px 0}.account-card label{display:grid;gap:9px;margin:16px 0;color:#e3e9ce;font-size:14px}
.account-card input,.account-card select{min-height:48px;width:100%;padding:10px;background:#0c2725;border:1px solid #8aa795;color:#f9f0d8;font:inherit;border-radius:3px}
.form-message,.panel-message{color:#f1cf90;font-size:14px;line-height:1.5;min-height:21px}.form-message:empty{min-height:0}
.panel-message:empty{display:none}body[data-release] .top-tools[inert]{visibility:hidden}
.account-card button:disabled{opacity:.5;cursor:wait}
body[data-release] .story-card{width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 36px)}
body[data-release] #story-copy{overflow-y:auto;overscroll-behavior:contain;min-height:50px}
.camp-nav{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 14px}.camp-nav button,.small-button{border:1px solid #b5b38a66;border-radius:3px;background:#26493e;color:#ecdfba;font:inherit;font-size:14px;padding:10px 13px;min-height:44px;cursor:pointer;margin:4px 6px 4px 0}
.camp-nav button.selected{background:#d9cca3;color:#183c33;border-color:#f5dea0}
.resource-line{font:14px/1.8 system-ui,sans-serif;color:#e7cf92;border-block:1px solid #b2b88a44;padding:8px 0}
.camp-item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;border-bottom:1px solid #b2b88a44}.camp-item>div{min-width:0;flex:1}.camp-item>img{flex:none;width:64px;height:64px;object-fit:contain;border:1px solid #b5b38a66;background:#122f29}
.camp-item h3{font-size:17px;font-weight:500;color:#f0dfb7;margin:0 0 6px}.camp-item p{font:14px/1.7 system-ui,sans-serif;color:#cbd9c7;margin:4px 0}.ending{padding:20px;background:#365442;border-left:2px solid #e6cf94;font-size:17px;line-height:1.8}
body[data-release] .help-copy{font-size:14px;line-height:1.8}body[data-release] #story-choices{flex:none}
@media(max-width:600px){body[data-release] .menu h1{font-size:50px}body[data-release] .menu-content{padding-block:18px}body[data-release] .menu-description{font-size:14px}.save-status{left:15px;bottom:164px;padding:6px 9px;max-width:156px;font-size:11px}body:not([data-mode=playing]) .save-status{top:10px;right:12px;font-size:10px;min-height:30px}body[data-release] .story-card{padding:18px;max-height:calc(100dvh - 24px)}.camp-nav{gap:3px}.camp-nav button{padding:8px 10px;font-size:13px;margin:0}.camp-item{gap:10px}.camp-item>img{width:48px;height:48px}.camp-item h3{font-size:15px}.camp-item p{font-size:13px}.small-button{padding:8px;font-size:13px}.account-card{padding:23px}}
@media(max-height:520px) and (orientation:landscape){.save-status{left:15px;bottom:138px;font-size:11px}body:not([data-mode=playing]) .save-status{right:18px;top:18px}body[data-release] .story-card{padding:15px 22px}.account-overlay{place-items:start center}.account-card{padding:20px}body[data-release] .menu-content{width:min(480px,80vw);padding:18px 0}}
@media(max-width:360px) and (orientation:portrait){body[data-mode=playing] .save-status{max-width:110px;font-size:10px;left:15px}}
/* Leave a usable item viewport on short phones, not only a heading and tabs. */
@media(max-height:520px) and (orientation:landscape){
 body[data-release] .story-panel:not([data-panel=dialogue]) #story-speaker{display:none}
 body[data-release] .story-panel:not([data-panel=dialogue]) .story-card h2{font-size:22px;margin:0 0 4px}
 body[data-release] .camp-nav{flex-wrap:nowrap;overflow-x:auto;margin:0 0 4px;gap:4px}
 body[data-release] .camp-nav button{flex:none;margin:0;padding:8px 12px}
 body[data-release] .story-card .resource-line{font:13px/1.6 system-ui,sans-serif;margin:4px 0;padding:3px 0}
 body[data-release] .camp-item{padding:10px 0;gap:12px}
 body[data-release] .camp-item p{font:13px/1.5 system-ui,sans-serif;margin:4px 0}
 body[data-release] .story-card .secondary{margin-top:8px}
}