/* v0.6 — Wide responsive browser layout.
   Fill desktop screens while keeping the battle preview proportionate. */
main{
 width:min(100% - 48px,1600px);
 max-width:none;
 margin-inline:auto;
 padding:20px 0 28px;
}
header{align-items:center}
section{min-width:0}
.arena{width:min(100%,920px);max-width:100%;margin-inline:auto}
.arena canvas{max-width:100%;aspect-ratio:640/300}
.upgrade-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.skill-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
.talent-dialog{width:min(1400px,calc(100vw - 40px));max-height:min(94dvh,1100px)}
.talent-dialog .talent-grid{height:min(76dvh,840px);max-height:none}
@media (min-width:1250px){
 main{width:calc(100% - 64px)}
 .arena{width:min(100%,980px)}
 .stat{min-width:108px}
 .upgrade{padding:13px}
}
@media (min-width:1700px){
 main{width:calc(100% - 96px)}
 .arena{width:min(100%,1050px)}
}
@media (max-width:1000px){
 main{width:calc(100% - 32px);padding:14px 0 22px}
 .arena{width:min(100%,760px)}
 .upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .talent-dialog{width:calc(100vw - 24px)}
}
@media (max-width:620px){
 main{width:calc(100% - 20px);padding:10px 0 16px}
 header{align-items:flex-start;gap:10px}
 .arena{width:100%}
 .skill-list{grid-template-columns:1fr}
 .bottom{grid-template-columns:1fr}
 .talent-dialog{width:calc(100vw - 12px);max-height:97dvh}
 .talent-dialog .talent-grid{height:66dvh}
 .ascension-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:390px){
 main{width:calc(100% - 12px)}
 .upgrade-grid{grid-template-columns:1fr}
 .stat{min-width:0}
}


/* v0.6 — Dense wide-screen dashboard: fit more gameplay above the fold. */
*{box-sizing:border-box}
main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:12px;row-gap:10px;align-items:start;width:calc(100% - 36px);max-width:1800px;margin:0 auto;padding:12px 0 16px}
main>header,main>.talent-modal,main>footer{grid-column:1/-1}
main>header{margin:0;padding:2px 3px 6px;min-height:0}
main>section{margin:0;padding:11px 13px;min-width:0}
main>section:nth-of-type(1){grid-column:span 7}
main>.ascension-panel{grid-column:span 5}
main>.skills{grid-column:span 5}
main>.upgrades{grid-column:span 7}
main>.talent-launch{grid-column:1/-1}
main>.bottom{grid-column:1/-1;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
main>.bottom>section{margin:0;padding:11px 13px;min-width:0}
main>footer{margin:0;padding:3px 0;font-size:10px}
h1{font-size:clamp(20px,2vw,26px);line-height:1.12}
h2{font-size:14px;line-height:1.2;margin:0 0 7px}
h3{font-size:12px}
.muted{font-size:11px;line-height:1.4}
.stat{padding:5px 10px;min-width:72px}.stat strong{font-size:17px}
.arena{width:min(100%,700px);margin-inline:auto}
.arena-caption{padding:4px 8px}.controls{margin-top:7px;gap:6px}.controls button{padding:6px 10px}
.message{margin-top:5px;min-height:13px}
.ascension-stats{margin:8px 0;gap:6px}.ascension-stats>div{padding:7px;gap:2px}.ascension-stats strong{font-size:15px}
.ascension-actions{margin:7px 0;gap:7px}.ascension-actions button{padding:7px 9px;font-size:11px}
.ascension-panel h3{margin:9px 0 7px}
.upgrade-grid{gap:6px}.upgrade{padding:8px;gap:4px}.upgrade small{min-height:0;font-size:10px;line-height:1.3}
.upgrade button{padding:6px 7px;font-size:11px}.upgrade-name strong{font-size:12px}
.upgrade-bonus{font-size:11px}.skill-list{gap:6px;margin-top:5px}.skill{padding:8px;gap:4px}.skill button{padding:6px 9px}
.talent-launch{display:flex;align-items:center;justify-content:space-between;gap:10px}.talent-launch h2{margin-bottom:3px}.talent-launch .muted{margin:0}
.name{margin:4px 0}.bar{margin:5px 0 4px}.details{font-size:11px}
.talent-dialog{width:min(1400px,calc(100vw - 24px))}
@media(min-width:1600px){main{width:calc(100% - 48px);column-gap:14px}.arena{width:min(100%,790px)}}
@media(max-width:1100px){
 main{width:calc(100% - 24px);grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 main>section:nth-of-type(1),main>.ascension-panel,main>.skills,main>.upgrades{grid-column:span 1}
 main>.talent-launch,main>.bottom{grid-column:1/-1}
 .arena{width:100%}.upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ascension-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
 main{width:calc(100% - 16px);display:flex;flex-direction:column;gap:8px;padding:8px 0}
 main>header,main>section,main>.bottom,main>footer{width:100%}
 main>section{padding:10px}.arena{width:100%}
 .skill-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .bottom{grid-template-columns:repeat(2,minmax(0,1fr))}
 .talent-launch{flex-wrap:wrap}.talent-launch-actions{margin-left:auto}
}
@media(max-width:450px){
 main{width:calc(100% - 12px);gap:7px}
 main>.bottom{grid-template-columns:1fr}
 .skill-list{grid-template-columns:1fr}
 .upgrade-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ascension-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .controls{flex-wrap:wrap}.controls button{flex:1 1 auto}
 .stat{padding:5px 7px;min-width:0}
}