/* One intrinsic card geometry. Containers choose zoom; card parts never use
   viewport-dependent sizes. The art window is always 3:4. */
.card[class], #hand > .card, dialog .card, #pile-cards .card, #world-dialog .card,
.reward-options .card, .route-offer .card, .demo-result > .card,
.arena .unit, #player .unit {
  --card-w:240px; --card-h:484px;
  width:240px; min-width:240px; max-width:240px;
  height:484px !important; min-height:484px; max-height:484px;
  aspect-ratio:240 / 484; display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:36.8px 294.4px 14px minmax(0,1fr);
  padding:8px; gap:4px; flex:0 0 auto; border-width:1px; box-sizing:border-box;
}
.card[class] > b, #hand > .card > b, dialog .card > b, #pile-cards .card > b, .arena .unit-name {
  font-size:17px; line-height:18.4px; padding-top:0; padding-bottom:0;
  margin:0;min-height:0;height:36.8px;padding-left:26px;padding-right:26px;
  max-height:36.8px; overflow:hidden; overflow-wrap:anywhere;
}
.card[class] > .art, .arena .unit > .portrait {
  width:220.8px; height:294.4px; min-height:0; max-height:294.4px;
  aspect-ratio:3/4; justify-self:center; margin:0;
}
.card .art-image { background-size:contain!important; background-position:center!important; }
.card > .card-type, .card.frame-attack > .card-type, #hand > .card .card-type,
dialog .card .card-type, .arena .unit-type {
  font-size:7px; line-height:9px; letter-spacing:.35px; min-width:39px; padding:0 4px;
}
.card > p, .card.frame-attack > p, .card.frame-summon > p,
#hand > .card > p, dialog .card > p, #pile-cards .card > p,
#pile-cards .card.frame-summon > p {
  margin:0 0 4.4px; padding:0 5px; font-family:system-ui,sans-serif;font-size:17px; line-height:22px;
  /* Four 22px lines plus the existing 1px top and bottom borders. */
  height:90px;min-height:0;max-height:90px;align-self:center;width:100%;overflow:auto;overflow-wrap:anywhere;
  scrollbar-width:thin;scrollbar-color:#a58a60 transparent;
}
.card > p:has(.effect-line), #hand > .card > p:has(.effect-line) {
  display:flex; flex-direction:column; justify-content:safe center; align-items:center; gap:0;
}
.card .effect-line, #hand .effect-line {
  display:block;
  flex:0 0 auto; line-height:22px; max-width:100%;white-space:normal;overflow-wrap:anywhere;
}
.card .effect-line>.game-icon { width:22px; height:22px; vertical-align:middle; }
.card .cost { width:34px; height:34px; font-size:22px; line-height:1; }
.arena .unit-details { margin-bottom:4.4px; }