/* CP1 structural shell. Existing mobile layout and gameplay controls are retained. */
#rpgBattlefield, #rpgUtilityRail { display:none; }
@media (min-width:1000px) {
  html body.battleMode.rpgArena .battleStage::before { display:none!important; }
  html body.battleMode.rpgArena #topPanel {
    left:120px!important; top:12px!important; width:1050px!important; height:66px!important;
  }
  html body.battleMode.rpgArena #youPanel, html body.battleMode.rpgArena #pcPanel {
    top:92px!important; bottom:auto!important; width:290px!important; height:526px!important;
    padding:0!important; margin:0!important; border:0!important; background:none!important;
    box-shadow:none!important; overflow:visible!important; transform:none!important;
  }
  html body.battleMode.rpgArena #youPanel { left:120px!important; }
  html body.battleMode.rpgArena #pcPanel { left:880px!important; }
  html body.battleMode.rpgArena #youPanel::before, html body.battleMode.rpgArena #youPanel::after,
  html body.battleMode.rpgArena #pcPanel::before, html body.battleMode.rpgArena #pcPanel::after { display:none!important; }
  html body.battleMode.rpgArena #youPanel > .partyHeader, html body.battleMode.rpgArena #pcPanel > .partyHeader { display:none!important; }
  html body.battleMode.rpgArena #youHeroes, html body.battleMode.rpgArena #pcHeroes {
    position:static!important; display:grid!important; grid-template-columns:minmax(0,1fr)!important;
    grid-auto-rows:max-content!important; align-content:start!important; gap:10px!important;
    width:100%!important; height:100%!important; margin:0!important; padding:2px 5px 4px 2px!important;
    overflow-x:hidden!important; overflow-y:auto!important; scrollbar-width:thin;
    scrollbar-color:#b6a878 #243326;
  }
  html body.battleMode.rpgArena #youHeroes > .hero, html body.battleMode.rpgArena #pcHeroes > .hero {
    width:100%!important; height:auto!important; min-height:165px!important;
    max-height:none!important; overflow:visible!important; padding:9px!important;
  }
  html body.battleMode.rpgArena #youHeroes > .hero::before, html body.battleMode.rpgArena #pcHeroes > .hero::before { display:none!important; }
  /* Let all existing information wrap inside the new single-column cards. */
  html body.battleMode.rpgArena #youHeroes .heroTop, html body.battleMode.rpgArena #pcHeroes .heroTop {
    display:flex!important; flex-wrap:wrap!important; gap:6px!important; height:auto!important;
  }
  html body.battleMode.rpgArena #youHeroes .heroIdentity, html body.battleMode.rpgArena #pcHeroes .heroIdentity { flex:1; min-width:140px!important; }
  html body.battleMode.rpgArena #youHeroes .heroTopAside, html body.battleMode.rpgArena #pcHeroes .heroTopAside { position:static!important; margin-left:auto; }
  html body.battleMode.rpgArena #youHeroes .heroTraitRow, html body.battleMode.rpgArena #pcHeroes .heroTraitRow { flex-wrap:wrap!important; }
  html body.battleMode.rpgArena #youHeroes .masteryArea, html body.battleMode.rpgArena #pcHeroes .masteryArea { position:static!important; height:auto!important; min-height:0!important; max-height:none!important; }
  html body.battleMode.rpgArena #youHeroes .masteries, html body.battleMode.rpgArena #pcHeroes .masteries { grid-template-columns:repeat(3,minmax(0,1fr))!important; height:50px!important; }
  html body.battleMode.rpgArena #youHeroes .heroActions, html body.battleMode.rpgArena #pcHeroes .heroActions {
    position:static!important; width:100%!important; flex-wrap:wrap!important; justify-content:start!important;
  }
  html body.battleMode.rpgArena #youHeroes .statusChips, html body.battleMode.rpgArena #pcHeroes .statusChips { max-height:none!important; height:auto!important; flex-wrap:wrap!important; }
  html body.battleMode.rpgArena #youHeroes .passiveBadge, html body.battleMode.rpgArena #youHeroes .pathBadge,
  html body.battleMode.rpgArena #pcHeroes .passiveBadge, html body.battleMode.rpgArena #pcHeroes .pathBadge { white-space:normal!important; max-width:100%!important; }
  html body.battleMode.rpgArena #rpgBattlefield {
    display:block; position:absolute; left:420px; top:92px; width:450px; height:526px;
    overflow:hidden; border:1px solid #9caa70; border-radius:5px;
    background:radial-gradient(ellipse at 50% 53%,#cfdb8999,transparent 58%),
      url('rpg-field.svg') center / cover #45683e;
    box-shadow:inset 0 0 60px #142b2e77,0 3px 12px #0004;
  }
  .fieldTeam { position:absolute; top:6px; bottom:6px; width:46%; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:4px; }
  #fieldYouSprites { left:0; }
  #fieldEnemySprites { right:0; }
  .fieldHero { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:end; min-height:0; }
  .fieldHero::before { content:''; position:absolute; bottom:19px; width:96px; height:24px; border-radius:50%; background:#14281966; border:2px solid #b9d79b66; }
  .fieldHero.isActiveSide::before { border-color:#d3eab0; box-shadow:0 0 16px #c7ef8f66; }
  .fieldHeroArt { position:relative; z-index:1; width:100%; height:calc(100% - 22px); object-fit:contain; filter:drop-shadow(0 5px 4px #12231988); }
  #fieldEnemySprites .fieldHeroArt { transform:scaleX(-1); }
  .fieldHeroLabel { position:relative; z-index:2; max-width:98%; color:#f5f2d5; background:#172b22e8; padding:3px 6px; border-radius:4px; font-size:11px; line-height:1.2; text-align:center; }
  .fieldHero.isUsed .fieldHeroLabel { color:#c9c7ba; }
  .fieldHero.isDefeated .fieldHeroArt { opacity:.25; filter:grayscale(1); }
  .fieldHero.isDefeated .fieldHeroLabel { color:#ffd0c5; }
  .fieldHero.isShielded::before { border-color:#a8e4ff; box-shadow:0 0 20px #70d4ff; }
  .fieldHero.isPoisoned .fieldHeroLabel { border:1px solid #ce9aee; }
  /* The transient run/attack/cast pose replaces the idle artwork while animating. */
  .fieldHero.isAnimating .fieldHeroArt { opacity:0!important; }
  .fieldHero.fxHit { animation:heroHit .34s ease-out; }
  .fieldHero.fxHeal { animation:heroHeal .55s ease-out; }
  .fieldHero.fxActAttack { animation:actorLunge .38s ease-out; }
  .fieldHero.fxActSupport { animation:actorCast .48s ease-out; }
  .fieldHero.fxActGuard { animation:actorGuard .48s ease-out; }
  .fieldHero.fxDefeat { animation:defeatFade .7s ease-out; }
  .fieldHero.fxShieldBreak { animation:shieldBreak .5s ease-out; }
  .fieldHero.fxLevelSurge { animation:levelCardSurge 2.08s cubic-bezier(.18,.88,.22,1); }
  html body.battleMode.rpgArena #rpgUtilityRail {
    display:flex; flex-direction:column; gap:8px; position:absolute; left:12px; top:20px;
    width:94px; height:598px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin;
  }
  html body.battleMode.rpgArena #rpgUtilityRail > .matZoneHud,
  html body.battleMode.rpgArena #rpgUtilityRail > .teamEffectsMatHud {
    display:flex!important; position:static!important; flex-direction:column!important; flex-shrink:0;
    width:100%!important; height:auto!important; min-height:65px!important; max-height:none!important;
    padding:7px 4px!important; margin:0!important; transform:none!important;
  }
  html body.battleMode.rpgArena #rpgUtilityRail .teamEffectsMatList { max-height:none!important; overflow:visible!important; }
  html body.battleMode.rpgArena #pcDeckHud { border-top:2px solid #dd998a!important; }
  html body.battleMode.rpgArena #logPanel, html body.battleMode.rpgArena #battleInfoPanel, html body.battleMode.rpgArena .footerActions {
    left:1184px!important; right:auto!important; width:400px!important;
  }
  html body.battleMode.rpgArena #handPanel { left:120px!important; top:636px!important; width:1050px!important; height:190px!important; }
  html body.battleMode.rpgArena #hand { grid-template-columns:repeat(7,minmax(0,1fr))!important; grid-auto-columns:minmax(0,1fr)!important; }
}
@media (prefers-reduced-motion:reduce) {
  .fieldHero { animation:none!important; transition:none!important; }
}