.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%);
  }
}

/* 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;
}

/* 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 a white aura. */
.hand-card:not(.is-aura):hover .hand-card-visual,
.hand-card:not(.is-aura):has(:focus-visible) .hand-card-visual {
  filter: drop-shadow(0 0 12px rgb(244 189 63 / 55%));
}

.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;
}