html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
#game{position:fixed;left:var(--game-left,0px);top:var(--game-top,0px);width:var(--game-width,100%);height:var(--game-height,100%);--edge-left:max(12px,env(safe-area-inset-left));--edge-right:max(12px,env(safe-area-inset-right));--edge-top:max(12px,env(safe-area-inset-top));--edge-bottom:max(18px,env(safe-area-inset-bottom))}
#world{width:100%;height:100%}
.hud-top{display:contents}
body[data-release] .menu-content{max-height:100%}
body[data-release] .story-card{max-height:calc(var(--game-height,100dvh) - 36px)}
[data-panel=dialogue] .story-card{max-height:calc(var(--game-height,100dvh) - 36px)}
.orientation-guide{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding:13px;margin:0 0 16px;border:1px solid #cbb88788;background:#1b403bd9;color:#f0e6c8;border-radius:4px;max-width:390px}
.orientation-guide>svg{width:32px;height:36px;fill:none;stroke:#e4cb91;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.orientation-guide strong{font-size:15px;font-weight:500;letter-spacing:1px}
.orientation-guide p{font-size:12px;line-height:1.7;letter-spacing:0;margin:5px 0 0;color:#d2dfce}
.orientation-actions{grid-column:1/-1;display:flex;gap:8px}
.orientation-actions button{flex:1;min-height:44px;padding:8px 10px;border:1px solid #d5c28c;background:#dfd2a8;color:#1d3d35;border-radius:3px;font-size:13px}
.orientation-actions button+button{background:transparent;border-color:#bacdb05e;color:#e0e5cc}
.orientation-guide #screen-message{grid-column:1/-1;color:#f1d296;margin:0}
#game[data-mobile=true] .hud-top{display:grid;position:absolute;top:var(--edge-top);left:var(--edge-left);right:var(--edge-right);grid-template-columns:194px minmax(0,1fr) 142px;gap:6px 10px;align-items:start;pointer-events:none}
#game[data-mobile=true] .hud-top>.vitals,#game[data-mobile=true] .hud-top>.quest,#game[data-mobile=true] .hud-top>#guidance,#game[data-mobile=true] .hud-top>#boss-hud{position:static;transform:none;margin:0;min-width:0;max-width:100%;width:100%;left:auto;top:auto;bottom:auto}
#game[data-mobile=true] .vitals{grid-column:1;grid-row:1;gap:8px;padding:5px 7px;min-height:52px}
#game[data-mobile=true] .vitals-body{min-width:0}
#game[data-mobile=true] .hero-name{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0;margin-bottom:5px}
#game[data-mobile=true] .hero-name .loot-counter{font-size:10px;margin-left:4px}
#game[data-mobile=true] .portrait{width:30px;height:36px}
#game[data-mobile=true] .bar{height:11px}
#game[data-mobile=true] .bar.mana{height:4px;margin-top:4px}
#game[data-mobile=true] .quest{grid-column:2;grid-row:1;justify-self:center;max-width:360px;align-self:start;min-height:48px;padding:3px 7px;gap:8px;background:#173b36bf}
#game[data-mobile=true] .quest>div{min-width:0}
#game[data-mobile=true] .quest small{display:none}
#game[data-mobile=true] .quest strong{font-size:13px;line-height:1.4}
#game[data-mobile=true] #direction{font-size:11px;line-height:1.35;margin-top:2px}
#game[data-mobile=true] #journal{height:44px;flex:0 0 44px}
#game[data-mobile=true] #guidance{grid-column:2;grid-row:2;justify-self:center;max-width:330px;padding:4px 8px;text-align:center}
#game[data-mobile=true] #boss-hud{grid-column:2;grid-row:2;justify-self:center;max-width:260px;padding:4px 9px 6px}
#game[data-mobile=true] #boss-hud span{font-size:13px;letter-spacing:2px}
#game[data-mobile=true] #boss-hud>div{height:5px;margin-top:4px}
#game[data-mobile=true] .top-tools{top:var(--edge-top);right:var(--edge-right);gap:5px}
#game[data-mobile=true] .tool{width:44px;height:44px}
#game[data-mobile=true] .skillbar{bottom:calc(var(--edge-bottom) + 12px);right:max(18px,env(safe-area-inset-right))}
#game[data-mobile=true] .skill span{top:calc(100% + 5px);line-height:15px;letter-spacing:0;font-size:11px}
#game[data-mobile=true] #joystick{bottom:calc(var(--edge-bottom) + 22px);left:max(22px,env(safe-area-inset-left))}
#game[data-mobile=true] #joystick span{bottom:-21px;line-height:15px;letter-spacing:1px}
#game[data-mobile=true] .interact{right:max(20px,env(safe-area-inset-right));bottom:calc(var(--edge-bottom) + 185px);min-height:44px}
#game[data-mobile=true] .menu h1,#game[data-mobile=true][data-orientation=portrait] .menu h1{font-size:42px;line-height:1.15;letter-spacing:5px}
#game[data-mobile=true] .menu h1 span{display:inline;padding:0;margin:0}
#game[data-mobile=true] .menu .eyebrow{margin-bottom:12px;letter-spacing:3px}
#game[data-mobile=true] .menu .gold-rule{margin:13px 0}
#game[data-mobile=true] #menu-description{margin-bottom:14px;line-height:1.7;letter-spacing:1px;font-size:13px}
#game[data-mobile=true] .menu-content{padding:18px 0}
#game[data-mobile=true][data-orientation=portrait] .hud-top{grid-template-columns:minmax(0,1fr) 142px;gap:5px 10px}
#game[data-mobile=true][data-orientation=portrait] .quest{grid-column:1/-1;grid-row:2;max-width:100%;min-height:46px;padding:2px 6px}
#game[data-mobile=true][data-orientation=portrait] .quest strong{font-size:13px}
#game[data-mobile=true][data-orientation=portrait] #guidance,#game[data-mobile=true][data-orientation=portrait] #boss-hud{grid-column:1/-1;grid-row:3;max-width:100%;text-align:left}
#game[data-mobile=true][data-orientation=portrait] #boss-hud{display:flex;gap:12px;align-items:center;padding:5px 9px}
#game[data-mobile=true][data-orientation=portrait] #boss-hud span{font-size:12px;letter-spacing:1px;flex:none}
#game[data-mobile=true][data-orientation=portrait] #boss-hud>div{flex:1;margin:0}
#game[data-mobile=true][data-orientation=portrait] #loot-feed{top:174px}
#game[data-mobile=true][data-orientation=portrait] .save-status{bottom:calc(var(--edge-bottom) + 155px);min-height:44px;padding:5px 8px;font-size:10px;max-width:145px}
#game[data-mobile=true][data-orientation=landscape] .skillbar{width:174px;height:148px}
#game[data-mobile=true][data-orientation=landscape] .hud-top>.quest{max-width:300px}
#game[data-mobile=true][data-orientation=landscape] .hud-top>#boss-hud{grid-column:3;grid-row:2;max-width:100%;padding:4px 6px;text-align:center}
#game[data-mobile=true][data-orientation=landscape] #boss-hud span{font-size:12px;letter-spacing:1px}
#game[data-mobile=true][data-orientation=landscape] .skill{width:48px;height:48px}
#game[data-mobile=true][data-orientation=landscape] .skill.attack{width:67px;height:67px}
#game[data-mobile=true][data-orientation=landscape] #joystick{width:91px;height:91px}
#game[data-mobile=true][data-orientation=landscape] .interact{bottom:calc(var(--edge-bottom) + 169px)}
#game[data-mobile=true][data-orientation=landscape] #loot-feed{top:76px;left:var(--edge-left);width:190px}
#game[data-mobile=true][data-orientation=landscape] #loot-feed .loot-notice img{width:28px;height:28px}
#game[data-mobile=true][data-orientation=landscape] #loot-feed .loot-notice strong{font-size:12px}
#game[data-mobile=true][data-orientation=landscape] #loot-feed .loot-notice span{font-size:11px}
#game[data-mobile=true][data-orientation=landscape] .save-status{left:var(--edge-left);bottom:calc(var(--edge-bottom) + 123px);min-height:44px;padding:4px 7px;max-width:160px;font-size:10px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .hud-top{grid-template-columns:155px minmax(0,1fr) 142px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .portrait{display:none}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .skillbar{height:128px;width:160px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .skill.attack{width:60px;height:60px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .skill.nova{left:26px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .skill.wave{bottom:20px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] #joystick{width:82px;height:82px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .interact{bottom:calc(var(--edge-bottom) + 145px);font-size:12px;padding:7px 10px}
#game[data-mobile=true][data-orientation=landscape][data-short=true] .story-panel{padding:8px 12px}
body[data-release] #game[data-mobile=true][data-orientation=landscape][data-short=true] .story-card{padding:10px 14px;max-height:calc(var(--game-height,100dvh) - 16px)}
body:not([data-mode=playing]) #game[data-mobile=true] .save-status{left:auto;bottom:auto;top:10px;right:var(--edge-right)}
@media(max-width:360px){#game[data-mobile=true] .portrait{display:none}#game[data-mobile=true] .hero-name{font-size:11px}.orientation-guide{padding:10px;gap:6px 9px}.orientation-guide p{font-size:12px}}
