/* ==========================================================================
   Four Kings Casino — shared theme foundation
   --------------------------------------------------------------------------
   TO RE-THEME: change the custom properties in :root below. Everything else
   in the app references these, so a new palette is a one-file edit.

   The look is a beachside casino: sky and sea overhead, green felt underfoot,
   brass-and-gold trim, chip-red accents.
   ========================================================================== */

:root {
    /* --- The setting: sky, sea, sand --------------------------------------- */
    --sky-high: #7fd8ee;
    --sky: #bfeefa;
    --sea-far: #2fb0c6;
    --sea: #0d87a2;
    --sea-deep: #053546;
    --sand: #f7e6c4;
    --sand-deep: #e6cb97;
    --sunset: #ffb43f;
    --coral: #ff6f5e;
    --coral-deep: #e04a38;
    --palm: #1f8a5f;
    --foam: #f2fdff;

    /* --- The house: felt, gold, chips ------------------------------------- */
    --felt: #0d6b48;
    --felt-light: #14875a;
    --felt-deep: #06402b;
    --felt-shadow: #032a1c;
    --gold: #dfb75a;
    --gold-bright: #ffeaa8;
    --gold-deep: #9c7018;
    --chip-red: #cf1f3a;
    --chip-red-deep: #9c1128;

    /* Woven felt texture. Two crossed hairline gradients — no image asset. */
    --felt-weave:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px 4px);

    /* --- Semantic roles -------------------------------------------------- */
    --ink: #0b2f24;
    --ink-soft: #3f6357;
    --ink-faint: #74907f;
    --surface: rgba(255, 255, 255, 0.76);
    --surface-strong: rgba(255, 255, 255, 0.94);
    --surface-line: rgba(11, 47, 36, 0.12);
    --accent: var(--chip-red);
    --accent-deep: var(--chip-red-deep);
    --accent-ink: #fff;
    --ok: var(--palm);
    --warn: var(--sunset);
    --danger: var(--chip-red-deep);
    /* Focus ring for light surfaces; felt panels override it with gold. */
    --focus-ring: var(--chip-red-deep);

    /* --- Type ------------------------------------------------------------ */
    /* A high-contrast serif for headings reads as casino signage; the body
       stays on the system sans for legibility on a phone in the sun. */
    --font-display: 'Playfair Display', 'Didot', 'Hoefler Text', Georgia, serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* --- Metrics --------------------------------------------------------- */
    --radius: 18px;
    --radius-sm: 12px;
    --radius-pill: 999px;
    --tap: 48px; /* minimum touch target — Apple/WCAG floor is 44px */
    --shadow-sm: 0 2px 8px rgba(3, 42, 28, 0.14);
    --shadow: 0 8px 24px rgba(3, 42, 28, 0.2);
    --shadow-lg: 0 18px 44px rgba(3, 42, 28, 0.28);

    /* --- Safe areas (notch / home indicator) ----------------------------- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* The `hidden` attribute has to win against any `display` an author rule sets.
   The browser's own [hidden] { display: none } lives in the UA stylesheet, which
   loses to EVERY author declaration regardless of specificity — so .orderbar's
   `display: flex` silently defeated it and left the empty order bar sitting over
   the last drink card, unreachable. Marking `hidden` as the display of last
   resort is the one honest use of !important: it is a state, not a style, and
   nothing should be able to out-rank it. */
[hidden] {
    display: none !important;
}

html {
    /* Stop iOS bumping font sizes when the phone rotates. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    color: var(--ink);
    /* dvh tracks mobile Safari's collapsing URL bar; vh is the fallback. */
    min-height: 100vh;
    min-height: 100dvh;
    /* Keep pull-to-refresh from wiping a half-built order. */
    overscroll-behavior-y: contain;
    overflow-x: hidden;
    line-height: 1.5;
    background: var(--felt);
}

/* --------------------------------------------------------------------------
   The horizon: sky → sea → green felt, with a low sun. Pure CSS, fixed, no JS.
   The felt at the bottom is the card table you're standing at.
   -------------------------------------------------------------------------- */
.horizon {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 15%, rgba(255, 246, 214, 0.95) 0%, rgba(255, 201, 96, 0.55) 9%, transparent 27%),
        linear-gradient(
            to bottom,
            var(--sky-high) 0%,
            var(--sky) 27%,
            var(--sea-far) 41%,
            var(--sea) 55%,
            var(--sea-deep) 70%,
            var(--felt-shadow) 78%,
            var(--felt) 88%,
            var(--felt-light) 100%
        );
}

/* Sun glitter on the water, and the weave on the felt below it. */
.horizon::after {
    content: '';
    position: absolute;
    inset: 41% 0 0;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.16) 0 2px,
            transparent 2px 9px
        );
    mask-image: radial-gradient(ellipse at 78% 0%, #000 0%, transparent 58%);
    -webkit-mask-image: radial-gradient(ellipse at 78% 0%, #000 0%, transparent 58%);
}

/* --------------------------------------------------------------------------
   Ambient drift — a FIXED pool of elements. The old build appended a new
   snowflake node every 300ms forever, which grew the DOM without bound even
   on a backgrounded phone tab.
   -------------------------------------------------------------------------- */
.ambience {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.ambience span {
    position: absolute;
    font-size: 1.9rem;
    opacity: 0.2;
    will-change: transform;
    animation: drift 17s ease-in-out infinite;
}

@keyframes drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-6deg);
    }
    50% {
        transform: translate3d(10px, -22px, 0) rotate(8deg);
    }
}

.ambience span:nth-child(1)  { top:  8%; left:  4%; animation-delay:  0s; }
.ambience span:nth-child(2)  { top: 17%; right: 6%; animation-delay: -2s; }
.ambience span:nth-child(3)  { top: 31%; left:  9%; animation-delay: -4s; font-size: 1.5rem; }
.ambience span:nth-child(4)  { top: 44%; right:11%; animation-delay: -6s; }
.ambience span:nth-child(5)  { top: 57%; left:  5%; animation-delay: -8s; font-size: 1.4rem; }
.ambience span:nth-child(6)  { top: 68%; right: 7%; animation-delay:-10s; }
.ambience span:nth-child(7)  { top: 79%; left: 12%; animation-delay:-12s; font-size: 1.6rem; }
.ambience span:nth-child(8)  { top: 89%; right:14%; animation-delay:-14s; }
.ambience span:nth-child(9)  { top: 24%; left: 46%; animation-delay: -3s; font-size: 1.3rem; }
.ambience span:nth-child(10) { top: 63%; left: 52%; animation-delay: -7s; font-size: 1.3rem; }
.ambience span:nth-child(11) { top: 38%; right:28%; animation-delay:-11s; font-size: 1.5rem; }
.ambience span:nth-child(12) { top: 84%; left: 38%; animation-delay:-15s; font-size: 1.4rem; }

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
    font-family: var(--font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Gold-foil lettering. Designed to sit on a felt panel, where the contrast is
   strong. A solid fallback comes first — the previous build set
   -webkit-text-fill-color: transparent unconditionally, so headings were
   invisible in any browser without -webkit-background-clip. */
.gradient-text {
    color: var(--gold-bright);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
    .gradient-text {
        background: linear-gradient(
            100deg,
            var(--gold) 0%,
            var(--gold-bright) 26%,
            var(--gold) 44%,
            #b98c25 62%,
            var(--gold-bright) 84%,
            var(--gold) 100%
        );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
    }
}

/* Section headings sit directly on the backdrop, which is sea-to-felt dark
   behind the fold — so they're gold-on-dark, like signage above a table. */
.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--gold-bright);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    margin-bottom: 0.85rem;
}

.section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gold-deep), var(--gold), transparent);
}

/* --------------------------------------------------------------------------
   Casino furniture
   -------------------------------------------------------------------------- */

/* A stretch of card-table felt with brass trim. Self-contained — do NOT also
   put .card on these, .card is declared later and would repaint them white. */
.felt-panel {
    border-radius: var(--radius);
    background-color: var(--felt);
    background-image:
        var(--felt-weave),
        radial-gradient(ellipse at 50% 0%, var(--felt-light), var(--felt) 58%, var(--felt-deep) 100%);
    border: 1px solid var(--gold-deep);
    box-shadow:
        var(--shadow),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 2px 18px rgba(0, 0, 0, 0.28);
    color: var(--foam);
}

.felt-panel :focus-visible {
    outline-color: var(--gold-bright);
}

/* Marquee bulbs, chasing along the top and bottom of a panel. */
.marquee {
    position: relative;
}

.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    height: 7px;
    pointer-events: none;
    /* Layer 1 is a travelling glint; layer 2 is the fixed row of bulbs. */
    background-image:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 1.7px, transparent 2.2px),
        radial-gradient(circle at 50% 50%, var(--gold-bright) 0 2.3px, var(--gold-deep) 2.5px 3.3px, transparent 3.6px);
    background-repeat: repeat-x, repeat-x;
    background-size: 18px 7px, 18px 7px;
    animation: marquee-chase 1.05s steps(3) infinite;
}

.marquee::before {
    top: 0.5rem;
}

.marquee::after {
    bottom: 0.5rem;
}

/* 54px in 3 steps = one 18px bulb pitch per step, so the glint lands on bulbs. */
@keyframes marquee-chase {
    to {
        background-position: 54px 0, 0 0;
    }
}

/* Poker chip. --chip-face sets the edge colour; the dashes are the edge spots. */
.chip {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex-shrink: 0;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, 0.92);
    background: radial-gradient(circle, #fff 0 52%, var(--chip-face, var(--felt)) 53%);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Big translucent suit in the corner of a card, like a playing card index. */
.suit-mark {
    position: absolute;
    right: 0.5rem;
    bottom: 0.2rem;
    font-size: 2.6rem;
    line-height: 1;
    opacity: 0.09;
    color: var(--felt-deep);
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

[data-suit='♥'] .suit-mark,
[data-suit='♦'] .suit-mark {
    color: var(--chip-red);
    opacity: 0.12;
}

[data-suit='♥'] .chip,
[data-suit='♦'] .chip {
    --chip-face: var(--chip-red);
}

[data-suit='♣'] .chip {
    --chip-face: var(--sea-deep);
}

/* --------------------------------------------------------------------------
   Interactive base — touch first
   -------------------------------------------------------------------------- */
button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button,
[role='button'],
a,
summary {
    /* Kills the 300ms tap delay and accidental double-tap zoom. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

.no-select {
    -webkit-user-select: none;
    user-select: none;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 4px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: var(--tap);
    padding: 0 1.15rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--surface-strong);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.btn:active {
    transform: scale(0.96);
}

/* Chip red with a brass rim. */
.btn-primary {
    background: linear-gradient(160deg, var(--chip-red), var(--chip-red-deep));
    color: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--gold);
}

.btn-ok {
    background: linear-gradient(160deg, var(--felt-light), var(--felt-deep));
    color: #fff;
    box-shadow: var(--shadow-sm), inset 0 0 0 1.5px var(--gold);
}

.btn-warn {
    background: linear-gradient(160deg, var(--gold), var(--gold-deep));
    color: #33240a;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

/* Hover effects are gated behind a real pointer. On a touch screen, :hover
   sticks after a tap, which left the old cards frozen in their lifted state. */
@media (hover: hover) and (pointer: fine) {
    .btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: var(--shadow);
    }

    .btn-primary:hover:not(:disabled),
    .btn-ok:hover:not(:disabled) {
        box-shadow: var(--shadow), inset 0 0 0 1.5px var(--gold-bright);
    }
}

/* --------------------------------------------------------------------------
   Surfaces
   -------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--surface-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--sand);
    color: var(--ink);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   Motion preferences — the old build animated unconditionally.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .horizon::after,
    .ambience {
        display: none;
    }
}