/* Aetherra — shared responsive scaling (cards, boards, grids) */

:root {
  --vh-aspect: 2.5 / 3.5;
  --vh-aspect-board: 2.5 / 4.1;
  --vh-card-max: min(100%, 360px);
  --vh-hand-width: clamp(148px, 14.5vw, 188px);
  --vh-hand-row-min-h: clamp(240px, 27vw, 300px);
  --vh-board-slot-min-w: clamp(136px, 12vw, 188px);
  --vh-grid-card-min: clamp(136px, 16vw, 210px);
  --vh-page-pad: clamp(0.75rem, 2.5vw, 1.5rem);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: clip;
}

img,
.vh-art-img {
  max-width: 100%;
}

.vh-art-img {
  height: 100%;
  max-height: 100%;
}

/* ——— Base card sizing ——— */
.vh-card.vh-hs {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.board-card-wrap .vh-card,
.creature-wrap .vh-card,
.online-slot .vh-card,
.deck-slot.filled .vh-card {
  aspect-ratio: unset;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.hand-card-wrap .vh-card,
.cards-grid > .vh-card,
.catalog-item .vh-card,
.hand-strip .vh-card,
.demo-card-wrap .vh-card {
  aspect-ratio: var(--vh-aspect);
}

.hand-card-wrap .vh-card.vh-hand {
  aspect-ratio: 2.5 / 4.2;
}

.demo-card-wrap .vh-card {
  width: min(100%, var(--vh-card-max));
}

/* ——— Card browser ——— */
.cards-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--vh-grid-card-min)), 1fr));
}

.cards-grid > .vh-card {
  width: 100%;
  max-width: min(100%, 240px);
  justify-self: center;
}

.layout {
  padding: var(--vh-page-pad);
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.footer-panel {
  margin-left: var(--vh-page-pad);
  margin-right: var(--vh-page-pad);
  margin-bottom: var(--vh-page-pad);
}

/* ——— Play hand ——— */
.hand-row {
  min-height: var(--vh-hand-row-min-h);
}

.hand-card-wrap {
  flex: 0 0 var(--vh-hand-width);
  min-width: var(--vh-hand-width);
}

.hand-card-wrap .vh-card {
  width: 100%;
}

.grid-cell,
.online-slot,
.deck-slot.filled {
  container-type: size;
  container-name: vh-slot;
}

.battle-grid,
.zone-row {
  gap: clamp(0.35rem, 1vw, 0.55rem);
}

.battle-grid > *,
.zone-row > *,
.catalog-grid > *,
.deck-slot-grid > *,
.cards-grid > * {
  min-width: 0;
}

.board-card-wrap .vh-card,
.creature-wrap .vh-card,
.online-slot .vh-card,
.deck-slot.filled .vh-card {
  aspect-ratio: unset;
  width: 100%;
  height: 100%;
  max-height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.creature-wrap .vh-card.vh-on-board,
.online-slot .vh-card.vh-on-board,
.board-card-wrap .vh-card.vh-on-board,
.creature-wrap .vh-card.vh-hand:not(.hand-card-wrap .vh-card),
.online-slot .vh-card.vh-hand {
  font-size: clamp(0.66rem, 1.12vw, 0.84rem);
}

.board-card-wrap .vh-tac-art,
.creature-wrap .vh-tac-art,
.online-slot .vh-tac-art,
.deck-slot.filled .vh-tac-art,
.board-card-wrap .vh-hs-art,
.creature-wrap .vh-hs-art,
.online-slot .vh-hs-art,
.deck-slot.filled .vh-hs-art {
  min-height: 2.5em;
  flex: 1 1 auto;
}

.board-card-wrap .vh-tac-name,
.creature-wrap .vh-tac-name,
.online-slot .vh-tac-name,
.deck-slot.filled .vh-tac-name,
.board-card-wrap .vh-hs-name,
.creature-wrap .vh-hs-name,
.online-slot .vh-hs-name,
.deck-slot.filled .vh-hs-name {
  font-size: 1em;
}

.board-card-wrap .vh-tac-meta-grid,
.creature-wrap .vh-tac-meta-grid,
.online-slot .vh-tac-meta-grid,
.deck-slot.filled .vh-tac-meta-grid,
.board-card-wrap .vh-hs-desc,
.creature-wrap .vh-hs-desc,
.online-slot .vh-hs-desc,
.deck-slot.filled .vh-hs-desc,
.board-card-wrap .vh-hs-tribe,
.creature-wrap .vh-hs-tribe,
.online-slot .vh-hs-tribe,
.deck-slot.filled .vh-hs-tribe,
.board-card-wrap .vh-hs-gem,
.creature-wrap .vh-hs-gem,
.online-slot .vh-hs-gem,
.deck-slot.filled .vh-hs-gem {
  display: none;
}

.grid-cell.has-card,
.online-slot.has-card {
  overflow: visible;
}

.creature-wrap .vh-hs-mana,
.board-card-wrap .vh-hs-mana,
.online-slot .vh-hs-mana {
  top: 0.04em;
  left: 0.04em;
}

.creature-wrap .vh-hs-atk,
.board-card-wrap .vh-hs-atk,
.online-slot .vh-hs-atk {
  left: 0.06em;
  bottom: 0.06em;
}

.creature-wrap .vh-hs-hp,
.board-card-wrap .vh-hs-hp,
.online-slot .vh-hs-hp {
  right: 0.06em;
  bottom: 0.06em;
}

.creature-wrap .vh-hs-mana,
.board-card-wrap .vh-hs-mana,
.online-slot .vh-hs-mana,
.deck-slot.filled .vh-hs-mana {
  width: 1.5em;
  height: 1.5em;
}

.board-card-wrap .vh-hs-atk,
.creature-wrap .vh-hs-atk,
.online-slot .vh-hs-atk,
.deck-slot.filled .vh-hs-atk,
.board-card-wrap .vh-hs-hp,
.creature-wrap .vh-hs-hp,
.online-slot .vh-hs-hp,
.deck-slot.filled .vh-hs-hp {
  width: 1.45em;
  height: 1.45em;
}

.online-slot {
  aspect-ratio: var(--vh-aspect-board, 2.5 / 4.1);
  min-width: var(--vh-board-slot-min-w, 136px);
}

/* ——— Online hand strip ——— */
.hand-strip .vh-card {
  flex: 0 0 clamp(68px, 7.5vw, 96px);
  min-width: clamp(68px, 7.5vw, 96px);
  width: auto;
}

/* ——— Deck builder ——— */
.catalog-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(100px, 22vw, 160px)), 1fr));
  max-height: min(calc(100vh - 16rem), 900px);
}

.deck-slot-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 72px), 1fr));
}

.compose-preview .preview-card-inner {
  width: min(100%, clamp(120px, 28vw, 160px));
}

.tcg-main {
  padding-left: var(--vh-page-pad);
  padding-right: var(--vh-page-pad);
}

.rules-layout {
  padding-left: var(--vh-page-pad);
  padding-right: var(--vh-page-pad);
}

/* ——— Print preview (screen) ——— */
@media screen and (max-width: 720px) {
  .print-area {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: var(--vh-page-pad);
    padding-right: var(--vh-page-pad);
  }

  .print-page.sheet-page {
    width: max-content;
    margin-left: auto;
    margin-right: auto;
  }

  .print-toolbar,
  .print-specs {
    margin-left: var(--vh-page-pad);
    margin-right: var(--vh-page-pad);
  }
}

/* ——— Breakpoints ——— */
@media (min-width: 1280px) {
  :root {
    --vh-board-slot-min-w: clamp(148px, 10vw, 188px);
  }
}

@media (max-width: 1100px) {
  :root {
    --vh-hand-width: clamp(96px, 14vw, 130px);
  }

  .zone-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .catalog-grid {
    max-height: none;
  }
}

@media (max-width: 640px) {
  :root {
    --vh-grid-card-min: clamp(120px, 42vw, 168px);
    --vh-hand-width: clamp(88px, 24vw, 118px);
    --vh-board-slot-min-w: clamp(120px, 28vw, 148px);
  }

  .app-topbar {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .zone-row,
  .battle-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .rules-panel {
    padding: 1rem 1.15rem;
  }
}