/* ============================================
   MASTERSHOT — DESIGN TOKENS
   Premium casino: green felt, leather, brass, wood
   ============================================ */

:root {
    /* === FELT & TABLE === */
    --felt-900: #0a1f15;
    --felt-800: #0f2a1d;
    --felt-700: #123727;
    --felt-600: #184732;
    --felt-500: #1f5a3f;
    --felt-accent: #2d7a56;
    --felt-bright: #3fa075;

    /* === LEATHER / RAIL === */
    --leather-900: #1a0e07;
    --leather-800: #2a1810;
    --leather-700: #3d2618;
    --leather-600: #4f3423;
    --leather-500: #6b4731;

    /* === WOOD === */
    --wood-900: #1f0f08;
    --wood-800: #3a1d0f;
    --wood-700: #572c17;
    --wood-600: #7a421f;

    /* === BRASS / GOLD === */
    --gold-900: #3d2e00;
    --gold-800: #6b5200;
    --gold-700: #9c7a1a;
    --gold-600: #c99a2e;
    --gold-500: #e8b949;
    --gold-400: #f4cf6e;
    --gold-300: #fce29a;
    --gold-200: #fff1c7;
    --gold-glow: rgba(232, 185, 73, 0.45);

    /* === IVORY / CREAM (cue ball) === */
    --ivory-100: #fdfaf0;
    --ivory-200: #f4ecd3;
    --ivory-300: #e6d9b0;

    /* === NEUTRALS (deep shadow UI) === */
    --ink-950: #050302;
    --ink-900: #0c0906;
    --ink-850: #12100c;
    --ink-800: #1a1611;
    --ink-700: #251f18;
    --ink-600: #33291f;
    --ink-500: #4a3d2e;
    --ink-400: #6d5c45;
    --ink-300: #9a866b;
    --ink-200: #c4b498;
    --ink-100: #e5d9bf;

    /* === STATE === */
    --win: #3fa075;
    --win-bright: #5fc091;
    --loss: #c2453a;
    --loss-bright: #e5675a;
    --fire: #ff7a2d;
    --fire-bright: #ffa34d;
    --fire-deep: #d94a0f;
    --cool: #4aa3d9;
    --purple: #8e6bc9;

    /* === BALL COLORS === */
    --ball-1: #e8b949;  /* yellow */
    --ball-2: #2a5dba;  /* blue */
    --ball-3: #c2453a;  /* red */
    --ball-4: #5a3e8a;  /* purple */
    --ball-5: #e08a2e;  /* orange */
    --ball-6: #2d7a56;  /* green */
    --ball-7: #7d2a2a;  /* maroon */
    --ball-8: #0a0a0a;  /* black */

    /* === TYPOGRAPHY === */
    --font-display: 'Cinzel', 'Playfair Display', Georgia, serif;
    --font-body: 'Inter Tight', 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    /* === RADIUS === */
    --r-xs: 3px;
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 24px;
    --r-full: 9999px;

    /* === SHADOWS === */
    --sh-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.3);
    --sh-md: 0 4px 10px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    --sh-lg: 0 14px 30px rgba(0,0,0,.55), 0 6px 12px rgba(0,0,0,.4);
    --sh-xl: 0 28px 60px rgba(0,0,0,.65), 0 12px 24px rgba(0,0,0,.5);
    --sh-inset: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4);
    --sh-gold: 0 0 0 1px var(--gold-700), 0 8px 20px rgba(201,154,46,.25), 0 2px 4px rgba(0,0,0,.4);
    --sh-gold-glow: 0 0 24px rgba(232,185,73,.35), 0 0 48px rgba(232,185,73,.15);

    /* === GRADIENTS === */
    --g-felt: radial-gradient(ellipse at 50% 40%, var(--felt-500) 0%, var(--felt-700) 55%, var(--felt-900) 100%);
    --g-leather: linear-gradient(145deg, var(--leather-600) 0%, var(--leather-800) 100%);
    --g-wood: linear-gradient(180deg, var(--wood-700) 0%, var(--wood-900) 100%);
    --g-gold: linear-gradient(180deg, var(--gold-300) 0%, var(--gold-500) 45%, var(--gold-700) 100%);
    --g-gold-shiny: linear-gradient(135deg, var(--gold-200) 0%, var(--gold-400) 30%, var(--gold-600) 60%, var(--gold-800) 100%);
    --g-panel: linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 100%);
    --g-panel-raised: linear-gradient(180deg, var(--ink-700) 0%, var(--ink-850) 100%);

    /* === TRANSITIONS === */
    --ease-out: cubic-bezier(.22,1,.36,1);
    --ease-in: cubic-bezier(.64,0,.78,0);
    --ease-inout: cubic-bezier(.65,.05,.36,1);
    --ease-bounce: cubic-bezier(.34,1.56,.64,1);
    --t-fast: 150ms;
    --t-med: 280ms;
    --t-slow: 500ms;
}

/* === BASE RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: var(--ink-950);
    color: var(--ink-100);
    font-family: var(--font-body);
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

button, input, select, textarea {
    font-family: inherit;
    color: inherit;
}

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

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.3); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gold-700), var(--gold-900));
    border-radius: var(--r-full);
    border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gold-500), var(--gold-700));
}

/* === UTILITY: GOLD TEXT === */
.gold-text {
    background: var(--g-gold-shiny);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.4));
}

/* === UTILITY: FELT TEXTURE (noise) === */
.felt-surface {
    background: var(--g-felt);
    position: relative;
}
.felt-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(0,0,0,.15) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,.2) 0%, transparent 50%);
    pointer-events: none;
}

/* === ANIMATIONS === */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes pulse-gold {
    0%, 100% { box-shadow: 0 0 0 0 rgba(232,185,73,.5); }
    50% { box-shadow: 0 0 0 12px rgba(232,185,73,0); }
}
@keyframes float-up {
    from { transform: translateY(8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes spin-slow {
    to { transform: rotate(360deg); }
}
@keyframes flame-flicker {
    0%, 100% { transform: scale(1) rotate(-2deg); opacity: .9; }
    50% { transform: scale(1.05) rotate(2deg); opacity: 1; }
}