/* Desktop composition: equally sized leaders in opposite corners. */
@media (min-width: 1000px) {
  .phase-one .game-shell.battle-layout,
  .phase-one .game-shell.battle-layout:has(#mulliganPanel:not(.hidden)) {
    --center-hand-height: 190px;
    --battle-leader-width: clamp(300px, 34dvh, 360px);
    --battle-leader-height: min(calc(var(--battle-leader-width) * 1.5), calc(50dvh - 14px));
    --battle-dock-width: 148px;
    width: 100%; max-width: none; height: 100dvh; min-height: 680px;
    padding: 10px 20px; gap: 6px 18px;
    grid-template-columns: var(--battle-leader-width) minmax(0, 1fr) var(--battle-leader-width);
    grid-template-rows: 40px minmax(0, 2fr) 16px minmax(0, .85fr) calc(var(--center-hand-height) + 28px) 64px;
    grid-template-areas: none;
  }
  .phase-one .battle-layout :is(.center-board, .target-zone) { display: contents; }
  .phase-one .battle-layout > .topbar { grid-area: 1 / 3; align-self: center; }
  .phase-one .battle-layout .battle-status-strip { grid-area: 1 / 2; gap: 2px 14px; }
  .phase-one .battle-layout .battle-emote-area { grid-area: 1 / 1; }
  .phase-one .battle-layout .log-panel {
    grid-area: 2 / 1; align-self: start; max-height: calc(100% - 42px); padding: 10px 0 10px 10px;
    border: 0; border-left: 1px solid #baa37955; border-radius: 0; background: #0b15152b;
  }
  .phase-one .battle-layout .log-panel h2 { margin-bottom: 8px; font-size: 12px; }
  .phase-one .battle-layout .battle-log { font-size: 11px; line-height: 1.7; }
  .phase-one .battle-layout .battle-details { grid-area: 2 / 1; align-self: end; padding: 0 8px; z-index: 5; }
  .phase-one .battle-layout .battle-details[open] { max-height: 100%; background: #10221df5; }
  .phase-one .battle-layout #turnNotice {
    grid-area: 3 / 2; height: 16px; line-height: 16px; font-size: 11px;
    border-top: 1px solid #c2b19133;
  }
  .phase-one .battle-layout #turnNotice:not(.is-action-notice) { visibility: visible; color: transparent; }
  .phase-one .game-shell.battle-layout > .player-panel {
    grid-area: 4 / 2; display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, .85fr) minmax(0, 1.15fr); gap: 2px; padding: 0;
    min-height: 0; border: 0; background: transparent; overflow: visible;
  }
  .phase-one .game-shell.battle-layout > .opponent-panel {
    grid-area: 2 / 2; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.15fr) minmax(0, .85fr);
  }
  .phase-one .game-shell.battle-layout > .player-panel { display: contents; }
  .phase-one .battle-layout .player-panel #playerBoard { grid-area: 4 / 2; }
  .phase-one .battle-layout .opponent-panel #enemyBoard {
    grid-area: 2 / 2; align-self: end; height: min(100%, 158px);
  }
  .phase-one .battle-layout .player-panel .hero.has-deck-leader {
    grid-area: 6 / 2; justify-self: center; align-self: stretch; position: relative; z-index: 1;
    width: min(640px, 100%); height: 100%; min-height: 0; max-height: none;
    padding: 0; border: 0; background: none; box-shadow: none;
  }
  .phase-one .battle-layout .opponent-panel .hero.has-deck-leader { grid-area: 1 / 1; }
  .phase-one .game-shell.battle-layout .hero.has-deck-leader .battle-leader-art {
    inset: 0 auto 18px calc(50% - 100px); width: 200px; height: calc(100% - 18px);
    object-fit: contain; object-position: center bottom;
    filter: drop-shadow(0 5px 7px #0009);
  }
  .phase-one .battle-layout .hero.has-deck-leader .battle-leader-name {
    display: block; bottom: 0; left: calc(50% - 70px); right: auto; width: 140px;
    font-size: 12px; line-height: 18px;
  }
  .phase-one .battle-layout .hero.has-deck-leader > div {
    top: calc(50% - 28px); right: auto; left: calc(50% + 82px);
    width: 44px; min-width: 0; padding: 5px 2px; border-radius: 4px;
    border-color: #c8af7699; background: #642d3ceb;
  }
  .phase-one .battle-layout .hero.has-deck-leader .health-line { flex-direction: column; gap: 2px; }
  .phase-one .battle-layout .hero.has-deck-leader .role { display: block; font-size: 10px; }
  .phase-one .battle-layout .hero.has-deck-leader strong { font-size: 26px; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-level {
    top: calc(50% - 38px); left: calc(50% - 130px); font-size: 12px;
    min-width: 42px; text-align: center; padding: 3px 5px;
  }
  .phase-one .game-shell.battle-layout .hero.has-deck-leader:is(.player, .enemy) .evo {
    top: calc(50% - 9px); bottom: auto; left: calc(50% - 130px);
    min-width: 42px; height: 21px; font-size: 11px; padding: 2px 4px;
  }
  .phase-one .game-shell.battle-layout .hero.has-deck-leader .phase1-upgrades {
    top: calc(50% + 21px); bottom: auto; left: calc(50% - 126px); right: auto;
  }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-upgrades img { width: 18px; height: 27px; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-economy {
    top: 50%; bottom: auto; left: 0; right: auto; transform: translateY(-50%);
    width: 170px; padding: 12px 0; gap: 8px; text-align: left;
    background: none; border-top: 0; border-bottom: 1px solid #baa37955;
  }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-balance { font-size: 20px; font-weight: 500; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-next { font-size: 11px; line-height: 1.5; white-space: normal; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-skills {
    top: 50%; bottom: auto; left: auto; right: 0; width: 148px;
    transform: translateY(-50%); grid-template-columns: minmax(0, 1fr); gap: 6px;
  }
  .phase-one .battle-layout .phase1-skills button {
    height: 40px; grid-template-columns: 1fr auto; align-items: center; gap: 8px;
    padding: 6px 10px; text-align: left; border-color: #b39b686e;
    background: #173128ed; border-radius: 3px;
  }
  .phase-one .battle-layout .phase1-skills button small { font-size: 10px; text-align: right; }
  .phase-one .battle-layout .phase1-skills button:disabled { background: #171f22c9; border-color: #86837542; }
  .phase-one .battle-layout .hero.enemy .phase1-skills button { background: #341e28a6; }
  .phase-one .battle-layout .board-row {
    position: relative; z-index: 1;
    width: 100%; height: 100%; min-height: 0; padding: 6px 8px; gap: 12px;
    justify-content: center; align-items: center; overflow: visible;
  }
  .phase-one .battle-layout .board-row.hand-drop-ready { outline: 1px solid #dfc68c; outline-offset: -2px; background: #d4bc6814; }
  .phase-one .battle-layout .board-row .board-card {
    flex: 0 1 114px; width: 114px; max-width: 114px; min-width: 0;
    height: min(100%, 158px); min-height: 0; max-height: 158px;
    border-radius: 45% 45% 6px 6px; border-width: 1px;
  }
  .phase-one .battle-layout > .hand-panel {
    grid-area: 5 / 2 / 6 / 4; min-height: 0; padding: 0; border: 0;
    background: none; justify-self: start;
    width: calc(100% - var(--battle-dock-width) - 18px); overflow: visible;
  }
  .phase-one .battle-layout .hand-row {
    --hand-card-height: var(--center-hand-height); height: 100%; flex-basis: auto;
    padding: 20px 6px 8px; gap: 8px; justify-content: safe center;
    container-type: inline-size; overflow: visible;
  }
  .phase-one .battle-layout .hand-row .card + .card {
    margin-left: min(0px, calc((100cqw - 2px - var(--hand-count, 1) * var(--hand-card-height) * 2 / 3 - (var(--hand-count, 1) - 1) * 8px) / max(1, var(--hand-count, 1) - 1)));
  }
  .phase-one .battle-layout .hand-row .card:is(:hover, :focus-visible) { z-index: 8; transform: translateY(-12px); }
  .phase-one .battle-layout > .deck-dock {
    grid-area: 5 / 3 / 7 / 4; align-self: center; justify-self: end;
    width: var(--battle-dock-width); padding: 0; gap: 10px 8px;
  }
  .phase-one .battle-layout #endTurnButton {
    width: 104px; height: 48px; min-height: 48px; border-radius: 4px;
    margin-bottom: 8px; font-size: 14px;
  }
  .phase-one .battle-layout .hand-panel:has(#mulliganPanel:not(.hidden)) {
    width: calc(100% - var(--battle-dock-width) - 18px); grid-template-columns: minmax(0, 1fr) 180px;
  }
  .phase-one .battle-layout .mulligan-panel { padding: 8px; gap: 5px; }
  .phase-one .battle-layout .mulligan-panel p { margin: 3px 0 0; font-size: 11px; }

  /* Controls use the free strip beneath the hand; the figure stays full-height. */
  .phase-one .game-shell.battle-layout .hero:is(.player, .enemy).has-deck-leader {
    width: 100%; height: calc(var(--battle-leader-height) + 18px);
  }
  .phase-one .game-shell.battle-layout .hero:is(.player, .enemy).has-deck-leader .battle-leader-art {
    inset: 0 0 18px; width: 100%; height: var(--battle-leader-height);
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader {
    grid-area: 3 / 1 / 7 / 2; align-self: end;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader > div {
    top: 24%; left: auto; right: 0;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader .phase1-level {
    top: auto; bottom: 79px; left: 0;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader:is(.player, .enemy) .evo {
    top: auto; bottom: 50px; left: 0;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader .phase1-upgrades {
    top: auto; bottom: 19px; left: 3px;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader .phase1-economy {
    top: auto; bottom: 0; left: calc(100% + 18px); width: 180px; transform: none;
    border: 0; padding: 8px 0; gap: 5px;
  }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader .phase1-skills {
    top: auto; bottom: 8px; left: calc(100% + 230px); right: auto;
    width: 320px; grid-template-columns: 1fr 1fr; transform: none;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader {
    grid-area: 2 / 3 / 5 / 4; align-self: start;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader > div {
    top: 24%; left: 0; right: auto;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader .phase1-level {
    top: 0; bottom: auto; left: auto; right: 0;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader:is(.player, .enemy) .evo {
    top: 30px; bottom: auto; left: auto; right: 0;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader .phase1-upgrades {
    top: 60px; bottom: auto; left: auto; right: 3px;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader .phase1-economy {
    top: 0; bottom: auto; left: auto; right: calc(100% + 18px);
    width: 180px; transform: none; padding: 8px 0; gap: 5px; border: 0;
  }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader .phase1-skills {
    top: 8px; bottom: auto; left: auto; right: calc(100% + 212px);
    width: min(320px, calc(100vw - 2 * var(--battle-leader-width) - 272px));
    grid-template-columns: 1fr 1fr; transform: none;
  }
}

@media (min-width: 1000px) and (max-width: 1199px) {
  .phase-one .game-shell.battle-layout,
  .phase-one .game-shell.battle-layout:has(#mulliganPanel:not(.hidden)) {
    --center-hand-height: 160px; padding-inline: 14px; column-gap: 12px;
    --battle-leader-width: 240px; --battle-dock-width: 120px;
  }
  .phase-one .battle-layout .opponent-panel .hero.has-deck-leader { width: 100%; }
  .phase-one .battle-layout .hero.enemy.has-deck-leader .phase1-economy { width: 150px; }
  .phase-one .battle-layout .hero.enemy.has-deck-leader .phase1-skills { width: 132px; }
}

@media (min-width: 1000px) and (max-height: 760px) {
  .phase-one .game-shell.battle-layout,
  .phase-one .game-shell.battle-layout:has(#mulliganPanel:not(.hidden)) {
    --center-hand-height: 150px;
    --battle-leader-width: 240px; --battle-dock-width: 120px;
    grid-template-rows: 36px minmax(0, 2fr) 12px minmax(0, .85fr) calc(var(--center-hand-height) + 28px) 60px;
    padding: 8px 14px; gap: 4px 12px;
  }
  .phase-one .battle-layout .hero.has-deck-leader { width: min(610px, 100%); }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-economy { width: 162px; gap: 5px; padding: 8px 0; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-balance { font-size: 18px; }
  .phase-one .battle-layout .hero.has-deck-leader .phase1-skills { width: 138px; gap: 4px; }
  .phase-one .battle-layout .phase1-skills button { height: 35px; padding: 5px 7px; gap: 4px; }
  .phase-one .battle-layout .board-row { padding: 5px 6px; gap: 10px; }
  .phase-one .battle-layout .board-row .board-card { flex-basis: 90px; max-width: 90px; }
  .phase-one .battle-layout .board-card .card-name { bottom: 27px; font-size: 10px; }
  .phase-one .battle-layout .board-card .keywords { top: 6px; bottom: auto; }
  .phase-one .battle-layout .board-card .stats > span { min-width: 25px; height: 26px; font-size: 19px; }
  .phase-one .battle-layout > .deck-dock { gap: 7px 5px; }
  .phase-one .battle-layout .deck-dock .deck-pack, .phase-one .battle-layout #phase1SpecialPileButton { width: 52px; height: 78px; }
  .phase-one .battle-layout .deck-pack { padding: 10px 4px; gap: 3px; }
  .phase-one .battle-layout .deck-pack-back { width: 22px; height: 22px; }
  .phase-one .battle-layout .deck-pack strong { font-size: 11px; }
  .phase-one .battle-layout #endTurnButton { width: 100px; height: 38px; min-height: 38px; margin-bottom: 2px; }
  .phase-one .battle-layout .battle-status-strip { gap: 0 10px; }
  .phase-one .battle-layout .turn-counter { font-size: 14px; }
  .phase-one .game-shell.battle-layout .hero.player.has-deck-leader .phase1-skills { left: calc(100% + 212px); width: 300px; }
  .phase-one .game-shell.battle-layout .hero.enemy.has-deck-leader .phase1-skills { width: min(300px, calc(100vw - 2 * var(--battle-leader-width) - 272px)); }
}