/* cards.css — CSS owns the geometry. One custom property, --card-w, drives the
   whole card; every internal metric is derived from it. Detail tiers are
   swapped by @container queries whose breakpoints mirror js/core/tier.js. */

:root {
  --felt: #22423f;
  --felt-edge: #1a3330;
  --chrome-ink: #e8efe9;
  --chrome-dim: #9fb3ad;

  --card-bg: #f7f5ef;      /* cards stay physical-white in both themes */
  --card-edge: #d8d2c4;
  --card-shadow: rgba(0, 0, 0, 0.35);

  --ink: #23272e;          /* spades + clubs (two-colour default) */
  --red: #b02a37;          /* hearts + diamonds */
  --suit-spades: var(--ink);
  --suit-clubs: var(--ink);
  --suit-hearts: var(--red);
  --suit-diamonds: var(--red);
}

/* Four-colour deck: clubs and diamonds get their own hue for small-tier legibility. */
.four-color {
  --suit-clubs: #1f7a4d;
  --suit-diamonds: #1f5fbf;
}

/* Dark mode (shell-owned in Cheery Chimp; toggled here for the demo). The felt
   and chrome dim; the card faces themselves stay light, as physical cards do. */
.dark {
  --felt: #16211f;
  --felt-edge: #0e1615;
  --chrome-ink: #dfe7e2;
  --chrome-dim: #7f938d;
  --card-shadow: rgba(0, 0, 0, 0.55);
}

/* ---- the card ---------------------------------------------------------- */

.card {
  container-type: inline-size;
  container-name: card;
  width: var(--card-w, 120px);
  aspect-ratio: 5 / 7;
  perspective: 900px;
  flex: 0 0 auto;
  --radius: calc(var(--card-w) * 0.09);
  --pad: calc(var(--card-w) * 0.05);
}

.card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.card.is-down .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--radius);
  background: var(--card-bg);
  border: max(1px, calc(var(--card-w) * 0.01)) solid var(--card-edge);
  box-shadow: 0 calc(var(--card-w) * 0.03) calc(var(--card-w) * 0.06) var(--card-shadow);
  overflow: hidden;
}
.card__face--back { transform: rotateY(180deg); border: 0; }

/* corner indices (SVG-crisp text, themeable, drawn OVER any raster) */
.idx {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.92;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.idx--tl { top: var(--pad); left: var(--pad); }
.idx--br { bottom: var(--pad); right: var(--pad); transform: rotate(180deg); }
.idx__rank { font-size: calc(var(--card-w) * 0.20); }
.idx__suit { font-size: calc(var(--card-w) * 0.17); margin-top: calc(var(--card-w) * -0.01); }

/* centred big glyph: the mini representation for every card, and the compact
   representation for court cards. Also the fallback behind a court raster. */
.center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 0.9;
  font-weight: 800;
}
.center__rank { font-size: calc(var(--card-w) * 0.46); }
.center__suit { font-size: calc(var(--card-w) * 0.34); }

/* SVG pip field for number cards */
.pips { position: absolute; inset: 12% 14%; width: 72%; height: 76%; }
.pips text { font-weight: 700; }

/* raster figure window for court cards (JS mounts the <img> only at full tier) */
.figure {
  position: absolute;
  inset: 14% 12%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.figure img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* Card images must not hijack pointer gestures with the browser's native image
   drag/selection (which otherwise blocks tap-to-select and drag-to-reorder on
   face cards). Keep them inert; the card element handles all interaction. */
.card { -webkit-user-select: none; user-select: none; }
.card img {
  -webkit-user-drag: none; -khtml-user-drag: none; user-select: none;
  pointer-events: none; -webkit-touch-callout: none;
}

.back-emblem { position: absolute; inset: 0; display: block; }
.back-emblem img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__face--back { background:
  radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--felt) 30%, #fff) 0%, var(--card-bg) 60%); }

/* suit colouring, applied wherever a suit glyph appears */
.s-spades   { color: var(--suit-spades); }
.s-hearts   { color: var(--suit-hearts); }
.s-diamonds { color: var(--suit-diamonds); }
.s-clubs    { color: var(--suit-clubs); }
.j-black    { color: var(--ink); }
.j-red      { color: var(--red); }
.center__cap {
  font-size: calc(var(--card-w) * 0.12);
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-top: calc(var(--card-w) * 0.02);
}
.pips .s-spades   { fill: var(--suit-spades);   }
.pips .s-hearts   { fill: var(--suit-hearts);   }
.pips .s-diamonds { fill: var(--suit-diamonds); }
.pips .s-clubs    { fill: var(--suit-clubs);    }

/* ---- level-of-detail tiers (mirror js/core/tier.js) -------------------- */

/* mini (< 56px): a single LEFT-anchored rank+suit. In an overlapping fan only
   the left sliver of each card shows, so the identifier has to live there — a
   centred glyph would sit under the neighbouring card. Enlarged and left-hugging
   since it's the only mark at this size. */
.pips, .figure, .center, .idx--br { display: none; }
.idx--tl { display: flex; align-items: flex-start; }
.idx--tl .idx__rank { font-size: calc(var(--card-w) * 0.30); }
.idx--tl .idx__suit { font-size: calc(var(--card-w) * 0.26); margin-top: 0; }

/* compact [56px, 96px): both corner indices (normal size) + pips / centred glyph */
@container card (min-width: 56px) {
  .idx--tl, .idx--br { display: flex; align-items: center; }
  .idx__rank { font-size: calc(var(--card-w) * 0.20); }
  .idx__suit { font-size: calc(var(--card-w) * 0.17); margin-top: calc(var(--card-w) * -0.01); }
  .card--number .pips { display: block; }
  .card--number .center { display: none; }
  .card--court .center, .card--joker .center { display: flex; }
}

/* full (>= 96px): any figure-capable card (court, ace, joker) shows its raster */
@container card (min-width: 80px) {
  .figure { display: flex; }
}
/* The SVG base (pips for aces, glyph for court/joker) is the fallback net: it
   stays until the raster has actually loaded (JS adds .has-figure), and returns
   if the image is dropped or fails. */
.card.has-figure .pips,
.card.has-figure .center { display: none; }

/* ---- peek tier: horizontal rank+suit strip for covered tableau cards ----
   A covered card in a column shows only a top band of --peek px. The strip sits
   in that band so the card is identifiable while overlapped. Sized off --peek. */
.card__strip {
  display: none;
  position: absolute; top: var(--pad); left: var(--pad);
  align-items: center; gap: 0.16em;
  font-size: calc(var(--peek, 20px) * 0.66);
  font-weight: 800; line-height: 1; letter-spacing: -0.02em;
}
.card__strip .strip__suit { font-size: 0.9em; }
.card--peek-strip .card__strip { display: flex; }
.card--peek-strip .idx--tl { display: none; }   /* strip replaces the vertical corner in the band */
.card--peek-marker .card__strip { display: flex; }
.card--peek-marker .strip__rank { display: none; } /* too short for rank: suit nub only */
.card--peek-marker .idx--tl { display: none; }

/* ---- shared settings modal (cards/settings.js) ------------------------- */
.cc-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 20px; animation: ccModalIn 140ms ease;
}
.cc-modal {
  width: 100%; max-width: 340px; color: #fff; background: #232a27;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5); font: 15px/1.4 system-ui, -apple-system, sans-serif;
}
.cc-modal__title { margin: 0 0 14px; font-size: 18px; }
.cc-modal__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cc-modal__label { font-size: 14px; color: rgba(255,255,255,0.85); }
.cc-modal__seg { display: inline-flex; border-radius: 9px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
.cc-seg-btn {
  font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; color: #fff;
  background: rgba(255,255,255,0.06); border: none; border-right: 1px solid rgba(255,255,255,0.12);
}
.cc-modal__seg .cc-seg-btn:last-child { border-right: none; }
.cc-seg-btn.is-on { background: var(--accent, #ffd166); color: #1a1a1a; font-weight: 700; }
.cc-seg-btn.cc-toggle { border-radius: 9px; border: 1px solid rgba(255,255,255,0.2); min-width: 52px; }
.cc-modal__warn {
  display: none; font-size: 12.5px; color: #ffd166; background: rgba(255,209,102,0.1);
  border: 1px solid rgba(255,209,102,0.3); border-radius: 8px; padding: 8px 10px; margin: 4px 0 12px;
}
.cc-modal__warn.show { display: block; }
.cc-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.cc-modal__actions button { font: inherit; font-size: 14px; padding: 8px 16px; border-radius: 9px; cursor: pointer; border: none; }
.cc-modal__actions .ghost { background: rgba(255,255,255,0.1); color: #fff; }
.cc-modal__actions .primary { background: var(--accent, #ffd166); color: #1a1a1a; font-weight: 700; }
@keyframes ccModalIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cc-modal-overlay { animation: none; } }