.hand-zone {
  position: absolute;
  z-index: 25;
  left: 50%;
  bottom: 36px;
  width: min(980px, calc(100% - 520px));
  height: 340px;
  display: flex;
  align-items: end;
  justify-content: safe center;
  padding: 120px 54px 12px;
  transform: translateX(-50%);
  pointer-events: auto;

  @media (max-width: 1180px) {
    width: min(860px, calc(100% - 450px));
  }

  @media (max-width: 720px) {
    --hand-cards: max(1, var(--hand-count, 1));
    --hand-card-width: 90px;
    --hand-gap: 6px;
    --hand-pitch: calc(var(--hand-card-width) + var(--hand-gap));
    --hand-overlap: clamp(
    0px,
    calc(
    (var(--hand-cards) * var(--hand-pitch) - var(--hand-gap) - 100%) /
    max(1, var(--hand-cards) - 1)
    ),
    calc(var(--hand-pitch) - 12px)
    );
    right: 0;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 154px;
    justify-content: safe center;
    gap: var(--hand-gap);
    /* The side padding is wider than the corona reaches, so the end cards glow whole. */
    padding: 22px 20px 6px;
    overflow: visible;
    transform: none;
    background: linear-gradient(transparent, #090b08 42%);
  }
}

/*
  A hand card's reading pill hangs below the card, and on a phone the hand sits at the foot of the
  screen: hung there, the pill - unseen until a keyboard reaches it - would still reach past the
  screen and give the table a scroll. It sits over the card's lower edge instead, inside the hand.
*/
@media (max-width: 720px) {
  .hand-card .card-reading {
    top: auto;
    bottom: 4px;
  }
}

/* This box answers the pointer and NEVER moves. A card that rose on hover would climb out from
   under the pointer, lose it, drop, and take it again - flicker rather than lift. */
.hand-card {
  position: relative;
  /* Later in the hand means further forward, so every card keeps a strip of itself showing. */
  z-index: calc(var(--hand-index, 0) + 1);
  flex: 0 0 auto;
  margin: 0 -30px;
  overflow: visible;
  pointer-events: auto;

  /* The fan is flat on a phone, so the room made for an arriving card is made along the row. */
  @media (max-width: 720px) {
    margin: 0 calc(-1 * var(--hand-overlap)) 0 0;
    touch-action: pan-x pan-y;
    transition:
    transform calc(0.2s + var(--hand-index, 0) * 0.014s),
    margin-right calc(0.24s + var(--hand-index, 0) * 0.014s);
  }
}

/* Carried by the press surface so a tap always reaches the card it looks like it will; the
   inner visual is left free for the cue animations. */
.hand-card .card-press-surface {
  display: block;
  transform-origin: 50% 130%;
  /* The page measures each card's place in the fan; the arc itself is declared here. */
  transform: rotate(var(--fan-turn, 0deg)) translateY(var(--fan-lift, 0px));
  /* Per-card periods: a hand that moves as one block reads as a list being rewritten. */
  transition: transform calc(0.2s + var(--hand-index, 0) * 0.014s);

  /*
    The arc belongs to the desktop hand, which has room to spread. A phone holds the same cards
    shoulder to shoulder with only a strip of each showing, and a turn on every card lifts its
    neighbours' corners across that strip: the row has to be flat for the strips to read.
  */
  @media (max-width: 720px) {
    transform: none;
  }
}

.hand-card-visual {
  position: relative;
  width: max-content;
  height: max-content;
  display: block;
  transform-origin: 50% 130%;
  transition:
    filter 0.2s,
    opacity 0.2s;
}

/* Forward while engaged, including while the keyboard is on one of its reading controls. */
.hand-card:hover,
.hand-card:has(:focus-visible),
.hand-card.is-aura-selected {
  z-index: 60;
}

.hand-card:hover .card-press-surface,
.hand-card:has(:focus-visible) .card-press-surface,
.hand-card.is-aura-selected .card-press-surface {
  transform: translateY(-68px) rotate(0) scale(1.08);

  @media (max-width: 720px) {
    transform: translateY(-14px) scale(1.04);
  }
}

.hand-card .card-press-surface:focus-visible {
  outline: none;
}

/* Hover keeps its own warm lift, but never paints over an aura. */
.hand-card:not(.is-aura, .is-target):hover .hand-card-visual,
.hand-card:not(.is-aura, .is-target):has(:focus-visible) .hand-card-visual {
  filter: drop-shadow(0 0 12px rgb(244 189 63 / 55%));
}

/*
  A card picked up focuses the table on what it can do: the card holds its glow, where it can go
  glows for it, and every other held card steps back the way the field already does. Stepping
  back is being darkened, never being seen through: a card at part opacity reads as a ghost with
  the table showing through it, where a darkened card is still a card, just not one in play right
  now. The hand is dimmed by its visuals rather than its press surfaces, so the carried card keeps
  its own.
*/
.battle-screen.is-focused .hand-card:not(.is-aura, .is-aura-selected, .is-target) .hand-card-visual {
  filter: brightness(0.46) saturate(0.6);
}

/* The card being carried keeps the fan's own turn and comes up a little, and does not ease into
   the lift the chosen card takes when tapped: the pointer already has it. */
.hand-card[data-dragging] .card-press-surface {
  transform: rotate(var(--fan-turn, 0deg)) translateY(var(--fan-lift, 0px)) scale(1.06);
  transition: none;

  @media (max-width: 720px) {
    transform: scale(1.06);
  }
}

.hand-card:has(.card-press-surface:focus-visible) .hand-card-visual {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

/*
  ORDER MATTERS: after the hand's hover rules so a glowing card keeps its aura while hovered, and
  after the board rules so both zones read identically.

  A corona, not a bloom - a narrow rim faded out by about fifteen pixels, with a revolving lobe.
  Staying that tight is what lets it live in every zone with no boundary cutting across it.
*/
.is-aura .battle-card-shell::after,
.is-aura .hand-card-visual::after,
.is-aura .tray-card-visual::after,
button.bench-slot.is-aura::after,
button.deck-stack.is-aura::after {
  content: "";
  position: absolute;
  /* Also declared here so a browser that cannot register an angle still shows the rim. */
  --corona-angle: 0deg;
  /* Behind the card and behind whatever is tucked under it, never over the printed face. */
  z-index: -2;
  inset: -8px;
  border-radius: 14px;
  /* An even base rim plus two revolving lobes; one blurred layer, gone by about fifteen px. */
  background:
    conic-gradient(
      from var(--corona-angle),
      rgb(255 255 255 / 0%) 0deg,
      rgb(255 255 255 / 88%) 58deg,
      rgb(255 255 255 / 0%) 132deg,
      rgb(255 255 255 / 0%) 196deg,
      rgb(255 255 255 / 68%) 254deg,
      rgb(255 255 255 / 0%) 328deg
    ),
    rgb(255 255 255 / 26%);
  filter: blur(4px);
  pointer-events: none;
  animation:
    aura-corona 9s linear infinite,
    aura-breathe 3.2s ease-in-out infinite;
}

/*
  The card already chosen holds its corona: brighter, and still turning, but it stops breathing.
*/
.is-aura.is-aura-selected .battle-card-shell::after,
.is-aura.is-aura-selected .hand-card-visual::after,
.is-aura.is-aura-selected .tray-card-visual::after {
  background:
    conic-gradient(
      from var(--corona-angle),
      rgb(255 255 255 / 0%) 0deg,
      rgb(255 255 255 / 100%) 58deg,
      rgb(255 255 255 / 0%) 132deg,
      rgb(255 255 255 / 0%) 196deg,
      rgb(255 255 255 / 88%) 254deg,
      rgb(255 255 255 / 0%) 328deg
    ),
    rgb(255 255 255 / 46%);
  opacity: 1;
  animation: aura-corona 9s linear infinite;
}

/*
  Where the chosen card can go. The same rim and the same revolving lobes, in the table's gold
  rather than white, so a place to put a card reads apart from a card that could be played. It
  breathes like an offer; the one the pointer is on holds bright and still, the way the chosen
  card does.
*/
.is-target .battle-card-shell::after,
.is-target .hand-card-visual::after,
button.bench-slot.is-target::after,
button.empty-slot.is-target::after,
button.local-slot-empty.is-target::after,
.empties-tray.is-target .tray-top::after {
  content: "";
  position: absolute;
  --corona-angle: 0deg;
  z-index: -2;
  inset: -8px;
  border-radius: 14px;
  background:
    conic-gradient(
      from var(--corona-angle),
      rgb(244 189 63 / 0%) 0deg,
      rgb(246 221 160 / 92%) 58deg,
      rgb(244 189 63 / 0%) 132deg,
      rgb(244 189 63 / 0%) 196deg,
      rgb(246 221 160 / 72%) 254deg,
      rgb(244 189 63 / 0%) 328deg
    ),
    rgb(244 189 63 / 30%);
  filter: blur(4px);
  pointer-events: none;
  animation:
    aura-corona 9s linear infinite,
    aura-breathe 3.2s ease-in-out infinite;
}

.is-target:hover .battle-card-shell::after,
.is-target[data-drop-over] .battle-card-shell::after,
.is-target:hover .hand-card-visual::after,
.is-target[data-drop-over] .hand-card-visual::after,
button.bench-slot.is-target:hover::after,
button.bench-slot.is-target[data-drop-over]::after,
button.empty-slot.is-target:hover::after,
button.empty-slot.is-target[data-drop-over]::after,
button.local-slot-empty.is-target:hover::after,
.local-slot.is-target[data-drop-over] button.local-slot-empty::after,
.empties-tray.is-target:hover .tray-top::after,
.empties-tray.is-target[data-drop-over] .tray-top::after {
  background:
    conic-gradient(
      from var(--corona-angle),
      rgb(244 189 63 / 0%) 0deg,
      rgb(255 244 214 / 100%) 58deg,
      rgb(244 189 63 / 0%) 132deg,
      rgb(244 189 63 / 0%) 196deg,
      rgb(255 244 214 / 90%) 254deg,
      rgb(244 189 63 / 0%) 328deg
    ),
    rgb(244 189 63 / 52%);
  opacity: 1;
  animation: aura-corona 9s linear infinite;
}

/* The tray's top is the box the corona sits around, whether a card lies on it or nothing does. */
.empties-tray.is-target .tray-top {
  position: relative;
}

.empties-tray.is-target .tray-top::after {
  inset: -6px;
  border-radius: 10px;
}