@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
/*!
 * ⚠️  AUTO-GENERATED FILE — DO NOT EDIT public/css/custom.css DIRECTLY.
 * This stylesheet is compiled from public/styles/_index.scss and its partials.
 * Any manual edits will be overwritten by the `Watch CSS` workflow on the next save.
 * To change styles, edit the SCSS partial in public/styles/ and let sass --watch recompile.
 */
:root {
  --color-white: #fff;
  --color-white-full: #ffffff;
  --color-black: #000;
  --color-black-50: #00000050;
  --text-primary: #f4f8ff;
  --text-secondary: #e2e8f0;
  --text-muted-light: #c8d0dc;
  --text-grey: rgba(228, 236, 255, 0.65);
  --text-subdued: #adadad;
  --text-bright: #f8fbff;
  --text-soft-blue: #e7f0ff;
  --text-ice: #e4ecff;
  --text-frosty: #f0f4ff;
  --text-cloud: #dce8f7;
  --color-primary: #0075ff;
  --color-primary-hover: #0066dd;
  --color-primary-dark: #0057bb;
  --color-primary-deeper: #004a9e;
  --color-primary-alt: #0063d9;
  --color-official: #1d87ff;
  --color-primary-bright: #0a8dff;
  --color-primary-link: #1481ff;
  --color-primary-vivid: #0080ff;
  --color-primary-border: #005ecf;
  --color-primary-border-alt: #005fcc;
  --color-primary-tab: #0670cc;
  --color-primary-tab-active: #0b7fe0;
  --color-primary-sky: #00a3ff;
  --color-blue-300: #7ba7f0;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-light: #6bb5ff;
  --color-blue-sky: #9ac7ff;
  --color-blue-pale: #a5c3f7;
  --color-blue-soft: #93bbfc;
  --color-blue-mid: #5b8dee;
  --color-blue-link: #3d9aff;
  --color-blue-accent: #4da3ff;
  --color-blue-glow: #7fb3ff;
  --color-indigo-600: #4f46e5;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-success: #00e701;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-material: #4caf50;
  --color-green-material-light: #66bb6a;
  --color-emerald-400: #34d399;
  --color-emerald-300: #6ee7b7;
  --color-green-accent: #28c76f;
  --color-green-700: #0f7a38;
  --color-green-800: #0b6630;
  --color-green-900: #0a5c2c;
  --color-green-bright: #129244;
  --color-red-300: #fca5a5;
  --color-red-400: #f87171;
  --color-red-500: #ef4444;
  --color-red-600: #dc2626;
  --color-red-bright: #ff4444;
  --color-error: #ea5455;
  --color-error-alt: #e74c4c;
  --color-red-glow: #ff6b7a;
  --color-red-vivid: #ff2d2d;
  --color-red-dark: #8f1818;
  --color-red-700: #a91d1d;
  --color-red-800: #bf2424;
  --color-red-900: #8b1a1a;
  --color-red-hot: #ff4646;
  --color-red-deep: #5c1a1a;
  --color-red-darker: #2a0a0a;
  --color-red-darkest: #110505;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-yellow-500: #eab308;
  --color-gold: #ffd700;
  --color-gold-light: #ffd93d;
  --color-gold-medium: #c47f00;
  --color-gold-dark: #9a6400;
  --color-gold-hover: #d48f10;
  --color-gold-active: #a86d00;
  --color-gold-gradient-start: #f6e27a;
  --color-gold-gradient-mid: #cb9b51;
  --color-gold-gradient-end: #8a6914;
  --color-bronze: #cd7f32;
  --color-orange: #ffa726;
  --color-orange-warm: #ffaa32;
  --color-orange-vivid: #ff6a00;
  --color-orange-amber: #e8930c;
  --color-orange-soft: #ff9f43;
  --color-orange-btc: #f7931a;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #7c3aed;
  --color-indigo-300: #a5b4fc;
  --color-indigo-400: #818cf8;
  --color-indigo-500: #6366f1;
  --color-violet-400: #a78bfa;
  --color-pink-400: #f472b6;
  --color-discord: #5865f2;
  --color-google: #ea4335;
  --color-slate-300: #9ca3af;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-muted: #5a6577;
  --color-gray-dim: #8b95a8;
  --color-gray-subtle: #7a8599;
  --color-gray-dark: #3d4654;
  --color-gray-steel: #5b7d95;
  --color-gray-card: #4a5568;
  --bg-html: #070911;
  --bg-body: #192636;
  --bg-body-mobile: #213247;
  --bg-dark: #0f212e;
  --bg-modal: #1a2c3d;
  --bg-modal-alt: #213c55;
  --bg-elevated: #243345;
  --bg-card: #0d1117;
  --bg-input: #0f1e2e;
  --bg-chat: #0b1520;
  --bg-deep: #0a1020;
  --bg-dark-alt: #1a2736;
  --bg-darker: #213743;
  --bg-overlay: #141e2b;
  --bg-deepest: #0f1923;
  --bg-dark-blue: #111827;
  --bg-navy: #0a1628;
  --bg-panel-accent: #2a4d6e;
  --bg-panel-border: #294a69;
  --bg-abyss: #030d1a;
  --bg-abyss-blue: #0a2040;
  --bg-midnight: #060e1e;
  --bg-midnight-blue: #0b1a33;
  --bg-midnight-deep: #0d1f3c;
  --bg-void: #0a0a0a;
  --bg-void-dark: #0a0e14;
  --bg-void-blue: #0a0e17;
  --bg-shade: #0e1620;
  --bg-shade-blue: #0a1620;
  --bg-shade-navy: #0a1828;
  --bg-ink: #0c1a26;
  --bg-ink-blue: #0e1a2a;
  --bg-ink-deep: #0e1f30;
  --bg-twilight: #0b1929;
  --bg-twilight-green: #0d2818;
  --bg-dusk: #0d0b1a;
  --bg-dusk-purple: #1a1040;
  --bg-dark-green: #132a1e;
  --bg-dark-green-alt: #0f2a1e;
  --bg-dark-teal: #0d1a30;
  --bg-dark-teal-deep: #081420;
  --bg-slate: #132a3b;
  --bg-slate-dark: #0b1b27;
  --bg-slate-mid: #0d1628;
  --bg-slate-warm: #1a2332;
  --bg-panel: #131d29;
  --bg-panel-mid: #0c1e30;
  --bg-panel-warm: #132a42;
  --bg-surface: #1a1f2e;
  --bg-surface-dark: #1a2538;
  --bg-surface-border: #1a2a3a;
  --bg-raised: #1e2e3e;
  --bg-raised-border: #172330;
  --bg-raised-mid: #1e2d3d;
  --bg-raised-dark: #162230;
  --bg-raised-accent: #0f2538;
  --bg-float: #2d4a63;
  --bg-float-dark: #2a5070;
  --bg-float-mid: #2a3e52;
  --bg-sidebar: #1a2a3d;
  --white-00: rgba(255, 255, 255, 0);
  --white-01: rgba(255, 255, 255, 0.01);
  --white-02: rgba(255, 255, 255, 0.02);
  --white-022: rgba(255, 255, 255, 0.022);
  --white-025: rgba(255, 255, 255, 0.025);
  --white-03: rgba(255, 255, 255, 0.03);
  --white-04: rgba(255, 255, 255, 0.04);
  --white-05: rgba(255, 255, 255, 0.05);
  --white-055: rgba(255, 255, 255, 0.055);
  --white-06: rgba(255, 255, 255, 0.06);
  --white-07: rgba(255, 255, 255, 0.07);
  --white-08: rgba(255, 255, 255, 0.08);
  --white-09: rgba(255, 255, 255, 0.09);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-11: rgba(255, 255, 255, 0.11);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-14: rgba(255, 255, 255, 0.14);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-16: rgba(255, 255, 255, 0.16);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-28: rgba(255, 255, 255, 0.28);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-35: rgba(255, 255, 255, 0.35);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-45: rgba(255, 255, 255, 0.45);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-65: rgba(255, 255, 255, 0.65);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-75: rgba(255, 255, 255, 0.75);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-90: rgba(255, 255, 255, 0.9);
  --black-00: rgba(0, 0, 0, 0);
  --black-12: rgba(0, 0, 0, 0.12);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-20: rgba(0, 0, 0, 0.2);
  --black-25: rgba(0, 0, 0, 0.25);
  --black-30: rgba(0, 0, 0, 0.3);
  --black-35: rgba(0, 0, 0, 0.35);
  --black-38: rgba(0, 0, 0, 0.38);
  --black-40: rgba(0, 0, 0, 0.4);
  --black-45: rgba(0, 0, 0, 0.45);
  --black-50: rgba(0, 0, 0, 0.5);
  --black-55: rgba(0, 0, 0, 0.55);
  --black-60: rgba(0, 0, 0, 0.6);
  --black-65: rgba(0, 0, 0, 0.65);
  --black-70: rgba(0, 0, 0, 0.7);
  --black-72: rgba(0, 0, 0, 0.72);
  --black-75: rgba(0, 0, 0, 0.75);
  --black-80: rgba(0, 0, 0, 0.8);
  --black-82: rgba(0, 0, 0, 0.82);
  --black-90: rgba(0, 0, 0, 0.9);
  --text-15: rgba(244, 248, 255, 0.15);
  --text-20: rgba(244, 248, 255, 0.2);
  --text-25: rgba(244, 248, 255, 0.25);
  --text-30: rgba(244, 248, 255, 0.3);
  --text-35: rgba(244, 248, 255, 0.35);
  --text-38: rgba(244, 248, 255, 0.38);
  --text-40: rgba(244, 248, 255, 0.4);
  --text-45: rgba(244, 248, 255, 0.45);
  --text-50: rgba(244, 248, 255, 0.5);
  --text-55: rgba(244, 248, 255, 0.55);
  --text-60: rgba(244, 248, 255, 0.6);
  --text-65: rgba(244, 248, 255, 0.65);
  --text-70: rgba(244, 248, 255, 0.7);
  --text-72: rgba(244, 248, 255, 0.72);
  --text-75: rgba(244, 248, 255, 0.75);
  --text-80: rgba(244, 248, 255, 0.8);
  --text-85: rgba(244, 248, 255, 0.85);
  --text-88: rgba(244, 248, 255, 0.88);
  --text-90: rgba(244, 248, 255, 0.9);
  --primary-03: rgba(0, 117, 255, 0.03);
  --primary-08: rgba(0, 117, 255, 0.08);
  --primary-10: rgba(0, 117, 255, 0.1);
  --primary-12: rgba(0, 117, 255, 0.12);
  --primary-15: rgba(0, 117, 255, 0.15);
  --primary-20: rgba(0, 117, 255, 0.2);
  --primary-25: rgba(0, 117, 255, 0.25);
  --primary-30: rgba(0, 117, 255, 0.3);
  --primary-40: rgba(0, 117, 255, 0.4);
  --primary-50: rgba(0, 117, 255, 0.5);
  --primary-60: rgba(0, 117, 255, 0.6);
  --primary-65: rgba(0, 117, 255, 0.65);
  --panel-bg-50: rgba(15, 33, 46, 0.5);
  --panel-bg-60: rgba(15, 33, 46, 0.6);
  --panel-bg-80: rgba(15, 33, 46, 0.8);
  --panel-bg-90: rgba(15, 33, 46, 0.9);
  --panel-bg-95: rgba(15, 33, 46, 0.95);
  --panel-bg-100: rgba(15, 33, 46, 1);
  --overlay-99: rgba(8, 18, 30, 0.99);
  --overlay-100: rgba(8, 18, 30, 1);
  --overlay-98: rgba(8, 18, 35, 0.98);
  --overlay-dark-99: rgba(8, 16, 30, 0.99);
  --overlay-deep-98: rgba(8, 16, 28, 0.98);
  --overlay-deep-90: rgba(8, 16, 32, 0.9);
  --overlay-dark-97: rgba(12, 28, 48, 0.97);
  --overlay-ink-95: rgba(6, 12, 24, 0.95);
  --overlay-void-98: rgba(6, 10, 20, 0.98);
  --overlay-void-90: rgba(6, 10, 20, 0.9);
  --overlay-navy-99: rgba(12, 24, 40, 0.99);
  --overlay-deep-97: rgba(10, 22, 40, 0.97);
  --overlay-deep-75: rgba(10, 22, 32, 0.75);
  --overlay-dark-deep-97: rgba(10, 14, 23, 0.97);
  --overlay-blue-97: rgba(18, 38, 62, 0.97);
  --overlay-dark-85: rgba(18, 25, 38, 0.85);
  --overlay-slate-95: rgba(14, 22, 36, 0.95);
  --overlay-abyss-97: rgba(0, 14, 28, 0.97);
  --overlay-abyss-95: rgba(0, 14, 28, 0.95);
  --overlay-abyss-75: rgba(0, 14, 28, 0.75);
  --overlay-abyss-65: rgba(0, 14, 28, 0.65);
  --overlay-panel-75: rgba(15, 25, 45, 0.75);
  --overlay-panel-70: rgba(15, 20, 35, 0.7);
  --emerald-02: rgba(52, 211, 153, 0.02);
  --emerald-03: rgba(52, 211, 153, 0.03);
  --emerald-05: rgba(52, 211, 153, 0.05);
  --emerald-06: rgba(52, 211, 153, 0.06);
  --emerald-08: rgba(52, 211, 153, 0.08);
  --emerald-10: rgba(52, 211, 153, 0.1);
  --emerald-12: rgba(52, 211, 153, 0.12);
  --emerald-15: rgba(52, 211, 153, 0.15);
  --emerald-16: rgba(52, 211, 153, 0.16);
  --emerald-18: rgba(52, 211, 153, 0.18);
  --emerald-20: rgba(52, 211, 153, 0.2);
  --emerald-30: rgba(52, 211, 153, 0.3);
  --emerald-35: rgba(52, 211, 153, 0.35);
  --emerald-40: rgba(52, 211, 153, 0.4);
  --emerald-50: rgba(52, 211, 153, 0.5);
  --emerald-60: rgba(52, 211, 153, 0.6);
  --emerald-70: rgba(52, 211, 153, 0.7);
  --blue-500-05: rgba(59, 130, 246, 0.05);
  --blue-500-06: rgba(59, 130, 246, 0.06);
  --blue-500-08: rgba(59, 130, 246, 0.08);
  --blue-500-10: rgba(59, 130, 246, 0.1);
  --blue-500-12: rgba(59, 130, 246, 0.12);
  --blue-500-15: rgba(59, 130, 246, 0.15);
  --blue-500-20: rgba(59, 130, 246, 0.2);
  --blue-500-25: rgba(59, 130, 246, 0.25);
  --blue-500-30: rgba(59, 130, 246, 0.3);
  --blue-500-40: rgba(59, 130, 246, 0.4);
  --blue-500-50: rgba(59, 130, 246, 0.5);
  --blue-500-60: rgba(59, 130, 246, 0.6);
  --blue-500-70: rgba(59, 130, 246, 0.7);
  --blue-500-80: rgba(59, 130, 246, 0.8);
  --blue-500-90: rgba(59, 130, 246, 0.9);
  --blue-400-08: rgba(96, 165, 250, 0.08);
  --blue-400-15: rgba(96, 165, 250, 0.15);
  --blue-400-18: rgba(96, 165, 250, 0.18);
  --blue-400-20: rgba(96, 165, 250, 0.2);
  --blue-400-25: rgba(96, 165, 250, 0.25);
  --blue-400-30: rgba(96, 165, 250, 0.3);
  --blue-300-70: rgba(123, 167, 240, 0.7);
  --blue-mid-06: rgba(91, 141, 238, 0.06);
  --blue-mid-07: rgba(91, 141, 238, 0.07);
  --blue-mid-10: rgba(91, 141, 238, 0.1);
  --blue-mid-12: rgba(91, 141, 238, 0.12);
  --blue-mid-14: rgba(91, 141, 238, 0.14);
  --blue-mid-15: rgba(91, 141, 238, 0.15);
  --blue-mid-18: rgba(91, 141, 238, 0.18);
  --blue-mid-20: rgba(91, 141, 238, 0.2);
  --blue-mid-25: rgba(91, 141, 238, 0.25);
  --blue-mid-40: rgba(91, 141, 238, 0.4);
  --blue-accent-15: rgba(47, 128, 237, 0.15);
  --blue-accent-25: rgba(47, 128, 237, 0.25);
  --alt-blue-25: rgba(0, 100, 255, 0.25);
  --primary-bright-12: rgba(10, 141, 255, 0.12);
  --bright-blue-02: rgba(0, 168, 255, 0.02);
  --bright-blue-05: rgba(0, 168, 255, 0.05);
  --bright-blue-10: rgba(0, 168, 255, 0.1);
  --bright-blue-15: rgba(0, 168, 255, 0.15);
  --bright-blue-16: rgba(0, 168, 255, 0.16);
  --sky-400-10: rgba(56, 189, 248, 0.1);
  --sky-400-12: rgba(56, 189, 248, 0.12);
  --sky-400-20: rgba(56, 189, 248, 0.2);
  --sky-400-25: rgba(56, 189, 248, 0.25);
  --sky-400-30: rgba(56, 189, 248, 0.3);
  --red-500-08: rgba(239, 68, 68, 0.08);
  --red-500-10: rgba(239, 68, 68, 0.1);
  --red-500-12: rgba(239, 68, 68, 0.12);
  --red-500-15: rgba(239, 68, 68, 0.15);
  --red-500-20: rgba(239, 68, 68, 0.2);
  --red-500-25: rgba(239, 68, 68, 0.25);
  --red-500-30: rgba(239, 68, 68, 0.3);
  --red-500-35: rgba(239, 68, 68, 0.35);
  --red-500-40: rgba(239, 68, 68, 0.4);
  --red-400-15: rgba(248, 113, 113, 0.15);
  --red-400-20: rgba(248, 113, 113, 0.2);
  --red-400-30: rgba(248, 113, 113, 0.3);
  --red-400-50: rgba(248, 113, 113, 0.5);
  --red-400-60: rgba(248, 113, 113, 0.6);
  --red-400-80: rgba(248, 113, 113, 0.8);
  --red-600-12: rgba(220, 38, 38, 0.12);
  --red-600-25: rgba(220, 38, 38, 0.25);
  --red-danger-15: rgba(220, 53, 69, 0.15);
  --red-danger-30: rgba(220, 53, 69, 0.3);
  --error-12: rgba(234, 84, 85, 0.12);
  --error-15: rgba(234, 84, 85, 0.15);
  --error-25: rgba(234, 84, 85, 0.25);
  --error-30: rgba(234, 84, 85, 0.3);
  --error-alt-60: rgba(231, 76, 76, 0.6);
  --error-alt-80: rgba(231, 76, 76, 0.8);
  --crimson-25: rgba(185, 28, 28, 0.25);
  --crimson-35: rgba(185, 28, 28, 0.35);
  --red-vivid-30: rgba(255, 70, 70, 0.3);
  --orange-red-08: rgba(255, 60, 0, 0.08);
  --orange-red-10: rgba(255, 60, 0, 0.1);
  --orange-red-15: rgba(255, 60, 0, 0.15);
  --orange-red-20: rgba(255, 60, 0, 0.2);
  --orange-red-25: rgba(255, 60, 0, 0.25);
  --orange-red-35: rgba(255, 60, 0, 0.35);
  --orange-red-40: rgba(255, 60, 0, 0.4);
  --success-10: rgba(0, 231, 1, 0.1);
  --success-20: rgba(0, 231, 1, 0.2);
  --success-60: rgba(0, 231, 1, 0.6);
  --green-400-03: rgba(74, 222, 128, 0.03);
  --green-400-10: rgba(74, 222, 128, 0.1);
  --green-400-12: rgba(74, 222, 128, 0.12);
  --green-400-15: rgba(74, 222, 128, 0.15);
  --green-400-20: rgba(74, 222, 128, 0.2);
  --green-400-25: rgba(74, 222, 128, 0.25);
  --green-400-30: rgba(74, 222, 128, 0.3);
  --green-400-40: rgba(74, 222, 128, 0.4);
  --green-400-60: rgba(74, 222, 128, 0.6);
  --green-500-05: rgba(34, 197, 94, 0.05);
  --green-500-12: rgba(34, 197, 94, 0.12);
  --green-500-15: rgba(34, 197, 94, 0.15);
  --green-500-20: rgba(34, 197, 94, 0.2);
  --green-500-25: rgba(34, 197, 94, 0.25);
  --green-500-30: rgba(34, 197, 94, 0.3);
  --green-500-50: rgba(34, 197, 94, 0.5);
  --green-500-60: rgba(34, 197, 94, 0.6);
  --green-600-12: rgba(22, 163, 74, 0.12);
  --green-600-25: rgba(22, 163, 74, 0.25);
  --green-mat-04: rgba(76, 175, 80, 0.04);
  --green-mat-06: rgba(76, 175, 80, 0.06);
  --green-mat-15: rgba(76, 175, 80, 0.15);
  --green-mat-30: rgba(76, 175, 80, 0.3);
  --green-mat-35: rgba(76, 175, 80, 0.35);
  --yellow-500-05: rgba(234, 179, 8, 0.05);
  --yellow-500-08: rgba(234, 179, 8, 0.08);
  --yellow-500-10: rgba(234, 179, 8, 0.1);
  --yellow-500-15: rgba(234, 179, 8, 0.15);
  --yellow-500-20: rgba(234, 179, 8, 0.2);
  --yellow-500-25: rgba(234, 179, 8, 0.25);
  --yellow-500-30: rgba(234, 179, 8, 0.3);
  --yellow-500-35: rgba(234, 179, 8, 0.35);
  --yellow-500-50: rgba(234, 179, 8, 0.5);
  --yellow-500-60: rgba(234, 179, 8, 0.6);
  --amber-400-02: rgba(251, 191, 36, 0.02);
  --amber-400-05: rgba(251, 191, 36, 0.05);
  --amber-400-10: rgba(251, 191, 36, 0.1);
  --amber-400-12: rgba(251, 191, 36, 0.12);
  --amber-400-15: rgba(251, 191, 36, 0.15);
  --amber-400-16: rgba(251, 191, 36, 0.16);
  --amber-400-20: rgba(251, 191, 36, 0.2);
  --amber-400-50: rgba(251, 191, 36, 0.5);
  --amber-400-60: rgba(251, 191, 36, 0.6);
  --amber-500-03: rgba(245, 158, 11, 0.03);
  --amber-500-05: rgba(245, 158, 11, 0.05);
  --amber-500-08: rgba(245, 158, 11, 0.08);
  --amber-500-12: rgba(245, 158, 11, 0.12);
  --amber-500-15: rgba(245, 158, 11, 0.15);
  --amber-500-20: rgba(245, 158, 11, 0.2);
  --amber-500-25: rgba(245, 158, 11, 0.25);
  --amber-500-50: rgba(245, 158, 11, 0.5);
  --amber-500-60: rgba(245, 158, 11, 0.6);
  --gold-12: rgba(255, 215, 0, 0.12);
  --gold-14: rgba(255, 215, 0, 0.14);
  --gold-30: rgba(255, 215, 0, 0.3);
  --gold-light-12: rgba(255, 217, 61, 0.12);
  --gold-mid-60: rgba(203, 155, 81, 0.6);
  --warm-gold-06: rgba(255, 200, 50, 0.06);
  --warm-gold-08: rgba(255, 200, 0, 0.08);
  --warm-gold-12: rgba(255, 200, 0, 0.12);
  --warm-gold-30: rgba(255, 200, 0, 0.3);
  --warm-gold-50: rgba(255, 200, 0, 0.5);
  --warning-06: rgba(255, 193, 7, 0.06);
  --warning-08: rgba(255, 193, 7, 0.08);
  --warning-12: rgba(255, 193, 7, 0.12);
  --warning-15: rgba(255, 193, 7, 0.15);
  --warning-18: rgba(255, 193, 7, 0.18);
  --warning-30: rgba(255, 193, 7, 0.3);
  --orange-warm-06: rgba(255, 170, 50, 0.06);
  --orange-warm-10: rgba(255, 170, 50, 0.1);
  --orange-warm-15: rgba(255, 170, 50, 0.15);
  --orange-warm-18: rgba(255, 170, 50, 0.18);
  --orange-warm-20: rgba(255, 170, 50, 0.2);
  --orange-warm-25: rgba(255, 170, 50, 0.25);
  --orange-warm-30: rgba(255, 170, 50, 0.3);
  --orange-warm-35: rgba(255, 170, 50, 0.35);
  --orange-warm-40: rgba(255, 170, 50, 0.4);
  --orange-warm-60: rgba(255, 170, 50, 0.6);
  --orange-dark-06: rgba(255, 170, 0, 0.06);
  --orange-light-70: rgba(255, 190, 80, 0.7);
  --orange-material-30: rgba(255, 167, 38, 0.3);
  --orange-deep-15: rgba(255, 140, 0, 0.15);
  --orange-vivid-15: rgba(255, 120, 0, 0.15);
  --purple-500-03: rgba(168, 85, 247, 0.03);
  --purple-500-12: rgba(168, 85, 247, 0.12);
  --purple-500-15: rgba(168, 85, 247, 0.15);
  --purple-500-30: rgba(168, 85, 247, 0.3);
  --purple-500-50: rgba(168, 85, 247, 0.5);
  --indigo-500-03: rgba(99, 102, 241, 0.03);
  --indigo-500-06: rgba(99, 102, 241, 0.06);
  --indigo-500-08: rgba(99, 102, 241, 0.08);
  --indigo-500-12: rgba(99, 102, 241, 0.12);
  --indigo-500-18: rgba(99, 102, 241, 0.18);
  --indigo-500-20: rgba(99, 102, 241, 0.2);
  --pink-15: rgba(236, 72, 153, 0.15);
  --cyan-25: rgba(14, 116, 144, 0.25);
  --cyan-35: rgba(14, 116, 144, 0.35);
  --slate-300-12: rgba(156, 163, 175, 0.12);
  --slate-300-40: rgba(156, 163, 175, 0.4);
  --text-grey-45: rgba(228, 236, 255, 0.45);
  --text-grey-55: rgba(228, 236, 255, 0.55);
  --text-grey-70: rgba(228, 236, 255, 0.7);
  --text-bright-55: rgba(248, 251, 255, 0.55);
  --text-sec-60: rgba(226, 232, 240, 0.6);
  --text-mist-70: rgba(220, 230, 240, 0.7);
  --text-cool-40: rgba(200, 210, 225, 0.4);
  --text-cool-50: rgba(200, 208, 220, 0.5);
  --text-cool-55: rgba(200, 210, 225, 0.55);
  --bg-modal-content: rgb(33, 50, 71);
  --bg-btn-hover: rgb(46.7287671233, 84.3397260274, 119.6712328767);
  --bg-dropdown-dark: rgb(20, 35, 52);
  --bg-dropdown-mid: rgb(25, 40, 58);
  --border-primary: #213c55;
  --border-panel: #324861;
  --border-dark: #2a445b;
  --border-muted: #3a4e64;
  --border-subtle-dark: #2a3544;
  --border-subtle-mid: #3a4a5c;
  --border-soft: #2a3a4d;
}

.text-grey {
  color: var(--text-grey) !important;
}

.text-official {
  color: var(--color-official) !important;
}

.text-success {
  color: var(--color-success) !important;
}

* {
  touch-action: manipulation;
}

html {
  background-color: var(--bg-html);
}

body {
  background-color: var(--bg-body) !important;
  color: var(--color-white);
  font-family: "Inter", sans-serif;
}

@media (max-width: 768px) {
  body {
    background: var(--bg-body-mobile) !important;
  }
}
h1,
h2,
h3,
h4,
.game-section-header,
.title,
.hero-heading,
.card-game-notch span,
header .gradient-overlay .inner h1,
header .gradient-overlay .inner p,
.casino-hero h1,
.casino-hero p {
  text-shadow: 1px 1px 10px var(--black-35);
}

/* Apply extra spacing to numeric-only elements (inputs and displayed amounts) */
input[type=number],
.numeric,
.number-text,
[data-number],
[data-amount],
[data-balance-amount],
[data-bet-fiat],
[data-return-fiat],
.balance-value,
.game-return,
.return-field {
  letter-spacing: 1px;
}

h1,
h2,
h3,
h4 {
  font-family: "Inter", sans-serif;
}

.post-header-games {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .post-header-games {
    margin-top: 0;
    padding-top: 6px;
  }
}
.game-section-header {
  transform: translateY(0);
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  gap: 6px;
  margin: 20px 0 0;
  display: flex;
  align-items: center;
}

.section-header-icon {
  height: 2em;
  width: auto;
  vertical-align: middle;
  filter: drop-shadow(0 0 6px var(--blue-500-70)) drop-shadow(0 0 12px var(--blue-500-40));
}

.heroRow {
  --bs-gutter-x: 10px;
}

.hp-bento {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
  height: 260px;
}

.hp-b-a {
  grid-column: 1;
  grid-row: 1/3;
}

.hp-b-b {
  grid-column: 2/4;
  grid-row: 1;
  background: var(--bg-card);
}

.hp-b-b .hp-feature-body {
  z-index: 3;
}

.hp-b-b-scroll {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hp-b-b-scroll .wrapper-images {
  display: flex;
  flex-direction: column;
  height: 150%;
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 50%;
  opacity: 0.9;
  transform: translate3d(-50%, -50%, 0) perspective(800px) rotateY(10deg) rotate(-10deg);
}

.hp-b-b-scroll .images-line {
  display: flex;
  animation: hpSkellyRunner 20s linear infinite;
  transform: translateX(23%);
}

.hp-b-b-scroll .images-line:nth-child(even) {
  animation-duration: 30s;
}

.hp-b-b-scroll .images-line .line {
  flex: none;
  width: 2.4rem;
  height: 2.4rem;
  margin: 2px;
  position: relative;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.hp-b-b-scroll .images-line .line .bg-grad {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  z-index: 0;
}

.hp-b-b-scroll .images-line .line img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

@keyframes hpSkellyRunner {
  to {
    transform: translateX(-10.3%);
  }
}
.hp-b-b-badges {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 3;
}

.hp-b-b-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--overlay-panel-70);
  border: 1px solid var(--white-15);
  box-shadow: 0 2px 8px var(--black-40), 0 0 12px var(--purple-500-15);
  backdrop-filter: blur(4px);
}

.hp-b-b-badge img {
  height: 20px;
  width: 20px;
  object-fit: contain;
  filter: brightness(1.2);
}

.hp-b-b-badge:first-child img {
  height: 26px;
  width: 26px;
}

.hp-b-b-badge--relive {
  width: auto;
  border-radius: 18px;
  padding: 0 10px 0 8px;
  gap: 6px;
}

.hp-b-b-badge--relive img {
  height: 22px;
  width: 22px;
}

.hp-b-b-badge--relive span {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--white-85);
  white-space: nowrap;
}

.hp-b-c {
  grid-column: 4;
  grid-row: 1;
}

.hp-b-d {
  grid-column: 2;
  grid-row: 2;
}

.hp-b-e {
  grid-column: 3/5;
  grid-row: 2;
}

.hp-b-f {
  grid-column: 5;
  grid-row: 1/3;
}

.hp-feature-card {
  display: block;
  position: relative;
  border: none;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  color: var(--text-primary);
  box-shadow: 0 4px 16px var(--black-35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hp-feature-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--white-10);
  box-shadow: inset 0 1px 0 0 var(--white-12), inset 0 -1px 0 0 var(--white-04);
  pointer-events: none;
  z-index: 4;
}
.hp-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--black-40);
  color: var(--text-primary);
  text-decoration: none;
}
.hp-feature-card:hover::after {
  border-color: var(--white-18);
  box-shadow: inset 0 1px 0 0 var(--white-20), inset 0 -1px 0 0 var(--white-06);
}

.hp-feature-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Locked / coming-soon feature cards: desaturate the artwork, dim the
   tag/title, and pin a lock badge in the top-right corner. The card
   stays clickable (parent <a>) so the linked page can show a more
   detailed "coming soon" view, but visually it reads as gated. */
.hp-feature-card.is-locked {
  cursor: not-allowed;
}
.hp-feature-card.is-locked > *:not(.hp-feature-lock) {
  filter: grayscale(0.85) brightness(0.6);
}
.hp-feature-card.is-locked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-50, rgba(0, 0, 0, 0.5));
  z-index: 2;
  pointer-events: none;
  border-radius: 8px;
}
.hp-feature-card.is-locked:hover {
  transform: none;
}

.hp-feature-lock {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--black-72, rgba(0, 0, 0, 0.72));
  border: 1px solid var(--white-18, rgba(255, 255, 255, 0.18));
  color: var(--text-primary, #fff);
  font-size: 0.85rem;
  box-shadow: 0 2px 8px var(--black-40, rgba(0, 0, 0, 0.4));
  pointer-events: none;
}

.hp-feature-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 10px 10px;
  z-index: 3;
  background: linear-gradient(to top, var(--black-72) 0%, var(--black-38) 55%, transparent 100%);
  border-radius: 0 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hp-feature-tag {
  font-size: 0.55rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fc-accent, var(--color-blue-500));
  text-shadow: 0 1px 6px var(--black-90), 0 0 2px var(--black-60);
}

.hp-feature-title {
  font-size: 0.82rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.1;
  text-shadow: 0 1px 6px var(--black-90), 0 0 2px var(--black-60);
}

.hp-b-a .hp-feature-title,
.hp-b-b .hp-feature-title,
.hp-b-f .hp-feature-title {
  font-size: 0.95rem;
}

.hp-b-c-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--color-gold-gradient-start) 0%, var(--color-gold-gradient-mid) 40%, var(--color-gold-gradient-end) 100%);
  z-index: 0;
}

.hp-b-c-skelly {
  position: absolute;
  right: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  height: 100%;
  width: auto;
  z-index: 1;
  filter: drop-shadow(0 0 15px var(--gold-mid-60));
}

.hp-b-c-shine {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}
.hp-b-c-shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--white-00) 0%, var(--white-30) 50%, var(--white-00) 100%);
  animation: goldShine 3s ease-in-out infinite;
}

@keyframes goldShine {
  0% {
    left: -60%;
  }
  50% {
    left: 100%;
  }
  100% {
    left: 100%;
  }
}
.hp-b-e-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, var(--color-red-deep) 0%, var(--color-red-darker) 50%, var(--color-red-darkest) 100%);
}

.hp-b-e-matrix {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
}

.hp-b-e-cyborg {
  position: absolute;
  right: 10px;
  bottom: 0;
  height: 100%;
  width: auto;
  image-rendering: pixelated;
  opacity: 0.85;
  z-index: 1;
  filter: drop-shadow(0 0 12px var(--red-500-40));
}

.hp-b-e-body {
  z-index: 3;
}

.hp-b-e-info {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

.hp-b-e-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.52rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--white-10);
  color: var(--white-80);
  border: 1px solid var(--white-08);
}

.hp-b-e-badge .fab, .hp-b-e-badge .fas {
  font-size: 0.55rem;
}

@media (max-width: 991px) {
  .hp-bento {
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: repeat(3, 1fr);
    height: 340px;
  }
  .hp-b-a {
    grid-column: 1;
    grid-row: 1/3;
  }
  .hp-b-b {
    grid-column: 2/4;
    grid-row: 1;
  }
  .hp-b-c {
    grid-column: 2;
    grid-row: 2;
  }
  .hp-b-d {
    grid-column: 3;
    grid-row: 2;
  }
  .hp-b-e {
    grid-column: 1/3;
    grid-row: 3;
  }
  .hp-b-f {
    grid-column: 3;
    grid-row: 3;
  }
}
@media (max-width: 575px) {
  .hp-bento {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: 500px;
    gap: 6px;
  }
  .hp-b-a {
    grid-column: 1/3;
    grid-row: 1;
  }
  .hp-b-a .hp-feature-img {
    object-position: center bottom;
  }
  .hp-b-d {
    grid-column: 1;
    grid-row: 2;
  }
  .hp-b-f {
    display: flex;
    grid-column: 2;
    grid-row: 2;
  }
  .hp-b-c {
    grid-column: 1;
    grid-row: 3;
  }
  .hp-b-e {
    grid-column: 2;
    grid-row: 3;
  }
  .hp-b-b {
    grid-column: 1/3;
    grid-row: 4;
  }
  .hp-feature-title {
    font-size: 0.72rem;
  }
  .hp-feature-tag {
    font-size: 0.48rem;
  }
  .hp-feature-body {
    padding: 6px 8px 8px;
  }
  .hp-b-b-badges {
    gap: 4px;
    right: 6px;
    bottom: 6px;
    flex-direction: column;
    align-items: flex-end;
  }
  .hp-b-b-badge {
    width: 24px;
    height: 24px;
  }
  .hp-b-b-badge img {
    height: 13px;
    width: 13px;
  }
  .hp-b-b-badge--relive {
    width: auto;
    height: 24px;
    padding: 0 7px 0 5px;
    gap: 4px;
    border-radius: 14px;
  }
  .hp-b-b-badge--relive span {
    font-size: 0.55rem;
  }
  .game-section-header {
    font-size: 13px;
    margin: 14px 0 6px;
  }
}
nav.navbar {
  position: fixed;
  z-index: 999;
  width: auto;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding: 0px 24px;
  padding-top: env(safe-area-inset-top, 0px);
  transition: left 0.35s ease, padding 0.35s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: var(--overlay-abyss-65);
  box-shadow: 0 0 10px var(--black-25);
  height: calc(60px + env(safe-area-inset-top, 0px));
}

nav.navbar .navContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  box-sizing: border-box;
  gap: 24px;
  border-radius: 999px;
  position: relative;
}

nav.navbar .navbar-start {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 32px);
  flex-shrink: 0;
}

nav.navbar .navbar-mid {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  min-width: 0;
  overflow: visible;
}

nav.navbar .navbar-end {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
}

nav.navbar .navbar-end .btn {
  white-space: nowrap;
  border-radius: 10px;
  padding: 6px 16px;
  font-size: 0.85rem;
}

nav.navbar .navbar-end .btn.nav-icon-btn,
nav.navbar .btn.wallet-icon-btn {
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  padding: 0;
  flex-shrink: 0;
}

.nav-icon-btn.is-active {
  background: var(--primary-15) !important;
  border-color: var(--primary-30) !important;
  color: var(--color-primary) !important;
}

nav.navbar {
  overflow: visible;
}

nav.navbar .navbar-brand {
  padding: 0;
  margin: 0px;
  position: relative;
  z-index: 2;
}

nav.navbar .navbar-brand img {
  margin: 0px;
  height: 52px;
  max-height: none;
  transition: 0.3s;
  filter: drop-shadow(0 2px 8px var(--black-30));
}

nav.navbar .navbar-brand img:hover {
  scale: 1.1;
}

nav.navbar .balance-cluster {
  display: inline-flex;
  align-items: stretch;
  overflow: visible;
  min-width: 0;
  position: relative;
  isolation: isolate;
  border-radius: 8px;
  background: var(--white-08);
  height: 40px;
}

nav.navbar .balance-widget {
  position: relative;
  --currency-accent: var(--color-orange-btc);
  flex: 1 1 220px;
  min-width: 0;
  overflow-x: visible;
  overflow: visible;
  border-radius: inherit;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  font-size: 14px;
  color: var(--text-primary);
  transition: background-color 0.2s ease;
}

nav.navbar .balance-widget:hover:not(.is-open) {
  background: var(--white-05);
}

nav.navbar .balance-widget:focus-visible, nav.navbar .balance-widget:active {
  outline: none;
  background: var(--white-08);
}

nav.navbar .balance-widget .dropdown-toggle::after {
  display: none;
}

nav.navbar .balance-widget .balance-toggle {
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  padding: 0 14px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.9rem;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

nav.navbar .balance-widget .balance-value-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 0;
}

nav.navbar .balance-widget .balance-value {
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

nav.navbar .balance-widget .balance-sub {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

nav.navbar .balance-widget .balance-sub:empty {
  display: none;
}

nav.navbar .balance-widget .currency-chip {
  width: 24px !important;
  height: 24px !important;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}

nav.navbar .balance-widget .currency-chip .currency-icon {
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

nav.navbar .balance-widget .currency-icon {
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  position: relative;
}

nav.navbar .balance-widget .currency-icon.has-image {
  background: transparent;
  color: transparent;
}

nav.navbar .balance-widget .currency-icon img {
  width: 18px !important;
  height: 18px !important;
  border-radius: inherit;
  object-fit: cover;
  display: block;
  -webkit-filter: drop-shadow(0px 2px 0px var(--black-30));
  filter: drop-shadow(0px 2px 0px var(--black-30));
}

nav.navbar .balance-widget .balance-chevron {
  font-size: 0.7rem;
  color: var(--text-65);
  transition: transform 0.2s ease;
}

nav.navbar .balance-widget.is-open .balance-chevron {
  transform: rotate(180deg);
}

nav.navbar .balance-widget .balance-menu {
  min-width: 340px;
  padding: 16px;
  padding-bottom: 0;
  border-radius: 15px;
  left: 50% !important;
  transform: translate(-50%, 10px) !important;
  z-index: 20;
  color: var(--text-primary);
  background: var(--bg-body-mobile);
  border: none;
  box-shadow: 0 12px 40px var(--black-50);
}

.balance-dropdown-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--black-55);
  z-index: 19;
}

.balance-dropdown-backdrop.show {
  display: block;
}

nav.navbar .balance-widget .dropdown-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--panel-bg-95);
  border: none;
  box-shadow: inset 0 0 10px var(--black-30);
  margin-bottom: 12px;
}

nav.navbar .balance-widget .dropdown-search i {
  color: var(--text-40);
  font-size: 13px;
}

nav.navbar .balance-widget .dropdown-search input {
  border: none;
  background: transparent;
  width: 100%;
  font-size: 0.85rem;
  color: var(--text-primary);
}

nav.navbar .balance-widget .dropdown-search input::placeholder {
  color: var(--text-40);
}

nav.navbar .balance-widget .dropdown-search input:focus {
  outline: none;
}

nav.navbar .balance-widget .currency-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 400px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 4px;
  margin: 0 -4px;
  background: var(--panel-bg-95);
  border-radius: 10px;
  box-shadow: inset 0 0 10px var(--black-30);
}

nav.navbar .balance-widget .currency-list::-webkit-scrollbar {
  display: none;
}

nav.navbar .balance-widget .currency-list .currency-empty {
  padding: 12px 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-50);
}

nav.navbar .balance-widget .currency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--text-75);
  font-weight: 600;
  font-size: 13px;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s;
}

nav.navbar .balance-widget .currency-row:hover, nav.navbar .balance-widget .currency-row:focus-visible {
  outline: none;
  background: var(--white-06);
  color: var(--text-primary);
}

nav.navbar .balance-widget .currency-row.is-active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: none;
  border: none;
}

nav.navbar .balance-widget .currency-row.is-active:hover, nav.navbar .balance-widget .currency-row.is-active:focus-visible {
  background: var(--color-primary-link);
}

nav.navbar .balance-widget .currency-row .currency-row-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

nav.navbar .balance-widget .currency-row .cr-big {
  font-size: 12px;
  font-weight: 600;
}

nav.navbar .balance-widget .currency-row .cr-sub {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
}

nav.navbar .balance-widget .currency-row .cr-sub:empty {
  display: none;
}

nav.navbar .balance-widget .currency-row.is-active .cr-sub {
  opacity: 0.7;
}

nav.navbar .balance-widget .currency-row .currency-row-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

nav.navbar .balance-widget .currency-row .currency-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0;
}

nav.navbar .balance-widget .currency-row .currency-label {
  font-size: 0.85rem;
  color: var(--text-65);
  filter: none;
}

nav.navbar .balance-widget .currency-row.is-active .currency-label {
  color: var(--white-90);
}

nav.navbar .balance-widget .currency-divider {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 10px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-35);
}

nav.navbar .balance-widget .currency-divider i {
  font-size: 8px;
  transition: transform 0.2s;
}

nav.navbar .balance-widget .currency-chain-header {
  cursor: pointer;
  user-select: none;
  border-radius: 6px;
  padding: 8px 10px;
  margin: 4px 0 2px;
  transition: background 0.15s;
}

nav.navbar .balance-widget .currency-chain-header:hover {
  background: var(--white-04);
}

nav.navbar .balance-widget .wallet-settings {
  width: calc(100% + 32px);
  margin: 12px -16px 0;
  border-radius: 0 0 15px 15px;
  padding: 12px 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-65);
  font-size: 13px;
  background: var(--bg-dark);
  border: none;
  border-top: 1px solid var(--white-06);
  box-shadow: none;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}

nav.navbar .balance-widget .wallet-settings:hover, nav.navbar .balance-widget .wallet-settings:focus-visible {
  outline: none;
  background: var(--bg-slate);
  color: var(--text-primary);
}

nav.navbar .wallet-icon-btn {
  border-radius: 0;
  background: var(--color-primary);
  color: var(--color-white);
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
  box-shadow: none;
  transition: background-color 0.2s ease;
  border: none;
}

nav.navbar .wallet-icon-btn:focus-visible {
  outline: 2px solid var(--white-40);
  outline-offset: 2px;
}

nav.navbar .wallet-icon-btn#quickWallet:hover {
  background: var(--color-primary-link);
}

nav.navbar .wallet-icon-btn#quickWallet:focus-visible, nav.navbar .wallet-icon-btn#quickWallet:active {
  outline: none;
  background: var(--color-primary-border);
}

#balanceDropdownToggle {
  border-radius: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}

nav.navbar .balance-cluster > :last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}

.sidebar + .page-wrapper nav.navbar,
.sidebar + .sidebar-overlay + .page-wrapper nav.navbar {
  left: 65px;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.is-expanded + .page-wrapper nav.navbar,
.sidebar.is-expanded + .sidebar-overlay + .page-wrapper nav.navbar {
  left: 260px;
}

@media (max-width: 768px) {
  nav.navbar {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    height: 52px;
    padding-top: 0;
    padding-left: 14px;
    padding-right: 14px;
    border-radius: 10px;
    border: 1px solid var(--white-08);
    background: var(--overlay-abyss-75);
    box-shadow: 0 4px 24px var(--black-35);
  }
  .sidebar + .page-wrapper nav.navbar,
  .sidebar.is-expanded + .page-wrapper nav.navbar,
  .sidebar + .sidebar-overlay + .page-wrapper nav.navbar,
  .sidebar.is-expanded + .sidebar-overlay + .page-wrapper nav.navbar {
    left: 10px;
    right: 10px;
    padding-left: 14px;
    padding-right: 14px;
  }
  nav.navbar .navContainer {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    position: relative;
    justify-content: center;
  }
  nav.navbar .navContainer {
    height: 100%;
  }
  nav.navbar .navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
  }
  nav.navbar .navbar-brand img {
    height: 44px;
  }
  nav.navbar .navbar-start {
    flex: 0 0 auto;
    margin-right: auto;
    height: 100%;
    display: flex;
    align-items: center;
  }
  nav.navbar .navbar-mid {
    position: static;
    left: auto;
    transform: none;
    justify-content: center;
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
    z-index: 2;
  }
  nav.navbar .navbar-end {
    flex: 0 0 auto;
    gap: 6px;
    margin-left: auto;
    align-items: center;
    height: 100%;
  }
  nav.navbar .navbar-end .btn {
    padding: 8px 14px !important;
    font-size: 0.8rem !important;
    border-radius: 8px;
    line-height: 1.3;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  nav.navbar .navbar-end .btn.nav-icon-btn,
  nav.navbar .btn.wallet-icon-btn {
    width: 40px !important;
    height: 40px !important;
    aspect-ratio: 1 !important;
    padding: 0 !important;
  }
  nav.navbar .balance-cluster {
    width: auto;
    min-width: 0;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: none;
    justify-content: center;
    align-items: stretch;
  }
  nav.navbar .balance-widget {
    width: auto;
    flex: 1 1 0;
  }
  nav.navbar .balance-widget .balance-toggle {
    width: auto;
    min-width: 0;
    padding: 0 12px;
    gap: 5px;
    font-size: 0.85rem;
    height: 100%;
  }
  nav.navbar .balance-widget .balance-toggle .balance-value {
    font-size: 0.85rem;
  }
  nav.navbar .balance-widget .balance-menu {
    position: fixed !important;
    top: var(--balance-dropdown-top, 86px);
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 0) !important;
    width: 98vw;
    max-width: 98vw;
    z-index: 1045;
  }
  nav.navbar .balance-widget .balance-value {
    font-size: 0.85rem;
  }
  nav.navbar .balance-widget .currency-chip {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.85rem;
  }
  nav.navbar .balance-widget .currency-icon img {
    width: 16px !important;
    height: 16px !important;
  }
  nav.navbar .wallet-icon-btn {
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    padding: 0;
    font-size: 0.9rem;
  }
}
@media (max-width: 374px) {
  nav.navbar .balance-widget .balance-toggle {
    padding: 0 8px;
    gap: 4px;
  }
  nav.navbar .balance-widget .balance-value {
    font-size: 0.78rem;
  }
  nav.navbar .balance-widget .currency-chip {
    width: 18px !important;
    height: 18px !important;
  }
  nav.navbar .balance-widget .currency-icon img {
    width: 14px !important;
    height: 14px !important;
  }
  nav.navbar .balance-widget .balance-chevron {
    font-size: 0.55rem;
  }
}
.favorite-btn {
  transition: color 0.2s;
}

.fa-star {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  transform-origin: 50% 50%;
}

.fa-star.animate-star {
  animation: star-overspin 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes star-overspin {
  0% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(380deg);
  }
  80% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.favorite-btn {
  position: relative;
  color: var(--color-white);
  transition: color 0.2s;
}

.favorite-btn:hover {
  color: var(--color-gold) !important;
}

.favorite-btn.favorited,
.favorite-btn[data-favorited=true] {
  color: var(--color-gold) !important;
}

.arrow-toggle {
  background: transparent;
  border: 0px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: transform 0.2s ease;
}

.arrow-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.arrow-toggle i {
  transition: transform 0.2s ease;
}

.arrow-toggle.is-open i,
.arrow-toggle[aria-expanded=true] i {
  transform: rotate(180deg);
}

.btn.btn-gradient {
  background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-link) 100%);
  color: var(--color-white);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 40px;
  border: none;
  font-size: 14px;
  padding: 10px 35px;
  transition: 1s;
}

.btn.btn-gradient:hover {
  opacity: 0.6;
}

.btn.important-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 2px 1px var(--black-30);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  height: 50px;
  border-radius: 10px;
  border: 1px var(--color-primary-dark) solid;
  border-bottom: 2px var(--color-primary-dark) solid;
}

.btn.important-btn:hover {
  background-color: var(--color-primary-link);
}

.btn.important-btn:focus-visible,
.btn.important-btn:active {
  outline: none;
  box-shadow: 0px 1px 0px var(--black-20) inset;
  border-color: transparent;
  background: var(--color-primary-border-alt);
  transform: translateY(1px) scale(0.99);
}

.btn.important-btn.important-btn-pressed {
  transform: translateY(2px) scale(0.99);
  background: var(--bg-raised);
  border-color: var(--bg-raised-border);
  border-bottom-width: 1px;
  box-shadow: 0 3px 8px var(--black-60) inset, 0 1px 3px var(--black-40) inset;
  color: var(--white-40);
  cursor: not-allowed;
  pointer-events: none;
}
.btn.important-btn.important-btn-pressed:hover {
  background: var(--bg-raised);
}

.btn.secondary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--border-panel);
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 2px 1px var(--black-30);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  height: 50px;
  border-radius: 10px;
  border: 1px var(--bg-elevated) solid;
  border-bottom: 2px var(--bg-elevated) solid;
}

.btn.secondary-btn:hover {
  background-color: var(--border-muted);
}

.btn.secondary-btn:focus-visible,
.btn.secondary-btn:active {
  outline: none;
  box-shadow: 0px 1px 0px var(--black-20) inset;
  border-color: transparent;
  background: var(--border-panel);
  transform: translateY(1px) scale(0.99);
}

.balance-change-popup {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(0);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.balance-change-popup.gain {
  color: var(--color-emerald-400);
  background: none;
  border: none;
}

.balance-change-popup.loss {
  color: var(--color-slate-300);
  background: none;
  border: none;
}

.balance-change-popup.animate {
  opacity: 1;
}

.balance-change-popup.gain.animate {
  transform: translateX(-50%) translateY(-8px);
}

.balance-change-popup.loss.animate {
  transform: translateX(-50%) translateY(8px);
}

.balance-change-popup.fade-out {
  opacity: 0 !important;
  transition: opacity 0.35s ease;
}

.balance-change-popup.pop-bump {
  animation: popBump 0.35s ease;
}

@keyframes popBump {
  0% {
    transform: translateX(-50%) translateY(-8px) scale(1);
  }
  40% {
    transform: translateX(-50%) translateY(-8px) scale(1.25);
  }
  70% {
    transform: translateX(-50%) translateY(-8px) scale(0.95);
  }
  100% {
    transform: translateX(-50%) translateY(-8px) scale(1);
  }
}
.balance-change-popup.loss.pop-bump {
  animation: popBumpLoss 0.35s ease;
}

@keyframes popBumpLoss {
  0% {
    transform: translateX(-50%) translateY(8px) scale(1);
  }
  40% {
    transform: translateX(-50%) translateY(8px) scale(1.25);
  }
  70% {
    transform: translateX(-50%) translateY(8px) scale(0.95);
  }
  100% {
    transform: translateX(-50%) translateY(8px) scale(1);
  }
}
.balance-change-icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  object-fit: contain;
}

.nav-profile-dropdown-wrap {
  position: relative;
}

.nav-profile-menu {
  display: flex;
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  min-width: 200px;
  background: var(--bg-dropdown-dark);
  border: 1px solid var(--white-07);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px var(--black-50);
  z-index: 10000;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-profile-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 72px;
  width: 12px;
  height: 12px;
  background: var(--bg-dropdown-dark);
  border-left: 1px solid var(--white-07);
  border-top: 1px solid var(--white-07);
  transform: rotate(45deg);
}
.nav-profile-menu.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nav-profile-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-75);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.nav-profile-item i {
  width: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-40);
  flex-shrink: 0;
  transition: color 0.12s ease;
}
.nav-profile-item:hover {
  background: var(--white-06);
  color: var(--color-white);
}
.nav-profile-item:hover i {
  color: var(--white-70);
}
.nav-profile-item--danger {
  color: var(--red-400-80);
}
.nav-profile-item--danger i {
  color: var(--red-400-50);
}
.nav-profile-item--danger:hover {
  background: var(--red-500-10);
  color: var(--color-red-400);
}
.nav-profile-item--danger:hover i {
  color: var(--color-red-400);
}

.nav-profile-divider {
  height: 1px;
  background: var(--white-06);
  margin: 4px 0;
}

.pill-switch {
  background: var(--bg-dark);
  border: 0px solid var(--bg-modal-alt);
  border-radius: 10px;
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  flex-wrap: nowrap;
  white-space: nowrap;
  transition: background-color 0.08s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.08s ease;
}

.pill-switch--lg {
  padding: 3px;
  gap: 3px;
  border-radius: 10px;
}

.pill {
  background: transparent;
  border: none;
  color: var(--text-65);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 600;
  flex: 0 0 auto;
  transition: background-color 0.08s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.08s ease;
}

.pill-switch--lg .pill {
  padding: 10px 16px;
  font-size: 15px;
  text-align: center;
  border-radius: 8px;
}

.pill.active {
  background: var(--bg-panel-border);
  color: var(--text-primary);
}

.pill:hover,
.pill:focus-visible {
  background: var(--bg-modal-alt);
  color: var(--text-primary);
  outline: none;
}

.pill:active {
  transform: translateY(1px) scale(0.99);
}

.panel-header .pill-switch,
.table-pill-switch,
.pill-switch--lg {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.panel-header .pill-switch::-webkit-scrollbar,
.table-pill-switch::-webkit-scrollbar,
.pill-switch--lg::-webkit-scrollbar {
  display: none;
}

:root {
  --modal-surface: var(--bg-slate-mid);
  --modal-highlight: var(--primary-65);
  --modal-border: var(--white-08);
  --modal-text: var(--text-primary);
  --modal-muted: var(--text-70);
}

.modal.fade {
  transition: none !important;
  opacity: 1 !important;
}

.modal-backdrop {
  transition: none !important;
  background-color: var(--color-black);
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.55;
}

.modal.fade .modal-dialog {
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.modal.show .modal-dialog {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog,
  .modal.fade.show .modal-dialog,
  .modal.show .modal-dialog,
  .modal-backdrop,
  .modal-backdrop.show {
    transition: none;
    transform: none;
    opacity: 1;
  }
  .modal-backdrop,
  .modal-backdrop.show {
    opacity: 0.25;
  }
}
.auth-modal-dialog {
  max-width: 820px;
  filter: drop-shadow(0 28px 60px var(--black-65));
}

.auth-modal-dialog--sm {
  max-width: 440px;
}

.auth-modal-content {
  background: transparent;
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--white-06);
}

.auth-modal-content--sm {
  background: var(--bg-surface);
}

.auth-modal-split {
  display: flex;
  min-height: 520px;
}

.auth-modal-hero {
  width: 300px;
  min-width: 300px;
  background: linear-gradient(160deg, var(--bg-midnight) 0%, var(--bg-midnight-blue) 35%, var(--bg-midnight-deep) 60%, var(--bg-navy) 100%);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border-right: 1px solid var(--white-06);
}

.auth-modal-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 75%, var(--primary-15) 0%, transparent 55%), radial-gradient(ellipse at 30% 20%, var(--indigo-500-08) 0%, transparent 50%);
  pointer-events: none;
}

.auth-modal-hero::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, var(--primary-03) 60deg, transparent 120deg, var(--indigo-500-03) 240deg, transparent 360deg);
  animation: authHeroShimmer 12s linear infinite;
  pointer-events: none;
}

@keyframes authHeroShimmer {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.auth-modal-hero-inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 36px 28px 0;
  position: relative;
  z-index: 1;
}

.auth-modal-hero-text {
  text-align: center;
}

.auth-hero-welcome {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white-50);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  margin-bottom: 6px;
}

.auth-hero-brand {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.1;
  margin-bottom: 14px;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--color-white-full) 0%, var(--color-indigo-300) 40%, var(--color-blue-light) 70%, var(--color-white-full) 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: authBrandShine 4s ease-in-out infinite;
}

.auth-hero-dot {
  background: linear-gradient(135deg, var(--color-primary), var(--color-indigo-500));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes authBrandShine {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}
.auth-modal-hero-text h2 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.auth-modal-hero-text p {
  font-size: 0.82rem;
  color: var(--white-45);
  line-height: 1.6;
  margin: 0;
}

.auth-modal-avatar {
  width: 240px;
  height: auto;
  margin-top: auto;
  display: block;
  filter: drop-shadow(0 8px 32px var(--black-50));
}

.auth-modal-form-side {
  flex: 1;
  background: var(--bg-surface);
  padding: 28px 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-y: auto;
  max-height: 90vh;
}

.auth-modal-form-side--solo {
  padding: 32px 36px 28px;
}

.auth-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  filter: invert(1) grayscale(1);
  opacity: 0.6;
  z-index: 2;
  padding: 6px;
}

.auth-modal-close:hover {
  opacity: 1;
}

.auth-modal-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  padding-right: 32px;
}

.auth-tab {
  background: none;
  border: none;
  color: var(--white-40);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 6px 0;
  margin-right: 24px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}

.auth-tab:hover {
  color: var(--white-70);
}

.auth-tab.active {
  color: var(--color-white);
  border-bottom-color: var(--color-primary);
}

.auth-tab-pane {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.auth-field {
  margin-bottom: 14px;
}

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  left: 14px;
  color: var(--white-30);
  font-size: 14px;
  pointer-events: none;
  z-index: 1;
}

.auth-modal-form-side .form-control {
  background: var(--white-06);
  border: 1px solid var(--white-08);
  border-radius: 10px;
  color: var(--color-white);
  padding: 12px 44px 12px 40px;
  font-size: 0.9rem;
  box-shadow: none;
  transition: border-color 0.15s, background 0.15s;
}

.auth-modal-form-side .form-control::placeholder {
  color: var(--white-35);
  font-weight: 500;
}

.auth-modal-form-side .form-control:focus {
  background: var(--white-09);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--primary-15);
  color: var(--color-white);
}

.auth-eye-btn {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--white-35);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  z-index: 1;
  border-radius: 8px;
  transition: color 0.15s;
}

.auth-eye-btn:hover {
  color: var(--white-70);
}

.auth-terms {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 0.78rem;
  color: var(--white-45);
  line-height: 1.4;
}

.auth-terms .form-check-input {
  margin-top: 2px;
  flex-shrink: 0;
}

.auth-terms a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}

.auth-terms a:hover {
  text-decoration: underline;
}

.auth-cta-btn {
  border-radius: 10px;
  font-size: 0.95rem;
  padding: 12px 24px;
}

.auth-wc-btn {
  border-radius: 10px;
  font-size: 0.9rem;
  padding: 12px 24px;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--white-25);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--white-08);
}

.auth-social-row {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.auth-social-btn {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--white-06);
  border: 1px solid var(--white-08);
  color: var(--white-55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  padding: 0;
}

.auth-social-btn:hover {
  background: var(--white-10);
  border-color: var(--white-15);
  color: var(--color-white);
}

.auth-switch-text {
  text-align: center;
  margin-top: 18px;
  font-size: 0.85rem;
  color: var(--white-40);
}

.auth-switch-text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
  margin-left: 4px;
}

.auth-switch-text a:hover {
  text-decoration: underline;
}

.auth-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.auth-options .form-check-label {
  color: var(--white-45);
  font-size: 0.82rem;
}

.auth-options a {
  color: var(--white-45);
  font-size: 0.82rem;
  text-decoration: none;
}

.auth-options a:hover {
  color: var(--color-primary);
}

.auth-solo-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 8px;
}

.auth-solo-desc {
  font-size: 0.85rem;
  color: var(--white-45);
  margin-bottom: 16px;
  line-height: 1.5;
}

.auth-solo-desc strong {
  color: var(--color-white);
}

.auth-modal-form-side .alert-danger {
  background: var(--error-12);
  border: 1px solid var(--error-25);
  color: var(--color-error);
  border-radius: 10px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

.auth-modal-form-side .pw-strength {
  margin-top: 8px;
}

.auth-modal-form-side .pw-strength-bar {
  height: 3px;
  background: var(--white-08);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}

.auth-modal-form-side .pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 2px;
  transition: width 0.2s, background 0.2s;
}

.auth-modal-form-side .pw-strength-fill.weak {
  background: var(--color-error);
}

.auth-modal-form-side .pw-strength-fill.fair {
  background: var(--color-orange-soft);
}

.auth-modal-form-side .pw-strength-fill.good {
  background: var(--color-primary);
}

.auth-modal-form-side .pw-strength-fill.strong {
  background: var(--color-green-accent);
}

.auth-modal-form-side .pw-strength-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 0.72rem;
}

.auth-modal-form-side .pw-strength-reqs span {
  color: var(--white-30);
  transition: color 0.15s;
}

.auth-modal-form-side .pw-strength-reqs span.met {
  color: var(--color-green-accent);
}

.auth-modal-form-side .pw-strength-reqs span.unmet {
  color: var(--color-error);
}

@media (max-width: 767px) {
  .auth-modal-dialog {
    max-width: 100%;
    margin: 8px;
  }
  .auth-modal-split {
    flex-direction: column;
    min-height: auto;
  }
  .auth-modal-hero {
    width: 100%;
    min-width: unset;
    min-height: 140px;
    max-height: 160px;
    border-right: none;
    border-bottom: 1px solid var(--white-06);
    flex-direction: row;
    align-items: center;
  }
  .auth-modal-hero-inner {
    flex-direction: row;
    padding: 20px 24px 0;
    align-items: center;
    gap: 16px;
  }
  .auth-modal-hero-text {
    text-align: left;
    flex: 1;
  }
  .auth-hero-welcome {
    font-size: 0.7rem;
    margin-bottom: 2px;
    letter-spacing: 0.15em;
  }
  .auth-hero-brand {
    font-size: 1.5rem;
    margin-bottom: 6px;
  }
  .auth-modal-hero-text h2 {
    font-size: 1.15rem;
  }
  .auth-modal-hero-text p {
    font-size: 0.78rem;
  }
  .auth-modal-avatar {
    width: 120px;
  }
  .auth-modal-form-side {
    padding: 20px 20px 16px;
    max-height: 60vh;
  }
}
#forgotPasswordModal .auth-modal-form-side a {
  color: var(--color-primary);
  text-decoration: none;
}

#forgotPasswordModal .auth-modal-form-side a:hover {
  text-decoration: underline;
}

.bet-detail-modal .modal-dialog {
  filter: drop-shadow(0 28px 60px var(--black-65));
}

.bet-detail-modal .modal-content {
  background: var(--bg-modal-content);
  border-bottom: 2px solid var(--bg-modal-alt);
  border-radius: 15px;
  padding: 16px;
  padding-bottom: 0px;
  box-shadow: 0 0 10px var(--black-25);
}

.bet-detail-modal .modal-header {
  border-color: var(--modal-border);
  padding-bottom: 12px;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  position: relative;
  padding-top: 12px;
}

.bet-detail-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.8;
  margin-left: auto;
  position: static;
}

.bet-detail-modal .btn-close:hover {
  opacity: 1;
}

.bet-detail-modal .modal-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--modal-muted);
  margin-bottom: 4px;
}

.bet-detail-modal .modal-title {
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-white);
  margin-bottom: 2px;
  width: 100%;
  justify-content: center;
  display: flex;
}

.bet-detail-modal .modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
}

.bet-detail-modal .modal-header-top .modal-label {
  margin-bottom: 0;
}

.bet-detail-modal .modal-subtext {
  color: var(--modal-muted);
  font-size: 13px;
  width: 100%;
}

.bet-detail-modal .user-link {
  color: var(--color-white);
  font-weight: 800;
  text-decoration: none;
}

.bet-detail-modal .user-link:hover, .bet-detail-modal .user-link:focus-visible {
  color: var(--color-white);
  text-decoration: none;
}

.bet-detail-modal .rank-icon {
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
  object-fit: contain;
  filter: drop-shadow(0 2px 0 var(--black-25));
}

.bet-detail-modal .modal-body {
  padding-top: 12px;
}

.bet-detail-modal .stat-grid {
  display: flex;
  background: var(--bg-slate-dark);
  border: 1px solid var(--modal-border);
  border-radius: 8px;
  overflow: hidden;
}

.bet-detail-modal .stat-card {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 14px 16px;
  text-align: center;
}

.bet-detail-modal .stat-card + .stat-card {
  border-left: 1px solid var(--white-08);
}

.bet-detail-modal .stat-label {
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--white-70);
  margin-bottom: 6px;
}

.bet-detail-modal .stat-value {
  font-weight: 700;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bet-detail-modal .text-success {
  color: var(--color-success) !important;
}

.bet-detail-modal .meta-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.bet-detail-modal .meta-line + .meta-line {
  margin-top: 2px;
}

.bet-detail-modal .meta-line--sub {
  font-size: 12px;
  color: var(--modal-muted);
  opacity: 0.9;
}

.bet-detail-modal .meta-line .dot {
  opacity: 0.6;
}

.bet-detail-modal .meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--white-06);
  border-radius: 999px;
  font-weight: 700;
}

.bet-detail-modal .meta-chip--solo {
  margin-top: 2px;
  align-self: center;
}

.bet-detail-modal .meta-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
}

.bet-detail-modal .meta-actions {
  display: inline-flex;
  gap: 0px;
  align-items: center;
}

.bet-detail-modal .icon-btn.ghost {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 0px;
  background: transparent;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bet-detail-modal .modal-actions .btn {
  border-radius: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.bet-detail-modal .fairness-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--modal-muted);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.bet-detail-modal .fairness-collapse.is-open + .modal-footer,
.bet-detail-modal .fairness-collapse.show + .modal-footer {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}

.bet-detail-modal .fairness-collapse {
  border-top: 1px solid var(--modal-border);
  background: var(--bg-dark);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  width: calc(100% + 32px);
  margin: 0 -16px;
}

.bet-detail-modal .modal-content.fairness-open .modal-footer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.bet-detail-modal .fairness-body {
  padding: 12px 16px 16px;
  display: grid;
  gap: 8px;
}

.bet-detail-modal .fairness-form {
  gap: 12px;
}

.bet-detail-modal .fairness-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--modal-muted);
  margin-bottom: 6px;
}

.bet-detail-modal .field-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.bet-detail-modal .fairness-field input {
  width: 100%;
  background: var(--white-04);
  border: 1px solid var(--modal-border);
  border-radius: 8px;
  color: var(--color-white);
  padding: 10px 12px;
  font-weight: 700;
  font-size: 13px;
}

.bet-detail-modal .fairness-field input:disabled {
  opacity: 0.55;
}

.bet-detail-modal .icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--modal-border);
  background: var(--white-05);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bet-detail-modal .fairness-duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.bet-detail-modal .fairness-note {
  font-size: 12px;
  color: var(--modal-muted);
  margin-top: 4px;
}

.bet-detail-modal .fairness-help {
  color: var(--color-blue-sky);
  font-weight: 700;
  font-size: 12px;
  text-align: left;
  padding: 0;
  margin-top: 6px;
  background: none;
  border: none;
}

.bet-detail-modal .modal-footer {
  border: 0px;
  margin: 0 -16px 0px;
  width: calc(100% + 32px);
  padding: 0px;
  padding-inline: 16px;
  background: var(--bg-dark);
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.bet-detail-modal .currency-chip {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 2px 0 var(--black-30));
}

@media (max-width: 576px) {
  .modal-dialog {
    width: 98vw;
    max-width: 98vw;
    margin: 0 auto;
    max-height: 92vh;
    aspect-ratio: var(--viewport-aspect, auto);
  }
  .modal-dialog-centered {
    align-items: center;
    min-height: 100%;
  }
  .bet-detail-modal .modal-dialog,
  .user-detail-modal .modal-dialog,
  .auth-modal-dialog,
  #forgotPasswordModal .modal-dialog {
    width: 98vw;
    max-width: 98vw;
    margin: 0 auto;
  }
}
.oauth-buttons .oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  text-decoration: none;
}
.oauth-buttons .oauth-btn[data-provider=google] i {
  color: var(--color-google);
}
.oauth-buttons .oauth-btn[data-provider=discord] i {
  color: var(--color-discord);
}
.oauth-buttons .oauth-btn[data-provider=github] i {
  color: var(--color-white);
}

.pw-strength {
  margin-top: 8px;
}

.pw-strength-bar {
  height: 4px;
  background: var(--white-08);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.pw-strength-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  transition: width 0.25s ease, background 0.25s ease;
}
.pw-strength-fill.weak {
  background: var(--color-red-500);
}
.pw-strength-fill.fair {
  background: var(--color-amber-500);
}
.pw-strength-fill.good {
  background: var(--color-blue-500);
}
.pw-strength-fill.strong {
  background: var(--color-green-500);
}

.pw-strength-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.pw-strength-reqs span {
  font-size: 0.7rem;
  color: var(--white-35);
  transition: color 0.2s;
}
.pw-strength-reqs span.met {
  color: var(--color-green-500);
}
.pw-strength-reqs span.unmet {
  color: var(--color-red-500);
}

.user-detail-modal {
  z-index: 1200;
}

.user-detail-modal .modal-backdrop {
  z-index: 1199;
}

.user-detail-modal .modal-dialog {
  max-width: 380px;
  filter: drop-shadow(0 28px 60px var(--black-65));
}

.user-detail-modal .modal-content {
  background: var(--bg-modal-content);
  border-bottom: 2px solid var(--bg-modal-alt);
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 0 10px var(--black-25);
  overflow: visible;
}

.user-detail-modal .modal-header {
  border-bottom: none;
  padding: 16px 20px 12px;
}

.user-detail-modal .modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.user-detail-modal .modal-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-50);
}

.user-detail-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.8;
}

.user-detail-modal .btn-close:hover {
  opacity: 1;
}

.user-detail-modal .modal-body {
  padding: 0;
}

.user-modal-banner {
  position: relative;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  margin: 10px 10px 0;
  /* Match the avatar's frameless floating-card treatment: drop the border
     ring and apply the same layered shadow recipe used on hero-profile-avatar. */
  box-shadow: 0 6px 16px var(--black-40), 0 2px 4px var(--black-40), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

.user-modal-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.user-modal-decoration-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
}

.user-modal-decoration-img[src*="none.webp"] {
  display: none;
}

.user-modal-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 16px;
  margin-top: -40px;
  position: relative;
  z-index: 3;
}

.user-modal-avatar {
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background: linear-gradient(to bottom, var(--avatar-color, var(--bg-modal-alt)), color-mix(in srgb, var(--avatar-color, var(--bg-modal-alt)), black 15%));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text-60);
  /* Match the hero-profile-avatar shadow recipe so all three pfp surfaces
     share the same frameless floating-card feel. */
  box-shadow: 0 6px 16px var(--black-40), 0 2px 4px var(--black-40), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  margin-bottom: 10px;
  overflow: hidden;
}

.user-modal-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.user-modal-name-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 2px;
}

.user-modal-username {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 5px 0;
  letter-spacing: 0.01em;
  text-align: center;
}

.user-modal-badges-row {
  display: flex;
  gap: 4px;
  justify-content: center;
}

.user-modal-rank-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.user-modal-rank {
  width: 28px;
  height: 28px;
  object-fit: contain;
  filter: drop-shadow(0 1px 3px var(--black-40));
}

.user-modal-rank-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-60);
  letter-spacing: 0.03em;
}

.user-modal-badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 3px;
  opacity: 0.85;
}

.user-modal-badge[src*="none.webp"] {
  display: none;
}

.user-modal-joined {
  font-size: 12px;
  color: var(--text-40);
  font-weight: 500;
}

.user-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 0 16px 16px;
}

.user-modal-stat {
  background: var(--panel-bg-60);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}

.user-modal-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.user-modal-stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

.user-modal-actions {
  display: flex;
  gap: 8px;
  margin: 0 16px 16px;
}

.user-modal-btn {
  flex: 1;
}

.tip-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.tip-back-btn {
  background: none;
  border: none;
  color: var(--text-60);
  font-size: 16px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.tip-back-btn:hover {
  color: var(--color-white);
  background: var(--white-06);
}

.tip-header-title {
  font-size: 15px;
  color: var(--text-70);
  font-weight: 500;
}

.tip-header-title strong {
  color: var(--color-white);
}

.tip-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tip-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tip-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tip-currency-select {
  position: relative;
}

.tip-currency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  color: var(--color-white);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tip-currency-btn:hover {
  border-color: var(--white-12);
}

.tip-currency-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.tip-currency-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--bg-dropdown-mid);
  border: 1px solid var(--white-08);
  border-radius: 10px;
  margin-top: 4px;
  max-height: 260px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--black-40);
  flex-direction: column;
}

.tip-currency-dropdown.open {
  display: flex;
}

.tip-amount-row {
  display: flex;
  gap: 8px;
}

.tip-amount-input {
  flex: 1;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  color: var(--color-white);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: border-color 0.15s ease;
}

.tip-amount-input::placeholder {
  color: var(--text-25);
}

.tip-amount-input:focus {
  border-color: var(--color-primary);
}

.tip-max-btn {
  background: var(--primary-15);
  border: 1px solid var(--primary-30);
  color: var(--color-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}

.tip-max-btn:hover {
  background: var(--primary-25);
}

.tip-balance-info {
  font-size: 12px;
  color: var(--text-35);
  font-weight: 500;
}

.tip-alert {
  background: var(--red-danger-15);
  border: 1px solid var(--red-danger-30);
  color: var(--color-red-glow);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
}

.tip-send-btn {
  width: 100%;
}

.tip-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tip-success {
  text-align: center;
  padding: 20px 0;
}

.tip-success-icon {
  font-size: 48px;
  color: var(--color-success);
  margin-bottom: 12px;
}

.tip-success-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 4px;
}

.tip-success-detail {
  font-size: 13px;
  color: var(--text-50);
}

.game-layout {
  padding: 80px 10px 40px;
  max-width: 1320px;
  margin: 0 auto;
  color: var(--text-primary);
}

.game-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.balance-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white-06);
  border: 1px solid var(--white-08);
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 600;
  color: var(--text-primary);
}

.game-shell {
  background: var(--bg-body-mobile);
  border-radius: 8px;
  padding: 16px;
  padding-bottom: 0px;
  box-shadow: 0 0 10px var(--black-25);
}

.game-shell__grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-areas: "board panel" "footer footer";
  gap: 12px;
  align-items: start;
  /* Prevent grid children from forcing horizontal overflow */
}

.game-shell__grid > * {
  min-width: 0;
}

.panel-header--center {
  justify-content: center;
  margin-bottom: 8px;
}

html,
body,
.page-wrapper,
.game-layout {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

*::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.control-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.control-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.label_value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-grey);
  padding-right: 5px;
}

.mode-bets-only[hidden] {
  display: none !important;
}

.input_label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-grey);
  padding-left: 5px;
  letter-spacing: 0.2px;
}

.ui_input_container {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  background: var(--bg-dark);
  border-radius: 10px;
  box-shadow: 0px 2px 1px var(--black-30), inset 0 0 10px var(--black-30);
  overflow: hidden;
  border: 2px solid var(--bg-modal-alt);
  transition: border-color 0.15s ease;
}

.ui_input_container:hover {
  border-color: var(--border-dark);
}

.ui_input_container .input-shell {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  height: 100%;
  background: var(--bg-dark);
  border: none;
  border-radius: 0;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ui_input_container .input-shell:only-child {
  border-radius: 0;
}

.ui_input_container .input-shell input {
  max-width: 100%;
  padding-right: 12px;
}

.ui_input_container .input-shell:hover {
  border-color: var(--border-dark);
}

.ui_input_container .input-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  margin-left: 10px;
  pointer-events: none;
}

.currency-img {
  height: 24px;
  width: 24px;
  object-fit: contain;
  -webkit-filter: drop-shadow(0px 2px 0px var(--black-30));
  filter: drop-shadow(0px 2px 0px var(--black-30));
}

.ui_input_container input {
  flex: 1 1 auto;
  height: 100%;
  border: none;
  padding: 0 12px;
  border-radius: 0;
  background: var(--bg-dark);
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  -moz-appearance: textfield;
}

.ui_input_container input::-webkit-outer-spin-button,
.ui_input_container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.ui_input_container input:focus {
  outline: none;
}

.ui_input_container .btn {
  height: 100%;
  min-width: 60px;
  flex: 0 0 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0px solid var(--bg-modal-alt);
  box-shadow: none;
  background: var(--bg-panel-border);
  color: var(--text-65);
  font-weight: 600;
  font-size: 14px;
}

.ui_input_container .btn:hover,
.ui_input_container .btn:focus-visible {
  background: var(--bg-btn-hover);
  color: var(--text-primary);
}

.ui_input_container .btn.half {
  border-radius: 0px;
  border-right: 0px;
  border-left: 0px;
  position: relative;
}

.ui_input_container .btn.half::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--bg-dark);
  pointer-events: none;
}

.ui_input_container .btn.double {
  border-radius: 0px;
  border-left: 0px;
  position: relative;
}

.ui_input_container .btn.double::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--bg-dark);
  pointer-events: none;
}

.ui_input_container .btn.double::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--bg-dark);
  pointer-events: none;
}

.bet-count-inf {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  color: var(--color-gray-steel);
  pointer-events: none;
  line-height: 1;
}

.ui_input_container .btn.max {
  border-radius: 0px 8px 8px 0px;
  border-left: 0px;
  position: relative;
}

.ui_input_container .btn.max::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60%;
  background: var(--bg-dark);
  pointer-events: none;
}

.ui_input_container .btn.important-btn {
  color: var(--text-primary);
}

.side-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.side-buttons .btn {
  height: 44px;
  border-radius: 10px;
  color: var(--text-65);
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0px 2px 1px var(--black-30);
  background: var(--border-panel);
  border: 1px var(--bg-elevated) solid;
  border-bottom: 2px var(--bg-elevated) solid;
  transition: background-color 0.08s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.08s ease;
}

.side-buttons .btn:hover,
.side-buttons .btn:focus-visible {
  background-color: var(--border-muted);
  color: var(--text-primary);
  border-color: var(--bg-elevated);
}

.side-buttons .btn.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary-dark);
  color: var(--text-primary);
  box-shadow: 0px 2px 1px var(--black-30);
}

.side-buttons .btn.is-active:hover,
.side-buttons .btn.is-active:focus-visible {
  background: var(--color-primary-link);
  border-color: var(--color-primary-dark);
}

.side-buttons .btn.is-active:active {
  box-shadow: 0px 1px 0px var(--black-20) inset;
}

.game_bet_btn {
  width: 100%;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.game-panel,
.game-board {
  border-radius: 10px;
}

.game-panel {
  grid-area: panel;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-board {
  grid-area: board;
  background: var(--panel-bg-95);
  box-shadow: inset 0 0 10px var(--black-30);
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  height: 560px;
  max-height: 560px;
  overflow: hidden;
}

@media (max-width: 992px) {
  .game-board {
    max-height: 560px;
  }
}
@media (max-width: 576px) {
  .game-board {
    height: auto;
    max-height: none;
    min-height: 260px;
  }
}
.game-footer {
  grid-area: footer;
  min-height: 50px;
  background: var(--bg-panel);
  border: 0px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  width: calc(100% + 32px);
  margin: 0 -16px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.game-footer .footer-left,
.game-footer .footer-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-footer .footer-left {
  justify-content: flex-start;
}

.game-footer .footer-right {
  justify-content: flex-end;
}

.game-footer .footer-right .btn {
  background-color: var(--border-panel);
  box-shadow: 0px 2px 1px var(--black-30);
  border: 1px var(--bg-elevated) solid;
  border-bottom: 2px var(--bg-elevated) solid;
  color: var(--text-65);
}

.game-footer .footer-right .btn:hover {
  background-color: var(--border-muted);
  color: var(--text-primary);
  border-color: var(--bg-elevated);
}

.game-footer .footer-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-footer .footer-logo {
  width: auto;
  height: 28px;
  max-width: 160px;
  object-fit: contain;
}

.footer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-soft-blue);
  border: 0px;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 13px;
  transition: background-color 0.08s ease, transform 0.15s ease, box-shadow 0.15s ease, border-color 0.08s ease;
}

.footer-btn i {
  font-size: 18px;
}

.pvp-lava-btn {
  background: linear-gradient(135deg, var(--color-red-vivid), var(--color-orange-vivid), var(--color-red-vivid));
  background-size: 200% 200%;
  animation: lavaShift 3s ease infinite, lavaGlow 2.5s ease-in-out infinite alternate;
  color: var(--color-white) !important;
  text-decoration: none;
  box-shadow: 0 0 4px var(--orange-red-25), 0 0 10px var(--orange-red-10);
  border: 1px solid var(--color-red-900);
}

.pvp-lava-btn:hover,
.pvp-lava-btn:focus-visible {
  box-shadow: 0 0 8px var(--orange-red-40), 0 0 16px var(--orange-red-20);
  transform: scale(1.05);
}

.pvp-btn-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  -webkit-filter: drop-shadow(0 1px 2px var(--black-40));
  filter: drop-shadow(0 1px 2px var(--black-40));
}

@keyframes lavaShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
@keyframes lavaGlow {
  0% {
    box-shadow: 0 0 4px var(--orange-red-20), 0 0 8px var(--orange-red-08);
  }
  100% {
    box-shadow: 0 0 6px var(--orange-red-35), 0 0 14px var(--orange-red-15);
  }
}
.footer-btn:hover,
.footer-btn:focus-visible {
  color: var(--text-primary);
}

.favorite-btn.is-favorited i {
  color: var(--color-gold);
}

.favorite-btn.is-spinning i {
  animation: favSpin 0.4s ease;
}

@keyframes favSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.3);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}
.turbo-btn.is-active i {
  color: var(--color-blue-500);
  filter: drop-shadow(0 0 4px var(--blue-500-60));
}

.live-stats-btn.is-active i {
  color: var(--color-green-500);
  filter: drop-shadow(0 0 4px var(--green-500-60));
}

.live-stats-btn.is-sparking i {
  animation: liveStatsSpark 0.4s ease;
}

@keyframes liveStatsSpark {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
.turbo-btn.is-sparking i {
  animation: turboSpark 0.4s ease;
}

@keyframes turboSpark {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 transparent);
  }
  40% {
    transform: scale(1.4);
    filter: drop-shadow(0 0 10px var(--blue-500-90));
  }
  70% {
    transform: scale(0.9);
    filter: drop-shadow(0 0 6px var(--blue-500-50));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--blue-500-60));
  }
}
/* ── Settings button ───────────────────────────── */
.settings-btn-wrap {
  position: relative;
  display: inline-flex;
}

.settings-btn > i {
  transition: transform 0.35s ease;
}

.settings-btn-wrap.is-open .settings-btn > i {
  transform: rotate(180deg);
}

/* ── Settings Dropup ──────────────────────────── */
.settings-dropup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--bg-modal);
  border: 1px solid var(--bg-elevated);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 -4px 24px var(--black-45);
  z-index: 100;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.settings-dropup.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.settings-dropup::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 16px;
  width: 12px;
  height: 12px;
  background: var(--bg-modal);
  border-right: 1px solid var(--bg-elevated);
  border-bottom: 1px solid var(--bg-elevated);
  transform: rotate(45deg);
}

.settings-dropup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  color: var(--text-grey-70);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-align: left;
  white-space: nowrap;
}

.settings-dropup-item:hover {
  background: var(--white-06);
  color: var(--text-primary);
}

.settings-dropup-item i {
  width: 18px;
  font-size: 15px;
  text-align: center;
  color: var(--text-grey-45);
  transition: color 0.15s;
}

.settings-dropup-item:hover i {
  color: var(--text-grey-70);
}

.settings-dropup-item.is-active i {
  color: var(--color-blue-500);
}

.settings-dropup-divider {
  height: 1px;
  background: var(--bg-elevated);
  margin: 6px 12px;
}

/* Volume row */
.settings-volume-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
}

.settings-mute-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--text-grey-55);
  font-size: 15px;
  width: 18px;
  text-align: center;
  transition: color 0.15s;
}

.settings-mute-btn:hover {
  color: var(--text-primary);
}

.settings-mute-btn.is-muted {
  color: var(--color-red-500);
}

.settings-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--bg-float);
  outline: none;
  cursor: pointer;
}

.settings-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-blue-500);
  border: 2px solid var(--bg-modal);
  cursor: pointer;
  box-shadow: 0 0 6px var(--blue-500-40);
}

.settings-volume-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-blue-500);
  border: 2px solid var(--bg-modal);
  cursor: pointer;
  box-shadow: 0 0 6px var(--blue-500-40);
}

.panel-header,
.board-header {
  color: var(--text-soft-blue);
  font-weight: 600;
  letter-spacing: 0;
  margin-bottom: 12px;
}

.game-panel .btn,
.game-board .btn {
  border-radius: 10px;
}

.bet-input .btn,
.bet-input .form-control {
  background: var(--bg-dark);
  border: 1px solid var(--bg-modal-alt);
  color: var(--text-primary);
  box-shadow: inset 0 0 10px var(--black-30);
}

.bet-input {
  border-radius: 10px;
  border-bottom-color: var(--color-primary-dark);
  box-shadow: 0px 2px 1px var(--black-30);
}

.bet-input .form-control {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.bet-input .btn:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.bet-input .btn:hover,
.bet-input .btn:focus-visible {
  border-color: var(--color-primary);
  background: var(--bg-panel-border);
  color: var(--text-primary);
}

#gameShellReturn {
  padding-left: 0px !important;
}

.game-return,
.return-field {
  margin: 0;
  width: 100%;
  border-radius: 10px;
  background-color: var(--bg-dark);
  padding-left: 0;
  border: 2px solid var(--bg-modal-alt);
  box-shadow: 0px 2px 1px var(--black-30), inset 0 0 10px var(--black-30);
  font-size: 14px;
  color: var(--text-primary);
  padding: 10px 12px;
  padding-right: 46px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.game-return:hover,
.return-field:hover {
  border-color: var(--border-dark);
}

.game-return .input-currency,
.return-field .input-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  width: 24px;
  flex-shrink: 0;
  margin-left: 12px;
  pointer-events: none;
}

.game-panel .btn.important-btn,
.game-panel .btn.secondary-btn {
  box-shadow: 0px 2px 1px var(--black-30);
}

.board-body {
  background: transparent;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--text-primary);
  flex: 1;
}

.multiplier-display {
  font-size: clamp(42px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.game-info-expandable {
  margin-top: 20px;
  background-color: var(--bg-panel);
  border-radius: 8px;
}

.badge {
  background-color: var(--border-panel) !important;
}

@media (max-width: 992px) {
  .game-shell__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "board" "panel" "footer";
  }
  .game-panel {
    gap: 10px;
  }
  .game-panel .game_bet_btn {
    order: 1;
  }
  .game-panel .game_bet_btn + * {
    order: 1;
  }
  .game-panel .control-stack {
    order: 2;
  }
  .game-panel .panel-header {
    order: 3;
  }
}
@media (max-width: 768px) {
  .page-wrapper,
  body {
    overflow-x: hidden;
  }
  .game-shell,
  .game-layout {
    width: 100%;
    max-width: 100%;
  }
  .game-layout {
    padding-top: calc(env(safe-area-inset-top, 0px) + 70px);
  }
  .game-shell__grid {
    width: 100%;
  }
  .game-shell {
    padding: 10px 12px;
    padding-bottom: 0px;
    border-radius: 8px;
    box-shadow: none;
  }
  .game-footer {
    width: calc(100% + 24px);
    margin: 0 -12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    grid-template-columns: 1fr auto 1fr;
    padding: 10px 16px;
    gap: 12px;
    min-height: 50px;
  }
  .game-footer .footer-logo {
    width: auto;
    height: 24px;
    max-width: 120px;
    display: none;
  }
  .footer-btn {
    padding: 7px 10px;
    font-size: 12px;
  }
  .control-stack {
    gap: 12px;
  }
  .control-row {
    gap: 0px;
  }
  .panel-header,
  .board-header {
    margin-bottom: 8px;
  }
  [data-setting=hotkeys] {
    display: none !important;
  }
}
.gs-hotkeys-overlay {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1055;
  background: var(--black-00);
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: background 0.2s ease, opacity 0.2s ease;
}

.gs-hotkeys-overlay.is-open {
  background: var(--black-55);
  pointer-events: auto;
  opacity: 1;
}

.gs-hotkeys-modal {
  background: var(--bg-modal);
  border-radius: 12px;
  width: 100%;
  max-width: 420px;
  margin: 16px;
  box-shadow: 0 20px 60px var(--black-50);
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gs-hotkeys-overlay.is-open .gs-hotkeys-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.gs-hotkeys-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--white-07);
}

.gs-hotkeys-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}

.gs-hotkeys-title i {
  color: var(--white-50);
  font-size: 14px;
}

.gs-hotkeys-close {
  background: none;
  border: none;
  color: var(--white-40);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  line-height: 1;
  transition: color 0.15s;
}

.gs-hotkeys-close:hover {
  color: var(--text-primary);
}

.gs-hotkeys-body {
  padding: 16px 20px;
}

.gs-hotkeys-info {
  display: flex;
  gap: 12px;
  background: var(--white-05);
  border: 1px solid var(--white-08);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 20px;
}

.gs-hotkeys-info-icon {
  color: var(--color-blue-400);
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}

.gs-hotkeys-info p {
  margin: 0;
  font-size: 13px;
  color: var(--white-65);
  line-height: 1.5;
}

.gs-hotkeys-list {
  display: flex;
  flex-direction: column;
}

.gs-hotkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--white-06);
}

.gs-hotkey-row:last-child {
  border-bottom: none;
}

.gs-hotkey-label {
  font-size: 14px;
  color: var(--white-80);
}

.gs-hotkey-key {
  background: var(--bg-elevated);
  border: 1px solid var(--white-12);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--white-70);
  box-shadow: 0 2px 0 var(--black-30);
  min-width: 44px;
  text-align: center;
}

.gs-hotkeys-footer {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
}

.gs-hotkeys-cancel {
  flex: 1;
}

.gs-hotkeys-enable {
  flex: 1;
}

.gs-hotkeys-enable.is-enabled {
  background: var(--color-red-600);
  border-color: var(--color-red-600);
}

.gs-hotkeys-enable.is-enabled:hover {
  background: var(--color-red-500);
  border-color: var(--color-red-500);
}

.game-transparency-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-left: auto;
  margin-right: 12px;
}

.transparency-stat {
  text-align: center;
  line-height: 1;
}

.transparency-label {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--white-30);
  margin-bottom: 2px;
}

.transparency-value {
  display: block;
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white-70);
  line-height: 1;
}

.transparency-value--highlight {
  color: var(--color-green-400);
}

@media (max-width: 768px) {
  .game-transparency-bar {
    display: none;
  }
}
.game-dropdown {
  position: relative;
  width: 100%;
}

.game-dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--black-30);
  border: 1px solid var(--white-08);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.game-dropdown-toggle:hover {
  border-color: var(--white-15);
}

.game-dropdown.is-open .game-dropdown-toggle {
  border-color: var(--primary-40);
}

.game-dropdown-icon {
  font-size: 16px;
  line-height: 1;
}

.game-dropdown-label {
  flex: 1;
  text-align: left;
}

.game-dropdown-caret {
  font-size: 10px;
  color: var(--text-35);
  transition: transform 0.2s ease, color 0.15s ease;
}

.game-dropdown.is-open .game-dropdown-caret {
  transform: rotate(180deg);
  color: var(--text-65);
}

.game-dropdown-toggle:hover .game-dropdown-caret {
  color: var(--text-65);
}

.game-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  left: 0;
  right: 0;
  background: var(--bg-dropdown-dark);
  border: 1px solid var(--white-07);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px var(--black-50);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-10) transparent;
  top: calc(100% + 6px);
  transform: translateY(8px) scale(0.95);
}

.game-dropdown.is-open .game-dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.game-dropdown--up .game-dropdown-menu {
  top: auto;
  bottom: calc(100% + 6px);
  transform: translateY(-8px) scale(0.95);
}

.game-dropdown--up.is-open .game-dropdown-menu {
  transform: translateY(0) scale(1);
}

.game-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-75);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.game-dropdown-item[data-icon]::before {
  content: attr(data-icon);
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.game-dropdown-item:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.game-dropdown-item.is-active {
  background: var(--primary-12);
  color: var(--color-blue-400);
}

.game-dropdown--panel .game-dropdown-toggle {
  height: 50px;
  padding: 0 14px;
  background: var(--bg-dark);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 10px;
  box-shadow: 0px 2px 1px var(--black-30), inset 0 0 10px var(--black-30);
  justify-content: space-between;
  font-size: 14px;
  font-weight: 600;
}

.game-dropdown--panel .game-dropdown-toggle:hover {
  border-color: var(--border-dark);
}

.game-dropdown--panel.is-open .game-dropdown-toggle {
  border-color: var(--color-primary);
  background: var(--bg-slate);
}

.game-dropdown--panel .game-dropdown-caret {
  font-size: 0.65rem;
  color: var(--text-40);
}

.game-dropdown--panel .game-dropdown-item.is-active {
  background: var(--color-primary);
  color: var(--color-white);
}

.ui_input_container:has(.game-dropdown) {
  background: none;
  border: none;
  box-shadow: none;
  height: auto;
  overflow: visible;
}

.game-table {
  margin-top: 4px;
  margin-bottom: 12px;
  background: var(--bg-modal-content);
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 0 10px var(--black-25);
}

@media (max-width: 834px) {
  .game-table {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 16px 0;
  }
}
.game-table__wrap {
  border-radius: 12px;
  overflow: hidden;
}

#liveBetsBoard {
  min-height: 610px;
}

.game-table table {
  margin-bottom: 0;
  background: transparent;
  color: var(--text-cloud);
  border-collapse: separate;
  border-spacing: 0 4px;
  table-layout: fixed;
}

.game-table thead th {
  background: transparent;
  color: var(--text-72);
  border: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 12px 14px;
  font-size: 13px;
  text-align: center;
}

.game-table thead th:nth-child(1) {
  width: 22%;
}

.game-table thead th:nth-child(2) {
  width: 22%;
}

.game-table thead th:nth-child(3) {
  width: 20%;
}

.game-table thead th:nth-child(4) {
  width: 16%;
}

.game-table thead th:nth-child(5) {
  width: 20%;
}

.game-table thead th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.game-table thead th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.game-table tbody tr {
  background-color: transparent !important;
  transition: transform 0.35s ease-out, opacity 0.35s ease-out;
  min-height: 43px;
  height: 43px;
}

.game-table tbody tr.bet-row-shaded {
  background-color: var(--white-04) !important;
}

.game-table tbody tr.bet-row-exit {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.game-table tbody td {
  border: none;
  padding: 0;
  vertical-align: middle;
  text-align: center;
  background-color: transparent;
  font-size: 14px;
  font-weight: 500 !important;
  color: var(--text-grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-table .game-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.game-table .game-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1;
}

.game-table .game-icon img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.game-table .game-name {
  font-weight: 600;
  color: var(--text-primary);
}

.link-reset {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.game-table .game-link,
.game-table .user-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  color: inherit !important;
  text-decoration: none;
  padding: 0;
}

.game-table .game-link:hover,
.game-table .user-link:hover,
.game-table .game-link:focus-visible,
.game-table .user-link:focus-visible {
  text-decoration: none;
  outline: none;
}

.game-table .currency-symbol {
  margin-left: 6px;
  opacity: 0.85;
  font-weight: 700;
  color: inherit;
}

.game-table .currency-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain;
  vertical-align: middle;
  margin-bottom: 2px;
}

.game-table tbody td:first-child,
.game-table tbody td:nth-child(2) {
  color: var(--color-white);
}

.game-table tbody td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.game-table tbody td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  font-weight: 700;
}

.game-table tbody td.payout-loss {
  color: var(--text-cool-55) !important;
}

.game-table tbody td.payout-win {
  color: var(--color-success) !important;
  font-weight: 700;
}

.game-table .payout-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.game-table .payout-arrow {
  font-size: 10px;
  margin-left: 2px;
}

.game-table .payout-win .payout-arrow {
  color: var(--color-success);
}

.game-table .payout-loss .payout-arrow {
  color: var(--text-cool-40);
}

.game-table .bet-amount-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.game-table .rank-icon-sm {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  vertical-align: middle;
  object-fit: contain;
}

.game-table .text-success {
  color: var(--color-success) !important;
}

.game-table .text-danger {
  color: var(--text-mist-70) !important;
}

.live-bets-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
}

.live-bets-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 6px var(--success-60);
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.live-bets-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-80);
  white-space: nowrap;
}

.live-toggle-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  cursor: pointer;
}

.live-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.live-toggle-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white-12);
  border-radius: 22px;
  transition: background 0.25s;
}

.live-toggle-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  bottom: 3px;
  background: var(--color-white);
  border-radius: 50%;
  transition: transform 0.25s;
}

.live-toggle-switch input:checked + .live-toggle-slider {
  background: var(--color-primary-sky);
}

.live-toggle-switch input:checked + .live-toggle-slider::before {
  transform: translateX(18px);
}

.currency-chip {
  width: 20px !important;
  height: 20px !important;
}

@media (max-width: 768px) {
  .game-table {
    width: 100%;
    max-width: 100%;
    padding-inline: 0;
  }
  .live-bets-toggle {
    display: none !important;
  }
  .game-table__header {
    justify-content: center !important;
  }
  .table-pill-switch {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .table-pill-switch::-webkit-scrollbar {
    display: none;
  }
  .table-pill-switch .pill-switch {
    display: inline-flex;
    width: auto;
  }
  .table-pill-switch .pill-switch .pill {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
@keyframes liveFeedSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 65px;
  background: var(--overlay-abyss-95);
  border-right: 1px solid var(--white-06);
  display: flex;
  flex-direction: column;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
  overflow: hidden;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 260px;
  min-width: 260px;
}

.sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 8px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sidebar-scroll::-webkit-scrollbar {
  display: none;
}

.sidebar.is-expanded {
  width: 260px;
}

.sidebar-toggle {
  border: none;
  background: var(--white-06);
  color: var(--color-white);
  border-radius: 8px;
  width: 48px;
  height: 48px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background 0.2s ease;
  flex-shrink: 0;
  margin: 8px 8px 4px;
}

.sidebar-toggle:hover {
  background: var(--white-10);
}

/* ── Packz App Promo (BC.game style) ── */
.sidebar-promo {
  margin: 8px 0 6px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease;
}

.sidebar.is-expanded .sidebar-promo {
  opacity: 1;
  max-height: 200px;
}

.sidebar-promo-link {
  display: flex;
  flex-direction: column;
  background: var(--white-05);
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-white);
  overflow: hidden;
  transition: background 0.2s ease;
}

.sidebar-promo-link:hover {
  background: var(--white-08);
  color: var(--color-white);
}

.sidebar-promo-img-wrap {
  width: 100%;
  height: 90px;
  overflow: hidden;
}

.sidebar-promo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar-promo-bottom {
  padding: 10px 12px 12px;
}
.sidebar-promo-bottom strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-white);
}
.sidebar-promo-bottom span {
  display: block;
  font-size: 0.65rem;
  color: var(--white-45);
  margin-top: 2px;
  line-height: 1.35;
}

/* ── SKEL Token Row (BC.game style) ── */
.sidebar-token {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 0 0 6px;
  background: var(--white-05);
  border: none;
  border-radius: 8px;
  text-decoration: none;
  color: var(--color-white);
  transition: background 0.2s ease;
  overflow: hidden;
}

.sidebar-token:hover {
  background: var(--white-08);
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-token {
  display: none;
}

.sidebar-token-img {
  width: 24px;
  height: 24px;
  border-radius: 0px;
  object-fit: cover;
  flex-shrink: 0;
}

.sidebar-token-info {
  flex: 1;
  min-width: 0;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}
.sidebar-token-info strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-white);
}

.sidebar.is-expanded .sidebar-token-info {
  opacity: 1;
  width: auto;
}

.sidebar-token-price {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-emerald-400);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar.is-expanded .sidebar-token-price {
  opacity: 1;
}

/* ── Expandable Casino Section ── */
.sidebar-section {
  margin: 4px 0;
}

.sidebar-section-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  color: var(--white-70);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar.is-expanded .sidebar-section-toggle:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-section-toggle:hover {
  background: none;
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-section-toggle:hover > i:first-child {
  background: var(--white-06);
}

.sidebar-section-toggle > i:first-child {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
  border-radius: 8px;
}

.sidebar-section-toggle > span {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.sidebar-section-arrow {
  font-size: 0.65rem;
  margin-left: auto;
  margin-right: 12px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar.is-expanded .sidebar-section-toggle > span {
  opacity: 1;
  transform: translateX(0);
}

.sidebar.is-expanded .sidebar-section-arrow {
  opacity: 1;
}

.sidebar-section.is-open .sidebar-section-arrow {
  transform: rotate(180deg);
}

.sidebar-section-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar.is-expanded .sidebar-section.is-open .sidebar-section-list {
  max-height: 600px;
  padding: 4px 0;
}

.sidebar-section-list li a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 24px;
  color: var(--white-60);
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.sidebar-section-list li a:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.sidebar-section-list li a.active {
  color: var(--color-blue-500);
  background: var(--blue-500-08);
}

.sidebar-section-list li a i {
  width: 20px;
  text-align: center;
  font-size: 0.8rem;
}

.sidebar-locked {
  opacity: 0.4;
  pointer-events: none;
}

.sidebar-lock-icon {
  margin-left: auto;
  font-size: 0.55rem;
  opacity: 0.6;
}

.sidebar-browse-all {
  border-bottom: 1px solid var(--white-08);
  margin-bottom: 4px;
  padding-bottom: 4px;
}

/* ── Nav Links ── */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 4px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-nav li a {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border-radius: 8px;
  color: var(--white-70);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-nav li a i {
  font-size: 1rem;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-nav li a span {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  white-space: nowrap;
}

.sidebar.is-expanded .sidebar-nav li a:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-nav li a:hover {
  background: none;
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-nav li a:hover i {
  background: var(--white-06);
}

.sidebar-nav li a.active {
  color: var(--color-blue-500);
}

.sidebar.is-expanded .sidebar-nav li a span {
  opacity: 1;
  transform: translateX(0);
}

/* ── Dividers ── */
.sidebar-divider {
  height: 1px;
  background: var(--white-06);
  margin: 6px 0;
}

/* ── Page Wrapper ── */
.page-wrapper {
  margin-left: 65px;
  padding-bottom: 0;
  transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar.is-expanded + .page-wrapper,
.sidebar.is-expanded + .sidebar-overlay + .page-wrapper {
  margin-left: 260px;
}

/* ── Overlay ── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: var(--black-50);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: none;
}

@media (max-width: 1199px) and (min-width: 769px) {
  .sidebar.is-expanded {
    box-shadow: 4px 0 24px var(--black-50);
  }
  .sidebar.is-expanded + .sidebar-overlay + .page-wrapper {
    margin-left: 65px;
  }
  .sidebar.is-expanded + .sidebar-overlay + .page-wrapper nav.navbar {
    left: 65px;
  }
  .sidebar-overlay {
    display: block;
  }
  .sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
/* ── Language Picker ── */
.sidebar-lang-wrapper {
  border-top: 1px solid var(--white-06);
  margin-top: 8px;
  padding: 8px 0 0;
}

.sidebar-lang-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: var(--white-70);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar.is-expanded .sidebar-lang-toggle:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-lang-toggle:hover {
  background: none;
  color: var(--color-white);
}

.sidebar:not(.is-expanded) .sidebar-lang-toggle:hover > i:first-child {
  background: var(--white-06);
  border-radius: 8px;
}

.sidebar-lang-toggle > i:first-child {
  font-size: 1rem;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-lang-toggle > span {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar-lang-toggle > strong {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--white-50);
}

.sidebar-lang-arrow {
  font-size: 0.65rem;
  margin-right: 12px;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sidebar-lang-toggle.is-open .sidebar-lang-arrow {
  transform: rotate(180deg);
}

.sidebar.is-expanded .sidebar-lang-toggle > span,
.sidebar.is-expanded .sidebar-lang-toggle > strong,
.sidebar.is-expanded .sidebar-lang-arrow {
  opacity: 1;
  transform: translateX(0);
}

.sidebar.is-expanded .sidebar-lang-toggle.is-open .sidebar-lang-arrow {
  opacity: 1;
  transform: rotate(180deg);
}

.sidebar-lang-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.sidebar-lang-list.is-open {
  max-height: 600px;
}

.sidebar-lang-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 8px 48px;
  color: var(--white-60);
  font-size: 0.82rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar-lang-item:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.sidebar-lang-item.is-active {
  color: var(--color-white);
}

.sidebar-lang-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--white-25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sidebar-lang-item.is-active .sidebar-lang-radio {
  border-color: var(--color-blue-500);
}

.sidebar-lang-item.is-active .sidebar-lang-radio::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-blue-500);
}

/* ── Hover Tooltips (floating, appended to body) ── */
.sidebar-tooltip {
  position: fixed;
  background: var(--bg-sidebar);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 4px 12px var(--black-50);
  border: 1px solid var(--white-08);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.sidebar-tooltip.show {
  opacity: 1;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .sidebar {
    width: 0;
    border-right: none;
  }
  .sidebar.is-expanded {
    width: 260px;
    border-right: 1px solid var(--white-06);
  }
  .page-wrapper {
    margin-left: 0;
  }
  .sidebar.is-expanded + .page-wrapper,
  .sidebar.is-expanded + .sidebar-overlay + .page-wrapper {
    margin-left: 0;
  }
  .sidebar-overlay {
    display: block;
  }
  .sidebar-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
.mobile-navbar {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  left: 10px;
  right: 10px;
  z-index: 1040;
  display: none;
  background: var(--overlay-abyss-75);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--white-08);
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 4px 24px var(--black-35);
}

.mobile-navbar ul {
  list-style: none;
  margin: 0;
  padding: 12px 8px 8px;
  display: flex;
  align-items: stretch;
}

.mobile-navbar li {
  flex: 1;
  position: relative;
}

.mobile-navbar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  color: var(--white-40);
  text-decoration: none;
  font-size: 0.55rem;
  font-weight: 500;
  gap: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}

.mobile-navbar a:active {
  color: var(--white-65);
}

.mobile-navbar a i {
  font-size: 1.05rem;
  line-height: 1;
}

.mobile-navbar li.is-active a {
  color: var(--color-white);
}

.mobile-navbar li.is-active::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--color-white);
}

.pm-mobile-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 8px;
  font-weight: 800;
  border-radius: 10px;
  padding: 1px 3px;
  min-width: 14px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
  border: 1.5px solid var(--overlay-dark-85);
}

/* ─── Browse Panel ─────────────────────────────────────────── */
.mn-browse-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  background: var(--overlay-abyss-97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  display: flex;
  transform: translateX(-100%);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}

.mn-browse-panel.is-open {
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

.mn-browse-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px calc(env(safe-area-inset-bottom, 0px) + 90px);
  scrollbar-width: thin;
  scrollbar-color: var(--white-06) transparent;
  max-width: 480px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Showcase Cards ───────────────────────────────────────── */
.mn-showcase-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}

.mn-showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--white-07);
  transition: transform 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.mn-showcase-card:active {
  transform: scale(0.97);
}

.mn-showcase-packz {
  background: linear-gradient(145deg, var(--bg-dusk-purple) 0%, var(--bg-dusk) 100%);
}

.mn-showcase-skel {
  background: linear-gradient(145deg, var(--bg-twilight) 0%, var(--bg-twilight-green) 100%);
  border-color: var(--emerald-12);
}

.mn-showcase-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.mn-showcase-img-token {
  height: 80px;
  object-fit: contain;
  padding: 12px;
  background: radial-gradient(circle at center, var(--emerald-10) 0%, transparent 70%);
}

.mn-showcase-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.mn-showcase-badge {
  align-self: flex-start;
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--blue-400-18);
  color: var(--color-blue-400);
  line-height: 1.5;
}

.mn-showcase-badge-live {
  background: var(--emerald-18);
  color: var(--color-emerald-400);
}

.mn-showcase-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.2;
}

.mn-showcase-price {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-emerald-400);
  font-variant-numeric: tabular-nums;
}

.mn-showcase-desc {
  font-size: 0.7rem;
  color: var(--white-40);
  line-height: 1.35;
  font-weight: 500;
}

.mn-showcase-card:hover {
  border-color: var(--white-12);
}

.mn-browse-divider {
  height: 1px;
  background: var(--white-06);
  margin: 8px 0;
}

.mn-browse-section {
  display: flex;
  flex-direction: column;
}

.mn-browse-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  color: var(--white-80);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  transition: background 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.mn-browse-item i {
  width: 22px;
  text-align: center;
  font-size: 1rem;
  color: var(--white-40);
  flex-shrink: 0;
}

.mn-browse-item:hover {
  background: var(--white-04);
  color: var(--color-white);
}

.mn-browse-item:hover i {
  color: var(--color-blue-400);
}

/* ─── Expandable sections ─────────────────────────────────── */
.mn-browse-expand {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  color: var(--white-80);
  font-size: 0.95rem;
  font-weight: 600;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.mn-browse-expand i:first-child {
  width: 22px;
  text-align: center;
  font-size: 1rem;
  color: var(--white-40);
  flex-shrink: 0;
}

.mn-browse-expand span {
  flex: 1;
}

.mn-browse-arrow {
  font-size: 0.7rem;
  color: var(--white-30);
  transition: transform 0.2s ease;
}

.mn-browse-expand:hover {
  background: var(--white-04);
}

.mn-browse-sub {
  display: none;
  padding-left: 16px;
}

.mn-browse-sub.is-open {
  display: flex;
  flex-direction: column;
}

.mn-browse-sub-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px 11px 22px;
  color: var(--white-60);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  transition: background 0.12s, color 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.mn-browse-sub-item i {
  width: 18px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--white-30);
  flex-shrink: 0;
}

.mn-browse-sub-item:hover {
  background: var(--white-04);
  color: var(--color-white);
}

.mn-browse-sub-item:hover i {
  color: var(--color-blue-400);
}

.mn-locked {
  opacity: 0.4;
  pointer-events: none;
}

.mn-lock-icon {
  margin-left: auto;
  font-size: 0.55rem;
  opacity: 0.6;
}

.mn-browse-all-games {
  border-bottom: 1px solid var(--white-08);
  margin-bottom: 4px;
  padding-bottom: 12px !important;
}

/* ─── Language selector ───────────────────────────────────── */
.mn-browse-lang-current {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue-400);
  text-transform: none;
  letter-spacing: 0;
}

.mn-browse-lang-item.is-active-lang {
  color: var(--color-blue-400);
  font-weight: 700;
}

.chat-overlay {
  position: fixed;
  inset: 0;
  background: var(--black-50);
  z-index: 1099;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: none;
}

.chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 360px;
  background: var(--bg-chat);
  border-left: 1px solid var(--white-06);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-drawer.is-open {
  transform: translateX(0);
}

body.chat-open .page-wrapper {
  margin-right: 360px;
}

body.chat-open nav.navbar {
  right: 360px;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

nav.navbar {
  right: 0;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--white-06);
  flex-shrink: 0;
  gap: 8px;
}

.chat-tabs {
  display: flex;
  gap: 2px;
}

.chat-tab {
  background: none;
  border: none;
  color: var(--text-45);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.chat-tab:hover {
  color: var(--text-70);
  background: var(--white-04);
}

.chat-tab.is-active {
  color: var(--color-white);
  background: var(--white-08);
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-unread-badge {
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  margin-left: 4px;
  min-width: 16px;
  text-align: center;
}

.chat-drawer-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

.chat-online-count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-40);
  font-weight: 500;
}

#chatPublicView {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#chatPMView {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.pm-conversation-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.pm-convo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pm-convo-item:hover {
  background: var(--white-05);
}

.pm-convo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--panel-bg-80);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--text-50);
  flex-shrink: 0;
  overflow: visible;
  position: relative;
}
.pm-convo-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}
.pm-convo-avatar .pm-status-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--bg-ink);
  z-index: 2;
}
.pm-convo-avatar .pm-status-badge--online {
  background: var(--color-green-500);
}
.pm-convo-avatar .pm-status-badge--offline {
  background: var(--color-slate-500);
}

.pm-convo-info {
  flex: 1;
  min-width: 0;
}

.pm-convo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  width: fit-content;
}

.pm-convo-preview {
  font-size: 12px;
  color: var(--text-40);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pm-convo-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}

.pm-convo-time {
  font-size: 11px;
  color: var(--text-30);
}

.pm-convo-unread {
  background: var(--color-blue-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.pm-convo-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--white-06);
  flex-shrink: 0;
}

.pm-back-btn {
  background: none;
  border: none;
  color: var(--text-60);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.pm-back-btn:hover {
  color: var(--color-white);
  background: var(--white-06);
}

.pm-convo-username {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-white);
}

.pm-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pm-messages::-webkit-scrollbar {
  width: 5px;
}

.pm-messages::-webkit-scrollbar-track {
  background: transparent;
}

.pm-messages::-webkit-scrollbar-thumb {
  background: var(--white-08);
  border-radius: 3px;
}

.pm-msg {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}

.pm-msg.sent {
  align-self: flex-end;
  background: var(--color-blue-600);
  color: var(--color-white);
  border-bottom-right-radius: 4px;
}

.pm-msg.received {
  align-self: flex-start;
  background: var(--white-08);
  color: var(--color-white);
  border-bottom-left-radius: 4px;
}

.pm-msg-sender {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
}
.pm-msg-sender:hover {
  text-decoration: underline;
}

.pm-time-separator {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--white-35);
  padding: 10px 0 4px;
  letter-spacing: 0.02em;
}

.pm-receipt {
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  color: var(--white-35);
  padding: 0 4px;
  margin-top: -4px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.pm-typing-bubble {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--white-08);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 14px;
  margin-top: 4px;
}

.pm-typing-bubble span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--white-40);
  animation: pmTypingBounce 1.4s infinite ease-in-out;
}

.pm-typing-bubble span:nth-child(2) {
  animation-delay: 0.2s;
}

.pm-typing-bubble span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes pmTypingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-6px);
    opacity: 1;
  }
}
.pm-input-area {
  padding: 10px 14px;
  border-top: 1px solid var(--white-06);
  flex-shrink: 0;
}

#pmConversationView {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.pm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-30);
  font-size: 13px;
  gap: 8px;
  padding: 40px;
  text-align: center;
}

.pm-empty i {
  font-size: 28px;
}

.chat-online-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-success);
  display: inline-block;
}

.chat-drawer-close {
  background: none;
  border: none;
  color: var(--text-50);
  font-size: 18px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}

.chat-drawer-close:hover {
  color: var(--color-white);
  background: var(--white-06);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat-messages::-webkit-scrollbar {
  width: 5px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: var(--white-08);
  border-radius: 3px;
}

.chat-msg {
  padding: 10px 12px;
  transition: background 0.15s ease;
  line-height: 1.45;
  border-bottom: 1px solid var(--white-05);
}

.chat-msg:last-child {
  border-bottom: none;
}

.chat-msg:hover {
  background: var(--white-04);
}

.chat-msg-header {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}

.chat-msg-rank {
  width: 24px;
  height: 24px;
  margin-right: 2px;
  flex-shrink: 0;
  object-fit: contain;
}

.chat-msg-user {
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

.chat-msg-user:hover {
  text-decoration: underline;
}

.chat-msg-text {
  font-size: 13px;
  color: var(--text-70);
  word-break: break-word;
  padding-left: 37px;
}

.chat-tip-msg {
  background: var(--white-03);
  border-left: 2px solid var(--primary-50);
  border-bottom: 1px solid var(--white-05);
  padding: 10px 12px;
}

.chat-tip-msg:hover {
  background: var(--white-06);
}

.chat-tip-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-85);
  flex-wrap: wrap;
}

.chat-tip-inner strong {
  color: var(--text-primary);
  font-weight: 700;
}

.chat-tip-icon {
  color: var(--text-50);
  font-size: 14px;
  flex-shrink: 0;
}

.chat-tip-currency-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 3px;
}

.chat-msg-time {
  font-size: 10px;
  color: var(--text-20);
  margin-left: auto;
  white-space: nowrap;
}

.chat-input-area {
  padding: 12px 14px;
  border-top: 1px solid var(--white-06);
  flex-shrink: 0;
}

.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-input {
  flex: 1;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  color: var(--color-white);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease;
}

.chat-input::placeholder {
  color: var(--text-25);
}

.chat-input:focus {
  border-color: var(--primary-50);
}

.chat-send-btn {
  background: var(--color-primary);
  border: none;
  color: var(--color-white);
  border-radius: 10px;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s ease;
  flex-shrink: 0;
}

.chat-send-btn:hover {
  background: var(--color-primary-hover);
}

.chat-login-prompt {
  text-align: center;
  color: var(--text-35);
  font-size: 13px;
  padding: 8px;
}

.chat-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-20);
  font-size: 13px;
  text-align: center;
  padding: 40px 20px;
}

@media (max-width: 1199px) and (min-width: 769px) {
  body.chat-open .page-wrapper {
    margin-right: 0;
  }
  body.chat-open nav.navbar {
    right: 0;
  }
  .chat-drawer {
    box-shadow: -4px 0 24px var(--black-50);
  }
  .chat-overlay {
    display: block;
  }
  .chat-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (max-width: 768px) {
  body.chat-open {
    overflow: hidden;
  }
  .mobile-navbar {
    display: block;
  }
  .sidebar {
    display: none;
  }
  .sidebar-overlay {
    display: none !important;
  }
  .page-wrapper {
    margin-left: 0;
    padding-bottom: 0;
  }
  .chat-drawer {
    width: 100%;
    border-left: none;
  }
  .chat-overlay {
    display: block;
  }
  .chat-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
  }
  body.chat-open .page-wrapper {
    margin-right: 0;
  }
  body.chat-open nav.navbar {
    right: 0;
  }
  #navChatBtn {
    display: none !important;
  }
  .chat-drawer.is-open ~ .mobile-navbar {
    display: none;
  }
}
.chat-mention {
  color: var(--color-blue-400);
  font-weight: 600;
  cursor: pointer;
}

.chat-msg-mentioned {
  background: var(--blue-400-08);
  border-left: 2px solid var(--color-blue-400);
}

@keyframes mentionGlow {
  0% {
    background: var(--blue-400-25);
  }
  50% {
    background: var(--blue-400-08);
  }
  100% {
    background: var(--blue-400-08);
  }
}
.chat-msg-mention-glow {
  animation: mentionGlow 1.5s ease-out;
}

.chat-mention-dropdown {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--white-10);
  border-radius: 8px 8px 0 0;
  max-height: 200px;
  overflow-y: auto;
  z-index: 10;
}

.chat-mention-option {
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text-muted-light);
  cursor: pointer;
  transition: background 0.15s;
}
.chat-mention-option.is-active, .chat-mention-option:hover {
  background: var(--blue-400-15);
  color: var(--color-white);
}

.chat-mention-nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  color: var(--color-white);
  background: var(--color-blue-400);
  border-radius: 99px;
}

.chat-input-area {
  position: relative;
}

.admin-online-modal {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-overlay);
  border: 1px solid var(--white-10);
  border-radius: 8px;
  min-width: 200px;
  max-width: 300px;
  margin-top: 8px;
  z-index: 10;
  box-shadow: 0 4px 16px var(--black-30);
}

.admin-online-header {
  padding: 10px 12px;
  border-bottom: 1px solid var(--white-06);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-blue-400);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.admin-online-list {
  max-height: 250px;
  overflow-y: auto;
}

.admin-online-item {
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text-muted-light);
  border-bottom: 1px solid var(--white-04);
}
.admin-online-item:last-child {
  border-bottom: none;
}
.admin-online-item:hover {
  background: var(--blue-400-08);
  color: var(--color-white);
}
.admin-online-item.admin-online-guest {
  color: var(--text-cool-50);
  font-style: italic;
}

.skel-rain-banner {
  position: relative;
  overflow: hidden;
  margin: 8px;
  border-radius: 14px;
  border: 1px solid var(--yellow-500-15);
  background: linear-gradient(160deg, var(--bg-input) 0%, var(--bg-dark-green) 40%, var(--bg-input) 100%);
  flex-shrink: 0;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.skel-rain-banner:hover {
  border-color: var(--yellow-500-30);
  box-shadow: 0 0 20px var(--yellow-500-08);
}
.skel-rain-banner.is-joined {
  border-color: var(--green-400-30);
  background: linear-gradient(160deg, var(--bg-input) 0%, var(--bg-dark-green-alt) 40%, var(--bg-input) 100%);
}
.skel-rain-banner.is-distributing {
  border-color: var(--yellow-500-50);
  box-shadow: 0 0 30px var(--yellow-500-15);
  animation: rainDistPulse 1.5s ease-in-out infinite;
}
.skel-rain-banner.is-result {
  border-color: var(--green-400-40);
  box-shadow: 0 0 24px var(--green-400-12);
}

@keyframes rainDistPulse {
  0%, 100% {
    box-shadow: 0 0 20px var(--yellow-500-10);
  }
  50% {
    box-shadow: 0 0 40px var(--yellow-500-25);
  }
}
.skel-rain-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.1;
}
.skel-rain-bg i {
  display: inline-block;
  position: absolute;
  background-image: url("/assets/temp/bill.webp");
  background-size: contain;
  background-repeat: no-repeat;
  animation: skelRainFall 4s linear infinite;
  will-change: transform, opacity;
}
.skel-rain-bg i:nth-child(3n) {
  width: 20px;
  height: 20px;
  animation-duration: 5s;
}
.skel-rain-bg i:nth-child(3n+1) {
  width: 28px;
  height: 28px;
  animation-duration: 6.5s;
}
.skel-rain-bg i:nth-child(3n+2) {
  width: 16px;
  height: 16px;
  animation-duration: 4s;
}

@keyframes skelRainFall {
  0% {
    transform: translate3d(0, -100%, 0) rotate(0deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  100% {
    transform: translate3d(10px, 280px, 0) rotate(360deg);
    opacity: 0.4;
  }
}
.skel-rain-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 14px 12px;
}

.skel-rain-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.skel-rain-timer {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--black-40);
  border: 1px solid var(--white-08);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.skel-rain-timer i {
  font-size: 0.65rem;
  color: var(--text-sec-60);
}
.skel-rain-timer.is-urgent {
  color: var(--color-red-400);
  border-color: var(--red-400-30);
  animation: timerPulse 1s ease-in-out infinite;
}
.skel-rain-timer.is-urgent i {
  color: var(--color-red-400);
}

@keyframes timerPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--red-400-20);
  }
  50% {
    box-shadow: 0 0 8px 2px var(--red-400-15);
  }
}
.skel-rain-label {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.skel-rain-subtitle {
  font-size: 0.72rem;
  color: var(--text-50);
  line-height: 1.3;
  margin-top: -2px;
}

.skel-rain-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
}

.skel-rain-pot {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skel-rain-coin {
  width: 22px;
  height: 22px;
  object-fit: contain;
  animation: coinSpin 3s ease-in-out infinite;
}

@keyframes coinSpin {
  0%, 100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
}
.skel-rain-amount {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-yellow-500);
  font-variant-numeric: tabular-nums;
}

.skel-rain-participants {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skel-rain-avatars {
  display: flex;
}
.skel-rain-avatars .skel-rain-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-input);
  margin-left: -6px;
}
.skel-rain-avatars .skel-rain-avatar:first-child {
  margin-left: 0;
}
.skel-rain-avatars .skel-rain-avatar i {
  font-size: 0.5rem;
  color: var(--white-80);
}

.skel-rain-count {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-50);
}

.skel-rain-btn {
  width: 100%;
  background: linear-gradient(135deg, var(--color-yellow-500), var(--color-amber-600));
  color: var(--bg-void-blue);
  border: none;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  margin-top: 2px;
}
.skel-rain-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 20px var(--yellow-500-35);
}
.skel-rain-btn:active {
  transform: translateY(0) scale(0.98);
}
.skel-rain-btn i {
  font-size: 0.75rem;
}
.skel-rain-btn.is-joined {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-600));
  color: var(--color-white);
  cursor: default;
  animation: joinedPop 0.3s ease;
}
.skel-rain-btn.is-joined:hover {
  transform: none;
  box-shadow: 0 4px 16px var(--green-500-25);
}
.skel-rain-btn:disabled:not(.is-joined) {
  background: linear-gradient(135deg, var(--color-gray-700), var(--color-gray-600));
  color: var(--white-50);
  cursor: default;
  box-shadow: none;
}
.skel-rain-btn:disabled:not(.is-joined):hover {
  transform: none;
  box-shadow: none;
}

@keyframes joinedPop {
  0% {
    transform: scale(0.95);
  }
  50% {
    transform: scale(1.03);
  }
  100% {
    transform: scale(1);
  }
}
.skel-rain-banner.is-verifying {
  border-color: var(--amber-400-50);
  animation: rainDistPulse 1.2s ease-in-out infinite;
}

/* ─────────────── JACKPOT MODE — distinct casino-style theme ─────────────── */
.skel-rain-banner.is-jackpot {
  border: 1px solid rgba(251, 191, 36, 0.55);
  background: radial-gradient(120% 140% at 0% 0%, rgba(217, 70, 239, 0.18) 0%, transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(251, 191, 36, 0.18) 0%, transparent 55%), linear-gradient(160deg, #1a0f2e 0%, #2a1245 45%, #1a0f2e 100%);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 0 28px rgba(217, 70, 239, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  animation: jackpotGlow 2.4s ease-in-out infinite;
}
.skel-rain-banner.is-jackpot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255, 215, 130, 0.2) 50%, transparent 60%, transparent 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  background-position: 150% 0;
  animation: jackpotShimmer 4s linear infinite;
  border-radius: inherit;
}
.skel-rain-banner.is-jackpot .skel-rain-bg {
  opacity: 0.18;
}
.skel-rain-banner.is-jackpot .skel-rain-bg i {
  filter: hue-rotate(-25deg) saturate(1.3) drop-shadow(0 0 4px rgba(251, 191, 36, 0.5));
}
.skel-rain-banner.is-jackpot .skel-rain-label {
  background: linear-gradient(90deg, #fde047, #fbbf24 40%, #f0abfc 75%, #fde047);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  letter-spacing: 0.08em;
  font-weight: 900;
  animation: jackpotTextShine 4s linear infinite;
}
.skel-rain-banner.is-jackpot .skel-rain-subtitle {
  color: rgba(253, 224, 71, 0.85);
}
.skel-rain-banner.is-jackpot .skel-rain-amount {
  color: #fde047;
  text-shadow: 0 0 12px rgba(251, 191, 36, 0.55);
}
.skel-rain-banner.is-jackpot .skel-rain-timer {
  background: rgba(0, 0, 0, 0.5);
  border-color: rgba(251, 191, 36, 0.4);
  color: #fde047;
}
.skel-rain-banner.is-jackpot .skel-rain-timer i {
  color: #fbbf24;
}
.skel-rain-banner.is-jackpot .skel-rain-btn {
  background: linear-gradient(135deg, #f0abfc 0%, #fbbf24 50%, #f59e0b 100%);
  color: #1a0f2e;
  box-shadow: 0 4px 18px rgba(217, 70, 239, 0.35);
}
.skel-rain-banner.is-jackpot .skel-rain-btn:hover {
  box-shadow: 0 6px 22px rgba(251, 191, 36, 0.45);
}
.skel-rain-banner.is-jackpot .skel-rain-btn.is-joined {
  background: linear-gradient(135deg, #34d399, #059669);
  color: #ffffff;
}
.skel-rain-banner.is-jackpot.is-distributing, .skel-rain-banner.is-jackpot.is-verifying {
  border-color: rgba(251, 191, 36, 0.8);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 0 40px rgba(251, 191, 36, 0.35), 0 0 60px rgba(217, 70, 239, 0.25);
  animation: jackpotPulse 1.2s ease-in-out infinite;
}
.skel-rain-banner.is-jackpot.is-result {
  border-color: rgba(52, 211, 153, 0.6);
  box-shadow: 0 0 32px rgba(52, 211, 153, 0.25), 0 0 50px rgba(251, 191, 36, 0.18);
}

@keyframes jackpotGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.15), 0 0 24px rgba(217, 70, 239, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 0 38px rgba(251, 191, 36, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}
@keyframes jackpotShimmer {
  0% {
    background-position: 150% 0;
  }
  60% {
    background-position: -50% 0;
  }
  100% {
    background-position: -50% 0;
  }
}
@keyframes jackpotTextShine {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}
@keyframes jackpotPulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 0 30px rgba(251, 191, 36, 0.25), 0 0 50px rgba(217, 70, 239, 0.2);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.5), 0 0 50px rgba(251, 191, 36, 0.45), 0 0 70px rgba(217, 70, 239, 0.35);
  }
}
.rain-verify-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: verifyFadeIn 0.3s ease;
}

.rain-verify-backdrop {
  position: absolute;
  inset: 0;
  background: var(--black-75);
  backdrop-filter: blur(6px);
}

@keyframes verifyFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.rain-verify-modal {
  position: relative;
  width: 380px;
  max-width: 92vw;
  background: linear-gradient(160deg, var(--bg-dark-blue) 0%, var(--bg-slate-warm) 50%, var(--bg-dark-blue) 100%);
  border: 1px solid var(--yellow-500-25);
  border-radius: 20px;
  padding: 28px 24px 24px;
  text-align: center;
  box-shadow: 0 24px 80px var(--black-60), 0 0 60px var(--yellow-500-08);
  animation: verifyModalIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.rain-verify-modal.is-success {
  border-color: var(--green-400-40);
  box-shadow: 0 24px 80px var(--black-60), 0 0 60px var(--green-400-12);
}

.rain-verify-glow {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-yellow-500), transparent);
  border-radius: 2px;
}

@keyframes verifyModalIn {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.rain-verify-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 6px;
}

.rain-verify-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--yellow-500-20), var(--yellow-500-05));
  border: 1px solid var(--yellow-500-30);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rain-verify-icon i {
  font-size: 0.9rem;
  color: var(--color-yellow-500);
}

.rain-verify-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.rain-verify-desc {
  font-size: 0.82rem;
  color: var(--text-55);
  margin-bottom: 16px;
  line-height: 1.4;
}
.rain-verify-modal.is-success .rain-verify-desc {
  color: var(--color-green-400);
  font-weight: 600;
}

.rain-verify-area {
  position: relative;
  width: 100%;
  height: 160px;
  background: var(--white-02);
  border: 1px solid var(--white-06);
  border-radius: 14px;
  margin-bottom: 16px;
  overflow: hidden;
  cursor: crosshair;
}
.rain-verify-modal.is-success .rain-verify-area {
  border-color: var(--green-400-20);
  background: var(--green-400-03);
}

.rain-verify-target {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  animation: verifyBounce 1.5s ease-in-out infinite;
  transition: transform 0.2s ease, opacity 0.3s ease;
}
.rain-verify-target img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 12px var(--yellow-500-60));
}
.rain-verify-target:hover {
  transform: translate(-50%, -50%) scale(1.2);
}
.rain-verify-target.is-clicked {
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
}

@keyframes verifyBounce {
  0%, 100% {
    margin-top: 0;
  }
  50% {
    margin-top: -8px;
  }
}
.rain-verify-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.rain-verify-timer {
  font-size: 0.78rem;
  color: var(--text-50);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.rain-verify-timer i {
  font-size: 0.65rem;
  margin-right: 4px;
}
.rain-verify-timer.is-critical {
  color: var(--color-red-400);
  animation: timerPulse 1s ease-in-out infinite;
}

.rain-verify-warn {
  font-size: 0.68rem;
  color: var(--red-400-60);
  font-weight: 500;
}

.carousel-shell {
  position: relative;
  padding: 0;
  --cards-visible: 8;
  --carousel-gap: 10px;
}

.carousel-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 0;
}

.game-section-header {
  font-family: "Inter", sans-serif;
  text-transform: uppercase;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 20px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.game-section-count {
  font-size: 0.7rem;
  color: var(--color-gray-500);
  background: var(--white-06);
  padding: 2px 9px;
  border-radius: 20px;
  margin-left: 8px;
  font-weight: 600;
}

@media (max-width: 768px) {
  .game-section-header {
    font-size: 0.85rem;
  }
}
.carousel-controls {
  display: flex;
  gap: 8px;
}

.gameRow {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--carousel-gap);
  overflow-x: auto;
  scrollbar-width: none;
  height: fit-content;
  align-items: center;
  padding: 10px 6px 0;
  margin: 0 -6px;
  -webkit-overflow-scrolling: touch;
}

.gameRow::-webkit-scrollbar {
  display: none;
}

.gameRow > div {
  flex: 0 0 calc((100% - (var(--cards-visible) - 1) * var(--carousel-gap)) / var(--cards-visible));
  justify-content: center;
  align-items: center;
}

.carousel-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0px;
  background: transparent;
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}

.carousel-btn:hover:not(:disabled) {
  background: var(--white-15);
}

.carousel-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

@media (max-width: 1200px) {
  .carousel-shell {
    --cards-visible: 7;
    --carousel-gap: 10px;
  }
}
@media (max-width: 1050px) {
  .carousel-shell {
    --cards-visible: 6;
    --carousel-gap: 10px;
  }
}
@media (max-width: 900px) {
  .carousel-shell {
    --cards-visible: 5;
    --carousel-gap: 10px;
  }
}
@media (max-width: 768px) {
  .carousel-shell {
    --cards-visible: 5;
    --carousel-gap: 8px;
  }
  .gameRow {
    padding-bottom: 0;
  }
  .card-game .gamePreview,
  a.card-game .gamePreview {
    border-radius: 8px;
  }
}
@media (max-width: 414px) {
  .carousel-shell {
    --cards-visible: 4;
    --carousel-gap: 6px;
  }
}
.preview,
.gamePreview {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  border: 3px solid transparent;
  background-size: cover;
  background-position: center;
  background-origin: border-box;
  border-radius: 8px;
  width: 100%;
  height: 250px;
  box-shadow: 0 0 10px var(--black-25);
}

.card-game-inner .gamePreview {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-origin: padding-box;
}

.gameRow .preview,
.gameRow .gamePreview {
  height: auto;
  aspect-ratio: 2/3;
}

.card-game,
a.card-game {
  --card-color: var(--color-gray-card);
  transform: translateY(0);
  display: block;
  transition: transform 0.2s ease, opacity 0.2s ease;
  text-decoration: none;
  margin-bottom: 20px;
  opacity: 1;
  margin: auto;
  height: 100%;
}

.card-game .gamePreview,
a.card-game .gamePreview {
  aspect-ratio: 2/3;
}

.card-game .title,
a.card-game .title {
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  color: var(--text-subdued);
  margin-top: 3px;
  font-weight: 500;
  font-size: 14px;
}

.card-game:hover,
a.card-game:hover {
  transform: translateY(-5px);
  opacity: 1;
}

.card-game:hover .preview,
.card-game:hover .gamePreview,
a.card-game:hover .preview,
a.card-game:hover .gamePreview {
  border-color: transparent;
}

.card-game:hover .title,
a.card-game:hover .title {
  color: var(--color-white);
}

.card-game:active,
a.card-game:active {
  transform: translateY(-2px);
}

.card-game.wide-game .preview,
a.card-game.wide-game .preview {
  border-radius: 8px;
}

.card-game-inner {
  position: relative;
  border: 2px solid var(--card-color);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-game-inner .gamePreview {
  display: block;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

.card-game-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: var(--card-color);
  padding: 1px 10px 3px;
  border-radius: 0 0 4px 4px;
  line-height: 1;
  text-align: center;
}
.card-game-notch span {
  font-family: "Inter", sans-serif;
  font-size: 0.45rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px var(--black-30);
  display: block;
  text-align: center;
}

.card-game:hover .card-game-inner {
  border-color: var(--card-color);
  box-shadow: 0 0 12px var(--black-20), 0 0 6px var(--card-color);
}

.card-game--locked {
  cursor: default;
  pointer-events: none;
}

.card-game--locked .card-game-inner {
  border-color: var(--white-08);
}

.card-game--locked .gamePreview {
  filter: grayscale(100%) brightness(0.35);
}

.card-game--locked .card-game-notch {
  background: var(--white-12);
}

.card-game--locked .card-game-notch span {
  color: var(--white-60);
}

.card-game--locked .title {
  color: var(--white-30);
}

.card-game-lock {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.card-game-lock i {
  font-size: 28px;
  color: var(--white-25);
  filter: drop-shadow(0 2px 6px var(--black-50));
}

.card-game-badges {
  display: inline-flex;
  flex-direction: row;
  gap: 2px;
  margin-left: auto;
  flex-shrink: 0;
}

.card-badge {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px var(--black-50));
  transition: transform 0.2s ease;
}

.card-game:hover .card-badge {
  transform: scale(1.15);
}

@media (max-width: 576px) {
  .card-badge {
    width: 14px;
    height: 14px;
  }
}
.game-page-badges {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.game-page-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 6px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  line-height: 1;
  vertical-align: middle;
  backdrop-filter: blur(4px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.game-page-badge:hover {
  transform: translateY(-1px);
}

.game-page-badge img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px var(--black-30));
}

.game-page-badge--pvp {
  background: linear-gradient(135deg, var(--red-500-20), var(--crimson-25));
  color: var(--color-red-300);
  border: 1px solid var(--red-500-30);
  box-shadow: 0 0 8px var(--red-500-10);
}

.game-page-badge--pvp:hover {
  box-shadow: 0 0 12px var(--red-500-20);
}

.game-page-badge--combo {
  background: linear-gradient(135deg, var(--sky-400-20), var(--cyan-25));
  color: var(--color-sky-300);
  border: 1px solid var(--sky-400-30);
  box-shadow: 0 0 8px var(--sky-400-10);
}

.game-page-badge--combo:hover {
  box-shadow: 0 0 12px var(--sky-400-20);
}

.game-tag-link {
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
  text-align: center;
  justify-content: center;
}

.game-tag-link:hover {
  background-color: var(--white-15);
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--color-white);
}

.game-tag-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 0.75rem;
}

.game-tag-badge img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.game-tag-badge--combo {
  background: linear-gradient(135deg, var(--sky-400-20), var(--cyan-25));
  color: var(--color-sky-300);
  border: 1px solid var(--sky-400-25);
}

.game-tag-badge--combo:hover {
  background: linear-gradient(135deg, var(--sky-400-30), var(--cyan-35));
  color: var(--color-sky-300);
}

.game-tag-badge--pvp {
  background: linear-gradient(135deg, var(--red-500-20), var(--crimson-25));
  color: var(--color-red-300);
  border: 1px solid var(--red-500-25);
}

.game-tag-badge--pvp:hover {
  background: linear-gradient(135deg, var(--red-500-30), var(--crimson-35));
  color: var(--color-red-300);
}

.packs-shell {
  padding: 24px;
}

.nav-user-area {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white-08);
  border: none;
  color: var(--text-75);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.nav-icon-btn:hover {
  background: var(--white-14);
  color: var(--color-white);
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--color-red-500);
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-white);
  line-height: 16px;
  text-align: center;
}

.nav-notif-dropdown-wrap {
  position: relative;
}

.notifications-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: -60px;
  z-index: 9999;
  width: 340px;
  max-height: 420px;
  background: var(--bg-body-mobile);
  border: 1px solid var(--white-08);
  border-radius: 12px;
  box-shadow: 0 12px 40px var(--black-50);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.notifications-dropdown::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 72px;
  width: 12px;
  height: 12px;
  background: var(--bg-body-mobile);
  border-left: 1px solid var(--white-08);
  border-top: 1px solid var(--white-08);
  transform: rotate(45deg);
  z-index: 1;
}

.notifications-dropdown.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--white-08);
}

.notif-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.notif-clear-btn {
  background: none;
  border: none;
  color: var(--text-50);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}

.notif-clear-btn:hover {
  background: var(--white-06);
  color: var(--text-primary);
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  position: relative;
}

.notif-delete-btn {
  background: none;
  border: none;
  color: var(--text-20);
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
  align-self: center;
  transition: color 0.15s;
  opacity: 0;
}
.notif-delete-btn:hover {
  color: var(--color-red-500);
}

.notif-item:hover .notif-delete-btn {
  opacity: 1;
}

.notif-item + .notif-item {
  border-top: 1px solid var(--white-05);
}

.notif-item:hover {
  background: var(--white-04);
}

.notif-item.unread {
  background: var(--primary-08);
}

.pm-nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 14px;
  pointer-events: none;
}

.pm-mobile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 10px;
  min-width: 14px;
  text-align: center;
  line-height: 12px;
  pointer-events: none;
}

.nav-icon-btn {
  position: relative;
}

.notif-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 14px;
  flex-shrink: 0;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.35;
}

.notif-username {
  color: var(--accent-color, var(--color-primary));
  font-weight: 600;
  cursor: pointer;
  transition: color 0.2s;
}

.notif-username:hover {
  color: var(--color-blue-link);
  text-decoration: underline;
}

.notif-item-time {
  font-size: 0.7rem;
  color: var(--text-40);
  margin-top: 2px;
}

.notif-empty {
  text-align: center;
  padding: 32px 16px;
  color: var(--text-40);
}

.notif-empty i {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
  color: var(--text-20);
}

.notif-empty p {
  margin: 0;
  font-size: 0.85rem;
}

/* ── Chest notification banner ── */
.notif-chest-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 10px 10px 6px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  box-shadow: 0 2px 6px var(--black-30);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.notif-chest-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, var(--warm-gold-06) 50%, transparent 60%);
  animation: notifChestShine 3s ease-in-out infinite;
  pointer-events: none;
}
.notif-chest-banner:hover {
  border-color: var(--bg-panel-accent);
  box-shadow: 0 2px 12px var(--black-40);
}
.notif-chest-banner:hover .notif-chest-arrow {
  background: var(--white-08);
}

@keyframes notifChestShine {
  0% {
    transform: translateX(-100%);
  }
  60%, 100% {
    transform: translateX(250%);
  }
}
.notif-chest-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Mirrors .hcb-icon: scaled-up sapphire chest with a soft purple/pink
     glow, kept inside the existing 40px slot via overflow:visible. */
  overflow: visible;
}
.notif-chest-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.9);
  transform-origin: center center;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55)) drop-shadow(0 0 12px rgba(236, 72, 153, 0.35));
  transition: filter 0.3s ease;
}
.notif-chest-icon.notif-chest-icon-locked img {
  filter: grayscale(1) brightness(0.55) drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

.notif-chest-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.notif-chest-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--color-amber-400);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.notif-chest-sub {
  font-size: 0.68rem;
  color: var(--text-35);
  line-height: 1.2;
}

.notif-chest-arrow {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--white-05);
  color: var(--white-40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  transition: background 0.2s;
}

/* ── Alpha notification banner ── */
.notif-alpha-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin: 6px 10px 6px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--overlay-deep-97) 0%, var(--overlay-dark-99) 100%);
  border: 2px solid var(--amber-500-30, rgba(245, 158, 11, 0.3));
  box-shadow: 0 2px 6px var(--black-30);
  overflow: hidden;
}
.notif-alpha-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 60%;
  height: 200%;
  background: linear-gradient(105deg, transparent 40%, rgba(245, 158, 11, 0.08) 50%, transparent 60%);
  animation: notifBetaShine 4s ease-in-out infinite;
  pointer-events: none;
}

.notif-alpha-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.12);
  border: 2px solid rgba(245, 158, 11, 0.25);
  color: rgba(245, 158, 11, 0.95);
  font-size: 18px;
}

.notif-alpha-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.notif-alpha-tag {
  font-size: 0.58rem;
  font-weight: 800;
  color: rgba(245, 158, 11, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.notif-alpha-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white-85);
  letter-spacing: 0.2px;
  line-height: 1.2;
}

.notif-alpha-sub {
  font-size: 0.66rem;
  color: var(--text-55, var(--text-40));
  line-height: 1.35;
}

@keyframes notifBetaShine {
  0% {
    transform: translateX(-100%);
  }
  60%, 100% {
    transform: translateX(250%);
  }
}
@media (max-width: 768px) {
  .notifications-dropdown {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    left: 50% !important;
    right: auto !important;
    width: calc(100vw - 20px);
    max-width: 400px;
    transform: translateX(-50%) translateY(8px) scale(0.95) !important;
    transform-origin: top center;
  }
  .notifications-dropdown::before {
    display: none;
  }
  .notifications-dropdown.show {
    transform: translateX(-50%) translateY(0) scale(1) !important;
  }
}
.wallet-settings-modal {
  background: var(--bg-modal);
  border: none;
  border-radius: 15px;
  color: var(--text-primary);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}

.wallet-settings-modal .modal-header {
  border-bottom: none;
  padding: 16px 20px 8px;
}

.wallet-settings-modal .modal-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
}

.wallet-settings-modal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.6;
}

.wallet-settings-modal .btn-close:hover {
  opacity: 1;
}

.wallet-settings-modal .modal-body {
  padding: 0 20px 20px;
  overflow-y: auto;
  flex: 1;
}

.wallet-tabs.pill-switch {
  flex: 0 0 auto;
}

.wallet-tabs .pill {
  flex: 1;
  text-align: center;
}

.wallet-tab-content {
  animation: walletFadeIn 0.15s ease;
}

@keyframes walletFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.wallet-balance-summary {
  padding: 16px 0 12px;
}

.wallet-balance-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-50);
  font-weight: 500;
  margin-bottom: 4px;
}

.wallet-balance-total {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wallet-balance-amount {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.wallet-balance-flag {
  font-size: 1.1rem;
}

.wallet-currency-table {
  border: 1px solid var(--white-08);
  border-radius: 10px;
  overflow: hidden;
}

.wallet-currency-table-header {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-40);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--white-06);
}

.wallet-currency-table-body {
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-15) transparent;
}

.wallet-currency-table-body::-webkit-scrollbar {
  width: 4px;
}

.wallet-currency-table-body::-webkit-scrollbar-thumb {
  background: var(--white-15);
  border-radius: 2px;
}

.wallet-currency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  transition: background 0.15s;
}

.wallet-currency-row:hover {
  background: var(--white-03);
}

.wallet-currency-row + .wallet-currency-row {
  border-top: 1px solid var(--white-04);
}

.wallet-currency-row-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wallet-currency-row-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.wallet-currency-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-currency-row-name {
  display: flex;
  flex-direction: column;
}

.wallet-currency-row-name strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wallet-currency-row-name span {
  font-size: 0.72rem;
  color: var(--text-40);
}

.wallet-currency-row-value {
  text-align: right;
  display: flex;
  flex-direction: column;
}

.wallet-currency-row-value strong {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wallet-currency-row-value span {
  font-size: 0.72rem;
  color: var(--text-40);
}

.wallet-overview-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.wallet-btn-withdraw,
.wallet-btn-deposit {
  flex: 1;
  height: auto;
  padding: 10px;
  font-size: 0.85rem;
  letter-spacing: 0.3px;
}

.wallet-swap-notice {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 2px dashed var(--white-15);
  border-radius: 10px;
  margin: 12px 0 16px;
  align-items: flex-start;
}

.wallet-swap-notice i {
  color: var(--text-50);
  font-size: 1.1rem;
  margin-top: 2px;
}

.wallet-swap-notice strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.wallet-swap-notice p {
  font-size: 0.78rem;
  color: var(--text-50);
  margin: 0;
  line-height: 1.4;
}

.wallet-swap-section {
  margin-bottom: 8px;
}

.wallet-swap-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-60);
  margin-bottom: 6px;
}

.wallet-swap-currency-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--white-04);
  border: 1px solid var(--white-08);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
  opacity: 0.5;
}

.wallet-swap-currency-selector:hover {
  background: var(--white-06);
}

.wallet-swap-currency-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.wallet-swap-currency-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.wallet-swap-currency-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-swap-currency-details strong {
  display: block;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.wallet-swap-currency-sub {
  font-size: 0.72rem;
  color: var(--text-40);
}

.wallet-swap-currency-value {
  text-align: right;
}

.wallet-swap-currency-value .wallet-swap-amount {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wallet-swap-currency-value .wallet-swap-usd {
  display: block;
  font-size: 0.72rem;
  color: var(--text-40);
}

.wallet-swap-currency-selector .fa-chevron-down {
  color: var(--text-40);
  font-size: 0.7rem;
}

.wallet-swap-amount-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  margin-bottom: 6px;
}

.wallet-swap-amount-usd {
  font-size: 0.78rem;
  color: var(--text-40);
}

.wallet-swap-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.wallet-swap-input {
  width: 100%;
  background: var(--white-04);
  border: 1px solid var(--white-10);
  border-radius: 8px;
  padding: 10px 80px 10px 14px;
  color: var(--text-primary);
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}

.wallet-swap-input:focus {
  border-color: var(--primary-50);
}

.wallet-swap-input::placeholder {
  color: var(--text-25);
}

.wallet-swap-input-icon {
  position: absolute;
  right: 60px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
}

.wallet-swap-input-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wallet-swap-max-btn {
  position: absolute;
  right: 8px;
  background: var(--white-08);
  border: 1px solid var(--white-12);
  color: var(--text-primary);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.wallet-swap-max-btn:hover {
  background: var(--white-12);
}

.wallet-swap-arrow {
  text-align: center;
  padding: 8px 0;
  color: var(--text-30);
}

.wallet-swap-arrow hr {
  border-color: var(--white-06);
  margin: 0;
}

.wallet-swap-preview-btn {
  width: 100%;
  height: auto;
  padding: 12px;
  font-size: 0.9rem;
  margin-top: 12px;
}

.wallet-swap-preview-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.wallet-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  transition: background 0.15s;
}

.wallet-setting-row:hover {
  background: var(--white-03);
}

.wallet-setting-info {
  flex: 1;
  min-width: 0;
}

.wallet-setting-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.wallet-setting-desc {
  display: block;
  font-size: 0.75rem;
  color: var(--text-45);
  margin-top: 1px;
}

.wallet-settings-modal .form-check-input {
  width: 42px;
  height: 22px;
  background-color: var(--white-10);
  border: none;
  cursor: pointer;
}

.wallet-settings-modal .form-check-input:checked {
  background-color: var(--color-primary);
}

.wallet-settings-modal .form-check-input:focus {
  box-shadow: 0 0 0 2px var(--primary-30);
  border: none;
}

.wallet-fiat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--white-06);
}

.wallet-fiat-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  font-size: 0.75rem;
  color: var(--text-60);
  border: none;
  background: none;
  white-space: nowrap;
}

.wallet-fiat-option:hover {
  background: var(--white-05);
}

.wallet-fiat-option.is-active {
  color: var(--text-primary);
  background: var(--white-08);
}

.wallet-fiat-option .fiat-radio {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--white-20);
  flex-shrink: 0;
  position: relative;
}

.wallet-fiat-option.is-active .fiat-radio {
  border-color: var(--color-primary);
}

.wallet-fiat-option.is-active .fiat-radio::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}

.wallet-fiat-option .fiat-flag {
  font-size: 0.9rem;
}

.wallet-fiat-option .fiat-code {
  font-weight: 600;
  font-size: 0.73rem;
}

@media (max-width: 768px) {
  .wallet-fiat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.site-footer {
  background: var(--bg-void-blue);
  border-top: 1px solid var(--white-06);
  padding: 48px 32px 28px;
  margin-top: 0;
  color: var(--color-gray-subtle);
  font-size: 0.875rem;
  line-height: 1.6;
}

.site-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.sf-top {
  display: flex;
  gap: 56px;
}

.sf-brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
}

.sf-brand-logo {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.sf-brand-title {
  height: 24px;
  width: auto;
  object-fit: contain;
  align-self: flex-start;
}

.sf-brand-desc {
  margin: 2px 0 0;
  font-size: 0.78rem;
  color: var(--color-gray-muted);
  line-height: 1.5;
}

.sf-brand-socials {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.sf-brand-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--white-04);
  color: var(--color-gray-muted);
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.2s;
}
.sf-brand-socials a:hover {
  background: var(--primary-bright-12);
  color: var(--color-primary-bright);
}

.sf-links {
  display: flex;
  gap: 40px;
  flex: 1;
  justify-content: space-between;
}

.sf-col {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 110px;
}

.sf-col h6 {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 4px 0;
}

.sf-col a {
  color: var(--color-gray-subtle);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.15s;
}

.sf-col a:hover {
  color: var(--color-primary-bright);
}

.sf-divider {
  height: 1px;
  background: var(--white-05);
  margin: 24px 0;
}

.sf-section .sf-section-title {
  margin-bottom: 12px;
}

.sf-section-title {
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 14px 0;
  display: block;
}

.sf-currencies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-currency {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--white-03);
  border: none;
  min-width: 120px;
}
.sf-currency img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.sf-currency-info {
  display: flex;
  flex-direction: column;
}

.sf-currency-name {
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.2;
}

.sf-currency-sub {
  color: var(--color-gray-muted);
  font-size: 0.68rem;
  margin-top: 1px;
}

.sf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.sf-bottom-left {
  display: flex;
  align-items: center;
}

.sf-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sf-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--white-03);
  border: none;
  color: var(--color-gray-dim);
  font-size: 0.78rem;
  font-weight: 600;
}
.sf-badge i {
  font-size: 1rem;
  color: var(--color-primary-bright);
}

.sf-badge-18 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-primary-bright);
  color: var(--color-primary-bright);
  font-size: 0.65rem;
  font-weight: 800;
  flex-shrink: 0;
}

.sf-bottom-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.sf-copyright {
  margin: 0;
  color: var(--color-gray-dark);
  font-size: 0.75rem;
}

.sf-bottom-links {
  display: flex;
  gap: 16px;
}
.sf-bottom-links a {
  color: var(--color-gray-muted);
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.15s;
}
.sf-bottom-links a:hover {
  color: var(--color-primary-bright);
}

@media (max-width: 960px) {
  .sf-top {
    flex-direction: column;
    gap: 28px;
  }
  .sf-brand {
    max-width: 100%;
  }
  .sf-links {
    gap: 24px 32px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}
@media (max-width: 768px) {
  .site-footer {
    padding: 32px 16px calc(80px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    margin-bottom: 0;
  }
  .sf-brand {
    align-items: center;
    text-align: center;
  }
  .sf-brand-title {
    align-self: center;
  }
  .sf-brand-socials {
    justify-content: center;
  }
  .sf-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    text-align: left;
  }
  .sf-col {
    min-width: 0;
  }
  .sf-currencies {
    gap: 6px;
    justify-content: center;
  }
  .sf-currency {
    min-width: 110px;
    padding: 6px 10px;
  }
  .sf-currency img {
    width: 22px;
    height: 22px;
  }
  .sf-badges {
    justify-content: center;
  }
  .sf-bottom {
    flex-direction: column;
    text-align: center;
  }
  .sf-bottom-right {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .sf-bottom-links {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .sf-links {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }
}
header {
  position: relative;
  background: linear-gradient(160deg, var(--bg-abyss) 0%, var(--bg-abyss-blue) 40%, var(--bg-abyss) 100%);
  pointer-events: none;
}

header * {
  pointer-events: none;
}

header .gradient-overlay .inner > * {
  pointer-events: auto;
}

header .gradient-overlay .inner > * * {
  pointer-events: auto;
}

header .body-blend-overlay {
  height: 100%;
}

header .gradient-overlay {
  height: 100%;
  color: var(--color-white);
  position: relative;
  overflow-x: clip;
}

header .gradient-overlay::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  right: -100px;
  top: -100px;
  background: radial-gradient(circle, var(--primary-08) 0%, transparent 70%);
  pointer-events: none;
}

header .gradient-overlay .inner {
  padding: 80px 0 30px;
  font-family: "Inter", sans-serif;
  position: relative;
  z-index: 1;
}

header .gradient-overlay .inner h1 {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
  max-width: 520px;
}

header .gradient-overlay .inner p {
  font-size: 1.05rem;
  color: var(--white-55);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 480px;
}

header .gradient-overlay .inner .account-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

header .gradient-overlay .inner .account-inline .account-hint {
  color: var(--white-35);
  font-weight: 500;
  font-size: 0.85rem;
}

header .gradient-overlay .inner .account-inline .account-login-btn {
  border-color: var(--white-20);
  color: var(--white-70);
  font-weight: 600;
  padding: 4px 16px;
  border-radius: 999px;
  font-size: 0.8rem;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

header .gradient-overlay .inner .account-inline .account-login-btn:hover {
  border-color: var(--white-50);
  color: var(--color-white);
  background: var(--white-06);
}

.hero-badge-row {
  margin-bottom: 16px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--warm-gold-12) 0%, var(--orange-dark-06) 50%, var(--gold-14) 100%);
  border: 1px solid var(--warm-gold-30);
  color: var(--color-gold);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px var(--warm-gold-08), 0 0 1px var(--gold-30), inset 0 1px 0 var(--white-06);
  text-shadow: 0 0 10px var(--warm-gold-30);
}

.hero-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, var(--gold-12) 40%, var(--white-15) 50%, var(--gold-12) 60%, transparent 100%);
  animation: badgeShimmer 4s ease-in-out infinite;
}

@keyframes badgeShimmer {
  0%, 100% {
    left: -100%;
  }
  50% {
    left: 150%;
  }
}
.hero-badge i {
  font-size: 0.65rem;
  filter: drop-shadow(0 0 3px var(--warm-gold-50));
}

.hero-cta-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.btn.important-btn.hero-cta-register {
  padding: 0 32px;
}

.hero-cta-login {
  padding: 0 24px;
}

.hero-trust-row {
  display: flex;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--white-40);
  font-weight: 500;
}

.hero-trust-item i {
  color: var(--primary-60);
  font-size: 0.7rem;
}

.hero-guest-row {
  display: flex;
  align-items: center;
  gap: 48px;
}

.hero-guest-left {
  flex: 1;
  min-width: 0;
}

.hero-guest-right {
  flex: 0 0 360px;
  max-width: 360px;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

.hero-stats-panel {
  width: 100%;
  background: linear-gradient(165deg, var(--overlay-panel-75) 0%, var(--overlay-deep-90) 100%);
  border: 1px solid var(--white-07);
  border-radius: 18px;
  padding: 6px;
  box-shadow: 0 8px 32px var(--black-30), 0 0 0 1px var(--white-03) inset;
}

.hero-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.hero-stat-card {
  border-radius: 13px;
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  transition: background 0.25s, transform 0.2s;
}

.hero-stat-card:hover {
  transform: translateY(-1px);
}

.hero-stat-players {
  background: linear-gradient(145deg, var(--indigo-500-12) 0%, var(--indigo-500-03) 100%);
}

.hero-stat-players:hover {
  background: linear-gradient(145deg, var(--indigo-500-18) 0%, var(--indigo-500-06) 100%);
}

.hero-stat-players .hero-stat-icon {
  background: var(--indigo-500-18);
  color: var(--color-indigo-400);
  box-shadow: 0 0 12px var(--indigo-500-12);
}

.hero-stat-wagered {
  background: linear-gradient(145deg, var(--emerald-10) 0%, var(--emerald-02) 100%);
}

.hero-stat-wagered:hover {
  background: linear-gradient(145deg, var(--emerald-16) 0%, var(--emerald-05) 100%);
}

.hero-stat-wagered .hero-stat-icon {
  background: var(--emerald-15);
  color: var(--color-emerald-400);
  box-shadow: 0 0 12px var(--emerald-10);
}

.hero-stat-wagered .hero-stat-value {
  color: var(--color-emerald-300);
}

.hero-stat-bets {
  background: linear-gradient(145deg, var(--amber-400-10) 0%, var(--amber-400-02) 100%);
}

.hero-stat-bets:hover {
  background: linear-gradient(145deg, var(--amber-400-16) 0%, var(--amber-400-05) 100%);
}

.hero-stat-bets .hero-stat-icon {
  background: var(--amber-400-15);
  color: var(--color-amber-400);
  box-shadow: 0 0 12px var(--amber-400-10);
}

.hero-stat-payout {
  background: linear-gradient(145deg, var(--bright-blue-10) 0%, var(--bright-blue-02) 100%);
}

.hero-stat-payout:hover {
  background: linear-gradient(145deg, var(--bright-blue-16) 0%, var(--bright-blue-05) 100%);
}

.hero-stat-payout .hero-stat-icon {
  background: var(--bright-blue-15);
  color: var(--color-sky-400);
  box-shadow: 0 0 12px var(--bright-blue-10);
}

.hero-stat-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: var(--primary-10);
  color: var(--color-blue-accent);
  margin-bottom: 4px;
}

.hero-stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hero-stat-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--white-30);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.hero-chains-section {
  margin-top: 4px;
  background: var(--white-025);
  border-radius: 13px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.hero-chains-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--white-28);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hero-chains-label i {
  font-size: 0.55rem;
  color: var(--white-20);
}

.hero-chains-list {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.hero-chain-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--white-05);
  border: 1px solid var(--white-08);
  border-radius: 999px;
  padding: 3px 8px 3px 4px;
  transition: border-color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.hero-chain-badge:hover {
  border-color: var(--white-16);
  background: var(--white-08);
}

.hero-chain-badge img {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: contain;
}

.hero-chain-badge span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--white-60);
  letter-spacing: 0.02em;
}

.hero-tokens-section {
  margin-top: 4px;
  background: var(--white-025);
  border-radius: 13px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-tokens-label {
  font-size: 0.58rem;
  font-weight: 700;
  color: var(--white-28);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  flex-shrink: 0;
}

.hero-tokens-stack {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: flex-end;
}

.hero-token-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--overlay-deep-90);
  background: var(--bg-surface-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;
  position: relative;
  transition: transform 0.2s, z-index 0s;
}

.hero-token-av:first-child {
  margin-left: 0;
}

.hero-token-av:hover {
  transform: scale(1.2);
  z-index: 2;
}

.hero-token-av img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
}

.hero-tokens-more {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--white-40);
  margin-left: 6px;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .hero-guest-right {
    flex: 0 0 320px;
    max-width: 320px;
  }
  .hero-guest-row {
    gap: 32px;
  }
  .hero-stat-card {
    padding: 14px 12px;
  }
  .hero-stat-value {
    font-size: 1.15rem;
  }
  .hero-stat-icon {
    width: 30px;
    height: 30px;
    font-size: 0.75rem;
  }
}
@media (max-width: 991px) {
  header .gradient-overlay .inner h1 {
    font-size: 2.4rem;
  }
  .hero-guest-right {
    flex: 0 0 280px;
    max-width: 280px;
  }
  .hero-guest-row {
    gap: 24px;
  }
  .hero-stat-card {
    padding: 12px 10px;
  }
  .hero-stat-value {
    font-size: 1.05rem;
  }
  .hero-chains-label {
    display: none;
  }
  .hero-chains-list {
    justify-content: center;
  }
  .hero-tokens-label {
    display: none;
  }
  .hero-tokens-stack {
    justify-content: center;
  }
}
@media (max-width: 768px) {
  header .gradient-overlay .inner {
    padding: calc(env(safe-area-inset-top, 0px) + 68px) 0 40px;
  }
  header .gradient-overlay .inner h1 {
    font-size: 2rem;
  }
  header .gradient-overlay .inner p {
    font-size: 0.95rem;
  }
  .hero-guest-row {
    flex-direction: column;
    gap: 24px;
    text-align: center;
    align-items: center;
  }
  .hero-guest-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-guest-right {
    display: none;
  }
  .hero-cta-row {
    justify-content: center;
  }
  .hero-trust-row {
    justify-content: center;
  }
  .account-inline {
    justify-content: center;
  }
  .hero-badge-row {
    text-align: center;
  }
}
.hero-profile-card {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--bg-modal-alt);
  background-color: var(--panel-bg-95);
  background-size: cover;
  flex: 1;
  background-position: center;
  position: relative;
  box-shadow: inset 0 0 8px var(--black-40), 0 2px 6px var(--black-30);
  transition: border-color 0.2s;
}

.hero-profile-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-deep-75);
  pointer-events: none;
  border-radius: 0;
}

.hero-profile-card:hover {
  border-color: var(--bg-float-dark);
}

.hero-profile-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  padding: 10px 12px;
  position: relative;
  z-index: 1;
}

.hero-profile-link:hover {
  text-decoration: none;
  color: inherit;
}

.hero-profile-body {
  margin: 0 !important;
  margin-bottom: 15px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hero-profile-left {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
}

.hero-profile-top {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-profile-stats {
  margin: 0 !important;
  display: flex;
  gap: 14px;
  flex-shrink: 0;
}

.hero-stat {
  text-align: center;
}

.hero-stat-value {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.hero-stat-value.positive {
  color: var(--color-emerald-400);
}

.hero-stat-value.negative {
  color: var(--color-red-400);
}

.hero-stat-label {
  font-size: 0.6rem;
  color: var(--text-40);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.hero-profile-avatar {
  margin: 0 !important;
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--avatar-color, var(--bg-modal-alt)), color-mix(in srgb, var(--avatar-color, var(--bg-modal-alt)), black 15%));
  /* Frameless premium-card look: no border ring; instead lift the avatar
     with a soft layered shadow so a custom NFT pfp reads as a floating card. */
  box-shadow: 0 6px 16px var(--black-40), 0 2px 4px var(--black-40), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  flex-shrink: 0;
}

.hero-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}

.hero-profile-meta {
  margin: 0 !important;
  flex: 1;
  min-width: 0;
}

.hero-profile-name-row {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  line-height: 1;
}

.hero-profile-name {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-profile-arrow {
  color: var(--text-40);
  font-size: 0.6rem;
  flex-shrink: 0;
}

.hero-profile-badges {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  line-height: 1;
}

.hero-profile-badges img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 2px;
  opacity: 0.85;
  display: block;
}

.hero-profile-badges img[src*="none.webp"] {
  opacity: 0.25;
}

.hero-profile-wallet {
  font-size: 0.65rem;
  color: var(--text-35);
  font-family: monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  line-height: 1;
}

.hero-profile-rank {
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--black-25);
  border-radius: 6px;
  padding: 8px 10px;
}

.hero-profile-rank-left,
.hero-profile-rank-middle {
  flex: 1;
  min-width: 0;
}

.hero-profile-rank-icon--next {
  opacity: 0.5;
}

.hero-profile-rank-pct {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.hero-profile-rank-bar {
  height: 6px;
  background: var(--white-08);
  border-radius: 3px;
  overflow: visible;
}

.hero-profile-rank-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-link));
  border-radius: 3px;
  transition: width 0.6s ease;
}

.hero-profile-rank-next {
  font-size: 0.65rem;
  color: var(--text-35);
  margin-top: 3px;
}

.hero-profile-rank-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.hero-profile-achievements {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 0 2px;
  border-top: 1px solid var(--white-08);
  margin-top: 8px;
  flex-wrap: wrap;
}

.hero-achievement {
  width: clamp(28px, 3.5cqi, 44px);
  height: clamp(28px, 3.5cqi, 44px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.65rem, 1.5cqi, 1rem);
  background: var(--white-05);
  color: var(--white-20);
  border: 1px solid var(--white-06);
  transition: transform 0.2s;
}
.hero-achievement.earned {
  background: var(--blue-500-15);
  color: var(--color-blue-400);
  border-color: var(--blue-500-30);
}
.hero-achievement.earned:nth-child(2) {
  background: var(--purple-500-15);
  color: var(--color-violet-400);
  border-color: var(--purple-500-30);
}
.hero-achievement.earned:nth-child(3) {
  background: var(--yellow-500-15);
  color: var(--color-amber-400);
  border-color: var(--yellow-500-30);
}
.hero-achievement.earned:nth-child(4) {
  background: var(--green-500-15);
  color: var(--color-green-400);
  border-color: var(--green-500-30);
}
.hero-achievement:hover {
  transform: scale(1.15);
}

.hero-welcome-back {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white-50);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.hero-logged-in-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 0;
  container-type: inline-size;
}

.hero-logged-in-row .hero-col-profile {
  flex: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hero-logged-in-row .hero-col-claim {
  flex: 1.2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.hero-logged-in-row .hero-col-claim .daily-chests-card {
  flex: 1;
  min-height: 0;
  overflow: visible;
}

header .inner:has(.hero-logged-in-row) .hero-guest-row {
  display: none;
}

@media (max-width: 1056px) {
  .hero-logged-in-row {
    flex-wrap: wrap;
  }
  .hero-logged-in-row .hero-col-polls {
    flex: none !important;
    width: 100%;
    order: 10;
    margin-top: 10px;
  }
  .hero-logged-in-row .hero-col-polls .hero-welcome-back.hero-polls-label {
    display: none !important;
  }
  .hero-logged-in-row .hero-col-polls .hero-quests-header {
    display: block !important;
  }
  .hero-logged-in-row .hero-col-polls .dq-hero-panel {
    overflow: hidden;
    max-height: 0;
    padding: 0 12px;
    border-width: 0;
    box-shadow: none;
    transition: max-height 0.35s ease, padding 0.35s ease, border-width 0.35s ease;
  }
  .hero-logged-in-row .hero-col-polls.quests-expanded .dq-hero-panel {
    max-height: 600px;
    padding: 10px 12px;
    border-width: 2px;
    box-shadow: 0 2px 6px var(--black-30);
  }
  .hero-logged-in-row .hero-col-polls.quests-expanded .hqt-segments {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
  }
}
.hero-quests-header {
  display: none;
  cursor: pointer;
}

.hero-quests-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--white-50);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hero-quests-toggle .hqt-label {
  white-space: nowrap;
}
.hero-quests-toggle .hqt-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-quests-toggle .hqt-counter {
  font-size: 0.72rem;
  color: var(--white-35);
  font-variant-numeric: tabular-nums;
}
.hero-quests-toggle i {
  font-size: 0.55rem;
  transition: transform 0.25s ease;
}
.hero-quests-toggle.is-open i {
  transform: rotate(180deg);
}

.hqt-segments {
  display: flex;
  gap: 5px;
  margin-top: 8px;
  padding: 0 4px;
  max-height: 40px;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
}

.hqt-seg {
  flex: 1;
  height: 28px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--border-subtle-mid), var(--border-subtle-dark));
  box-shadow: inset 0 1px 0 var(--white-05);
  transition: background 0.4s ease, box-shadow 0.4s ease;
  position: relative;
}
.hqt-seg.hqt-done {
  background: linear-gradient(180deg, var(--color-sky-400), var(--color-primary));
  box-shadow: 0 0 8px var(--primary-30), inset 0 1px 0 var(--white-15);
}

.hqt-seg-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.2rem;
  color: var(--white-90);
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px var(--black-50));
  z-index: 1;
}

.hqt-seg-icon-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  opacity: 0.95;
  filter: drop-shadow(0 2px 3px var(--black-50));
  z-index: 1;
}

.hero-chest-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  order: 15;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  box-shadow: 0 2px 6px var(--black-30);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.hero-chest-bar:active {
  background: linear-gradient(160deg, var(--overlay-blue-97) 0%, var(--overlay-navy-99) 100%);
  border-color: var(--bg-panel-accent);
}

.hcb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.hcb-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The sapphire chest art has generous transparent padding around it, so
     even at 52px the chest itself reads small. Scale the image up past the
     container bounds to visually crop that whitespace. */
  overflow: visible;
}
.hcb-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(2.9);
  transform-origin: center center;
  filter: drop-shadow(0 0 6px rgba(167, 139, 250, 0.55)) drop-shadow(0 0 12px rgba(236, 72, 153, 0.35));
  transition: filter 0.3s ease;
}
.hcb-icon.hcb-icon-locked img {
  filter: grayscale(1) brightness(0.55) drop-shadow(0 0 4px rgba(0, 0, 0, 0.4));
}

.hcb-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.hcb-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-frosty);
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}

.hcb-dots {
  display: flex;
  gap: 5px;
}

.hcb-dot {
  width: 18px;
  height: 5px;
  border-radius: 3px;
  background: var(--white-08);
  border: 1px solid var(--white-04);
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.hcb-dot-filled {
  background: var(--color-orange-warm);
  border-color: var(--orange-warm-60);
  box-shadow: 0 0 6px var(--orange-warm-35);
}

.hcb-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.hcb-open-btn {
  background: linear-gradient(135deg, var(--color-orange-warm), var(--color-orange-amber));
  color: var(--bg-void-dark);
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  font-family: "Poppins", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hcb-open-btn:active {
  transform: scale(0.96);
}
.hcb-open-btn i {
  font-size: 0.7rem;
}

.hcb-timer {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white-45);
  white-space: nowrap;
  font-family: "Poppins", sans-serif;
}
.hcb-timer i {
  margin-right: 4px;
  font-size: 0.72rem;
  color: var(--white-30);
}

@media (max-width: 768px) {
  header .gradient-overlay .inner {
    padding: 68px 0 16px;
  }
  header .gradient-overlay .container {
    padding-top: 5px;
  }
  .hero-logged-in-row {
    flex-direction: column;
    gap: 0 !important;
    padding-bottom: 8px;
  }
  .hero-logged-in-row .hero-col-claim {
    display: none;
  }
  .hero-logged-in-row .hero-col-polls {
    display: block !important;
    order: 2;
    margin-top: 16px;
  }
  .hero-logged-in-row .hero-col-polls .hero-welcome-back.hero-polls-label {
    display: none !important;
  }
  .hero-logged-in-row .hero-col-polls .hero-quests-header {
    display: block !important;
  }
  .hero-chest-bar {
    display: flex;
  }
  .hero-mobile-chests-wrapper {
    display: block !important;
    width: 100%;
  }
  .hero-mobile-chests {
    display: flex !important;
  }
}
.hero-mobile-chests-wrapper {
  display: none;
  margin-top: 16px;
  padding-bottom: 28px;
}

.hero-mobile-chests-title {
  margin-bottom: 4px;
}

.hero-mobile-chests {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  margin-top: 10px;
  padding: 4px 0;
}
.hero-mobile-chests .hero-mobile-chests-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hero-mobile-chests .hero-mobile-chest {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: filter 0.3s ease;
  width: 20%;
  max-width: 96px;
  position: relative;
}
.hero-mobile-chests .hero-mobile-chest.dc-chest-locked canvas {
  filter: brightness(0.5) saturate(0);
}
.hero-mobile-chests .hero-mobile-chest.dc-chest-ready {
  filter: brightness(1.1) drop-shadow(0 2px 8px var(--orange-warm-30));
  animation: dc-mobile-wiggle 2s ease-in-out infinite;
}
.hero-mobile-chests .hero-mobile-chest canvas {
  image-rendering: pixelated;
  pointer-events: none;
  width: 100%;
  height: auto;
}
.hero-mobile-chests .hero-mobile-chest-time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-white);
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 2px 6px var(--black-90), 0 0 12px var(--black-60);
  pointer-events: none;
}

@keyframes dc-mobile-wiggle {
  0%, 100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.05) rotate(-2deg);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.03) rotate(1.5deg);
  }
  60% {
    transform: scale(1);
  }
}
@keyframes billFall {
  0% {
    transform: translate3d(0, -100%, 0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate3d(15px, 600px, 0) rotate(360deg);
    opacity: 0.7;
  }
}
.daily-chests-card {
  border-radius: 14px;
  overflow: visible;
  border: 2px solid var(--bg-modal-alt);
  background: radial-gradient(ellipse at 50% 100%, var(--orange-dark-06) 0%, transparent 60%), linear-gradient(180deg, var(--overlay-slate-95) 0%, var(--overlay-deep-98) 100%);
  position: relative;
  box-shadow: 0 4px 24px var(--black-30), inset 0 1px 0 var(--white-04);
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  padding: 10px 14px 8px;
  margin-top: 0;
  margin-bottom: 0;
}

.dc-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.dc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.dc-timer {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--orange-light-70);
  letter-spacing: 0.02em;
  padding-top: 2px;
}
.dc-timer i {
  margin-right: 4px;
  font-size: 0.58rem;
}

.dc-subtitle {
  font-size: 0.58rem;
  font-weight: 500;
  color: var(--white-40);
  letter-spacing: 0.02em;
}

.dc-stack {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dc-chest {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.4s ease;
  cursor: default;
}

.dc-chest-canvas {
  /* Sapphire chest is a high-res webp — let the browser smooth its scaling
     instead of using nearest-neighbor (which was right for the old pixel
     sprite but makes the new art look jagged). */
  pointer-events: none;
}

.dc-chest-3 {
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%) scale(0.7);
  filter: brightness(0.3);
}

.dc-chest-2 {
  z-index: 2;
  top: 50%;
  left: calc(50% - 44px);
  transform: translate(-50%, -75%) scale(0.78);
  filter: brightness(0.4);
}

.dc-chest-1 {
  z-index: 3;
  top: 50%;
  left: calc(50% + 44px);
  transform: translate(-50%, -75%) scale(0.78);
  filter: brightness(0.4);
}

.dc-chest-0 {
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.15);
}

.dc-chest-locked {
  filter: brightness(0.7) saturate(0) !important;
}

.dc-chest-ready {
  cursor: pointer;
}

.dc-chest-0.dc-chest-ready {
  filter: brightness(1.1) drop-shadow(0 4px 14px var(--orange-warm-40)) drop-shadow(0 0 20px var(--orange-deep-15));
  animation: dc-wiggle-front 2s ease-in-out infinite;
}

.dc-chest-1.dc-chest-ready {
  filter: brightness(0.6) drop-shadow(0 2px 8px var(--orange-warm-15));
  animation: dc-wiggle-side-right 2.8s ease-in-out infinite;
}

.dc-chest-2.dc-chest-ready {
  filter: brightness(0.6) drop-shadow(0 2px 8px var(--orange-warm-15));
  animation: dc-wiggle-side-left 2.8s ease-in-out 0.4s infinite;
}

.dc-chest-3.dc-chest-ready {
  filter: brightness(0.45) drop-shadow(0 1px 5px var(--orange-warm-10));
  animation: dc-wiggle-back-top 3.2s ease-in-out 0.8s infinite;
}

@keyframes dc-wiggle-front {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  10% {
    transform: translate(-50%, calc(-50% - 4px)) scale(1.15) rotate(-2deg);
  }
  20% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  30% {
    transform: translate(-50%, calc(-50% - 3px)) scale(1.15) rotate(1.5deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  50% {
    transform: translate(-50%, calc(-50% - 2px)) scale(1.15);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.15);
  }
}
@keyframes dc-wiggle-side-right {
  0%, 100% {
    transform: translate(-50%, -75%) scale(0.78);
  }
  25% {
    transform: translate(-50%, calc(-75% - 2px)) scale(0.78);
  }
  50% {
    transform: translate(-50%, -75%) scale(0.78);
  }
}
@keyframes dc-wiggle-side-left {
  0%, 100% {
    transform: translate(-50%, -75%) scale(0.78);
  }
  25% {
    transform: translate(-50%, calc(-75% - 2px)) scale(0.78);
  }
  50% {
    transform: translate(-50%, -75%) scale(0.78);
  }
}
@keyframes dc-wiggle-back-top {
  0%, 100% {
    transform: translate(-50%, -100%) scale(0.7);
  }
  25% {
    transform: translate(-50%, calc(-100% - 2px)) scale(0.7);
  }
  50% {
    transform: translate(-50%, -100%) scale(0.7);
  }
}
.dc-chest-opening {
  animation: dc-open-pop 0.7s ease forwards !important;
}

@keyframes dc-open-pop {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
  }
  20% {
    transform: translate(-50%, -50%) scale(1.35) rotate(-5deg);
  }
  40% {
    transform: translate(-50%, -50%) scale(1.3) rotate(4deg);
  }
  60% {
    transform: translate(-50%, -50%) scale(1.25) rotate(-2deg);
  }
  80% {
    transform: translate(-50%, -40%) scale(1.2);
  }
  100% {
    transform: translate(-50%, -40%) scale(1.15);
    opacity: 0.4;
  }
}
.chest-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black-82);
  backdrop-filter: blur(10px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chest-modal-backdrop.show {
  display: flex;
  opacity: 1;
}

.chest-modal {
  background: var(--bg-shade);
  border: 2px solid var(--bg-surface-border);
  border-radius: 15px;
  width: 92%;
  max-width: 420px;
  padding: 0;
  box-shadow: 0 0 10px var(--black-25);
  overflow: visible;
  animation: chestModalEntry 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  filter: drop-shadow(0 28px 60px var(--black-65));
}

@keyframes chestModalEntry {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.chest-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--white-06);
}

.chest-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-50);
}
.chest-modal-title i {
  color: var(--color-orange);
  font-size: 14px;
}

.chest-modal-close.btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.5;
  transition: opacity 0.15s;
}
.chest-modal-close.btn-close:hover {
  opacity: 1;
}

.chest-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 24px;
  gap: 16px;
  overflow: visible;
}

.chest-modal-count {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--orange-warm-06);
  border: 1px solid var(--orange-warm-10);
  border-radius: 12px;
  padding: 8px 18px;
}

.chest-modal-count-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--color-orange);
  line-height: 1;
  text-shadow: 0 0 20px var(--orange-material-30);
}

.chest-modal-count-label {
  font-size: 0.78rem;
  color: var(--text-50);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.chest-modal-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 180px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  overflow: visible;
}

.chest-modal-stage::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 30px;
  background: radial-gradient(ellipse, var(--orange-warm-18) 0%, transparent 70%);
  border-radius: 50%;
  animation: chest-shadow-pulse 2s ease-in-out infinite;
}

@keyframes chest-shadow-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: translateX(-50%) scaleX(1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1.1);
  }
}
.chest-modal-stage::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, var(--orange-warm-06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.chest-modal-particles {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3;
}

.chest-modal-canvas {
  /* See note on .dc-chest-canvas — sapphire art is high-res, no pixelated. */
  filter: drop-shadow(0 6px 24px var(--orange-warm-35)) drop-shadow(0 0 8px var(--orange-vivid-15));
  animation: chest-modal-idle 2.4s ease-in-out infinite;
  transition: transform 0.15s;
  position: relative;
  z-index: 2;
}

.chest-modal-stage:active .chest-modal-canvas {
  transform: scale(0.9);
}

@keyframes chest-modal-idle {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-5px) rotate(-0.5deg);
  }
  50% {
    transform: translateY(-8px) rotate(0deg);
  }
  75% {
    transform: translateY(-5px) rotate(0.5deg);
  }
}
.chest-modal-stage-opening .chest-modal-canvas {
  animation: chest-modal-shake 0.4s ease;
}

@keyframes chest-modal-shake {
  0% {
    transform: rotate(0) scale(1);
  }
  15% {
    transform: rotate(-8deg) scale(1.08);
  }
  30% {
    transform: rotate(7deg) scale(1.12);
  }
  45% {
    transform: rotate(-5deg) scale(1.1);
  }
  60% {
    transform: rotate(4deg) scale(1.06);
  }
  75% {
    transform: rotate(-2deg) scale(1.03);
  }
  100% {
    transform: rotate(0) scale(1);
  }
}
.chest-modal-tap-hint {
  font-size: 0.72rem;
  color: var(--text-35);
  margin-top: 10px;
  transition: opacity 0.3s;
  letter-spacing: 0.5px;
  animation: chest-hint-pulse 2s ease-in-out infinite;
}

@keyframes chest-hint-pulse {
  0%, 100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}
.chest-modal-hint-empty {
  color: var(--text-15);
  animation: none;
}

.chest-modal-stage-empty {
  cursor: default;
  pointer-events: none;
}

.chest-modal-stage-empty .chest-modal-canvas {
  filter: grayscale(1) brightness(0.3);
  animation: none;
}

.chest-roller-area {
  width: 100%;
  animation: chest-roller-fadein 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes chest-roller-fadein {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.chest-roller-wrapper {
  position: relative;
  width: 100%;
}

.chest-roller-pointer {
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  background: linear-gradient(180deg, var(--color-red-bright), var(--color-error-alt), var(--color-red-bright));
  z-index: 10;
  border-radius: 2px;
  box-shadow: 0 0 12px var(--error-alt-60), 0 0 4px var(--error-alt-80);
}

.chest-roller-pointer::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 9px solid var(--color-error-alt);
  filter: drop-shadow(0 0 4px var(--error-alt-60));
}

.chest-roller-pointer::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 9px solid var(--color-error-alt);
  filter: drop-shadow(0 0 4px var(--error-alt-60));
}

.chest-roller-mask {
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--white-06);
  background: var(--overlay-void-90);
  height: 96px;
  position: relative;
  box-shadow: inset 0 2px 8px var(--black-40);
}

.chest-roller-track {
  display: flex;
  gap: 6px;
  padding: 6px 0 6px 6px;
  height: 100%;
  align-items: center;
  width: max-content;
  transition: none;
}

.chest-roller-item {
  flex-shrink: 0;
  width: 92px;
  height: 82px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--white-04) 0%, var(--white-01) 100%);
  border: 1px solid var(--white-06);
  border-bottom: 2px solid var(--white-03);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}

.chest-roller-item-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.chest-roller-item-amount {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.chest-roller-item--winner {
  border: 2px solid var(--color-emerald-400);
  box-shadow: 0 0 20px var(--emerald-35), 0 0 6px var(--emerald-50), inset 0 0 12px var(--emerald-06);
  background: linear-gradient(180deg, var(--emerald-10) 0%, var(--emerald-03) 100%);
  animation: chest-winner-glow 1.5s ease-in-out infinite;
}

@keyframes chest-winner-glow {
  0%, 100% {
    box-shadow: 0 0 20px var(--emerald-35), 0 0 6px var(--emerald-50);
  }
  50% {
    box-shadow: 0 0 28px var(--emerald-50), 0 0 10px var(--emerald-70);
  }
}
.chest-roller-edge {
  position: absolute;
  top: 0;
  width: 60px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}

.chest-roller-edge--left {
  left: 0;
  background: linear-gradient(90deg, var(--overlay-void-98) 0%, transparent 100%);
  border-radius: 12px 0 0 12px;
}

.chest-roller-edge--right {
  right: 0;
  background: linear-gradient(270deg, var(--overlay-void-98) 0%, transparent 100%);
  border-radius: 0 12px 12px 0;
}

.chest-modal-reward-area {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.chest-modal-reward {
  text-align: center;
  opacity: 0;
  transform: scale(0.5) translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.chest-modal-reward-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

.chest-modal-reward-amount {
  font-size: 1.8rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--color-emerald-400), var(--color-emerald-300), var(--color-emerald-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px var(--emerald-40));
  line-height: 1.2;
  animation: chest-reward-shimmer 2s ease-in-out infinite;
}

@keyframes chest-reward-shimmer {
  0%, 100% {
    filter: drop-shadow(0 0 12px var(--emerald-40));
  }
  50% {
    filter: drop-shadow(0 0 20px var(--emerald-60));
  }
}
.chest-modal-reward-label {
  font-size: 0.72rem;
  color: var(--text-40);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.chest-open-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  background: var(--color-gold-medium);
  color: var(--color-white);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0px 2px 1px var(--black-30);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border-radius: 10px;
  border: 1px var(--color-gold-dark) solid;
  border-bottom: 2px var(--color-gold-dark) solid;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.chest-open-all-btn i {
  font-size: 13px;
}
.chest-open-all-btn:hover {
  background-color: var(--color-gold-hover);
}
.chest-open-all-btn:focus-visible, .chest-open-all-btn:active {
  outline: none;
  box-shadow: 0px 1px 0px var(--black-20) inset;
  border-color: transparent;
  background: var(--color-gold-active);
  transform: translateY(1px) scale(0.99);
}

.chest-multi-roller-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: chest-roller-fadein 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.chest-multi-roller-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.chest-multi-roller-label {
  flex-shrink: 0;
  width: 50px;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--text-35);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
}

.chest-multi-roller-row .chest-roller-wrapper {
  flex: 1;
  min-width: 0;
}

.chest-roller-mask--mini {
  height: 62px;
}

.chest-roller-item--mini {
  width: 60px;
  height: 50px;
  border-radius: 8px;
  gap: 2px;
}

.chest-roller-item--mini .chest-roller-item-icon {
  width: 18px;
  height: 18px;
}

.chest-roller-item--mini .chest-roller-item-amount {
  font-size: 0.68rem;
}

@media (max-width: 420px) {
  .chest-modal {
    max-width: 96%;
    border-radius: 16px;
  }
  .chest-modal::before {
    border-radius: 17px;
  }
  .chest-multi-roller-label {
    width: 36px;
    font-size: 0.55rem;
  }
  .chest-roller-item--mini {
    width: 50px;
    height: 44px;
  }
  .chest-roller-item--mini .chest-roller-item-icon {
    width: 14px;
    height: 14px;
  }
  .chest-roller-item--mini .chest-roller-item-amount {
    font-size: 0.58rem;
  }
}
.daily-claim-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--black-70);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}

.daily-claim-modal-backdrop.show {
  display: flex;
}

.daily-claim-modal {
  background: linear-gradient(160deg, var(--bg-raised-accent) 0%, var(--bg-shade-blue) 100%);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 16px;
  width: 90%;
  max-width: 420px;
  box-shadow: 0 8px 40px var(--black-60);
  overflow: hidden;
  animation: modalSlideIn 0.25s ease;
  position: relative;
}

.daily-claim-modal-rain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  pointer-events: none;
  opacity: 0.15;
  z-index: 0;
}

.daily-claim-modal-rain i {
  display: inline-block;
  position: relative;
  background-image: url("/assets/temp/bill.webp");
  background-size: contain;
  background-repeat: no-repeat;
  animation: billFall 3s linear infinite;
  will-change: transform, opacity;
}

.daily-claim-modal-rain i:nth-child(3n) {
  width: 28px;
  height: 28px;
  animation-duration: 4s;
  transform-origin: right -45px;
}

.daily-claim-modal-rain i:nth-child(3n+1) {
  width: 36px;
  height: 36px;
  animation-duration: 6s;
  transform-origin: right -30px;
}

.daily-claim-modal-rain i:nth-child(3n+2) {
  width: 22px;
  height: 22px;
  animation-duration: 5s;
  transform-origin: left -20px;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.daily-claim-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--white-06);
  position: relative;
  z-index: 1;
}

.daily-claim-modal-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.daily-claim-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.daily-claim-modal-close {
  background: none;
  border: none;
  color: var(--text-40);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.daily-claim-modal-close:hover {
  background: var(--white-06);
  color: var(--text-primary);
}

.daily-claim-modal-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  gap: 16px;
  position: relative;
  z-index: 1;
}

.daily-claim-wheel-area {
  flex-shrink: 0;
}

.wheel-container {
  position: relative;
  width: 280px;
  height: 280px;
}

.wheel-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 28px;
  color: var(--color-gold);
  filter: drop-shadow(0 2px 4px var(--black-50));
  line-height: 1;
}

#dailyWheel {
  border-radius: 50%;
  box-shadow: 0 0 20px var(--primary-15), inset 0 0 10px var(--black-30);
}

.daily-claim-modal-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.daily-claim-streak-row {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-orange);
}
.daily-claim-streak-row i {
  margin-right: 4px;
}

.daily-claim-spin-btn {
  max-width: 260px;
  white-space: nowrap;
}

.daily-claim-result {
  text-align: center;
  animation: claimPop 0.4s ease;
}

.daily-claim-result-amount {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--color-emerald-400);
  text-shadow: 0 0 12px var(--emerald-30);
  line-height: 1.2;
}

.daily-claim-result-text {
  font-size: 0.75rem;
  color: var(--text-50);
  margin-top: 4px;
}

@keyframes claimPop {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@media (max-width: 420px) {
  .wheel-container {
    width: 240px;
    height: 240px;
  }
  #dailyWheel {
    width: 240px;
    height: 240px;
  }
}
#depositWithdrawModal .modal-dialog {
  max-width: 420px;
  filter: drop-shadow(0 28px 60px var(--black-65));
}

#depositWithdrawModal .modal-content {
  background: var(--bg-modal-content);
  border-bottom: 2px solid var(--bg-modal-alt);
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 0 10px var(--black-25);
  overflow: visible;
  color: var(--text-primary);
}

.dw-header {
  border-bottom: 1px solid var(--white-06);
  padding: 16px 20px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#depositWithdrawModal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.8;
}

#depositWithdrawModal .btn-close:hover {
  opacity: 1;
}

.dw-tabs {
  display: flex;
  gap: 4px;
  background: var(--panel-bg-60);
  border-radius: 10px;
  padding: 3px;
}

.dw-tab {
  background: none;
  border: none;
  color: var(--text-45);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.3px;
}
.dw-tab.is-active {
  background: linear-gradient(to bottom, var(--color-primary-vivid), var(--color-primary-hover));
  color: var(--color-white);
  border-bottom: 2px solid var(--color-primary-deeper);
  box-shadow: 0 2px 6px var(--alt-blue-25), inset 0 1px 0 var(--white-12);
}
.dw-tab:hover:not(.is-active) {
  color: var(--text-75);
  background: var(--white-04);
}

.dw-body {
  padding: 20px;
  min-height: 420px;
}

.dw-view {
  min-height: 380px;
  display: flex;
  flex-direction: column;
}

.dw-history-pending {
  border-color: var(--warning-18) !important;
  background: var(--warning-06) !important;
}
.dw-history-pending:hover {
  background: var(--warning-12) !important;
  border-color: var(--warning-30) !important;
}
.dw-history-pending .dw-history-date {
  color: var(--color-gold-light);
}

.dw-quick-picks {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.dw-quick-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  color: var(--text-60);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dw-quick-btn:hover {
  border-color: var(--white-12);
  color: var(--text-primary);
  background: var(--panel-bg-80);
}
.dw-quick-btn.is-active {
  background: var(--primary-15);
  border-color: var(--primary-40);
  color: var(--color-white);
  box-shadow: 0 0 8px var(--primary-15);
}

.dw-quick-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
}

.dw-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-45);
  margin-bottom: 6px;
}

.dw-currency-select {
  position: relative;
  margin-bottom: 16px;
}

.dw-currency-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dw-currency-btn:hover {
  border-color: var(--white-12);
}

.dw-currency-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.dw-currency-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1060;
  background: var(--bg-dropdown-mid);
  border: 1px solid var(--white-08);
  border-radius: 10px;
  margin-top: 4px;
  max-height: 320px;
  overflow: hidden;
  box-shadow: 0 8px 24px var(--black-40);
}
.dw-currency-dropdown.show {
  display: flex;
  flex-direction: column;
}

.dw-dd-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--white-06);
  flex-shrink: 0;
}
.dw-dd-search i {
  color: var(--text-30);
  font-size: 12px;
}
.dw-dd-search input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
}
.dw-dd-search input::placeholder {
  color: var(--text-25);
}

.dw-dd-list {
  overflow-y: auto;
  flex: 1;
}
.dw-dd-list::-webkit-scrollbar {
  width: 5px;
}
.dw-dd-list::-webkit-scrollbar-track {
  background: transparent;
}
.dw-dd-list::-webkit-scrollbar-thumb {
  background: var(--white-08);
  border-radius: 3px;
}

.dw-dd-header {
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-30);
  position: sticky;
  top: 0;
  background: var(--bg-dropdown-mid);
  z-index: 1;
}

.dw-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text-70);
  font-size: 13px;
  font-weight: 500;
  transition: background 0.1s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.dw-dd-item:hover {
  background: var(--white-05);
  color: var(--color-white);
}
.dw-dd-item.is-active {
  background: var(--primary-15);
  color: var(--color-white);
}

.dw-dd-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border-radius: 50%;
}

.dw-dd-name {
  flex: 1;
}

.dw-dd-bal {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-40);
  font-family: monospace;
}

.dw-info-card {
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.dw-info-label {
  font-size: 12px;
  color: var(--text-45);
  margin-bottom: 6px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dw-copyable {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--overlay-ink-95);
  border: 1px solid var(--white-06);
  border-radius: 8px;
  padding: 8px 12px;
}

.dw-copyable-text {
  flex: 1;
  font-family: monospace;
  font-size: 0.85rem;
  word-break: break-all;
  color: var(--color-blue-sky);
}

.dw-memo-text {
  color: var(--color-gold-light);
  font-weight: 700;
  font-size: 0.95rem;
}

.dw-copy-btn {
  background: var(--primary-15);
  border: 1px solid var(--primary-30);
  border-radius: 6px;
  color: var(--color-primary);
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.dw-copy-btn:hover {
  background: var(--primary-25);
}

.dw-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--warning-08);
  border: 1px solid var(--warning-15);
  border-radius: 8px;
  font-size: 0.8rem;
  color: var(--color-gold-light);
}
.dw-warning i {
  margin-top: 2px;
  flex-shrink: 0;
}

.dw-status-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-06);
  border-radius: 10px;
  font-size: 0.85rem;
  color: var(--text-70);
  margin-bottom: 12px;
}

.dw-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dw-status-dot.pending {
  background: var(--color-gold-light);
  animation: dwPulse 1.5s ease-in-out infinite;
}
.dw-status-dot.confirmed {
  background: var(--color-success);
}
.dw-status-dot.expired {
  background: var(--color-error);
}

@keyframes dwPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.dw-field {
  margin-bottom: 14px;
}

.dw-input {
  width: 100%;
  background: var(--overlay-ink-95);
  border: 1px solid var(--white-06);
  color: var(--text-bright);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 600;
  outline: none;
  box-shadow: none;
  transition: border-color 0.15s ease;
}
.dw-input:focus {
  border-color: var(--color-primary);
  background: var(--overlay-98);
  color: var(--color-white);
}
.dw-input::placeholder {
  color: var(--text-25);
  font-weight: 600;
}

.dw-amount-row {
  display: flex;
  gap: 8px;
}

.dw-amount-input {
  flex: 1;
}

.dw-max-btn {
  background: var(--primary-15);
  border: 1px solid var(--primary-30);
  color: var(--color-primary);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.15s ease;
}
.dw-max-btn:hover {
  background: var(--primary-25);
}

.dw-balance-info {
  font-size: 12px;
  color: var(--text-35);
  font-weight: 500;
  margin-top: 6px;
  padding-left: 4px;
}

.dw-alert {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.dw-alert.alert-danger {
  background: var(--error-15);
  border: 1px solid var(--error-30);
  color: var(--color-red-glow);
}
.dw-alert.alert-success {
  background: var(--success-10);
  border: 1px solid var(--success-20);
  color: var(--color-success);
}

.dw-action-btn {
  width: 100%;
}
.dw-action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.dw-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  color: var(--text-60);
  font-size: 0.85rem;
}

.dw-history-toggle {
  text-align: center;
  margin-top: 14px;
}

.dw-history-btn {
  background: none;
  border: none;
  color: var(--text-40);
  font-size: 0.8rem;
  cursor: pointer;
  transition: color 0.2s;
}
.dw-history-btn:hover {
  color: var(--color-primary);
}

.dw-history-list {
  margin-top: 10px;
}

.dw-history-item {
  padding: 10px 12px;
  background: var(--panel-bg-60);
  border: 1px solid var(--white-04);
  border-radius: 8px;
  margin-bottom: 6px;
}

.dw-history-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dw-history-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: contain;
}

.dw-history-amount {
  flex: 1;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.dw-history-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.dw-history-status.dw-status-pending {
  background: var(--gold-light-12);
  color: var(--color-gold-light);
}
.dw-history-status.dw-status-confirmed, .dw-history-status.dw-status-completed, .dw-history-status.dw-status-approved {
  background: var(--success-10);
  color: var(--color-success);
}
.dw-history-status.dw-status-expired, .dw-history-status.dw-status-failed, .dw-history-status.dw-status-rejected {
  background: var(--error-12);
  color: var(--color-error);
}
.dw-history-status.dw-status-confirming, .dw-history-status.dw-status-processing {
  background: var(--primary-12);
  color: var(--color-primary);
}

.dw-history-date {
  font-size: 0.72rem;
  color: var(--text-30);
  margin-top: 4px;
}

.dw-empty {
  text-align: center;
  color: var(--text-35);
  font-size: 0.85rem;
  padding: 16px;
}

.dw-method-toggle {
  display: flex;
  gap: 4px;
  background: var(--panel-bg-60);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 14px;
}

.dw-method-btn {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-45);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.dw-method-btn:hover {
  color: var(--text-70);
}

.dw-method-btn.is-active {
  background: var(--blue-accent-25);
  color: var(--color-blue-400);
  box-shadow: 0 1px 4px var(--blue-accent-15);
}

@media (max-width: 576px) {
  #depositWithdrawModal .modal-dialog {
    width: 98vw;
    max-width: 98vw;
    margin: 0 auto;
  }
}
/* ── Info view toggle (Copy / QR Code) ── */
.dw-infoview-toggle {
  display: flex;
  gap: 3px;
  background: var(--black-25);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 14px;
  border: 1px solid var(--white-06);
}

.dw-infoview-btn {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: none;
  color: var(--text-45);
  font-size: 12px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.dw-infoview-btn i {
  font-size: 11px;
}
.dw-infoview-btn:hover {
  color: var(--text-80);
}
.dw-infoview-btn.is-active {
  background: var(--primary-20);
  color: var(--color-blue-400);
  box-shadow: 0 1px 4px var(--black-20);
}

/* ── QR code view ── */
.dw-qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 12px;
}

.dw-qr-canvas {
  background: var(--color-white);
  border-radius: 10px;
  padding: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px var(--black-40);
}
.dw-qr-canvas img, .dw-qr-canvas canvas {
  display: block;
  border-radius: 4px;
}

.dw-qr-hint {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--text-40);
  text-align: center;
}

#vaultModal .modal-dialog {
  max-width: 420px;
  filter: drop-shadow(0 28px 60px var(--black-65));
}
@media (max-width: 480px) {
  #vaultModal .modal-dialog {
    margin: 10px;
    max-width: calc(100% - 20px);
    max-height: calc(100dvh - 20px);
  }
}

@media (max-width: 480px) {
  #vaultModal .modal-dialog .modal-content {
    max-height: calc(100dvh - 20px);
    overflow-y: auto;
  }
}

#vaultModal .dw-body {
  min-height: 0;
}

#vaultModal .dw-view {
  min-height: 0;
}

#vaultModal .modal-content {
  background: var(--bg-modal-content);
  border-bottom: 2px solid var(--bg-modal-alt);
  border-radius: 15px;
  padding: 0;
  box-shadow: 0 0 10px var(--black-25);
  overflow: visible;
  color: var(--text-primary);
}

#vaultModal .btn-close {
  filter: invert(1) grayscale(1);
  opacity: 0.8;
}

#vaultModal .btn-close:hover {
  opacity: 1;
}

.vault-hero {
  text-align: center;
  margin-bottom: 18px;
}

.vault-hero-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary-20), var(--indigo-500-20));
  border: 1px solid var(--primary-25);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 22px;
  color: var(--color-blue-light);
}

.vault-hero-label {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-white);
  margin-bottom: 4px;
}

.vault-hero-desc {
  font-size: 0.78rem;
  color: var(--text-40);
  line-height: 1.5;
  max-width: 300px;
  margin: 0 auto;
}

.vault-pw-row {
  position: relative;
  display: flex;
  align-items: center;
}

.vault-pw-row .dw-input {
  padding-right: 42px;
}

.vault-eye-btn {
  position: absolute;
  right: 4px;
  background: none;
  border: none;
  color: var(--white-35);
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 8px;
  transition: color 0.15s;
}
.vault-eye-btn:hover {
  color: var(--white-70);
}

.vault-balances-section {
  margin-top: 16px;
  border-top: 1px solid var(--white-06);
  padding-top: 14px;
}

.vault-balances-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-40);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.vault-balances-header i {
  color: var(--primary-60);
  font-size: 13px;
}

.vault-balances-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}
.vault-balances-list::-webkit-scrollbar {
  width: 5px;
}
.vault-balances-list::-webkit-scrollbar-track {
  background: transparent;
}
.vault-balances-list::-webkit-scrollbar-thumb {
  background: var(--white-08);
  border-radius: 3px;
}

.vault-balance-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-bg-50);
  border: 1px solid var(--white-04);
  border-radius: 8px;
}

.vault-balance-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  border-radius: 50%;
}

.vault-balance-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-75);
}

.vault-balance-amount {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-blue-light);
  font-family: monospace;
}

.vault-empty {
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: var(--text-25);
  font-style: italic;
}

.live-support-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1050;
}

.live-support-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px var(--primary-40), 0 2px 8px var(--black-30);
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.live-support-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px var(--primary-50), 0 3px 12px var(--black-30);
}
.live-support-btn.is-open {
  background: var(--color-primary-alt);
  transform: scale(0.95);
}

.live-support-panel {
  position: absolute;
  bottom: 64px;
  right: 0;
  width: 300px;
  background: var(--bg-ink-blue);
  border: 1px solid var(--white-08);
  border-radius: 14px;
  box-shadow: 0 12px 40px var(--black-50), 0 4px 16px var(--black-30);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.95);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.live-support-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.live-support-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--white-06);
}

.live-support-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 700;
}
.live-support-panel-title i {
  font-size: 15px;
  color: var(--color-blue-400);
}

.live-support-panel-close {
  background: none;
  border: none;
  color: var(--text-40);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}
.live-support-panel-close:hover {
  color: var(--text-primary);
}

.live-support-panel-body {
  padding: 16px;
}
.live-support-panel-body p {
  font-size: 12.5px;
  color: var(--text-45);
  margin: 0 0 14px;
  line-height: 1.5;
}

.live-support-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-emerald-400);
}

.live-support-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-emerald-400);
  box-shadow: 0 0 6px var(--emerald-50);
  animation: supportPulse 2s ease-in-out infinite;
}

@keyframes supportPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}
.live-support-channel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--black-20);
  border: 1px solid var(--white-04);
  text-decoration: none;
  margin-bottom: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.live-support-channel:last-child {
  margin-bottom: 0;
}
.live-support-channel:hover {
  background: var(--primary-08);
  border-color: var(--primary-15);
}
.live-support-channel > i:first-child {
  font-size: 18px;
  color: var(--color-blue-400);
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.live-support-channel div {
  flex: 1;
  min-width: 0;
}
.live-support-channel strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.live-support-channel span {
  font-size: 11px;
  color: var(--text-35);
}

.live-support-channel-arrow {
  font-size: 10px;
  color: var(--text-20);
  flex-shrink: 0;
}

.live-support-tabs {
  display: flex;
  border-bottom: 1px solid var(--white-06);
  padding: 0 12px;
  gap: 4px;
}

.ls-tab {
  background: none;
  border: none;
  color: var(--text-40);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.ls-tab:hover {
  color: var(--text-70);
}
.ls-tab.active {
  color: var(--color-blue-400);
  border-bottom-color: var(--color-blue-400);
}

.ls-message-pane {
  display: flex;
  flex-direction: column;
  height: 320px;
}

.ls-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--white-08) transparent;
}

.ls-msg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-25);
  text-align: center;
}
.ls-msg-empty i {
  font-size: 28px;
  margin-bottom: 10px;
}
.ls-msg-empty p {
  font-size: 12.5px;
  line-height: 1.5;
  margin: 0;
}

.ls-msg {
  display: flex;
  flex-direction: column;
}
.ls-msg.ls-msg-user {
  align-items: flex-end;
}
.ls-msg.ls-msg-admin {
  align-items: flex-start;
}

.ls-msg-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}

.ls-msg-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--white-08);
}

.ls-msg-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  max-width: calc(85vw - 56px);
}

.ls-msg-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-40);
  margin-bottom: 3px;
  padding: 0 2px;
}

.ls-msg-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
}
.ls-msg-user .ls-msg-bubble {
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-right-radius: 4px;
  max-width: 85%;
}
.ls-msg-content .ls-msg-bubble {
  max-width: 100%;
  background: var(--white-07);
  color: var(--text-ice);
  border-bottom-left-radius: 4px;
}

.ls-msg-time {
  font-size: 10.5px;
  color: var(--text-25);
  margin-top: 3px;
  padding: 0 4px;
}

.ls-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--white-06);
}

.ls-input {
  flex: 1;
  background: var(--black-25);
  border: 1px solid var(--white-08);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 0 10px;
  height: 34px;
  line-height: 34px;
  resize: none;
  overflow: hidden;
  transition: border-color 0.15s;
  font-family: inherit;
}
.ls-input::placeholder {
  color: var(--text-25);
}
.ls-input:focus {
  outline: none;
  border-color: var(--primary-40);
}

.ls-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, opacity 0.15s;
}
.ls-send-btn:hover {
  background: var(--color-primary-alt);
}
.ls-send-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ls-ticket-closed-notice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: var(--yellow-500-08);
  border: 1px solid var(--yellow-500-20);
  border-radius: 10px;
  color: var(--color-amber-400);
  font-size: 12.5px;
  padding: 14px 14px;
  text-align: center;
  line-height: 1.4;
}
.ls-ticket-closed-notice i {
  font-size: 16px;
}
.ls-ticket-closed-notice span {
  display: block;
}

.ls-new-ticket-btn {
  background: var(--color-primary);
  border: none;
  border-radius: 6px;
  color: var(--color-white);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 2px;
}
.ls-new-ticket-btn:hover {
  background: var(--color-primary-alt);
}

.ls-login-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-30);
  text-align: center;
  padding: 20px;
}
.ls-login-prompt i {
  font-size: 24px;
  margin-bottom: 10px;
}
.ls-login-prompt p {
  font-size: 13px;
  margin: 0;
}

.live-support-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.4;
  pointer-events: none;
}

@media (max-width: 768px) {
  .live-support-fab .live-support-btn {
    display: none;
  }
  .live-support-fab {
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .live-support-panel {
    position: relative;
    bottom: auto;
    right: auto;
    width: 92vw;
    max-width: 420px;
    max-height: 80vh;
    border-radius: 16px;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
  }
  .live-support-panel .ls-message-pane {
    height: 55vh;
    max-height: 55vh;
  }
  .live-support-panel.is-open {
    pointer-events: auto;
  }
  .live-support-fab:has(.live-support-panel.is-open) {
    background: var(--black-50);
    pointer-events: auto;
  }
}
.admin-support-layout {
  display: flex;
  gap: 0;
  height: 600px;
  background: var(--bg-deep);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--white-06);
}

.admin-support-list {
  flex: 0 0 280px;
  border-right: 1px solid var(--white-06);
  display: flex;
  flex-direction: column;
  background: var(--bg-deep);
}

.admin-support-list-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--white-06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.admin-support-list-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.admin-support-list-header .form-select {
  background-color: var(--black-30);
  border-color: var(--white-08);
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 28px 4px 8px;
  height: 28px;
}

.admin-support-refresh-btn {
  background: none;
  border: 1px solid var(--white-10);
  color: var(--text-50);
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.admin-support-refresh-btn:hover {
  color: var(--color-blue-400);
  border-color: var(--blue-400-30);
  background: var(--blue-400-08);
}

#supportTicketList {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-08) transparent;
}

.admin-ticket-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--white-04);
  cursor: pointer;
  transition: background 0.15s;
}
.admin-ticket-item:hover {
  background: var(--white-04);
}
.admin-ticket-item.active {
  background: var(--primary-10);
  border-left: 2px solid var(--color-primary);
}

.admin-ticket-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.admin-ticket-meta strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.admin-ticket-unread {
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}

.admin-ticket-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
}
.admin-ticket-status.open {
  background: var(--emerald-15);
  color: var(--color-emerald-400);
}
.admin-ticket-status.closed {
  background: var(--white-06);
  color: var(--text-40);
}

.admin-ticket-preview {
  font-size: 12px;
  color: var(--text-35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.admin-ticket-date {
  font-size: 11px;
  color: var(--text-20);
}

.admin-support-conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  background: var(--bg-deep);
}

.admin-support-convo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--text-20);
  text-align: center;
}
.admin-support-convo-empty i {
  font-size: 36px;
  margin-bottom: 12px;
}
.admin-support-convo-empty p {
  font-size: 13px;
  margin: 0;
}

#adminConvoView {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.admin-support-convo-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--white-06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.admin-convo-user {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}
.admin-convo-user i {
  color: var(--color-blue-400);
}

.admin-convo-info {
  font-size: 12px;
  color: var(--text-35);
}

.admin-support-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--white-08) transparent;
}

.admin-convo-msg {
  display: flex;
  flex-direction: column;
}
.admin-convo-msg.admin-convo-msg-user {
  align-items: flex-start;
}
.admin-convo-msg.admin-convo-msg-admin {
  align-items: flex-end;
}

.admin-convo-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
}

.admin-convo-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--white-08);
}

.admin-convo-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.admin-convo-name {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-40);
  margin-bottom: 3px;
  padding: 0 2px;
}

.admin-convo-bubble {
  max-width: 75%;
  padding: 9px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
  word-break: break-word;
}
.admin-convo-msg-admin .admin-convo-bubble {
  background: var(--color-primary);
  color: var(--color-white);
  border-bottom-right-radius: 4px;
}
.admin-convo-content .admin-convo-bubble {
  max-width: 100%;
  background: var(--white-07);
  color: var(--text-ice);
  border-bottom-left-radius: 4px;
}

.admin-convo-time {
  font-size: 11px;
  color: var(--text-25);
  margin-top: 4px;
  padding: 0 4px;
}

.admin-support-reply-wrap {
  padding: 12px 16px;
  border-top: 1px solid var(--white-06);
  flex-shrink: 0;
}

.admin-support-reply-input {
  width: 100%;
  background: var(--black-25);
  border: 1px solid var(--white-08);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 13px;
  padding: 10px 12px;
  resize: none;
  font-family: inherit;
  margin-bottom: 10px;
  transition: border-color 0.15s;
}
.admin-support-reply-input::placeholder {
  color: var(--text-25);
}
.admin-support-reply-input:focus {
  outline: none;
  border-color: var(--primary-40);
}

.admin-support-reply-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-convo-mobile-back {
  display: none;
}

@media (max-width: 768px) {
  .admin-support-layout {
    flex-direction: column;
    height: auto;
    min-height: 0;
  }
  .admin-support-list {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--white-06);
  }
  .admin-support-list.mobile-hidden {
    display: none;
  }
  .admin-support-conversation {
    width: 100%;
    min-height: 400px;
  }
  .admin-support-conversation.mobile-visible {
    display: flex;
  }
  .admin-support-conversation:not(.mobile-visible) {
    display: none;
  }
  .admin-convo-mobile-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--white-06);
    color: var(--color-blue-400);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
  }
  .admin-convo-mobile-back:hover {
    background: var(--primary-08);
  }
  .admin-support-list-header {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-support-reply-actions {
    justify-content: stretch;
  }
  .admin-support-reply-actions .btn {
    flex: 1;
    font-size: 11px;
    padding: 6px 8px;
  }
  #supportTicketList {
    max-height: 50vh;
  }
  .admin-support-messages {
    min-height: 200px;
    max-height: 50vh;
  }
}
@media (min-width: 769px) {
  .admin-support-conversation {
    display: flex !important;
  }
  .admin-support-list {
    display: flex !important;
  }
}
.admin-support-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-red-500);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 5px;
  min-width: 16px;
  margin-left: 4px;
  vertical-align: middle;
}

.fairness-modal .modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--bg-modal-alt);
  border-radius: 16px;
  color: var(--text-primary);
  overflow: hidden;
}

.fairness-modal .modal-header {
  border-bottom: none;
  padding: 18px 20px 10px;
}

.fairness-modal .modal-title {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fairness-modal .modal-title i {
  color: var(--color-blue-500);
}

.fairness-modal .btn-close {
  filter: invert(1) brightness(0.7);
}

.fairness-tabs {
  display: flex;
  margin: 0 20px;
  background: var(--bg-modal);
  border-radius: 10px;
  padding: 3px;
}

.fairness-tab {
  flex: 1;
  background: none;
  border: none;
  color: var(--white-50);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.25s, color 0.25s;
}

.fairness-tab:hover {
  color: var(--white-75);
}

.fairness-tab.is-active {
  background: var(--bg-panel-accent);
  color: var(--color-white);
}

.fairness-modal .modal-body {
  padding: 16px 20px 20px;
}

.fair-panel p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--white-70);
  margin-bottom: 10px;
}

.fair-panel p strong {
  color: var(--color-blue-glow);
}

.fair-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 10px;
}

.fair-sub-text {
  font-size: 12px;
  color: var(--white-50);
  margin-bottom: 8px;
}

.fair-formula {
  background: var(--bg-modal);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 14px 0 18px;
  text-align: center;
}

.fair-formula code {
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

.fair-learn-more-btn,
.fair-breakdown-btn {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
}

.fair-field {
  margin-bottom: 14px;
}

.fair-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--white-50);
  margin-bottom: 5px;
}

.fair-input-row {
  display: flex;
  gap: 6px;
}

.fair-field input,
.fair-select {
  flex: 1;
  background: var(--bg-modal);
  border: 1px solid var(--bg-modal-alt);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  padding: 10px 12px;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  width: 100%;
}

.fair-field input:focus,
.fair-select:focus {
  outline: none;
  border-color: var(--color-blue-500);
}

.fair-field input[readonly] {
  opacity: 0.7;
  cursor: default;
}

.fair-copy-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-modal);
  border: 1px solid var(--bg-modal-alt);
  border-radius: 8px;
  color: var(--white-50);
  cursor: pointer;
  transition: color 0.2s, background 0.2s;
}

.fair-copy-btn:hover {
  color: var(--color-white);
  background: var(--bg-panel-accent);
}

.fair-change-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 8px 16px;
}

.fair-rotate-section {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--bg-modal-alt);
}

.fair-rotate-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.fair-rotate-note {
  font-size: 11px;
  color: var(--white-35);
  margin-top: 8px;
  text-align: center;
}

.fair-login-prompt {
  text-align: center;
  padding: 30px 0;
}

.fair-login-prompt p {
  color: var(--white-50);
  font-size: 14px;
}

.fair-verify-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 14px;
}

.fair-verify-result {
  background: var(--bg-modal);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}

.fair-result-header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--white-50);
  margin-bottom: 10px;
}

.fair-result-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 28px;
  font-weight: 800;
}

.fair-result-visual .result-coin {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
}

.fair-result-visual .result-coin.heads {
  background: linear-gradient(150deg, var(--color-amber-400), var(--color-amber-600));
  color: var(--color-white);
}

.fair-result-visual .result-coin.tails {
  background: linear-gradient(150deg, var(--color-indigo-400), var(--color-indigo-600));
  color: var(--color-white);
}

.fair-result-visual .result-label {
  font-size: 20px;
  font-weight: 700;
}

.fair-result-details {
  border-top: 1px solid var(--bg-modal-alt);
  padding-top: 10px;
}

.fair-result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
}

.fair-result-row span:first-child {
  color: var(--white-50);
}

.fair-result-row span:last-child {
  color: var(--text-secondary);
  font-family: "JetBrains Mono", "Fira Code", monospace;
}

.fairness-modal .game-dropdown {
  position: relative;
}

.fairness-modal .game-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-modal);
  border: 1px solid var(--bg-modal-alt);
  border-radius: 8px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}

.fairness-modal .game-dropdown-toggle:hover {
  border-color: var(--white-15);
}

.fairness-modal .game-dropdown.is-open .game-dropdown-toggle {
  border-color: var(--color-blue-500);
}

.fairness-modal .game-dropdown-icon {
  font-size: 16px;
  line-height: 1;
}

.fairness-modal .game-dropdown-label {
  flex: 1;
  text-align: left;
}

.fairness-modal .game-dropdown-caret {
  font-size: 10px;
  color: var(--white-35);
  transition: transform 0.2s;
}

.fairness-modal .game-dropdown.is-open .game-dropdown-caret {
  transform: rotate(180deg);
}

.fairness-modal .game-dropdown-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--bg-dropdown-dark);
  border: 1px solid var(--white-07);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 16px 40px var(--black-50);
  z-index: 10001;
  opacity: 0;
  transform: translateY(8px) scale(0.95);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-10) transparent;
}

.fairness-modal .game-dropdown.is-open .game-dropdown-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.fairness-modal .game-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  border: none;
  background: none;
  color: var(--text-75);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.fairness-modal .game-dropdown-item::before {
  content: attr(data-icon);
  font-size: 16px;
  line-height: 1;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.fairness-modal .game-dropdown-item:hover {
  background: var(--white-06);
  color: var(--color-white);
}

.fairness-modal .game-dropdown-item.is-active {
  background: var(--primary-12);
  color: var(--color-blue-400);
}

.pm-modal.user-detail-modal .modal-dialog {
  max-width: 400px;
}

#pmColorModal .modal-dialog {
  max-width: 480px;
}

.pm-modal .modal-body.pm-body {
  padding: 16px 20px 20px;
}

.pm-modal .pm-avatar-body {
  max-height: 70vh;
  overflow-y: auto;
}

.pm-modal .pm-ranks-body {
  max-height: 60vh;
  overflow-y: auto;
}

.pm-modal .pm-ranks-note {
  background: var(--white-03);
  border: 1px solid var(--white-08, rgba(255, 255, 255, 0.08));
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-bright-70, rgba(244, 248, 255, 0.7));
}
.pm-modal .pm-ranks-note .pm-ranks-note-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--text-bright);
  margin-bottom: 6px;
}
.pm-modal .pm-ranks-note .pm-ranks-note-title i {
  color: var(--primary, #5b8def);
}
.pm-modal .pm-ranks-note strong {
  color: var(--text-bright);
  font-weight: 700;
}

.pm-modal .pm-input {
  background: var(--panel-bg-95);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 10px;
  color: var(--text-bright);
  box-shadow: none;
  height: 50px;
  font-size: 0.95rem;
}

.pm-modal .pm-input::placeholder {
  color: var(--text-bright-55);
  font-weight: 600;
}

.pm-modal .pm-input:focus {
  border-color: var(--primary-65);
  background: var(--panel-bg-100);
  color: var(--color-white);
}

.pm-modal .pm-input-hint {
  font-size: 0.75rem;
  color: var(--text-50);
  margin: 6px 0 12px;
}

.pm-modal .pm-input-error {
  color: var(--color-red-500);
  font-size: 0.8rem;
  margin: 0 0 8px;
  min-height: 20px;
}

.pm-modal .pm-action-btn {
  position: relative;
  z-index: 2;
}

.pm-modal .skelly-selected-preview {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--panel-bg-95);
  border-radius: 10px;
  box-shadow: inset 0 0 10px var(--black-30);
}

.pm-modal .skelly-selected-preview img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: 10px;
  border: 2px solid var(--bg-modal-alt);
  flex-shrink: 0;
}

.pm-modal .skelly-selected-info {
  flex: 1;
  min-width: 0;
}

.pm-modal .skelly-selected-info p {
  color: var(--text-primary);
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.pm-modal .skelly-selected-info .btn {
  height: 38px;
  font-size: 13px;
  border-radius: 10px;
  width: 100%;
  margin: 0;
}

.pm-modal .skelly-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 4px;
}

.pm-modal .skelly-grid-item {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--white-06);
  background: var(--panel-bg-95);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.pm-modal .skelly-grid-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.pm-modal .skelly-grid-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--primary-40);
}

.pm-modal .skelly-grid-item.current {
  border-color: var(--color-success);
}

.pm-modal .skelly-grid-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: contain;
  image-rendering: pixelated;
  display: block;
}

.pm-modal .skelly-section-header {
  grid-column: 1/-1;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-60);
  padding: 8px 4px 4px;
  border-bottom: 1px solid var(--white-08);
  margin-bottom: 4px;
}

.pm-modal .skelly-grid-empty {
  grid-column: 1/-1;
  width: 100%;
  text-align: center;
  padding: 32px 16px;
  color: var(--text-50);
  font-size: 0.9rem;
}

.pm-modal .skelly-grid-empty i {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--text-25);
}

.pm-modal .color-picker-grid {
  display: flex;
  justify-content: center;
  transform-style: preserve-3d;
  transform: perspective(1000px);
  padding: 16px 0 8px;
}

.pm-modal .color-swatch {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 40px;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.pm-modal .color-swatch::after {
  position: absolute;
  content: "";
  inset: 0;
  width: 40px;
  height: 40px;
  background-color: var(--swatch-color);
  border-radius: 6px;
  transform: scale(1.2);
  pointer-events: none;
  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

.pm-modal .color-swatch::before {
  position: absolute;
  content: attr(data-hex);
  left: 65%;
  bottom: 52px;
  font-size: 8px;
  line-height: 12px;
  transform: translateX(-50%);
  padding: 2px 0.25rem;
  background-color: var(--color-white);
  color: var(--bg-void);
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
  white-space: nowrap;
  font-weight: 600;
  z-index: 10;
}

.pm-modal .color-swatch:hover {
  transform: scale(1.5);
  z-index: 99999;
}

.pm-modal .color-swatch:hover::before {
  opacity: 1;
  visibility: visible;
}

.pm-modal .color-swatch:active::after {
  transform: scale(1.1);
}

.pm-modal .color-swatch.selected::after {
  box-shadow: 0 0 0 3px var(--white-90), 0 0 16px var(--white-30);
  transform: scale(1.3);
}

.pm-modal .color-swatch.selected::before {
  content: "✓ " attr(data-hex);
  opacity: 1;
  visibility: visible;
}

.pm-modal .color-swatch:hover + .color-swatch {
  transform: scale(1.3);
  z-index: 9999;
}

.pm-modal .color-swatch:hover + .color-swatch + .color-swatch {
  transform: scale(1.15);
  z-index: 999;
}

.pm-modal .color-swatch:has(+ .color-swatch:hover) {
  transform: scale(1.3);
  z-index: 9999;
}

.pm-modal .color-swatch:has(+ .color-swatch + .color-swatch:hover) {
  transform: scale(1.15);
  z-index: 999;
}

.pm-modal .color-swatch[data-color="#ffffff"]::after {
  border: 2px solid var(--white-30);
}

.pm-modal .color-swatch[data-color="#ffffff"].selected::after {
  box-shadow: 0 0 0 3px var(--blue-500-80), 0 0 16px var(--blue-500-30);
}

.pm-modal .color-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--white-06);
}

.pm-modal .color-reset-btn {
  font-size: 0.8rem;
  padding: 8px 18px;
}

.pm-modal .color-reset-btn.active {
  background: var(--blue-500-15);
  color: var(--color-blue-400);
  border-color: var(--blue-500-30);
}

.pm-modal .ranks-list {
  padding: 4px 0;
}

.pm-modal .rank-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 4px;
  transition: background 0.15s;
}

.pm-modal .rank-list-item:hover {
  background: var(--white-03);
}

.pm-modal .rank-list-item.current-rank {
  background: var(--primary-12);
  border: 1px solid var(--primary-30);
}

.pm-modal .rank-list-icon {
  width: 36px;
  height: 36px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

.pm-modal .rank-list-info {
  flex: 1;
}

.pm-modal .rank-list-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.pm-modal .rank-list-details {
  font-size: 0.7rem;
  color: var(--text-50);
}

.pm-modal .customization-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 4px;
}

.pm-modal .customization-grid-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid var(--white-06);
  background: var(--panel-bg-95);
  transition: border-color 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}

.pm-modal .customization-grid-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.pm-modal .customization-grid-item.active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--primary-40);
}

.pm-modal .customization-grid-item.current {
  border-color: var(--color-success);
}

.pm-modal .customization-grid-item img {
  width: 100%;
  height: auto;
  display: block;
  image-rendering: pixelated;
  object-fit: cover;
  aspect-ratio: 16/5;
}

.pm-modal .customization-none-placeholder {
  width: 100%;
  aspect-ratio: 16/5;
  background: var(--white-03);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-30);
  font-size: 0.85rem;
}

.pm-modal .customization-grid-item .item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, var(--black-80));
  color: var(--text-primary);
  font-size: 0.8rem;
  text-align: center;
  padding: 16px 8px 8px;
  font-weight: 600;
  text-transform: capitalize;
}

.pm-modal .badge-editor {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.pm-modal .badge-slot-card {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px 10px;
  background: var(--panel-bg-60);
  border-radius: 10px;
  border: 2px solid var(--white-06);
  cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.2s ease;
}

.pm-modal .badge-slot-card:hover {
  background: var(--panel-bg-90);
  border-color: var(--white-12);
}

.pm-modal .badge-slot-card.active {
  border-color: var(--color-primary);
  background: var(--primary-08);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--primary-15);
}

.pm-modal .badge-slot-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-35);
}

.pm-modal .badge-slot-card.active .badge-slot-label {
  color: var(--color-primary);
}

.pm-modal .badge-slot-preview {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-modal .badge-slot-preview img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  image-rendering: pixelated;
  transition: transform 0.2s ease;
}

.pm-modal .badge-slot-card.active .badge-slot-preview img {
  transform: scale(1.1);
}

.pm-modal .badge-slot-name {
  font-size: 0.72rem;
  color: var(--text-60);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.pm-modal .badge-slot-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--white-06);
  border: none;
  color: var(--text-30);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
  padding: 0;
}

.pm-modal .badge-slot-card:hover .badge-slot-clear,
.pm-modal .badge-slot-card.active .badge-slot-clear {
  opacity: 1;
}

.pm-modal .badge-slot-clear:hover {
  background: var(--red-vivid-30);
  color: var(--color-red-hot);
}

.pm-modal .badge-picker-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-40);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.pm-modal .badge-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 12px;
  background: var(--panel-bg-50);
  border-radius: 10px;
  box-shadow: inset 0 0 8px var(--black-20);
}

.pm-modal .badge-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
  min-width: 64px;
}

.pm-modal .badge-pick-item:hover {
  background: var(--white-05);
  transform: translateY(-1px);
}

.pm-modal .badge-pick-item.active {
  border-color: var(--color-primary);
  background: var(--primary-12);
}

.pm-modal .badge-pick-item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}

.pm-modal .badge-pick-item span {
  font-size: 0.65rem;
  color: var(--text-50);
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .pm-modal .skelly-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .pm-modal .color-swatch {
    width: 24px;
    height: 32px;
  }
  .pm-modal .color-swatch::after {
    width: 28px;
    height: 28px;
    border-radius: 5px;
  }
  .pm-modal .skelly-selected-preview img {
    width: 60px;
    height: 60px;
  }
  .pm-modal .badge-editor {
    gap: 6px;
  }
  .pm-modal .badge-slot-card {
    padding: 10px 6px 8px;
  }
  .pm-modal .badge-slot-preview,
  .pm-modal .badge-slot-preview img {
    width: 36px;
    height: 36px;
  }
  .pm-modal .badge-pick-item {
    min-width: 56px;
    padding: 6px 8px;
  }
  .pm-modal .badge-pick-item img {
    width: 30px;
    height: 30px;
  }
}
/* ============================================================
   Settings Modal
   Desktop (>=768px): left sidebar of categories + content panel
   Mobile  (<768px) : single-column accordion of all categories
   ============================================================ */
body.sm-modal-open {
  overflow: hidden;
  touch-action: none;
}

.sm-modal-backdrop {
  position: fixed;
  inset: 0;
  overscroll-behavior: contain;
  background: rgba(0, 4, 10, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: sm-fade-in 0.18s ease-out;
}
.sm-modal-backdrop.is-open {
  display: flex;
}

@keyframes sm-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes sm-pop-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.sm-modal {
  width: 100%;
  max-width: 880px;
  height: min(720px, 100vh - 32px);
  background: #06121f;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  animation: sm-pop-in 0.2s ease-out;
  font-family: "Inter", system-ui, sans-serif;
  color: #fff;
}

/* ───── Desktop layout: sidebar + main ───── */
.sm-sidebar {
  width: 220px;
  flex-shrink: 0;
  background: #04101a;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
}

.sm-sidebar-header {
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sm-sidebar-header .sm-sidebar-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}
.sm-sidebar-header .sm-sidebar-title {
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}

.sm-sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.sm-sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 20px;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  text-align: left;
}
.sm-sidebar-item i {
  width: 16px;
  font-size: 14px;
}
.sm-sidebar-item:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.03);
}
.sm-sidebar-item.is-active {
  color: #fff;
  background: rgba(0, 117, 255, 0.12);
  border-left-color: #0075ff;
}

.sm-sidebar-footer {
  display: none;
}

.sm-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

.sm-main-header {
  padding: 14px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  gap: 12px;
}

.sm-search {
  position: relative;
  flex: 1;
  max-width: 420px;
}
.sm-search i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  pointer-events: none;
}
.sm-search input {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  color: #fff;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.sm-search input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.sm-search input:focus {
  border-color: rgba(0, 117, 255, 0.6);
}

.sm-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
  transition: background 0.12s, color 0.12s;
}
.sm-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.sm-main-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}

.sm-section-head {
  margin-bottom: 16px;
}
.sm-section-head h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.sm-section-head p {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin: 4px 0 0;
}

.sm-main-footer {
  padding: 12px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  background: #04101a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.sm-main-footer .sm-footer-note {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}
.sm-main-footer .sm-footer-actions {
  display: flex;
  gap: 8px;
}

.sm-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.sm-btn--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
}
.sm-btn--ghost:hover {
  color: #fff;
}

.sm-btn--primary {
  background: #0075ff;
  color: #fff;
}
.sm-btn--primary:hover {
  background: #0066df;
}

/* ───── Shared row primitives (used by both layouts) ───── */
.sm-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sm-row:last-child {
  border-bottom: 0;
}

.sm-row-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.sm-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  font-size: 13px;
}

.sm-row-text {
  min-width: 0;
}

.sm-row-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  line-height: 1.3;
}

.sm-row-desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 2px;
  line-height: 1.4;
}

.sm-row-control {
  flex-shrink: 0;
}

/* Toggle switch */
.sm-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  cursor: pointer;
  transition: background 0.18s;
  padding: 0;
  flex-shrink: 0;
}
.sm-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.sm-toggle.is-on {
  background: #0075ff;
}
.sm-toggle.is-on::after {
  transform: translateX(20px);
}

/* Select */
.sm-select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  border-radius: 8px;
  padding: 6px 28px 6px 12px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(255,255,255,0.5)' d='M5 6L0 0h10z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.sm-select:focus {
  border-color: rgba(0, 117, 255, 0.6);
}
.sm-select option {
  background: #0a1929;
}

/* Pill group */
.sm-pills {
  display: flex;
  gap: 6px;
}

.sm-pill {
  padding: 5px 11px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.sm-pill:hover {
  color: #fff;
}
.sm-pill.is-active {
  background: rgba(0, 117, 255, 0.15);
  border-color: rgba(0, 117, 255, 0.4);
  color: #7ab8ff;
}

.sm-link {
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: #7ab8ff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.sm-link:hover {
  color: #fff;
}

.sm-section-link {
  margin-top: 16px;
  background: none;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sm-section-link:hover {
  color: #fff;
}

/* Hide one layout or the other based on viewport */
.sm-mobile-body {
  display: none;
}

/* ───── Mobile layout: stacked accordion ───── */
@media (max-width: 767px) {
  .sm-modal {
    height: calc(100vh - 24px);
    max-width: 100%;
    border-radius: 14px;
    flex-direction: column;
    min-height: 0;
  }
  .sm-mobile-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .sm-sidebar {
    display: none;
  }
  .sm-main-header {
    padding: 14px 16px;
  }
  .sm-main-body {
    display: none;
  }
  .sm-main-footer {
    padding: 10px 16px;
  }
  .sm-mobile-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .sm-mobile-header .sm-mobile-eyebrow {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #7ab8ff;
    font-weight: 600;
  }
  .sm-mobile-header .sm-mobile-title {
    font-size: 19px;
    font-weight: 700;
    margin-top: 2px;
  }
  .sm-mobile-header .sm-mobile-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .sm-mobile-body {
    display: block;
    flex: 1;
    overflow-y: auto;
    padding: 14px 14px 8px;
  }
  .sm-accordion {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
    margin-bottom: 10px;
  }
  .sm-accordion-head {
    width: 100%;
    background: none;
    border: 0;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    color: #fff;
    font-family: inherit;
    transition: background 0.12s;
    text-align: left;
  }
  .sm-accordion-head:hover {
    background: rgba(255, 255, 255, 0.02);
  }
  .sm-accordion-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
  }
  .sm-accordion-meta {
    flex: 1;
    min-width: 0;
  }
  .sm-accordion-meta .sm-accordion-title {
    font-size: 14px;
    font-weight: 600;
  }
  .sm-accordion-meta .sm-accordion-sub {
    font-size: 11.5px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
  }
  .sm-accordion-chevron {
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.18s;
    font-size: 12px;
  }
  .sm-accordion.is-open .sm-accordion-chevron {
    transform: rotate(180deg);
  }
  .sm-accordion-body {
    display: none;
    padding: 4px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.2);
  }
  .sm-accordion.is-open .sm-accordion-body {
    display: block;
  }
  /* Make rows a bit tighter on mobile */
  .sm-mobile-body .sm-row {
    padding: 11px 0;
    align-items: center;
  }
  .sm-mobile-body .sm-row .sm-row-icon {
    display: none;
  }
  .sm-mobile-body .sm-row .sm-row-title {
    font-size: 13.5px;
  }
  .sm-mobile-body .sm-row .sm-row-desc {
    font-size: 11.5px;
  }
}
.dq-hero-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid var(--bg-modal-alt);
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  box-shadow: 0 2px 6px var(--black-30);
  padding: 10px 12px;
  animation: dqFadeIn 0.3s ease;
}

@keyframes dqFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.dq-quest-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.dq-quest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--white-03);
  border: 1px solid var(--white-06);
  transition: all 0.2s ease;
}

.dq-quest-row:hover {
  background: var(--white-06);
  border-color: var(--white-10);
}

.dq-quest-row.dq-ready {
  border-color: var(--green-mat-35);
  background: var(--green-mat-06);
}

.dq-quest-row.dq-claimed {
  opacity: 0.5;
}

.dq-quest-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--blue-500-12);
  flex-shrink: 0;
  overflow: hidden;
}

.dq-quest-icon i {
  font-size: 0.8rem;
  color: var(--color-blue-400);
}

.dq-quest-icon:has(.dq-quest-img) {
  background: transparent;
}

.dq-quest-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-filter: drop-shadow(0px 2px 0px var(--color-black-50));
  filter: drop-shadow(0px 2px 0px var(--color-black-50));
}

.dq-reward-skel-img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  margin-left: 3px;
  vertical-align: middle;
}

.dq-quest-row.dq-ready .dq-quest-icon {
  background: var(--green-mat-15);
}

.dq-quest-row.dq-ready .dq-quest-icon i {
  color: var(--color-green-material);
}

.dq-quest-row.dq-claimed .dq-quest-icon {
  background: var(--white-05);
}

.dq-quest-row.dq-claimed .dq-quest-icon i {
  color: var(--white-30);
}

.dq-quest-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dq-quest-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-90);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dq-quest-progress-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dq-quest-bar {
  flex: 1;
  height: 4px;
  background: var(--white-08);
  border-radius: 4px;
  overflow: hidden;
}

.dq-quest-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue-500), var(--color-blue-400));
  border-radius: 4px;
  transition: width 0.4s ease;
}

.dq-quest-row.dq-ready .dq-quest-bar-fill,
.dq-quest-row.dq-claimed .dq-quest-bar-fill {
  background: linear-gradient(90deg, var(--color-green-material), var(--color-green-material-light));
}

.dq-quest-progress-text {
  font-size: 0.65rem;
  color: var(--text-40);
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}

.dq-quest-reward {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 2px;
}

.dq-reward-amount {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-blue-400);
}

.dq-reward-skel {
  font-size: 0.6rem;
  color: var(--amber-400-60);
  font-weight: 500;
}

.dq-claim-btn {
  padding: 4px 12px;
  border: none;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--color-green-material), var(--color-green-material-light));
  color: var(--color-white);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dq-claim-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--green-mat-30);
}

.dq-claim-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}

.dq-check {
  color: var(--color-green-material);
  font-size: 1rem;
}

.dq-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--white-06);
}

.dq-timer {
  font-size: 0.65rem;
  color: var(--text-35);
}

.dq-timer i {
  margin-right: 4px;
  font-size: 0.6rem;
}

.dq-view-all {
  font-size: 0.68rem;
  color: var(--color-blue-400);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s ease;
}

.dq-view-all:hover {
  color: var(--color-blue-soft);
}

.dq-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  color: var(--text-30);
  font-size: 0.8rem;
}

@media (max-width: 768px) {
  .dq-hero-panel {
    padding: 8px 10px;
  }
  .dq-quest-row {
    padding: 6px 8px;
    gap: 8px;
  }
  .dq-quest-icon {
    width: 26px;
    height: 26px;
  }
  .dq-quest-icon i {
    font-size: 0.7rem;
  }
  .dq-quest-title {
    font-size: 0.72rem;
  }
}
.skelly-toast-container {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
  max-width: 420px;
  width: calc(100% - 48px);
}

.skelly-toast {
  --toast-border: var(--color-red-500);
  --toast-bg: var(--red-500-12);
  --toast-accent: var(--color-red-400);
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 40px 14px 78px;
  border-radius: 12px;
  border: 1px solid var(--toast-border);
  background: linear-gradient(135deg, var(--toast-bg), var(--overlay-dark-deep-97));
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 32px var(--black-50), 0 0 20px var(--toast-bg);
  pointer-events: all;
  overflow: hidden;
  transform: translateX(-120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.skelly-toast-visible {
  transform: translateX(0);
  opacity: 1;
}

.skelly-toast-hiding {
  animation: skellyToastOut 0.3s ease forwards;
}

@keyframes skellyToastOut {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-120%);
    opacity: 0;
  }
}
.skelly-toast-img {
  position: absolute !important;
  bottom: 0 !important;
  left: -4px !important;
  width: 80px !important;
  height: auto !important;
  max-height: 150% !important;
  object-fit: contain !important;
  object-position: bottom center !important;
  pointer-events: none !important;
  border-radius: 0 !important;
  z-index: 2;
}

.skelly-toast-content {
  flex: 1;
  min-width: 0;
}

.skelly-toast-title {
  font-family: "Inter", "Raleway", sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--toast-accent);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
  text-transform: uppercase;
}

.skelly-toast-message {
  font-size: 0.82rem;
  color: var(--text-muted-light);
  line-height: 1.35;
  word-break: break-word;
}

.skelly-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  color: var(--color-gray-muted);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.2s;
}
.skelly-toast-close:hover {
  color: var(--color-white);
}

.skelly-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--toast-accent);
  border-radius: 0 0 0 12px;
  width: 100%;
  transform-origin: left;
  animation: skellyToastProgress linear forwards;
  opacity: 0.6;
}

@keyframes skellyToastProgress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
@media (max-width: 480px) {
  .skelly-toast-container {
    bottom: 16px;
    left: 12px;
    max-width: calc(100% - 24px);
    width: calc(100% - 24px);
  }
  .skelly-toast-img {
    width: 70px !important;
  }
  .skelly-toast {
    padding: 10px 34px 10px 68px;
    gap: 10px;
  }
}
.quests-page {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 16px 60px;
}

.quests-hero {
  text-align: center;
  padding: 32px 16px 24px;
}

.quests-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--color-primary-bright) 0%, var(--color-sky-400) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-size: 1.5rem;
  color: var(--color-white);
}

.quests-hero h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 6px;
}

.quests-hero p {
  color: var(--color-slate-400);
  font-size: 0.95rem;
  max-width: 540px;
  margin: 0 auto;
}
.quests-hero p strong {
  color: var(--color-amber-500);
}

.quests-login-gate {
  text-align: center;
  padding: 48px 16px;
  color: var(--color-slate-500);
}
.quests-login-gate i {
  font-size: 2rem;
  margin-bottom: 12px;
  display: block;
}
.quests-login-gate p {
  margin: 0 0 16px;
  font-size: 0.95rem;
}

.quests-login-btn {
  background: var(--color-primary-bright);
  color: var(--color-white);
  border: none;
  border-bottom: 3px solid var(--color-primary-tab);
  border-radius: 6px;
  padding: 8px 32px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.quests-login-btn:hover {
  background: var(--color-primary-tab-active);
}

.quests-progress-header {
  background: var(--bg-dark-alt);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

.quests-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.quests-progress-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-slate-400);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.quests-progress-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.quests-progress-bar-outer {
  height: 8px;
  background: var(--bg-deepest);
  border-radius: 4px;
  overflow: hidden;
}

.quests-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-sky-400));
  border-radius: 4px;
  transition: width 0.4s ease;
}

.quests-final-reward {
  background: linear-gradient(135deg, var(--bg-dark-alt) 0%, var(--bg-raised-mid) 100%);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.quests-final-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--color-amber-500) 0%, var(--color-amber-600) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--color-white);
  flex-shrink: 0;
}

.quests-final-info {
  flex: 1;
  min-width: 0;
}

.quests-final-title {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-amber-500);
}

.quests-final-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--color-slate-400);
}

.quests-final-status {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--color-slate-600);
  flex-shrink: 0;
}

.quests-final-unlocked .quests-final-status {
  color: var(--color-green-500);
}

.quests-final-unlocked {
  border-color: var(--color-amber-500);
  box-shadow: 0 0 20px var(--amber-500-15);
}

.quests-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-dark-alt);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}

.quests-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-slate-400);
  padding: 10px 6px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  position: relative;
}
.quests-tab:hover {
  color: var(--text-secondary);
  background: var(--bg-darker);
}
.quests-tab.is-active {
  background: var(--bg-darker);
  color: var(--color-white);
}

.quests-tab-badge {
  font-size: 0.65rem;
  background: var(--bg-deepest);
  color: var(--color-slate-500);
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: 2px;
  font-weight: 700;
}

.quests-tab-badge-done {
  background: var(--green-500-15);
  color: var(--color-green-500);
}

.quests-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.quest-card {
  background: var(--bg-dark-alt);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  animation: questFadeIn 0.3s ease both;
}

@keyframes questFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.quest-card.quest-done {
  opacity: 0.55;
}

.quest-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--bg-darker);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  color: var(--color-primary-bright);
}

.quest-done .quest-icon-wrap {
  color: var(--color-green-500);
}

.quest-info {
  flex: 1;
  min-width: 0;
}

.quest-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.quest-desc {
  font-size: 0.8rem;
  color: var(--color-slate-500);
  margin-bottom: 8px;
}

.quest-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.quest-progress-bar {
  flex: 1;
  height: 6px;
  background: var(--bg-deepest);
  border-radius: 3px;
  overflow: hidden;
}

.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary-bright), var(--color-sky-400));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.quest-done .quest-progress-fill {
  background: linear-gradient(90deg, var(--color-green-500), var(--color-green-400));
}

.quest-progress-text {
  font-size: 0.75rem;
  color: var(--color-slate-400);
  white-space: nowrap;
}

.quest-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.quest-reward {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
}
.quest-reward i {
  font-size: 0.75rem;
}

.quest-reward-label {
  white-space: nowrap;
}

.quest-status {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.quest-status-done {
  color: var(--color-green-500);
}

.quest-verify-btn {
  background: var(--bg-raised-mid);
  border: none;
  border-bottom: 2px solid var(--bg-raised-dark);
  border-radius: 5px;
  color: var(--color-slate-400);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.quest-verify-btn:hover {
  background: var(--bg-float-mid);
  color: var(--text-secondary);
}

.quest-link-btn {
  background: transparent;
  border: none;
  color: var(--color-primary-bright);
  font-size: 0.72rem;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.quest-link-btn:hover {
  color: var(--color-sky-400);
}
.quest-link-btn i {
  font-size: 0.65rem;
}

@media (max-width: 640px) {
  .quests-tabs {
    flex-wrap: wrap;
  }
  .quests-tab {
    flex: 1 1 45%;
    font-size: 0.78rem;
    padding: 8px 4px;
  }
  .quest-card {
    padding: 12px;
    gap: 10px;
    flex-wrap: wrap;
  }
  .quest-icon-wrap {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }
  .quest-right {
    flex-direction: row;
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 4px;
  }
}
.quest-card.quest-ready {
  border-color: var(--green-mat-35);
  background: var(--green-mat-04);
}

.quest-card.quest-ready .quest-progress-fill {
  background: linear-gradient(90deg, var(--color-green-material), var(--color-green-material-light));
}

.dq-page-timer {
  text-align: center;
  padding: 10px 16px;
  margin-bottom: 8px;
  font-size: 0.82rem;
  color: var(--text-40);
  border-radius: 10px;
  background: var(--white-03);
  border: 1px solid var(--white-06);
}

.dq-page-timer i {
  margin-right: 6px;
  color: var(--text-30);
}

.quest-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
  -webkit-filter: drop-shadow(0px 2px 0px var(--color-black-50));
  filter: drop-shadow(0px 2px 0px var(--color-black-50));
}

.quest-reward-skel-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-left: 4px;
  vertical-align: middle;
}

.pv2-page {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 80px) 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pv2-not-logged-in {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}

.pv2-empty-state {
  text-align: center;
  color: var(--text-65);
}

.pv2-empty-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--primary-10);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv2-empty-icon i {
  font-size: 28px;
  color: var(--text-30);
}

.pv2-empty-state h2 {
  color: var(--text-primary);
  margin-bottom: 8px;
  font-size: 1.4rem;
  font-weight: 700;
}

.pv2-empty-state p {
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.pv2-hero-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  box-shadow: 0 4px 24px var(--black-35);
}

.pv2-banner-area {
  position: relative;
  height: 120px;
  background: linear-gradient(135deg, var(--bg-panel-mid) 0%, var(--bg-panel-warm) 50%, var(--bg-shade-navy) 100%);
  overflow: hidden;
}

.pv2-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pv2-decoration-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0px 2px 0px var(--black-30));
}

.pv2-banner-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(to top, var(--overlay-100) 0%, transparent 100%);
  z-index: 3;
}

.pv2-identity {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  padding: 0 20px 18px;
  margin-top: -44px;
}

.pv2-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pv2-avatar {
  width: 96px;
  height: 96px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--avatar-color, var(--bg-modal-alt)), color-mix(in srgb, var(--avatar-color, var(--bg-modal-alt)), black 15%));
  /* Match the hero-profile-avatar shadow recipe so all three pfp surfaces
     share the same frameless floating-card feel. */
  box-shadow: 0 6px 16px var(--black-40), 0 2px 4px var(--black-40), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  /* NOTE: -webkit-mask-image was previously used here to fix Safari's
     border-radius + overflow:hidden bug, but a mask clips the element to
     its shape — including its box-shadow — which made the floating-card
     glow disappear. Modern Safari handles overflow:hidden + border-radius
     fine, so the mask has been removed to let the shadow render. */
}
.pv2-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  border-radius: inherit;
}

.pv2-avatar-edit {
  position: absolute;
  bottom: -4px;
  right: -4px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid var(--overlay-99);
  color: var(--color-white);
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  z-index: 5;
}
.pv2-avatar-edit:hover {
  background: var(--color-primary-link);
  transform: scale(1.1);
}

.pv2-user-info {
  flex: 1;
  min-width: 0;
  padding-bottom: 2px;
}

.pv2-username-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv2-username {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.pv2-edit-btn {
  background: none;
  border: none;
  color: var(--text-35);
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
  transition: color 0.2s;
}
.pv2-edit-btn:hover {
  color: var(--color-primary);
}

.pv2-badges-row {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}

.pv2-badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  image-rendering: pixelated;
  border-radius: 3px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.pv2-badge:hover {
  opacity: 1;
}

.pv2-meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.pv2-wallet {
  font-size: 0.72rem;
  color: var(--text-40);
  font-family: "Inter", monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.pv2-joined {
  font-size: 0.72rem;
  color: var(--text-30);
}

.pv2-rank-card {
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 4px 20px var(--black-30);
}

.pv2-rank-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pv2-rank-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 2px 6px var(--primary-25));
  flex-shrink: 0;
}

.pv2-rank-details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pv2-rank-name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0.02em;
}

.pv2-rank-pct {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-45);
  letter-spacing: 0.03em;
}

.pv2-rank-view-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--white-05);
  border: 1px solid var(--white-08);
  color: var(--text-50);
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.pv2-rank-view-btn:hover {
  background: var(--orange-warm-10);
  border-color: var(--orange-warm-25);
  color: var(--color-orange-warm);
}

.pv2-rank-bar {
  height: 8px;
  background: var(--white-06);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px var(--black-30);
}

.pv2-rank-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}
.pv2-rank-fill::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, var(--white-20), transparent);
  border-radius: 4px 4px 0 0;
}

.pv2-rank-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--text-30);
  margin-top: 6px;
}

.pv2-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.pv2-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 12px var(--black-25);
  transition: border-color 0.25s, box-shadow 0.25s;
}
.pv2-stat:hover {
  border-color: var(--bg-panel-accent);
  box-shadow: 0 4px 18px var(--black-35);
}

.pv2-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.pv2-stat-icon.wagered {
  background: var(--amber-400-12);
  color: var(--color-amber-400);
}
.pv2-stat-icon.profit {
  background: var(--green-500-12);
  color: var(--color-green-500);
}
.pv2-stat-icon.skellies {
  background: var(--amber-400-12);
  color: var(--color-amber-400);
}
.pv2-stat-icon.wins {
  background: var(--sky-400-12);
  color: var(--color-sky-400);
}
.pv2-stat-icon.losses {
  background: var(--red-500-12);
  color: var(--color-red-500);
}
.pv2-stat-icon.bets {
  background: var(--purple-500-12);
  color: var(--color-purple-500);
}
.pv2-stat-icon.winrate {
  background: var(--emerald-12);
  color: var(--color-emerald-400);
}

.pv2-stat-data {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pv2-stat-val {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv2-stat-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--text-35);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pv2-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-35);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 4px;
}

.pv2-achv-dev-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--amber-500-08);
  border: 1px solid var(--amber-500-25);
  color: var(--color-amber-400);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
}
.pv2-achv-dev-banner i {
  font-size: 1rem;
  flex-shrink: 0;
}

.pv2-achv-panel {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--bg-modal-alt);
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  box-shadow: 0 2px 12px var(--black-25);
  padding: 14px 16px;
  gap: 10px;
}

.pv2-achv-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pv2-achv-summary {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pv2-achv-summary-left {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pv2-achv-summary-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-85);
}

.pv2-achv-summary-xp {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--color-amber-400);
}

.pv2-achv-summary-bar {
  height: 4px;
  background: var(--white-08);
  border-radius: 4px;
  overflow: hidden;
  max-width: 200px;
}

.pv2-achv-summary-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue-500), var(--color-blue-400));
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pv2-achv-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white-04);
  border: 1px solid var(--white-08);
  border-radius: 8px;
  padding: 6px 10px;
  flex-shrink: 0;
  width: 180px;
  transition: border-color 0.2s;
}
.pv2-achv-search:focus-within {
  border-color: var(--blue-500-30);
}
.pv2-achv-search i {
  font-size: 0.65rem;
  color: var(--text-30);
}
.pv2-achv-search input {
  background: none;
  border: none;
  outline: none;
  color: var(--text-85);
  font-size: 0.72rem;
  width: 100%;
  font-family: inherit;
}
.pv2-achv-search input::placeholder {
  color: var(--text-25);
}

.pv2-achv-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.pv2-achv-filter {
  padding: 4px 10px;
  background: var(--white-04);
  border: 1px solid var(--white-06);
  border-radius: 6px;
  color: var(--text-45);
  font-size: 0.65rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.pv2-achv-filter .pv2-achv-filter-count {
  margin-left: 4px;
  font-weight: 400;
  opacity: 0.6;
}
.pv2-achv-filter:hover {
  background: var(--white-07);
  color: var(--text-70);
}
.pv2-achv-filter.active {
  background: var(--blue-500-12);
  border-color: var(--blue-500-25);
  color: var(--color-blue-400);
}

.pv2-achv-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--white-08) transparent;
}
.pv2-achv-list::-webkit-scrollbar {
  width: 4px;
}
.pv2-achv-list::-webkit-scrollbar-track {
  background: transparent;
}
.pv2-achv-list::-webkit-scrollbar-thumb {
  background: var(--white-10);
  border-radius: 4px;
}

.pv2-achv-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 0;
  color: var(--text-20);
  font-size: 0.75rem;
}
.pv2-achv-empty i {
  font-size: 1.2rem;
}

.pv2-achv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--white-025);
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}
.pv2-achv-row:hover {
  background: var(--white-055);
}
.pv2-achv-row.locked {
  opacity: 0.4;
}
.pv2-achv-row.locked:hover {
  opacity: 0.55;
}
.pv2-achv-row.locked .pv2-achv-row-icon img {
  filter: brightness(0.5) grayscale(0.6);
}
.pv2-achv-row.earned {
  opacity: 1;
}
.pv2-achv-row.earned .pv2-achv-row-bar-fill {
  background: linear-gradient(90deg, var(--color-green-material), var(--color-green-material-light));
}
.pv2-achv-row.earned.rarity-common {
  border-left-color: var(--slate-300-40);
}
.pv2-achv-row.earned.rarity-uncommon {
  border-left-color: var(--green-500-50);
}
.pv2-achv-row.earned.rarity-rare {
  border-left-color: var(--blue-500-50);
}
.pv2-achv-row.earned.rarity-epic {
  border-left-color: var(--purple-500-50);
  background: var(--purple-500-03);
}
.pv2-achv-row.earned.rarity-legendary {
  border-left-color: var(--amber-500-60);
  background: var(--amber-500-03);
}

.pv2-achv-row-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  background: transparent;
  flex-shrink: 0;
  overflow: hidden;
}
.pv2-achv-row-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0px 1px 0px var(--black-30));
}

.pv2-achv-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.pv2-achv-row-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv2-achv-row-desc {
  font-weight: 400;
  color: var(--text-30);
  margin-left: 6px;
  font-size: 0.68rem;
}

.pv2-achv-row-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pv2-achv-row-bar {
  flex: 1;
  height: 3px;
  background: var(--white-06);
  border-radius: 3px;
  overflow: hidden;
}

.pv2-achv-row-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-blue-500), var(--color-blue-400));
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pv2-achv-row-pct {
  font-size: 0.6rem;
  color: var(--text-30);
  white-space: nowrap;
  min-width: 24px;
  text-align: right;
}

.pv2-achv-row-reward {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pv2-achv-row-xp {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-blue-400);
}

.pv2-achv-row-rarity {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.45rem;
}
.pv2-achv-row-rarity.rarity-common {
  background: var(--slate-300-12);
  color: var(--color-slate-300);
}
.pv2-achv-row-rarity.rarity-uncommon {
  background: var(--green-500-12);
  color: var(--color-green-500);
}
.pv2-achv-row-rarity.rarity-rare {
  background: var(--blue-500-12);
  color: var(--color-blue-500);
}
.pv2-achv-row-rarity.rarity-epic {
  background: var(--purple-500-12);
  color: var(--color-purple-500);
}
.pv2-achv-row-rarity.rarity-legendary {
  background: var(--amber-500-12);
  color: var(--color-amber-500);
}

@media (max-width: 480px) {
  .pv2-achv-panel {
    padding: 10px 10px;
  }
  .pv2-achv-header {
    flex-direction: column;
    gap: 8px;
  }
  .pv2-achv-search {
    width: 100%;
  }
  .pv2-achv-row {
    padding: 6px 8px;
    gap: 8px;
  }
  .pv2-achv-row-icon {
    width: 24px;
    height: 24px;
  }
  .pv2-achv-row-title {
    font-size: 0.7rem;
  }
  .pv2-achv-row-desc {
    display: none;
  }
}
.pv2-linked-card {
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 2px 12px var(--black-25);
}

.pv2-linked-card .linked-account-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--white-03);
  border-radius: 10px;
  margin-bottom: 6px;
}
.pv2-linked-card .linked-account-item:last-child {
  margin-bottom: 0;
}

.pv2-linked-card .linked-account-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--text-90);
}
.pv2-linked-card .linked-account-info i {
  font-size: 1rem;
  width: 18px;
  text-align: center;
}

.pv2-linked-card .linked-account-name {
  color: var(--text-45);
  font-size: 0.75rem;
}

.pv2-linked-card .linked-account-status.linked {
  color: var(--color-green-500);
  font-size: 0.75rem;
  font-weight: 500;
}

.pv2-linked-card .linked-account-link-btn {
  font-size: 0.72rem;
  padding: 3px 12px;
}

.pv2-linked-card .linked-account-unlink {
  font-size: 0.72rem;
  padding: 2px 10px;
}

.pv2-linked-card .linked-accounts-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.pv2-linked-card .linked-account-add-btn {
  font-size: 0.8rem;
  padding: 5px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.pv2-customize-bar {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.pv2-cust-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--white-04);
  border: 1px solid var(--white-06);
  border-radius: 8px;
  color: var(--text-55);
  font-size: 0.68rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  white-space: nowrap;
}
.pv2-cust-btn i {
  font-size: 11px;
}
.pv2-cust-btn:hover {
  background: var(--white-10);
  color: var(--text-primary);
}
.pv2-cust-btn#pv2ChangeUsernameBtn i {
  color: var(--color-blue-500);
}
.pv2-cust-btn#pv2ChangeColorBtn i {
  color: var(--color-purple-500);
}
.pv2-cust-btn#pv2ChangeBannerBtn i {
  color: var(--color-sky-400);
}
.pv2-cust-btn#pv2ChangeDecorationBtn i {
  color: var(--color-amber-400);
}
.pv2-cust-btn#pv2ChangeBadgesBtn i {
  color: var(--color-green-500);
}

@media (max-width: 480px) {
  .pv2-cust-btn span {
    display: none;
  }
  .pv2-cust-btn {
    padding: 8px 12px;
  }
  .pv2-cust-btn i {
    font-size: 14px;
  }
  .pv2-customize-bar {
    gap: 6px;
  }
}
.pv2-rank-next-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--white-03);
  border-radius: 8px;
  font-size: 0.72rem;
  color: var(--text-45);
}
.pv2-rank-next-info .pv2-rank-next-icon {
  width: 24px;
  height: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}
.pv2-rank-next-info .pv2-rank-next-text {
  flex: 1;
}
.pv2-rank-next-info .pv2-rank-next-text strong {
  color: var(--text-70);
}
.pv2-rank-next-info .pv2-rank-next-text .pv2-rank-xp-hint {
  margin-top: 3px;
  font-size: 0.62rem;
  color: var(--text-30, rgba(244, 248, 255, 0.3));
  letter-spacing: 0.02em;
}

.pv2-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: var(--red-500-08);
  border: 2px solid var(--red-500-20);
  border-radius: 14px;
  color: var(--color-red-500);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 20px;
}
.pv2-logout-btn:hover {
  background: var(--red-500-15);
  border-color: var(--red-500-35);
}

@media (min-width: 1024px) {
  .pv2-page {
    max-width: 900px;
    padding-top: calc(env(safe-area-inset-top, 0px) + 90px);
  }
  .pv2-stats-row {
    grid-template-columns: repeat(6, 1fr);
  }
  .pv2-stat {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 16px 10px;
  }
  .pv2-stat-data {
    align-items: center;
  }
  .pv2-banner-area {
    height: 160px;
  }
  .pv2-avatar {
    width: 96px;
    height: 96px;
  }
  .pv2-identity {
    margin-top: -48px;
    padding: 0 28px 22px;
    gap: 20px;
  }
  .pv2-username {
    font-size: 1.6rem;
  }
}
@media (max-width: 480px) {
  .pv2-page {
    padding: calc(env(safe-area-inset-top, 0px) + 68px) 10px 30px;
    gap: 10px;
  }
  .pv2-banner-area {
    height: 100px;
  }
  .pv2-identity {
    padding: 0 14px 14px;
    margin-top: -36px;
    gap: 12px;
  }
  .pv2-avatar {
    width: 68px;
    height: 68px;
  }
  .pv2-username {
    font-size: 1.15rem;
  }
  .pv2-stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .pv2-stat {
    padding: 12px;
    gap: 10px;
  }
  .pv2-stat-icon {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .pv2-stat-val {
    font-size: 0.92rem;
  }
}
.hp-community-section {
  position: relative;
  padding: 0 0 20px;
}

.hp-community-heading {
  grid-column: 1/7;
  grid-row: 2;
  margin: 6px 0 0;
}

.hp-community-stats-billboard {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--color-black) 8%, var(--color-black) 92%, transparent 100%);
}

.hp-billboard-track {
  display: flex;
  gap: 32px;
  white-space: nowrap;
  width: max-content;
  will-change: transform;
}

.hp-billboard-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--white-50);
  letter-spacing: 0.02em;
}
.hp-billboard-item i {
  color: var(--blue-500-70);
  font-size: 0.72rem;
}
.hp-billboard-item span {
  color: var(--color-white);
  font-weight: 800;
}

.hp-community-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  gap: 10px;
  margin-top: 10px;
}

.hp-cm-card {
  background: linear-gradient(160deg, var(--overlay-dark-97) 0%, var(--overlay-99) 100%);
  border: none;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px var(--black-35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  color: var(--text-primary);
  text-decoration: none;
}
.hp-cm-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--white-10);
  box-shadow: inset 0 1px 0 0 var(--white-12), inset 0 -1px 0 0 var(--white-04);
  pointer-events: none;
  z-index: 4;
}
.hp-cm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px var(--black-40);
  color: var(--text-primary);
  text-decoration: none;
}
.hp-cm-card:hover::after {
  border-color: var(--white-18);
  box-shadow: inset 0 1px 0 0 var(--white-20), inset 0 -1px 0 0 var(--white-06);
}

.hp-cm-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 8px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--white-70);
}
.hp-cm-card-header i {
  color: var(--blue-500-80);
}

.hp-cm-leaderboard {
  grid-column: 1/3;
  grid-row: 3/6;
}

.hp-cm-lb-tabs {
  display: flex;
  gap: 0;
  padding: 0 10px;
  border-bottom: 1px solid var(--white-06);
}

.hp-cm-lb-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 6px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--white-35);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.hp-cm-lb-tab:hover {
  color: var(--white-60);
}
.hp-cm-lb-tab.hp-cm-lb-tab--active {
  color: var(--color-white);
  border-bottom-color: var(--blue-500-80);
}
.hp-cm-lb-tab i {
  font-size: 10px;
}

.hp-cm-lb-dual {
  display: contents;
}

.hp-cm-lb-col {
  display: contents;
}

.hp-cm-lb-col-header {
  display: none;
}

.hp-cm-lb-col--skellies {
  display: none;
}

.hp-cm-leaderboard-list {
  padding: 6px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-cm-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  background: var(--white-02);
  transition: background 0.15s;
}
.hp-cm-lb-row:hover {
  background: var(--white-06);
}

.hp-cm-lb-rank {
  font-size: 0.72rem;
  font-weight: 800;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.hp-cm-lb-rank--1 {
  color: var(--color-amber-400);
}
.hp-cm-lb-rank--2 {
  color: var(--color-slate-400);
}
.hp-cm-lb-rank--3 {
  color: var(--color-bronze);
}

.hp-cm-lb-avatar {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  background: var(--white-08);
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-cm-lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hp-cm-lb-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--white-85);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.hp-cm-lb-name:hover {
  color: var(--color-white);
}

.hp-cm-lb-stat {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white-90);
  flex-shrink: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hp-cm-lb-stat-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  vertical-align: middle;
}

.hp-cm-lb-placeholder {
  text-align: center;
  padding: 30px 10px;
  color: var(--white-25);
  font-size: 0.75rem;
}

.hp-cm-lb-rank-badge {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.hp-cm-lb-you {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin: 2px 10px 6px;
  border-radius: 8px;
  background: var(--blue-500-08);
  border: 1px solid var(--blue-500-20);
}

.hp-cm-lb-you-label {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--blue-500-90);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hp-cm-lb-you-pos {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--white-70);
  margin-left: auto;
}

.hp-cm-lb-you-stat {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--white-90);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hp-cm-lb-you-cta {
  color: var(--blue-500-90);
  text-decoration: none;
  font-weight: 600;
}
.hp-cm-lb-you-cta:hover {
  color: var(--color-white);
}

.hp-cm-lb-you-dual {
  display: none;
}

.hp-cm-lb-you-half {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--blue-500-08);
  border: 1px solid var(--blue-500-20);
  border-radius: 8px;
}

.hp-cm-lb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 20px);
  margin: 0 10px 10px;
  padding: 7px 0;
  border: 1px solid var(--white-08);
  border-radius: 8px;
  background: var(--white-03);
  color: var(--white-40);
  font-size: 0.68rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.hp-cm-lb-more:hover {
  background: var(--white-07);
  color: var(--white-65);
  text-decoration: none;
}
.hp-cm-lb-more i {
  font-size: 0.6rem;
}

.hp-cm-stats-card {
  grid-column: 3/7;
  grid-row: 4;
  overflow: hidden;
  align-self: end;
}

.hp-cm-news {
  grid-column: 3/7;
  grid-row: 3;
  align-self: stretch;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.hp-cm-news-list {
  padding: 0 12px 10px;
  display: flex;
  flex-direction: row;
  gap: 6px;
  flex: 1;
}

.hp-cm-news-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 8px 28px;
  background-color: var(--white-02);
  border-radius: 6px;
  text-align: center;
  min-width: 0;
  min-height: 0;
  position: relative;
  transition: background-color 0.15s;
}
.hp-cm-news-item:hover {
  background-color: var(--white-04);
}

.hp-cm-news-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.55rem;
}
.hp-cm-news-icon--update {
  background: var(--blue-500-15);
  color: var(--color-blue-400);
}
.hp-cm-news-icon--event {
  background: var(--purple-500-15);
  color: var(--color-purple-400);
}
.hp-cm-news-icon--announcement {
  background: var(--amber-500-15);
  color: var(--color-amber-400);
}
.hp-cm-news-icon--twitter {
  background: var(--white-08);
  color: var(--color-white);
}
.hp-cm-news-icon--win {
  background: var(--green-500-15);
  color: var(--color-green-400);
}
.hp-cm-news-icon--sale {
  background: var(--pink-15);
  color: var(--color-pink-400);
}

.hp-cm-news-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  width: 100%;
}

.hp-cm-news-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--white-85);
  line-height: 1.3;
  text-align: center;
}

.hp-cm-news-bottom {
  position: absolute;
  bottom: 6px;
  left: 8px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hp-cm-news-meta {
  font-size: 0.48rem;
  color: var(--white-30);
  font-weight: 600;
}

.hp-cm-news-date {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 0.48rem;
  color: var(--white-25);
  font-weight: 600;
}

.hp-cm-news-item--has-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hp-cm-news-item--has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--black-15) 0%, var(--black-75) 100%);
  border-radius: 6px;
  z-index: 0;
}
.hp-cm-news-item--has-bg .hp-cm-news-content {
  position: relative;
  z-index: 1;
}
.hp-cm-news-item--has-bg .hp-cm-news-bottom,
.hp-cm-news-item--has-bg .hp-cm-news-date {
  z-index: 1;
}
.hp-cm-news-item--has-bg .hp-cm-news-title {
  color: var(--color-white);
  text-shadow: 0 1px 4px var(--black-50);
}
.hp-cm-news-item--has-bg .hp-cm-news-meta {
  color: var(--white-50);
}
.hp-cm-news-item--has-bg:hover::before {
  background: linear-gradient(180deg, var(--black-35) 0%, var(--black-60) 100%);
}

.hp-cm-news-item--win {
  background: linear-gradient(135deg, var(--bg-navy) 0%, var(--bg-dark-teal) 50%, var(--bg-dark-teal-deep) 100%);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hp-cm-news-item--win:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.35);
}
.hp-cm-news-item--win:active {
  transform: translateY(0);
}

.hp-cm-news-rain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.18;
  z-index: 0;
}
.hp-cm-news-rain i {
  display: inline-block;
  position: absolute;
  background-image: url("/assets/currencies/skel.webp");
  background-size: contain;
  background-repeat: no-repeat;
  animation: skelRainFall 4s linear infinite;
  will-change: transform, opacity;
  image-rendering: auto;
}
.hp-cm-news-rain i:nth-child(3n) {
  width: 14px;
  height: 14px;
  animation-duration: 5s;
}
.hp-cm-news-rain i:nth-child(3n+1) {
  width: 18px;
  height: 18px;
  animation-duration: 6.5s;
}
.hp-cm-news-rain i:nth-child(3n+2) {
  width: 11px;
  height: 11px;
  animation-duration: 4s;
}

.hp-cm-win-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.hp-cm-win-game-img {
  width: 68px;
  height: 68px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 10px var(--black-40);
  flex-shrink: 0;
}

.hp-cm-win-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.hp-cm-win-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-amber-400);
  background: var(--amber-400-12);
  border: 1px solid var(--amber-400-20);
  border-radius: 4px;
  padding: 2px 7px;
}
.hp-cm-win-badge i {
  font-size: 0.42rem;
}

.hp-cm-win-amount {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-white);
  text-shadow: 0 0 20px var(--green-400-40), 0 0 40px var(--green-400-15);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  animation: winAmountPulse 3s ease-in-out infinite;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hp-cm-win-skel-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  filter: drop-shadow(0 0 4px var(--green-400-40));
}

@keyframes winAmountPulse {
  0%, 100% {
    text-shadow: 0 0 20px var(--green-400-40), 0 0 40px var(--green-400-15);
  }
  50% {
    text-shadow: 0 0 30px var(--green-400-60), 0 0 60px var(--green-400-25);
  }
}
.hp-cm-win-user {
  font-size: 0.58rem;
  font-weight: 600;
  color: var(--white-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.hp-cm-win-details {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 1px;
}

.hp-cm-win-game {
  font-size: 0.5rem;
  font-weight: 700;
  color: var(--white-40);
  background: var(--white-06);
  padding: 1px 6px;
  border-radius: 3px;
}

.hp-cm-win-multi {
  font-size: 0.5rem;
  font-weight: 800;
  color: var(--color-green-400);
}

.hp-cm-news-item--tweet {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.hp-cm-news-dots {
  display: none;
  justify-content: center;
  gap: 6px;
  padding: 0 0 10px;
}

.hp-cm-news-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--white-15);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hp-cm-news-dot.active {
  background: var(--white-60);
  transform: scale(1.3);
}

.hp-cm-news-placeholder {
  font-size: 0.72rem;
  color: var(--white-25);
  padding: 16px 0;
  text-align: center;
  font-style: italic;
}

.hp-cm-mints {
  grid-column: 1/7;
  grid-row: 1;
  background: transparent;
  border: none;
  border-radius: 0;
  overflow: hidden;
  min-width: 0;
  box-shadow: none;
  align-self: start;
}
.hp-cm-mints::after {
  display: none;
}
.hp-cm-mints:hover {
  transform: none;
  box-shadow: none;
}
.hp-cm-mints .hp-cm-card-header {
  padding: 14px 14px 8px 0;
}

.hp-cm-ticker-toggle {
  display: inline-flex;
  background: var(--white-05);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}

.hp-cm-ticker-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--white-40);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hp-cm-ticker-toggle-btn:hover {
  color: var(--white-65);
}
.hp-cm-ticker-toggle-btn.hp-cm-ticker-toggle-active {
  background: var(--white-10);
  color: var(--color-white);
}
.hp-cm-ticker-toggle-btn .fa-tag {
  color: var(--color-amber-500);
}

.hp-cm-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-green-500);
  box-shadow: 0 0 6px var(--green-500-50);
  animation: cmDotPulse 1.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes cmDotPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
@keyframes cmTickerSlideIn {
  0% {
    opacity: 0;
    max-width: 0;
    margin-right: 0;
    transform: scale(0.7);
  }
  60% {
    opacity: 1;
    transform: scale(1.03);
  }
  100% {
    max-width: 120px;
    margin-right: 0;
    transform: scale(1);
  }
}
.hp-cm-mints-track-wrap {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, var(--color-black) 0%, var(--color-black) 96%, transparent 100%);
  padding: 0;
}

.hp-cm-mints-track {
  display: flex;
  gap: 8px;
  padding: 4px 0 6px;
  overflow: visible;
}

@keyframes mintCardFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}
.hp-cm-mint-card {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hp-cm-mint-card:hover {
  transform: translateY(-4px);
}

.hp-cm-mint-thumb {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  box-shadow: 0 4px 16px var(--black-35);
  transition: box-shadow 0.3s ease;
}
.hp-cm-mint-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid var(--white-10);
  box-shadow: inset 0 1px 0 0 var(--white-12), inset 0 -1px 0 0 var(--white-04);
  pointer-events: none;
  z-index: 4;
}
.hp-cm-mint-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 6px var(--black-50));
  position: relative;
  z-index: 0;
}

.hp-cm-mint-card:hover .hp-cm-mint-thumb {
  box-shadow: 0 8px 30px var(--black-40);
}
.hp-cm-mint-card:hover .hp-cm-mint-thumb::after {
  border-color: var(--white-18);
  box-shadow: inset 0 1px 0 0 var(--white-20), inset 0 -1px 0 0 var(--white-06);
}

.hp-cm-mint-label {
  display: block;
  padding: 4px 2px 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--white-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.hp-cm-mp-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  background: var(--black-55);
  border: 1px solid var(--white-15);
  padding: 2px;
  z-index: 5;
  pointer-events: none;
}

.hp-cm-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  text-decoration: none;
  cursor: pointer;
}

.hp-cm-cta-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.hp-cm-creator .hp-cm-cta-icon {
  background: linear-gradient(135deg, var(--blue-500-20), var(--blue-500-05));
  color: var(--color-blue-500);
}

.hp-cm-cta-text {
  flex: 1;
  min-width: 0;
}

.hp-cm-cta-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-white);
}

.hp-cm-cta-sub {
  display: block;
  font-size: 0.68rem;
  color: var(--white-40);
  margin-top: 1px;
}

.hp-cm-cta-arrow {
  color: var(--white-20);
  font-size: 0.7rem;
  flex-shrink: 0;
  transition: transform 0.15s, color 0.15s;
}

.hp-cm-cta:hover .hp-cm-cta-arrow {
  color: var(--white-50);
  transform: translateX(2px);
}

.hp-cm-voting {
  grid-column: 3/7;
  grid-row: 5;
}

.hp-cm-referral-cta {
  grid-column: 1/3;
  grid-row: 6;
}

.hp-cm-updates-cta {
  grid-column: 3/5;
  grid-row: 6;
}

.hp-cm-creator {
  grid-column: 5/7;
  grid-row: 6;
}

.hp-cm-referral-cta .hp-cm-cta-icon {
  background: linear-gradient(135deg, var(--green-500-20), var(--green-500-05));
  color: var(--color-green-500);
}

.hp-cm-updates-cta .hp-cm-cta-icon {
  background: linear-gradient(135deg, var(--amber-500-20), var(--amber-500-05));
  color: var(--color-amber-500);
}

.hp-cm-voting .hp-cm-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hp-cm-voting-powered {
  margin-left: auto;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--white-30);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.hp-cm-voting-list {
  padding: 0 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hp-cm-poll {
  background: var(--white-02);
  border: none;
  border-radius: 6px;
  padding: 10px 12px;
}

.hp-cm-poll-question {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white-90);
  margin-bottom: 5px;
  line-height: 1.3;
}

.hp-cm-poll-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.hp-cm-poll-voters,
.hp-cm-poll-skel,
.hp-cm-poll-timer {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--white-30);
}
.hp-cm-poll-voters i,
.hp-cm-poll-skel i,
.hp-cm-poll-timer i {
  margin-right: 3px;
  font-size: 0.58rem;
}

.hp-cm-poll-skel i {
  color: var(--amber-500-50);
}

.hp-cm-poll-timer i {
  color: var(--blue-500-50);
}

.hp-cm-poll--loading {
  text-align: center;
  padding: 30px 10px;
  color: var(--white-25);
  font-size: 0.75rem;
}

.hp-cm-mkt-bar {
  display: flex;
  height: 20px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
  gap: 2px;
}

.hp-cm-mkt-bar-yes,
.hp-cm-mkt-bar-no {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  transition: width 0.4s ease;
}
.hp-cm-mkt-bar-yes span,
.hp-cm-mkt-bar-no span {
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--white-85);
  text-shadow: 0 1px 2px var(--black-50);
}

.hp-cm-mkt-bar-yes {
  background: var(--green-600-25);
  border-radius: 3px 0 0 3px;
}

.hp-cm-mkt-bar-no {
  background: var(--red-600-25);
  border-radius: 0 3px 3px 0;
}

.hp-cm-mkt-position-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.hp-cm-mkt-position-label {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--white-35);
}
.hp-cm-mkt-position-label i {
  margin-right: 4px;
  font-size: 0.55rem;
}

.hp-cm-mkt-holding {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border-radius: 5px;
  font-size: 0.6rem;
  font-weight: 700;
}
.hp-cm-mkt-holding--yes {
  background: var(--green-600-12);
  color: var(--color-green-400);
}
.hp-cm-mkt-holding--no {
  background: var(--red-600-12);
  color: var(--color-red-400);
}

.hp-cm-mkt-sell {
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--white-10);
  background: var(--white-04);
  color: var(--white-50);
  font-size: 0.55rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hp-cm-mkt-sell:hover {
  background: var(--white-08);
  color: var(--white-80);
  border-color: var(--white-20);
}
.hp-cm-mkt-sell:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.hp-cm-mkt-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hp-cm-mkt-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--white-03);
  border: 1px solid var(--white-06);
  border-radius: 5px;
  padding: 0 8px;
}

.hp-cm-mkt-amount {
  flex: 1;
  background: transparent;
  border: none;
  padding: 6px 0;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--white-80);
  outline: none;
  min-width: 0;
  -moz-appearance: textfield;
}
.hp-cm-mkt-amount::-webkit-inner-spin-button, .hp-cm-mkt-amount::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hp-cm-mkt-amount::placeholder {
  color: var(--white-25);
}
.hp-cm-mkt-amount--error {
  animation: mktShake 0.3s ease;
}

@keyframes mktShake {
  0%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.hp-cm-mkt-btns {
  display: flex;
  gap: 6px;
}

.hp-cm-mkt-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 0;
  border-radius: 5px;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--color-white);
  box-shadow: 0px 2px 1px var(--black-30);
  transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.hp-cm-mkt-btn--yes {
  background: var(--color-green-700);
  border: 1px solid var(--color-green-800);
  border-bottom: 2px solid var(--color-green-800);
}
.hp-cm-mkt-btn--yes:hover {
  background-color: var(--color-green-bright);
}
.hp-cm-mkt-btn--yes:focus-visible, .hp-cm-mkt-btn--yes:active {
  outline: none;
  box-shadow: 0px 1px 0px var(--black-20) inset;
  border-color: transparent;
  background: var(--color-green-900);
  transform: translateY(1px) scale(0.99);
}
.hp-cm-mkt-btn--no {
  background: var(--color-red-700);
  border: 1px solid var(--color-red-dark);
  border-bottom: 2px solid var(--color-red-dark);
}
.hp-cm-mkt-btn--no:hover {
  background-color: var(--color-red-800);
}
.hp-cm-mkt-btn--no:focus-visible, .hp-cm-mkt-btn--no:active {
  outline: none;
  box-shadow: 0px 1px 0px var(--black-20) inset;
  border-color: transparent;
  background: var(--color-red-dark);
  transform: translateY(1px) scale(0.99);
}
.hp-cm-mkt-btn i {
  font-size: 0.65rem;
}
.hp-cm-mkt-btn:disabled {
  transform: translateY(2px) scale(0.99);
  border-bottom-width: 1px;
  box-shadow: 0 3px 8px var(--black-60) inset, 0 1px 3px var(--black-40) inset;
  color: var(--white-40);
  cursor: not-allowed;
  pointer-events: none;
}

.hp-cm-poll-timer--ended {
  color: var(--white-50);
}
.hp-cm-poll-timer--ended i {
  color: var(--white-50);
}

.hp-cm-market--awaiting .hp-cm-mkt-bar {
  opacity: 0.85;
}
.hp-cm-market--awaiting .hp-cm-mkt-holding {
  opacity: 0.9;
  background: var(--white-03);
}

.hp-cm-mkt-awaiting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 2px;
  background: var(--white-03);
  border: 1px dashed var(--white-15);
  border-radius: 6px;
  color: var(--white-70);
}
.hp-cm-mkt-awaiting i {
  font-size: 0.95rem;
  color: var(--blue-500-50, #6aa6ff);
  animation: mktHourglassSpin 2.4s ease-in-out infinite;
}

.hp-cm-mkt-awaiting-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.hp-cm-mkt-awaiting-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white-85);
}

.hp-cm-mkt-awaiting-sub {
  font-size: 0.65rem;
  color: var(--white-50);
  letter-spacing: 0.2px;
}

@keyframes mktHourglassSpin {
  0%, 40% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  90%, 100% {
    transform: rotate(180deg);
  }
}
@media (max-width: 1056px) {
  .hp-community-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .hp-community-heading {
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }
  .hp-cm-mints,
  .hp-cm-leaderboard,
  .hp-cm-stats-card,
  .hp-cm-news,
  .hp-cm-voting,
  .hp-cm-referral-cta,
  .hp-cm-updates-cta,
  .hp-cm-creator {
    grid-column: 1;
    grid-row: auto;
  }
  .hp-cm-mints {
    order: 0;
  }
  .hp-cm-news {
    order: 2;
  }
  .hp-cm-stats-card {
    order: 3;
  }
  .hp-cm-voting {
    order: 4;
  }
  .hp-cm-leaderboard {
    order: 5;
  }
  .hp-cm-referral-cta {
    order: 6;
  }
  .hp-cm-updates-cta {
    order: 7;
  }
  .hp-cm-creator {
    order: 8;
  }
  .hp-cm-lb-tabs {
    display: none;
  }
  .hp-cm-lb-dual {
    display: flex;
    gap: 0;
  }
  .hp-cm-lb-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
  }
  .hp-cm-lb-col--skellies {
    display: flex;
    border-left: 1px solid var(--white-06);
  }
  .hp-cm-lb-col-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 10px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--white-45);
    border-bottom: 1px solid var(--white-06);
  }
  .hp-cm-lb-col-header i {
    font-size: 0.55rem;
  }
  .hp-cm-lb-you {
    display: none !important;
  }
  .hp-cm-lb-you-dual {
    display: flex !important;
    gap: 0;
    margin: 2px 10px 6px;
  }
  .hp-cm-lb-you-half {
    border-radius: 0;
  }
  .hp-cm-lb-you-half:first-child {
    border-radius: 8px 0 0 8px;
    border-right: none;
  }
  .hp-cm-lb-you-half:last-child {
    border-radius: 0 8px 8px 0;
  }
  .hp-cm-news {
    overflow: hidden;
    padding: 6px;
  }
  .hp-cm-news-list {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: visible;
    padding: 0;
    gap: 0;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
  }
  .hp-cm-news-item {
    flex: 0 0 100%;
    flex-shrink: 0;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    min-height: 80px;
    border-radius: 10px;
    background: var(--white-02);
    overflow: hidden;
    box-sizing: border-box;
  }
  .hp-cm-news-item.hp-cm-news-item--has-bg {
    min-height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .hp-cm-news-item.hp-cm-news-item--win {
    min-height: auto;
  }
  .hp-cm-win-game-img {
    width: 58px;
    height: 58px;
  }
  .hp-cm-win-amount {
    font-size: 1rem;
  }
  .hp-cm-win-skel-icon {
    width: 15px;
    height: 15px;
  }
  .hp-cm-news-rain {
    opacity: 0.12;
  }
  .hp-cm-news-dots {
    display: flex;
  }
  .hp-cm-mint-card {
    width: 65px;
  }
  .hp-billboard-track {
    gap: 24px;
  }
  .hp-cm-poll-meta {
    gap: 6px;
  }
}
@media (max-width: 832px) {
  .hp-cm-lb-tabs {
    display: flex;
  }
  .hp-cm-lb-dual {
    display: contents;
  }
  .hp-cm-lb-col {
    display: contents;
  }
  .hp-cm-lb-col--skellies {
    display: none;
    border-left: none;
  }
  .hp-cm-lb-col-header {
    display: none;
  }
  .hp-cm-lb-you {
    display: flex !important;
  }
  .hp-cm-lb-you-dual {
    display: none !important;
  }
}
/* ───────── Limbo Game ───────── */
.limbo-board-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 16px 20px 24px;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.limbo-history {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px;
  scrollbar-width: none;
  min-height: 30px;
  scroll-behavior: smooth;
}

.limbo-history::-webkit-scrollbar {
  display: none;
}

.limbo-history-pill {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--white-05);
  color: var(--text-grey);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid var(--white-05);
  transition: opacity 0.2s ease, transform 0.2s ease;
  opacity: 0.85;
  white-space: nowrap;
}

.limbo-history-pill.is-win {
  background: var(--success-20);
  color: var(--color-success);
  border-color: var(--success-60);
  opacity: 1;
}

.limbo-history-pill.is-fresh {
  animation: limboPillIn 0.35s ease;
}

@keyframes limboPillIn {
  from {
    transform: translateY(-4px) scale(0.85);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}
.limbo-stage {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  position: relative;
  background: radial-gradient(circle at center, var(--white-02), transparent 70%);
  transition: box-shadow 0.25s ease;
  min-height: 220px;
}

.limbo-stage.is-win {
  box-shadow: 0 0 18px var(--success-60), inset 0 0 24px var(--success-20);
}

.limbo-stage.is-loss {
  box-shadow: 0 0 18px var(--error-alt-60), inset 0 0 24px var(--error-25);
}

.limbo-multiplier {
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px var(--black-50);
  transition: color 0.2s ease, transform 0.15s ease;
  user-select: none;
}

.limbo-multiplier.is-win {
  color: var(--color-success);
  text-shadow: 0 0 18px var(--success-60);
}

.limbo-multiplier.is-loss {
  color: var(--color-error);
  text-shadow: 0 0 14px var(--error-alt-60);
}

.limbo-multiplier.is-pulsing {
  animation: limboPulse 0.45s ease;
}

@keyframes limboPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}
/* Win Chance read-only field next to the Target input */
.limbo-readout {
  background: var(--bg-dark);
  border: 2px solid var(--bg-modal-alt);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  box-shadow: 0px 2px 1px var(--black-30), inset 0 0 10px var(--black-30);
  cursor: not-allowed;
  user-select: none;
}

.limbo-readout-suffix {
  color: var(--text-grey);
  font-weight: 600;
  font-size: 13px;
}

@media (max-width: 576px) {
  .limbo-board-wrap {
    padding: 12px 14px 18px;
    gap: 12px;
  }
  .limbo-stage {
    min-height: 180px;
  }
  .limbo-multiplier {
    font-size: clamp(48px, 14vw, 80px);
  }
}
/* ==========================================================================
   Creator Promo Modal (rendered in the SHELL document, not the iframe)
   Mirrors the iframe's .creator-modal-* rules so the shell can host the
   "New Promotion" form centered in the visible viewport, like userModal.
   ========================================================================== */
.creator-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 160ms ease;
}
.creator-modal-backdrop.is-open {
  opacity: 1;
}

.creator-modal {
  background: #0a1620;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(8px);
  transition: transform 180ms ease;
}
.creator-modal-backdrop.is-open .creator-modal {
  transform: translateY(0);
}

.creator-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.creator-modal-header h5 {
  margin: 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.creator-modal-close {
  background: transparent;
  border: none;
  color: rgba(228, 236, 255, 0.6);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.creator-modal-close:hover {
  color: #fff;
}

.creator-modal-body {
  padding: 20px;
  overflow-y: auto;
}

.creator-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

/* Form fields used inside the modal (kept namespaced under the modal so
   they do not leak into other shell UI). */
.creator-modal .creator-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 480px) {
  .creator-modal .creator-form-row {
    grid-template-columns: 1fr;
  }
}
.creator-modal .creator-form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.creator-modal .creator-form-field label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(228, 236, 255, 0.55);
}
.creator-modal .creator-form-field .required {
  color: #ff4757;
}
.creator-modal .creator-form-field .form-control {
  background: #152a3e !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #e4ecff !important;
  font-size: 13px;
  border-radius: 10px !important;
  padding: 10px 14px;
}
.creator-modal .creator-form-field .form-control:focus {
  border-color: #0075ff !important;
  box-shadow: 0 0 0 2px rgba(0, 117, 255, 0.15) !important;
}
.creator-modal .creator-form-field .form-control::placeholder {
  color: rgba(228, 236, 255, 0.25);
}
.creator-modal .creator-form-field textarea.form-control {
  resize: vertical;
  min-height: 80px;
}
.creator-modal .creator-checks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.creator-modal .creator-checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(228, 236, 255, 0.7);
  margin: 0;
  padding: 8px 10px;
  background: #152a3e;
  border-radius: 8px;
  cursor: pointer;
}
.creator-modal .creator-checks input[type=checkbox] {
  accent-color: #0075ff;
}