/* Etapa 8 · Rebalanceo global de layout para escritorio y pantallas medianas. */
:root{
  --stage8-gap:clamp(10px,1.1vw,16px);
  --stage8-panel:rgba(12,24,34,.92);
  --stage8-edge:#3f5663;
  --stage8-soft:#91a9b7;
  --stage8-gold:#dcc58c;
}
body{font-size:13px;line-height:1.45;overflow-x:hidden}
main{max-width:1500px}
.sidebar{width:188px;padding:22px 14px}
.brand{margin-bottom:34px;font-size:13px;gap:9px}
.appShell{margin-left:188px}
.topbar{padding:13px 22px;min-height:66px}
.view{padding:20px 22px}
.panel{padding:18px}
.sectionIntro{font-size:12px;line-height:1.6;margin-bottom:16px}
.sectionTitle h2,h2{font-size:28px}

/* Inicio y pantallas locales */
.heroBanner{min-height:330px}
.heroCopy{width:min(62%,720px);padding:32px 30px}
.heroCopy h1{margin:20px 0 14px}
.heroCopy p{font-size:12px;line-height:1.65;max-width:420px}
.heroArtwork{top:48px;right:20px;height:245px;width:33%}
.heroArtwork img{max-height:240px}
.artLabel{left:18%;bottom:-10px;font-size:14px;padding:8px 18px}
.overviewStrip{padding:14px 10px;margin:18px 0 24px}
.overviewStrip b{font-size:24px}
.overviewStrip span{font-size:7px}
.clanGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.clanTile img{height:112px}
.homeBottom{gap:12px;margin-top:18px}
.featurePanel{padding:14px;gap:14px}
.featurePanel h3{font-size:18px;margin:3px 0}
.setupPanel,.statusPanel{max-width:1040px}
.setupGrid{gap:12px}
.rules{padding:10px 12px;margin:12px 0}

/* Vista de héroes local */
.progressHead{align-items:end;gap:16px;flex-wrap:wrap}
.progressHead>div:first-child{flex:1;min-width:260px}
.searchField{min-width:240px;display:grid;gap:6px}
.searchField input{width:100%;background:#0e171c;color:#eef2ef;border:1px solid #3d5155;border-radius:8px;padding:9px 11px}
#progressCards,.progressCards{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
#progressCards>.heroManageCard,.progressCards>.heroManageCard,.progressCard,.heroManageCard{width:100%;max-width:none}
.heroManageCard,.progressCard{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:12px;background:#111a20;border:1px solid #314248;border-radius:12px;min-width:0}
.heroManageCard>img,.progressCard img{width:112px!important;height:150px!important;object-fit:cover;border-radius:8px}
.heroManageBody,.progressCard>div{min-width:0}
.upgradeGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:6px}
.upgradeCell{padding:7px!important}
.upgradeCell button{min-height:30px}
.activeRunes{max-height:120px}
.runeSlot{grid-template-columns:58px 1fr}

/* Hub online y paneles generales */
.onlineHeader{padding:11px 20px;gap:12px}
.onlineHeader a{font-size:20px}
.onlineHeader a span{font-size:9px}
.onlineMain{padding:16px 20px;max-width:1500px}
.onlineLobby,.entryPanel,.socialHub,.accessPanel{max-width:1100px}
.entryPanel,.socialHub,.accessPanel{padding:20px;border-radius:18px}
.profileHeader{gap:14px;padding:12px 0 18px;margin-bottom:20px}
.profileHeader img{width:54px;height:68px}
.profileHeader strong{font-size:18px}
.profileHeader p{font-size:12px}
.mainHubGrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hubTile{min-height:145px;padding:18px;gap:9px;border-radius:14px}
.hubTile>span{font-size:26px}
.hubTile strong{font-size:20px;letter-spacing:1px}
.hubTile small{font-size:12px;line-height:1.45}
.dailyPanel{margin:18px 0;padding:18px;border-radius:14px}
.dailyPanel h3{font-size:22px}
.dailyPanel small,.dailyMission p,.combatHighlight p{font-size:12px;line-height:1.55}
.dailyGrid,.combatHighlights{gap:10px}
.combatHighlight,.dailyMission,.friendRow,.hubCard{padding:14px;border-radius:12px}
.friendRow{margin:8px 0}
.onlineRules{font-size:12px;line-height:1.55}
#accountHeroes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
#accountHeroes>.heroManageCard{margin:0}
#accountInventory,.inventoryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#accountInventory .runePanel,.inventoryGrid .runePanel{height:100%}
.inventoryGrid{width:100%}
.heroFacts{grid-template-columns:minmax(120px,185px) minmax(0,1fr);gap:18px}
.heroFacts h2{font-size:28px}
.heroFacts p{font-size:13px;line-height:1.55}
.heroFacts .detailStats>div{padding:8px}
.heroFacts .detailStats b{font-size:18px}

/* Lobby y comunidad */
.lobbySteps{gap:8px;margin:14px 0}
.lobbySteps li{padding:10px 8px;font-size:12px}
.entryActions{gap:10px}
.entryActions button{min-height:40px}
.socialHub{margin:18px auto}
.hubGrid{gap:12px}
.hubForm{gap:12px;margin:14px 0;padding:14px}
.bracket{gap:12px}
.bracketRound{min-width:170px}
.bracketMatch{padding:12px}

/* Arena / combate: compactar y priorizar campo visible */
body.duelMode .topbar{padding:8px 14px;min-height:44px;height:44px}
body.duelMode .profileBox{width:150px;font-size:10px}
body.duelMode .soundButton{padding:5px 8px}
body.duelMode .appShell{margin-left:62px}
#gameView.active,.onlineApp #arena{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:8px;
  padding:8px 12px 10px;
  min-height:calc(100dvh - 44px);
  height:calc(100dvh - 44px);
  align-content:stretch;
}
.onlineApp #arena.hidden{display:none!important}
.duelHud{gap:12px;align-items:center}
.duelist{gap:8px}
.duelist img{width:34px;height:42px}
.duelist span{font-size:8px;letter-spacing:.6px}
.duelist strong{font-size:14px}
.duelist>b{font-size:22px;min-width:38px;padding:2px 8px}
.duelCrest>span{font-size:8px}
.duelCrest strong{font-size:22px;letter-spacing:4px}
.duelCrest small{font-size:7px;letter-spacing:.7px}
.gameMeta,.duelMode .gameMeta{padding:6px 10px!important;font-size:11px;gap:8px;min-height:34px}
.duelMode #roundLabel{font-size:11px}
.duelMode #roundStatus{font-size:11px;line-height:1.3}
.duelMode #roundCountdown{padding:5px 8px;font-size:11px}
#battleHighlights{min-height:0}
.combatHighlights{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(250px,1fr);
  grid-template-columns:none;
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.combatHighlights>p{font-size:12px;padding:10px}
.combatHighlight{min-width:0;height:100%}
.combatHighlight h4{font-size:17px;margin-bottom:7px}
.combatHighlight>strong{font-size:12px;line-height:1.45}
.combatHighlights details summary{font-size:11px}
.roundReport{margin:0;border:1px solid #3e5560;border-radius:10px;background:#0f1c29;color:#d5dde6}
.roundReport summary{padding:7px 10px;font-size:11px}
.roundReport[open]{padding-bottom:8px}
.roundReport[open] > div{padding:0 10px 8px}
.modeBanner{padding:6px 10px;margin:0;border-radius:10px;font-size:11px;line-height:1.35}
#eventObjective:empty{display:none}
.eventObjective,.invasionCampaign{padding:12px 14px;margin:0 0 4px;border-radius:12px;gap:14px}
.eventObjective>img{width:60px;height:68px}
.eventObjective strong{font-size:16px}
.eventObjective p,.invasionCampaign small{font-size:12px;line-height:1.5}
.invasionCampaign h3{font-size:21px;margin:6px 0}
.invasionCampaign progress,.eventLife progress{height:10px}
.mapsBoard,.duelMode .mapsBoard{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0;align-items:stretch;overflow:hidden}
.duelMode .mapCard{display:flex;flex-direction:column;min-height:0;height:100%;border-radius:12px;overflow:hidden;border:1px solid var(--stage8-edge);background:linear-gradient(180deg,rgba(16,27,46,.95),rgba(9,20,36,.96));box-shadow:0 5px 18px #0005}
.duelMode .laneSide{padding:7px 8px;min-height:116px;height:auto;gap:5px}
.duelMode .laneSide h4{font-size:10px;line-height:1.25}
.duelMode .laneSide h4 span{font-size:9px}
.duelMode .laneUnits{grid-auto-rows:104px;min-height:104px;max-height:228px;gap:6px;overflow:auto;align-content:start}
.duelMode .miniUnit{height:104px;min-height:104px;border-radius:6px}
.duelMode .miniUnit img{object-position:50% 22%}
.unitOverlay{bottom:18px;padding:12px 3px 3px;background:linear-gradient(transparent,#081117 38%)}
.unitOverlay strong{font-size:9px;line-height:1.18;white-space:nowrap}
.unitOverlay span,.unitOverlay b{font-size:8px;line-height:1.1}
.unitRound{font-size:7px}
.unitRunes{font-size:8px;padding:1px 3px}
.unitHealth{height:14px}
.unitHealth>small{font-size:8px;line-height:13px}
.emptyFormation{font-size:8px;min-height:42px}
.dropHint{font-size:9px;line-height:1.2;padding:5px 4px}
.duelMode .territoryCore{min-height:126px;border-top:1px solid #4c5e6b;border-bottom:1px solid #4c5e6b}
.duelMode .mapHero{height:56px;min-height:56px}
.duelMode .mapTitle{font-size:13px;line-height:1.1;padding:6px 34px 7px}
.territoryObjective summary{padding:7px 0;font-size:11px}
.territoryObjective p{font-size:11px;line-height:1.45}
.mapInfo summary{font-size:9px;padding:4px 7px}
.mapInfo>div{top:22px;padding:8px;font-size:11px;line-height:1.35}
.liveStats{padding:5px 8px;gap:8px}
.liveStats>span{font-size:7px;max-width:none}
.liveStats>div{gap:10px}
.liveStats b{font-size:16px}
.liveStats small{font-size:7px}
.laneResult{padding:4px 6px;font-size:8px;gap:5px}
.laneResult strong{font-size:11px}
.laneResult span{font-size:7px}
.territoryScore{top:6px;padding:2px 5px;border-radius:6px}
.territoryScore b{font-size:17px}
.territoryScore span{font-size:6px}
.synergyBadges{padding:3px 7px}
.synergyBadges details,.synergyBadges p{font-size:10px}
.duelDock{
  grid-template-columns:minmax(0,1.55fr) minmax(170px,.75fr) 145px;
  gap:10px;
  min-height:0;
  padding:8px 10px;
  background:linear-gradient(180deg,rgba(10,23,38,.96),rgba(9,18,31,.96));
  border:1px solid #395062;
  border-radius:12px;
  align-items:start;
}
.duelMode .handPanel,.legendDock,.onlineRune,.actionDock{min-width:0}
.dockLabel{margin-bottom:4px;gap:8px;min-height:0}
.dockLabel strong{font-size:10px;letter-spacing:.7px}
.dockLabel span{font-size:10px}
.dockLabel small{font-size:9px;line-height:1.25}
.duelMode .hand{gap:8px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding:4px 2px 6px}
.duelMode .handCard,.onlineApp #hand[data-count="5"] .handCard{flex:0 0 92px;width:92px;max-width:92px;min-width:92px;padding:4px;border-radius:8px}
.duelMode .handCard img{height:92px}
.duelMode .handStats{top:70px;left:4px;right:4px}
.handStats span{min-width:20px;font-size:11px;padding:1px 3px}
.handStats small{font-size:5px}
.duelMode .cardMeta{font-size:9px;padding-top:4px;line-height:1.1}
.duelMode .assignment{font-size:8px;min-height:18px}
.duelMode .handDetail,.duelMode .removeAssign{width:22px;height:22px;min-height:22px;font-size:12px}
.legendDock,.onlineRune{padding-left:10px;border-left:1px solid #2e4658}
.duelMode .miniChoices{gap:6px;flex-wrap:wrap}
.duelMode .miniChoice{flex:0 0 54px;max-width:54px;padding:3px}
.duelMode .miniChoice img{height:46px}
.duelMode .miniChoice span{font-size:7px;margin-top:2px}
.duelMode .miniChoice small{font-size:6px}
.targetArea,.duelMode .targetArea,.onlineRune span,.onlineRune small{font-size:9px;line-height:1.3}
.onlineRune{display:grid;gap:6px;place-items:center;text-align:center;padding-right:2px}
.onlineRune img{width:52px;height:52px}
.onlineRune strong{font-size:12px}
.actionDock{justify-content:flex-start;gap:7px}
.actionDock button{min-height:36px;padding:8px 7px;font-size:10px;line-height:1.15}
.duelMode #confirmRound{min-height:38px;font-size:10px}
.rewardSummary{padding:14px;font-size:12px}
.resultNumbers,.roundReport,.combatReadout article{border-radius:10px}
.combatReadout article{padding:12px}
.combatReadout h4{font-size:17px}
.combatReadout p,.combatReadout li,.combatReadout summary{font-size:12px;line-height:1.5}

/* Ajustes de escritorio medio */
@media (max-width:1280px){
  .sidebar{width:170px}.appShell{margin-left:170px}
  .heroCopy{width:66%}.heroArtwork{width:30%;height:220px}
  .mainHubGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #accountHeroes,#accountInventory,.inventoryGrid,#progressCards,.progressCards{grid-template-columns:1fr 1fr}
  .duelDock{grid-template-columns:minmax(0,1.4fr) minmax(150px,.7fr) 132px}
  .duelMode .handCard,.onlineApp #hand[data-count="5"] .handCard{flex-basis:86px;width:86px;max-width:86px;min-width:86px}
  .duelMode .handCard img{height:84px}
  .duelMode .handStats{top:63px}
  .duelMode .laneUnits{grid-auto-rows:96px;min-height:96px;max-height:210px}
  .duelMode .miniUnit{height:96px;min-height:96px}
}
@media (max-width:1024px){
  .heroBanner{min-height:290px}.heroArtwork{display:none}.heroCopy{width:100%;max-width:none}
  .clanGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .homePrimary{grid-template-columns:1fr 1fr 1fr}
  .mainHubGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  #progressCards,.progressCards,#accountHeroes,#accountInventory,.inventoryGrid{grid-template-columns:1fr}
}
@media (max-width:800px){
  .sidebar{display:none}.appShell{margin-left:0}.topbar{padding:11px 14px;min-height:58px}.view{padding:16px 14px}
  .homePrimary{grid-template-columns:1fr}.clanGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.homeBottom{grid-template-columns:1fr}
  .setupGrid{grid-template-columns:1fr}
  .onlineMain{padding:12px}
  .mainHubGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .hubTile{min-height:130px;padding:16px}
  #gameView.active,.onlineApp #arena{height:auto;min-height:calc(100dvh - 44px);grid-template-rows:auto auto minmax(320px,1fr) auto}
  .combatHighlights{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr;overflow:visible}
  .mapsBoard,.duelMode .mapsBoard{gap:8px}
  .duelDock{grid-template-columns:1fr;gap:12px}
  .legendDock,.onlineRune{border-left:0;border-top:1px solid #2e4658;padding:10px 0 0}
  .actionDock{flex-direction:row}.actionDock button{flex:1}
  .duelMode .hand{flex-wrap:wrap;overflow:visible}
}
@media (max-width:540px){
  .mainHubGrid{grid-template-columns:1fr}
  .clanGrid,.homePrimary{grid-template-columns:1fr}
  .overviewStrip{grid-template-columns:repeat(2,1fr);gap:8px}.overviewStrip>div{border-right:0;border-bottom:1px solid var(--line);padding-bottom:8px}.overviewStrip>div:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}
  .heroManageCard,.progressCard{grid-template-columns:92px 1fr}.heroManageCard>img,.progressCard img{width:92px!important;height:126px!important}
}