/* Phone-first viewport: chrome stays stable and only the active content panel scrolls. */
html,body{width:100%;max-width:100%;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}
body{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
.shell{display:flex;flex-direction:column;width:100%;max-width:760px;height:100vh;height:100svh;height:100dvh;min-height:0;padding-top:max(10px,env(safe-area-inset-top));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(10px,env(safe-area-inset-left));overflow:hidden}
.brand{flex:0 0 auto;padding-top:2px;padding-bottom:9px}
#app:not(.hidden),#player-content:not(.hidden){display:flex;flex:1;min-width:0;min-height:0;flex-direction:column}
.account,.identity-switcher,.hero,.resources,.nav{flex:0 0 auto}
.account,.identity-switcher,.hero,.resources,.nav,.content,.panel,.card,.grid,.role-card,.feature-card,.shop-product,.identity-controls,.hero-main{min-width:0;max-width:100%}
.content{min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;padding-bottom:max(18px,env(safe-area-inset-bottom));scrollbar-width:thin}
.shell:has(#auth:not(.hidden)){overflow-y:auto;-webkit-overflow-scrolling:touch}
input,select,button{min-width:0;max-width:100%}
.account b,.identity-title span,.hero h2,.hero p,.feature-info,.shop-info,.role-card-info,.item,.notice{overflow-wrap:anywhere}
.player-modal{height:100vh;height:100dvh;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overflow:hidden}
.player-modal>section{width:min(100%,720px);max-height:calc(100dvh - 16px);overflow:auto;-webkit-overflow-scrolling:touch}

@media(max-width:599px){
  .resources{display:flex;gap:6px;margin:7px 0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding:0 0 2px}
  .resources::-webkit-scrollbar{display:none}
  .resource{flex:0 0 clamp(76px,24vw,98px);min-width:0;scroll-snap-align:start;padding:8px 6px}
  .resource b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .nav{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:1fr;grid-auto-flow:column}
  .nav button{min-width:0;white-space:nowrap}
  .quantity-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:430px){
  .shell{padding-top:max(7px,env(safe-area-inset-top));padding-right:max(8px,env(safe-area-inset-right));padding-left:max(8px,env(safe-area-inset-left))}
  .brand{padding-bottom:7px}.brand h1{font-size:21px}.brand p{font-size:11px}.seal{width:42px;height:42px}
  .account,.identity-switcher{margin-bottom:7px;padding:8px 10px}
  .identity-controls{grid-template-columns:minmax(0,1fr) auto;gap:6px}.identity-controls button{padding-inline:8px;white-space:nowrap}
  .hero{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:8px;margin-bottom:0;padding:9px}
  .avatar{width:48px;height:48px}.hero-main h2{font-size:16px}.hero-main p{font-size:11px}
  .idle-claim{width:min(112px,30vw);max-width:112px}.idle-claim button{width:100%;min-height:36px;padding:0 7px;font-size:12px;line-height:1.25}.idle-claim small{font-size:9px;line-height:1.15}
  .nav{margin:6px 0}.nav button{padding:9px 1px;font-size:12px}
  .panel{padding:10px}.grid,.two{gap:8px}
  .feature-menu{grid-template-columns:repeat(3,minmax(0,1fr))}
  .role-card,.growth-detail{min-width:0}
}

@media(max-width:340px){
  .brand h1{font-size:19px}.brand p{display:none}.seal{width:38px;height:38px}
  .account,.identity-switcher{padding:7px 8px}.identity-title small{font-size:10px}
  .identity-controls{grid-template-columns:1fr}.identity-controls button{width:100%}
  .hero{grid-template-columns:44px minmax(0,1fr)}.avatar{width:44px;height:44px}
  .idle-claim{grid-column:1/-1;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px}.idle-claim small{max-width:112px}
  .resource{flex-basis:74px}.nav button{font-size:9px}
  .feature-menu,.bag-tabs,.forge-actions,.quantity-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .role-card{grid-template-columns:90px minmax(0,1fr)}.role-portrait{width:90px}
  .growth-detail{grid-template-columns:78px minmax(0,1fr)}.growth-art{width:72px;height:72px}
  .overview-stage{min-height:270px}
}

@media(max-height:760px){
  .brand{display:none}.resources{margin-top:5px;margin-bottom:5px}.nav{margin-top:4px;margin-bottom:4px}.hero{padding-top:8px;padding-bottom:8px}
}

@media(max-height:620px) and (orientation:landscape){
  .shell{padding-top:max(5px,env(safe-area-inset-top));padding-bottom:max(5px,env(safe-area-inset-bottom))}
  .account,.identity-switcher{margin-bottom:4px;padding-top:5px;padding-bottom:5px}
  .hero{grid-template-columns:42px minmax(0,1fr) auto;margin-bottom:0;padding:5px 8px}.avatar{width:42px;height:42px}
  .resources{margin:3px 0}.resource{padding-top:5px;padding-bottom:5px}.nav{margin:3px 0}.nav button{padding-top:6px;padding-bottom:6px}
}