/* ==========================================================================
   NitroPlayer playing cards + felt tables
   Markup (use NPCards.html(rank, suit) / NPCards.back() from effects.js):
     <div class="card red|black r-K" data-rank="K" data-suit="♥">
       <div class="card-inner">
         <div class="card-corner"><span class="rank">K</span><span class="suit">♥</span></div>
         <div class="card-center"> pips | court | ace </div>
         <div class="card-corner card-corner-bottom">…</div>
       </div>
     </div>
   Back: <div class="card face-down"></div>
   Size: set --card-width on the card or any ancestor; height follows (1.4).
   States: .selected .hint .dim .drop-ok .dragging .deal .flip .playable
   ========================================================================== */

:root {
    --card-width: 84px;
    --card-ratio: 1.4;
    --card-height: calc(var(--card-width) * var(--card-ratio));
    --card-radius: calc(var(--card-width) * .085);
    --card-gap: 8px;
    --card-face: #fffdf7;
    --card-red: #d42a3c;
    --card-black: #161a2e;
    --card-back-1: #141836;
    --card-back-2: #23295a;
    --card-back-line: rgba(212,255,58,.55);
}

/* ---------- card shell ---------- */
.card {
    --card-height: calc(var(--card-width) * var(--card-ratio));
    --card-radius: calc(var(--card-width) * .085);
    position: relative; flex: none;
    width: var(--card-width); height: var(--card-height);
    border-radius: var(--card-radius);
    background: var(--card-face);
    background-image: linear-gradient(160deg, #fff 0%, var(--card-face) 55%, #f4f0e4 100%);
    border: 1px solid rgba(22,26,46,.16);
    box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 2px 6px rgba(10,14,30,.14), inset 0 0 0 1px rgba(255,255,255,.7);
    color: var(--card-black);
    cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
    container-type: inline-size;
    transition: transform .14s var(--ease, ease), box-shadow .14s, opacity .2s, filter .2s;
    font-family: var(--font-display, sans-serif);
    touch-action: none;
}
.card.red { color: var(--card-red); }
.card.black { color: var(--card-black); }
@media (hover: hover) {
    .card:not(.face-down):not(.disabled):hover { box-shadow: 0 0 0 2px var(--volt, #d4ff3a), 0 6px 16px rgba(10,14,30,.28); z-index: 900 !important; }
}
.card .card-inner { position: absolute; inset: 0; padding: 0; }

/* corners */
.card .card-corner {
    position: absolute; left: 4cqw; top: 4.5cqw;
    display: flex; flex-direction: column; align-items: center;
    font-weight: 800; line-height: .9; letter-spacing: -.04em;
    font-size: 18cqw; width: 19cqw;
}
.card .card-corner br { display: none; }
.card .card-corner .rank { display: block; }
.card .card-corner .suit { display: block; font-size: 14cqw; margin-top: 1.5cqw; font-family: system-ui, "Segoe UI Symbol", sans-serif; line-height: 1; }
.card[data-rank="10"] .card-corner, .card.r-10 .card-corner { letter-spacing: -.12em; font-size: 16cqw; }
.card .card-corner-bottom { left: auto; top: auto; right: 4cqw; bottom: 4.5cqw; transform: rotate(180deg); }

/* center area (default: big suit — legacy markup + small cards) */
.card .card-center {
    position: absolute; inset: 22% 18%; display: grid; place-items: center;
    font-size: 42cqw; line-height: 1; opacity: 1; font-family: system-ui, "Segoe UI Symbol", sans-serif; text-align: center;
}

/* pips layout (2–10) */
.card .pips { position: absolute; inset: 14% 30%; }
.card .pip { position: absolute; transform: translate(-50%, -50%); font-size: 18cqw; line-height: 1; font-family: system-ui, "Segoe UI Symbol", sans-serif; }
.card .pip.flip { transform: translate(-50%, -50%) rotate(180deg); }
.card .card-center.ace { font-size: 46cqw; }
.card .ace-ring { position: absolute; width: 64cqw; height: 64cqw; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1.2cqw solid currentColor; opacity: .12; }

/* court cards J Q K */
.card .court {
    position: absolute; inset: 13% 24%; border-radius: 4cqw;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw;
    background:
        repeating-linear-gradient(45deg, rgba(0,0,0,.035) 0 2px, transparent 2px 5px),
        linear-gradient(180deg, var(--court-a), var(--court-b));
    border: 1.2cqw solid currentColor; box-shadow: inset 0 0 0 1.4cqw var(--card-face);
}
.card.red .court { --court-a: #ffe9ea; --court-b: #ffd3d7; }
.card.black .court { --court-a: #eceffc; --court-b: #d9def5; }
.card .court .cf { font-size: 27cqw; line-height: 1; font-family: system-ui, "Segoe UI Symbol", sans-serif; }
.card .court .cl { font-size: 19cqw; font-weight: 800; line-height: .8; letter-spacing: -.04em; }

/* small cards: hide detailed pips/court, show big suit */
@container (max-width: 58px) {
    .card .pips, .card .court .cf, .card .ace-ring { display: none; }
    .card .card-corner { font-size: 30cqw; width: 34cqw; left: 6cqw; top: 5cqw; }
    .card .card-corner .suit { font-size: 25cqw; }
    .card .card-corner-bottom { display: none; }
    .card .card-center, .card .ace { inset: auto 6cqw 6cqw auto; width: auto; height: auto; font-size: 46cqw; }
    .card .court { inset: auto 6cqw 6cqw auto; background: none; border: 0; box-shadow: none; }
    .card .court .cl { display: none; }
    .card .card-center[data-suit]::before { content: attr(data-suit); }
    .card .court[data-suit]::before { content: attr(data-suit); font-size: 46cqw; line-height: 1; font-family: system-ui, "Segoe UI Symbol", sans-serif; }
}

/* ---------- back ---------- */
.card.face-down, .card.card-back {
    background-color: var(--card-back-1);
    background-image:
        radial-gradient(circle at 50% 50%, rgba(212,255,58,.22) 0 14%, transparent 15%),
        repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 7px),
        repeating-linear-gradient(-45deg, rgba(255,255,255,.06) 0 1.5px, transparent 1.5px 7px),
        linear-gradient(160deg, var(--card-back-2), var(--card-back-1));
    border: 1px solid rgba(0,0,0,.4);
    box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 6px rgba(10,14,30,.2), inset 0 0 0 1px rgba(255,255,255,.1);
    color: transparent; cursor: default;
}
.card.face-down::after, .card.card-back::after {
    content: ""; position: absolute; inset: 6.5cqw; border-radius: calc(var(--card-radius) * .6);
    border: 1px solid var(--card-back-line); opacity: .7;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z' fill='%23d4ff3a'/%3E%3C/svg%3E") center / 34% no-repeat;
}
.card.face-down > *, .card.card-back > * { display: none; }
.card.face-down.clickable, .card.card-back.clickable { cursor: pointer; }
.card.face-down:hover { box-shadow: 0 1px 1px rgba(0,0,0,.2), 0 2px 6px rgba(10,14,30,.2); }
.card .count-tag, .card-count {
    position: absolute; right: -6px; bottom: -6px; z-index: 3; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    background: var(--volt, #d4ff3a); color: var(--ink, #0e1020); font: 800 11px/22px var(--font-display, sans-serif); text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.card.face-down > .count-tag { display: block; }

/* ---------- states ---------- */
.card.selected { transform: translateY(-8%); box-shadow: 0 0 0 2.5px var(--volt, #d4ff3a), 0 0 0 4.5px rgba(14,16,32,.85), 0 12px 24px rgba(10,14,30,.35) !important; z-index: 950 !important; }
.card.hint { animation: cardHint 1s ease-in-out 2; }
.card.dim, .card.disabled { filter: saturate(.4) brightness(.82); cursor: default; }
.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-10%); }
.card.drop-ok, .card-slot.drop-ok { box-shadow: 0 0 0 3px rgba(212,255,58,.85), 0 0 20px rgba(212,255,58,.5) !important; }
.card.dragging { opacity: .35; }
.card.lift, #drag-ghost .card { box-shadow: 0 18px 34px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.1); }
#drag-ghost .card { transform: rotate(2deg); }
.card.deal { animation: cardDeal .38s var(--ease, ease) both; animation-delay: calc(var(--i, 0) * 45ms); }
.card.flip { animation: cardFlip .32s ease both; }
.card.win-dance { animation: cardDance .9s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes cardHint { 0%,100% { box-shadow: 0 2px 6px rgba(10,14,30,.14); } 50% { box-shadow: 0 0 0 3px #ffc83d, 0 0 22px 6px rgba(255,200,61,.75); } }
@keyframes cardDeal { from { opacity: 0; transform: translate(0, -40px) rotate(-8deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes cardFlip { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes cardDance { 0% { transform: none; } 40% { transform: translateY(-16px) rotate(-6deg); } 100% { transform: none; } }

/* ---------- empty slots ---------- */
.card-slot {
    --card-height: calc(var(--card-width) * var(--card-ratio));
    width: var(--card-width); height: var(--card-height); flex: none;
    border-radius: calc(var(--card-width) * .085);
    border: 2px dashed rgba(255,255,255,.22); background: rgba(0,0,0,.08);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.28); font-size: calc(var(--card-width) * .34); line-height: 1;
    font-family: system-ui, "Segoe UI Symbol", sans-serif;
    transition: border-color .15s, background .15s;
}
.card-slot.clickable, .card-slot[onclick] { cursor: pointer; }
.card-slot.clickable:hover, .card-slot[onclick]:hover { border-color: rgba(212,255,58,.6); background: rgba(212,255,58,.06); }

/* ---------- size helpers ---------- */
.card.card-xs { --card-width: 40px; }
.card.card-sm { --card-width: 56px; }
.card.card-md { --card-width: 72px; }
.card.card-lg { --card-width: 96px; }

/* ---------- hands / rows ---------- */
.np-hand { display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; padding: 10px 6px 4px; max-width: 100%; }
.np-hand > .card { margin-left: calc(var(--overlap, .42) * var(--card-width) * -1); }
.np-hand > .card:first-child { margin-left: 0; }
.np-hand.spread > .card { margin-left: 6px; }
.np-hand.wrap { flex-wrap: wrap; row-gap: 8px; }
.np-row { display: flex; gap: var(--card-gap); justify-content: center; flex-wrap: wrap; align-items: center; }
.np-seat-label { font: 700 12px var(--font-body, sans-serif); color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .1em; display: inline-flex; align-items: center; gap: 6px; }
.np-seat-label b { color: #fff; }
.np-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.14); color: #fff; font: 700 13px var(--font-body, sans-serif); font-variant-numeric: tabular-nums; }
.np-chip.gold { background: linear-gradient(180deg, #ffd66b, #e9a400); color: #3b2800; border-color: transparent; }
.np-chip.volt { background: var(--volt, #d4ff3a); color: var(--ink, #0e1020); border-color: transparent; }
.np-msg { text-align: center; color: #fff; font: 700 15px var(--font-body, sans-serif); padding: 8px 14px; border-radius: 999px; background: rgba(0,0,0,.25); display: inline-block; }

/* ---------- felt tables ---------- */
.solitaire-table, .np-felt, .felt {
    --felt-a: #13814f; --felt-b: #0b5537;
    position: relative; width: 100%; user-select: none; -webkit-user-select: none;
    border-radius: 18px; padding: var(--table-pad, 16px);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(120% 90% at 50% 0%, var(--felt-a) 0%, var(--felt-b) 100%);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 30px rgba(0,0,0,.35), 0 10px 26px rgba(10,14,30,.16);
    color: #fff;
}
.felt-blue { --felt-a: #1d5fa8; --felt-b: #0f3566; }
.felt-red { --felt-a: #8c1d2c; --felt-b: #4f0f19; }
.felt-ink { --felt-a: #262c5a; --felt-b: #11142c; }
/* any game area hosting a felt: kill the light card frame look */
.game-area:has(> .solitaire-table), .game-area:has(> .np-felt) { padding: 0; background: transparent; border: 0; box-shadow: none; }

/* solitaire-family layouts (solitaire, spider, freecell): cards sized by board width */
.solitaire-table {
    --cols: 7; --card-gap: clamp(3px, 1.2cqw, 12px); --table-pad: clamp(8px, 2cqw, 20px);
    --card-width: min(96px, calc((100cqw - 2 * var(--table-pad) - (var(--cols) - 1) * var(--card-gap)) / var(--cols)));
    min-height: calc(var(--card-width) * 1.4 * 3.4);
}
.solitaire-table:has(#ft-7) { --cols: 8; }
.solitaire-table:has(#sp-tab-9) { --cols: 10; --card-gap: clamp(2px, .8cqw, 8px); }
.solitaire-table .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--card-gap); margin-bottom: calc(var(--card-width) * .28); }
.solitaire-table .stock-waste, .solitaire-table .foundations { display: flex; gap: var(--card-gap); }
.solitaire-table .tableau { display: flex; justify-content: space-between; gap: var(--card-gap); }
.solitaire-table .tableau-pile { position: relative; flex: 0 0 var(--card-width); width: var(--card-width); min-height: calc(var(--card-width) * 1.4); }
.solitaire-table .tableau-pile > .card { position: absolute; left: 0; }
.solitaire-table .tableau-pile > .card-slot { position: absolute; left: 0; top: 0; }
#stock .card, #waste .card, [id^="foundation-"] .card, [id^="fc-"] .card, [id^="ff-"] .card { position: relative; }
#stock, #waste, [id^="foundation-"], [id^="fc-"], [id^="ff-"], #spider-stock { width: var(--card-width); min-height: calc(var(--card-width) * 1.4); }
#stock { position: relative; }
#stock .card { cursor: pointer; }
#stock .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: translate(3px, 3px); background: rgba(0,0,0,.25); z-index: -1; }
.solitaire-table .top-row .card-slot { font-size: calc(var(--card-width) * .38); }
#drag-ghost { --card-width: var(--drag-cw, 84px); }

/* center-table card games (hearts, spades, holdem…) */
.np-table { display: grid; gap: 14px; justify-items: center; }
.np-trick { position: relative; display: grid; grid-template-areas: ". n ." "w c e" ". s ."; gap: 6px; justify-items: center; align-items: center; }

@media (max-width: 760px) {
    .solitaire-table { border-radius: 14px; }
    .card.selected { transform: translateY(-5%); }
}

/* === card games (fork) === */
/* selection ring for stacked pile cards (no lift) */
.card.sel-ring { box-shadow: 0 0 0 2.5px var(--volt, #d4ff3a), 0 0 0 4.5px rgba(14,16,32,.8), 0 6px 14px rgba(10,14,30,.3) !important; }
.card.hint-soft { animation: cardHint 1.6s ease-in-out infinite; }

/* felt for card games whose page markup is a plain container */
.game-area:has(#pyramid-board), .game-area:has(#hearts-hand), .game-area:has(#spades-hand),
.game-area:has(#gr-hand), .game-area:has(#bj-board), .game-area:has(#poker-board) {
    --felt-a: #13814f; --felt-b: #0b5537;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(120% 90% at 50% 0%, var(--felt-a) 0%, var(--felt-b) 100%);
    border: 0; color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 30px rgba(0,0,0,.35), 0 10px 26px rgba(10,14,30,.16);
    padding: clamp(12px, 2.5vw, 24px) clamp(6px, 2vw, 20px);
    user-select: none; -webkit-user-select: none;
}
.game-area:has(#bj-board) { --felt-a: #1d5fa8; --felt-b: #0f3566; }
.game-area:has(#poker-board) { --felt-a: #8c1d2c; --felt-b: #4f0f19; }
.game-area:has(#poker-board) .np-legacy-area { background: transparent !important; padding: 0 !important; min-height: 0 !important; width: 100%; }
.game-area:has(#pyramid-board) > div, .game-area:has(#hearts-hand) > div, .game-area:has(#spades-hand) > div, .game-area:has(#gr-hand) > div, .game-area:has(#bj-board) > div { width: 100%; }
#pyramid-board { width: 100% !important; max-width: 640px; }
#hearts-scores, #spades-info { color: #fff !important; }
#hearts-hand.np-hand, #spades-hand.np-hand, #gr-hand.np-hand { flex-wrap: nowrap !important; max-width: 100%; }
.np-hand > .card.playable { cursor: pointer; }
@media (hover: hover) { .np-hand > .card.playable:hover { transform: translateY(-14%); } }
#pyr-stock, #pyr-waste, #gr-stock, #gr-discard { position: relative; }

/* blackjack table arc text */
.bj-arc { font: 800 clamp(10px, 2.4cqw, 13px) var(--font-display, sans-serif); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,214,107,.85); border-top: 1.5px solid rgba(255,214,107,.35); border-bottom: 1.5px solid rgba(255,214,107,.35); padding: 6px 14px; border-radius: 999px; text-align: center; }
#bj-actions .btn:not(.btn-primary) { background: rgba(255,255,255,.95); }

/* poker seats */
.np-seats { display: flex; justify-content: center; gap: clamp(6px, 2cqw, 18px); width: 100%; }
.np-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px 10px; border-radius: 16px; background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.1); transition: box-shadow .2s, opacity .2s; min-width: 0; }
.np-seat.turn { box-shadow: 0 0 0 2px var(--volt, #d4ff3a), 0 0 22px rgba(212,255,58,.35); animation: pulseRing 1.6s ease-out infinite; }
.np-seat.folded { opacity: .45; }
.np-seat.me { background: rgba(0,0,0,.28); padding: 10px 16px 12px; }
.np-seat-name { font: 700 13px var(--font-body, sans-serif); color: #fff; white-space: nowrap; }
.np-seat-tag { font: 800 10px var(--font-display, sans-serif); text-transform: uppercase; letter-spacing: .1em; color: #ffb4a8; }
#poker-actions { flex-wrap: wrap; }
.np-seats .np-chip { font-size: 12px; padding: 3px 8px; }

@media (max-width: 760px) {
    .np-seat { padding: 6px 6px 8px; border-radius: 12px; }
    .np-seat-name { font-size: 12px; }
    .np-chip { font-size: 12px; padding: 3px 8px; }
}
/* re-resolve size tokens inside boards so inline var(--card-height) in page markup follows the board's card width */
.solitaire-table, #pyr-stock, #pyr-waste, #gr-stock, #gr-discard { --card-height: calc(var(--card-width) * var(--card-ratio, 1.4)); --card-radius: calc(var(--card-width) * .085); }
@container (max-width: 58px) {
    .card[data-rank="10"] .card-corner, .card.r-10 .card-corner { font-size: 25cqw; letter-spacing: -.12em; }
}

/* ---------- landscape phones: use the width, not the height ---------- */
@media (max-height: 500px) and (max-width: 1000px) and (orientation: landscape) {
    /* gin rummy: stock + discard in a side column */
    .game-area:has(#gr-hand) { padding-block: 8px; }
    .game-area:has(#gr-hand) > div { display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px !important; row-gap: 8px !important; align-items: center; justify-items: center; }
    .game-area:has(#gr-hand) > div > div:has(#gr-stock) { grid-column: 1; grid-row: 1 / span 4; flex-direction: column; gap: 10px !important; }
    .game-area:has(#gr-hand) > div > :not(div:has(#gr-stock)) { grid-column: 2; }
    /* blackjack: drop the table banner to save height */
    .game-area:has(#bj-board) { padding-block: 8px; }
    #bj-board .bj-arc { display: none; }
    #bj-board { gap: 8px !important; }
    /* hold'em: community cards and your seat side by side */
    .game-area:has(#poker-board) { padding-block: 8px; }
    #poker-board { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 8px 18px !important; }
    #poker-board > .np-seats { grid-column: 1 / -1; }
    #poker-board > .np-row { grid-column: 1; }
    #poker-board > .np-seat.me { grid-column: 2; grid-row: 2 / span 2; }
    #poker-board > .np-msg { grid-column: 1 / -1; padding: 4px 12px; }
    #poker-actions { margin-top: 8px !important; }
    #poker-actions .btn { min-height: 38px; }
    .np-seat { padding: 4px 8px 6px; }
    /* hearts / spades: tighter vertical rhythm */
    .game-area:has(#hearts-hand), .game-area:has(#spades-hand) { padding-block: 8px; }
}