/* Table, cards, card backs. Sizes driven by --cw (set by table.js from container width). */
:root, :root[data-table="green"] { --felt-a: #1d6b4f; --felt-b: #0d3a2b; }
:root[data-table="blue"] { --felt-a: #24578f; --felt-b: #0e2d4f; }
:root[data-table="burgundy"] { --felt-a: #86283c; --felt-b: #43121e; }
:root[data-table="charcoal"] { --felt-a: #454b55; --felt-b: #1c2026; }
:root[data-table="purple"] { --felt-a: #5d3490; --felt-b: #2a1546; }
:root[data-table="teal"] { --felt-a: #17767f; --felt-b: #093a40; }

.table-wrap { position: relative; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 2px 8px; min-height: 40px; }
.hud-status { font-weight: 700; padding: 5px 14px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); }
.hud-status:empty { display: none; }
.hud-status.mine { background: var(--hl); color: var(--hl-ink); border-color: var(--hl); animation: glow 1.8s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 0 5px rgba(227,180,73,.25); } }
.hud-scores { display: flex; gap: 8px; flex-wrap: wrap; }
.score { display: flex; gap: 8px; align-items: baseline; padding: 3px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .88rem; }
.score .sv { font-weight: 800; font-variant-numeric: tabular-nums; } .score.me { border-color: color-mix(in srgb, var(--hl) 60%, var(--line)); } .score.turn { background: color-mix(in srgb, var(--hl) 25%, var(--surface)); }

.felt { --cw: 72px; --g: calc(var(--cw) * .16); position: relative; border-radius: 24px; padding: 14px 10px 18px; min-height: clamp(340px, 64vh, 760px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; color: #f3ecd9;
  background: radial-gradient(120% 90% at 50% 40%, var(--felt-a), var(--felt-b) 85%), repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,.025) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), inset 0 0 0 7px color-mix(in srgb, var(--felt-b) 70%, #000), inset 0 0 0 9px rgba(227,180,73,.35), 0 18px 40px rgba(0,0,0,.35); 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; }

.zone { --w: calc(var(--cw) * var(--cs, 1)); position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; border-radius: 10px; padding: 2px; }
.zone.opp { --cs: .72; }
.zone.wide { flex: 1 1 100%; min-width: 0; }
.zlabel { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .72; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.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: 2px dashed rgba(243,236,217,.28); border-radius: calc(var(--w) * .09); }
.zcount { position: absolute; right: -2px; bottom: 0; background: rgba(0,0,0,.65); color: #fff; font: 700 .72rem var(--sans); padding: 1px 7px; border-radius: 999px; 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 2px rgba(227,180,73,.5), 0 0 26px 2px rgba(227,180,73,.22); background: rgba(227,180,73,.07); }
.zone.turn .zlabel { opacity: 1; color: var(--hl-ink); background: var(--hl); padding: 1px 9px 1px 7px; border-radius: 999px; display: inline-flex; align-items: center; gap: 5px; }
.zone.turn .zlabel::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .25; } }

.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; }
/* compass trick: each card sits toward the seat that played it (--tx/--ty in card widths, set by table.js) */
.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 9px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); }

/* cards */
.card { position: relative; flex: none; width: var(--w, 72px); height: calc(var(--w, 72px) * 1.4); border-radius: calc(var(--w, 72px) * .085); filter: drop-shadow(0 1px 2px rgba(0,0,0,.42)); transition: translate .12s, box-shadow .12s; -webkit-tap-highlight-color: transparent; }
.card svg.face { display: block; width: 100%; height: 100%; }
.card .back { width: 100%; height: 100%; border-radius: inherit; border: calc(var(--w) * .055) solid #fffdf6; box-sizing: border-box; background: var(--bk-img, repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px)), var(--bk-col, #1f3f8f); }
.face { fill: currentColor; font-family: Georgia, "Times New Roman", serif; }
.face .paper { fill: #fffdf6; stroke: #cfc7b2; stroke-width: 1; }
.face.red { color: #c3262b; } .face.blk { color: #1a1f2b; }
.face .panel { stroke: currentColor; } .face .medal { fill: #fffdf6; stroke: currentColor; stroke-width: 1.2; } .face .mono { fill: currentColor; }
.face.joker.red { color: #c3262b; } .face .jk { fill: currentColor; }
.face.custom { --cc: #555; } .c-red { --cc: #d6402f; } .c-green { --cc: #2e9a54; } .c-blue { --cc: #2f6fd0; } .c-yellow { --cc: #e5b61d; } .c-wild { --cc: #20242c; } .c-black { --cc: #20242c; } .c-purple { --cc: #7440b3; } .c-orange { --cc: #e07a1c; } .c-gray { --cc: #66707a; }
.face.custom .field { fill: var(--cc); } .face.custom .oval { fill: #fffdf6; } .face.custom .big { fill: var(--cc); font-family: var(--sans); } .face.custom .small { fill: #fff; font-family: var(--sans); }
.face.custom .q1 { fill: #d6402f; } .face.custom .q2 { fill: #2f6fd0; } .face.custom .q3 { fill: #2e9a54; } .face.custom .q4 { fill: #e5b61d; }
.card.mini { --w: 56px; }

/* backs (8 designs); table uses html[data-back], settings previews use .bk-N */
:root[data-back="0"], .bk-0 { --bk-col: #1f3f8f; --bk-img: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px); }
:root[data-back="1"], .bk-1 { --bk-col: #8d1f2c; --bk-img: radial-gradient(circle, rgba(255,255,255,.32) 1.5px, transparent 2.2px) 0 0 / 10px 10px; }
:root[data-back="2"], .bk-2 { --bk-col: #136b4b; --bk-img: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 3px, transparent 3px 8px); }
:root[data-back="3"], .bk-3 { --bk-col: #15151b; --bk-img: radial-gradient(circle at 50% 50%, #e3b449 0 3px, transparent 4px) 0 0 / 14px 14px, repeating-linear-gradient(45deg, rgba(227,180,73,.18) 0 2px, transparent 2px 8px); }
:root[data-back="4"], .bk-4 { --bk-col: #5a2a8c; --bk-img: repeating-linear-gradient(135deg, rgba(255,255,255,.17) 0 4px, transparent 4px 12px); }
:root[data-back="5"], .bk-5 { --bk-col: #0f6b7a; --bk-img: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 9px 9px; }
:root[data-back="6"], .bk-6 { --bk-col: #c0561b; --bk-img: repeating-conic-gradient(rgba(255,255,255,.2) 0 10deg, transparent 10deg 20deg); }
:root[data-back="7"], .bk-7 { --bk-col: #2b2f38; --bk-img: conic-gradient(#2b2f38 25%, #3c4250 0 50%, #2b2f38 0 75%, #3c4250 0) 0 0 / 14px 14px; }
:root:not([data-back]) { --bk-col: #1f3f8f; --bk-img: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px), repeating-linear-gradient(-45deg, rgba(255,255,255,.16) 0 2px, transparent 2px 9px); }

/* states */
.card.movable { cursor: grab; touch-action: none; box-shadow: 0 0 0 1.5px rgba(227,180,73,.5); }
.card.movable:hover { translate: 0 -6px; box-shadow: 0 0 0 2px var(--hl), 0 6px 14px rgba(0,0,0,.3); }
.card.dim { filter: brightness(.62) saturate(.6) drop-shadow(0 1px 2px rgba(0,0,0,.42)); }
.fx-ghost { position: absolute; z-index: 30; margin: 0; pointer-events: none; }
.card.selected { translate: 0 -10px; box-shadow: 0 0 0 3px var(--hl), 0 8px 18px rgba(0,0,0,.4); z-index: 5; }
.card.dragging { opacity: .3; }
.card.hint, .zone.hint, .btn.hint { animation: hint .7s ease-in-out 3; }
@keyframes hint { 50% { box-shadow: 0 0 0 5px #fff, 0 0 22px 6px var(--hl); } }
.zone.target { outline: 2px dashed var(--hl); outline-offset: 3px; background: rgba(227,180,73,.10); cursor: pointer; }
.zone.clickable { cursor: pointer; } .zone.over { background: rgba(227,180,73,.28); }
.zone:focus-visible, .card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 80; pointer-events: none; --w: 72px; filter: drop-shadow(0 12px 14px rgba(0,0,0,.45)); }
.drag-ghost .zcards { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.drag-ghost .card + .card { margin-top: calc(var(--w) * -1.4 + var(--w) * .42); }
.drag-ghost .card { opacity: 1; translate: none; }
.drag-ghost .card.pd + .card, .drag-ghost .card.pd { margin-top: calc(var(--w) * -1.4 + var(--w) * .16); }
.drag-ghost.k-fan .zcards, .drag-ghost.k-row .zcards, .drag-ghost.k-stack .zcards { display: block; width: var(--w); height: calc(var(--w) * 1.4); }
.drag-ghost.k-fan .card, .drag-ghost.k-row .card, .drag-ghost.k-stack .card { position: absolute; inset: 0; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; padding: 12px 4px 2px; }
.actions .btn { min-height: 46px; padding: 10px 22px; font-size: 1rem; }
.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(--line); border-radius: 12px; box-shadow: var(--shadow); color: var(--ink); }
:root[data-large="1"] .felt { min-height: clamp(380px, 72vh, 860px); }

@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; }
@media (max-width: 480px) { .felt { padding: 10px 4px 14px; border-radius: 16px; } .actions .btn { flex: 1 1 40%; } }