/* CarkedIt Online — Card Component */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: var(--card-aspect);
  width: 100%;
  border-radius: 5%;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  container-type: inline-size;
}

/* Pack brand badge — small logo anchored bottom-left of every card.
 * Transparent backgrounds expected (PNG/WebP/SVG). A subtle drop shadow
 * keeps the mark legible against any card colour. */
.card__brand {
  position: absolute;
  bottom: 4%;
  left: 4%;
  width: 22%;
  height: auto;
  max-height: 22%;
  object-fit: contain;
  object-position: bottom left;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  z-index: 2;
  /* Same anti-drag protection as .card__img. */
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Deck colour accents */
.card--die  { border-color: var(--color-die); }
.card--live { border-color: var(--color-live); }
.card--bye  { border-color: var(--color-bye); }

.card__image {
  flex: 1;
  background: var(--color-card-image-bg);
  overflow: hidden;
}

.card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Disable native image-drag, selection, and iOS long-press callout on
 * every card-image class. The `dragstart` event is additionally blocked
 * by swipe-overlay.js so the browser never starts its built-in
 * ghost-cursor image-drag. The `contextmenu` event is suppressed there
 * too, so right-click-save is also blocked.
 *
 * NOTE: we intentionally do NOT use `pointer-events: none` here — it
 * breaks click propagation inside horizontally-scrollable card lists
 * (lobby pack preview, expansion packs, dashboard analytics) because
 * the drag-to-scroll handler's setPointerCapture interferes with the
 * browser's click synthesis when pointer events are rerouted.
 */
.card__img,
.card-back__image,
.ld-profile__card-img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.card__image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-card-placeholder-start), var(--color-card-placeholder-end));
}

.card__body {
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.card__title {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.card__description {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  line-height: 1.3;
}

.card__prompt {
  font-size: 0.6rem;
  color: var(--color-primary);
  font-style: italic;
  line-height: 1.3;
}

/* ── Text-only cards (no illustration) ─────────────────────── */

.card--text-only {
  border: none;
}

/* Graphic area — replaces the missing illustration with deck colour */
.card__graphic-area {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

.card__graphic-area--die {
  flex: 1;
  flex-direction: column;
  background: url('../../assets/patterns/splatter-die.svg') center / cover no-repeat, var(--color-die);
  padding: 12% 10% 10%;
  justify-content: flex-start;
}

/* Title vertical position modifiers (parent is flex column) */
.card__graphic-area--die.card__graphic-area--title-top    { justify-content: flex-start; }
.card__graphic-area--die.card__graphic-area--title-middle { justify-content: center; }
.card__graphic-area--die.card__graphic-area--title-bottom { justify-content: flex-end; }

.card__graphic-area--live {
  flex: 0 0 55%;
  background: url('../../assets/patterns/splatter-live.svg') center / cover no-repeat, var(--color-live);
  margin: 4%;
  border-radius: 4cqi;
}

.card__graphic-area--bye {
  flex: 0 0 55%;
  background: url('../../assets/patterns/splatter-bye.svg') center / cover no-repeat, var(--color-bye);
  margin: 4%;
  border-radius: 4cqi;
}

/* Die: title overlaid on the full-bleed graphic area — matches original
 * deck slab-with-outline look: big bold uppercase, black fill, thick white
 * stroke via layered text-shadow so it stays legible on any background. */
.card__title-overlay {
  position: relative;
  z-index: 2;
  width: 100%;
  font-family: 'Ultra', 'Rye', Georgia, serif;
  font-size: 6.5cqi;
  font-weight: 900;
  line-height: 1.45;
  text-transform: uppercase;
  text-align: center;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  word-break: break-word;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 7px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Light variant — white fill with black radial glow for dark backgrounds. */
.card__title-overlay--light {
  color: #fff;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 0 7px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.4);
}

/* Live / Bye: text section below graphic area */
.card__body--text-only {
  background: #fff;
  padding: 5% 7%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2%;
}

.card--text-only .card__title {
  font-size: 5.5cqi;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.card__title--live {
  color: #2d7a2d;
}

.card__title--bye {
  color: #8B2500;
}

.card--text-only .card__description {
  font-size: 4cqi;
  color: #333;
  line-height: 1.3;
}

.card--text-only .card__prompt {
  font-size: 3.5cqi;
  color: #333;
  font-style: normal;
  line-height: 1.3;
  display: flex;
  align-items: flex-start;
  gap: 0.2em;
}

.card__prompt-icon {
  font-style: normal;
  flex-shrink: 0;
}

/* Live/Bye text-only: white card background */
.card--text-only.card--live,
.card--text-only.card--bye {
  background: #fff;
}

/* Die text-only: deck colour fills background */
.card--text-only.card--die {
  background: var(--color-die-light);
}

/* Mystery (?) die cards — text-only variant matches the original
 * "Pick a Common Way to Die" card: yellow background, giant 3D grey
 * question mark centered, title anchored to top in the overlay style.
 * The --mystery-bg custom prop lets future packs swap backgrounds. */
.card__graphic-area--mystery {
  position: relative;
  --mystery-bg: #f5b225;
  background: var(--mystery-bg) !important;
}

.card__mystery-mark {
  position: absolute;
  inset: 0;
  background: url('../../assets/patterns/mystery-3d-q.svg') center 58% / 62% auto no-repeat;
  pointer-events: none;
  z-index: 1;
}

/* Small corner badge only shown on the illustrated <img> variant */
.card__mystery-badge {
  position: absolute;
  top: 4%;
  right: 4%;
  width: 14cqi;
  height: 14cqi;
  border-radius: 50%;
  background: #1a1a1a;
  color: var(--color-die-light, #f5d0c0);
  font-size: 9cqi;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1a1a1a;
  z-index: 2;
  pointer-events: none;
}

/* Hide the corner badge on text-only mystery cards — the giant 3D
 * question mark is the badge. */
.card--text-only.card--mystery .card__mystery-badge { display: none; }

/* Split (Would You Rather) die cards: stacked options with OR divider */
/* Split (Would You Rather) — diagonal two-tone background, option at top
 * and bottom, white circle in the centre with a big yellow OR. The
 * --split-bg-a / --split-bg-b custom props let future packs swap colours
 * (or replace with image gradients) without code changes. */
.card__graphic-area--split {
  position: relative;
  display: block;
  padding: 0;
  --split-bg-a: #f5b225;
  --split-bg-b: #d99110;
  background:
    linear-gradient(to bottom right, var(--split-bg-a) 49.7%, var(--split-bg-b) 50.3%) !important;
}

/* Two-image Split layout — when the card component injects
 * `.card__split-half` children into a Would You Rather card, each half
 * fills the whole graphic area and is clipped into a triangle so the
 * two slots meet along the top-right → bottom-left anti-diagonal,
 * matching the `linear-gradient(to bottom right, ...)` fallback above.
 * Each slot holds its own background image and falls back to
 * --split-bg-a / --split-bg-b when empty. These sit behind
 * .card__split-option (z-index 2) and .card__split-or (z-index 3) so
 * the option text and OR circle overlay the half images. */
.card__split-half {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.card__split-half--a {
  background: var(--split-bg-a);
  /* Upper-left triangle: corners top-left, top-right, bottom-left. */
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.card__split-half--b {
  background: var(--split-bg-b);
  /* Lower-right triangle: corners top-right, bottom-right, bottom-left. */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.card__split-option {
  position: absolute;
  left: 8%;
  right: 8%;
  font-family: 'Ultra', 'Rye', Georgia, serif;
  font-size: 5.5cqi;
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.45;
  color: #1a1a1a;
  letter-spacing: 0.03em;
  text-align: center;
  word-break: break-word;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.5), 0 0 7px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.4);
  z-index: 2;
}

.card__split-option--top    { top: 8%; }
.card__split-option--bottom { bottom: 8%; }

/* Centre circle with yellow OR */
.card__split-or {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22cqi;
  height: 22cqi;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Ultra', 'Rye', Georgia, serif;
  font-size: 8cqi;
  font-weight: 900;
  color: var(--split-bg-a, #f5b225);
  letter-spacing: 0.05em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  z-index: 3;
}

/* Card test page: scale card to fill available viewport space */
.card-test__card .card {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}