/* Arun: top navigation and compact controls, with room for the world. */
:root{--gold:#dfc383;--panel:linear-gradient(145deg,#123f3ae8,#102b2ae8);--edge:12px;--nav-height:66px;--skill-size:42px}
#topActions{z-index:10;top:calc(env(safe-area-inset-top) + 8px);left:max(var(--edge),env(safe-area-inset-left));right:max(var(--edge),env(safe-area-inset-right));transform:none;justify-content:center;gap:8px;padding:7px 10px;border:1px solid #dfc38388;border-radius:16px;background:var(--panel);box-shadow:0 4px 18px #0004;overflow-x:auto;scrollbar-width:none;overscroll-behavior:contain}
#topActions::-webkit-scrollbar{display:none}
#topActions button{flex:0 0 68px;min-width:0;height:49px;padding:3px;gap:3px;border:0;border-radius:8px;background:transparent;box-shadow:none}
#topActions button:hover{background:#edcf8520}
#topActions span:not(.menu-icon){display:block;font-size:11px;line-height:14px}
.menu-icon{width:29px;height:29px;border:1px solid #cfb27199;border-radius:8px;background:linear-gradient(145deg,#496854,#172d2c);box-shadow:inset 0 1px #fff3}
.menu-icon svg{width:19px;height:19px}
#topActions #heroButton .menu-icon{background:url(assets/portrait.webp) center 20%/cover}
#topActions #heroButton svg{visibility:hidden}
#hud{z-index:5;top:calc(env(safe-area-inset-top) + var(--nav-height) + 17px);left:max(var(--edge),env(safe-area-inset-left));padding:8px;gap:9px;border:1px solid #dfc383a0;border-radius:14px;background:var(--panel);filter:none;box-shadow:0 4px 18px #0004}
#portrait{width:55px;height:65px;border-radius:9px;padding:2px}
.vitals{width:222px;padding:1px 2px 0;background:none;border:0;border-radius:0}
.hero-name{font-size:12px}.hero-name small{font-size:10px}
.bar{height:16px;border-color:#d4d8af66;border-radius:8px;margin:4px 0}.mp{height:14px}.bar span,.mp span{font-size:10px}
.bar i{background:linear-gradient(#ffb4ad,#e76065 50%,#a3304d)}.mp i{background:linear-gradient(#c5f5ff,#4fc9ec 50%,#267fa8)}
.hud-meta{font-size:10px;gap:10px;margin-top:3px}.hud-meta button{width:19px;height:18px}.hud-meta svg{width:15px;height:15px}
#cloudStatus{font-size:9px;color:#a2ccba;white-space:nowrap}#cloudStatus[data-state=error]{color:#ffc996}
#buffs{font-size:10px;max-width:210px}
#minimapWrap{z-index:4;top:calc(env(safe-area-inset-top) + var(--nav-height) + 17px);right:max(var(--edge),env(safe-area-inset-right));width:144px;height:96px;border:1px solid #dfc383bb;border-radius:13px;background:#102d2cd9;box-shadow:0 4px 18px #0004}
#minimapWrap b{left:calc(50% - 4px)}
#quest{z-index:3;top:calc(env(safe-area-inset-top) + var(--nav-height) + 120px);left:max(var(--edge),env(safe-area-inset-left));right:auto;width:245px;padding:7px 10px;border:1px solid #dfc38366;border-radius:10px;box-shadow:none}
.quest-heading{font-size:11px}.quest-heading span{font-size:16px}#quest p{font-size:10px;margin:4px 0;line-height:1.5}
#questLines p.done{display:none}#questLines[hidden]{display:none}
#target{top:calc(env(safe-area-inset-top) + var(--nav-height) + 24px);left:50%;transform:translateX(-50%);width:220px;font-size:12px;text-align:center}
#toast{z-index:30;top:calc(env(safe-area-inset-top) + var(--nav-height) + 120px);max-width:80vw;font-size:12px;border-radius:20px;background:#123e37ed}
#bottom{z-index:5;left:50%;right:auto;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 12px);width:max-content;max-width:calc(100vw - 24px)}
.combat-dock{gap:8px;padding:5px;background:#102e2c9c;border:1px solid #dfc38370;border-radius:12px;box-shadow:0 4px 18px #0004}
.skill-row{grid-template-columns:repeat(16,var(--skill-size));gap:4px}
.skill,.utility-row .skill{width:var(--skill-size);height:var(--skill-size);padding:2px;border-radius:9px;border-color:#d6b87eaa;box-shadow:inset 0 0 0 1px #101f1d,0 2px 5px #0005;background:#16342b}
.skill>.ability-art,.utility-row .skill>.ability-art{width:100%;height:100%;border-radius:6px;margin:0}
.skill small,.utility-row .skill small{display:none}
.skill kbd{left:2px;top:auto;bottom:1px;padding:0 2px;font-size:9px;background:#102c29db}
.skill.locked:after{content:'◆';font-size:10px;left:auto;right:3px;top:3px}
.skill.locked .lock-mark{bottom:1px;left:auto;right:2px;padding:0 2px;font-size:8px;width:auto;background:#071c1ad9}
.skill.locked{opacity:.65;filter:saturate(.35)}
.timer{top:9px;font-size:16px}
.utility-row{position:static;flex-direction:row;gap:4px}
.auto{width:var(--skill-size);height:var(--skill-size);margin:0;background:#123c34;box-shadow:none}.auto>span,.auto svg{width:20px;height:20px}.auto small{font-size:8px}.auto kbd{display:none}
#experience{margin:0 5px 5px;font-size:10px;min-height:12px;gap:6px}#experience>div{min-width:20px;height:4px}#xpLabel{display:inline}
#joystick{z-index:5;left:max(22px,env(safe-area-inset-left));bottom:calc(env(safe-area-inset-bottom) + 24px);width:94px;height:94px;border:1px solid #e5cc8990;background:#12382c50;box-shadow:inset 0 0 18px #0003}
#joystick i{width:36px;height:36px;left:calc(50% - 18px);top:calc(50% - 18px);border:1px solid #ecd9a0aa;background:radial-gradient(at 35% 25%,#f5dda1,#b38b46);box-shadow:0 3px 8px #0005}
#joystick span{font-size:10px;bottom:-16px}
#interact{z-index:6;bottom:calc(env(safe-area-inset-bottom) + 94px);left:50%;transform:translateX(-50%);max-width:55vw;border-radius:25px;border-color:#e6d19a;background:linear-gradient(#57bca6,#237d6c);font-size:12px;padding:8px 16px;box-shadow:0 3px 14px #0005}
#fullscreen{display:block;z-index:6;top:auto;bottom:calc(env(safe-area-inset-bottom) + 22px);right:max(var(--edge),env(safe-area-inset-right));width:32px;height:32px;border-radius:50%;background:#163e35bb}
#hint{display:none}
#panel{z-index:40;width:min(660px,94vw);max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 30px);padding:25px 20px;background:linear-gradient(145deg,#204a3d,#102c28);border:1px solid #dfc383;border-radius:16px;box-shadow:0 22px 90px #0008}
dialog h2{font-size:21px}.panel-kicker{font-size:10px;color:#b8d5bb}dialog p{font-size:13px}.ability-card,.creature-card,.inventory .item{background:#092a2580;border-color:#becda62c}.ability-card small,.creature-card small{color:#afcebf}.ability-card h3,.creature-card h3{color:#ead5a0}.stat-grid>div{background:#0e322c;border-color:#becda630}.character-sheet{background:#10342d80}.setting input{max-width:45%}.map-panel{display:block;width:100%;height:auto;aspect-ratio:72/64;max-height:55dvh;object-fit:contain;border:1px solid #dfc38388;border-radius:10px;cursor:crosshair}.menu-copy{line-height:1.7}
@media(pointer:coarse){#joystick{display:block}}
@media(orientation:portrait){:root{--edge:8px;--nav-height:62px;--skill-size:38px}#topActions{gap:2px;padding:5px 4px;border-radius:13px;justify-content:space-between}#topActions button{flex:0 0 calc((100% - 18px)/10);height:48px;gap:3px}#topActions span:not(.menu-icon){font-size:9px}.menu-icon{width:26px;height:26px}.menu-icon svg{width:17px;height:17px}#hud{padding:6px;gap:6px;max-width:calc(100vw - 127px)}#portrait{width:42px;height:54px}.vitals{width:clamp(122px,35vw,184px)}.hero-name small{display:none}.hero-name{font-size:10px}.hud-meta{gap:6px;font-size:9px}#fps{display:none}#minimapWrap{width:105px;height:82px}#quest{width:195px;top:calc(env(safe-area-inset-top) + var(--nav-height) + 107px)}#target{top:calc(env(safe-area-inset-top) + var(--nav-height) + 180px);width:180px;font-size:11px}#toast{top:calc(env(safe-area-inset-top) + var(--nav-height) + 155px);max-width:92vw}#bottom{left:auto;right:max(var(--edge),env(safe-area-inset-right));transform:none;bottom:calc(env(safe-area-inset-bottom) + 20px);max-width:52vw}.combat-dock{padding:4px;gap:4px;align-items:flex-start;flex-direction:column}.skill-row{grid-template-columns:repeat(4,var(--skill-size));gap:4px}.utility-row{align-self:flex-end}.utility-row .skill{order:0}.auto{order:1}#experience{font-size:9px;margin:0 2px 4px}#xpLabel{display:none}#joystick{bottom:calc(env(safe-area-inset-bottom) + 34px);width:92px;height:92px;left:18px}#interact{bottom:calc(env(safe-area-inset-bottom) + 265px);left:50%;max-width:85vw}#fullscreen{right:auto;left:47px;bottom:calc(env(safe-area-inset-bottom) + 147px)}.ability-list,.creature-list{grid-template-columns:1fr}.ability-card p{font-size:12px}.character-sheet img{width:80px;height:96px}.character-sheet{gap:14px}.character-sheet p{font-size:12px}.stat-grid{gap:5px}.stat-grid>div{padding:8px}.stat-grid b{font-size:17px}}
@media(orientation:portrait) and (max-width:360px){:root{--skill-size:34px}.vitals{width:122px}.hero-name{font-size:9px}#topActions span:not(.menu-icon){font-size:8px}#cloudStatus{font-size:8px}.hud-meta{gap:4px}#quest{width:180px}#minimapWrap{width:94px}.inventory{grid-template-columns:repeat(2,1fr)}}
@media(orientation:landscape) and (max-width:1100px){:root{--nav-height:54px;--skill-size:36px}#topActions{padding:4px 8px;gap:4px}#topActions button{flex-basis:58px;height:43px}.menu-icon{width:25px;height:25px}#topActions span:not(.menu-icon){font-size:10px}#hud{padding:5px;gap:6px}#portrait{width:41px;height:49px}.vitals{width:170px}.hero-name{font-size:10px}.hero-name small{display:none}.bar{height:13px}.mp{height:12px}#buffs{display:none}#minimapWrap{width:112px;height:72px}#quest{top:calc(env(safe-area-inset-top) + var(--nav-height) + 92px);width:212px;padding:4px 8px}#quest p{font-size:9px}.quest-heading{font-size:10px}#target{top:calc(env(safe-area-inset-top) + var(--nav-height) + 15px);width:190px}#bottom{left:auto;right:max(var(--edge),env(safe-area-inset-right));transform:none}.skill-row{grid-template-columns:repeat(8,var(--skill-size));gap:3px}.utility-row{flex-direction:column;gap:3px}.combat-dock{gap:5px;padding:4px}#interact{bottom:calc(env(safe-area-inset-bottom) + 110px)}#fullscreen{bottom:calc(env(safe-area-inset-bottom) + 122px)}#joystick{width:76px;height:76px;bottom:calc(env(safe-area-inset-bottom) + 18px)}#toast{top:calc(env(safe-area-inset-top) + var(--nav-height) + 98px)}.ability-list,.creature-list{grid-template-columns:1fr 1fr}}
@media(orientation:landscape) and (max-height:380px){:root{--skill-size:32px;--nav-height:48px}#topActions button{height:37px}.menu-icon{width:22px;height:22px}.menu-icon svg{width:15px;height:15px}#topActions span:not(.menu-icon){font-size:9px}#questLines{display:none}#quest{width:200px}#hud{top:calc(env(safe-area-inset-top) + 63px)}#minimapWrap{top:calc(env(safe-area-inset-top) + 63px)}#joystick{width:64px;height:64px}#joystick i{width:30px;height:30px;left:calc(50% - 15px);top:calc(50% - 15px)}#interact{bottom:calc(env(safe-area-inset-bottom) + 100px);padding:6px 14px;font-size:11px}}
/* Three narrow columns follow the reference in portrait. */
@media(orientation:portrait){:root{--skill-size:36px}.skill-row{grid-template-columns:repeat(3,var(--skill-size))}#bottom{max-width:42vw}#interact{bottom:calc(env(safe-area-inset-bottom) + 307px)}}
#topActions .menu-icon{display:flex}
@media(orientation:portrait){#topActions button{flex:0 0 40px}#topActions{justify-content:flex-start;gap:3px}#topActions span:not(.menu-icon){font-size:9px}#questLines{max-height:44px;overflow:hidden}#quest p{line-height:1.4}}

@media(orientation:landscape) and (max-width:1100px){#fps{display:none}#questLines{max-height:44px;overflow:hidden}}
/* Keep the quest card clear of the player panel on short screens. */
@media(orientation:landscape) and (max-width:1100px){#quest{top:calc(env(safe-area-inset-top) + var(--nav-height) + 102px)}}
.account-box{padding:12px 14px;margin:0 0 18px;border:1px solid #d6bc7f66;border-radius:12px;background:#103b3080}.account-box p{margin:0 0 8px;font-size:12px;overflow-wrap:anywhere}button.google-login{background:#f8f9fa;color:#24342e;border-color:#d7dfd9;font-weight:bold}button.google-login:disabled{opacity:.45;cursor:wait}