/* Cross-feature layout: explicit placement for all top-level panels. */
main>section{min-width:0}
main>section.equipment-panel{grid-column:1/-1}
main>section.talent-launch{grid-column:1/-1}
main>.bottom{min-width:0}
@media(min-width:1101px){
 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}
}
@media(min-width:721px) and (max-width:1100px){
 main>.equipment-panel{grid-column:1/-1}
}
@media(max-width:720px){
 main>.equipment-panel{width:100%}
}


/* v0.7.9: compact live combat status inside the Expedition panel.
   The two combatants share the panel width instead of occupying the full page. */
main>.expedition-panel{min-width:0}
.expedition-panel>.combat-status{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:0 0 9px;
  min-width:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.expedition-panel>.combat-status>section{
  min-width:0;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--edge);
  border-radius:8px;
  background:var(--panel);
}
.expedition-panel>.combat-status h2{margin:0 0 4px;font-size:10px;line-height:1.1}
.expedition-panel>.combat-status .name{margin:0 0 4px;gap:5px;font-size:11px}
.expedition-panel>.combat-status .bar{height:7px;margin:3px 0 4px}
.expedition-panel>.combat-status .bar[style]{height:3px}
.expedition-panel>.combat-status .details{display:flex;justify-content:space-between;gap:4px;flex-wrap:wrap;font-size:9px;line-height:1.2}
.expedition-panel>.combat-status .details span{overflow-wrap:anywhere}
@media(max-width:520px){
  .expedition-panel>.combat-status{gap:5px;margin-bottom:7px}
  .expedition-panel>.combat-status>section{padding:6px}
  .expedition-panel>.combat-status .name{font-size:10px}
  .expedition-panel>.combat-status .details{font-size:8px}
}


/* v0.8.0 — dense, artwork-forward game dashboard. */
main{max-width:1600px;row-gap:8px;column-gap:9px;padding-top:8px}
main>header{padding:0 2px 4px}
main>header small{font-size:10px}
main>section{padding:9px 10px}
main>section h2{margin-bottom:5px;font-size:13px}
main>section h3{margin:7px 0 5px;font-size:12px}
main>section .muted{font-size:10px;line-height:1.25}
main>.expedition-panel{grid-column:span 6}
main>.ascension-panel{grid-column:span 6}
main>.skills{grid-column:span 5}
main>.upgrades{grid-column:span 7}
.expedition-panel>.combat-status{margin-bottom:5px;gap:5px}
.expedition-panel>.combat-status>section{padding:5px 7px}
.expedition-panel>.combat-status h2{font-size:9px;margin-bottom:2px}
.expedition-panel>.combat-status .name{margin-bottom:2px;font-size:10px}
.expedition-panel>.combat-status .bar{height:6px;margin:2px 0}
.expedition-panel>.combat-status .details{font-size:9px;line-height:1.1}
/* The canvas keeps its original 640×300 render resolution; only its displayed size changes. */
.expedition-panel>.arena{width:min(100%,440px);margin-inline:auto}
.expedition-panel>.arena canvas{width:100%;height:auto;aspect-ratio:640/300}
.expedition-panel .arena-caption{padding:3px 6px;font-size:9px}
.expedition-panel .controls{margin-top:5px;gap:5px}
.expedition-panel .controls button{padding:5px 8px;font-size:10px}
.expedition-panel .message{margin-top:4px;min-height:0;font-size:10px;line-height:1.2}
.ascension-panel .upgrade-header p{margin-bottom:5px}
.ascension-panel .ascension-stats{margin:5px 0;gap:5px}
.ascension-panel .ascension-stats>div{padding:5px 7px}
.ascension-panel .ascension-stats strong{font-size:13px}
.ascension-panel .ascension-actions{margin:5px 0;gap:5px}
.ascension-panel .upgrade-grid{gap:5px}
.ascension-panel .upgrade{padding:6px;gap:3px}
.ascension-panel .upgrade small{font-size:9px;line-height:1.2}
.ascension-panel .upgrade button{padding:5px;font-size:10px}
.skills .skill-list,.upgrades .upgrade-grid{margin-top:5px;gap:6px}
/* Preserve large skill and upgrade illustrations as the focal point. */
.skills .skill-icon,.upgrades .upgrade-icon{flex-shrink:0}
.upgrades .upgrade{min-height:0;padding:7px;gap:4px}
.upgrades .upgrade-head{gap:7px}
.upgrades .upgrade-head-info>small{line-height:1.2}
.upgrades .upgrade button{padding:6px 5px}
main>.talent-launch{padding:8px 10px}
main>.equipment-panel{padding:9px 10px}
@media(min-width:1101px){
 main>.expedition-panel{grid-column:span 6}
 main>.ascension-panel{grid-column:span 6}
 main>.skills{grid-column:span 5}
 main>.upgrades{grid-column:span 7}
}
@media(min-width:1500px){.expedition-panel>.arena{width:min(100%,490px)}}
@media(min-width:721px) and (max-width:1100px){
 main>.expedition-panel,main>.ascension-panel,main>.skills,main>.upgrades{grid-column:span 1}
 .expedition-panel>.arena{width:min(100%,430px)}
}
@media(max-width:720px){
 main{gap:7px}
 main>section{padding:8px}
 .expedition-panel>.arena{width:min(100%,440px)}
 .expedition-panel .controls button{padding:6px 7px}
}