/* Hearts — the game's own skin.
 *
 * WHERE THE COLOURS CAME FROM
 *   Hearts is public domain: no publisher, no wordmark, no box art, so there is no official
 *   palette to sample and inventing one is the honest option. The accent is derived from the
 *   only thing the game actually looks like — the red heart pip.
 *
 *   Straight red could not be used. Clans already owns the portal's one red-orange accent
 *   (#b8503f, hue 8°), and the house rule asks for ≥35° of separation from every neighbour a
 *   player meets on the grid. Six of the ten games that declare these tokens are already
 *   amber/gold, so the warm side of the wheel was closed too. Rotating the heart pip's red
 *   towards carmine until it cleared Clans lands on hue 329° — the NEAREST hue to a red heart
 *   that clears every neighbour:
 *       Clans 8° · Geier 24° · Village 35° · Tricktakers 37° · Schadenfreude 38° · Ra 40°
 *       TheGang 41° · Makatsu 167° · Haggis 173° · Joan 213°      → nearest gap 39° (Clans)
 *   Lifted for legibility on a near-black panel as well: sampled carmine sits around L* 50,
 *   which greys out at 12px, so the shipped value is lifted to L* ≈ 57.
 *
 *   --dk-tint is a deep WINE rather than the accent. The environment of Hearts is a card-room
 *   table, not a pink one, and the tint is the felt's hue — it does not have to be the accent.
 *
 * WHAT THIS FILE MAY NOT DO
 *   Only the three --dk-* tokens below. No font token: this game ships no font file. Not one
 *   rule for #header-*, .start-*, #ai-indicator, .eval-* or the panels — ../core/deckades.css
 *   owns all of it, and a local override there silently wins by source order.
 */

:root {
    --dk-accent:      #e0559c;                    /* the heart pip, rotated to carmine (see above) */
    --dk-accent-soft: rgba(224, 85, 156, 0.33);   /* the SAME rgb — a different hue shows as a seam */
    --dk-tint:        rgba(96, 26, 48, 0.26);     /* deep wine: the card-room table, not the pip */

    /* ── The game's own vocabulary. Namespaced or plain nouns, never a new --dk-* token. ── */
    --card-w:        clamp(38px, 5.6vw, 76px);    /* cards.css derives every size from this */
    --hearts-felt-lift: rgba(255, 232, 240, 0.05);
    --hearts-seat-line: rgba(224, 85, 156, 0.22);
    --hearts-ink:    rgba(240, 232, 236, 0.92);
    --hearts-dim:    rgba(240, 232, 236, 0.52);
    --hearts-danger: #ff6b8a;                     /* the Queen, and points landing on you */
    --hearts-safe:   #7fd6a4;

    /* Card ink, read by ../core/cards/cards.css. Slightly warmer than its defaults so the
       faces sit in the same light as the wine felt. */
    --dk-card-red:   #cc2244;
    --dk-card-black: #1a1418;
}

html, body {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    background: #0c0709;
    font-family: var(--dk-font-ui);
    color: var(--hearts-ink);
    -webkit-tap-highlight-color: transparent;
}

/* ── The table ────────────────────────────────────────────────────────────────
 * No cover image ships with this game, so the felt is the shared table plus the wine tint —
 * never a flat colour, which reads as a missing asset. The cards are the brightest thing on
 * screen by construction, because nothing else here is light. */
#game {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 120% 80% at 50% 42%, var(--hearts-felt-lift), transparent 70%),
        linear-gradient(var(--dk-tint), var(--dk-tint)),
        var(--dk-table);
    overflow: hidden;
}

#start-screen {
    background:
        radial-gradient(ellipse 90% 70% at 50% 38%, rgba(224, 85, 156, 0.10), transparent 72%),
        linear-gradient(rgba(10, 6, 8, 0.80), rgba(10, 6, 8, 0.90)),
        var(--dk-table);
}

/* ── Cards ───────────────────────────────────────────────────────────────────
 * The BOX is ours; what is printed inside it belongs to ../core/cards/cards.css. That sheet
 * needs `--card-w` (declared above) and a positioning context, which is the `position:absolute`
 * here. */
.card {
    position: absolute;
    width: var(--card-w);
    height: calc(var(--card-w) * 1.42);
    border-radius: calc(var(--card-w) * 0.075);
    background: #f7f2ec;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
    will-change: transform;
    user-select: none;
    z-index: 10;
}

/* NOTE: there is deliberately no `.card.back { background: … }` rule here. The shared deck
 * paints the back with `.dk-back`, which is ONE class — a local `.card.back` is two, wins on
 * specificity however late cards.css is linked, and leaves every opponent's fan as a row of
 * empty outlines. The base `.card` background below is what `.dk-back` paints over. */

/* The card that took the trick, and everything it beat. The dim is half the signal: a lit
 * card among three normal ones reads as decoration, not as an answer. */
.card.won-glow {
    box-shadow: 0 0 0 2px #ffe58a, 0 0 22px rgba(255, 229, 138, 0.9);
    transform: scale(1.1);
    z-index: 120;
}
.card.lost-dim { filter: brightness(0.5) saturate(0.65); }

/* Only the human's own hand is ever interactive. */
.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-14px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6); }
.card.blocked { filter: brightness(0.44) saturate(0.5); cursor: not-allowed; }

/* Chosen for the pass — lifted and ringed in the accent. */
.card.picked {
    transform: translateY(-20px);
    box-shadow: 0 0 0 3px var(--dk-accent), 0 12px 22px rgba(0, 0, 0, 0.65);
}

/* The Queen gets a permanent tell in the human's hand: she is 13 of the 26 points and a
   player who loses track of her has lost the hand, not made a mistake. */
.card.is-queen::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--hearts-danger);
    pointer-events: none;
}

.ghost { position: fixed; z-index: 900; pointer-events: none; margin: 0; }

/* ── Seats ───────────────────────────────────────────────────────────────────
 * Every seat is placed on a ring by game.js. Nothing here hard-codes a corner: a switch with
 * four cases cannot render a five-player table. */
.seat { position: absolute; pointer-events: none; }
.seat .card { pointer-events: none; }
.seat.me .card.playable { pointer-events: auto; }

.seat-badge {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 5px 10px;
    background: rgba(14, 8, 11, 0.78);
    border: 1px solid var(--hearts-seat-line);
    border-radius: var(--dk-radius);
    font-size: 12px; line-height: 1.25; white-space: nowrap;
    backdrop-filter: blur(3px);
    z-index: 40;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.seat-badge .nm { font-weight: 600; color: var(--hearts-ink); }
.seat-badge .nm .ai-tag { opacity: 0.5; font-weight: 400; font-size: 10.5px; }
.seat-badge .sub {
    display: flex; gap: 8px; align-items: center;
    color: var(--hearts-dim); font-size: 11px; font-variant-numeric: tabular-nums;
}
.seat-badge .sub .pts { color: var(--hearts-danger); font-weight: 600; }
.seat-badge .sub .pts.clean { color: var(--hearts-safe); }

/* Whose turn it is. Colour alone never carries this — the badge also lifts and glows. */
.seat-badge.turn {
    border-color: var(--dk-accent);
    box-shadow: 0 0 16px var(--dk-accent-soft);
}
.seat-badge.passed { opacity: 0.55; }
.seat-badge .lead-mark { color: var(--dk-accent); font-size: 10px; letter-spacing: 0.06em; }

/* ── The centre: the trick ───────────────────────────────────────────────────*/
#trick-zone { position: absolute; inset: 0; pointer-events: none; z-index: 20; }

/* The table itself. An oval of lifted felt with a rim, sized in JS from the seat ring so the
   chairs are always sitting AT it rather than on it. Under everything and takes no clicks:
   the trick (z 20), the fans (z 10+) and the badges all read on top of it. */
#table-surface {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse at 50% 38%,
            rgba(255, 236, 244, 0.075) 0%,
            rgba(255, 236, 244, 0.030) 45%,
            rgba(0, 0, 0, 0.10) 100%);
    /* Two rings, not a border: the outer is the table's edge and the inner is the stitched
       rail a card-room table has. A single 1px border reads as a drawn circle, not a surface. */
    box-shadow:
        inset 0 0 0 1px var(--hearts-seat-line),
        inset 0 0 0 9px rgba(255, 236, 244, 0.030),
        inset 0 0 0 10px rgba(224, 85, 156, 0.10),
        inset 0 14px 40px rgba(0, 0, 0, 0.22),
        0 18px 46px rgba(0, 0, 0, 0.34);
}

/* The heart printed on the felt. `font-size` is set by render() from the table's own rim —
 * see renderTable() — because this is part of the table, not of the viewport. Kept very low
 * contrast on purpose: at this size it is the surface the cards sit on, and anything more
 * competes with them. */
#table-mark {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--dk-font-display);
    line-height: 1;
    color: rgba(255, 255, 255, 0.05);
    pointer-events: none; user-select: none;
    z-index: 1;
}

/* ── "You were passed" ───────────────────────────────────────────────────────
 * Lives in the shared .overlay/.panel shell; only the two classes below are ours. `.card` is
 * absolutely positioned on the felt, so it has to be put back in flow to sit in a row here,
 * and --card-w is re-declared on the row alone so the three cards read at dialog size without
 * touching the table's. */
.pass-in-title {
    font-family: var(--dk-font-display);
    font-size: 18px; color: var(--hearts-ink);
    text-align: center; margin-bottom: 14px;
}
.pass-in-cards {
    --card-w: 84px;
    display: flex; justify-content: center; gap: 10px;
}
.pass-in-cards .card {
    position: relative;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* ── The pass tray ───────────────────────────────────────────────────────────*/
#pass-bar {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 12px;
    padding: 8px 14px;
    background: rgba(14, 8, 11, 0.9);
    border: 1px solid var(--hearts-seat-line);
    border-radius: var(--dk-radius-lg);
    z-index: 220;
}
#pass-bar .pass-label { font-size: 13px; color: var(--hearts-dim); }
#pass-bar .pass-label b { color: var(--dk-accent); }
#pass-bar button {
    padding: 8px 18px; min-height: var(--dk-tap);
    border: 0; border-radius: var(--dk-radius);
    background: var(--dk-accent); color: #1b0a12;
    font-family: var(--dk-font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
}
#pass-bar button:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Ranking panel ───────────────────────────────────────────────────────────
 * pointer-events: none is load-bearing — the two tool panels open at exactly this corner at a
 * higher z-index, and without this the ranking eats clicks meant for them. */
#ranking-table {
    position: fixed; top: 84px; right: 12px; width: 156px;
    z-index: 200; pointer-events: none; user-select: none;
}
#ranking-table .rank-head {
    font-family: var(--dk-font-display); font-size: 12px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--dk-accent); margin-bottom: 6px;
}
#ranking-table .rank-rows { position: relative; }
.rank-row {
    position: absolute; left: 0; right: 0; height: 36px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 9px;
    background: rgba(14, 8, 11, 0.74);
    border: 1px solid var(--hearts-seat-line);
    border-radius: var(--dk-radius);
    font-size: 12px;
    transition: top 420ms cubic-bezier(.3, .8, .3, 1), border-color 220ms ease;
}
.rank-row .rk { color: var(--hearts-dim); font-size: 11px; width: 12px; }
.rank-row .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.rank-row.me { border-color: var(--dk-accent); }
.rank-row.me .nm { color: var(--dk-accent); }
.rank-row .delta { font-size: 10.5px; color: var(--hearts-danger); }
.rank-row .delta.good { color: var(--hearts-safe); }

/* ── Round summary, drawn on the table ───────────────────────────────────────*/
#round-panel {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    padding: 18px 26px;
    background: rgba(12, 7, 10, 0.94);
    border: 1px solid var(--dk-accent-soft);
    border-radius: var(--dk-radius-lg);
    box-shadow: var(--dk-panel-shadow);
    text-align: center; z-index: 500; min-width: 240px;
}
#round-panel h3 {
    margin: 0 0 12px; font-family: var(--dk-font-display); font-weight: 600;
    font-size: 20px; color: var(--dk-accent);
}
#round-panel .rp-row {
    display: flex; justify-content: space-between; gap: 18px;
    padding: 4px 0; font-size: 14px;
}
#round-panel .rp-row .v { font-variant-numeric: tabular-nums; font-weight: 700; }
#round-panel .rp-row .v.zero { color: var(--hearts-safe); }
#round-panel .rp-moon {
    margin: 10px 0 2px; font-size: 13px; color: var(--dk-accent); font-weight: 600;
}
#round-panel button {
    margin-top: 14px; padding: 9px 22px; min-height: var(--dk-tap);
    border: 0; border-radius: var(--dk-radius);
    background: var(--dk-accent); color: #1b0a12;
    font-family: var(--dk-font-ui); font-weight: 700; font-size: 14px; cursor: pointer;
}

/* Points flying to the seat that took them. */
.pts-fly {
    position: fixed; z-index: 950; pointer-events: none;
    font-weight: 800; font-size: 20px; color: var(--hearts-danger);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    transition: transform 620ms cubic-bezier(.2, .7, .3, 1), opacity 620ms ease;
}

/* ── Narrow viewports ────────────────────────────────────────────────────────
 * Tablet is the floor, not a nice-to-have. Below the phone-landscape width the ranking and the
 * tool panels are hidden TOGETHER — the ranking is the one that must not survive alone, or it
 * covers the table with something the player cannot dismiss. */
@media (max-width: 719px), (max-height: 439px) {
    #ranking-table { display: none; }
    .seat-badge { font-size: 11px; padding: 3px 7px; }
    .seat-badge .sub { font-size: 10px; }
    #table-mark { display: none; }
}