/* Viewport pixels map uniformly to world pixels. No element or canvas scaling. */
html[data-layout] main.game{position:fixed;top:var(--viewport97-top,0px);left:var(--viewport97-left,0px);width:var(--viewport97-width,100%);height:var(--viewport97-height,100dvh);margin:0}
html[data-layout="PC_WEB_WIDE"] main.game{max-width:none;--chat-inset:0px;--pc-edge:20px}
html[data-layout] #world{position:absolute;inset:0;width:100%;height:100%}
#fullscreen97{position:absolute;right:20px;top:282px;z-index:13;min-height:40px;min-width:96px;padding:8px 12px;border:2px solid #fff4ce;border-radius:14px;background:#245d51;color:#fff;font:700 13px var(--mandu-font);cursor:pointer}
#fullscreen97[hidden],.game:not(.playing)>#fullscreen97{display:none}
html[data-layout="PC_WEB_WIDE"] .game.inDungeon>#fullscreen97{visibility:visible!important;z-index:156;top:auto;right:auto;left:20px;bottom:20px}
#layoutStatus97{position:absolute;bottom:112px;left:50%;translate:-50% 0;z-index:140;color:#fff;background:#253c36e8;border-radius:12px;max-width:70%;text-align:center;font:14px/1.5 sans-serif}
#layoutStatus97:empty{display:none}

/* PC edges and bottom shortcut bar; original nodes and handlers are retained. */
html[data-layout="PC_WEB_WIDE"] .game .hud{inset:18px 172px auto 20px;gap:24px}
html[data-layout="PC_WEB_WIDE"] .game #profileCard{width:304px;max-width:34%;box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"] .game .hud .zone{width:304px;max-width:34%;margin:0;box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"] .game .mini{top:18px;right:20px;width:132px;height:132px;box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"] .game .quest{top:168px;left:20px;width:304px;max-width:30%;box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"] .game .menuDock.menu71:not(.menu71-open){right:20px;top:164px;width:132px;gap:10px}
html[data-layout="PC_WEB_WIDE"] .game .joy{display:none}
html[data-layout="PC_WEB_WIDE"] .game #dungeonJoystick{display:none}
html[data-layout="PC_WEB_WIDE"] #dungeonScene .dungeonHud>div{flex:0 1 520px;max-width:calc(100% - 116px)}
html[data-layout="PC_WEB_WIDE"] #dungeonScene .dungeonHud>button:first-of-type{margin-left:auto}
html[data-layout="PC_WEB_WIDE"] #dungeonScene .dungeonActions{left:auto;right:20px;bottom:22px;width:auto;gap:12px}
html[data-layout="PC_WEB_WIDE"] #dungeonScene .dungeonActions>button{flex:none;width:120px;min-width:100px;max-width:160px;height:64px}
html[data-layout="PC_WEB_WIDE"] #dungeonScene .dungeonActions>#dungeonRun69{width:160px}
html[data-layout="PC_WEB_WIDE"] #dungeonScene #dungeonAnnouncement{left:50%;right:auto;width:min(580px,70%);transform:translateX(-50%);box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"] .game .chatDock{left:20px;right:auto;bottom:18px;width:340px;max-width:27%;border-radius:16px;--chat-keyboard:0px}
html[data-layout="PC_WEB_WIDE"] .game .chatRail{border-radius:16px;min-height:44px}
html[data-layout="PC_WEB_WIDE"] .game #chatPanel{left:0;bottom:54px;width:100%;box-sizing:border-box;height:min(420px,var(--chat-panel-height,420px));border-radius:22px}
html[data-layout="PC_WEB_WIDE"] .game .mode{left:20px;bottom:91px;width:140px;min-height:36px}
html[data-layout="PC_WEB_WIDE"] .game .stamina{left:20px;bottom:74px;width:140px}
html[data-layout="PC_WEB_WIDE"] .game .voiceCall{left:174px;bottom:91px}
html[data-layout="PC_WEB_WIDE"] .game .actions{right:20px;bottom:22px;gap:12px}
html[data-layout="PC_WEB_WIDE"] .game .actions .action,html[data-layout="PC_WEB_WIDE"] .game .actions #ultimateHud{width:70px;height:70px;flex:none}
html[data-layout="PC_WEB_WIDE"] .game #combatHud78:is([data-scene="world"],[data-scene="dungeon"]){position:static;width:auto}
html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .combatResource{position:absolute;left:20px;top:124px;width:304px;height:29px}
html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .combatSkills78{position:absolute;left:calc(50% - 165px);bottom:18px;width:288px;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .novaSkill91{position:absolute;left:calc(50% + 137px);right:auto;bottom:18px;width:76px}
html[data-layout="PC_WEB_WIDE"] .skillOrb78 kbd{display:block}
html[data-layout="PC_WEB_WIDE"] #jump:after,html[data-layout="PC_WEB_WIDE"] #attack:after,html[data-layout="PC_WEB_WIDE"] .actions #act:after{display:block;font:11px/13px sans-serif;color:#fff8d6;content:'J'}
html[data-layout="PC_WEB_WIDE"] #attack:after{content:'K · Click'}
html[data-layout="PC_WEB_WIDE"] .actions #act:after{content:'B · Space'}

/* Wider information surfaces use real columns; artwork keeps its aspect ratio. */
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(.sheet,.ranking85){width:min(1180px,calc(100% - 80px));max-width:calc(100% - 80px);max-height:calc(var(--viewport97-height,100dvh) - 48px);box-sizing:border-box}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(#settingsSheet,#profileSheet,#accountSheet){width:min(980px,calc(100% - 80px))}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(#multiSheet,#dungeonSheet){width:min(1180px,calc(100% - 80px));max-height:calc(var(--viewport97-height,100dvh) - 48px)}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] #menuPanel71{width:min(960px,calc(100% - 80px));height:min(820px,calc(var(--viewport97-height,100dvh) - 48px))}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] .menuHeader71{width:340px;max-height:142px}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] .menuDock.menu71 #gameMenu{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] #costumeSheet88 .fashionGrid88{grid-template-columns:repeat(4,minmax(0,1fr))}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] .economyHeader88{min-height:68px;padding:10px 50px 10px 16px;margin-bottom:10px}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] .economyHeader88>img{width:56px;height:56px;margin:0}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] .economyHeader88 h2{font-size:25px;margin:0}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] #costumeSheet88 .wallet88{margin:8px 0}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] #costumeSheet88 .fashionCard88 .costumePortrait88{width:144px;max-width:100%;height:144px}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(.rareGrid,.runWorldGrid66){grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(.friendMissions88,.profileStats,.shopGrid){grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(#missionList,#dailyList){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] :is(#missionList,#dailyList)>*{min-width:0;margin:0}

/* The two mobile containers keep their existing portrait control coordinates. */
html[data-layout]:not([data-layout="PC_WEB_WIDE"])[data-mandu-ui="game"] :is(.sheet,.panel){max-height:calc(var(--viewport97-height,100dvh) - max(16px,env(safe-area-inset-top)) - max(16px,env(safe-area-inset-bottom)))}
html[data-layout]:not([data-layout="PC_WEB_WIDE"]) #menuPanel71{max-height:var(--viewport97-height,100dvh)}
html[data-layout]:not([data-layout="PC_WEB_WIDE"]) .game .chatDock{bottom:0}
html[data-layout]:not([data-layout="PC_WEB_WIDE"]) .game #chatPanel{max-height:calc(var(--viewport97-height,100dvh) - 60px)!important}
html[data-layout]:not([data-layout="PC_WEB_WIDE"]) .game #chatDock[data-typing="true"] #chatPanel{max-height:calc(var(--viewport97-height,100dvh) - 12px)!important}
html[data-layout]:not([data-layout="PC_WEB_WIDE"]) .game :is(.quest,.mini,.menuDock:not(.menu71-open)){margin-top:max(0px,calc(env(safe-area-inset-top) - 7px))}
html[data-layout]:not([data-layout="PC_WEB_WIDE"])[data-keyboard97="true"] .game.playing>:is(.controls,.mode,.stamina){visibility:hidden!important}

/* A resized PC window remains a PC, with a compact desktop bar. */
@media(max-width:1100px){
 html[data-layout="PC_WEB_WIDE"] .game .hud{right:112px;left:12px}
 html[data-layout="PC_WEB_WIDE"] .game .mini{right:12px;width:88px;height:88px}
 html[data-layout="PC_WEB_WIDE"] .game .menuDock.menu71:not(.menu71-open){right:12px;top:120px;width:88px}
 html[data-layout="PC_WEB_WIDE"] #fullscreen97{right:12px;top:236px;min-width:88px}
 html[data-layout="PC_WEB_WIDE"] .game .quest{left:12px;width:240px}
 html[data-layout="PC_WEB_WIDE"] .game .chatDock{left:12px;width:240px;max-width:30%}
 html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .combatResource{left:12px;width:260px}
 html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .combatSkills78{left:calc(50% - 130px);bottom:102px;width:250px}
 html[data-layout="PC_WEB_WIDE"] #combatHud78:is([data-scene="world"],[data-scene="dungeon"]) .novaSkill91{left:calc(50% + 125px);bottom:102px}
 html[data-layout="PC_WEB_WIDE"][data-mandu-ui="game"] #costumeSheet88 .fashionGrid88{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Short portrait viewports only: the original super-skill position collides
   with the menu when a browser bar leaves fewer than 610 usable pixels. */
@media(max-height:610px) and (orientation:portrait){
 html[data-layout]:not([data-layout="PC_WEB_WIDE"]) #combatHud78[data-scene="world"] .novaSkill91{right:auto;left:-100px;bottom:calc(100% + 12px)}
}