/* Battle-only layout. Cover, collection, builder and online lobby stay unchanged. */
.game-shell.battle-layout {
  width: min(1600px, 100%);
  min-width: 0;
  min-height: 100dvh;
  height: auto;
  padding: 10px;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  overflow: visible;
}

.battle-layout > *,
.battle-layout .target-zone,
.battle-layout .board-row,
.battle-layout .hero,
.battle-layout .system-status-group { min-width: 0; min-height: 0; }
.battle-layout .topbar { min-height: 44px; padding: 6px 12px; gap: 10px; }
.battle-layout .topbar .eyebrow { display: none; }
.battle-layout .topbar h1 { font-size: 22px; line-height: 1.2; }
.battle-layout .top-actions { display: flex; gap: 6px; flex-direction: row; }
.battle-layout :is(.primary-button, .ghost-button, .hero-target) {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 5px;
}
.battle-layout button:focus-visible,
.battle-layout summary:focus-visible { outline: 2px solid #a7dce6; outline-offset: 2px; }
.battle-layout .player-panel {
  grid-template-columns: minmax(0, 1fr) 100px;
  padding: 8px;
  gap: 8px;
  background: rgba(19, 26, 30, .9);
}
.battle-layout .opponent-panel { grid-template-columns: 100px minmax(0, 1fr); }
.battle-layout .hero { padding: 8px; gap: 5px; flex-direction: column; justify-content: center; background: #262c32; }
.battle-layout .role { font-size: 11px; letter-spacing: 0; }
.battle-layout .health-line { gap: 4px; }
.battle-layout .hero strong { font-size: 30px; }
.battle-layout .ping-badge { min-height: 18px; padding: 2px 5px; font-size: 10px; }
.battle-layout :is(.mana, .evo) { min-width: 52px; height: 22px; font-size: 12px; border-radius: 4px; }
.battle-layout .board-row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  align-items: stretch;
}
.battle-layout .empty-slot {
  min-height: 0;
  border-color: rgba(198, 185, 152, .12);
  color: transparent;
  background: rgba(0, 0, 0, .08);
  border-radius: 5px;
}

/* Fixed card geometry keeps long names and changing attack values from resizing lanes. */
.battle-layout .board-card {
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 240px;
  display: block;
  padding: 0;
  border-width: 1px;
  border-radius: 6px;
  background: #20272a;
}
.battle-layout .board-card .card-art {
  position: absolute;
  inset: 5px 5px 59px;
  height: auto;
  border: 0;
  border-radius: 3px;
  background: #141a1e;
}
.battle-layout .board-card .card-art img { object-fit: contain; object-position: center top; }
.battle-layout .board-card .card-top { position: absolute; top: 5px; left: 5px; z-index: 2; }
.battle-layout .board-card .cost { width: 23px; height: 23px; font-size: 12px; }
.battle-layout .board-card :is(.rarity, .card-type, .card-text, .keywords) { display: none; }
.battle-layout .board-card .card-name {
  position: absolute;
  inset: auto 3px 30px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 11px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.battle-layout .board-card .stats { left: 4px; right: 4px; bottom: 4px; gap: 3px; padding: 0; }
.battle-layout .board-card .stats span {
  min-width: 0;
  min-height: 22px;
  padding: 1px 5px;
  font-size: 12px;
  border-radius: 4px;
  box-shadow: none;
}
.battle-layout .board-card .stats .atk { color: #ff9690; }
.battle-layout .board-card .stats .hp { color: #b5e4b3; }
.battle-layout .board-card .evolve-button { top: 4px; right: 4px; bottom: auto; width: 26px; height: 26px; font-size: 11px; z-index: 3; }
.battle-layout .board-card.ready::after { content: none; }
.battle-layout .board-card:is(:hover, .ready:hover) { transform: translateY(-2px); }

.battle-layout .center-board {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: auto;
  background: rgba(24, 28, 31, .96);
  border-color: rgba(198, 185, 152, .22);
  scrollbar-width: thin;
}
.battle-layout .target-zone { order: 0; display: flex; flex-direction: column; flex-wrap: nowrap; align-content: normal; align-items: stretch; gap: 7px; padding: 12px; }
.battle-layout .turn-counter { flex-basis: auto; min-height: 34px; border-radius: 4px; font-size: 13px; padding: 5px; }
.battle-layout .trait-status {
  flex-basis: auto;
  min-height: 22px;
  max-width: 100%;
  padding: 3px 0;
  border: 0;
  border-radius: 0;
  background: none;
  justify-content: flex-start;
  text-align: left;
  font-size: 12px;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
}
.battle-layout #battleDifficultyStatus { color: #b3bac1; }
.battle-layout #onlineBattleStatus { color: #a1dbc3; }
.battle-layout #turnTimerStatus.is-low { color: #ff9690; }
.battle-layout #turnNotice { order: -1; flex-basis: auto; font-size: 12px; line-height: 1.5; text-align: left; font-weight: 400; }
.battle-layout .deck-breakdown { width: 100%; }
.battle-layout .deck-breakdown summary { min-height: 30px; padding: 7px; font-size: 11px; line-height: 1.5; cursor: pointer; }
.battle-layout .deck-breakdown-list { max-height: 145px; overflow: auto; }
.battle-layout .battle-emote-area { justify-content: stretch; }
.battle-layout .emote-button { width: 100%; }
.battle-layout .emote-frame { display: block; width: 100%; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.battle-layout .emote-frame-head { display: list-item; padding: 9px 0; font-size: 12px; cursor: pointer; }
.battle-layout .emote-frame-head small { float: right; font-size: 11px; }
.battle-layout .emote-frame-grid { padding-bottom: 8px; }
.battle-layout .emote-frame:not([open]) .emote-frame-grid { display: none; }
.battle-layout .log-panel { order: 1; padding: 12px; border: 0; border-top: 1px solid var(--line); }
.battle-layout .log-panel h2 { color: #d7c69e; font-size: 13px; }
.battle-layout .battle-log { max-height: 95px; font-size: 12px; line-height: 1.5; gap: 6px; }
.battle-layout .system-status-panel { order: 2; padding: 12px; border: 0; border-top: 1px solid var(--line); gap: 10px; }
.battle-layout .system-status-label { font-size: 12px; color: #d7c69e; }
.battle-layout .gal-status-group .trait-status { color: #b7dcd7; }

.battle-layout .hand-panel { display: flex; flex-direction: column; min-height: 0; padding: 8px; gap: 6px; overflow: hidden; background: rgba(20, 25, 28, .94); }
.battle-layout .hand-header { flex: 0 0 32px; align-items: center; margin: 0; gap: 8px; }
.battle-layout .hand-header h2 { font-size: 13px; color: #d7c69e; }
.battle-layout .deck-actions { display: flex; align-items: center; gap: 12px; font-size: 12px; }
.battle-layout .mulligan-panel {
  flex: 0 0 auto;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 5px;
  background: #2b302d;
  box-shadow: none;
}
.battle-layout .mulligan-panel strong { font-size: 13px; }
.battle-layout .mulligan-panel p { font-size: 12px; line-height: 1.35; margin: 3px 0 0; }
.battle-layout .mulligan-actions { display: flex; align-items: center; gap: 10px; }
.battle-layout .mulligan-actions span { padding: 0; border: 0; background: none; color: #ead5a3; font-size: 12px; white-space: nowrap; }
.battle-layout .hand-row {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
  gap: 7px;
  overflow: auto;
  padding: 3px 2px 5px;
  scrollbar-width: thin;
}
.battle-layout .hand-row .empty-slot { display: none; }
.battle-layout .hand-row .card {
  flex: 0 0 136px;
  min-height: 190px;
  height: 100%;
  max-height: 225px;
  padding: 6px;
  display: grid;
  grid-template-rows: 23px minmax(40px, 1fr) auto auto auto minmax(28px, auto) 19px;
  gap: 3px;
  border-width: 1px;
  border-radius: 5px;
}
.battle-layout .hand-row .card-art { min-height: 0; height: 100%; }
.battle-layout .hand-row .cost { width: 23px; height: 23px; font-size: 12px; }
.battle-layout .hand-row .card-name { font-size: 12px; line-height: 1.2; }
.battle-layout .hand-row :is(.rarity, .card-type) { font-size: 10px; }
.battle-layout .hand-row .keywords { display: flex; min-height: 0; max-height: 18px; overflow: hidden; }
.battle-layout .hand-row .keywords span { font-size: 10px; padding: 0 4px; }
.battle-layout .hand-row .card-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 11px; line-height: 1.3; }
.battle-layout .hand-row .stats { font-size: 12px; padding: 0; }
.battle-layout .hand-row .card:is(:hover, .ready:hover) { transform: translateY(-2px); }
.battle-layout .hand-row .card.ready::after { inset: 5px 5px auto auto; font-size: 11px; }
.battle-layout:has(#mulliganPanel:not(.hidden)) .hand-row { justify-content: center; }
.battle-layout:has(#mulliganPanel:not(.hidden)) .hand-row .card { min-height: 165px; max-height: 190px; }

@media (min-width: 1000px) {
  .game-shell.battle-layout {
    height: 100dvh;
    min-height: 680px;
    grid-template-columns: minmax(0, 1fr) 250px;
    grid-template-rows: 44px minmax(132px, 1fr) minmax(132px, 1fr) 250px;
    grid-template-areas: "header header" "enemy info" "player info" "hand info";
  }
  .battle-layout > .topbar { grid-area: header; }
  .battle-layout > .opponent-panel { grid-area: enemy; }
  .battle-layout > .player-panel:not(.opponent-panel) { grid-area: player; }
  .battle-layout > .center-board { grid-area: info; }
  .battle-layout > .hand-panel { grid-area: hand; }
  .game-shell.battle-layout:has(#mulliganPanel:not(.hidden)) { grid-template-rows: 44px minmax(132px, 1fr) minmax(132px, 1fr) 295px; }
}

@media (max-width: 999px) {
  body:has(.battle-layout:not(.hidden)) { overflow: auto; }
  .game-shell.battle-layout { height: auto; }
  .battle-layout > .topbar { order: 0; flex-wrap: wrap; }
  .battle-layout > .opponent-panel { order: 1; }
  .battle-layout > .player-panel:not(.opponent-panel) { order: 2; }
  .battle-layout > .hand-panel { order: 3; }
  .battle-layout > .center-board { order: 4; }
  .battle-layout .player-panel { min-height: 170px; }
  .battle-layout .board-row { overflow-x: auto; grid-template-columns: repeat(7, minmax(85px, 1fr)); }
  .battle-layout .hand-panel { min-height: 275px; }
  .battle-layout .hand-row { flex: 0 0 200px; }
  .battle-layout .center-board { overflow: visible; }
  .battle-layout .mulligan-actions { flex-direction: column; gap: 4px; }
}

@media (max-width: 540px) {
  .game-shell.battle-layout { padding: 6px; gap: 6px; }
  .battle-layout .topbar h1 { font-size: 18px; }
  .battle-layout .topbar { padding: 8px; }
  .battle-layout .top-actions { width: 100%; justify-content: flex-start; }
  .battle-layout .top-actions button { flex: 1; }
  .battle-layout .player-panel { grid-template-columns: minmax(0, 1fr) 76px; padding: 5px; gap: 5px; }
  .battle-layout .opponent-panel { grid-template-columns: 76px minmax(0, 1fr); }
  .battle-layout .hero { padding: 5px; }
  .battle-layout .mulligan-panel { grid-template-columns: minmax(0, 1fr); }
  .battle-layout .mulligan-actions { flex-direction: row; justify-content: space-between; }
  .battle-layout:has(#mulliganPanel:not(.hidden)) .hand-row { justify-content: flex-start; }
  .battle-layout .hand-header { flex-wrap: wrap; flex-basis: auto; }
}

@media (max-height: 679px) and (min-width: 1000px) {
  body:has(.battle-layout:not(.hidden)) { overflow: auto; }
}