/* responsive.css — all breakpoints live here */
@media (max-width:720px){.create-box{grid-template-columns:1fr}.cr-art{min-height:260px;height:260px}.cr-fig img,.cr-fig canvas{max-height:240px}}
@media (max-width:680px){.profile{grid-template-columns:1fr}}
@media (max-width:640px){
 :root{--navh:56px}
 #panel.large{padding:0;align-items:flex-end}
 #panel.large .panel-box{height:calc(100% - 40px - var(--sat));border-radius:18px 18px 0 0;animation:slideup .2s}
 #panel.medium{left:0;right:0;width:auto;top:auto;height:56vh;bottom:calc(var(--navh) + 10px + var(--sab))}
 #panel.medium.incombat{bottom:calc(76px + var(--sab))}
 #panel.medium .panel-box{border-radius:18px 18px 0 0;animation:slideup .2s}
 .panel-head::before{content:'';position:absolute;left:0;right:0;margin:-6px auto 0;width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.25)}
 #detail{left:10px;right:10px;width:auto;top:auto;bottom:calc(80px + var(--sab));max-height:62vh}
 .hud-bars{width:36vw}.wave{font-size:15px;letter-spacing:1px}.wave-sub{font-size:10.5px}.cur{font-size:11px;padding:2px 6px}.avatar{width:46px;height:46px}.pow{display:none}
 #hud{flex-wrap:wrap}.hud-mid{order:3;flex-basis:100%;margin-top:-2px}
 #skills{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 190px);gap:6px 5px}
 .sk{width:48px;height:48px}.sk.t-ultimate{width:56px;height:56px}.sk .ic{width:22px;height:22px}.sk .cdn{font-size:16px}
 .tool{width:48px;height:50px}.cb-right{flex-direction:row;align-items:flex-end}.autobtn{width:44px;min-height:40px;font-size:10px}
 #nav span{font-size:9.5px}
 #bossBar{top:calc(96px + var(--sat))}.breakthrough-btn{top:calc(126px + var(--sat))}
 #quick{width:calc(100vw - 20px);max-height:44vh;bottom:calc(72px + var(--sab))}
 #quickList{display:grid;grid-template-columns:1fr 1fr;gap:5px}
 .qu{flex-wrap:wrap;gap:2px 6px;padding:4px 6px}.qn small{display:none}.qc{font-size:12px}.q-head small{display:none}
 .res-cell b{font-size:22px}.cta-row{gap:6px}.secondary-cta{padding:0 14px;font-size:14px}.cta-primary{padding:12px 22px}
 .hero-row{flex-direction:column;align-items:stretch}
 .areas{grid-template-columns:repeat(3,1fr)}
 .loadout{grid-template-columns:repeat(3,1fr)}
}
@media (max-height:640px){.login-art{display:none}}
@media (max-height:460px){
 :root{--navh:46px}
 #nav button{flex-direction:row;gap:4px}
 .sk{width:52px;height:52px}.tool{width:48px;height:48px}
 #quick{width:300px;bottom:calc(66px + var(--sab));max-height:62vh}.qn small{display:none}.qu{min-height:40px}
 #homeCta{bottom:calc(var(--navh) + 12px)}.cta-primary{padding:10px 26px}
 #bossBar{top:60px}.breakthrough-btn{top:84px;padding:6px 18px}
}
#nav .ic{width:26px;height:26px}
/* V3 mobile combat: skills row on top, controls row below, safe from browser edges */
@media (max-width:640px){
 #combatBar{flex-direction:column-reverse;align-items:stretch;gap:6px;padding-bottom:calc(10px + var(--sab))}
 #combatBar .cb-right{justify-content:center;flex-direction:row;align-items:center}
 #skills{max-width:none;flex-wrap:nowrap;justify-content:center;gap:8px}
 .sk{width:58px;height:58px}.sk.t-ultimate{width:68px;height:68px}.sk .ic,.sk img.skicon{width:30px;height:30px}
 #combatBar .cb-left{justify-content:flex-start}.tool{width:46px;height:46px}.autobtn{min-height:46px;width:52px}
 #homeDock{top:calc(150px + var(--sat));gap:6px}.dock-btn{width:54px}.dock-btn .ic{width:26px;height:26px}.dock-btn span{font-size:9.5px}
 .daily-grid{grid-template-columns:repeat(3,1fr)}
 .ap-row{grid-template-columns:1fr}.pw-row{grid-template-columns:100px 1fr 60px}
 .chest-grid{grid-template-columns:repeat(2,1fr)}.chest-art{height:100px}
 .poster-art img{height:40vh}
}
@media (max-height:460px){#homeDock{top:70px;flex-direction:row;right:auto;left:50%;transform:translateX(-50%)}.poster-art{display:none}}

/* V3.1 HUD bars (must come after the 640px block above) */
@media (max-width:640px){.hud-bars{width:auto;flex:1 1 auto;min-width:150px;max-width:56vw}.hbar{margin-top:2px}.hb-track{height:6px}.hb-l{font-size:10px}.hb-v{font-size:10.5px}}
@media (max-width:370px){.hb-l{letter-spacing:.2px}.hud-right .cur{font-size:10.5px}}
@media (max-width:640px){#bossBar{top:calc(142px + var(--sat))}.breakthrough-btn{top:calc(166px + var(--sat))}#homeDock{top:calc(176px + var(--sat))}}
@media (max-width:640px){.breakthrough-btn{white-space:nowrap;font-size:13px;padding:8px 16px;max-width:calc(100vw - 110px)}}