/* zones.css — piles, life totals, preview pane, drop highlights */

/* ---------- piles (deck / crypt / void) ---------- */

.pile {
  position: relative;
  width: 101px;
  height: 141px;
  flex-shrink: 0;
  border-radius: 8px;
  transition: transform 0.15s ease, filter 0.15s ease;
}

/* stacked-deck thickness behind the top card */
.pile::before,
.pile::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 7px;
  background: #0f0d0b;
  box-shadow:
    0 0 0 1px rgba(255, 235, 190, 0.12),
    0 4px 10px rgba(0, 0, 0, 0.4);
}
.pile::before { transform: translate(3px, 2.5px); }
.pile::after  { transform: translate(1.5px, 1px); }
.pile--empty::before,
.pile--empty::after { content: none; }

/* mini card / card back inside a pile */
.pile .card.card--static {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 101px;
  height: 141px;
  pointer-events: none;
}

.pile--deck { cursor: pointer; }
.pile--deck:hover { filter: brightness(1.12); }

.pile__placeholder {
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(201, 168, 106, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.pile__count {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 2;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #ffe9bd;
  background: radial-gradient(circle at 35% 30%, #5a4426, #2c1f0e);
  border: 1px solid rgba(255, 220, 150, 0.4);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.pile__label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -18px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  opacity: 0.45;
  pointer-events: none;
}

.pile--shake { animation: pile-shake 0.3s ease; }
@keyframes pile-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  55% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

/* ---------- life totals ---------- */

.life {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 84px;
  flex-shrink: 0;
}

.life__value {
  font-size: 30px;
  font-weight: 700;
  color: #f3e9c8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

.life__value--pop { animation: life-pop 0.25s ease; }
@keyframes life-pop {
  40% { transform: scale(1.25); }
}

/* Floating damage/gain amount, e.g. the "−5" a bolstered attacker just dealt.
   Rises and fades beside the life value, then removes itself. */
.life__delta {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  animation: life-delta 1.3s ease-out forwards;
}
.life__delta--down { color: #e07b5a; }
.life__delta--up   { color: #86c46a; }
@keyframes life-delta {
  0%   { opacity: 0; transform: translate(-50%, 6px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -22px); }
}

.life__btn {
  width: 32px;
  height: 24px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  color: #d8cba6;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(201, 168, 106, 0.35);
  border-radius: 6px;
  cursor: pointer;
}
.life__btn:hover { background: rgba(201, 168, 106, 0.22); }
.life__btn:active { transform: translateY(1px); }

/* ---------- drop-target highlights ---------- */

#hand-zone.zone--over {
  background-color: rgba(255, 224, 150, 0.05);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 150, 0.22);
}

#battleground.zone--over {
  background-color: rgba(255, 224, 150, 0.05);
  box-shadow: inset 0 0 0 2px rgba(255, 224, 150, 0.18);
}

.pile.zone--over {
  transform: scale(1.06);
  filter: brightness(1.2);
}

/* ---------- preview pane ---------- */

#preview-pane {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%) scale(0.96);
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
#preview-pane.preview--visible {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
#preview-pane .card {
  /* 450px = 0.6× the face's 750px author space: rules text renders at 12px,
     the name at 19.8px, flavor at 12px, stat digits at 27.6px — the close-up
     is STRICTLY bigger and crisper than the 150px hand face anywhere on the
     table (its ~10.75px tiers), which is the whole point of hovering: the
     one place you go to actually READ the card. (The single exception is
     the Tower's 561-char epic, which stays complete-and-dense instead of
     bigger — completeness wins for the one pathological card.) */
  width: 450px;
  height: 630px;
}
#preview-pane .card { /* no shadow: cards sit flat everywhere (see card.css) */ }
/* Short viewports: shrink the close-up so it never clips the top/bottom of
   the screen. The live-patch math reads the real card width, so the A/H
   overlay re-locks to the chip at this size automatically. */
@media (max-height: 760px) {
  #preview-pane .card {
    width: 360px;
    height: 504px;
  }
}
@media (max-height: 620px) {
  #preview-pane .card {
    width: 290px;
    height: 406px;
  }
}

/* Raised close-up (PreviewPane._place): a hover source in the LOWER half of
   the screen — the player's crypt/void pile fan, which lives at the bottom
   edge — would be buried by the centered pane, so the pane anchors its bottom
   just above the hovered card instead (JS owns the `bottom`; these rules only
   drop the centering translate). The transform transition is disabled here:
   the raised layout box jumps, and transitioning the old centered transform
   would sweep the pane in from off-screen instead of fading it in place. */
#preview-pane.preview--raised {
  top: auto;
  transform: scale(1);
  transition: opacity 0.16s ease;
}
/* When the full close-up cannot fit above the fan, fall back to the short-
   viewport card size (the size the max-height media queries already use).
   Gated to tall viewports so it can never GROW a short viewport's card past
   its own media-query size. */
@media (min-height: 761px) {
  #preview-pane.preview--compact .card {
    width: 360px;
    height: 504px;
  }
}

/* ---------- pile tray (crypt/void slide-out drawer) ----------
   The crypt and void piles only matter when something dies or is
   voided, so rather than keep them permanently on the felt they live in a
   drawer beside the always-visible deck that collapses to a slim tab.

   The drawer is pure CSS: it is laid out in the strip at its true, open
   position (the layout the piles would occupy anyway), and visibility is a
   `max-width` collapse + a reveal slide with a soft overshoot, so the tab
   never moves — it sits beside the deck exactly where the user left it,
   with a felt gap between them. The drawer emerges from the tab — which is
   the screen-edge side of the pile cluster on both rows — never over the
   deck.
   A dying card flies to the same destination whether the drawer is open,
   closed, or mid-collapse — the pile's rect is the transform-unchanged one. */
/* The drawer lives at the strip's END — on the screen edge — beside (not
   over) the always-visible deck. The tab sits at the screen-edge side
   of the drawer and never moves as it opens; the two piles queue out from
   it toward the deck (boardward), so opening the drawer reads as the
   piles sliding out of the screen's right edge on both rows. */
.pile-tray {
  position: relative;         /* in the strip's flex flow */
  display: flex;
  /* Pack the content against the SCREEN edge: the tab is order 2 / last, so
     when the collapsed max-width clips the drawer, it is the drawer that gets
     cropped (its own opacity:0 + translate keeps it invisible anyway) — the
     tab is always the visible handle. Never the reverse.
     IMPORTANT: no overflow: hidden here — a pile's `.pile__count` badge pops
     7px above the pile's top edge (position: absolute, top: -7px) and would
     be clipped. The drawer's collapse is width-only (max-width transition);
     the drawer itself is what fades in/out via its own opacity/transform. */
  justify-content: flex-end;
  align-items: stretch;
  /* Collapsed: just the tab + its gutter off the deck. Open: a ceiling
     larger than the tray's content, so width settles at the drawer's real
     content size (the tray has no flex-grow, it is content-sized) while the
     transition still animates the expansion. */
  max-width: 126px;
  transition: max-width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}
.pile-tray[data-open="true"] {
  max-width: 640px;
}

.pile-tray__drawer {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 14px;
  opacity: 0;
  transform: translateX(24%) scaleX(0.6);
  transform-origin: right center;   /* emerge from beside the tab (the screen end) */
  transition:
    opacity   0.28s ease,
    transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.pile-tray[data-open="true"] .pile-tray__drawer {
  opacity: 1;
  transform: translateX(0) scaleX(1);
}

/* Put the tab at the screen-edge end of the tray and the two piles (in
   their drawer, closest-first: crypt, then void next to the deck)
   on the boardward side — the tab never moves and never touches the deck. */
.pile-tray .pile-tray__tab { order: 2; }
.pile-tray .pile-tray__drawer { order: 1; }

/* The tab is the drawer's handle: it never moves and never touches the
   deck — a felt gutter reads between them. Two labelled slots (crypt
   + void) each carry a live count chip and the same lowercase caption the
   pile labels used before, so the closed drawer is legible. */
.pile-tray__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 7px 8px;
  font-family: inherit;
  border: 1px solid rgba(201, 168, 106, 0.45);
  background: linear-gradient(180deg, #3a2f1c, #1e150b);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 16px;             /* felt gap off the deck */
  border-radius: 9px;
  align-self: center;
}
.pile-tray__tab:hover { filter: brightness(1.22); }
.pile-tray--out .pile-tray__tab { filter: brightness(1.14); }

.pile-tray__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
/* The captions mirror the old `pile__label` text so the closed tab reads
   exactly like the piles it replaced. */
.pile-tray__cap {
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.52;
  color: var(--ink);
}

.pile-tray__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 34px;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(201, 168, 106, 0.18);
  opacity: 0.5;                 /* dim while empty — full/empty reads closed */
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.pile-tray__chip--lit { opacity: 1; border-color: rgba(201, 168, 106, 0.4); }
.pile-tray__sigil {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  border: 1px solid rgba(232, 224, 205, 0.55);
}
.pile-tray__chip--crypt .pile-tray__sigil { background: #6d5136; border-radius: 50% 50% 0 0; rotate: 0; }
.pile-tray__chip--void .pile-tray__sigil { background: transparent; border-color: rgba(201, 168, 106, 0.8); box-shadow: 0 0 6px rgba(201, 168, 106, 0.35); }
.pile-tray__n {
  font-size: 12px;
  font-weight: 700;
  color: #ffe9bd;
  line-height: 1;
}

/* Arrival pulse — a card landed in this pile: the chip pops and glows ember
   so the event reads even through a closed tray. */
.pile-tray__chip--pop { animation: pile-chip-pop 0.9s ease; }
@keyframes pile-chip-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.22); border-color: rgba(224, 123, 90, 0.9); box-shadow: 0 0 14px rgba(224, 123, 90, 0.55); }
  100% { transform: scale(1); }
}

/* Piles inside the drawer keep their identity — they're the same pile
   elements the layout, hover preview and future hit-testing already know. */
.pile-tray .pile {
  position: relative;
  flex: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.pile-tray__chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 34px;
  justify-content: center;
  padding: 3px 5px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.34);
  border: 1px solid rgba(201, 168, 106, 0.18);
  opacity: 0.5;                 /* dim while empty — full/empty reads closed */
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.pile-tray__chip--lit { opacity: 1; border-color: rgba(201, 168, 106, 0.4); }
.pile-tray__sigil {
  display: block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  border: 1px solid rgba(232, 224, 205, 0.55);
}
.pile-tray__chip--crypt .pile-tray__sigil { background: #6d5136; border-radius: 50% 50% 0 0; rotate: 0; }
.pile-tray__chip--void .pile-tray__sigil { background: transparent; border-color: rgba(201, 168, 106, 0.8); box-shadow: 0 0 6px rgba(201, 168, 106, 0.35); }
.pile-tray__n {
  font-size: 12px;
  font-weight: 700;
  color: #ffe9bd;
  line-height: 1;
}

/* Arrival pulse — a card landed in this pile: the chip pops and glows ember
   so the event reads even through a closed tray. */
.pile-tray__chip--pop { animation: pile-chip-pop 0.9s ease; }
@keyframes pile-chip-pop {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.22); border-color: rgba(224, 123, 90, 0.9); box-shadow: 0 0 14px rgba(224, 123, 90, 0.55); }
  100% { transform: scale(1); }
}

/* Piles inside the drawer keep their identity — they're the same pile
   elements the layout, hover preview and future hit-testing already know. */
.pile-tray .pile {
  position: relative;         /* override the static pile positioning */
  flex: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.pile-tray .pile::before,       /* the weaveed-deck edges read the same in a tray */
.pile-tray .pile::after { content: ''; }

/* ---------- the pile fan (a clicked crypt/void "slip of cards") ----------
   Clicking a destination pile fans its cards out overlapped above the open
   tray — the hand's held-slip idiom, not a spaced grid. The fan floats over
   the felt; z sits above the table chrome and hand but below the enlarged
   close-up (preview-pane z 3000). Pure translation only — a resting card
   NEVER rotates, so its face stays crisp (the hand's crispness contract). */
.pile-fan {
  position: fixed;
  inset: 0;
  z-index: 150;               /* above hand (130) and dock, below preview */
  pointer-events: none;        /* only the card cells take the pointer */
}
.pile-fan__card {
  position: absolute;
  width: 150px;
  height: 210px;
  pointer-events: auto;        /* a sliver can be hovered to read */
  transition: transform 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.pile-fan__card .card {
  /* the real table card element — foil/marble/A-H all ride along; flat like
     every other surface (no under-card slab) */
  width: 150px;
  height: 210px;
  transform: none;
}
.pile-fan__card .card .card-face {
  border-radius: 7.2% / 5.143%;
  background-size: 100% 100%;
}
/* Hovering a sliver lifts that card a beat so its full face clears its
   right-hand neighbor (the enlarged close-up in the preview pane carries the
   actual reading). No fan reshuffle — only the hovered card raises. */
.pile-fan__card--hover {
  transform: translateY(-16px) scale(1.05);
}

/* The PICK mood (Animate the Restless & the reanimation family): every fan
   cell is a button that completes a cast at that crypt card. Legal picks
   breathe gold so the playable set reads at a glance; a pickable card's
   hover both lifts it AND brightens the ring. The read mood carries no ring
   (it's not a decision). */
.pile-fan__card--pick { cursor: pointer; }
.pile-fan__card--pick .card {
  box-shadow: 0 0 0 2px rgba(216, 186, 104, 0.85), 0 0 22px rgba(216, 186, 104, 0.22);
  animation: pileFanPickGlow 2.4s ease-in-out infinite;
}
.pile-fan__card--pick.pile-fan__card--hover .card {
  animation: none;
  box-shadow: 0 0 0 2px #e8d9b0, 0 8px 26px rgba(216, 186, 104, 0.4);
}
@keyframes pileFanPickGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(216, 186, 104, 0.6), 0 0 14px rgba(216, 186, 104, 0.12); }
  50%      { box-shadow: 0 0 0 2px rgba(232, 217, 176, 0.95), 0 0 26px rgba(216, 186, 104, 0.3); }
}