/* One HUD composition on every device: status left, menus/map/materials right, bar below. */
#hud{--slot:48px;--slot-gap:5px;--bar-width:419px;--bar-shift:0px}
#hud .top-actions>button,#hud .top-actions #openInventory,#hud .top-actions #openAttributes,#hud .top-actions #openBestiary,#hud .top-actions #openGroup,#hud .top-actions #openHelp,#hud .top-actions #mobileMenuButton,#hud .top-actions #settings{display:grid;place-items:center}
#hud .top-actions>button{width:44px;min-width:44px;height:44px;min-height:44px;padding:5px}
#hud #hotbar{left:calc(50% - var(--bar-shift));bottom:calc(env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);width:var(--bar-width);max-width:none}
#hud #hotbarSlots{grid-template-columns:repeat(8,var(--slot));gap:var(--slot-gap);overflow:visible}
#hud .hotbar-slot{width:var(--slot);min-width:0;display:grid;place-items:center}
#hud .progress-panel{left:calc(50% - var(--bar-shift));bottom:calc(env(safe-area-inset-bottom,0px) + 78px)}
#hud .minimap-panel{display:block;top:72px;right:14px;bottom:auto;left:auto}
#hud #resourceHud{top:auto;left:auto;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:112px;grid-template-columns:1fr;transform:none}
#hud .world-status{left:14px;right:auto;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:auto;max-width:none;transform:none;display:flex}
#hud .world-status #period{display:inline}
.touch-ui #hud .topbar{padding-top:max(12px,env(safe-area-inset-top,0px));padding-right:max(12px,env(safe-area-inset-right,0px))}
#hud #mobileChoices{display:none}
@media(max-width:1050px){#hud{--slot:43px;--slot-gap:4px;--bar-width:372px}html:not(.touch-ui) #hud .bottom-hud .actionbar,.touch-ui #touchSkill{left:calc(50% + 194px)}#hud .world-status{font-size:10px;padding:4px 7px}}
@media(max-width:900px), (max-height:600px){
 #hud{--slot:42px;--slot-gap:4px;--bar-width:364px}
 #hud .topbar{padding:8px}#hud .top-actions{gap:4px}#hud .top-actions>button{width:44px;min-width:44px;height:44px;min-height:44px}#hud .top-actions .ui-icon{width:29px;height:29px}
 #hud .vitals{top:8px;left:8px;width:180px;padding:7px 9px}#hud .identity{gap:6px;min-height:35px;margin-bottom:5px}#hud .identity canvas{width:38px;height:38px}#hud .identity h1{font-size:15px}#hud .identity span,#hud .identity small{font-size:10px}#hud .bar-label{font-size:10px}
 #hud .minimap-panel{top:62px;right:8px;width:92px;padding:4px}#hud .minimap-panel canvas{width:80px;height:80px}#hud .minimap-panel>span{display:none}
 #hud .live-ranking{display:block;right:8px;top:156px;width:92px;padding:5px;max-height:66px;overflow:hidden}#hud .live-ranking h2{font-size:9px;margin-bottom:4px}#hud .live-ranking li{font-size:10px;padding:1px 0}#hud .live-ranking li b{font-size:9px}#hud .live-ranking li span{max-width:47px}
 #hud #resourceHud{right:8px;bottom:8px;width:88px;gap:3px}#hud .resource-row{min-height:27px;padding:2px 5px;gap:4px}#hud .resource-row .item-art{width:23px;height:23px}#hud .resource-row b{font-size:12px}
 #hud #hotbar{bottom:8px}#hud .hotbar-slot{height:50px;min-height:50px;padding:8px 2px 2px;border-radius:9px}#hud .hotbar-slot .item-art{width:34px;height:34px}#hud .hotbar-slot kbd{font-size:9px}
 #hud .progress-panel{bottom:66px;width:290px}#hud .progress-copy b,#hud .progress-copy span{font-size:10px}
 html:not(.touch-ui) #hud .bottom-hud .actionbar,.touch-ui #touchSkill{left:calc(50% + 190px);bottom:8px}#hud .actionbar button,.touch-ui #touchSkill{width:44px;height:50px;min-height:50px}
 #hud #evolutionStrip{top:110px;left:8px}#hud #attributeNotice{min-height:38px;padding:5px 8px;font-size:11px}#quickItems{gap:4px;max-width:198px}#quickItems button{width:62px;min-height:68px}#quickItems .item-art{width:32px;height:32px}#quickItems button span{font-size:10px}#itemChoiceStrip>p{font-size:10px}
 #hud .world-status{left:8px;bottom:8px;font-size:9px;min-height:23px;gap:4px}#hud .world-status .separator,#hud .world-status #period{display:none}
 #hud .bottom-hud #nearHelp{bottom:104px!important;max-width:270px}#hud #trainingTools{bottom:38px}
}
@media(max-height:450px){#hud .live-ranking{top:148px;max-height:57px}#hud #resourceHud{gap:2px}#hud .resource-row{min-height:25px}#hud .resource-row .item-art{width:21px;height:21px}#hud .minimap-panel{width:84px}#hud .minimap-panel canvas{width:72px;height:72px}#hud .world-status{max-width:124px}}
@media(max-width:680px){#hud{--slot:38px;--slot-gap:3px;--bar-width:325px;--bar-shift:28px}#hud .top-actions{gap:2px}#hud .top-actions>button{padding:3px}#hud .top-actions .ui-icon{width:27px;height:27px}#hud .vitals{width:164px}#hud .progress-panel{width:270px}#hud .hotbar-slot .item-art{width:31px;height:31px}html:not(.touch-ui) #hud .bottom-hud .actionbar,.touch-ui #touchSkill{left:calc(50% + 143px)}#hud #resourceHud{width:74px}#hud .minimap-panel{width:76px}#hud .minimap-panel canvas{width:64px;height:64px}#quickItems button{width:52px;min-height:64px}#quickItems{max-width:166px}}
/* Keep every menu available even where the legacy compact stylesheet hid small buttons. */
#hud .topbar .top-actions #openAttributes,#hud .topbar .top-actions #openBestiary,#hud .topbar .top-actions #openGroup{display:grid}
.attribute-row b,.attribute-row small{display:block}
@media(max-height:350px){#hud .live-ranking{top:142px;max-height:30px;padding:3px 5px}#hud .live-ranking h2{display:none}#hud .live-ranking li:not(:first-child){display:none}}
#hud .progress-panel{display:block;max-width:none}#hud .progress-copy{display:flex;justify-content:space-between;align-items:center;gap:8px}#hud .bar-label{margin-left:0}
@media(orientation:landscape) and (max-height:450px) and (min-width:500px){
 #lobby{display:grid;grid-template-columns:minmax(120px,190px) minmax(330px,510px);gap:14px;padding:10px;align-items:center;justify-content:center}
 .lobby-world>h1{font-size:38px}.lobby-world h1 span{font-size:11px}.world-facts{display:flex;flex-direction:column;gap:4px;font-size:10px}
 .entry-panel{padding:9px 12px;gap:4px 8px}.entry-panel h2{display:none}.entry-panel>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.entry-panel #nickname{min-height:34px;padding:5px;font-size:15px}.entry-panel fieldset{margin:0}.entry-panel legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.entry-panel .starter-choice{min-height:56px;padding:2px}.entry-panel .starter-choice canvas{width:39px;height:34px}.entry-panel #starterChoices .starter-choice b{font-size:10px}.entry-panel .starter-details{margin:0;min-height:0}.entry-panel .starter-details>b{display:none}.entry-panel .starter-details .strength{font-size:10px!important;line-height:1.3!important;-webkit-line-clamp:2}
 .entry-panel #playButton{min-height:36px;font-size:18px;padding:4px}.entry-panel #lobbyShop,.entry-panel #lobbyOptions{min-height:32px;font-size:11px;padding:2px 4px}.entry-panel #lobbyShop .ui-icon{width:24px;height:24px}.entry-panel #lobbyBestiary{min-height:21px;font-size:11px}.entry-footer,.entry-footer .text-button{min-height:21px;font-size:10px}.entry-panel #lobbyControlHint,.lobby-bottom{display:none}
}

/* Choices follow the actual top menu row, centred across the viewport. */
#hud .topbar{left:0;right:0;width:100%}
#hud .topbar>#itemChoiceStrip{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-50%);width:max-content;max-width:calc(100vw - 24px);text-align:center;background:none;border:0;border-radius:0;padding:0}
#hud #quickItems{max-width:none;flex-wrap:nowrap;justify-content:center;gap:14px}
#hud #quickItems button{width:80px;min-height:86px;font-size:12px;pointer-events:auto}
@media(max-width:900px),(max-height:600px){#hud #quickItems button{width:68px;min-height:76px}#hud #quickItems button span{font-size:11px}#hud #quickItems .item-art{width:36px;height:36px}}
@media(max-width:680px){#hud #attributeNotice{max-width:164px;white-space:normal}#hud #quickItems{gap:12px}#hud #quickItems button{width:64px}}
@media(max-height:350px){#hud #quickItems button{min-height:64px}#hud #quickItems .item-art{width:30px;height:30px}#hud #quickItems button span{font-size:10px}}

/* Combat adds a line to the status panel; attribute points follow it in normal flow. */
#hud .status-stack{position:fixed;top:12px;left:12px;display:grid;gap:6px;width:max-content}
#hud .status-stack>.vitals{position:static;inset:auto}
#hud .status-stack>#evolutionStrip{position:static;inset:auto;transform:none;text-align:left}
@media(max-width:900px),(max-height:600px){#hud .status-stack{top:8px;left:8px}}

/* Account access stays visible above the lobby instead of inside the play form. */
#lobby{padding-top:max(76px,calc(env(safe-area-inset-top) + 64px))}
.lobby-account{position:absolute;top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:flex;align-items:center;justify-content:flex-end;gap:10px;z-index:1;max-width:calc(100% - 24px)}
.lobby-account>span{font-size:12px;color:#dfd1b0;margin-right:4px;white-space:nowrap}
.lobby-account>button{width:auto;flex:none;min-height:44px;min-width:88px;margin:0;padding:9px 18px;font:700 15px/1.2 Figtree,sans-serif;white-space:nowrap;border-radius:10px}
.lobby-account>.secondary{background:#342e27;border:2px solid #8d7956;color:#fff1d2}
.lobby-account>.primary{background:#edc36d;border:2px solid #f7dba0;color:#302b25}
.lobby-account>button:hover:not(:disabled){filter:brightness(1.1)}
.lobby-account>button:focus-visible{outline:3px solid #fff1d2;outline-offset:4px}
#loginDialog{width:min(440px,calc(100vw - 24px))}
#loginDialog .dialog-head{align-items:flex-start;gap:16px}
#loginDialog h2{font-size:28px;line-height:1.1}
#loginDescription{color:#dfd1b0;font-size:14px;line-height:1.5}
#loginForm{display:grid;gap:10px}
#loginForm input,#loginForm button{width:100%;min-height:46px;margin:0}
#loginStatus:empty{display:none}
@media(max-width:800px){.lobby-account>span{display:none}.lobby-account{top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right))}}
@media(max-width:520px){#lobby{padding-top:max(68px,calc(env(safe-area-inset-top) + 60px))}.lobby-account{gap:8px}.lobby-account>button{font-size:14px;padding:9px 14px}#loginDialog h2{font-size:25px}}
@media(orientation:landscape) and (max-height:450px) and (min-width:500px){#lobby{padding:64px 10px 8px}.lobby-account{top:max(8px,env(safe-area-inset-top))}}
@media(max-height:350px){#lobby{overflow-y:auto}.lobby-account{position:fixed}#loginDialog{max-height:calc(100dvh - 16px);overflow-y:auto}}
/* Account forms share the game's flat panels and native password-manager inputs. */
#loginDialog .auth-modes{display:flex;gap:8px;margin:4px 0 14px}
#loginDialog .auth-modes button{flex:1;min-height:44px;padding:8px;margin:0;border:2px solid #756244;border-radius:9px;background:#484435;color:#fff1d2;font-size:14px;font-weight:700}
#loginDialog .auth-modes button[aria-pressed="true"]{background:#edc36d;border-color:#f7dba0;color:#302b25}
#loginDialog form,#loginDialog .auth-field{display:grid;gap:8px}
#loginDialog input:not([type="checkbox"]){width:100%;min-height:46px;font-size:16px;margin:0}
#loginDialog form>.primary{min-height:46px;width:100%;margin-top:4px}
#loginDialog .auth-field small{color:#dfd1b0;font-size:12px}
#loginDialog .auth-check{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;font-size:13px;color:#dfd1b0;cursor:pointer}
#loginDialog .auth-check input{width:18px;height:18px;min-height:0;margin:0;accent-color:#edc36d}
#loginDialog .text-button{min-height:44px;margin:0;padding:8px 4px;font-size:13px}
#loginDialog .auth-code-actions{display:flex;justify-content:space-between;gap:12px}
#loginDialog #accountCode{font-size:28px;font-weight:700;letter-spacing:.25em;text-align:center;font-variant-numeric:tabular-nums}
#loginDialog #loginStatus:not(:empty){margin:14px 0 0;font-size:13px;line-height:1.45;color:#dfd1b0}
#loginDialog #loginStatus.auth-error{color:#ffc3ac}
#loginDialog #confirmEmailAction{min-height:44px;width:100%;margin-top:12px}
#loginDialog [hidden]{display:none!important}
#loginDialog form label{margin:0}
#loginDialog #loginDescription{margin:12px 0 18px}
#loginDialog #loginDescription,#loginDialog #loginStatus{overflow-wrap:anywhere}
@media(orientation:landscape) and (max-height:450px){
 #loginDialog:has(#codeForm:not([hidden])){width:min(560px,calc(100vw - 24px))}
 #loginDialog #codeForm{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
 #loginDialog #codeForm>label,#loginDialog .auth-code-actions{grid-column:1/-1}
 #loginDialog #codeForm>.primary{margin:0;min-height:54px;font-size:18px}
 #loginDialog #accountCode{min-height:54px;padding:8px;font-size:25px}
}