/* Shared face for hand cards, public plays, draw flips and the detail viewer. */
.card-face {
  --card-ink: #81392d;
  --card-name-top: 9px;
  position: relative; isolation: isolate; overflow: hidden;
  background: #eee2c6 url("https://bj-cdn.geemii.com/cards/default-v1.svg") center / cover;
  border: 1px solid #b69a66; border-radius: 6px;
  color: #293d33;
}
.card-face[data-tone="defense"] { --card-ink: #354f61; }
.card-face[data-tone="heal"] { --card-ink: #376149; }
.card-face[data-tone="strategy"] { --card-ink: #65512f; }
.card-face[data-tone="treasure"] { --card-ink: #755025; }
.card-face::after {
  content: none;
}
.card-face .card-art {
  position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%;
  object-fit: cover; pointer-events: none; opacity: 1;
}
.card-face .card-name {
  position: absolute; top: var(--card-name-top); left: 9px; margin: 0; padding: 1px 3px;
  max-width: calc(100% - 18px); max-height: calc(100% - var(--card-name-top) - 36px); overflow: hidden;
  color: #352b1d; background: #f5ead4f2;
  font: 600 16px/1.2 "Noto Sans SC", sans-serif;
  writing-mode: horizontal-tb; white-space: normal; overflow-wrap: anywhere;
  letter-spacing: .5px; text-shadow: none;
  border: 1px solid #ae915c99; border-radius: 3px; box-shadow: 0 1px 4px #0005;
}
.card-face .card-action-label {
  position: absolute; bottom: 6px; left: 6px; right: 6px; padding: 3px 1px;
  color: #4c4130; background: #f5ead4ed; border-top: 1px solid #b7a07788;
  font: 500 9px/1.2 "Noto Sans SC", sans-serif; text-align: center; letter-spacing: 1px;
}
.game-page .playing-card.card-face {
  padding: 0; background: #eee2c6 url("https://bj-cdn.geemii.com/cards/default-v1.svg") center / cover;
  box-shadow: 0 5px 12px #0007; opacity: 1;
}
.game-page .playing-card.card-face .card-name { font-size: clamp(13px, 1.8vh, 17px); }
.game-page .playing-card.card-face.playable { border-color: #dab875; box-shadow: 0 5px 12px #0008, 0 0 9px #d7bb6738; }
.game-page .playing-card.card-face.unavailable { border-color: #7b796b; box-shadow: 0 3px 8px #0005; }
.game-page .playing-card.card-face.unavailable .card-art { filter: grayscale(1) brightness(.5); }
.game-page .playing-card.card-face.selected { border: 2px solid #ffe19a; box-shadow: 0 0 22px #f6c66188; }
.card-flight.card-face { display: block; background: #eee2c6 url("https://bj-cdn.geemii.com/cards/default-v1.svg") center / cover; }
.draw-card .draw-card-front.card-face { display: block; background: #eee2c6 url("https://bj-cdn.geemii.com/cards/default-v1.svg") center / cover; }
.draw-card .draw-card-back, .discard-card.card-back, .formation-central-discard.card-back, .deck-card-back {
  background: #172c29 url("https://bj-cdn.geemii.com/cards/back-v1.svg") center / 100% 100%;
  border: 1px solid #b59b65; overflow: hidden; position: absolute;
}
.card-back-seal, .discard-card.card-back > .card-back-seal, .formation-central-discard > .card-back-seal {
  position: absolute; top: 41%; left: 42%; width: 16%; height: 18%;
  display: grid; place-content: center; border: 0; border-radius: 0;
  color: #f1d295; font: 600 clamp(6px, .7vw, 10px)/1.05 "SimSun", "Noto Sans SC", serif;
  letter-spacing: 0; text-shadow: none;
}
.deck-label { display: flex; align-items: center; justify-content: center; gap: 9px; }
.deck-card-back { position: relative; display: inline-block; flex: 0 0 22px; width: 22px; height: 31px; border-radius: 3px; box-shadow: 2px 2px #172c29, 3px 3px #b59b6580; }
.deck-card-back .card-back-seal { font-size: 5px; }
@media (max-height: 430px) {
  .game-page .playing-card.card-face { --card-name-top: 7px; }
  .game-page .playing-card.card-face .card-name { left: 7px; font-size: 13px; }
  .game-page .playing-card.card-face .card-pips { top: auto; bottom: 7px; left: auto; right: 7px; }
}


.card-face .card-pips { white-space:normal; text-align:center; position:absolute; top:auto; bottom:8px; left:auto; right:9px; z-index:2; padding:1px 3px; border:1px solid #ae915c99; border-radius:3px; background:#f5ead4f2; box-shadow:0 1px 4px #0005; color:#18231f; font-size:13px; font-weight:400; line-height:1.2; font-variant-numeric:tabular-nums; }
.card-face .card-pips.red { color:#a62c25; }

/* Long theme names stay readable without covering the central artwork. */
.card-face .card-name.card-name-long {
  top: var(--card-name-top); bottom: auto; left: 9px; right: auto;
  max-width: calc(100% - 18px); max-height: calc(100% - 40px); padding: 3px 4px;
  writing-mode: horizontal-tb; text-align: left; letter-spacing: 0;
  font-size: 12px; line-height: 1.25; overflow-wrap: anywhere;
}
.game-page .playing-card.card-face .card-name.card-name-long { font-size: 12px; }
@media (max-height: 350px) {
  .game-page .playing-card.card-face .card-name.card-name-long { font-size: 10px; padding: 2px 3px; }
}

/* Small animation faces give metadata, name and event feedback separate rows. */
.card-flight.card-face, .draw-card .draw-card-front.card-face {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto; gap: 2px; padding: 4px;
}
.card-flight.card-face .card-pips, .draw-card-front.card-face .card-pips {
  position: static; grid-column: 2; grid-row: 3; justify-self: end; align-self: end;
  padding: 1px; font-size: 7px;
}
.card-flight.card-face .card-name, .draw-card-front.card-face .card-name {
  position: static; grid-column: 1 / -1; grid-row: 1; align-self: start; justify-self: start;
  min-width: 0; max-width: 100%; max-height: 100%; padding: 1px;
  writing-mode: horizontal-tb; font-size: 10px; line-height: 1.2; letter-spacing: 0;
}
.card-flight.card-face .card-name-long, .draw-card-front.card-face .card-name-long { font-size: 8px; }
.card-flight.card-face .card-action-label {
  position: static; grid-column: 1; grid-row: 3; min-width: 0;
  font-size: 7px; line-height: 1.2; padding: 1px 0; letter-spacing: 0;
}

.equipment-pending{visibility:hidden!important;pointer-events:none!important}

/* Fit hand-card names to the card, keeping artwork visible below two lines. */
.playing-card.card-face, .formation-hand-card.card-face { container-type: inline-size; }
.game-page .playing-card.card-face .card-name.card-name-long,
.formation-hand-card.card-face .card-name.card-name-long {
  left: 6px; right: auto; max-width: calc(100% - 12px); max-height: none;
  box-sizing: border-box; padding: 1px 3px;
  font-size: clamp(9px, 12cqw, 14px); line-height: 1.25;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; text-wrap: balance; overflow-wrap: anywhere;
}
@container (min-width: 88px) {
  .game-page .playing-card.card-face .card-name.card-name-medium,
  .formation-hand-card.card-face .card-name.card-name-medium {
    display: block; white-space: nowrap; text-overflow: ellipsis;
    font-size: clamp(10px, 14cqw, 14px);
  }
}

.game-page .playing-card.card-face.unavailable :is(.card-name, .card-pips) { filter: grayscale(1) brightness(.8); }

/* Quiet, translucent labels keep hand-card artwork visible. */
.game-page .playing-card.card-face :is(.card-name, .card-pips),
.formation-hand-card.card-face :is(.card-name, .card-pips) {
  background: rgb(14 32 28 / 82%);
  border: 0; border-radius: 3px; box-shadow: none;
  text-shadow: 0 1px 2px #0008;
}
.game-page .playing-card.card-face .card-name,
.formation-hand-card.card-face .card-name { color: #f0dca8; }
.game-page .playing-card.card-face .card-pips,
.formation-hand-card.card-face .card-pips { color: #f0eadb; }
.game-page .playing-card.card-face .card-pips.red,
.formation-hand-card.card-face .card-pips.red { color: #ffaaa0; }

.game-page .playing-card.card-face .card-pips { font-size: clamp(13px, 1.8vh, 17px); }
.formation-hand-card.card-face .card-pips { font-size: 11px; }
@media (max-height: 430px) {
  .game-page .playing-card.card-face .card-pips { font-size: 13px; }
}
.game-page .playing-card.card-face:has(.card-name-long) .card-pips,
.formation-hand-card.card-face:has(.card-name-long) .card-pips { font-size: clamp(9px, 12cqw, 14px); }
@container (min-width: 88px) {
  .game-page .playing-card.card-face:has(.card-name-medium) .card-pips,
  .formation-hand-card.card-face:has(.card-name-medium) .card-pips { font-size: clamp(10px, 14cqw, 14px); }
}