/* One compact battlefield deck, wherever the player meets or edits it. */
.deck-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.deck-grid .card {
  display: block;
  position: relative;
  width: 100%;
  height: clamp(64px, 11dvh, 108px);
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 2px solid #a7d5db;
  border-radius: 9px;
  overflow: hidden;
  touch-action: none;
  background: #102c42;
  box-shadow: 0 3px #071d30;
}
.deck-grid .troop-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
}
.deck-grid .troop-art svg {
  width: 100%;
  height: 100%;
  max-height: none;
}
.deck-grid .card-info {
  position: absolute;
  inset: auto 0 0;
  padding: 14px 1px 3px;
  min-height: 0;
  background: linear-gradient(transparent, #102e43 42%);
  z-index: 3;
}
.deck-grid .card-info strong {
  display: block;
  font:
    clamp(9px, 1.7vw, 15px) / 1.05 'Lilita One',
    sans-serif;
  color: #fff0c6;
  white-space: normal;
  text-align: center;
}
.deck-grid .card-top {
  position: absolute;
  inset: 2px auto auto 2px;
  padding: 0;
  z-index: 4;
}
.deck-grid .cost {
  padding: 1px 3px;
  border-radius: 5px;
  font-size: clamp(12px, 2vw, 18px);
  gap: 1px;
}
.deck-grid .cost img {
  width: 10px;
  height: 14px;
}
.deck-grid .card-multiplier {
  top: 3px;
  right: 2px;
  font-size: 9px;
  padding: 1px;
}
.deck-grid .battle-empty-slot,
.deck-grid .squad-empty {
  height: clamp(64px, 11dvh, 108px);
  min-width: 0;
  min-height: 0;
  border: 1px dashed #7bacb9;
  border-radius: 9px;
  background: #0c253d80;
  padding: 0;
}
.deck-grid .picked {
  border-color: #fff1a1;
  box-shadow:
    0 0 0 2px #d9aa46,
    0 0 16px #f5d27866;
}
.deck-caption,
.intro-deck-caption {
  font:
    900 12px Nunito,
    sans-serif;
  letter-spacing: 1.5px;
  color: #b6dfe1;
  margin-bottom: 6px;
}
.roster-deck {
  flex: 0 0 auto;
  width: 100%;
  max-width: 820px;
  align-self: center;
  margin-top: auto;
  padding: 8px 0 2px;
}
#troops-view #deck-slots {
  display: grid;
  position: static;
  height: auto;
  max-width: none;
  gap: 5px;
  overflow: visible;
}
#troops-view #deck-slots .card {
  height: clamp(58px, 9dvh, 95px);
}
.deck-adjust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 2px solid #fff;
  border-radius: 14px;
  background: linear-gradient(#fff, #e1f0f4);
  color: #173b50;
  font:
    26px 'Lilita One',
    sans-serif;
  box-shadow:
    0 4px #90afb6,
    inset 0 2px #fff;
}
.deck-adjust img {
  height: 30px;
  width: 30px;
}
#modal[data-variant='squad'] .squad-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#modal[data-variant='squad'] .squad-editor > header {
  flex: 0 0 auto;
}
#modal[data-variant='squad'] #squad-editor-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
#modal[data-variant='squad'] .squad-slots {
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
  min-width: 0;
  padding: 3px;
}
#modal[data-variant='squad'] .squad-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  gap: 5px;
}
#modal[data-variant='squad'] .squad-row .squad-card,
#modal[data-variant='squad'] .squad-row .squad-empty {
  height: clamp(64px, 11dvh, 108px);
  min-width: 0;
  min-height: 0;
}
#modal[data-variant='squad'] .squad-row-label {
  height: auto;
  margin: 3px 0 5px;
  font-size: 11px;
}
#modal[data-variant='squad'] .squad-reserve {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}
#modal[data-variant='squad'] .squad-reserve-cards {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  overflow: visible;
  min-height: 0;
}
#modal[data-variant='squad'] .squad-reserve .squad-card {
  width: 100%;
  height: clamp(64px, 11dvh, 108px);
  min-width: 0;
  flex-basis: auto;
}
.squad-inspector {
  padding: 10px 12px;
  border-radius: 14px;
  background: linear-gradient(120deg, #25566a, #15364b);
  border: 1px solid #81b7bd55;
  flex: 0 0 auto;
}
.squad-inspect-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.squad-inspect-title strong {
  font:
    23px 'Lilita One',
    sans-serif;
  color: #ffe7a4;
}
.squad-inspect-title span {
  font-size: 12px;
  color: #b7dddf;
}
.squad-inspector dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 7px 0;
}
.squad-inspector dl > div {
  display: flex;
  gap: 4px;
  flex-direction: column;
}
.squad-inspector dt {
  font-size: 11px;
  color: #a6d3da;
}
.squad-inspector dd {
  margin: 0;
  font:
    17px 'Lilita One',
    sans-serif;
  color: #fff0c4;
}
.squad-inspector p {
  margin: 2px 0;
  font-size: 12px;
  color: #c3e3e4;
}
#modal .squad-drag-ghost,
#modal .squad-guide-ghost {
  height: 85px;
  min-height: 0;
}
#modal.introducing-deck .card-unlocked {
  max-width: 850px;
  margin: auto;
  padding: 14px 18px;
  gap: 5px;
}
#modal.introducing-deck .unlocked-stage {
  flex: 0 0 auto;
  --intro-card-height: clamp(130px, 29dvh, 290px);
  height: var(--intro-card-height);
  margin: 3px 0;
}
#modal.introducing-deck .unlocked-card {
  height: var(--intro-card-height);
  width: calc(var(--intro-card-height) * 5 / 7);
  box-sizing: border-box;
  min-width: 0;
  aspect-ratio: 5/7;
}
#modal.introducing-deck h2 {
  margin: 0;
  font-size: clamp(26px, 5vw, 42px);
}
#modal.introducing-deck .unlocked-copy {
  margin: 3px 0;
  max-width: 600px;
  font-size: clamp(12px, 2vw, 16px);
}
#modal.introducing-deck .unlocked-stats {
  margin: 3px 0;
}
#modal.introducing-deck .unlocked-stats dd {
  font-size: clamp(18px, 3vw, 27px);
}
#modal.introducing-deck .intro-deck {
  max-width: 650px;
  margin: 0 auto 5px;
  pointer-events: none;
}
#modal.introducing-deck .intro-deck .card,
#modal.introducing-deck .battle-empty-slot {
  height: clamp(53px, 9dvh, 95px);
}
#modal.introducing-deck .intro-deck-caption {
  margin: 8px 0 0;
}
#modal.introducing-deck #unlocked-continue {
  margin: 5px 0 3px;
  min-height: 48px;
  font-size: 24px;
  flex: 0 0 auto;
}
#modal .intro-card-flight {
  position: fixed !important;
  margin: 0;
  z-index: 100;
  animation: none !important;
  transform-origin: top left;
  pointer-events: none;
}
.intro-deck .receiving {
  box-shadow:
    inset 0 0 18px #f8d46a30,
    0 0 15px #f8d46a55;
  border-color: #ffdf86;
}
@media (max-height: 680px) {
  .roster-deck {
    padding-top: 4px;
  }
  .deck-caption {
    display: none;
  }
  #troops-view #deck-slots .card {
    height: 52px;
  }
  .deck-adjust {
    margin-top: 6px;
    font-size: 21px;
  }
  #modal.introducing-deck .unlocked-stage {
    --intro-card-height: 24dvh;
    height: var(--intro-card-height);
  }
  .squad-inspector {
    padding: 7px;
  }
  .squad-inspector dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 4px 0;
  }
  .squad-inspect-title strong {
    font-size: 18px;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #troops-view .roster-deck {
    max-width: 100%;
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 10px;
    align-items: center;
  }
  #troops-view .deck-adjust {
    margin: 0;
  }
  #modal.introducing-deck .card-unlocked {
    display: grid;
    grid-template-columns: 35% 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    gap: 4px 20px;
    padding: 12px 24px;
  }
  #modal.introducing-deck .unlocked-stage {
    grid-column: 1;
    grid-row: 1/6;
    height: 75dvh;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  #modal.introducing-deck .unlocked-kicker,
  #modal.introducing-deck h2,
  #modal.introducing-deck .unlocked-role,
  #modal.introducing-deck .unlocked-stats,
  #modal.introducing-deck .unlocked-copy,
  #modal.introducing-deck .intro-deck-caption,
  #modal.introducing-deck .intro-deck,
  #modal.introducing-deck #unlocked-continue {
    grid-column: 2;
  }
  #modal.introducing-deck .unlocked-role,
  #modal.introducing-deck .intro-deck-caption {
    display: none;
  }
  #modal.introducing-deck .unlocked-copy {
    font-size: 12px;
  }
  #modal.introducing-deck .intro-deck .card,
  #modal.introducing-deck .battle-empty-slot {
    height: 53px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .intro-card-flight {
    animation: none !important;
  }
}
@media (max-height: 500px) and (orientation: landscape) {
  #modal.introducing-deck .card-unlocked {
    grid-template-rows: auto auto minmax(45px, 1fr) auto 53px 48px;
    padding-block: 10px;
    gap: 4px 20px;
  }
  #modal.introducing-deck .unlocked-stage {
    grid-row: 1/7;
    --intro-card-height: calc(100dvh - 80px);
    height: var(--intro-card-height);
  }
  #modal.introducing-deck .unlocked-kicker {
    grid-row: 1;
  }
  #modal.introducing-deck h2 {
    grid-row: 2;
  }
  #modal.introducing-deck .unlocked-stats {
    grid-row: 3;
  }
  #modal.introducing-deck .unlocked-copy {
    grid-row: 4;
  }
  #modal.introducing-deck .intro-deck {
    grid-row: 5;
    margin: 0;
  }
  #modal.introducing-deck #unlocked-continue {
    grid-row: 6;
    margin: 0;
    height: 48px;
  }
}

#modal.introducing-deck .unlocked-copy {
  margin: 3px 0;
}
.loot-saving-hint {
  color: #ffdf91;
  font-weight: 800;
  font-size: 13px;
  margin: 6px auto;
  max-width: 230px;
  text-align: center;
}
/* Keep the saving message readable without pushing the reward CTA off a small phone. */
@media (max-height: 640px) and (orientation: portrait) {
  #battle-ending.won[data-reward-content='cards'] .loot-prize,
  #battle-ending.won[data-reward-content='cards'] .loot-stage {
    height: 82px;
  }
  #battle-ending .level-unlock-cards:has(> :only-child) > article {
    display: grid;
    grid-template-columns: 94px minmax(0, 1fr);
    gap: 4px 12px;
    flex-basis: 100%;
    align-items: center;
  }
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-unlock-pill {
    grid-column: 1 / -1;
    justify-self: center;
  }
  #battle-ending .level-unlock-cards:has(> :only-child) .reward-card-stage {
    grid-column: 1;
    grid-row: 2 / 6;
  }
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-mini-portrait {
    width: 90px;
  }
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-card-description,
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-saving-hint,
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-buy-stats,
  #battle-ending .level-unlock-cards:has(> :only-child) .loot-price {
    grid-column: 2;
    margin: 2px 0;
  }
  #battle-ending .loot-saving-hint {
    font-size: 11px;
    line-height: 1.25;
  }
  #battle-ending .level-unlock-cards:has(> :last-child:nth-child(2)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
/* Card density responds to the space left by a one- or two-row deck. */

@container roster (height < 410px) {
  #troops-view .troop-dossier {
    padding: 6px 9px;
    gap: 3px;
  }
  #troops-view .roster-identity {
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 9px;
  }
  #troops-view .roster-portrait {
    height: 64px;
  }
  #troops-view .roster-identity h3 {
    font-size: 24px;
  }
  #troops-view .roster-description {
    font-size: 13px;
    line-height: 1.25;
  }
  #troops-view .roster-stats {
    padding-block: 5px;
  }
  #troops-view .roster-stats dd {
    font-size: 22px;
  }
  #troops-view .roster-power {
    display: none;
  }
  #troops-view .roster-actions button {
    min-height: 44px;
    font-size: 18px;
  }
}
@container roster (height < 310px) {
  #troops-view .roster-power,
  #troops-view .roster-training {
    display: none;
  }
}
@container roster (height < 350px) {
  #troops-view .roster-training > strong {
    display: none;
  }
  #troops-view .roster-identity h3 {
    font-size: 22px;
  }
}
#modal[data-variant='squad'] .squad-reserve-cards > p {
  grid-column: 1 / -1;
  margin: 4px 0;
}