/*
 * Hand and Foot: Saloon.
 *
 * No framework. The page is plain HTML with a handful of custom elements, and
 * each element styles its own shadow tree from its own stylesheet. This file
 * holds what crosses every one of those boundaries - the tokens, which inherit
 * through shadow roots - plus the few page-level rules for the document itself.
 *
 * The palette commits to a single dark saloon rather than pairing a light and
 * a dark scheme. The theming axis that matters is the six team colors plus a
 * contrast bump, which custom properties handle directly.
 */

@layer reset, tokens, base, utilities;

@layer reset {
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    :where(h1, h2, h3, p, ul, ol, figure) {
        margin-block: 0;
    }
}

@layer tokens {
    :root {
        color-scheme: dark;

        /* Spacing, on a 4px rhythm. */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1.25rem;
        --space-5: 2rem;

        --radius-xs: 0.15rem;
        --radius-sm: 0.35rem;
        --radius-md: 0.6rem;
        --radius-lg: 1rem;
        --radius-pill: 100vmax;

        --text-micro: 0.65rem;
        /* Load-bearing markers - WILD, FROZEN, PURE - sit above micro, which is
           too small to read at a glance across the felt. */
        --text-tag: 0.74rem;
        --text-small: 0.82rem;
        --text-large: 1.25rem;
        --text-display: clamp(2.5rem, 8vw, 4.5rem);

        --font-ui: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
        --font-card: Georgia, "Iowan Old Style", "Times New Roman", serif;

        /*
         * Every card derives from --card-w. A zone that wants smaller or larger
         * cards - a meld area, the player's own hand - redefines it locally.
         *
         * There is deliberately no --card-h here. A custom property's var() is
         * resolved where it is declared, so a height computed on :root would
         * be inherited as a fixed length and ignore any zone's own width. Each
         * component multiplies by --card-ratio itself instead.
         */
        --card-w: 60px;
        --card-ratio: 1.4;
        --pile-step: 2px;
        /* A Foot tucked against an avatar, against a pile on the table. */
        --foot-scale: 0.55;

        --ink: oklch(96% 0.01 250);
        --ink-muted: oklch(74% 0.02 250);
        --surface: oklch(24% 0.015 60);
        --surface-raised: oklch(30% 0.02 60);
        --line: oklch(45% 0.02 70);

        --brass: #c9a24a;
        --brass-dim: #8a6d33;
        --accent: var(--brass);
        --accent-ink: oklch(22% 0.04 85);

        --rail: #3b2b1e;
        --felt-hi: #1c7a50;
        --felt-mid: #14603f;
        --felt-lo: #0c3d29;
        --table-ink: #f2e6c8;
        --table-ink-muted: rgb(240 230 200 / 0.55);

        --card: #f7f4ea;
        --card-hi: #fffdf6;
        --card-edge: #cfc8b4;
        --card-back-a: #8d1f24;
        --card-back-b: #6f181c;
        --card-back-edge: #4a1013;

        /* Suit color is redundancy, never the signal: the glyph carries the suit. */
        --suit-black: #1b1a17;
        --suit-red: #b81d24;
        --suit-clubs-ink: var(--suit-black);
        --suit-diamonds-ink: var(--suit-red);

        --wild-ground: oklch(30% 0.02 250);
        --wild-ink: oklch(96% 0.01 250);

        --playable-ink: oklch(84% 0.15 195);
        --selected-ground: oklch(88% 0.16 120);
        --selected-ink: oklch(24% 0.03 120);
        --turn-ring: var(--brass);

        /*
         * The table convention: a pure book is squared up under a red card and a
         * wild one under a black card. The two are far apart in lightness, so the
         * pair survives a player who cannot tell the hues apart - and the label
         * under the pile spells it out regardless.
         */
        --book-pure-hi: #d8434a;
        --book-pure: #b81d24;
        --book-pure-edge: #7d1216;
        --book-wild-hi: #3b3a36;
        --book-wild: #1b1a17;
        --book-ink: #fff3f1;

        --frozen-ground: oklch(78% 0.11 220);
        --frozen-ink: oklch(22% 0.03 220);

        --warn-ink: oklch(78% 0.16 45);
        --status-online: oklch(80% 0.16 145);
        --status-playing: oklch(82% 0.15 90);

        --focus-ring: oklch(90% 0.13 210);
        --focus-width: 3px;

        --motion-fast: 120ms;

        /*
         * Blue and purple sit only 50deg apart in hue - close enough that a
         * deuteranope reading a 10-16% fill can't separate them by hue alone.
         * Lightness is preserved for every color vision type, so adjacent
         * entries are spread apart on that axis too, not just hue.
         */
        --team-red: oklch(62% 0.2 25);
        --team-green: oklch(66% 0.17 145);
        --team-blue: oklch(55% 0.17 255);
        --team-orange: oklch(72% 0.17 60);
        --team-yellow: oklch(84% 0.15 95);
        --team-purple: oklch(76% 0.16 305);
    }

    /* Clubs green and diamonds blue, so every suit differs by color as well as shape. */
    :root[data-deck="four-color"] {
        --suit-clubs-ink: oklch(42% 0.13 150);
        --suit-diamonds-ink: oklch(45% 0.16 250);
    }

    /* Anyone asking for more contrast gets firmer lines and brighter ink. */
    @media (prefers-contrast: more) {
        :root {
            --ink: oklch(100% 0 0);
            --ink-muted: oklch(88% 0.01 250);
            --surface: oklch(18% 0.01 60);
            --surface-raised: oklch(24% 0.01 60);
            --line: oklch(75% 0.02 70);
            --card: #ffffff;
            --card-hi: #ffffff;
            --suit-black: #000000;
            --suit-red: #a1121a;
            --table-ink-muted: rgb(240 230 200 / 0.8);
            --focus-width: 4px;
        }
    }
}

@layer base {
    html,
    body {
        block-size: 100%;
    }

    body {
        margin: 0;
        background: #111 radial-gradient(120% 80% at 50% 0%, #221d18 0%, #0d0b09 70%) fixed;
        color: var(--ink);
        font-family: var(--font-ui);
        line-height: 1.45;
    }

    .banner {
        margin: 0;
        padding: var(--space-2) var(--space-4);
        background: color-mix(in oklab, var(--warn-ink) 24%, var(--surface));
        text-align: center;
    }

    .loading {
        padding: var(--space-5);
        text-align: center;
        color: var(--ink-muted);
    }
}

@layer utilities {
    [hidden] {
        display: none !important;
    }
}