/*
 * Belote — the game's own skin. Everything else (header, start screen, AI badge, tool
 * panels, dialog shell, fonts, the table felt) is inherited from ../core/deckades.css and
 * is deliberately NOT restated here.
 *
 * ── Where the colours come from ──────────────────────────────────────────────
 * Belote is a traditional French game: no publisher, no box, no brand palette to sample.
 * So the palette is invented, from the one thing every photograph of a Belote game has in
 * it — the tapis vert, the green baize of the café table.
 *
 *   --dk-accent  #74b34a  leaf green, hue 96°. Checked against every other game on the
 *                         portal: the nearest accent is Wizard's gold at 52° away, and
 *                         green was unclaimed across all eleven. Lifted well clear of the
 *                         baize itself so it stays legible at 12px on a near-black panel.
 *   --dk-tint             the baize, washed over the shared wooden table. Same hue family
 *                         as the accent because here the accent IS the environment.
 *
 * There is no cover image in this folder, so the play surface is the shared felt with that
 * tint and nothing else — never a flat colour. Drop an assets/cover.jpg in and the two
 * commented rules at the bottom of this file blend it onto the felt.
 */

:root {
    --dk-accent:      #74b34a;
    --dk-accent-soft: rgba(116, 179, 74, 0.35);
    --dk-tint:        rgba(38, 92, 52, 0.30);

    /* ── This game's own vocabulary. Namespaced; never a new --dk-* token. ── */
    --belote-cream:   #eef3ea;
    --belote-dim:     #91a394;
    --belote-gold:    #d8b45c;      /* the taker's badge and the contract line */
    --belote-claret:  #8d3b46;      /* dedans, and the losing column */
    --belote-panel:   rgba(16, 22, 18, 0.96);
    --belote-line:    rgba(116, 179, 74, 0.28);

    /* Card geometry is solved in JS and written back here, so one variable resizes every
       card on the table (cards.css derives all of its own sizes from --card-w). */
    --card-w:  74px;
    --card-h:  105px;
    --seat-w:  46px;
}

html { background: #0b100c; }
html, body { height: 100%; }
body {
    margin: 0;
    color: var(--belote-cream);
    overflow: hidden;
    touch-action: none;
    -webkit-user-select: none; user-select: none;
}

/* The play surface: the shared table photo under this game's baize tint. */
#game {
    position: absolute; inset: 0;
    background: var(--dk-table);
    overflow: hidden;
}

/* ── The centre of the table ────────────────────────────────────────────────── */

/* The name on the felt, under the cards. Faint: it is decoration, and the cards have to be
   the brightest thing on this screen. */
#table-tag {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--dk-font-display);
    font-size: clamp(34px, 7vmin, 74px);
    letter-spacing: 0.34em;
    color: rgba(255, 255, 255, 0.045);
    text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
    pointer-events: none; user-select: none;
    white-space: nowrap;
}

#board {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

#trick-zone, #seats, #hand { position: absolute; inset: 0; pointer-events: none; }
#hand > *, #seats > * { pointer-events: auto; }

/* ── Cards ──────────────────────────────────────────────────────────────────
   The BOX only. What is printed on the card — index, pips, courts, back art — belongs to
   ../core/cards/cards.css, which is linked after this file. */

.card {
    position: absolute;
    width: var(--card-w); height: var(--card-h);
    border-radius: calc(var(--card-w) * 0.09);
    background: #f7f4ec;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
    transition: transform 180ms cubic-bezier(.22,.75,.3,1), box-shadow 140ms, filter 140ms;
    will-change: transform;
}
/* NOTE: do NOT give .card.back a background of its own. cards.css paints the back art on
   `.dk-back`, and `.card.back` is the more specific selector — a `background: transparent`
   here silently wins and every face-down card renders as a blank rectangle. */

/* Opponent fans are drawn smaller than the human's hand. BOTH tokens have to move together:
   .card sizes its box from --card-w AND --card-h, so overriding only the width gives an
   opponent card the small width with the full height — a visibly wrong, too-narrow card.
   cards.css derives its own internals from --card-w alone, which is why this is enough. */
.card.opp { --card-w: var(--opp-card-w); --card-h: var(--opp-card-h); }

/* A card the human may legally play right now. Belote's legality is restrictive — you are
   often forced to a single card — so showing it is most of the interface. */
.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-14px) scale(1.04); z-index: 40; }
/* Belote's legality is restrictive — you are often forced to a single card — so the dim is
   most of the interface, and it has to read as "not now" without becoming unreadable. */
.card.illegal { filter: brightness(0.62) saturate(0.6); }
.card.illegal::after {
    content: ''; position: absolute; inset: 0;
    border-radius: inherit; background: rgba(8, 12, 9, 0.22);
}
.card.just-played { box-shadow: 0 0 0 2px var(--dk-accent), 0 4px 14px rgba(0,0,0,.55); }

/* The trump indicator riding on the turn-up and on the taker's badge. */
.suit-glyph.red { color: #c8404a; }
.suit-glyph.black { color: #161a17; }

/* ── Seats ──────────────────────────────────────────────────────────────────── */

.seat {
    position: absolute;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 5px 9px;
    border-radius: 10px;
    background: rgba(10, 15, 11, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.07);
    font-family: var(--dk-font-ui);
    font-size: 12.5px; line-height: 1.25;
    white-space: nowrap;
    transition: border-color 180ms, box-shadow 180ms, background 180ms;
}
.seat.turn {
    border-color: var(--dk-accent);
    box-shadow: 0 0 0 1px var(--dk-accent-soft), 0 0 18px rgba(116, 179, 74, 0.25);
    background: rgba(18, 30, 20, 0.8);
}
.seat.partner .seat-name::after {
    content: ' ⌂'; color: var(--dk-accent); font-size: 11px;
}
.seat-name { font-weight: 600; color: var(--belote-cream); }
.seat-name.ai { color: var(--belote-dim); }
.seat-row { display: flex; align-items: center; gap: 7px; color: var(--belote-dim); font-size: 11.5px; }
.seat-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(216, 180, 92, 0.16);
    color: var(--belote-gold);
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
}
.seat-badge.belote { background: rgba(116,179,74,.18); color: var(--dk-accent); }
.seat-cards { color: var(--belote-dim); font-variant-numeric: tabular-nums; }

/* ── The bidding bar ────────────────────────────────────────────────────────── */

#bid-bar {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px;
    background: var(--belote-panel);
    border: 1px solid var(--belote-line);
    border-radius: 12px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.5);
    z-index: 60;
}
#bid-bar.hidden { display: none; }
.bid-btn {
    min-width: 44px; min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--belote-line);
    border-radius: 9px;
    background: rgba(116, 179, 74, 0.1);
    color: var(--belote-cream);
    font-family: var(--dk-font-ui); font-size: 15px; font-weight: 600;
    cursor: pointer;
}
.bid-btn:hover { background: rgba(116, 179, 74, 0.24); }
.bid-btn.suit { font-size: 21px; line-height: 1; padding: 6px 12px; }
.bid-btn.suit.red { color: #e8737c; }
.bid-btn.pass { background: rgba(255, 255, 255, 0.05); color: var(--belote-dim); }
.bid-label { color: var(--belote-dim); font-size: 12px; margin-right: 2px; }

/* ── Ranking, top right, under the header ───────────────────────────────────── */

#ranking-table {
    position: fixed; top: 84px; right: 12px; width: 168px;
    z-index: 200;
    pointer-events: none;    /* the tool panels open at this exact corner and must win */
    user-select: none;
}
#ranking-table .rank-row {
    position: absolute; left: 0; right: 0;
    display: flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 10px;
    background: rgba(12, 18, 13, 0.74);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    font-family: var(--dk-font-ui); font-size: 12.5px;
    transition: top 420ms cubic-bezier(.22,.75,.3,1), border-color 200ms;
}
#ranking-table .rank-row.us { border-color: var(--dk-accent-soft); }
#ranking-table .rank-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#ranking-table .rank-score {
    font-size: 15px; font-weight: 700; color: var(--dk-accent);
    font-variant-numeric: tabular-nums;
}
#ranking-table .rank-delta { font-size: 11px; color: var(--belote-gold); }

/* ── Round / game end ───────────────────────────────────────────────────────── */

#round-panel .panel { max-width: 460px; }
.score-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.score-table th, .score-table td { padding: 5px 8px; text-align: right; }
.score-table th:first-child, .score-table td:first-child { text-align: left; color: var(--belote-dim); }
.score-table thead th { color: var(--belote-cream); border-bottom: 1px solid var(--belote-line); }
.score-table tr.total td { border-top: 1px solid var(--belote-line); font-weight: 700; font-size: 16px; }
.score-table td.win { color: var(--dk-accent); }
.score-table td.lose { color: var(--belote-claret); }
.contract-line { font-size: 14px; margin-bottom: 10px; }
.contract-line.made { color: var(--dk-accent); }
.contract-line.dedans { color: var(--belote-claret); font-weight: 700; }

/* ── Animation ghosts ───────────────────────────────────────────────────────── */

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

/* Declaration and belote call-outs, floated beside the seat that made them. */
.callout {
    position: fixed; z-index: 800;
    padding: 5px 12px; border-radius: 999px;
    background: rgba(12, 18, 13, 0.94);
    border: 1px solid var(--dk-accent-soft);
    color: var(--dk-accent);
    font-family: var(--dk-font-display); font-size: 14px; font-weight: 700;
    letter-spacing: .03em; white-space: nowrap;
    pointer-events: none;
    animation: callout 1900ms ease-out forwards;
}
@keyframes callout {
    0%   { opacity: 0; transform: translateY(6px) scale(.92); }
    14%  { opacity: 1; transform: translateY(0) scale(1); }
    76%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(-16px); }
}

/* The Rules link in the start screen's launch column. Deliberately NOT a .start-play: those
   are launch buttons and the shared sheet gives them width:100%, which would make a one-word
   link the widest control on the card. Sized to its own text, centred under the buttons. */
.rules-link {
    align-self: center;
    display: inline-block;
    width: auto;
    margin-top: 4px;
    padding: 7px 16px;
    border: 1px solid var(--dk-accent-soft);
    border-radius: var(--dk-radius);
    background: transparent;
    color: var(--belote-cream);
    font-family: var(--dk-font-ui); font-size: 13px; font-weight: 600;
    text-align: center; text-decoration: none; white-space: nowrap;
    opacity: .85;
    transition: background .15s, opacity .15s;
}
.rules-link:hover { background: var(--dk-accent-soft); opacity: 1; }

/* ── The crawlable block ────────────────────────────────────────────────────── */

#intro { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Mobile ─────────────────────────────────────────────────────────────────
   Tablet is the floor. Below 760px the shared sheet already collapses the AI badge; here
   the ranking gets out of the way of the tool panels entirely. */

@media (max-width: 900px) { #ranking-table { width: 140px; } }
@media (max-width: 700px), (max-height: 460px) {
    #ranking-table { display: none; }
    #table-tag { font-size: clamp(26px, 8vmin, 44px); }
}

/* ── If a cover image is ever added to assets/ ──────────────────────────────
   Uncomment both rules. The wash is a near-black in this palette's own hue family, the
   cover is soft-lit ONTO the shared felt so the two read as one surface, and the start
   screen shows the same picture whole and much brighter.

#game {
    background:
        linear-gradient(rgba(9, 14, 10, 0.66), rgba(7, 11, 8, 0.80)),
        url('assets/cover.jpg') center / cover no-repeat fixed,
        var(--dk-table);
    background-blend-mode: normal, soft-light, normal;
}
#start-screen {
    background:
        linear-gradient(rgba(8, 13, 9, 0.74), rgba(8, 13, 9, 0.86)),
        url('assets/cover.jpg') center / cover no-repeat fixed,
        #0b100c;
}
*/