/**
 * CSS Variables & Base Styles - Centralized theming values
 * Extracted from poker.css for maintainability
 */

/* ============ PERFORMANCE OPTIMIZATIONS ============ */
/* will-change only during active animation — avoids permanent GPU reservation */
.animating {
    will-change: transform, opacity;
}

.card, .player-box, .pot-display, .player-seat {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Reduce animation work for non-visible elements */
.hidden *, .initially-hidden * {
    animation: none !important;
    transition: none !important;
}

/* Initial hidden state - replaced inline style="display: none" */
.initially-hidden { display: none; }

/* Optimize scrolling performance */
.battle-log-content, .vh-tab-list, .bl-hands-list {
    will-change: scroll-position;
}

/* Hide all modals by default — prevents FOUC before lazy CSS loads */
.villains-modal, .villain-modal, .battle-log-modal,
.settings-modal, .hero-avatar-modal, .career-modal, .drill-import-modal,
.celebration-overlay, .replay-modal {
    display: none;
}

/* Contain layout for modals */
.villains-modal, .battle-log-modal, .game-over-modal, .settings-modal {
    contain: layout style paint;
}

/* ============ RESET ============ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============ CSS CUSTOM PROPERTIES ============ */
:root {
    /* ========== TYPOGRAPHY SCALE (Fluid) ========== */
    --font-size-2xs: clamp(0.625rem, 0.6rem + 0.1vw, 0.6875rem);    /* 10-11px */
    --font-size-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);    /* 11-12px */
    --font-size-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);      /* 12-13px */
    --font-size-base: clamp(0.8125rem, 0.75rem + 0.25vw, 0.875rem); /* 13-14px */
    --font-size-md: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);          /* 14-16px */
    --font-size-lg: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);          /* 16-18px */
    --font-size-xl: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);         /* 18-20px */
    --font-size-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);        /* 20-24px */
    --font-size-3xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);       /* 24-30px */

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.65;

    /* Letter spacing */
    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.1em;

    /* Font families */
    --font-family-base: 'Inter', sans-serif;
    --font-family-mono: 'Roboto Mono', monospace;
    --font-family-code: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
    --font-family-display: 'Oxanium', sans-serif;

    /* ========== PRIMARY COLORS ========== */
    /* Primary colors - teal/green theme */
    --accent: #4a9d7a;
    --accent-dark: #3a7d5a;
    --accent-light: #7fe0b4;
    --accent-border: rgba(74, 157, 122, 0.25);
    --accent-rgb: 74, 157, 122;

    /* RGB triplets for rgba() with variable alpha.
       Usage: rgba(var(--teal-rgb), 0.3) */
    --teal-rgb: 107, 196, 154;
    --gold-glow-rgb: 255, 215, 0;
    --profile-gold-rgb: 226, 185, 90;

    /* Chip colors */
    --chip-red: #c62828;
    --chip-blue: #1565c0;
    --chip-green: #2e7d32;

    /* Background colors - forest green theme */
    --bg-dark: #0a1a14;
    --bg-header: #0d2219;
    --bg-panel: rgba(17, 42, 31, 0.97);
    --bg-glass: rgba(17, 42, 31, 0.95);

    /* Text */
    --text-light: #e8e8ec;
    --text-muted: #b8d4c8;

    /* Text alpha scale (white on dark backgrounds) */
    --text-alpha-primary: rgba(255, 255, 255, 0.95);
    --text-alpha-secondary: rgba(255, 255, 255, 0.9);
    --text-alpha-emphasis: rgba(255, 255, 255, 0.8);
    --text-alpha-tertiary: rgba(255, 255, 255, 0.7);
    --text-alpha-muted: rgba(255, 255, 255, 0.65);
    --text-alpha-dim: rgba(255, 255, 255, 0.4);
    --text-alpha-faint: rgba(255, 255, 255, 0.3);

    /* White-alpha surface scale */
    --alpha-white-2: rgba(255, 255, 255, 0.02);
    --alpha-white-3: rgba(255, 255, 255, 0.03);
    --alpha-white-4: rgba(255, 255, 255, 0.04);
    --alpha-white-5: rgba(255, 255, 255, 0.05);
    --alpha-white-6: rgba(255, 255, 255, 0.06);
    --alpha-white-8: rgba(255, 255, 255, 0.08);
    --alpha-white-10: rgba(255, 255, 255, 0.1);
    --alpha-white-12: rgba(255, 255, 255, 0.12);
    --alpha-white-15: rgba(255, 255, 255, 0.15);
    --alpha-white-20: rgba(255, 255, 255, 0.2);
    --alpha-white-25: rgba(255, 255, 255, 0.25);

    /* Black-alpha overlay scale */
    --alpha-black-20: rgba(0, 0, 0, 0.2);
    --alpha-black-25: rgba(0, 0, 0, 0.25);
    --alpha-black-30: rgba(0, 0, 0, 0.3);
    --alpha-black-40: rgba(0, 0, 0, 0.4);
    --alpha-black-50: rgba(0, 0, 0, 0.5);
    --alpha-black-60: rgba(0, 0, 0, 0.6);
    --alpha-black-80: rgba(0, 0, 0, 0.8);

    /* Result colors */
    --color-win: #4caf50;
    --color-win-light: #66bb6a;
    --color-loss: #f44336;
    --color-loss-light: #ef5350;
    --color-tie: #ffd54f;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Borders - forest green */
    --border-subtle: rgba(26, 61, 45, 0.4);
    --border-light: rgba(26, 61, 45, 0.8);
    --border: #1a3d2d;

    /* ========== SHADOW SCALE ========== */
    --shadow-xs: 0 1px 2px rgba(0, 20, 10, 0.3);
    --shadow-sm: 0 2px 4px rgba(0, 20, 10, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 20, 10, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 20, 10, 0.5);
    --shadow-xl: 0 16px 48px rgba(0, 20, 10, 0.6);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-glow: 0 0 24px rgba(74, 157, 122, 0.25);

    /* ========== Z-INDEX LAYERS (Unified) ========== */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-overlay: 50;
    --z-modal: 100;
    --z-popover: 150;
    --z-toast: 200;
    --z-tooltip: 250;
    --z-max: 9999;

    /* Alpha v0.5 perspective system */
    --perspective-scale: 1;
    --table-rx: 52;
    --table-ry: 56;
    --table-cx: 50;
    --table-cy: 46;
    --seat-scale-far: 0.82;
    --seat-scale-near: 1.1;

    /* Z-index layers (Alpha v0.5 structure) */
    --z-seat-base: 5;
    --z-hud: 50;
    --z-bet-chips: 60;
    --z-flying-chips: 500;

    /* ========== SPACING SCALE (8px grid) ========== */
    --space-0: 0;
    --space-0-5: 2px;
    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-2-5: 10px;
    --space-3: 12px;
    --space-3-5: 14px;
    --space-4: 16px;
    --space-4-5: 18px;
    --space-5: 20px;
    --space-5-5: 22px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    /* Feature-local spacing aliases shared across Hero surfaces and detached modals */
    --hero-space-1: var(--space-2);
    --hero-space-2: var(--space-3-5);
    --hero-space-3: var(--space-5);
    --hero-space-4: var(--space-7);
    --hero-space-5: var(--space-9);
    --hero-space-6: var(--space-11);
    /* Semantic aliases (for backwards compatibility) */
    --space-xs: var(--space-1);
    --space-sm: var(--space-2);
    --space-md: var(--space-3);
    --space-lg: var(--space-4);
    --space-xl: var(--space-6);

    /* ========== ARENA POLISH TOKENS ========== */
    /* Chip/bet desaturation so amounts dominate over chip art */
    --chip-desaturation: saturate(0.8) brightness(0.92);

    /* Villain Hub - Alpha v0.5 Design System */
    --vh-tab-list-width: 260px;
    --vh-tab-gap: 20px;
    --vh-surface: rgba(10, 14, 26, 0.96);
    --vh-surface-strong: rgba(14, 20, 36, 0.96);
    --vh-surface-weak: rgba(8, 12, 22, 0.9);
    --vh-border: rgba(120, 160, 220, 0.14);
    --vh-border-strong: rgba(120, 190, 255, 0.28);
    --vh-glow: rgba(90, 210, 255, 0.12);
    --vh-accent: #5ad2ff;
    --vh-accent-strong: #8be6ff;
    --vh-accent-soft: rgba(90, 210, 255, 0.14);
    --vh-text: #f3f7ff;
    --vh-muted: rgba(180, 200, 235, 0.65);
    --vh-muted-strong: rgba(200, 215, 245, 0.8);

    /* Severity Colors - Alpha v0.5 Consistent System */
    --severity-low-bg: rgba(34, 197, 94, 0.15);
    --severity-low-border: rgba(34, 197, 94, 0.4);
    --severity-low-text: #22c55e;
    --severity-medium-bg: rgba(234, 179, 8, 0.15);
    --severity-medium-border: rgba(234, 179, 8, 0.4);
    --severity-medium-text: #eab308;
    --severity-high-bg: rgba(249, 115, 22, 0.15);
    --severity-high-border: rgba(249, 115, 22, 0.4);
    --severity-high-text: #f97316;
    --severity-critical-bg: rgba(239, 68, 68, 0.15);
    --severity-critical-border: rgba(239, 68, 68, 0.4);
    --severity-critical-text: #ef4444;

    /* ========== BORDER RADIUS SCALE ========== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;
    --radius-pill: 9999px;

    /* Panel tokens */
    --panel-border: var(--border-light);
    --panel-border-muted: var(--border-subtle);
    --panel-radius: var(--radius-lg);
    --panel-radius-compact: var(--radius-md);
    --panel-padding: var(--space-4);
    --panel-padding-compact: var(--space-3);
    --panel-title-size: var(--font-size-xs);
    --panel-title-weight: var(--font-weight-semibold);
    --panel-title-spacing: 1px;

    /* Modal tokens */
    --modal-border: var(--border-light);
    --modal-radius: var(--radius-xl);
    --modal-padding: var(--space-xl);
    --modal-title-size: var(--font-size-xl);
    --modal-title-weight: var(--font-weight-bold);
    --modal-backdrop: rgba(0, 0, 0, 0.85);
    --modal-backdrop-blur: blur(8px);

    /* Surface tokens — unified card/panel backgrounds */
    --surface-primary: rgba(10, 26, 20, 0.98);
    --surface-elevated: rgba(15, 30, 24, 0.98);
    --surface-overlay: rgba(0, 0, 0, 0.9);

    /* Badge tokens */
    --badge-padding: 2px 6px;
    --badge-radius: var(--radius-sm);
    --badge-font-size: 9px;
    --badge-font-weight: var(--font-weight-bold);
    --badge-letter-spacing: 0.05em;

    /* ========== BUTTON TOKENS ========== */
    --btn-padding-sm: 4px 8px;
    --btn-padding-md: 8px 16px;
    --btn-padding-lg: 14px 32px;
    --btn-radius: var(--radius-sm);
    --btn-transition: background var(--duration-normal) var(--ease-in-out), color var(--duration-normal) var(--ease-in-out), border-color var(--duration-normal) var(--ease-in-out), transform var(--duration-normal) var(--ease-in-out), opacity var(--duration-normal) var(--ease-in-out);
    --btn-hover-lift: translateY(-2px);
    --btn-hover-lift-sm: translateY(-1px);
    --btn-active-press: translateY(0) scale(0.98);
    --btn-disabled-bg: #1a1a24;
    --btn-disabled-opacity: 0.5;
    --btn-focus-outline: 2px solid var(--accent);
    --btn-focus-offset: 2px;

    /* ========== ADDITIONAL COLOR TOKENS ========== */
    --color-cyan: #00d4ff;
    --color-cyan-rgb: 0, 212, 255;
    --color-cyan-soft: rgba(0, 212, 255, 0.14);

    /* Overbet / hazard orange */
    --color-overbet: #ff8c32;
    --color-overbet-rgb: 255, 140, 50;

    /* ── Replay Theater ── */
    /* Cinematic dark base with forest-green tint for brand alignment */
    --replay-bg: #0d1a16;
    --replay-bg-gradient: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(15, 35, 28, 0.97), #0d1a16);
    --replay-surface: rgba(15, 35, 28, 0.97);
    --replay-surface-strong: rgba(18, 42, 33, 0.98);
    --replay-accent: var(--accent);
    --replay-accent-rgb: var(--accent-rgb);
    --replay-accent-glow-rgb: 74, 157, 122;
    --replay-gold: #ffd966;
    --replay-gold-rgb: 255, 217, 102;
    --replay-hero-accent: var(--color-hero-green);
    --replay-villain-accent: var(--color-villain-red);
    --replay-panel-border: rgba(var(--accent-rgb), 0.15);
    --replay-panel-border-strong: rgba(var(--accent-rgb), 0.25);
    /* Replay card dimensions — bumped minimums for modal readability */
    --replay-card-board-w: clamp(50px, 4.5vw, 64px);
    --replay-card-board-h: clamp(70px, 6.3vw, 90px);
    --replay-card-hero-w: clamp(48px, 4.2vw, 60px);
    --replay-card-hero-h: clamp(67px, 5.9vw, 84px);
    --replay-card-opp-w: clamp(36px, 3vw, 46px);
    --replay-card-opp-h: clamp(50px, 4.2vw, 64px);
    --replay-card-base-w: clamp(42px, 4vw, 54px);
    --replay-card-base-h: clamp(59px, 5.6vw, 76px);

    /* Replay overlay accent blue (legacy — prefer --replay-accent) */
    --color-replay-blue: #64b4ff;
    --color-replay-blue-rgb: 100, 180, 255;

    /* Hero green / Villain red (result colors in replays) */
    --color-hero-green: #69f0ae;
    --color-hero-green-rgb: 105, 240, 174;
    --color-villain-red: #ff8a80;
    --color-villain-red-rgb: 255, 138, 128;

    /* Accent-light RGB triplet (reward shop, card glows) */
    --accent-light-rgb: 127, 224, 180;
    --color-gold-ui: #f2d07a;
    --color-gold-ui-soft: rgba(242, 208, 122, 0.3);

    /* Feedback colors (winner/loser text, stat values) */
    --color-positive: #4ade80;
    --color-positive-rgb: 74, 222, 128;
    --color-negative: #f87171;
    --color-negative-rgb: 248, 113, 113;
    --color-card-red: #d32f2f;
    --color-danger-rgb: 239, 68, 68;

    /* Signal system (exploit indicators) */
    --signal-amber: #f59e0b;
    --signal-amber-rgb: 245, 158, 11;
    --signal-blue: #3b82f6;
    --signal-blue-rgb: 59, 130, 246;

    /* Villain type palette */
    --vtype-lp-rgb: 255, 150, 100;
    --vtype-lag-rgb: 255, 100, 100;
    --vtype-tp-rgb: 100, 180, 255;
    --vtype-shark-rgb: 46, 204, 113;
    --vtype-mystery-rgb: 150, 100, 200;
    --vtype-lp: #ffb88c;
    --vtype-lag: #ff8888;
    --vtype-tp: #88ccff;
    --vtype-tag: #8fe0b4;
    --vtype-shark: #6bd89c;
    --vtype-mystery: #b8a8d8;

    /* Hero gold theme */
    --hero-gold-light: #f5e7c0;
    --hero-gold-dark: #cfa15c;

    /* Confidence levels */
    --confidence-none: #6b7280;
    --confidence-low: #f97316;
    --confidence-medium: #eab308;
    --confidence-high: #4ade80;

    /* Villain hub scrollbar accent */
    --vh-scroll-rgb: 90, 210, 255;

    /* Active turn / nameplate gold */
    --turn-gold-rgb: 255, 193, 7;
    --hero-nameplate-gold-rgb: 233, 196, 106;

    /* ========== SCROLLBAR TOKENS ========== */
    --scrollbar-width: 5px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);

    /* ========== BLUR SCALE ========== */
    /* Usage: backdrop-filter: blur(var(--blur-md)); */
    /* Composable with saturate(): blur(var(--blur-xl)) saturate(1.05) */
    --blur-xs: 2px;
    --blur-sm: 4px;
    --blur-md: 8px;
    --blur-lg: 12px;
    --blur-xl: 16px;
    --blur-2xl: 20px;

    /* ========== TEXT SHADOW SCALE ========== */
    --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.85);
    --text-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.7);

    /* ========== EASING FUNCTIONS ========== */
    --ease-linear: linear;
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);      /* Fast deceleration */
    --ease-out-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* Standard smooth */
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);   /* Elastic/bouncy */

    /* ========== DURATION SCALE ========== */
    --duration-instant: 50ms;
    --duration-fast: 100ms;
    --duration-quick: 150ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --duration-slower: 500ms;

    /* Transition shortcuts (duration + easing) */
    --transition-fast: var(--duration-fast) var(--ease-in-out);
    --transition-quick: var(--duration-quick) var(--ease-in-out);
    --transition-normal: var(--duration-normal) var(--ease-in-out);
    --transition-slow: var(--duration-slow) var(--ease-in-out);

    /* Animation timing - centralized for consistency */
    --anim-fold-fast: 150ms;
    --anim-fold-normal: 500ms;
    /* Tank dot cycle vars removed - now JS-driven by TankTimerManager */

    /* Responsive fluid sizing (Alpha v0.5 style) */
    --table-max-width: clamp(450px, 70vw, 680px);
    --card-back-image: url("/static/assets/card-backs/default_cardback.webp");
    --card-width: clamp(40px, 5vw, 60px);
    --card-height: clamp(56px, 7vw, 84px);
    --seat-font: clamp(10px, 1.2vw, 13px);
    --felt-height: clamp(320px, 50vw, 500px);

    /* ========== MOBILE BREAKPOINTS ========== */
    /* Reference values for media queries (CSS custom properties can't be used in @media) */
    /* --breakpoint-phone: 480px */
    /* --breakpoint-tablet: 768px */
    /* --breakpoint-desktop: 1024px */

    /* ========== MOBILE-SPECIFIC SIZING ========== */
    /* Touch target minimum: 48px (above 44px guideline) */
    --touch-target-min: 48px;

    /* Mobile action bar */
    --action-bar-height: 100px;
    --action-bar-padding: 12px;

    /* Mobile card sizing - larger for visibility */
    --card-width-mobile: 52px;
    --card-height-mobile: 72px;
    --card-width-mobile-hero: 60px;
    --card-height-mobile-hero: 84px;

    /* Mobile bet slider */
    --slider-track-height-mobile: 12px;
    --slider-thumb-size-mobile: 28px;

    /* Mobile portrait sizes */
    --portrait-size-mobile-hero: 64px;
    --portrait-size-mobile-villain: 48px;
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font-family-base);
    background: radial-gradient(circle at top, #1a3d2d 0%, #0a1a14 55%) fixed;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

/* ============ HEADING SYSTEM ============ */
/* Base heading styles — fluid sizing from token scale.
   Component-scoped rules (e.g. .bl-title h2) override these as needed. */
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    line-height: 1.2;
    color: var(--text-light);
}

h1 {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.01em;
}

h4 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

h5 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

h6 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-alpha-tertiary);
}

/* ============ BASE INTERACTIONS ============ */
/* Consistent micro-interactions for interactive elements.
   Component rules can override, but these set the baseline. */

/* Universal interactive transition */
button, [role="button"], .clickable,
a, input, select, textarea {
    transition: var(--btn-transition);
}

/* Focus-visible ring — keyboard nav only, never on mouse click */
button:focus-visible, [role="button"]:focus-visible,
a:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: var(--btn-focus-outline);
    outline-offset: var(--btn-focus-offset);
}

/* Suppress default outline for mouse users */
button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
    outline: none;
}

/* App Container - Main application wrapper (hidden until authenticated) */
.app-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    opacity: 0;                          /* Hidden until deferred CSS loads */
    transition: opacity 0.15s ease-out;
}
.app-container.ready {
    opacity: 1;
}

/* Pressure overlay → extracted to arena/pressure-overlay.css */
/* Accessibility → extracted to base/accessibility.css */