/* VK containers: one touch-friendly column, then a wider outpost and a loot column. */
:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
.game-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.outpost-overview{display:none}
.close-dialog{width:44px;height:44px}
.journey-info{width:44px;height:44px;flex-shrink:0}
.quest-journal-button{width:44px;min-height:48px}
.forge-hotspot{min-height:44px}
.equip-button,.gear-detail-link{min-height:44px}
.wallet-resource{min-width:0}
.wallet-resource span{min-width:0;font-variant-numeric:tabular-nums}
.modal-header{position:sticky;top:-22px;z-index:5;padding-block:8px;margin-top:-8px;background:#23475b;box-shadow:0 7px 0 #23475b}
dialog{overscroll-behavior:contain;scroll-padding-block:82px 20px}
dialog button{scroll-margin-block:82px 16px}
.modal-surface{min-width:0}
.hero-layout,.hero-profile,.hero-inventory{min-width:0}
.scene-footer{display:none}
.patrol-panel{position:absolute;z-index:2;bottom:12px;left:12px;right:12px;padding:10px 12px;background:#203e51f2;border:1px solid #d5aa61;border-radius:9px;box-shadow:0 3px 0 #42364e}
.patrol-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px}
.patrol-heading span{color:#ffdc8c;font-size:11px;white-space:nowrap}
.stage-track{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;margin:8px 0}
.stage-track span{height:5px;border-radius:2px;background:#142e40;border:1px solid #6b8580}
.stage-track .cleared{background:#a9d983;border-color:#d6e7a3}
.patrol-button{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:8px 10px;background:#355b68;border:1px solid #a0b99a;border-radius:6px;font-size:12px;text-align:left}
.patrol-button small{font-size:10px;color:#d6e7a3}
.stage-destination{color:#d6e7a3;font-size:12px;line-height:1.5;margin-block:12px}
.stage-summary{padding:14px;border:1px solid #79938b;background:#1c3d51;border-radius:9px;margin-bottom:14px}
.stage-summary h3{font-size:20px;margin-bottom:10px}
.stage-rates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-block:14px}
.stage-rates>div{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;background:#183547;border-radius:6px;font-size:12px}
.stage-rates img{width:32px;height:26px;object-fit:contain;mix-blend-mode:lighten}
.stage-rates em{font-style:normal;color:#d6e7a3;font-weight:700}
.stage-rates small{font-size:10px;color:#bfd0ce}
.stage-battle .fighter-boss .fighter-visual{transform:scale(.8);transform-origin:bottom center}
.forge-hotspot{top:auto;bottom:132px}
@media(min-width:640px){.forge-hotspot{top:auto;bottom:132px}}

@media(max-width:639px){
  body{display:block;min-width:280px;padding:0;background:#203e51}
  .world-backdrop{display:none}
  .game-shell{width:100%;height:max(740px,100dvh);min-height:740px;border:0;outline:0;border-radius:0;box-shadow:none;overflow:visible}
  .resource-header{padding-top:max(10px,var(--safe-top));padding-left:max(10px,var(--safe-left));padding-right:max(10px,var(--safe-right))}
  .next-goal-wrap{padding-left:max(12px,var(--safe-left));padding-right:max(12px,var(--safe-right))}
  .loot-panel{padding-left:max(16px,var(--safe-left));padding-right:max(16px,var(--safe-right))}
  .bottom-nav{position:sticky;bottom:0;min-height:74px;padding-bottom:var(--safe-bottom);padding-left:var(--safe-left);padding-right:var(--safe-right)}
  .bottom-nav .nav-item{min-height:71px}
  .game-shell button{scroll-margin-block:12px calc(86px + var(--safe-bottom))}
  .bottom-nav button{scroll-margin:0}
  .toast{bottom:calc(88px + var(--safe-bottom));max-width:calc(100vw - 32px)}
}

@media(min-width:640px){
  body{--frame-gutter:16px;display:flex;flex-direction:column;padding:max(var(--frame-gutter),var(--safe-top)) max(var(--frame-gutter),var(--safe-right)) max(var(--frame-gutter),var(--safe-bottom)) max(var(--frame-gutter),var(--safe-left));min-width:0}
  .game-shell{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(290px,.85fr);grid-template-rows:auto auto 1fr auto auto;grid-template-areas:'header header' 'scene goal' 'scene loot' 'overview loot' 'nav nav';width:min(1280px,100%);height:auto;min-height:min(820px,calc(100dvh - max(var(--frame-gutter),var(--safe-top)) - max(var(--frame-gutter),var(--safe-bottom))));flex-shrink:0;margin:auto;border-radius:14px;overflow:hidden}
  .game-shell>*{min-width:0}
  .resource-header{grid-area:header;padding:12px 18px;min-height:78px}
  .wallet{flex:0 1 auto;gap:10px;margin-left:auto}
  .wallet-resource{font-size:16px;padding:7px 10px;min-height:42px}
  .outpost-scene{grid-area:scene;min-height:240px}
  .scene-heading{top:22px;left:24px}
  .scene-heading h2{font-size:clamp(24px,2.9vw,36px);max-width:95%}
  .scene-heading>span{font-size:12px}
  .scene-art{object-position:center 65%}
  .scene-footer{bottom:16px;font-size:11px}
  .forge-hotspot{left:20px;top:auto;bottom:52px;padding:10px 12px;font-size:14px}
  .next-goal-wrap{grid-area:goal;padding:14px;border-left:2px solid #a97840;border-bottom:1px solid #5b7780}
  .next-goal{min-height:64px;padding:11px;gap:10px}
  .goal-copy strong{font-size:14px}
  .goal-copy small{font-size:10px}
  .goal-copy>span{font-size:11px;line-height:1.4}
  .loot-panel{grid-area:loot;display:flex;flex-direction:column;justify-content:center;padding:20px;border-left:2px solid #a97840;border-top:0;box-shadow:none}
  .loot-panel::before,.loot-panel::after{display:none}
  .loot-heading h2{font-size:27px;overflow-wrap:break-word}
  .income-panel{padding:11px 12px;margin-top:14px}
  .income-heading{font-size:11px}
  .hourly-rates{margin-top:9px;gap:4px}
  .hourly-rates strong{font-size:17px}
  .reward-grid{gap:10px;margin:16px 0}
  .reward{min-height:110px}
  .reward img{width:68px;height:48px}
  .reward strong{font-size:25px}
  .reward>span{font-size:11px}
  .claim-button{font-size:20px;min-height:56px}
  .accumulation-info{font-size:11px;margin-top:14px}
  .outpost-overview{grid-area:overview;display:block;padding:15px 20px 18px;background:#203e51;border-top:2px solid #a97840}
  .overview-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
  .overview-heading h2{font-size:20px}
  .overview-heading>button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:44px;padding:6px 8px;border:1px solid #6b8580;border-radius:6px;background:#1b3b4d;color:#ffdc8c;font-size:11px}
  .overview-stats{display:flex;justify-content:space-between;gap:12px;margin:0 0 14px}
  .overview-stats>div{display:flex;align-items:center;gap:8px}
  .overview-stats dt{font-size:11px;color:#bed0cf}
  .overview-stats dd{margin:0;font-size:21px;font-weight:700;color:#fff0ce}
  .overview-upgrades{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .overview-upgrades>button{display:flex;align-items:center;gap:9px;min-height:56px;padding:9px 10px;text-align:left;background:#2e4d5d;border:1px solid #698080;border-radius:7px}
  .overview-upgrades .icon{width:24px;height:24px;color:#edcf92}
  .overview-upgrades span{flex:1;font-size:12px;line-height:1.4}
  .overview-upgrades strong{float:right;color:#ffdc8c;margin-left:5px}
  .overview-upgrades small{display:block;font-size:10px;color:#c4d2cf}
  .bottom-nav{grid-area:nav;position:static;min-height:60px;padding:0;border-bottom:0}
  .nav-item{flex-direction:row;gap:10px;min-height:59px;font-size:14px}
  .nav-item img{height:32px;width:auto;max-width:42px}
  .toast{bottom:28px;max-width:min(520px,calc(100vw - 48px))}
  .modal-header{top:-24px}
  [data-view='journey'] .region-list{grid-template-columns:repeat(auto-fit,minmax(225px,1fr));align-items:stretch}
  [data-view='journey'] .region-card{display:flex;flex-direction:column;min-width:0}
  [data-view='journey'] .region-card>button{margin-top:auto}
  .compact-rates>span{min-width:0;flex-wrap:wrap}
  [data-view='quests'] .active-quest{margin-bottom:4px}
  [data-view='quests'] .quest-chapter{vertical-align:top}
}

@media(min-width:960px){
  .game-title{position:static;width:auto;height:auto;clip-path:none;text-align:center;margin-inline:20px}
  .game-title h1{font-size:25px;line-height:1.1}
  .game-title p{font-size:11px;color:#cbb78d;margin-top:5px}
  .resource-header{justify-content:space-between}
  .wallet{margin-left:0}
  [data-view='hero'] .equipment-title{margin-top:0}
  [data-view='hero'] .gear-slots{margin-top:16px}
}

@media(min-width:640px) and (max-width:959px){
  .overview-heading{margin-bottom:10px}
  .overview-heading h2{font-size:17px}
  .overview-heading>button{font-size:10px;padding:5px}
  .overview-stats{gap:8px;margin-bottom:10px}
  .overview-stats>div{display:block}
  .overview-stats dd{font-size:20px;margin-top:2px}
  .overview-upgrades{gap:7px}
  .overview-upgrades>button{padding:8px 6px;gap:5px}
  .overview-upgrades .icon{width:19px}
  .overview-upgrades span{font-size:11px}
  .overview-upgrades small{font-size:9px}
  .loot-panel{padding:14px}
  .loot-heading h2{font-size:24px}
  .hourly-rates strong{font-size:15px}
}

@media(min-width:640px) and (max-height:650px){
  body{--frame-gutter:10px}
  .resource-header{padding:8px 14px;min-height:64px}
  .portrait-frame{width:44px;height:44px}
  .identity-copy strong{font-size:15px}
  .game-title h1{font-size:22px}
  .wallet-resource{font-size:14px;padding:4px 6px;min-height:35px}
  .next-goal-wrap{padding:9px}
  .next-goal{min-height:54px;padding:8px;gap:7px}
  .goal-copy strong{font-size:12px}
  .goal-copy>span{font-size:10px}
  .loot-panel{padding:12px}
  .loot-heading h2{font-size:23px}
  .income-panel{margin-top:9px;padding:7px 9px}
  .hourly-rates{margin-top:5px}
  .hourly-rates strong{font-size:14px}
  .reward-grid{margin:10px 0;gap:7px}
  .reward{min-height:78px}
  .reward img{width:54px;height:33px}
  .reward strong{font-size:21px}
  .reward>span{font-size:10px}
  .claim-button{min-height:48px;font-size:18px}
  .accumulation-info{margin-top:9px;font-size:10px}
  .outpost-overview{padding:10px 14px 12px}
  .overview-heading{margin-bottom:7px}
  .overview-stats{margin-bottom:8px}
  .overview-upgrades>button{min-height:47px;padding-block:7px}
  .bottom-nav{min-height:52px}
  .nav-item{min-height:51px}
  .nav-item img{height:27px}
}

@media(max-width:359px){
  .modal-header{top:-17px}
  .resource-header{padding-inline:9px}
  .quest-journal-button{width:44px}
}

/* Keep the forge above the patrol ribbon at every container width. */
.forge-hotspot{top:auto;bottom:132px}

/* A single scroll owner keeps the hero workspace usable at short VK container heights. */
[data-view='hero'] .modal-surface{display:flex;flex-direction:column;height:100%;min-height:0;padding:0}
.hero-chrome{flex-shrink:0;padding:18px 22px 12px;border-bottom:1px solid #627d80}
[data-view='hero'] .modal-header{position:static;margin:0 0 12px;padding:0;box-shadow:none}
.hero-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.hero-tabs{flex:1;max-width:460px;margin:0}
.hero-quest-notice{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid #93b576;border-radius:7px;background:#30534f;color:#d9efb8;font-size:11px;text-align:left}
.hero-quest-notice>.icon{width:18px;height:18px;flex-shrink:0}
.hero-quest-notice small{display:block;margin-top:3px;color:#d1dcc4;font-size:10px}
.hero-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding:20px 22px;scroll-padding-block:20px}
.hero-body button{scroll-margin-block:20px}
.hero-body>.modal-feedback{position:absolute;z-index:6;bottom:78px;left:16px;right:16px;max-width:620px;margin:0 auto;pointer-events:none;box-shadow:0 4px 20px #102e40aa}
.hero-layout{display:grid;grid-template-columns:224px minmax(0,1fr);gap:24px;align-items:start}
[data-view='hero'] .hero-summary{grid-template-columns:96px 1fr;gap:14px;margin-bottom:10px}
[data-view='hero'] .hero-figure{height:146px}
[data-view='hero'] .hero-stats{gap:9px}
[data-view='hero'] .hero-stat{gap:7px;font-size:11px}
[data-view='hero'] .hero-stat strong{font-size:23px}
.hero-profile>.hero-gear-note{margin:0 0 16px;font-size:11px}
.hero-experience{padding:12px 10px;margin-bottom:12px}
.hero-experience>div:first-child{flex-wrap:wrap;gap:4px 8px}
.hero-income{padding:12px 10px}
.hero-income>strong{font-size:18px}
[data-view='hero'] .gear-slots{margin-top:14px;gap:6px}
[data-view='hero'] .gear-slot{padding:8px 4px;gap:5px}
[data-view='hero'] .gear-slot-image{width:40px;height:40px}
[data-view='hero'] .gear-slot strong{font-size:10px;min-height:0}
[data-view='hero'] .equipment-title{margin-top:0}
.hero-inventory .junk-tools{padding:12px 14px}
.bag-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bag-heading>strong{font-size:14px}
.bag-heading .gear-detail-link{font-size:11px;padding:0}
.hero-inventory .equipment-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px}
.hero-inventory .inventory-empty{grid-column:1/-1}
.hero-inventory .gear-row{display:flex;flex-direction:column;align-self:stretch}
.hero-inventory .gear-row .equip-button{min-height:44px}
.hero-inventory .gear-row-footer{margin-top:auto;padding-top:6px}
.hero-inventory .gear-row .gear-sell-button{margin-top:6px}
.talents-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.passive-talents{grid-template-columns:repeat(3,minmax(0,1fr))}
.talent-heading{align-items:flex-start;gap:9px}
.talent-heading h4{font-size:15px}
.talent-heading small{display:block;line-height:1.5;margin-top:3px}
.talent-card p{margin:12px 0;font-size:12px}
.talent-card>button{font-size:12px;padding:9px;margin-top:12px}
.development-summary{margin-bottom:18px;padding:10px 14px}
.development-summary p{margin:2px 0 8px;font-size:12px}
.hero-footer{flex-shrink:0;display:flex;justify-content:space-between;gap:12px;padding:12px 22px;border-top:1px solid #627d80;background:#203e51}
.hero-footer>.secondary-button{width:auto;min-height:44px;margin:0;padding:10px 16px;font-size:12px}
.hero-footer>[data-action='boss']{border-color:#bd9c60;color:#ffe1a1}
.overview-development{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;padding:8px 10px;margin-top:10px;text-align:left;border:1px solid #698080;border-radius:7px;background:#193b4d}
.overview-development>.icon{width:22px;height:22px;color:#edcf92}
.overview-development>span{flex:1;font-size:12px}
.overview-development small{display:block;margin-top:3px;font-size:10px;color:#c4d2cf}
.overview-development>strong{font-size:15px;font-variant-numeric:tabular-nums;color:#ffe1a1}
.overview-development.has-points{border-color:#c9aa67;background:#384f50}
.inventory-dot{right:12px;top:12px}

@media(min-width:960px){
  .hero-profile{position:sticky;top:0}
}
@media(min-width:640px) and (max-width:959px){
  .hero-layout{grid-template-columns:190px minmax(0,1fr);gap:18px}
  [data-view='hero'] .hero-summary{grid-template-columns:76px 1fr;gap:10px}
  [data-view='hero'] .hero-figure{height:130px}
  .hero-inventory .equipment-list,.passive-talents{grid-template-columns:1fr}
  [data-hero-tab='development'] .hero-layout{display:block}
  [data-hero-tab='development'] .hero-profile{display:block}
  [data-hero-tab='development'] .hero-experience{margin-bottom:16px}
  [data-hero-tab='development'] .passive-talents{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:959px){
  [data-hero-tab='development'] .hero-summary,
  [data-hero-tab='development'] .hero-gear-note,
  [data-hero-tab='development'] .hero-income{display:none}
}
@media(max-width:639px){
  .hero-chrome{padding:14px 16px 10px}
  [data-view='hero'] .modal-header{margin-bottom:10px}
  .hero-toolbar{flex-wrap:wrap;gap:8px}
  .hero-tabs{max-width:none;flex-basis:100%}
  .hero-quest-notice{width:100%;justify-content:flex-start;min-height:44px;padding:6px 10px}
  .hero-quest-notice>span{flex:1}
  .hero-quest-notice small{display:inline;margin:0 0 0 8px}
  .hero-body{padding:16px;scroll-padding-block:16px}
  .hero-layout{display:block}
  .hero-profile{margin-bottom:18px}
  [data-view='hero'] .hero-summary{grid-template-columns:90px 1fr}
  [data-view='hero'] .hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  [data-view='hero'] .hero-stat{display:block;font-size:10px}
  [data-view='hero'] .hero-stat>.icon{width:18px;height:18px;margin-bottom:6px}
  [data-view='hero'] .hero-stat strong{font-size:21px}
  [data-view='hero'] .hero-figure{height:128px}
  [data-hero-tab='equipment'] .hero-figure,
  [data-hero-tab='equipment'] .hero-gear-note,
  [data-hero-tab='equipment'] .hero-experience{display:none}
  [data-hero-tab='equipment'] .hero-summary{display:block}
  [data-hero-tab='equipment'] .hero-stat{display:flex;gap:7px;align-items:center}
  [data-hero-tab='equipment'] .hero-stat>.icon{margin:0}
  [data-hero-tab='equipment'] .hero-summary{margin-bottom:14px}
  [data-view='hero'] .hero-income{margin-bottom:12px}
  [data-hero-tab='development'] .hero-profile{margin:0}
  .hero-inventory .equipment-list,.talents-list,.passive-talents{grid-template-columns:1fr}
  .hero-footer{padding:10px 16px;gap:8px}
  .hero-footer>.secondary-button{padding:8px 10px;font-size:11px}
  .hero-footer>[data-action='boss']{flex:1}
  .hero-footer>[data-action='close']{max-width:86px}
  .development-heading{gap:8px}
  .development-heading>strong{font-size:13px}
  .development-heading>button{max-width:95px;text-align:right;font-size:10px}
  .development-summary{padding:10px 12px}
  .development-summary p{font-size:11px}
}
@media(max-height:500px){
  .hero-chrome{padding:8px 16px}
  [data-view='hero'] .modal-header{margin-bottom:6px}
  [data-view='hero'] .modal-header h2{font-size:21px}
  [data-view='hero'] .modal-kicker{display:none}
  .hero-body{padding:12px 16px}
  .hero-footer{padding:8px 16px}
  [data-hero-tab='development'] .hero-experience,
  [data-hero-tab='development'] .development-summary>p,
  [data-hero-tab='development'] .development-summary>small{display:none}
  [data-hero-tab='development'] .development-summary{margin-bottom:12px;padding-block:6px}
}