/* LA BATALLA DE LOS CLANES — ajuste visual global. Se carga despues de la Etapa 8.
   No cambia el motor, las reglas, el audio ni la persistencia. */
:root{--ui-gap:12px;--ui-line:#425b66;--ui-surface:#10202a;--ui-cream:#e6d8b8}

/* 1. Campo de batalla: no permitir que selectores heredados rompan el dock. */
@media(min-width:801px){
  #gameView.active,.onlineApp.duelMode #arena{
    grid-template-rows:50px 34px minmax(0,1fr) auto;
    gap:7px;
    padding:8px 12px;
    min-height:calc(100dvh - 44px);
    height:calc(100dvh - 44px);
  }
  .onlineApp.duelMode #arena{grid-template-rows:50px auto auto auto 34px auto minmax(0,1fr) auto;}
  .duelMode .duelDock,.onlineApp.duelMode .duelDock{
    display:grid;
    grid-template-areas:none!important;
    grid-template-columns:minmax(380px,1.45fr) minmax(180px,.75fr) 146px!important;
    grid-auto-rows:auto;
    gap:10px;
    padding:8px 10px;
    min-height:0;
    margin:0;
    overflow:visible;
    align-items:start;
  }
  .duelMode .duelDock>.handPanel,
  .duelMode .duelDock>.legendDock,
  .duelMode .duelDock>.onlineRune,
  .duelMode .duelDock>.actionDock{grid-area:auto!important;grid-column:auto!important;grid-row:auto!important;max-width:100%;min-width:0}
  .duelMode .duelDock .handPanel .hand{display:flex!important;flex-wrap:nowrap!important;min-height:0!important;padding:3px 0 0!important;justify-content:flex-start!important;gap:7px;overflow-x:auto}
  .duelMode .handCard,.onlineApp #hand[data-count="5"] .handCard{min-width:72px;max-width:90px;width:clamp(72px,7.4vw,90px);flex:0 0 clamp(72px,7.4vw,90px)}
  .duelMode .handCard img{height:80px!important}
  .duelMode .handStats{top:59px!important}
  .duelMode .handCard .assignment{font-size:9px;min-height:0;max-height:27px;overflow:hidden}
  .duelMode .dockLabel{display:flex;flex-wrap:nowrap;gap:6px;align-items:baseline;margin:0 0 4px;line-height:1.25}
  .duelMode .dockLabel #deploymentHint{display:none!important}
  .duelMode .handPanel::after{content:'Selecciona una carta y pulsa un territorio, o arrástrala.';display:block;font-size:10px;color:#b1c6cc;margin-top:4px}
  .duelMode .miniChoices{flex-wrap:nowrap;overflow-x:auto;align-items:start;gap:5px}
  .duelMode .miniChoice{flex-basis:46px;min-width:46px;max-width:46px}
  .duelMode .miniChoice img{height:42px}
  .duelMode .miniChoice span,.duelMode .miniChoice small{line-height:1.15}
  .duelMode .targetArea{max-height:70px;overflow:auto}
  .duelMode .actionDock{display:flex;flex-direction:column;gap:5px;justify-content:flex-start}
  .duelMode .actionDock button{font-size:11px;min-height:34px;max-height:none;padding:7px 6px}
  .duelMode #confirmRound{min-height:40px}
  .duelMode .mapsBoard{min-height:0;overflow:hidden;align-items:stretch;gap:8px}
  .duelMode .mapCard{display:grid;grid-template-rows:minmax(100px,1fr) auto minmax(110px,1.1fr);min-height:0;height:100%;overflow:hidden}
  .duelMode .enemySide,.duelMode .playerSide{height:auto;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:6px 8px;gap:4px}
  .duelMode .laneUnits{min-height:0;max-height:none;grid-auto-rows:95px;overflow:auto;flex:1;align-content:start}
  .duelMode .miniUnit{height:94px;min-height:94px}
  .duelMode .territoryCore{min-height:0;height:auto;max-height:150px;overflow:visible;flex:none}
  .duelMode .mapHero{min-height:48px;height:48px}
  .territoryObjective summary{padding:5px 2px;font-size:10px}
  .mapInfo summary{padding:3px 7px}
  .duelMode .liveStats{padding:3px 7px}
  .duelMode .laneResult{padding:2px 4px}
  .duelMode .dropHint{font-size:8px;padding:4px}
  .duelMode .gameMeta{min-height:34px}
  .onlineApp.duelMode .onlineMain{max-width:none;padding:6px 12px}
  .onlineApp.duelMode .onlineHeader{padding:5px 12px;min-height:42px}
  .onlineApp.duelMode #arena{height:calc(100dvh - 42px);min-height:calc(100dvh - 42px);padding:6px 0}
  .onlineApp.duelMode #arena #eventObjective:empty,.onlineApp.duelMode #arena #modeBanner:empty{display:none}
  .onlineApp.duelMode #arena .roundReport{max-height:36px;overflow:visible}
  .onlineApp.duelMode #arena .roundReport[open]{position:absolute;top:85px;right:14px;z-index:25;width:min(650px,80vw);max-height:55dvh;overflow:auto;box-shadow:0 14px 40px #000b}
  .onlineApp.duelMode #arena .modeBanner{max-height:43px;overflow:auto}
  .onlineApp.duelMode #arena .eventObjective{padding:6px 10px;min-height:0;margin:0;max-height:72px;overflow:auto}
  .onlineApp.duelMode #arena .eventObjective>img{width:40px;height:44px}
  .onlineApp.duelMode #arena .eventObjective strong{font-size:13px}
  .onlineApp.duelMode #arena .eventObjective p{margin:3px 0;font-size:10px}
  .onlineApp.duelMode #arena .invasionCampaign{padding:8px 10px;margin:0;max-height:84px;overflow:auto}
  .onlineApp.duelMode #arena .invasionCampaign h3{font-size:15px;margin:0}
  .onlineApp.duelMode #arena .invasionCampaign p,.onlineApp.duelMode #arena .invasionCampaign small{font-size:10px}
  .onlineApp.duelMode #arena .invasionCampaign progress{margin:4px 0;height:6px}
}
@media(min-width:801px) and (max-height:770px){
  #gameView.active{grid-template-rows:45px 31px minmax(0,1fr) auto;padding-top:4px;padding-bottom:5px;gap:5px}
  .duelMode .duelHud{min-height:42px}
  .duelMode .duelHud .duelist img{height:33px;width:29px}
  .duelMode .duelHud .duelCrest strong{font-size:19px}
  .duelMode .mapCard{grid-template-rows:minmax(90px,1fr) auto minmax(90px,1.1fr)}
  .duelMode .miniUnit{height:80px;min-height:80px}
  .duelMode .laneUnits{grid-auto-rows:80px}
  .duelMode .mapHero{height:40px;min-height:40px}
  .duelMode .mapTitle{font-size:11px;padding-bottom:4px}
  .duelMode .territoryScore b{font-size:15px}
  .duelMode .laneResult{font-size:7px}
  .duelMode .handCard img{height:72px!important}
  .duelMode .handStats{top:51px!important}
  .duelMode .duelDock{padding:6px 8px;gap:8px}
  .duelMode .duelDock .handPanel .hand{gap:5px}
}

/* 2. Héroes: colección de la izquierda y ficha editable de la derecha. */
#progressView>.panel{padding:16px}
#progressView .progressHead{align-items:center;margin-bottom:8px}
#progressView .progressHead p.small{max-width:820px;margin:6px 0}
#progressView .searchField{max-width:420px;margin:8px 0 12px}
.arsenalBalance{gap:12px;padding:10px 13px;border-radius:9px}
.arsenalBalance strong{font-size:16px}
.arsenalBalance span{font-size:11px;line-height:1.4}
.arsenalMaster{min-width:0}
.arsenalMaster .heroCollection{margin:0;gap:8px}
.arsenalMaster .collectionCard{padding:6px;border-radius:9px}
.arsenalMaster .collectionCard img{aspect-ratio:1.1/1;object-position:center 20%}
.arsenalMaster .collectionCard strong{font-size:13px;margin-top:4px}
.arsenalMaster .collectionCard small{font-size:10px;min-height:0;margin-top:3px;line-height:1.3}
.arsenalMaster .cardQuickStats{font-size:10px;margin-top:4px}
.arsenalMaster .factionSeal{font-size:11px;top:8px;right:8px;padding:3px 6px}
.arsenalMaster .heroSheet{padding:14px;border-radius:12px;margin:0;min-width:0}
.heroSheet>header{grid-template-columns:130px minmax(0,1fr);gap:14px}
.heroSheet>header>img{width:130px}
.heroSheet .heroFacts h2{font-size:25px;margin:3px 0}
.heroSheet .heroFacts p{font-size:12px;line-height:1.45;margin:6px 0}
.heroSheet .detailStats{gap:6px}
.heroSheet .detailStats>div{padding:6px;font-size:10px;min-width:49px}
.heroSheet .detailStats>div b{font-size:16px}
.heroLore,.heroUnlocks,.legendaryMissions{background:#101d25;border:1px solid #405762;border-radius:8px;margin:9px 0;min-width:0}
.heroLore summary,.heroUnlocks summary,.legendaryMissions summary{padding:9px 11px;line-height:1.3;color:#e7d2a5;font-size:12px;font-weight:600}
.heroLore[open],.heroUnlocks[open]{padding-bottom:8px}
.heroLore[open]>:not(summary),.heroUnlocks[open]>:not(summary){margin:6px 12px}
.heroLore h3{font-size:14px;margin:12px 0 4px}
.heroLore p,.heroUnlocks p{font-size:12px;line-height:1.45}
.heroProgressSummary{font-size:12px;color:#c9deb8}
.heroEditorGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.heroStatsEdit,.heroRuneEdit{padding:12px;background:#101e27;border:1px solid #344d59;border-radius:10px;min-width:0}
.heroEditorGrid h4{font:16px Georgia,serif;color:#e8cf9a;margin:0 0 8px}
.heroStatsEdit>.small{font-size:11px;line-height:1.35;margin:0 0 9px}
.heroStatsEdit .upgradeGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px}
.heroStatsEdit .upgradeCell{padding:6px!important;min-width:0;border-radius:7px}
.heroStatsEdit .upgradeCell>strong{font-size:20px;margin:3px 0}
.heroStatsEdit .upgradeCell>small{font-size:10px;line-height:1.45}
.heroStatsEdit .upgradeCell button{min-height:30px;padding:1px}
.heroStatsEdit .upgradeActions{gap:6px}
.heroStatsEdit .upgradeActions button{font-size:10px;min-height:36px;padding:7px}
.heroRuneEdit .equipSlot{padding:8px;margin:8px 0;border-radius:8px}
.heroRuneEdit .equipSlot label{font-size:11px}
.heroRuneEdit select{font-size:11px;min-height:36px;padding:6px}
.heroRuneEdit .equipSlot button{font-size:10px;min-height:34px}
.heroRuneEdit .equipComparison,.heroStatsEdit .equipComparison{padding:9px;font-size:11px}
.heroRuneEdit .equipComparison>div{gap:5px}
.legendaryMissions{margin:14px 0}
.legendaryMissions summary{display:flex;justify-content:space-between;gap:14px;align-items:center}
.legendaryMissions summary span{font-size:11px;color:#96d8b6}
.legendaryMissions>.missionGrid{padding:10px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:8px}
.legendaryMissions>.missionGrid .missionCard{padding:10px;grid-template-columns:54px 1fr;gap:10px}
.legendaryMissions>.missionGrid .missionCard img{width:54px;max-height:80px;object-fit:cover}
.legendaryMissions>.missionGrid .missionCard h4{font-size:14px;margin:0 0 3px}
.legendaryMissions>.missionGrid .missionCard p{font-size:10px;margin:3px 0}
@media(min-width:1025px){
  #progressCards.arsenalMaster,#accountHeroes.arsenalMaster{display:grid!important;grid-template-columns:minmax(230px,.75fr) minmax(0,1.75fr)!important;grid-template-areas:"balance balance" "collection sheet";gap:12px;align-items:start}
  .arsenalMaster>.arsenalBalance{grid-area:balance}
  .arsenalMaster>.heroCollection{grid-area:collection;grid-template-columns:repeat(2,minmax(0,1fr));max-height:calc(100dvh - 240px);overflow-y:auto;overscroll-behavior:contain;padding-right:3px;scrollbar-width:thin}
  .arsenalMaster>.heroSheet{grid-area:sheet}
}
@media(min-width:1025px) and (max-width:1400px){
  #progressCards.arsenalMaster,#accountHeroes.arsenalMaster{grid-template-columns:minmax(215px,.75fr) minmax(0,1.7fr)!important}
  .heroEditorGrid{grid-template-columns:1fr}
}
@media(max-width:1024px){
  #progressCards.arsenalMaster,#accountHeroes.arsenalMaster{display:flex!important;flex-direction:column;align-items:stretch;gap:12px}
  .arsenalMaster>.heroCollection{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
  .heroEditorGrid{grid-template-columns:1fr 1fr}
}

/* 3. Inventario: filtros juntos, runas a la izquierda, detalle a la derecha. */
#accountInventory.ownedInventory{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);grid-template-areas:"filters filters" "items inspector";align-items:start;gap:12px;min-width:0}
#accountInventory.ownedInventory>.inventoryFilters{grid-area:filters;margin:0;gap:8px}
#accountInventory.ownedInventory>.inventoryGrid{grid-area:items;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0}
#accountInventory.ownedInventory>.runeInspector{grid-area:inspector;margin:0;min-width:0;max-height:75dvh;overflow:auto;padding:12px;border-radius:10px}
#accountInventory .runePanel{padding:8px;gap:8px;align-items:center;border-radius:9px}
#accountInventory .runePanel img{width:58px;height:70px;object-fit:contain;flex:none}
#accountInventory .runePanel strong{font-size:12px;line-height:1.25;margin:2px 0}
#accountInventory .runePanel small{font-size:10px;line-height:1.3;margin:4px 0}
#accountInventory .runeInspector:empty{display:none}
#accountInventory .runeInspector:empty + *{margin-top:0}
#accountInventory.ownedInventory:has(>.runeInspector:empty)>.inventoryGrid{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
#accountInventory.ownedInventory:has(>.runeInspector:empty)>.runeInspector{display:none}
#accountInventory .runeInspector h3{font-size:18px;margin:0 0 8px}
#accountInventory .runeInspector button{width:100%;margin-top:6px}
#inventoryPanel>h2,#heroesPanel>h2,#friendsPanel>h2{font-size:25px;margin:5px 0 12px}
#accountProfile{margin-top:12px;padding:8px 12px;border:1px solid var(--ui-line);border-radius:10px}
#accountProfile summary{padding:5px;font-size:11px}

/* 4. Secciones de juego: nada de grandes carteles duplicados. */
.onlineMain{width:100%;max-width:1540px}
.onlineLobby,.onlineApp .entryPanel,.socialHub{max-width:1150px}
.onlineLobby{margin:14px auto}
.onlineLobby>p{font-size:12px}
.entryPanel,.socialHub{padding:16px;border-radius:12px;margin:10px auto}
.entryPanel label{margin:8px 0;font-size:12px}
.entryPanel input,.entryPanel select{padding:8px;font-size:12px;min-height:38px;margin-top:4px}
.onlineRules{margin:10px 0;font-size:11px;line-height:1.45}
.lobbySteps{gap:5px;margin:8px 0}
.lobbySteps li{padding:7px 8px;font-size:11px}
.hubForm{padding:10px;margin:9px 0;gap:10px}
.hubForm label{font-size:11px}
.hubCard{margin:5px 0;padding:12px}
.hubCard h3{font-size:19px;margin:4px 0}
.hubCard h2{font-size:23px}
.hubCard p,.emptyHub{font-size:11px;line-height:1.5}
.hubGrid{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:9px}
.hubTabs{padding:10px 0;gap:5px}
.hubTabs button{padding:8px 12px;font-size:11px}
.memberRow{padding:7px 0}
.memberRow p{font-size:11px}
.rosterMember{padding:8px;font-size:11px}
.tournamentActions{gap:6px}
.bracket{gap:10px}
.bracketMatch{padding:9px;margin-bottom:8px}
.bracketRound{min-width:165px}
.bracketRound h3{font-size:12px}
.mainHubGrid{gap:10px;grid-template-columns:repeat(4,minmax(0,1fr))}
.hubTile{min-height:120px;padding:13px;gap:5px;border-radius:11px}
.hubTile>span{font-size:21px}
.hubTile strong{font-size:17px;letter-spacing:.3px}
.hubTile small{font-size:11px;line-height:1.35}
.profileHeader{padding:6px 0 12px;margin:0 0 12px;gap:8px}
.profileHeader img{width:46px;height:58px}
.profileHeader strong{font-size:16px}
.profileHeader p{font-size:11px;margin:2px 0}
.profileHeader>button{font-size:10px;min-height:36px}
.dailyPanel{padding:12px;margin:12px 0}
.dailyPanel header{margin-bottom:8px}
.dailyPanel h3{font-size:18px;margin:0 0 5px}
.dailyGrid{gap:7px}
.dailyMission{padding:10px}
.dailyMission strong{font-size:13px}
.dailyMission p,.dailyPanel small{font-size:11px;line-height:1.4}
.dailyMission progress{height:7px;margin:8px 0 4px}
.dailyMission span{font-size:10px}
.arenaHeading{padding:12px 0 8px;max-width:100%}
.arenaHeading h1,.preparationHeading h1{font-size:clamp(24px,2.6vw,34px);margin:2px 0}
.arenaHeading p,.preparationHeading p{font-size:12px;line-height:1.4}
.arenaFilters{gap:6px;margin:0 0 10px}
.arenaFilters button{min-height:36px;padding:7px 10px;font-size:11px}
.arenaCatalog{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.arenaOption{border-radius:10px}
.arenaArt{height:140px}
.arenaOption[data-mode-card=champions] .arenaArt{height:160px}
.arenaOptionBody{padding:12px;gap:8px}
.arenaOptionBody h2,.arenaOption[data-mode-card=champions] .arenaOptionBody h2{font-size:20px}
.arenaOptionBody p{font-size:11px;line-height:1.45}
.arenaMeta{gap:5px;font-size:10px}
.arenaMeta span{padding:3px 5px}
.arenaActions{gap:5px}
.arenaActions button{min-height:35px;padding:7px 8px;font-size:11px}
.arenaType,.arenaFormat{padding:4px 7px;font-size:10px}
.arenaFootnote{font-size:11px;line-height:1.4;margin:10px 0}
.modePreparation{padding:10px 0 30px}
.preparationHeading{padding:14px}
.preparationHeading #prepStatus{font-size:12px;margin-top:8px}
.draftMaps{gap:7px;margin:10px 0}
.draftMaps img{height:70px}
.draftMaps article{gap:4px;padding-bottom:5px}
.draftMaps strong,.draftMaps small{padding:0 8px;font-size:11px;line-height:1.35}
.draftSelections{gap:10px;margin:12px 0}
.draftSelections article{padding:10px}
.draftSelections p{font-size:11px;line-height:1.4}
.draftPool{gap:10px;margin-bottom:12px}
.draftChoice{gap:5px;padding-bottom:10px}
.draftChoice img{height:135px}
.draftChoice strong{font-size:17px}
.draftChoice span,.draftChoice small{font-size:11px;line-height:1.35}
.draftChoice>strong,.draftChoice>span,.draftChoice>b,.draftChoice>small{padding:0 9px}
.campRoster{gap:10px;margin:12px 0}
.campRoster img{height:105px}
.campRoster article{gap:5px;padding-bottom:8px}
.campRoster strong,.campRoster span{font-size:11px;padding:0 8px}

/* 5. Arena de campeones: prioridad para el escenario y las decisiones. */
.championHeading{margin:6px 0}
.championHud{gap:10px;margin-bottom:6px}
.championVitals{padding:7px 9px}
.championName strong{font-size:16px}
.championStage{height:clamp(230px,calc(100svh - 360px),480px);border-radius:10px}
.championControls{margin:8px 0;padding:9px}
.championActions{gap:7px}
.championJournal{margin:8px 0 28px}
.championJournal details{padding:8px 12px;margin:6px 0}

/* 6. No sacrificar accesibilidad ni causar desbordamiento en laptop y móvil. */
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid #c9e6e1;outline-offset:2px}
.onlineApp dialog,.modalCard{max-height:90dvh;overflow:auto}
@media(max-width:1100px){
  .mainHubGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .arenaCatalog{grid-template-columns:repeat(2,minmax(0,1fr))}
  .arenaOption[data-mode-card=champions]{grid-column:span 2}
  #accountInventory.ownedInventory{grid-template-columns:1fr;grid-template-areas:"filters" "items" "inspector"}
  #accountInventory.ownedInventory>.inventoryGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .heroEditorGrid{grid-template-columns:1fr}
}
@media(max-width:800px){
  .mainHubGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heroEditorGrid{grid-template-columns:1fr}
  .heroSheet>header{grid-template-columns:110px minmax(0,1fr);gap:10px}
  .heroSheet>header>img{width:110px}
  .duelMode .handPanel::after{display:none}
}
@media(max-width:540px){
  .mainHubGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .hubTile{padding:10px;min-height:108px}
  .hubTile strong{font-size:14px}
  .hubTile small{font-size:10px}
  .heroSheet>header{grid-template-columns:1fr}
  .heroSheet>header>img{width:110px}
  .arenaCatalog{grid-template-columns:1fr}
  .arenaOption[data-mode-card=champions]{grid-column:auto}
  .draftPool{grid-template-columns:repeat(2,minmax(0,1fr))}
  .campRoster{grid-template-columns:repeat(2,minmax(0,1fr))}
  #accountInventory.ownedInventory>.inventoryGrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.hubTile,.collectionCard,.arenaOption{transition:none!important}}

/* Informe de ronda disponible sin desplazar la batalla. */
#battleHighlights:not([hidden]){margin:0;min-height:0}
.roundSummary{border:1px solid #3c5965;border-radius:8px;background:#10222c}
.roundSummary>summary{padding:5px 9px;font-size:11px;line-height:1.35;color:#e6d5a9}
.roundSummary>.combatHighlights{padding:5px 8px 8px;gap:8px}
.roundSummary .combatHighlight{padding:10px}
@media(min-width:801px){
  #battleHighlights:not([hidden]){position:absolute;z-index:35;top:94px;right:12px;max-width:min(420px,46vw)}
  .roundSummary[open]{max-height:65dvh;overflow:auto;box-shadow:0 15px 35px #000b}
  .roundSummary[open] .combatHighlights{grid-auto-flow:row;grid-auto-columns:unset;grid-template-columns:1fr;overflow:visible}
  .onlineApp #battleHighlights:not([hidden]){top:140px;right:18px}
}
/* Correcciones a reglas antiguas con especificidad alta: eliminar alturas forzadas. */
@media(min-width:801px){
  .duelMode .duelDock>.handPanel{min-height:0!important;max-height:none;height:auto!important;align-self:start}
  .duelMode .duelDock>.legendDock{min-height:0!important;max-height:150px;overflow:auto}
  .duelMode .duelDock>.actionDock{min-height:0!important;align-self:stretch!important;align-items:stretch!important}
  .duelMode #confirmRound{
    width:100%!important;height:auto!important;min-height:42px!important;max-height:52px!important;
    padding:8px 6px!important;border-radius:9px!important;font-size:11px!important;
    background:linear-gradient(125deg,#b69860,#6c5a70)!important;
    box-shadow:0 2px 9px #0008!important;border:1px solid #dcc795!important;
  }
  .duelMode #combatDetails,.duelMode #abortDuel{min-height:30px;border:1px solid #3b5362;border-radius:6px;padding:5px;color:#d9e7ec;font-size:10px}
  .duelMode .handCard{height:auto!important;flex-shrink:0}
  .onlineApp.duelMode #arena{
    display:flex!important;flex-direction:column;justify-content:flex-start;gap:6px;
    height:calc(100dvh - 42px);min-height:calc(100dvh - 42px);
  }
  .onlineApp.duelMode #arena>.duelHud{flex:0 0 45px}
  .onlineApp.duelMode #arena>.gameMeta,.onlineApp.duelMode #arena>.modeBanner,
  .onlineApp.duelMode #arena>.roundReport,
  .onlineApp.duelMode #arena>#eventObjective{flex:0 0 auto}
  .onlineApp.duelMode #arena>.mapsBoard{flex:1 1 auto;min-height:0;overflow:hidden}
  .onlineApp.duelMode #arena>.duelDock{flex:0 0 auto}
}
/* Catálogo de runas local: mismo patrón que inventario online. */
#runeCatalog.ownedInventory{display:grid!important;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);grid-template-areas:"filters filters" "items inspector";align-items:start;gap:12px;min-width:0}
#runeCatalog.ownedInventory>.inventoryFilters{grid-area:filters;margin:0}
#runeCatalog.ownedInventory>.inventoryGrid{grid-area:items;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;min-width:0}
#runeCatalog.ownedInventory>.runeInspector{grid-area:inspector;min-width:0;margin:0;padding:12px}
#runeCatalog .runePanel{padding:8px;gap:8px;border-radius:9px;align-items:center}
#runeCatalog .runePanel img{height:62px;width:58px;flex:none;object-fit:contain}
#runeCatalog .runePanel strong{font-size:12px;margin:2px 0}
#runeCatalog .runePanel small{font-size:10px;line-height:1.3;margin:3px 0}
#runeCatalog.ownedInventory:has(>.runeInspector:empty)>.inventoryGrid{grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
#runeCatalog .runeInspector:empty{display:none}
#runeCatalog.ownedInventory:has(>.runeInspector:empty)>.runeInspector{display:none}
@media(min-width:1025px){.heroEditorGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){#runeCatalog.ownedInventory{grid-template-columns:1fr;grid-template-areas:"filters" "items" "inspector"}}
@media(max-width:540px){#runeCatalog.ownedInventory>.inventoryGrid{grid-template-columns:1fr}}
/* Barra de navegación táctil: mantener acceso a Héroes y demás secciones. */
@media(max-width:700px){
  body:not(.onlineApp){padding-bottom:74px}
  .sidebar,.duelMode .sidebar{
    display:block!important;position:fixed;inset:auto 0 0 0;width:100%;height:auto;min-height:66px;
    padding:4px 3px max(5px,env(safe-area-inset-bottom));
    z-index:100;background:#101e24;border:0;border-top:1px solid #556b70;
  }
  .sidebar .brand,.sidebar .navLabel,.sidebar .sidebarFoot{display:none!important}
  .sidebar .tabs,.duelMode .sidebar .tabs{display:flex!important;flex-direction:row;align-items:stretch;justify-content:space-between;gap:0}
  .sidebar .tab,.duelMode .sidebar .tab{display:flex!important;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 1px;min-width:0;min-height:54px}
  .sidebar .tab span,.duelMode .sidebar .tab span{display:block!important;font-size:9px;line-height:1.2}
  .sidebar .tab svg,.duelMode .sidebar .tab svg{width:19px;height:19px}
  .appShell,.duelMode .appShell{margin-left:0!important}
  .duelMode .mapsBoard{display:grid!important;grid-template-columns:1fr!important;overflow:visible!important;gap:12px}
  .duelMode .mapCard{display:flex!important;flex-direction:column;height:auto;min-height:330px;overflow:visible}
  .duelMode .laneSide{min-height:95px;height:auto}
  .duelMode .territoryCore{min-height:125px}
  .duelMode .duelDock{display:flex;flex-direction:column;height:auto;gap:12px}
  #gameView.active,.onlineApp.duelMode #arena{height:auto;min-height:calc(100dvh - 70px);display:flex;flex-direction:column;gap:10px}
}