/* cards.css — the shared card component (SOURCE OF TRUTH).
   Sliced verbatim from the game's <style>. The game (index.html) and the
   marketing landing both link this file, so a card looks identical everywhere:
   the classic theme shows suit symbols, color themes show the four-color dot,
   and face cards tint to the suit color. Edit card visuals HERE.
   Game-only card behavior (meld animations, result cards, theme-picker buttons)
   intentionally stays in index.html. */

/* ---- deck color + face/back theming (default theme = "linen") ---- */
:root {
    --card-red:#b91c1c; --card-blue:#1d4ed8; --card-green:#047857; --card-yellow:#d4a017;
    --card-face-bg:#fbf3df;
    --card-face-border:transparent;
    --card-face-shadow:inset 0 1px 0 rgba(255,255,255,.78),inset 0 -12px 22px rgba(86,62,34,.08),0 3px 7px rgba(0,0,0,.28);
    --card-face-texture:
      radial-gradient(circle at 18% 16%,rgba(255,255,255,.72) 0 1px,transparent 1.6px),
      radial-gradient(circle at 71% 63%,rgba(86,62,34,.12) 0 1px,transparent 1.55px),
      radial-gradient(circle at 42% 82%,rgba(86,62,34,.075) 0 1.2px,transparent 1.8px),
      repeating-linear-gradient(0deg,rgba(82,62,38,.07) 0 1px,transparent 1px 5px),
      repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 6px),
      linear-gradient(160deg,rgba(255,255,255,.34),transparent 28%,rgba(90,66,36,.09) 100%);
    --card-face-texture-opacity:1;
    --card-face-inner-border:transparent;
    --card-back-bg:linear-gradient(135deg,#465994 0%,#2c3c70 54%,#1e2e58 100%);
    --card-back-border:#26345e;
    --card-back-texture:
      radial-gradient(circle at 50% 50%,transparent 0 6px,rgba(255,255,255,.18) 6.5px 7.5px,transparent 8px),
      repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8px);
    --card-back-texture-opacity:.8;
    --card-back-inner-border:rgba(255,255,255,.45);
}

/* ---- deck themes ---- */
  html[data-card-theme="clean"] {
    --card-face-bg:#f8f7f2;
    --card-face-border:rgba(48,45,38,.28);
    --card-face-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 7px rgba(0,0,0,.28);
    --card-face-texture:linear-gradient(180deg,rgba(255,255,255,.18),rgba(0,0,0,.025));
    --card-face-texture-opacity:.45;
    --card-face-inner-border:transparent;
    --card-back-bg:repeating-linear-gradient(45deg,#3a4a86 0 7px,#2b3a67 7px 14px);
    --card-back-texture:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.08));
    --card-back-texture-opacity:.55;
  }
  html[data-card-theme="deco"] {
    --card-face-bg:#fff8ea;
    --card-face-border:rgba(82,59,34,.34);
    --card-face-shadow:inset 0 1px 0 rgba(255,255,255,.96),inset 0 0 0 4px rgba(250,230,181,.28),inset 0 0 0 5px rgba(112,69,32,.14),0 3px 7px rgba(0,0,0,.3);
    --card-face-texture:
      radial-gradient(circle at 13% 14%,rgba(159,40,48,.08) 0 1.7px,transparent 2px),
      radial-gradient(circle at 87% 86%,rgba(34,80,135,.08) 0 1.7px,transparent 2px),
      repeating-linear-gradient(0deg,transparent 0 10px,rgba(74,54,31,.035) 10px 11px),
      repeating-linear-gradient(90deg,transparent 0 10px,rgba(74,54,31,.03) 10px 11px);
    --card-face-texture-opacity:.9;
    --card-face-inner-border:rgba(121,76,30,.2);
    --card-back-bg:linear-gradient(135deg,#7a2140 0%,#38204d 58%,#17294f 100%);
    --card-back-border:#4b1e3c;
    --card-back-texture:
      radial-gradient(circle at 50% 50%,rgba(255,232,173,.18) 0 2px,transparent 2.5px 8px,rgba(255,232,173,.12) 8.5px 9.5px,transparent 10px),
      repeating-linear-gradient(45deg,rgba(255,255,255,.08) 0 1px,transparent 1px 10px);
    --card-back-texture-opacity:.9;
    --card-back-inner-border:rgba(255,232,173,.52);
  }
  html[data-card-theme="classic"] {
    --card-face-bg:#fffdf7;
    --card-face-border:rgba(32,33,36,.24);
    --card-face-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 3px 7px rgba(0,0,0,.28);
    --card-face-texture:
      linear-gradient(180deg,rgba(255,255,255,.3),rgba(24,24,27,.025)),
      repeating-linear-gradient(0deg,transparent 0 14px,rgba(32,33,36,.018) 14px 15px);
    --card-face-texture-opacity:.72;
    --card-face-inner-border:rgba(32,33,36,.13);
    --card-back-bg:
      radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 0 2px,transparent 2.5px 9px),
      repeating-linear-gradient(45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 8px),
      linear-gradient(135deg,#27508f 0%,#14315f 100%);
    --card-back-border:#183568;
    --card-back-texture:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.1));
    --card-back-texture-opacity:.82;
    --card-back-inner-border:rgba(255,255,255,.52);
  }

/* ---- the .cardface component ---- */
  .cardface {
    position:relative; width:64px; height:90px; flex:0 0 auto; padding:0; overflow:hidden;
    background:var(--card-face-bg);
    border:1px solid var(--card-face-border); border-radius:11px;
    box-shadow:var(--card-face-shadow);
    font-family:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
    color:#25282d; user-select:none;
  }
  .cardface:not(.empty)::before {
    content:""; position:absolute; z-index:0; inset:0; border-radius:inherit;
    background:var(--card-face-texture); opacity:var(--card-face-texture-opacity);
    pointer-events:none;
  }
  .cardface:not(.empty):not(.back)::after {
    content:""; position:absolute; z-index:1; inset:5px; border-radius:7px;
    border:1px solid var(--card-face-inner-border); pointer-events:none;
  }
  .cardface.color-red { --card-color:var(--card-red); --face-art-color:#7f2f2f; }
  .cardface.color-blue { --card-color:var(--card-blue); --face-art-color:#334f8f; }
  .cardface.color-green { --card-color:var(--card-green); --face-art-color:#31674f; }
  .cardface.color-yellow { --card-color:var(--card-yellow); --face-art-color:#8b6b22; }
  html[data-card-theme="classic"] .cardface.classic-suit-red {
    --card-color:#b51d24; --face-art-color:#9f161d;
  }
  html[data-card-theme="classic"] .cardface.classic-suit-black {
    --card-color:#20242a; --face-art-color:#262a31;
  }
  .cardface .pip {
    position:absolute; z-index:2; inset:0; display:flex; align-items:center; justify-content:center;
    color:#24272c; font-size:40px; font-weight:850; letter-spacing:-.065em;
    font-variant-numeric:tabular-nums; transform:translateY(-1px);
    /* paint-order:stroke draws the stroke behind the fill, so this reads as a
       pad of the card surface hugging the glyph contours — lifting the letter
       off the busy face art without thickening the visible strokes. */
    paint-order:stroke; -webkit-text-stroke:.16em var(--card-face-bg);
    text-shadow:0 1px 0 #fff,0 2px 0 #d8d4ca,0 4px 6px rgba(31,34,38,.28);
  }
  .cardface .color-dot {
    position:absolute; z-index:3; top:clamp(6px,8%,10px); left:clamp(6px,8%,10px);
    width:clamp(10px,18%,18px); aspect-ratio:1; border-radius:50%;
    background:
      radial-gradient(circle at 50% 56%,rgba(0,0,0,.2) 0 50%,transparent 54%),
      radial-gradient(circle at 48% 48%,rgba(255,255,255,.34) 0 38%,transparent 42%),
      conic-gradient(from 18deg at 50% 50%,
        color-mix(in srgb,var(--card-color) 52%,#fff) 0 12%,
        var(--card-color) 12% 31%,
        color-mix(in srgb,var(--card-color) 78%,#000) 31% 48%,
        color-mix(in srgb,var(--card-color) 42%,#fff) 48% 66%,
        var(--card-color) 66% 82%,
        color-mix(in srgb,var(--card-color) 70%,#000) 82% 100%);
    border:0;
    box-shadow:
      0 1px 0 rgba(255,255,255,.5),
      inset 0 2px 3px rgba(0,0,0,.34),
      inset 0 -1px 2px rgba(255,255,255,.22),
      0 1px 2px rgba(0,0,0,.28);
  }
  .cardface .color-dot::after {
    content:""; position:absolute; inset:13%;
    clip-path:polygon(50% 0,92% 30%,76% 86%,24% 86%,8% 30%);
    background:
      radial-gradient(circle at 34% 24%,rgba(255,255,255,.95) 0 10%,transparent 22%),
      linear-gradient(135deg,rgba(255,255,255,.58),transparent 38%),
      linear-gradient(315deg,rgba(0,0,0,.24),transparent 48%),
      var(--card-color);
    box-shadow:inset 0 -2px 4px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.26);
    opacity:1;
  }
  html[data-card-theme="clean"] .cardface .color-dot {
    background:var(--card-color);
    border:2px solid rgba(255,255,255,.95);
    box-shadow:0 0 0 1px rgba(37,40,45,.22),0 2px 5px rgba(0,0,0,.22);
  }
  html[data-card-theme="clean"] .cardface .color-dot::after {
    inset:auto; width:30%; aspect-ratio:1; top:16%; left:18%;
    border-radius:50%; clip-path:none; background:rgba(255,255,255,.62);
    border:0; box-shadow:none; opacity:1;
  }
  .cardface .suit-mark { display:none; }
  html[data-card-theme="classic"] .cardface.classic-suit .color-dot { display:none; }
  html[data-card-theme="classic"] .cardface.classic-suit .suit-mark {
    position:absolute; z-index:3; top:clamp(5px,7%,9px); left:clamp(5px,7%,9px);
    display:block; width:clamp(13px,19%,20px); aspect-ratio:1; pointer-events:none;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.78)) drop-shadow(0 1px 1px rgba(0,0,0,.16));
  }
  html[data-card-theme="classic"] .cardface.classic-suit .suit-mark img {
    display:block; width:100%; height:100%; object-fit:contain;
  }
  html[data-card-theme="classic"] .cardface.classic-suit-red .pip { color:#9f161d; }
  html[data-card-theme="classic"] .cardface.classic-suit-black .pip { color:#20242a; }
  /* Face cards (Gin Rummy's traditional deck): a color-tinted crown/figure motif
     sits behind the rank letter. Number decks never get the .face class, so this is
     inert for every other mode. */
  .cardface .face-art {
    position:absolute; z-index:1; inset:6% -8% -6% -8%;
    color:var(--face-art-color);
    opacity:1; pointer-events:none;
  }
  .cardface.face-A .face-art { inset:8% -14% -10%; opacity:1; }
  .cardface .face-art svg { width:100%; height:100%; display:block; fill:currentColor; }
  .cardface.back {
    background:var(--card-back-bg);
    border-color:var(--card-back-border); border-radius:11px; color:#fff;
  }
  .cardface.back::before { background:var(--card-back-texture); opacity:var(--card-back-texture-opacity); }
  .cardface.back::after { content:""; position:absolute; inset:5px; border:2px solid var(--card-back-inner-border); border-radius:4px; }
  .cardface.empty { background:rgba(255,255,255,.12); border:2px dashed rgba(255,255,255,.45); box-shadow:none; }