/* QuickCardGames — Gameplay Canvas & Playing Card Designs
   Inspired by textmotion.dev: warm paper textures, precision hairlines,
   tactile card lift, and JetBrains Mono / Inter typography.
   Card size driven by --cw (dynamically set by table.js). */

/* Table Felt Colorways: rich botanical & cardroom textiles */
:root, :root[data-table="green"] {
  --felt-a: #163e2d;
  --felt-b: #0c241a;
  --felt-rim: #06150e;
  --felt-accent: #22c55e;
}
:root[data-table="blue"] {
  --felt-a: #183457;
  --felt-b: #0c1e33;
  --felt-rim: #06101c;
  --felt-accent: #38bdf8;
}
:root[data-table="burgundy"] {
  --felt-a: #561a27;
  --felt-b: #2f0d15;
  --felt-rim: #1a060b;
  --felt-accent: #fb7185;
}
:root[data-table="charcoal"] {
  --felt-a: #2c2a27;
  --felt-b: #161513;
  --felt-rim: #0c0b0a;
  --felt-accent: #e09f3e;
}
:root[data-table="purple"] {
  --felt-a: #431d59;
  --felt-b: #230c31;
  --felt-rim: #14061d;
  --felt-accent: #c084fc;
}
:root[data-table="teal"] {
  --felt-a: #134a52;
  --felt-b: #082a2e;
  --felt-rim: #041618;
  --felt-accent: #2dd4bf;
}

.table-wrap {
  position: relative;
  width: 100%;
}

/* HUD (Scoreboard & Table Status) */
.hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 4px 12px;
  min-height: 42px;
}
.hud-status {
  font: 500 12.5px/1 var(--mono);
  letter-spacing: -0.01em;
  padding: 7px 14px;
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.hud-status:empty { display: none; }
.hud-status.mine {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 0 0 1px var(--ink), 0 2px 8px rgba(0, 0, 0, .18);
}
.hud-status.mine::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: hud-pulse 1.6s ease-in-out infinite;
}
@keyframes hud-pulse { 50% { opacity: .35; } }

.hud-scores {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.score {
  display: flex;
  gap: 7px;
  align-items: baseline;
  padding: 6px 13px;
  border-radius: var(--r-control);
  background: var(--surface);
  box-shadow: var(--shadow-control);
  font: 500 12px/1 var(--mono);
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.score .sv {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score.me {
  box-shadow: 0 0 0 1px var(--ink-2), var(--shadow-control);
  color: var(--ink);
}
.score.turn {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: 0 0 0 1.5px var(--hl), 0 2px 8px rgba(224, 159, 62, .2);
}

/* Gameplay Felt Canvas */
.felt {
  --cw: 72px;
  --g: calc(var(--cw) * .16);
  position: relative;
  border-radius: 20px;
  padding: 20px 16px 24px;
  min-height: clamp(360px, 66vh, 780px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  color: #faf7f1;
  background:
    /* textmotion.dev signature coordinate grid matrix */
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 28px 28px,
    /* Ambient light vignette */
    radial-gradient(130% 90% at 50% 36%, var(--felt-a), var(--felt-b) 80%, var(--felt-rim) 100%);
  box-shadow:
    /* Precision inner hairline border */
    inset 0 0 0 1px rgba(255, 255, 255, .15),
    /* Cushion bevel */
    inset 0 0 0 5px rgba(0, 0, 0, .45),
    /* Outer hairline frame */
    0 0 0 1px var(--hairline),
    /* Soft ambient table shadow */
    0 20px 50px rgba(0, 0, 0, .22),
    0 4px 12px rgba(0, 0, 0, .10);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
html[data-lefty="1"] .felt { direction: rtl; }
html[data-lefty="1"] .felt .card, html[data-lefty="1"] .felt .zone { direction: ltr; }

.trow {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--g);
}
.trow-mid { flex: 1; align-items: center; }
.slot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g);
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
}
.slot-c { flex: 1 1 auto; }
.slot-l, .slot-r { flex: 0 0 auto; }
.trow-mid .slot { align-items: center; }
.felt.tableau { justify-content: flex-start; gap: calc(var(--cw) * .3); }
.slot-r { justify-content: flex-end; }
.slot-l { justify-content: flex-start; }

/* Zones & Table Slots */
.zone {
  --w: calc(var(--cw) * var(--cs, 1));
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border-radius: 10px;
  padding: 3px;
  transition: background .12s var(--ease), box-shadow .12s var(--ease);
}
.zone.opp { --cs: .72; }
.zone.wide { flex: 1 1 100%; min-width: 0; }
.zlabel {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 4px;
}
.zcards {
  position: relative;
  min-width: var(--w);
  min-height: calc(var(--w) * 1.4);
}
.zcards:empty::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--w);
  height: calc(var(--w) * 1.4);
  border: 1.5px dashed rgba(250, 247, 241, .25);
  background: rgba(255, 255, 255, .02);
  border-radius: calc(var(--w) * .085);
  box-sizing: border-box;
}
.zcount {
  position: absolute;
  right: -2px;
  bottom: 0;
  background: rgba(18, 17, 16, .90);
  color: #fff;
  font: 600 .72rem/1 var(--mono);
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  pointer-events: none;
}
.zone.quiet .zcards:empty { min-width: 0; }
.zone.quiet .zcards:empty::before { display: none; }
.k-trick .zcards:empty::before { left: calc(50% - var(--w) / 2); }

.zone.turn {
  box-shadow: 0 0 0 1.5px var(--hl), 0 0 24px 2px rgba(224, 159, 62, .22);
  background: rgba(224, 159, 62, .08);
}
.zone.turn .zlabel {
  opacity: 1;
  color: var(--hl-ink);
  background: var(--hl);
  padding: 2px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.zone.turn .zlabel::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink { 50% { opacity: .25; } }

/* Zone Layout Variants */
.k-fan .zcards { display: flex; justify-content: center; }
.k-fan .zcards.x { width: 100%; }
.zone.wide .zcards { width: 100%; }
.k-fan .card + .card { margin-left: calc(var(--fo, 24px) - var(--w)); }
.k-fan.vert .zcards { flex-direction: column; align-items: center; width: auto; }
.k-fan.vert .card + .card { margin-left: 0; margin-top: calc(var(--fo, 14px) - var(--w) * 1.4); }
.k-column .zcards { display: flex; flex-direction: column; }
.k-column .card + .card { margin-top: calc(var(--w) * -1.4 + var(--w) * .42); }
.k-column .card.pd { margin-top: calc(var(--w) * -1.4 + var(--w) * .16); }
.k-stack .zcards { width: var(--w); height: calc(var(--w) * 1.4); }
.k-stack .card { position: absolute; inset: 0; }
.k-stack .card:nth-last-child(2) { translate: -2px -2px; }
.k-stack .card:nth-last-child(3) { translate: -4px -4px; }
.k-row .zcards { display: flex; gap: calc(var(--w) * .14); flex-wrap: wrap; justify-content: center; }
.k-grid .zcards { display: grid; grid-template-columns: repeat(var(--cols, 4), var(--w)); gap: calc(var(--w) * .14); }
.k-trick .zcards { display: flex; justify-content: center; align-items: center; min-width: calc(var(--w) * 3); }
.k-trick .card + .card { margin-left: calc(var(--w) * -.5); }
.k-trick .card:nth-child(odd) { rotate: -5deg; }
.k-trick .card:nth-child(even) { rotate: 4deg; translate: 0 4px; }
.k-trick.compass .zcards { display: block; width: calc(var(--w) * 2.7); min-width: 0; height: calc(var(--w) * 2.5); }
.k-trick.compass .zcards > .card {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0;
  rotate: var(--rot, 0deg);
  translate: calc(-50% + var(--w) * var(--tx, 0)) calc(-50% + var(--w) * var(--ty, 0));
}
.zone.tight .zcount {
  right: auto;
  left: 50%;
  bottom: auto;
  top: 50%;
  translate: -50% -50%;
  font-size: .8rem;
  padding: 2px 8px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}

/* ========================================================
   Playing Cards
   ======================================================== */
.card {
  position: relative;
  flex: none;
  width: var(--w, 72px);
  height: calc(var(--w, 72px) * 1.4);
  border-radius: calc(var(--w, 72px) * .085);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, .14),
    0 1.5px 3px rgba(0, 0, 0, .26),
    0 4px 10px rgba(0, 0, 0, .18);
  transition: translate .14s var(--ease), box-shadow .14s var(--ease), rotate .14s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.card svg.face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.card .back {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  border: calc(var(--w) * .055) solid #fffdf8;
  box-sizing: border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
  background: var(--bk-img), var(--bk-col, #183354);
}

/* Face Styling */
.face {
  font-family: var(--sans);
}
.face .paper {
  fill: #fffdf9;
  stroke: rgba(60, 50, 30, .16);
  stroke-width: 0.8;
}
.face.red { color: #d92638; }
.face.blk { color: #181715; }
.face .idx {
  font-family: var(--sans);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  fill: currentColor;
}
.face .panel {
  stroke: currentColor;
}
.face .medal {
  fill: #fffdf9;
  stroke: currentColor;
  stroke-width: 1.1;
}
.face .mono {
  fill: currentColor;
  font-family: var(--mono);
  font-weight: 800;
}
.face .royal {
  stroke: currentColor;
}
.face.joker.red { color: #d92638; }
.face.joker.blk { color: #181715; }
.face .jk { fill: currentColor; }

/* Custom Action Cards (Rainbow Rush, etc.) */
.face.custom { --cc: #555; }
.c-red { --cc: #dc2626; }
.c-green { --cc: #16a34a; }
.c-blue { --cc: #2563eb; }
.c-yellow { --cc: #d97706; }
.c-wild { --cc: #181715; }
.c-black { --cc: #181715; }
.c-purple { --cc: #7c3aed; }
.c-orange { --cc: #ea580c; }
.c-gray { --cc: #64748b; }
.face.custom .field { fill: var(--cc); }
.face.custom .oval { fill: #fffdf9; stroke: rgba(0, 0, 0, .08); stroke-width: 0.8; }
.face.custom .big { fill: var(--cc); font-family: var(--sans); }
.face.custom .small { fill: #fff; font-family: var(--sans); }
.face.custom .q1 { fill: #dc2626; }
.face.custom .q2 { fill: #2563eb; }
.face.custom .q3 { fill: #16a34a; }
.face.custom .q4 { fill: #d97706; }
.card.mini { --w: 56px; }

/* ========================================================
   Card Backs (8 Refined Designer Patterns)
   ======================================================== */
/* 0: Royal Navy Diamond Lattice */
:root[data-back="0"], .bk-0 {
  --bk-col: #172f4e;
  --bk-img:
    radial-gradient(circle at 50% 50%, rgba(240, 200, 120, .6) 1px, transparent 1.5px) 0 0 / 8px 8px,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .15) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .15) 0 1.5px, transparent 1.5px 8px);
}
/* 1: Crimson Ruby Sunburst Guilloche */
:root[data-back="1"], .bk-1 {
  --bk-col: #991b1b;
  --bk-img:
    radial-gradient(circle, rgba(255, 255, 255, .32) 1.5px, transparent 2.2px) 0 0 / 10px 10px,
    repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .10) 0 2px, transparent 2px 8px);
}
/* 2: Forest Emerald Botanical Weave */
:root[data-back="2"], .bk-2 {
  --bk-col: #14532d;
  --bk-img:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 7px);
}
/* 3: Obsidian & Gold Celestial Matrix */
:root[data-back="3"], .bk-3 {
  --bk-col: #181715;
  --bk-img:
    radial-gradient(circle at 50% 50%, #e09f3e 0 2px, transparent 2.5px) 0 0 / 12px 12px,
    repeating-linear-gradient(45deg, rgba(224, 159, 62, .18) 0 1.5px, transparent 1.5px 6px);
}
/* 4: Imperial Amethyst Tessellation */
:root[data-back="4"], .bk-4 {
  --bk-col: #581c87;
  --bk-img:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 10px),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .08) 0 3px, transparent 3px 10px);
}
/* 5: Peacock Teal Scales */
:root[data-back="5"], .bk-5 {
  --bk-col: #0f766e;
  --bk-img:
    linear-gradient(rgba(255, 255, 255, .18) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(255, 255, 255, .18) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .22) 1.2px, transparent 1.5px) 0 0 / 8px 8px;
}
/* 6: Terracotta Sunwheel */
:root[data-back="6"], .bk-6 {
  --bk-col: #c2410c;
  --bk-img:
    repeating-conic-gradient(rgba(255, 255, 255, .18) 0 10deg, transparent 10deg 20deg),
    radial-gradient(circle, rgba(255, 255, 255, .22) 1.5px, transparent 2px) 0 0 / 12px 12px;
}
/* 7: Monochrome Carbon Twill */
:root[data-back="7"], .bk-7 {
  --bk-col: #22201d;
  --bk-img:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .14) 0 1.5px, transparent 1.5px 5px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 1.5px, transparent 1.5px 5px);
}
:root:not([data-back]) {
  --bk-col: #172f4e;
  --bk-img:
    radial-gradient(circle at 50% 50%, rgba(240, 200, 120, .6) 1px, transparent 1.5px) 0 0 / 8px 8px,
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .15) 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .15) 0 1.5px, transparent 1.5px 8px);
}

/* ========================================================
   Interactive States & Gestures
   ======================================================== */
.card.movable {
  cursor: grab;
  touch-action: none;
  box-shadow:
    0 0 0 1px rgba(224, 159, 62, .45),
    0 2px 6px rgba(0, 0, 0, .28);
}
.card.movable:hover {
  translate: 0 -8px;
  box-shadow:
    0 0 0 1.5px var(--hl),
    0 10px 24px rgba(0, 0, 0, .36),
    0 3px 6px rgba(0, 0, 0, .2);
}
.card.dim { filter: brightness(.65) saturate(.6); }
.fx-ghost { position: absolute; z-index: 30; margin: 0; pointer-events: none; }
.card.selected {
  translate: 0 -12px;
  box-shadow:
    0 0 0 2px var(--hl),
    0 14px 28px rgba(0, 0, 0, .42),
    0 4px 8px rgba(0, 0, 0, .25);
  z-index: 8;
}
.card.dragging { opacity: .25; }
.card.hint, .zone.hint, .btn.hint { animation: hint .7s ease-in-out 3; }
@keyframes hint { 50% { box-shadow: 0 0 0 4px #fff, 0 0 22px 5px var(--hl); } }
.zone.target {
  outline: 2px dashed var(--hl);
  outline-offset: 3px;
  background: rgba(224, 159, 62, .12);
  cursor: pointer;
  border-radius: 10px;
}
.zone.clickable { cursor: pointer; }
.zone.over {
  background: rgba(224, 159, 62, .26);
  box-shadow: inset 0 0 18px rgba(224, 159, 62, .22);
}
.zone:focus-visible, .card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Drag Ghost */
.drag-ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  pointer-events: none;
  --w: 72px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .40));
}
.drag-ghost .zcards { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.drag-ghost .card { opacity: 1; translate: none; }
.drag-ghost .card:first-child { margin: 0; }
.drag-ghost .card + .card { margin-top: calc(var(--w) * -1.4 + var(--w) * .42); }
.drag-ghost:not(.k-column) .zcards { display: block; width: var(--w); height: calc(var(--w) * 1.4); }
.drag-ghost:not(.k-column) .card { position: absolute; inset: 0; margin: 0; }

/* Table Action Buttons */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 14px 4px 4px;
}
.actions .btn {
  min-height: 40px;
  padding: 0 20px;
  font: 500 13.5px/1 var(--sans);
  letter-spacing: -0.01em;
  border-radius: var(--r-control);
}

.chooser {
  position: absolute;
  left: var(--x, 10px);
  top: var(--y, 10px);
  z-index: 40;
  display: grid;
  gap: 4px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-elevated);
  color: var(--ink);
}

:root[data-large="1"] .felt { min-height: clamp(380px, 72vh, 860px); }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* Forced Colors Mode (High Contrast Accessibility) */
@media (forced-colors: active) {
  .felt {
    border: 2px solid CanvasText;
    box-shadow: none;
  }
  .card {
    border: 1px solid CanvasText;
    box-shadow: none;
  }
  .card.movable {
    border: 1.5px solid Highlight;
  }
  .card.selected {
    border: 2px solid Highlight;
  }
  .zone.target {
    outline: 2px dashed Highlight;
  }
  .zcards:empty::before {
    border: 1.5px dashed CanvasText;
  }
}

@media (max-width: 480px) {
  .felt { padding: 14px 8px 18px; border-radius: 14px; }
  .actions .btn { flex: 1 1 40%; }
}