@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  --font-family-sans: Geist, "Geist Fallback", sans-serif;
    /* Border Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-2xl: 24px;
    --radius-round: 999px;
    /* Primary Colors */
    --filter-primary: brightness(0) saturate(100%) invert(62%) sepia(69%) saturate(542%) hue-rotate(176deg) brightness(99%) contrast(87%);
    --color-primary: #38AAED;
    --color-primary-rgb: 56, 170, 237;
    --color-primary-light: #60C0F5;
    --color-primary-lighter: #A8DEFA;
    --color-primary-dark: #1E88CC;
    --color-primary-alpha: rgba(56, 170, 237, 0.8);
    --color-primary-alpha-light: rgba(56, 170, 237, 0.5);
    --color-primary-alpha-lighter: rgba(56, 170, 237, 0.15);

    /* Tip Accent Colors */
    --color-tip-accent: #38AAED;
    --color-tip-accent-rgb: 56, 170, 237;
    --color-tip-accent-hover: #60C0F5;
    --color-tip-accent-hover-rgb: 96, 192, 245;
    --color-tip-accent-active: #7DCDF7;
    --color-tip-accent-active-rgb: 125, 205, 247;
    --color-tip-accent-surface: rgba(56, 170, 237, 0.18);
    --color-tip-accent-surface-hover: rgba(96, 192, 245, 0.26);
    --color-tip-accent-surface-active: rgba(125, 205, 247, 0.32);
    --color-tip-accent-border: rgba(96, 192, 245, 0.42);
    --color-tip-accent-border-strong: rgba(125, 205, 247, 0.56);
    --color-tip-accent-text: #CEEBFD;
    --color-tip-accent-text-light: #0D5A9E;
    --color-tip-accent-outline: rgba(96, 192, 245, 0.36);

    /* Chat Tip Message Colors
       ──────────────────────────────────────────────────
       Static Tip  → mint-emerald  (clean, generous)
       Dice Roll   → fiery coral   (thrill of the throw)
       Uniform     → warm amber    (golden fairness)
       Pareto      → royal indigo  (rare power-law jackpot)
       Slots       → hot fuchsia   (neon Vegas energy)
       Plinko      → electric cyan (cascading bounce)
       ────────────────────────────────────────────────── */

    --color-chat-tip-static-start: #60C0F5;
    --color-chat-tip-static-mid: #38AAED;
    --color-chat-tip-static-end: #1E88CC;
    --color-chat-tip-static-shadow-rgb: 56, 170, 237;

    --color-chat-tip-roll-start: #FF8070;
    --color-chat-tip-roll-mid: #E85C50;
    --color-chat-tip-roll-end: #D04438;
    --color-chat-tip-roll-shadow-rgb: 232, 92, 80;

    --color-chat-tip-uniform-start: #FFAA58;
    --color-chat-tip-uniform-mid: #E89040;
    --color-chat-tip-uniform-end: #D07828;
    --color-chat-tip-uniform-shadow-rgb: 232, 144, 64;

    --color-chat-tip-pareto-start: #B88CE8;
    --color-chat-tip-pareto-mid: #9C68D4;
    --color-chat-tip-pareto-end: #844CC0;
    --color-chat-tip-pareto-shadow-rgb: 156, 104, 212;

    --color-chat-tip-slots-start: #F068D8;
    --color-chat-tip-slots-mid: #D848BE;
    --color-chat-tip-slots-end: #C030A6;
    --color-chat-tip-slots-shadow-rgb: 216, 72, 190;

    --color-chat-tip-plinko-start: #48E0E0;
    --color-chat-tip-plinko-mid: #30C4CC;
    --color-chat-tip-plinko-end: #20AAB8;
    --color-chat-tip-plinko-shadow-rgb: 48, 196, 204;

    --color-chat-tip-small-start-alpha: 0.10;
    --color-chat-tip-small-end-alpha: 0.16;
    --color-chat-tip-small-border-alpha: 0.20;
    --color-chat-tip-small-shadow-alpha: 0.08;

    --color-chat-tip-shadow-alpha-default: 0.22;
    --color-chat-tip-shadow-alpha-large: 0.28;
    --color-chat-tip-shadow-alpha-grand: 0.32;
    --color-chat-tip-shadow-alpha-pulse-rest: 0.18;
    --color-chat-tip-shadow-alpha-pulse-peak: 0.30;
    --color-chat-tip-shimmer: rgba(255, 255, 255, 0.10);
    --color-chat-tip-grand-highlight: rgba(255, 255, 255, 0.06);
    
    /* Secondary Colors */
    --color-secondary: #F5A623;
    --color-secondary-light: #F7BC52;
    --color-secondary-dark: #D4861A;
  
    /* Accent Colors */
    --color-accent: #ff0887;
    --color-accent-secondary: #930179;
    --color-accent-warning: #a22235;
    --color-accent-success: #1DA1F2;

    /* Neon Pink (roll slider highlight) */
    --color-neon-pink: rgba(255, 0, 200, 0.85);
    --color-neon-pink-glow: rgba(255, 0, 200, 0.5);
  
    /* Neutral Colors */
    --color-black: #000000;
    --color-white: #ffffff;
    --color-grey-light: #e0e0e0;
    --color-grey: #808080;
    --color-grey-dark: #4d4d4d;

    /* Contrast buttons (neutral primary actions, e.g. auth Join/submit).
       A solid near-white plate with ink text in dark mode; inverts to a
       near-black plate with white text in light mode. -text-dim is the
       resting tone the busy shimmer sweeps over. */
    --color-btn-contrast-bg: #f2f3f5;
    --color-btn-contrast-bg-hover: #ffffff;
    --color-btn-contrast-text: #0b0c0e;
    --color-btn-contrast-text-dim: rgba(11, 12, 14, 0.45);

    /* Background Colors (Dark Mode) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #161616;
    --color-bg-tertiary: #222222;
    --color-bg-elevated: #242424;
    
    /* Text Colors (Dark Mode) */
    --color-text-primary: rgba(255, 255, 255, .85);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-tertiary: rgba(255, 255, 255, 0.85);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-subtle: rgba(255, 255, 255, 0.4);
    
    /* UI Elements (Dark Mode) */
    --color-ui-border: rgba(255, 255, 255, 0.1);
    --color-ui-hover: rgba(255, 255, 255, 0.1);
    --color-ui-active: rgba(255, 255, 255, 0.15);
    --color-ui-disabled: rgba(255, 255, 255, 0.05);
    
    /* Overlays (Dark Mode) */
    --color-overlay-light: rgba(0, 0, 0, 0.2);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-overlay-heavy: rgba(0, 0, 0, 0.7);
    --color-overlay-opaque: rgba(0, 0, 0, 0.8);
    
    /* Status Colors */
    --color-error: #ff4444;
    --color-error-dark: #cc0000;
    --color-warning: #FFAA00;
    --color-success: #4CAF50;
    --color-info: #2196F3;
  }

  /* ──────────────────────────────────────────────────────────────
     Site accent themes
     Applied via data-accent on <html> (see theme-service.js).
     Each theme re-maps the full primary ramp, the tip-accent set,
     the static-tip chat gradient, the secondary color, and the
     icon-tint filter so every component that uses the tokens
     follows the selected theme. The default (no attribute) is the
     Ocean blue palette defined in :root above.
     ────────────────────────────────────────────────────────────── */

  /* Blush — soft light pink */
  html[data-accent="blush"] {
    --filter-primary: brightness(0) saturate(100%) invert(85%) sepia(26%) saturate(6624%) hue-rotate(292deg) brightness(100%) contrast(104%);
    --color-primary: #FF7EB6;
    --color-primary-rgb: 255, 126, 182;
    --color-primary-light: #FF9EC8;
    --color-primary-lighter: #FFC7DF;
    --color-primary-dark: #F54792;
    --color-primary-alpha: rgba(255, 126, 182, 0.8);
    --color-primary-alpha-light: rgba(255, 126, 182, 0.5);
    --color-primary-alpha-lighter: rgba(255, 126, 182, 0.15);

    --color-tip-accent: #FF7EB6;
    --color-tip-accent-rgb: 255, 126, 182;
    --color-tip-accent-hover: #FF9EC8;
    --color-tip-accent-hover-rgb: 255, 158, 200;
    --color-tip-accent-active: #FFB3D4;
    --color-tip-accent-active-rgb: 255, 179, 212;
    --color-tip-accent-surface: rgba(255, 126, 182, 0.18);
    --color-tip-accent-surface-hover: rgba(255, 158, 200, 0.26);
    --color-tip-accent-surface-active: rgba(255, 179, 212, 0.32);
    --color-tip-accent-border: rgba(255, 158, 200, 0.42);
    --color-tip-accent-border-strong: rgba(255, 179, 212, 0.56);
    --color-tip-accent-text: #FFDBEB;
    --color-tip-accent-text-light: #9C1650;
    --color-tip-accent-outline: rgba(255, 158, 200, 0.36);

    --color-chat-tip-static-start: #FF9EC8;
    --color-chat-tip-static-mid: #FF7EB6;
    --color-chat-tip-static-end: #F54792;
    --color-chat-tip-static-shadow-rgb: 255, 126, 182;

    --color-secondary: #C084FC;
    --color-secondary-light: #D8B4FE;
    --color-secondary-dark: #9333EA;
  }

  /* Goon — hot neon pink */
  html[data-accent="goon"] {
    --filter-primary: brightness(0) saturate(100%) invert(45%) sepia(72%) saturate(4694%) hue-rotate(309deg) brightness(109%) contrast(103%);
    --color-primary: #FF3DA6;
    --color-primary-rgb: 255, 61, 166;
    --color-primary-light: #FF66B8;
    --color-primary-lighter: #FFADD9;
    --color-primary-dark: #FF0088;
    --color-primary-alpha: rgba(255, 61, 166, 0.8);
    --color-primary-alpha-light: rgba(255, 61, 166, 0.5);
    --color-primary-alpha-lighter: rgba(255, 61, 166, 0.15);

    --color-tip-accent: #FF3DA6;
    --color-tip-accent-rgb: 255, 61, 166;
    --color-tip-accent-hover: #FF66B8;
    --color-tip-accent-hover-rgb: 255, 102, 184;
    --color-tip-accent-active: #FF8AC8;
    --color-tip-accent-active-rgb: 255, 138, 200;
    --color-tip-accent-surface: rgba(255, 61, 166, 0.18);
    --color-tip-accent-surface-hover: rgba(255, 102, 184, 0.26);
    --color-tip-accent-surface-active: rgba(255, 138, 200, 0.32);
    --color-tip-accent-border: rgba(255, 102, 184, 0.42);
    --color-tip-accent-border-strong: rgba(255, 138, 200, 0.56);
    --color-tip-accent-text: #FFD6EC;
    --color-tip-accent-text-light: #A00859;
    --color-tip-accent-outline: rgba(255, 102, 184, 0.36);

    --color-chat-tip-static-start: #FF66B8;
    --color-chat-tip-static-mid: #FF3DA6;
    --color-chat-tip-static-end: #FF0088;
    --color-chat-tip-static-shadow-rgb: 255, 61, 166;

    --color-secondary: #22D3EE;
    --color-secondary-light: #67E8F9;
    --color-secondary-dark: #0891B2;
  }

  /* Emerald — fresh green */
  html[data-accent="emerald"] {
    --filter-primary: brightness(0) saturate(100%) invert(69%) sepia(27%) saturate(5861%) hue-rotate(94deg) brightness(101%) contrast(73%);
    --color-primary: #22C55E;
    --color-primary-rgb: 34, 197, 94;
    --color-primary-light: #42D778;
    --color-primary-lighter: #99E6B5;
    --color-primary-dark: #169C47;
    --color-primary-alpha: rgba(34, 197, 94, 0.8);
    --color-primary-alpha-light: rgba(34, 197, 94, 0.5);
    --color-primary-alpha-lighter: rgba(34, 197, 94, 0.15);

    --color-tip-accent: #22C55E;
    --color-tip-accent-rgb: 34, 197, 94;
    --color-tip-accent-hover: #42D778;
    --color-tip-accent-hover-rgb: 66, 215, 120;
    --color-tip-accent-active: #6EDD97;
    --color-tip-accent-active-rgb: 110, 221, 151;
    --color-tip-accent-surface: rgba(34, 197, 94, 0.18);
    --color-tip-accent-surface-hover: rgba(66, 215, 120, 0.26);
    --color-tip-accent-surface-active: rgba(110, 221, 151, 0.32);
    --color-tip-accent-border: rgba(66, 215, 120, 0.42);
    --color-tip-accent-border-strong: rgba(110, 221, 151, 0.56);
    --color-tip-accent-text: #D7F4E2;
    --color-tip-accent-text-light: #0B652C;
    --color-tip-accent-outline: rgba(66, 215, 120, 0.36);

    --color-chat-tip-static-start: #42D778;
    --color-chat-tip-static-mid: #22C55E;
    --color-chat-tip-static-end: #169C47;
    --color-chat-tip-static-shadow-rgb: 34, 197, 94;

    --color-secondary: #EAB308;
    --color-secondary-light: #FACC15;
    --color-secondary-dark: #CA8A04;
  }

  /* Crimson — bold red */
  html[data-accent="crimson"] {
    --filter-primary: brightness(0) saturate(100%) invert(55%) sepia(70%) saturate(4107%) hue-rotate(327deg) brightness(88%) contrast(115%);
    --color-primary: #EF4444;
    --color-primary-rgb: 239, 68, 68;
    --color-primary-light: #F37272;
    --color-primary-lighter: #F8B5B5;
    --color-primary-dark: #DC2626;
    --color-primary-alpha: rgba(239, 68, 68, 0.8);
    --color-primary-alpha-light: rgba(239, 68, 68, 0.5);
    --color-primary-alpha-lighter: rgba(239, 68, 68, 0.15);

    --color-tip-accent: #EF4444;
    --color-tip-accent-rgb: 239, 68, 68;
    --color-tip-accent-hover: #F37272;
    --color-tip-accent-hover-rgb: 243, 114, 114;
    --color-tip-accent-active: #F69393;
    --color-tip-accent-active-rgb: 246, 147, 147;
    --color-tip-accent-surface: rgba(239, 68, 68, 0.18);
    --color-tip-accent-surface-hover: rgba(243, 114, 114, 0.26);
    --color-tip-accent-surface-active: rgba(246, 147, 147, 0.32);
    --color-tip-accent-border: rgba(243, 114, 114, 0.42);
    --color-tip-accent-border-strong: rgba(246, 147, 147, 0.56);
    --color-tip-accent-text: #FCDEDE;
    --color-tip-accent-text-light: #991B1B;
    --color-tip-accent-outline: rgba(243, 114, 114, 0.36);

    --color-chat-tip-static-start: #F37272;
    --color-chat-tip-static-mid: #EF4444;
    --color-chat-tip-static-end: #DC2626;
    --color-chat-tip-static-shadow-rgb: 239, 68, 68;

    --color-secondary: #F97316;
    --color-secondary-light: #FB923C;
    --color-secondary-dark: #EA580C;
  }

  /* Violet — electric purple */
  html[data-accent="violet"] {
    --filter-primary: brightness(0) saturate(100%) invert(38%) sepia(57%) saturate(1002%) hue-rotate(235deg) brightness(102%) contrast(105%);
    --color-primary: #A855F7;
    --color-primary-rgb: 168, 85, 247;
    --color-primary-light: #B87BF9;
    --color-primary-lighter: #D8B7FA;
    --color-primary-dark: #9333EA;
    --color-primary-alpha: rgba(168, 85, 247, 0.8);
    --color-primary-alpha-light: rgba(168, 85, 247, 0.5);
    --color-primary-alpha-lighter: rgba(168, 85, 247, 0.15);

    --color-tip-accent: #A855F7;
    --color-tip-accent-rgb: 168, 85, 247;
    --color-tip-accent-hover: #B87BF9;
    --color-tip-accent-hover-rgb: 184, 123, 249;
    --color-tip-accent-active: #C899FA;
    --color-tip-accent-active-rgb: 200, 153, 250;
    --color-tip-accent-surface: rgba(168, 85, 247, 0.18);
    --color-tip-accent-surface-hover: rgba(184, 123, 249, 0.26);
    --color-tip-accent-surface-active: rgba(200, 153, 250, 0.32);
    --color-tip-accent-border: rgba(184, 123, 249, 0.42);
    --color-tip-accent-border-strong: rgba(200, 153, 250, 0.56);
    --color-tip-accent-text: #EDDDFD;
    --color-tip-accent-text-light: #6B21A8;
    --color-tip-accent-outline: rgba(184, 123, 249, 0.36);

    --color-chat-tip-static-start: #B87BF9;
    --color-chat-tip-static-mid: #A855F7;
    --color-chat-tip-static-end: #9333EA;
    --color-chat-tip-static-shadow-rgb: 168, 85, 247;

    --color-secondary: #EC4899;
    --color-secondary-light: #F472B6;
    --color-secondary-dark: #DB2777;
  }

  html {
    font-family: var(--font-family-sans);
    /* Smooth iOS momentum scrolling on legacy WebKit; modern Safari
       grants this for free but old iOS still respects the prefix. */
    -webkit-overflow-scrolling: touch;
    /* Allow native pan/pinch heuristics page-wide and skip the legacy
       300 ms tap-delay. Children that need stricter behaviour (the
       feed scroller pages on touch, drag handles, etc.) override this
       on themselves — touch-action does not inherit but each painted
       element falls back to the value computed for itself, and the
       browser walks up ancestors to find a stricter value when a
       gesture begins. */
    touch-action: manipulation;
  }

  body {
    font-family: inherit !important;
    -webkit-overflow-scrolling: touch;
    /* Prevent horizontal rubber-band on phones (which on iOS can swipe
       back through history) without disabling the vertical bounce that
       gives scroll its tactile feel. */
    overscroll-behavior-x: contain;
  }

  /* Skip the legacy 300 ms tap-delay on common interactive controls
     without forbidding scroll/pinch elsewhere. Page panning still
     starts immediately on these elements. */
  button,
  a,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  label,
  summary {
    touch-action: manipulation;
  }

  button,
  input,
  select,
  textarea {
    font-family: inherit;
  }
  
  /* Light mode overrides */
  @media (prefers-color-scheme: light) {
    :root {
      /* Contrast buttons invert: near-black plate, white text */
      --color-btn-contrast-bg: #131417;
      --color-btn-contrast-bg-hover: #26282d;
      --color-btn-contrast-text: #ffffff;
      --color-btn-contrast-text-dim: rgba(255, 255, 255, 0.5);

      /* Background Colors (Light Mode) */
      --color-bg-primary: #f8f9fa;
      --color-bg-secondary: #ffffff;
      --color-bg-tertiary: #f1f3f5;
      --color-bg-elevated: #e9ecef;
      
      /* Text Colors (Light Mode) */
      --color-text-primary: rgba(0, 0, 0, 0.9);
      --color-text-secondary: rgba(0, 0, 0, 0.75);
      --color-text-tertiary: rgba(0, 0, 0, 0.6);
      --color-text-disabled: rgba(0, 0, 0, 0.4);
      --color-text-subtle: rgba(0, 0, 0, 0.3);
      
      /* UI Elements (Light Mode) */
      --color-ui-border: rgba(0, 0, 0, 0.1);
      --color-ui-hover: rgba(0, 0, 0, 0.05);
      --color-ui-active: rgba(0, 0, 0, 0.1);
      --color-ui-disabled: rgba(0, 0, 0, 0.03);
      
      /* Overlays (Light Mode) */
      --color-overlay-light: rgba(255, 255, 255, 0.5);
      --color-overlay-medium: rgba(255, 255, 255, 0.7);
      --color-overlay-heavy: rgba(255, 255, 255, 0.8);
      --color-overlay-opaque: rgba(255, 255, 255, 0.9);
    }
  }
  
  /* Manual dark mode class for forced dark mode regardless of system setting */
  .dark-mode {
    --svg-filter: invert(100%) brightness(100%);
    /* Contrast buttons: near-white plate, ink text */
    --color-btn-contrast-bg: #f2f3f5;
    --color-btn-contrast-bg-hover: #ffffff;
    --color-btn-contrast-text: #0b0c0e;
    --color-btn-contrast-text-dim: rgba(11, 12, 14, 0.45);
    /* Background Colors (Dark Mode) */
    --color-bg-primary: #000000;
    --color-bg-secondary: #161616;
    --color-bg-tertiary: #222222;
    --color-bg-elevated: #242424;
    
    /* Text Colors (Dark Mode) */
    --color-text-primary: rgba(255, 255, 255, 0.85);
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    --color-text-tertiary: rgba(255, 255, 255, 0.85);
    --color-text-disabled: rgba(255, 255, 255, 0.4);
    --color-text-subtle: rgba(255, 255, 255, 0.4);
    
    /* UI Elements (Dark Mode) */
    --color-ui-border: rgba(255, 255, 255, 0.1);
    --color-ui-hover: rgba(255, 255, 255, 0.1);
    --color-ui-active: rgba(255, 255, 255, 0.15);
    --color-ui-disabled: rgba(255, 255, 255, 0.05);
    
    /* Overlays (Dark Mode) */
    --color-overlay-light: rgba(0, 0, 0, 0.2);
    --color-overlay-medium: rgba(0, 0, 0, 0.5);
    --color-overlay-heavy: rgba(0, 0, 0, 0.7);
    --color-overlay-opaque: rgba(0, 0, 0, 0.8);
  }
  
  /* Manual light mode class for forced light mode regardless of system setting */
  .light-mode {
    --svg-filter: none;
    /* Contrast buttons invert: near-black plate, white text */
    --color-btn-contrast-bg: #131417;
    --color-btn-contrast-bg-hover: #26282d;
    --color-btn-contrast-text: #ffffff;
    --color-btn-contrast-text-dim: rgba(255, 255, 255, 0.5);
    /* Background Colors (Light Mode) */
    --color-bg-primary: #f8f9fa;
    --color-bg-secondary: #ffffff;
    --color-bg-tertiary: #f1f3f5;
    --color-bg-elevated: #e9ecef;
    
    /* Text Colors (Light Mode) */
    --color-text-primary: rgba(0, 0, 0, 0.9);
    --color-text-secondary: rgba(0, 0, 0, 0.75);
    --color-text-tertiary: rgba(0, 0, 0, 0.6);
    --color-text-disabled: rgba(0, 0, 0, 0.4);
    --color-text-subtle: rgba(0, 0, 0, 0.3);
    
    /* UI Elements (Light Mode) */
    --color-ui-border: rgba(0, 0, 0, 0.1);
    --color-ui-hover: rgba(0, 0, 0, 0.05);
    --color-ui-active: rgba(0, 0, 0, 0.1);
    --color-ui-disabled: rgba(0, 0, 0, 0.03);
    
    /* Overlays (Light Mode) */
    --color-overlay-light: rgba(255, 255, 255, 0.5);
    --color-overlay-medium: rgba(255, 255, 255, 0.7);
    --color-overlay-heavy: rgba(255, 255, 255, 0.8);
    --color-overlay-opaque: rgba(255, 255, 255, 0.9);
  }