/* Sized to the table rather than to the card: at full size the far Active runs off the top and
   loses its name. Both sides take the same size so the halves stay mirrored. */
.battle-screen .card-face--battle {
  --blokemon-card-scale: 0.215;

  @media (max-width: 720px) {
    --blokemon-card-scale: 0.128;
  }
}

/* A hold must not raise the browser's selection or callout, and a drag must still scroll. */
.field-card-button,
.hand-card,
.tray-card,
.card-press-surface {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-touch-callout: none;
}

.field-card-button {
  position: relative;
  z-index: 1;
  border-radius: 10px;
}

/* The press surface is one control and cannot be two, so each readable card - the host and every
   attachment - gets its own, shown only once the card is engaged. */
.card-press {
  position: relative;
}

/* The press surface keeps the card's own box, so nothing about the card's place has moved. */
.card-press-surface {
  display: block;
  border-radius: inherit;
}

/* An engaged card comes forward, so its reading controls are not painted over by its neighbours. */
.card-press:hover,
.card-press:focus-within {
  z-index: 90;
}

.card-reading {
  position: absolute;
  z-index: 90;
  top: calc(100% + 4px);
  left: 50%;
  display: none;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  /* Measured by its contents, not by the card: card names are wider than the card. */
  width: max-content;
  max-width: 240px;
  transform: translateX(-50%);
}

.card-press:hover > .card-reading,
.card-press:focus-within > .card-reading {
  display: flex;
}

.card-read {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 8px 3px 6px;
  border: 1px solid #6f7a55;
  border-radius: 100px;
  color: #f2f5e6;
  background: #10130ef2;
  box-shadow: 0 4px 12px #000a;
  cursor: pointer;
  white-space: nowrap;
  font: 700 10px "Jost", sans-serif;
}

.card-read:hover {
  border-color: var(--gold);
}

/* A lens, drawn rather than written, so the control shows what it does without saying it. */
.card-read-glyph {
  position: relative;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1.5px solid currentcolor;
  border-radius: 50%;
}

.card-read-glyph::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 4px;
  height: 1.5px;
  border-radius: 1px;
  background: currentcolor;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* The aura IS the instruction: actionable cards breathe, the chosen one holds and lifts.
   Nothing flashes or steps. */
.battlefield.is-choosing .field-card-button:not(.is-aura) {
  opacity: 0.42;
  filter: saturate(0.55);
}

.is-aura {
  z-index: 20;
  cursor: pointer;
}

.field-card-button.is-aura-selected .battle-card-shell {
  transform: translateY(-6px) scale(1.05);
}

.aura-counter {
  position: absolute;
  z-index: 12;
  top: -9px;
  left: -9px;
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #dff0ff;
  border-radius: 100px;
  color: #10130e;
  background: white;
  box-shadow: 0 3px 10px #0009;
  font: 700 12px "Jost", sans-serif;
}

/* The row never clips: a benched card's corona has to read whole, the same as anywhere else. */
.bench-row {
  position: relative;
  z-index: 4;
  grid-column: 2;
  display: flex;
  align-items: end;
  justify-content: center;
  max-width: 100%;
  gap: 8px;
  padding: 8px;
  overflow: visible;

  /* Five fixed positions, always all five - no scrolling. */
  @media (max-width: 720px) {
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(5, 50px);
    justify-content: center;
    justify-items: center;
    gap: 2px;
    padding: 3px 10px;
    overflow: visible;
  }
}

.bench-slot {
  flex: 0 0 98px;
  width: 98px;
  height: 137px;
  border: 1px dashed rgb(156 164 128 / 23%);
  border-radius: 7px;

  @media (max-width: 720px) {
    flex: none;
    width: 50px;
    height: 70px;
  }
}

/* An empty Bench position only becomes a control while it is a legal destination. */
button.bench-slot {
  display: grid;
  place-items: center;
  padding: 0;
  color: #10130e;
  background: rgb(255 255 255 / 12%);
  cursor: pointer;
}

/* An empty position glows the same way a card does: the same rim, the same revolving corona. */
button.bench-slot.is-aura {
  position: relative;
  border: 2px solid rgb(255 255 255 / 88%);
  box-shadow:
    0 0 4px rgb(255 255 255 / 55%),
    0 0 10px rgb(248 252 255 / 28%) inset;
}

button.bench-slot span {
  color: white;
  font: 700 10px "Jost", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.battle-card-shell {
  position: relative;
  width: max-content;
  /* REQUIRED by the fan's z-index: -1 below. Without a stacking context here that negative order
     is measured against the page and puts the fan behind the table entirely. */
  isolation: isolate;
  transition: transform 0.18s, filter 0.18s;
}

.battle-card-shell.is-selected {
  filter: drop-shadow(0 0 10px rgb(244 189 63 / 70%));
  transform: translateY(-3px);
}

.damage-badge {
  position: absolute;
  z-index: 10;
  top: 13px;
  right: -16px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border: 3px solid #f6d9c9;
  border-radius: 50%;
  color: white;
  background: var(--danger);
  box-shadow: 0 6px 16px #0008;
  font: 700 16px "Jost", sans-serif;

  @media (max-width: 720px) {
    top: 8px;
    right: -11px;
    width: 38px;
    height: 38px;
    border-width: 2px;
    font-size: 12px;
  }
}

.hp-badge,
.energy-badge {
  position: absolute;
  z-index: 10;
  bottom: -8px;
  padding: 4px 7px;
  border: 1px solid #696349;
  border-radius: 100px;
  color: var(--ink);
  background: #0b0d09ed;
  font-size: 10px;
  white-space: nowrap;
}

.hp-badge {
  right: 3px;

  @media (max-width: 720px) {
    right: -3px;
    font-size: 8px;
  }
}

/* The fan says which Energy; this says how much, which is what decides affordability. */
.energy-badge {
  left: 3px;

  @media (max-width: 720px) {
    left: -3px;
    font-size: 8px;
  }
}

.is-compact .damage-badge {
  top: 2px;
  right: -7px;
  width: 28px;
  height: 28px;
  border-width: 2px;
  font-size: 9px;

  /* A benched card is small enough that its damage counter has to be smaller too. */
  @media (max-width: 720px) {
    top: 2px;
    right: -6px;
    width: 24px;
    height: 24px;
    font-size: 9px;
  }
}

.is-compact .hp-badge {
  display: none;
}

/* Kept on the Bench where the HP pill is dropped: the fan is at its smallest here, so this is
   the only place the count can be read. */
.is-compact .energy-badge {
  left: 0;
  bottom: -6px;
  padding: 2px 5px;
  font-size: 8px;

  /* 50px of card: give up the padding, never the number. */
  @media (max-width: 720px) {
    left: -4px;
    bottom: -5px;
    padding: 1px 4px;
    font-size: 7px;
  }
}

/* Pressed through the host's surface, so they need the same callout and selection guards. */
.attached-card {
  flex: 0 0 auto;
  touch-action: pan-x pan-y;
  user-select: none;
  -webkit-touch-callout: none;
}

/*
  The Energy fan: each face steps left and back by a FRACTION of a face, so every one shows an
  edge - stepped by a whole face the fan shows only its front card.

  The reach is fixed and the spacing gives, so the fan stops widening at four faces and compresses
  after that rather than crossing the table. A compact card restates only the spacing.
*/
.attached-energy {
  /* The printed face is 750 wide, so a face in this fan is that times the scale it is drawn at.
     Declared here because the tuck is measured against it and the scale lives on the child. */
  --energy-fan-card: calc(750px * 0.055);
  --energy-fan-spread: 16px;
  /* Three steps, so the fan is at its widest at four faces and everything after that closes the
     spacing up rather than reaching further across the table. */
  --energy-fan-reach: calc(var(--energy-fan-spread) * 3);
  --energy-fan-step: min(
    var(--energy-fan-spread),
    var(--energy-fan-reach) / max(1, var(--energy-fan-count, 1) - 1)
  );
  /* Derived, not fixed: the first gap has to be one step like every other, or the leading face
     shows about twice what the ones behind it do. */
  --energy-fan-tuck: calc(var(--energy-fan-card) - var(--energy-fan-step));
  position: absolute;
  z-index: -1;
  right: calc(100% - var(--energy-fan-tuck));
  bottom: 16px;
  height: 0;

  /* The same fan against a card roughly half the size. */
  @media (max-width: 720px) {
    --energy-fan-step: 12px;
    --energy-fan-tuck: 12px;
    bottom: 10px;
  }
}

/* Back to front, so the face nearest the host paints last and lies over the rest. */
.attached-energy .attached-card {
  position: absolute;
  right: calc(var(--fan-depth, 0) * var(--energy-fan-step));
  bottom: 0;
  filter: drop-shadow(0 4px 5px rgb(0 0 0 / 65%));
}

.is-compact .attached-energy {
  --energy-fan-card: calc(750px * 0.035);
  --energy-fan-spread: 9px;
  bottom: 11px;

  @media (max-width: 720px) {
    --energy-fan-step: 6px;
    --energy-fan-tuck: 5px;
    bottom: 6px;
  }
}

.is-compact .attached-energy .card-face-host {
  --blokemon-card-scale: 0.035;

  @media (max-width: 720px) {
    --blokemon-card-scale: 0.026;
  }
}

.attached-tools {
  position: absolute;
  z-index: 9;
  right: -22px;
  bottom: 18px;
  display: flex;
}

.attached-tools .card-face-host {
  filter: drop-shadow(0 4px 6px rgb(0 0 0 / 75%));
}

.is-compact .attached-tools {
  right: -12px;
  bottom: 5px;
}

.is-compact .attached-tools .card-face-host {
  --blokemon-card-scale: 0.035;
}

.condition-row {
  position: absolute;
  z-index: 12;
  top: -7px;
  left: 50%;
  display: flex;
  gap: 3px;
  transform: translateX(-50%);
}

.condition-row span {
  padding: 3px 6px;
  border: 1px solid #a65f7b;
  border-radius: 100px;
  color: #ffd6e5;
  background: #351a26;
  font-size: 8px;
  white-space: nowrap;
}