/* The daily card draw on the store page (supply.rs): five cards fanned on a table. Face down they
   show the card back (assets/ui/supply/card-back.svg); the picked card flips first, then the rest.
   A face is framed in its rarity's colour: steel, lime, amber, gold. Tokens only (docs/DESIGN.md). */
@layer pages {
  .card-table { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); padding: var(--sp-8) var(--sp-4) var(--sp-5);
    border-radius: var(--r-lg); border: 1px solid var(--border-subtle);
    background: radial-gradient(70% 80% at 50% 40%, var(--brand-soft), transparent 70%), var(--surface-sunken); }

  .tcards { display: flex; justify-content: center; gap: var(--sp-4); width: 100%; perspective: 1000px; }
  .tcard { --rc: var(--border-strong); --rc-text: var(--text-3);
    position: relative; flex: 0 1 132px; min-width: 0; aspect-ratio: 5 / 7; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--text);
    rotate: var(--fan, 0deg); translate: 0 var(--drop, 0px); cursor: pointer;
    transition: translate var(--t-base) var(--ease), scale var(--t-base) var(--ease), opacity var(--t-slow) var(--ease), filter var(--t-slow) var(--ease); }
  .tcard.skeleton { border-radius: 10px; }
  .tcard:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
  .tcard:disabled { cursor: default; }
  .tcard:hover:not(:disabled) { translate: 0 calc(var(--drop, 0px) - 10px); }
  .tcard:active:not(:disabled) { translate: 0 calc(var(--drop, 0px) - 8px); }
  .tcard.lifting { translate: 0 calc(var(--drop, 0px) - 16px); scale: 1.04; }
  /* Locked: the backs wait, dimmed. */
  .tcard:disabled:not(.flipped):not(.lifting) { filter: grayscale(.6) brightness(.7); }

  /* Dealt onto the table one by one. */
  .tcards.dealt .tcard { animation: tcard-deal 420ms var(--ease) backwards; animation-delay: calc(var(--i) * 70ms); }
  @keyframes tcard-deal { from { opacity: 0; translate: 0 -48px; rotate: 0deg; } }

  /* The flip. */
  .tcard-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 650ms var(--ease) var(--delay, 0ms); }
  .tcard.flipped .tcard-inner { transform: rotateY(180deg); }
  .tcard-face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
  .tcard-back { box-shadow: var(--shadow-2); }
  .tcard-back img { display: block; width: 100%; height: 100%; }
  .tcard-front { transform: rotateY(180deg); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8% 8% 7%;
    background: linear-gradient(160deg, var(--surface-raised), var(--surface-overlay)); border: 2px solid var(--rc); box-shadow: var(--shadow-2), inset 0 0 0 1px color-mix(in srgb, var(--rc) 30%, transparent); }
  .tcard-window { flex: 1; width: 100%; min-height: 0; display: grid; place-items: center; border-radius: 6px;
    background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--rc) 30%, transparent), transparent 70%), var(--surface-sunken);
    border: 1px solid color-mix(in srgb, var(--rc) 40%, transparent); }
  .tcard-window img { width: 68%; aspect-ratio: 1; object-fit: contain; filter: var(--art-shadow); }
  .tcard-name { font: var(--fw-bold) var(--fs-sm) / 1.2 var(--font-ui); text-align: center; overflow-wrap: anywhere; }
  .tcard-rarity { font: var(--fw-semibold) var(--fs-xs) / 1 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--rc-text); }

  .tcard[data-rarity="uncommon"] { --rc: var(--lime); --rc-text: var(--lime-text); }
  .tcard[data-rarity="rare"] { --rc: var(--amber); --rc-text: var(--amber-text); }
  .tcard[data-rarity="legendary"] { --rc: var(--gold); --rc-text: var(--gold-text); }
  /* Legendary: a sheen runs across the face. */
  .tcard[data-rarity="legendary"] .tcard-front::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
    animation: tcard-sheen 2.8s ease-in-out infinite; }
  @keyframes tcard-sheen { 60%, 100% { background-position: 250% 0; } }

  /* Yours stands out; the missed ones step back once they have turned. */
  .tcard.picked { translate: 0 calc(var(--drop, 0px) - 12px); scale: 1.06; z-index: 1; }
  .tcard.picked .tcard-front { box-shadow: 0 0 0 1px var(--rc), 0 0 28px color-mix(in srgb, var(--rc) 45%, transparent), var(--shadow-2); }
  .tcard.missed { opacity: .62; scale: .94; filter: saturate(.5); transition-delay: var(--delay, 0ms); }
  .tcard-ribbon { position: absolute; top: -10px; left: 50%; translate: -50% 0; z-index: 2; padding: 2px var(--sp-2); border-radius: var(--r-pill);
    background: var(--brand); color: var(--text-inverse); font: var(--fw-bold) var(--fs-xs) / 1.4 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase;
    box-shadow: var(--shadow-1); animation: tcard-ribbon var(--t-slow) var(--ease) 500ms backwards; }
  @keyframes tcard-ribbon { from { opacity: 0; translate: -50% 6px; } }

  .card-table-note { text-align: center; color: var(--text-2); font-size: var(--fs-md); }
  div.card-table-note { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
  .card-table-note b { color: var(--text); }
  .card-table-note.late { animation: tcard-note var(--t-slow) var(--ease) 1.2s backwards; }
  @keyframes tcard-note { from { opacity: 0; } }
  .card-table-actions { display: flex; gap: var(--sp-2); }

  @media (max-width: 560px) {
    .card-table { padding: var(--sp-6) var(--sp-2) var(--sp-4); }
    .tcards { gap: var(--sp-2); }
    .tcard { rotate: none; translate: none; }
    .tcard:hover:not(:disabled), .tcard:active:not(:disabled) { translate: 0 -4px; }
    .tcard.picked, .tcard.lifting { translate: 0 -6px; }
    .tcard-front { gap: 3px; padding: 6%; }
    .tcard-name { font-size: var(--fs-xs); }
    .tcard-rarity { display: none; }
    .tcard-ribbon { top: -9px; padding: 0 6px; }
  }
}