/* Illustrations and information have their own space. Keep replay targets on
   the card: animation controllers still own its transform and live numbers. */
.game-arena.has-battle-layout.has-art-panels .duel-stage { align-items:stretch; }
.game-arena.has-battle-layout.has-art-panels .duel-position { justify-content:flex-start; }
/* Share the card row between both sides. Tool names can wrap below it without
   stretching one combatant or moving its live attributes away from its rival. */
@supports (grid-template-rows:subgrid) {
  .game-arena.has-battle-layout.has-art-panels .duel-stage {
    grid-template-rows:auto auto auto auto;
    row-gap:0;
  }
  .game-arena.has-battle-layout.has-art-panels .duel-position {
    display:grid;
    grid-row:1 / span 4;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:subgrid;
    justify-content:stretch;
    justify-items:center;
    align-items:start;
  }
  .game-arena.has-battle-layout.has-art-panels .duel-side-label { grid-row:1; }
  .game-arena.has-battle-layout.has-art-panels .duel-card { grid-row:2; align-self:stretch; }
  .game-arena.has-battle-layout.has-art-panels .duel-multiplier { grid-row:3; }
  .game-arena.has-battle-layout.has-art-panels .duel-equipment { grid-row:4; }
  .game-arena.has-battle-layout.has-art-panels .duel-divider { grid-row:2; align-self:center; }
}
.game-arena.has-battle-layout.has-art-panels:is(.phase-plan,.phase-reveal,.phase-field) .duel-card {
  --combat-art-height:195px;
  width:235px;
  max-width:100%;
  height:auto;
  min-height:365px;
  flex:1;
  border:2px solid var(--race-color,#ab8b61);
  border-bottom-width:4px;
  border-radius:8px 14px 8px 14px;
  background:#192327;
  box-shadow:0 3px 0 #090f16,0 10px 20px #0006;
}
.game-arena.has-battle-layout.has-art-panels .duel-card.face-up {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding:0;
}
.game-arena.has-battle-layout.has-art-panels .duel-card::before { display:none; }
.game-arena .duel-card-art {
  position:relative;
  flex:none;
  width:100%;
  height:var(--combat-art-height);
  overflow:hidden;
  isolation:isolate;
  border-radius:6px 12px 0 0;
  background:var(--race-dark,#17212a);
}
.game-arena .duel-card-art .portrait {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:0;
  object-fit:cover;
  object-position:center 27%;
  filter:none;
}
.game-arena .duel-card-art .duel-race { top:6px; left:6px; }
.game-arena .duel-card-art .duel-stars { top:7px; right:6px; }
.game-arena .duel-card-art .duel-card-inspect {
  top:auto;
  bottom:0;
  right:0;
  width:44px;
  min-width:44px;
  height:44px;
  min-height:44px;
  padding:10px;
  border:0;
  border-radius:10px 0 0 0;
  background:#17222adb;
  box-shadow:none;
}
.game-arena.has-battle-layout.has-art-panels .duel-card-caption {
  position:relative;
  display:flex;
  flex-direction:column;
  inset:auto;
  width:100%;
  flex:1;
  margin:0;
  padding:7px;
  border-top:3px solid var(--race-color,#ab8b61);
  border-radius:0 0 6px 12px;
  background:#192327;
  box-shadow:inset 0 2px #ffffff0a;
}
.game-arena.has-battle-layout.has-art-panels .duel-card-caption h2 {
  min-height:0;
  margin:0 0 6px;
  font:700 22px/1 var(--font-display,'Arial Narrow',sans-serif);
  color:#fff0d4;
  text-align:center;
  text-wrap:balance;
  overflow-wrap:break-word;
  text-shadow:0 2px #090f16;
}
.game-arena.has-battle-layout.has-art-panels .combat-channels { gap:4px; margin:0; }
.game-arena.has-battle-layout.has-art-panels .combat-channel {
  padding:4px 5px;
  background:#101b22;
  border-radius:3px;
  box-shadow:none;
}
.game-arena.has-battle-layout.has-art-panels .combat-channel-label { font-size:9px; letter-spacing:0; }
.game-arena.has-battle-layout.has-art-panels .combat-channel-state { font-size:8px; }
.game-arena.has-battle-layout.has-art-panels .combat-channel-keywords { margin-top:3px; }
.game-arena.has-battle-layout.has-art-panels .combat-channel-keywords .keyword {
  font-size:10px;
  line-height:1.15;
  padding:2px 3px;
  box-shadow:none;
}
.game-arena.has-battle-layout.has-art-panels .duel-card-stats {
  margin-top:auto;
  padding-top:5px;
  gap:4px;
}
.game-arena.has-battle-layout.has-art-panels .duel-card-stats>span {
  padding:4px 2px;
  gap:2px;
  border-radius:4px;
  box-shadow:inset 0 1px #ffffff12;
}
.game-arena.has-battle-layout.has-art-panels .duel-card-stats b { font-size:26px; line-height:1; }
.game-arena.has-battle-layout.has-art-panels .duel-card-stats .stat-attack b { font-size:30px; }
.game-arena.has-battle-layout.has-art-panels .duel-card-stats small { font-size:7px; }
.game-arena.has-battle-layout.has-art-panels .duel-card .combat-fx {
  top:auto;
  bottom:calc(100% - var(--combat-art-height) + 6px);
  min-height:0;
  padding:6px;
  border:2px solid #ad936a;
  border-radius:6px;
  background:#14212bf2;
  box-shadow:0 3px 0 #080f17;
}
.game-arena.has-art-panels .duel-position[data-effect-tone="down"] .duel-card .combat-fx { border-color:#e49b8c; }
.game-arena.has-art-panels .duel-position[data-effect-tone="up"] .duel-card .combat-fx { border-color:#95d7b2; }
.game-arena.has-art-panels .duel-position[data-effect-tone="guard"] .duel-card .combat-fx { border-color:#e6c58a; }
.game-arena.has-art-panels .duel-position[data-effect-tone="copy"] .duel-card .combat-fx { border-color:#c6b1ef; }
.game-arena.has-battle-layout.has-art-panels .duel-card .winner-ribbon {
  top:32px;
  background:#e3ba78;
  color:#282320;
  border:2px solid #3c3026;
  box-shadow:0 2px 0 #080f17;
}

/* Formation cards: badges in the corners, name and numbers below the image. */
.game-arena .bench-card,
.game-arena.has-battle-layout.has-art-panels .own-roster .bench-card,
.game-arena.has-combined-effects .enemy-roster .bench-card {
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  height:116px;
  padding:0;
  border-radius:5px 9px 5px 9px;
  background:#172127;
  box-shadow:0 3px 0 #0a1016;
}
.game-arena .bench-art {
  position:relative;
  display:block;
  width:100%;
  min-height:0;
  flex:1;
  overflow:hidden;
}
.game-arena .bench-art .portrait {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 22%;
  filter:none;
}
.game-arena .bench-caption {
  flex:none;
  display:flex;
  flex-direction:column;
  gap:3px;
  justify-content:center;
  width:100%;
  min-height:37px;
  padding:4px 3px;
  border-top:1px solid var(--race-color,#ab8b61);
  background:#172127;
}
.game-arena .bench-card .bench-name {
  position:static;
  display:block;
  min-height:0;
  margin:0;
  font:700 10px/1.05 var(--font-display,'Arial Narrow',sans-serif);
  text-align:center;
  text-wrap:balance;
  color:#fff0d4;
}
.game-arena .bench-card .bench-state {
  position:static;
  display:flex;
  justify-content:center;
  gap:5px;
  font-size:9px;
  line-height:1;
}
.game-arena .bench-card.exhausted .bench-state { font-size:7px; letter-spacing:.3px; }
.game-arena .bench-card .bench-check { top:auto; right:3px; bottom:40px; }
.game-arena.has-battle-layout.has-art-panels .bench-card .bench-bonus,
.game-arena.mulligan-screen .bench-card .bench-bonus { top:auto; bottom:3px; left:3px; }

/* The enlarged hover view follows the same art/text separation. */
.combatant-preview-card { background:#1b272d; border-color:#c59d66; box-shadow:0 4px 0 #0b1219; }
.combatant-preview-art::after { display:none; }
.combatant-preview-art .portrait { object-position:50% 25%; }
.combatant-preview-title { position:static; margin-bottom:12px; }
.combatant-preview-title h2 { font-size:25px; margin-top:5px; }

/* The arena uses the same ink outlines and broad light planes as the lobby. */
.game-arena .arena-topbar,
.game-arena .arena-action-bar {
  background:linear-gradient(#2c393b 0 2px,#19262b 2px 100%);
  border-color:#080f17;
  box-shadow:0 3px 0 #080f1780;
}
.game-arena.has-art-panels .commander {
  background:linear-gradient(120deg,#30434a 0 25%,#1c2c34 25% 100%);
  border:2px solid #607680;
  box-shadow:0 3px 0 #0a121a;
}
.game-arena.has-art-panels .commander-opponent {
  background:linear-gradient(120deg,#443b46 0 25%,#2d2831 25% 100%);
  border-color:#82696f;
}
.game-arena.has-art-panels .field-brief {
  background:linear-gradient(#3b443e 0 2px,#202e30 2px 100%);
  border:2px solid #aa8b5d;
  box-shadow:0 3px 0 #101720;
}
.game-arena.has-art-panels .duel-card.card-back {
  background:linear-gradient(145deg,#314048 0 24%,#1b2a32 24% 76%,#14232b 76%);
  box-shadow:0 3px 0 #0a121a,0 10px 20px #0005;
}
.game-arena .duel-button {
  color:#302620!important;
  background:linear-gradient(150deg,#ffe2a0 0 26%,#d7ac6a 26% 78%,#ba874e 78%);
  border:2px solid #f1d194;
  box-shadow:inset 0 -3px #855a36,0 3px 0 #0b131a;
  text-shadow:none;
}

@media (min-width:701px) and (max-height:800px) {
  .game-arena.has-battle-layout.has-art-panels:is(.phase-plan,.phase-reveal,.phase-field) .duel-card { --combat-art-height:148px; min-height:315px; }
  .game-arena.has-battle-layout.has-art-panels .duel-stage { min-height:335px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card-caption h2 { font-size:20px; }
  .game-arena.has-battle-layout.has-art-panels .own-roster .bench-card { height:103px; }
}
@media (max-width:700px) {
  .game-arena.has-battle-layout.has-art-panels:is(.phase-plan,.phase-reveal,.phase-field) .duel-card {
    --combat-art-height:clamp(130px,37vw,180px);
    width:100%;
    max-width:210px;
    min-height:315px;
    height:auto;
  }
  .game-arena.has-battle-layout.has-art-panels .duel-card-caption { padding:6px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card-caption h2 { font-size:18px; margin-bottom:5px; }
  .game-arena.has-battle-layout.has-art-panels .combat-channel { padding:4px; }
  .game-arena.has-battle-layout.has-art-panels .combat-channel-label { font-size:8px; }
  .game-arena.has-battle-layout.has-art-panels .combat-channel-state { font-size:7px; }
  .game-arena.has-battle-layout.has-art-panels .combat-channel-keywords .keyword { font-size:9px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card-stats b { font-size:24px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card-stats .stat-attack b { font-size:28px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card-stats small { font-size:6px; }
  .game-arena .bench-card,
  .game-arena.has-battle-layout.has-art-panels .own-roster .bench-card,
  .game-arena.has-combined-effects .enemy-roster .bench-card { height:109px; }
  .game-arena .bench-card .bench-name { font-size:9px; }
  .game-arena .bench-card .bench-state { font-size:8px; }
  .game-arena.has-battle-layout.has-art-panels .duel-card .combat-fx strong { font-size:13px; }
}