/* =====================================================================
   TCW ESPORTS — CLEAN MODERN DESIGN SYSTEM
   60% neutral surfaces · 30% slate structure · 10% brand accent
   Fonts: Plus Jakarta Sans (display) + Inter (body) — loaded in HTML
   ===================================================================== */

/* === DESIGN TOKENS — LOCKED TO LOGO PALETTE ===
   Extracted from logo.png: black #000000 · blood red #D71D1F/#9A1C1E/#5C1416
   · metallic silver #EFECEC. 60% black surfaces / 30% silver structure / 10% red. */
:root {
  /* 60% — black base & surfaces (logo black) */
  --bg: #08080A;
  --surface: #101013;
  --surface-2: #17171B;
  /* 30% — metallic silver structure & text (logo chrome) */
  --ink: #EFECEC;
  --ink-2: #D6D2D3;
  --muted: #A29B9C;
  --faint: #6F6A6B;
  /* 10% — blood red accent (logo red, primary CTAs only) */
  --accent: #D71D1F;
  --accent-hover: #B01719;
  --accent-bright: #F03A3C;
  --accent-soft: rgba(215, 29, 31, 0.12);
  --accent-border: rgba(215, 29, 31, 0.38);

  /* Legacy aliases — admin panel & auth styles share these names */
  --void: #08080A;
  --void-light: #101013;
  --void-dark: #17171B;
  --crimson: #D71D1F;
  --crimson-dark: #9A1C1E;
  --crimson-bright: #F03A3C;
  --crimson-backlight: rgba(215, 29, 31, 0.10);
  --crimson-glow: rgba(215, 29, 31, 0.35);
  --crimson-dim: rgba(215, 29, 31, 0.08);
  --silver: #EFECEC;
  --silver-dark: #B5B0B1;
  --silver-darker: #7A7475;
  --silver-glow: rgba(239, 236, 236, 0.14);
  --chrome-light: #F5F3F3;
  --chrome-mid: #C9C4C5;
  --chrome-dark: #8E8889;
  --metal-highlight: rgba(239, 236, 236, 0.06);
  --metal-border: rgba(239, 236, 236, 0.12);
  --slate: #EFECEC;
  --slate-light: #D6D2D3;
  --slate-dark: #17171B;
  --text: #EFECEC;
  --text-muted: #A29B9C;
  --text-dim: #6F6A6B;
  --border: rgba(239, 236, 236, 0.14);
  --border-light: rgba(239, 236, 236, 0.08);
  --border-glow: rgba(215, 29, 31, 0.38);
  --glass: rgba(16, 16, 19, 0.82);
  --glass-border: rgba(239, 236, 236, 0.08);
  /* Layout + typography — logo DNA: Anton display / Rajdhani HUD / Inter body */
  --nav-h: 72px;
  --radius: 8px;
  --radius-lg: 12px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-hud: 'Rajdhani', 'Segoe UI', sans-serif;
  /* Motion — 150-300ms micro-interactions */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Elevation — deep black shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.50), 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 28px 64px rgba(0, 0, 0, 0.55), 0 10px 24px rgba(0, 0, 0, 0.40);
  --ring: 0 0 0 3px rgba(215, 29, 31, 0.30);
}

/* === RESET & BASE === */
*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
html {scroll-behavior: smooth; scroll-padding-top: var(--nav-h); overflow-x: hidden;}
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 460px at 50% -140px, rgba(215, 29, 31, 0.10), transparent 70%),
    var(--bg);
  color: var(--ink);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  min-height: 100vh;
}
a {color: inherit; text-decoration: none; cursor: pointer;}
ul {list-style: none;}
img {max-width: 100%; display: block;}
button {font-family: inherit; cursor: pointer; border: none; background: none; color: inherit;}
input, select, textarea {font-family: inherit; font-size: inherit; color: inherit;}
::selection {background: rgba(215, 29, 31, 0.16);}

/* Accessible focus rings */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: none;
  border-radius: 10px;
  box-shadow: var(--ring);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {outline: none;}

/* === CANVAS BACKGROUND - STRICTLY BACKGROUND === */
#particleCanvas {position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none;}

/* === UTILITIES === */
.container {width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1;}
.accent {color: var(--accent);}
.gold {
  color: #ffd700;
  background: linear-gradient(135deg, #FFE55C 0%, #FFD700 45%, #C9A100 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.chrome-text {
  color: var(--ink);
  background: linear-gradient(180deg, #F5F3F3 0%, #B5B0B1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.red-metal-text {
  color: var(--accent);
  background: linear-gradient(135deg, #F03A3C 0%, #9A1C1E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* The [hidden] attribute must always win over display rules */
[hidden] { display: none !important; }

/* === NAV === */
.nav {position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: rgba(8, 8, 10, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.nav.scrolled {background: rgba(8, 8, 10, 0.97); border-bottom-color: rgba(255, 255, 255, 0.08); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);}
.nav > .container {display: flex; align-items: center; justify-content: space-between; gap: 14px; height: var(--nav-h);}
.nav-logo {display: flex; align-items: center; gap: 12px; flex-shrink: 0;}
.nav-logo-img {height: 48px; width: auto; object-fit: contain; border-radius: 0; box-shadow: none; border: none;}
.nav-logo-text {display: flex; flex-direction: column; line-height: 1.15; font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: 0.04em; color: #fff;}
/* Solid brand colors inside the backdrop-filtered nav — gradient-clipped text
   garbles when composited against backdrop-filter in some browsers */
.nav-logo-text .accent {color: #FF2A44;}
.nav-logo-text .gold {background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: #FFFFFF;}
.nav-links {display: flex; align-items: center; gap: 0; margin: 0 auto;}
.nav-link {position: relative; display: inline-flex; flex-direction: column; padding: 10px 9px; font-size: 0.85rem; font-weight: 600; color: rgba(226, 232, 240, 0.72); border-radius: 10px; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); cursor: pointer; white-space: nowrap;}
.nav-link:hover {color: #fff; background: rgba(255, 255, 255, 0.08);}
.nav-link.active {color: #F87171;}
.nav-link-underline {position: absolute; left: 12px; right: 12px; bottom: 5px; height: 2px; border-radius: 2px; background: #F87171; transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out);}
.nav-link:hover .nav-link-underline {transform: scaleX(0.55);}
.nav-link.active .nav-link-underline {transform: scaleX(1);}
.nav-actions {display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
.nav-hamburger {display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; border-radius: 10px; transition: background-color var(--dur-fast) var(--ease-out); cursor: pointer;}
.nav-hamburger:hover {background: rgba(255, 255, 255, 0.08);}
.nav-hamburger span {display: block; width: 22px; height: 2px; border-radius: 2px; background: #D6D2D3; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);}
.nav-hamburger.active span:nth-child(1) {transform: translateY(7px) rotate(45deg);}
.nav-hamburger.active span:nth-child(2) {opacity: 0;}
.nav-hamburger.active span:nth-child(3) {transform: translateY(-7px) rotate(-45deg);}

/* === MOBILE DRAWER === */
.mobile-drawer {position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: rgba(8, 8, 10, 0.98); backdrop-filter: blur(18px); z-index: 999; display: flex; flex-direction: column; padding: 32px 24px; gap: 4px; transform: translateX(-100%); opacity: 0; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out); overflow-y: auto;}
.mobile-drawer.open {transform: translateX(0); opacity: 1;}
.mobile-link {padding: 16px 4px; font-size: 1.05rem; font-weight: 600; color: #D6D2D3; border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: color var(--dur-fast) var(--ease-out); cursor: pointer;}
.mobile-link:hover, .mobile-link.active {color: #F87171;}
.mobile-link-discord {color: #4E5BEE !important;}
.mobile-link-discord:hover {color: #5865F2 !important;}
.mobile-link-whatsapp {color: #16A34A !important;}
.mobile-link-whatsapp:hover {color: #22C55E !important;}
.mobile-cta {margin-top: 20px; width: 100%; text-align: center;}
/* Link list inside the mobile drawer — the action buttons (wallet chip,
   account, login) live after it and are never re-rendered */
.mobile-drawer-links {display: flex; flex-direction: column; gap: 0; width: 100%;}

/* === SCENE SYSTEM === */
.scene {display: none; position: relative; padding: calc(var(--nav-h) + 64px) 0 96px; width: 100%;}
.scene.active {display: block;}
.scene-header {text-align: center; margin-bottom: 64px;}
.scene-label {display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-border); padding: 6px 14px; border-radius: 999px; margin-bottom: 16px; font-family: var(--font-display);}
.scene-title {font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; line-height: 1.12; font-family: var(--font-display); color: var(--ink);}
.title-word {display: inline-block; margin-right: 0.28em;}
/* Split-color words (STAND+INGS): keep the two-tone accent but no gap —
   the margin above must not break the word in half */
.title-word.split-word {margin-right: 0;}
.title-word.split-word + .title-word.split-word {margin-left: 0;}
.scene-desc {font-size: 1.0625rem; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.7;}

/* Shared section headings */
.why-title, .section-title-alt, .format-title, .grid-title, .table-title {font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--ink); letter-spacing: -0.01em; margin-bottom: 40px; text-align: center;}

/* Shared card recipe — soft borders, ambient shadows, rounded corners */
.why-card, .step-card, .testimonial-card, .format-card, .faq-card, .stat-card, .tier-card, .slot-card, .rule-card, .creator-card, .tournament-card, .mgmt-card, .form-panel, .payment-panel, .feature-banner, .team-cta-banner, .points-table-container {background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);}
.why-card:hover, .step-card:hover, .testimonial-card:hover, .format-card:hover, .faq-card:hover, .stat-card:hover, .tier-card:hover, .slot-card:hover, .rule-card:hover, .creator-card:hover, .tournament-card:hover, .mgmt-card:hover, .feature-banner:hover, .team-cta-banner:hover, .points-table-container:hover {transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--accent-border);}
.why-card h4, .step-card h4, .format-card h4, .faq-question, .banner-title, .cta-title, .mgmt-name, .creator-name, .tournament-card h4 {font-family: var(--font-display);}
.why-card p, .step-card p, .format-card p, .faq-answer {font-size: 0.95rem; color: var(--muted); line-height: 1.7;}

/* === HERO === */
#scene-arena {padding-top: calc(var(--nav-h) + 24px); padding-bottom: 24px; position: relative; background:
  radial-gradient(1000px 520px at 50% -120px, rgba(215, 29, 31, 0.32), transparent 62%),
  radial-gradient(800px 420px at 88% 112%, rgba(215, 29, 31, 0.10), transparent 60%),
  linear-gradient(180deg, rgba(6, 6, 7, 0.55) 0%, rgba(10, 10, 12, 0.28) 55%, rgba(14, 14, 17, 0) 100%);}
.hero-container {text-align: center; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; padding: 32px 0 24px;}
.hero-badge-wrap {display: flex; justify-content: center; width: 100%; margin-bottom: 28px; position: relative; z-index: 2; animation: float 3.5s ease-in-out infinite;}
/* arena hero badge removed — title leads; keep wrap style for the tournaments scene badge */
#scene-arena .hero-badge-wrap {display: none;}
.hero-badge {display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-sm);}
@keyframes float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-6px);}}
.pulse-dot {display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); animation: live-pulse 2s ease-in-out infinite;}
@keyframes live-pulse {0%, 100% {opacity: 1; transform: scale(1);} 50% {opacity: 0.6; transform: scale(1.25);}}
.badge-text {font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);}
.hero-title {font-size: clamp(3.5rem, 11vw, 8rem); font-weight: 800; line-height: 1.05; letter-spacing: 0.01em; margin-bottom: 20px; font-family: var(--font-display); position: relative; z-index: 2;}
.title-line {display: block;}
.hero-subtitle {font-size: 1.125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 14px; color: var(--muted); font-family: var(--font-display); position: relative; z-index: 2;}
.hero-desc {font-size: 1.0625rem; color: var(--muted); line-height: 1.75; max-width: 640px; margin: 0 auto 40px; position: relative; z-index: 2;}
.hero-desc-highlight {color: var(--accent); font-weight: 600;}
.hero-ctas {display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 64px; position: relative; z-index: 2;}

/* === STATS RIBBON === */
.stats-ribbon {display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 960px; margin: 0 auto 24px; position: relative; z-index: 2;}
.stat-card {padding: 24px 20px; text-align: center;}
.stat-icon {font-size: 1.75rem; margin-bottom: 10px;}
.stat-value {font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: var(--accent); display: block; margin-bottom: 2px; line-height: 1.15;}
.stat-label {font-size: 0.8125rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;}

/* === SCROLL PROMPT === */
.scroll-prompt {position: static; transform: none; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 4px auto 0; animation: fadeInOut 2.5s ease-in-out infinite; transition: opacity var(--dur-base) var(--ease); z-index: 10;}
.scroll-prompt.hidden {opacity: 0; pointer-events: none;}
@keyframes fadeInOut {0%, 100% {opacity: 0.45;} 50% {opacity: 0.9;}}
.scroll-text {font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--faint);}
.scroll-arrow {font-size: 1.25rem; color: var(--accent); animation: bounce 1.6s ease-in-out infinite;}
@keyframes bounce {0%, 100% {transform: translateY(0);} 50% {transform: translateY(6px);}}

/* === WHY SECTION === */
.why-section {margin-top: 24px; margin-bottom: 80px; text-align: center;}
.why-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.why-card {padding: 32px 24px; text-align: center;}
.why-icon {font-size: 2.25rem; margin-bottom: 14px;}
.why-card h4 {font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--ink);}

/* === HOW IT WORKS === */
.how-section {margin-top: 80px; margin-bottom: 80px; text-align: center;}
.steps-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.step-card {padding: 32px 24px; text-align: center;}
.step-number {font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--accent); margin-bottom: 12px; line-height: 1;}
.step-card h4 {font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--ink);}

/* === TESTIMONIALS === */
.testimonials-section {margin-top: 80px; margin-bottom: 80px;}
.testimonials-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.testimonial-card {padding: 28px; text-align: left;}
.testimonial-stars {color: #F59E0B; font-size: 1rem; margin-bottom: 14px; letter-spacing: 3px;}
.testimonial-text {font-size: 0.975rem; color: var(--ink-2); line-height: 1.7; margin-bottom: 20px;}
.testimonial-author {display: flex; align-items: center; gap: 12px;}
.author-avatar {width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; color: #fff; flex-shrink: 0;}
.author-name {font-size: 0.9rem; font-weight: 700; color: var(--ink);}
.author-team {font-size: 0.8125rem; color: var(--faint); font-weight: 500;}

/* === WINNERS TABLE === */
.winners-section {margin-top: 80px; margin-bottom: 64px;}
.winners-table-wrap {overflow-x: auto; margin-top: 8px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: var(--surface);}
.winners-table {width: 100%; border-collapse: collapse;}
.winners-table th {padding: 14px 20px; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); background: var(--surface-2); border-bottom: 1px solid var(--border-light);}
.winners-table td {padding: 13px 20px; font-size: 0.92rem; color: var(--ink-2); border-bottom: 1px solid var(--border-light); font-weight: 500;}
.winners-table tbody tr:last-child td {border-bottom: none;}
.winners-table tbody tr {transition: background var(--dur-fast) var(--ease);}
.winners-table tbody tr:hover {background: var(--surface-2);}

/* === BUTTONS === */
.btn {display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 12px; font-family: var(--font); font-size: 0.9375rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-align: center; transition: all var(--dur-base) var(--ease-out);}
.btn:hover {transform: translateY(-1px);}
.btn:active {transform: translateY(0);}
.btn:disabled {opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none;}
.btn:focus-visible {outline: none; box-shadow: var(--ring);}
.btn-sm {padding: 9px 16px; font-size: 0.875rem; border-radius: 10px;}
.btn-large {padding: 15px 28px; font-size: 1rem; border-radius: 14px;}
.btn-block {width: 100%; justify-content: center;}
.btn-primary {background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(215, 29, 31, 0.35);}
.btn-primary:hover {background: var(--accent-hover); box-shadow: 0 8px 20px rgba(215, 29, 31, 0.28);}
.btn-outline {background: var(--surface); border-color: var(--border); color: var(--ink); box-shadow: var(--shadow-sm);}
.btn-outline:hover {border-color: var(--accent); color: var(--accent); background: var(--accent-soft);}
.btn-gold {background: linear-gradient(135deg, #FFE55C 0%, #FFD700 45%, #C9A100 100%); color: #1A1300; box-shadow: 0 2px 10px rgba(255, 215, 0, 0.28);}
.btn-gold:hover {background: linear-gradient(135deg, #FFF0A3 0%, #FFDE33 45%, #DDBB00 100%); box-shadow: 0 8px 22px rgba(255, 215, 0, 0.35);}
.btn-discord {background: rgba(88, 101, 242, 0.08); border-color: rgba(88, 101, 242, 0.45); color: #4E5BEE;}
.btn-discord:hover {background: #5865F2; border-color: #5865F2; color: #fff; box-shadow: 0 8px 20px rgba(88, 101, 242, 0.3);}
.btn-whatsapp {background: rgba(37, 211, 102, 0.08); border-color: rgba(34, 197, 94, 0.5); color: #16A34A;}
.btn-whatsapp:hover {background: #25D366; border-color: #25D366; color: #fff; box-shadow: 0 8px 20px rgba(37, 211, 102, 0.28);}
.btn-danger-outline {background: transparent; border-color: rgba(215, 29, 31, 0.4); color: var(--accent-hover);}
.btn-danger-outline:hover {background: var(--accent-soft);}
/* Warrior-red primary CTA (auth/wallet modals) — matches the BOOK SLOT / LOGIN brand CTA */
.btn-warrior {
  background: linear-gradient(135deg, #E50914 0%, #D71D1F 55%, #B01719 100%);
  border: 1px solid rgba(215, 29, 31, 0.65);
  color: #ffffff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(215, 29, 31, 0.35), 0 4px 14px rgba(215, 29, 31, 0.22);
}
.btn-warrior:hover:not(:disabled) {
  background: linear-gradient(135deg, #F03A3C 0%, #E50914 45%, #B01719 100%);
  box-shadow: 0 8px 20px rgba(215, 29, 31, 0.30);
}
.btn-warrior:disabled {
  background: #2A2A2E;
  border-color: rgba(239, 236, 236, 0.14);
  color: #8B8687;
  opacity: 0.65;
  box-shadow: none;
}
/* Warrior-red outline (secondary wallet modal actions) */
.btn-warrior-outline {
  background: rgba(215, 29, 31, 0.08);
  border: 1px solid rgba(215, 29, 31, 0.55);
  color: var(--accent-bright);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.btn-warrior-outline:hover:not(:disabled) {
  background: rgba(215, 29, 31, 0.16);
  border-color: var(--accent-hover);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(215, 29, 31, 0.22);
}
.btn-dm {min-width: 220px; justify-content: center;}

/* Brand icon images inside buttons */
.btn-icon-img {width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 4px; padding: 1.5px;}
.btn-large .btn-icon-img {width: 22px; height: 22px;}
.drawer-icon-img {width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; margin-right: 8px; background: #fff; border-radius: 4px; padding: 1.5px;}
.social-icon-img {width: 24px; height: 24px; object-fit: contain; transition: transform var(--dur-base) var(--ease-out);}
.social-link:hover .social-icon-img {transform: scale(1.08);}

/* === WHATSAPP DM ZONE === */
.dm-whatsapp-zone {text-align: center; gap: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 26px 18px; border: 2px dashed rgba(34, 197, 94, 0.45); background: rgba(37, 211, 102, 0.05); border-radius: var(--radius-lg); cursor: default;}
.dm-whatsapp-zone .upload-text {font-weight: 600; color: var(--ink-2);}
.dm-whatsapp-number {font-size: 0.95rem; font-weight: 700; color: #16A34A; letter-spacing: 0.02em;}

/* === TIER SWITCH (₹60 / ₹40) === */
.tier-switch {display: flex; justify-content: center; gap: 12px; margin: 0 0 48px; flex-wrap: wrap;}
.tier-switch-btn {padding: 12px 28px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-family: var(--font-display); font-size: 0.9rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--dur-base) var(--ease-out);}
.tier-switch-btn:hover {border-color: var(--accent-border); color: var(--accent); transform: translateY(-1px);}
.tier-switch-btn.active {background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 6px 16px rgba(215, 29, 31, 0.28);}
.tier-switch-btn:focus-visible {outline: none; box-shadow: var(--ring);}

/* Read-only payment amount */
.form-input.payment-amount {cursor: not-allowed; font-weight: 700; background: var(--accent-soft); border-style: dashed; border-color: var(--accent-border); color: var(--accent-hover);}

/* === SCRIMS SLOTS === */
.slots-schedule {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 72px;}
.slot-card {padding: 0; overflow: hidden;}
.slot-header {display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; background: var(--surface-2); border-bottom: 1px solid var(--border-light);}
.slot-number {font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--ink);}
.slot-time {background: var(--accent); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 700;}
.slot-body {padding: 24px; display: flex; flex-direction: column; gap: 16px;}
.slot-map {display: flex; align-items: center; gap: 12px;}
.map-icon {font-size: 1.75rem;}
.slot-map > div {display: flex; flex-direction: column; gap: 2px;}
.map-name {font-weight: 700; font-size: 1.05rem; color: var(--ink);}
.map-mode {font-size: 0.85rem; color: var(--faint); font-weight: 500;}
.slot-progress {display: flex; flex-direction: column; gap: 8px;}
.progress-label {display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted); font-weight: 600;}
.progress-value {font-weight: 700; color: var(--accent);}
.progress-bar {height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; position: relative;}
.progress-fill {height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 999px; transition: width 0.6s var(--ease); position: relative; overflow: hidden;}
.progress-fill::after {content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: shimmer 2s infinite;}
@keyframes shimmer {0% {transform: translateX(-100%);} 100% {transform: translateX(100%);}}
.slot-info {display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--radius);}
.info-row {display: flex; justify-content: space-between; font-size: 0.9rem;}
.info-label {color: var(--muted); font-weight: 500;}
.info-value {font-weight: 700; color: var(--ink);}

/* === TEAM GRID (18 slots) === */
.team-grid-container {margin: 72px 0;}
.team-grid {display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px;}
.team-slot {aspect-ratio: 1; background: var(--surface); border: 1px solid var(--border-light); border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: all var(--dur-base) var(--ease-out); cursor: pointer; box-shadow: var(--shadow-sm);}
.team-slot:hover {border-color: var(--accent-border); transform: translateY(-3px); box-shadow: var(--shadow-md);}
.team-slot.booked {background: var(--accent-soft); border-color: var(--accent-border);}
.team-slot.available {border-style: dashed;}
.team-slot-number {font-family: var(--font-display); font-size: 1.35rem; font-weight: 800; color: var(--ink);}
.team-slot.booked .team-slot-number {color: var(--accent-hover);}
.team-slot-status {font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted);}
.team-slot.booked .team-slot-status {background: var(--accent); color: #fff;}

/* === MATCH FORMAT === */
.match-format-section {margin: 72px 0;}
.format-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.format-card {padding: 32px 28px; text-align: center;}
.format-icon {font-size: 2.25rem; margin-bottom: 14px;}
.format-card h4 {font-size: 1.1rem; font-weight: 700; margin-bottom: 8px; color: var(--ink);}

/* === FAQ === */
.faq-section {margin-top: 72px; margin-bottom: 72px;}
.faq-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;}
.faq-card {padding: 26px;}
.faq-question {font-size: 1rem; font-weight: 700; color: var(--ink); margin-bottom: 10px;}

/* === FEATURE BANNER + TAGS — dark structural card (30% slate) === */
.feature-banner {padding: 56px 48px; text-align: center; position: relative; overflow: hidden; margin-top: 80px; margin-bottom: 72px; background: linear-gradient(135deg, #101013 0%, #17171B 100%); border: 1px solid rgba(239, 236, 236, 0.08); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.50);}
.feature-banner::before {content: ''; position: absolute; inset: 0; background: radial-gradient(640px 220px at 50% 0%, rgba(215, 29, 31, 0.22), transparent 65%); pointer-events: none;}
.feature-banner:hover {border-color: rgba(240, 58, 60, 0.35); box-shadow: 0 28px 64px rgba(8, 8, 10, 0.38);}
.banner-icon {font-size: 2.5rem; margin-bottom: 14px; position: relative; z-index: 1;}
.banner-title {font-size: 1.4rem; font-weight: 800; margin-bottom: 10px; color: #fff; position: relative; z-index: 1;}
.banner-desc {color: #C9C4C5; max-width: 700px; margin: 0 auto 24px; line-height: 1.7; position: relative; z-index: 1; font-size: 1rem;}
.banner-tags {display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1;}
.tag {padding: 7px 14px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-light); transition: all var(--dur-base) var(--ease-out);}
.tag:hover {background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); transform: translateY(-1px);}
.feature-banner .tag {background: rgba(255, 255, 255, 0.07); color: #D6D2D3; border-color: rgba(255, 255, 255, 0.14);}
.feature-banner .tag:hover {background: rgba(215, 29, 31, 0.30); color: #fff; border-color: rgba(240, 58, 60, 0.55);}
.feature-banner .btn-outline {background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.24); color: #fff; box-shadow: none;}
.feature-banner .btn-outline:hover {background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.40); color: #fff;}

/* === BOOKING === */
.pricing-tiers {display: flex; gap: 16px; justify-content: center; margin-bottom: 48px; flex-wrap: wrap;}
.tier-card {flex: 1; min-width: 220px; max-width: 300px; padding: 28px; text-align: center; cursor: pointer;}
.tier-card.active {border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md);}
.tier-badge {font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--faint); margin-bottom: 10px; font-family: var(--font-display);}
.tier-badge.popular {color: var(--accent);}
.tier-price {font-family: var(--font-display); font-size: 2.25rem; font-weight: 800; color: var(--ink); margin-bottom: 4px; line-height: 1.15;}
.tier-card.active .tier-price {color: var(--accent);}
.tier-label {font-size: 0.9rem; color: var(--muted);}
.booking-layout {display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start;}
.form-panel, .payment-panel {padding: 32px;}
.panel-title {display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 800; margin-bottom: 24px; color: var(--ink); font-family: var(--font-display);}
.panel-icon {font-size: 1.35rem;}
.form-group {margin-bottom: 18px;}
.form-label {display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); margin-bottom: 8px;}
.form-input {width: 100%; padding: 12px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); font-size: 0.9375rem; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);}
.form-input:focus {outline: none; border-color: var(--accent); box-shadow: var(--ring);}
.form-input::placeholder {color: #9C9596;}
.form-input:disabled {opacity: 0.55; cursor: not-allowed;}
select.form-input {cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b'%3E%3Cpath d='M8 10L3 5h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px;}
.form-row {display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.payment-instruction {font-size: 0.95rem; color: var(--muted); margin-bottom: 24px; line-height: 1.7;}
.qr-section {text-align: center; margin-bottom: 24px;}
.upi-qr-img {display: block; width: 168px; height: 168px; object-fit: contain; background: #fff; padding: 6px; border: 1px solid var(--border-light); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin: 0 auto;}
.qr-download-btn {margin-top: 12px;}
.qr-label, .upi-label {font-size: 0.75rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; text-align: center;}
.qr-placeholder {width: 200px; height: 200px; margin: 0 auto; background: var(--surface); border: 2px dashed var(--border); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; overflow: hidden;}
#upiQrCode {display: flex; align-items: center; justify-content: center; background: #fff; padding: 8px;}
#upiQrCode img, #upiQrCode canvas {display: block; width: 150px !important; height: 150px !important;}
.qr-hint {font-size: 0.72rem; color: var(--faint); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 6px;}
.scan-line {position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: scan 2s linear infinite;}
@keyframes scan {0% {top: 0;} 100% {top: 100%;}}
.upi-section {margin-bottom: 24px;}
.upi-box {display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius);}
.upi-id {flex: 1; font-family: 'Courier New', monospace; font-size: 0.95rem; font-weight: 700; color: var(--accent-hover);}
.btn-copy {padding: 8px 14px; background: var(--ink); color: #fff; border-radius: 8px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; display: flex; align-items: center; gap: 6px; transition: all var(--dur-base) var(--ease-out); cursor: pointer;}
.btn-copy:hover {background: var(--ink-2); transform: translateY(-1px);}
.btn-copy:focus-visible {outline: none; box-shadow: var(--ring);}
.copy-icon {font-size: 0.9rem;}
.upload-zone {border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 36px; text-align: center; cursor: pointer; transition: all var(--dur-base) var(--ease-out); background: var(--surface-2);}
.upload-zone:hover {border-color: var(--accent-border); background: var(--accent-soft);}
.upload-icon {font-size: 2.25rem; margin-bottom: 10px;}
.upload-text {font-size: 0.9rem; color: var(--muted); font-weight: 500;}
.upload-preview {margin-top: 16px; max-width: 100%; border-radius: var(--radius); display: none;}
.upload-preview.show {display: block;}

/* === MANAGEMENT TEAM === */
.team-grid-management {display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 64px;}
.mgmt-card {padding: 36px 28px; text-align: center; position: relative; overflow: hidden;}
.mgmt-badge {position: absolute; top: 16px; right: 16px; padding: 5px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; z-index: 1;}
.mgmt-badge.founder, .mgmt-badge.coowner {background: var(--accent); color: #fff;}
.mgmt-badge.analyst, .mgmt-badge.tech, .mgmt-badge.community {background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--border-light);}
.mgmt-avatar {position: relative; width: 100px; height: 100px; margin: 0 auto 20px;}
.avatar-icon {width: 100%; height: 100%; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: 2.75rem; position: relative; z-index: 2; transition: transform var(--dur-slow) var(--ease-out);}
.mgmt-card:hover .avatar-icon {transform: scale(1.05);}
.avatar-glow {display: none;}
.mgmt-name {font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; color: var(--ink); position: relative; z-index: 1;}
.mgmt-handle {font-size: 0.9rem; font-weight: 600; color: var(--muted); margin-bottom: 10px; position: relative; z-index: 1;}
.mgmt-role {font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; position: relative; z-index: 1; color: var(--accent); font-family: var(--font-display);}
.mgmt-location {font-size: 0.85rem; color: var(--faint); margin-bottom: 12px; position: relative; z-index: 1;}
.mgmt-desc {font-size: 0.9rem; color: var(--muted); line-height: 1.7; position: relative; z-index: 1;}

/* === TEAM CTA BANNER === */
.team-cta-banner {padding: 56px 40px; text-align: center; position: relative; overflow: hidden;}
.cta-title {font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; color: var(--ink);}
.cta-desc {font-size: 1.05rem; color: var(--muted); max-width: 640px; margin: 0 auto 28px; line-height: 1.75; position: relative; z-index: 1;}
.cta-buttons {display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1;}

/* === RULES === */
.points-table-container {padding: 32px; margin-bottom: 56px; overflow: hidden;}
.table-wrapper {overflow-x: auto;}
.points-table {width: 100%; border-collapse: collapse;}
.points-table th, .points-table td {padding: 12px 14px; text-align: center; font-size: 0.875rem; border-bottom: 1px solid var(--border-light);}
.points-table thead {background: var(--surface-2);}
.points-table th {font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--faint); border-bottom: 1px solid var(--border);}
.points-table tbody tr {transition: background var(--dur-fast) var(--ease);}
.points-table tbody tr:hover {background: var(--surface-2);}
.points-table tbody tr:last-child td {border-bottom: none;}
.rank-gold {color: #B45309; font-weight: 800;}
.rank-accent {color: var(--accent); font-weight: 700;}
.finish-col {color: #B45309; font-weight: 700;}
.label-col {font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 0.75rem; text-align: left;}
.rules-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 60px;}
.rule-card {padding: 28px;}
.rule-icon {font-size: 2.25rem; margin-bottom: 14px;}
.rule-title {font-size: 1.1rem; font-weight: 700; margin-bottom: 14px; color: var(--ink); font-family: var(--font-display);}
.rule-list {display: flex; flex-direction: column; gap: 10px;}
.rule-list li {font-size: 0.92rem; color: var(--muted); padding-left: 20px; position: relative; line-height: 1.65;}
.rule-list li::before {content: ''; position: absolute; left: 2px; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);}

.tier-features {list-style: none; margin-top: 16px; display: flex; flex-direction: column; gap: 8px; text-align: left;}
.tier-features li {font-size: 0.875rem; color: var(--muted); line-height: 1.5; padding-left: 18px; position: relative;}
.tier-features li::before {content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700;}

/* === CREATORS === */
.official-creators-section, .featured-creators-section, .creator-benefits-section, .creator-tiers-section, .creator-join-section {margin: 64px 0;}
.creator-cards-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; justify-items: center;}
.creator-card {width: 100%; max-width: 360px; padding: 32px 24px; text-align: center;}
.creator-badge {display: block; width: 100%; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; font-family: var(--font-display);}
.creator-avatar-placeholder {width: 96px; height: 96px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-hover)); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.15rem; box-shadow: 0 8px 20px rgba(215, 29, 31, 0.22);}
.creator-avatar-glow {display: none;}
.creator-name {font-size: 1.25rem; font-weight: 800; color: var(--ink); margin-bottom: 4px;}
.creator-tag {font-size: 0.9rem; color: var(--muted); margin-bottom: 20px;}
.creator-socials {display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
.social-btn {display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font-size: 0.85rem; font-weight: 700; color: #fff; transition: all var(--dur-base) var(--ease-out); cursor: pointer;}
.social-btn:hover {transform: translateY(-2px);}
.social-btn.yt {background: #FF0000;}
.social-btn.yt:hover {background: #CC0000; box-shadow: 0 8px 18px rgba(255, 0, 0, 0.28);}
.social-btn.ig {background: linear-gradient(45deg, #833AB4 0%, #C13584 45%, #E1306C 70%, #F77737 90%, #FCAF45 100%);}
.social-btn.ig:hover {box-shadow: 0 8px 18px rgba(193, 53, 132, 0.32);}
.social-btn.kick {background: #53FC18; color: #101013;}
.social-btn.kick:hover {background: #43D414; box-shadow: 0 8px 18px rgba(83, 252, 24, 0.32);}
.social-btn:focus-visible {outline: none; box-shadow: var(--ring);}
.social-btn-icon {width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; background: #fff; border-radius: 4px; padding: 1.5px;}

/* === TOURNAMENTS SCENE === */
.tournament-announcement {text-align: center; padding: 80px 24px; min-height: 60vh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.tournament-announcement-title {font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.025em; text-transform: none; position: relative; z-index: 2; font-family: var(--font-display); margin-bottom: 20px;}
.tournament-announcement-desc {font-size: 1.0625rem; color: var(--muted); line-height: 1.75; max-width: 640px; position: relative; z-index: 2;}
.tournaments-upcoming {margin: 40px 0 72px;}
.tournaments-completed {margin: 40px 0 64px;}
.tournament-grid {display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px;}
.tournament-card {padding: 0; position: relative; cursor: pointer; overflow: hidden; max-width: 360px; width: 100%; justify-self: center; display: flex; flex-direction: column;}
.t-poster {position: relative; aspect-ratio: 4/5; overflow: hidden; background: #141419; flex-shrink: 0;}
.t-poster img {width: 100%; height: 100%; object-fit: cover; display: block;}
.t-poster .tournament-status-chip {position: absolute; top: 12px; left: 12px; margin: 0; box-shadow: 0 4px 14px rgba(0,0,0,0.5);}
.t-poster-fallback {display: flex; align-items: center; justify-content: center; background: radial-gradient(420px 300px at 50% 0%, rgba(215,29,31,0.28), transparent 65%), #141419;}
.t-poster-icon {font-size: 4.5rem; line-height: 1; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));}
.t-body {padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1;}
.t-body .t-meta {margin-bottom: 10px;}
.t-body .t-click-hint {margin-top: auto; padding-top: 14px;}
.t-socials {display: flex; gap: 14px; margin-top: 12px; align-items: center;}
.t-ig {display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-decoration: none;}
.t-ig img {width: 28px; height: 28px; border-radius: 8px; transition: transform var(--dur-fast) var(--ease-out);}
.t-ig:hover img {transform: scale(1.12);}
.t-ig:hover {color: var(--ink);}
.t-wa {display: inline-flex; align-items: center; text-decoration: none;}
.t-wa img {width: 28px; height: 28px; border-radius: 8px; transition: transform var(--dur-fast) var(--ease-out);}
.t-wa:hover img {transform: scale(1.12);}
.tournament-status-chip {display: inline-block; font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; margin-bottom: 12px; font-family: var(--font-display);}
.tournament-status-chip.upcoming {background: rgba(245, 158, 11, 0.12); color: #B45309; border: 1px solid rgba(245, 158, 11, 0.35);}
.tournament-status-chip.completed {background: rgba(34, 197, 94, 0.12); color: #15803D; border: 1px solid rgba(34, 197, 94, 0.35);}
.tournament-card-icon {font-size: 2.25rem; margin-bottom: 10px;}
.tournament-card h4 {font-size: 1.15rem; font-weight: 800; color: var(--ink); margin-bottom: 6px;}
.tournament-card .t-meta {font-size: 0.875rem; color: var(--muted); line-height: 1.65; font-weight: 500; margin-bottom: 12px;}
.tournament-card .t-meta span {color: var(--accent); font-weight: 700;}
.tournament-card .t-tagline {font-size: 0.875rem; color: var(--faint); font-style: italic;}
.tournament-card .t-click-hint {display: block; margin-top: 14px; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent);}
.tournament-empty {grid-column: 1 / -1; text-align: center; color: var(--faint); padding: 40px 20px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); font-weight: 600;}

/* Tournament results modal */
.tournament-modal {max-width: 560px; text-align: left; padding: 32px;}
.tournament-modal-head {text-align: center; margin-bottom: 20px;}
.tournament-modal-icon {font-size: 2.5rem; margin-bottom: 8px;}
.tournament-modal-name {font-size: 1.5rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); margin-bottom: 4px;}
.tournament-modal-meta {font-size: 0.9rem; color: var(--muted); font-weight: 500;}
.tournament-modal-body {display: flex; flex-direction: column; gap: 10px;}
.tm-row {display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; background: var(--surface-2); border: 1px solid transparent; border-radius: var(--radius); font-size: 0.9rem;}
.tm-row .k {font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--faint); flex-shrink: 0; font-family: var(--font-display);}
.tm-row .v {color: var(--ink-2); font-weight: 600; text-align: right; overflow-wrap: anywhere;}
.tm-row.winner {background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.35);}
.tm-row.winner .k, .tm-row.winner .v {color: #B45309;}
.tm-row.winner .v {font-weight: 800; font-size: 1rem;}
.tm-row.mvp {border-color: var(--accent-border);}
.tm-row.mvp .v {color: var(--accent-hover); font-weight: 800;}

/* === WALL OF SHAME — BANNED TEAMS SCENE === */
#scene-banned::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(45deg, var(--accent) 0px, var(--accent) 14px, transparent 14px, transparent 28px); opacity: 0.55; z-index: 2;}
.banned-label {animation: banned-pulse 2.5s ease-in-out infinite;}
@keyframes banned-pulse {0%, 100% {box-shadow: 0 0 0 0 rgba(215, 29, 31, 0.25);} 50% {box-shadow: 0 0 0 5px rgba(215, 29, 31, 0.12);}}
.banned-word {background: linear-gradient(135deg, #F03A3C 0%, #9A1C1E 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.banned-scene-desc {color: var(--muted);}

.banned-cards {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 8px;}
.banned-card {position: relative; background: var(--surface); border: 1px solid var(--border-light); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); overflow: hidden;}
.banned-card:hover {transform: translateY(-3px); box-shadow: var(--shadow-md);}
.banned-card-head {display: flex; align-items: center; gap: 14px; margin-bottom: 16px;}
.banned-card-icon {width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent-border); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0;}
.banned-card-team {font-size: 1.1rem; font-weight: 800; color: var(--ink); font-family: var(--font-display); overflow-wrap: anywhere;}
.banned-card-sub {font-size: 0.68rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;}
.banned-card-rows {display: flex; flex-direction: column; gap: 8px;}
.banned-card-row {display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; color: var(--muted); padding: 8px 12px; background: var(--surface-2); border-radius: 10px;}
.banned-card-row .k {color: var(--faint); font-weight: 600; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;}
.banned-card-row .v {color: var(--ink-2); font-weight: 500; text-align: right; overflow-wrap: anywhere;}
.banned-card-row .v.reason {color: var(--accent-hover); font-weight: 700;}
.banned-card-row .v.date {color: var(--faint); font-size: 0.8rem;}

.banned-empty-card {grid-column: 1 / -1; text-align: center; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 48px 24px; box-shadow: var(--shadow-sm);}
.banned-empty-icon {font-size: 2.5rem; margin-bottom: 10px;}
.banned-empty-card h4 {font-size: 1.2rem; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 6px; color: #15803D; font-family: var(--font-display);}
.banned-empty-card p {color: var(--muted); font-size: 0.95rem;}

/* === MODAL === */
.modal-overlay {position: fixed; inset: 0; z-index: 2000; background: rgba(8, 8, 10, 0.45); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity var(--dur-slow) var(--ease);}
.modal-overlay.show {opacity: 1; pointer-events: all;}
.modal {background: var(--surface); border: 1px solid var(--border-light); border-radius: 20px; padding: 40px; max-width: 500px; width: 100%; text-align: center; position: relative; box-shadow: var(--shadow-xl); transform: translateY(10px) scale(0.98); transition: transform var(--dur-slow) var(--ease-out);}
.modal-overlay.show .modal {transform: translateY(0) scale(1);}
/* TALL MODALS: the account modal (bookings/wallet/profile) can exceed the
   viewport on phones — clamp it and scroll INSIDE instead of overflowing
   off-screen (fields/buttons must stay reachable, taps must not miss and
   hit the backdrop, which closes the modal). */
.modal-overlay {overflow-y: auto; align-items: flex-start;}
.modal-overlay .modal {max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; margin: auto; -webkit-overflow-scrolling: touch;}
/* Slight compaction for auth/account modals on small screens */
@media (max-width: 768px) {
  .modal-overlay {padding: 16px;}
  .modal-overlay .modal {padding: 26px 18px 20px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);}
}
.modal-close {position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--faint); cursor: pointer; border-radius: 10px; transition: all var(--dur-fast) var(--ease-out);}
.modal-close:hover {background: var(--surface-2); color: var(--ink);}
.modal-close:focus-visible {outline: none; box-shadow: var(--ring);}
.modal-icon {margin-bottom: 20px;}
.check-circle {width: 72px; height: 72px; margin: 0 auto;}
.check-circle-bg {stroke: var(--accent); stroke-width: 2; fill: none; stroke-dasharray: 166; stroke-dashoffset: 166; animation: stroke 0.6s var(--ease) forwards;}
@keyframes stroke {to {stroke-dashoffset: 0;}}
.check-mark {stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: stroke 0.3s var(--ease) 0.6s forwards;}
.modal-title {font-size: 1.35rem; font-weight: 800; margin-bottom: 10px; color: var(--ink); font-family: var(--font-display);}
.modal-message {font-size: 0.95rem; color: var(--muted); margin-bottom: 24px; line-height: 1.7;}

/* === FOOTER (dark structural band — the "30%") === */
.footer {background: #0B0B0D; color: #C9C4C5; border-top: 1px solid rgba(239, 236, 236, 0.07); padding: 72px 0 32px; position: relative; z-index: 1; margin-top: 40px;}
.footer-grid {display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px;}
.footer-brand {display: flex; flex-direction: column; gap: 16px;}
.footer-logo {display: flex; align-items: center; gap: 12px;}
.footer-logo-img {height: 52px; width: 52px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);}
.footer-logo-text {display: flex; flex-direction: column; line-height: 1.2; font-size: 0.9rem; font-weight: 800; font-family: var(--font-display); color: #fff;}
.footer .accent {color: #FF2A44;}
.footer .gold {background: none; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: currentColor; color: #FFFFFF;}
.footer-desc {font-size: 0.9rem; color: #9C9596; line-height: 1.7; max-width: 350px;}
.footer-socials {display: flex; gap: 10px; margin-top: 4px;}
.social-link {width: 44px; height: 44px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #9C9596; transition: all var(--dur-base) var(--ease-out); cursor: pointer;}
.social-link:hover {background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.2); color: #fff; transform: translateY(-2px);}
.social-link:focus-visible {outline: none; box-shadow: 0 0 0 3px rgba(248, 250, 252, 0.35);}
.social-link-discord {color: #8B96FF;}
.social-link-discord:hover {background: #5865F2; border-color: #5865F2; color: #fff;}
.social-link-whatsapp {color: #4ADE80;}
.social-link-whatsapp:hover {background: #25D366; border-color: #25D366; color: #fff;}
.social-link-instagram {color: #F472B6;}
.social-link-instagram:hover {background: linear-gradient(45deg, #833AB4, #C13584, #E1306C, #F77737, #FCAF45); border-color: #E1306C; color: #fff;}
.social-link-youtube {color: #F87171;}
.social-link-youtube:hover {background: #FF0000; border-color: #FF0000; color: #fff;}
.footer-heading {font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 16px; font-family: var(--font-display);}
.footer-link {display: block; font-size: 0.9rem; color: #9C9596; padding: 6px 0; transition: color var(--dur-fast) var(--ease); cursor: pointer;}
.footer-link:hover {color: #fff;}
.footer-link-discord {color: #A5B0FF;}
.footer-link-discord:hover {color: #C3CBFF;}
.footer-link-whatsapp {color: #4ADE80;}
.footer-link-whatsapp:hover {color: #86EFAC;}
.footer-link-instagram {color: #F472B6;}
.footer-link-instagram:hover {color: #F9A8D4;}
.footer-link-youtube {color: #F87171;}
.footer-link-youtube:hover {color: #FCA5A5;}
.footer-link-kick {color: #7DFC5A;}
.footer-link-kick:hover {color: #B3FE94;}
.footer-bottom {border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;}
.footer-copy {font-size: 0.85rem; color: #9C9596;}
/* "Made by Toushif" — gold credit link to the creator's Instagram */
.footer-credit {margin: 0;}
.footer-credit a {font-size: 0.85rem; font-weight: 800; color: #FFD700; text-decoration: none; letter-spacing: 0.02em; background: linear-gradient(135deg, #FFE55C 0%, #FFD700 45%, #C9A100 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
.footer-credit a:hover {-webkit-text-fill-color: #FFE55C;}
.footer-tag {display: flex; align-items: center;}
.tag-hash {font-size: 0.9rem; font-weight: 800; letter-spacing: 0.04em; color: #F87171; font-family: var(--font-display);}

/* === 3D TILT (softened) === */
[data-tilt] {transition: transform var(--dur-slow) var(--ease-out); will-change: transform;}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation: none !important; transition: none !important;}
  html {scroll-behavior: auto;}
}

/* ==================== USER AUTH ==================== */
.auth-modal { max-width: 420px; width: calc(100% - 32px); padding: 44px 28px 32px; }
.auth-modal .modal-close { top: 12px; right: 12px; }
.auth-modal-wide { max-width: 540px; }
.auth-tabs { display: flex; gap: 4px; margin-bottom: 20px; border: 1px solid var(--border-light); border-radius: 12px; overflow: hidden; padding: 4px; background: var(--surface-2); }
.auth-tab { flex: 1; padding: 9px 0; border: none; background: transparent; color: var(--muted); font-family: var(--font); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; border-radius: 9px; transition: all var(--dur-fast) var(--ease-out); }
.auth-tab:hover { color: var(--ink); }
.auth-tab.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.auth-form { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 8px; }
.auth-input { width: 100%; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: var(--ink); font-size: 0.95rem; font-family: var(--font); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.auth-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* mandatory markers */
.auth-required-note { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; margin: 0 0 2px; text-align: left; }
.auth-required-note span, .req-star { color: #F87171; font-weight: 800; }
#usernamePreview:empty { display: none; }
#usernamePreview strong { color: var(--ink-2); }

/* Show/hide password toggle (auto-added to every input[type=password]) */
.pw-wrap { position: relative; display: block; width: 100%; }
.pw-wrap > input { width: 100%; padding-right: 44px !important; box-sizing: border-box; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: inherit; opacity: 0.6; padding: 0; line-height: 1; }
.pw-toggle:hover { opacity: 1; }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; opacity: 1; }
.pw-toggle svg { width: 18px; height: 18px; }
.auth-code-input { text-align: center; font-size: 1.4rem; letter-spacing: 10px; font-weight: 700; padding: 12px 16px 12px 26px; }
.auth-error { display: none; color: var(--accent-hover); font-size: 0.85rem; margin: 0; font-weight: 500; }
.auth-hint { display: block; color: var(--faint); font-size: 0.78rem; line-height: 1.45; margin: -4px 0 6px; text-align: left; }
.auth-hint strong { color: var(--ink-2); }
.auth-note { color: var(--faint); font-size: 0.8rem; margin: 10px 0 0; line-height: 1.6; }
.auth-note a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-note a:hover { text-decoration: underline; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; color: var(--faint); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border-light); }
.google-btn-wrap { display: flex; justify-content: center; min-height: 44px; margin-top: 6px; }
.google-btn-below { margin-top: 14px; }
.auth-row-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.auth-switch { color: var(--muted); font-size: 0.85rem; margin: 14px 0 0; }
.auth-switch a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.auth-check { display: flex; align-items: flex-start; gap: 10px; text-align: left; cursor: pointer; color: var(--faint); font-size: 0.8rem; line-height: 1.5; margin: 2px 0; }
.auth-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin-top: 1px; flex-shrink: 0; }
.auth-check:hover span { color: var(--muted); }

.my-bookings-list { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; margin-top: 14px; padding-right: 4px; }
.my-bookings-empty { color: var(--faint); font-size: 0.9rem; text-align: center; padding: 18px 0; }
.mb-card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 14px; text-align: left; box-shadow: var(--shadow-sm); }
.mb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mb-team { font-weight: 400; color: var(--ink); font-size: 0.95rem; font-family: var(--font-display); font-synthesis: none; }
.mb-chip { padding: 3px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; }
.mb-chip.verified { background: rgba(34, 197, 94, 0.12); color: #15803D; }
.mb-chip.pending { background: rgba(245, 158, 11, 0.14); color: #F5A623; }
.mb-chip.rejected { background: rgba(215, 29, 31, 0.14); color: var(--accent-bright); }
.mb-reason { font-size: 0.75rem; color: var(--accent-bright); }
.mb-meta { color: var(--muted); font-size: 0.8rem; margin-top: 6px; }
.mb-date { color: var(--faint); font-size: 0.72rem; margin-top: 3px; }
.mb-cancel { margin-top: 10px; background: none; border: 1px solid rgba(215, 29, 31, 0.45); color: var(--accent-bright); border-radius: 10px; padding: 6px 12px; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); font-family: inherit; }
.mb-cancel:hover { background: var(--accent-soft); }

/* Wallet history cards — flat, no glow/shadow (hardened so nothing can override) */
#walletHistoryList .mb-card,
#walletChoiceHistoryList .mb-card {
  box-shadow: none !important;
  filter: none;
  text-shadow: none;
  transition: none;
}

/* ==================== PROFILE TAB (account modal) ==================== */
.profile-pane { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.profile-pane .auth-form { margin: 0; }
.profile-avatar-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(239, 236, 236, 0.18);
  background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.profile-avatar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.profile-avatar-btn { cursor: pointer; }
.profile-avatar-btn input[type="file"] { display: none; }
/* Wallet modals: kill the heavy modal-halo so the wallet view stays flat */
#walletChoiceModal .modal,
#accountModal .modal,
#walletHistoryList,
#walletChoiceHistoryList { box-shadow: none !important; }
#walletHistoryList .mb-chip,
#walletChoiceHistoryList .mb-chip,
#walletHistoryList .mb-team,
#walletChoiceHistoryList .mb-team,
#walletHistoryList .mb-meta,
#walletChoiceHistoryList .mb-meta,
#walletHistoryList .mb-date,
#walletChoiceHistoryList .mb-date,
#walletHistoryList .mb-reason,
#walletChoiceHistoryList .mb-reason,
#walletHistoryList .mb-cancel,
#walletChoiceHistoryList .mb-cancel { box-shadow: none !important; filter: none !important; text-shadow: none !important; }

/* =====================================================================
   DARK STRUCTURAL LAYER — the 30%: hero band text/buttons/chips on slate
   (scoped to #scene-arena so light scenes keep their palette)
   ===================================================================== */
#scene-arena .chrome-text {background: linear-gradient(180deg, #FFFFFF 0%, #C7C9D1 45%, #E8EAF0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
#scene-arena .red-metal-text {background: linear-gradient(135deg, #FF2A44 0%, #D30B20 60%, #8B0000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;}
#scene-arena .hero-subtitle {color: #9C9596;}
#scene-arena .hero-desc {color: #C9C4C5;}
#scene-arena .hero-desc-highlight {color: #F87171;}
#scene-arena .hero-badge {background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
#scene-arena .badge-text {color: #C9C4C5;}
#scene-arena .pulse-dot {background: #F03A3C; box-shadow: 0 0 0 4px rgba(215, 29, 31, 0.22);}
#scene-arena .btn-outline {background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none;}
#scene-arena .btn-outline:hover {background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.38); color: #fff;}
#scene-arena .btn-gold {background: #fff; color: #0F0F12; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);}
#scene-arena .btn-gold:hover {background: #EFECEC; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.42);}
#scene-arena .stat-card {background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.10); box-shadow: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);}
#scene-arena .stat-card:hover {background: rgba(255, 255, 255, 0.09); border-color: rgba(240, 58, 60, 0.45); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);}
#scene-arena .stat-value {color: #F87171;}
#scene-arena .stat-label {color: #9C9596;}
#scene-arena .scroll-text {color: #9C9596;}
#scene-arena .scroll-arrow {color: #F87171;}
.nav .btn-discord {background: rgba(88, 101, 242, 0.18); border-color: rgba(129, 140, 248, 0.5); color: #C7D2FE;}
.nav .btn-discord:hover {background: #5865F2; border-color: #5865F2; color: #fff;}
.nav .btn-whatsapp {background: rgba(37, 211, 102, 0.14); border-color: rgba(74, 222, 128, 0.45); color: #86EFAC;}
.nav .btn-whatsapp:hover {background: #25D366; border-color: #25D366; color: #fff;}

/* === GLOBAL POLISH — accessibility & interaction === */
:focus-visible {outline: none; box-shadow: var(--ring); border-radius: 8px;}
button:not(:disabled), select, summary, [role='button'], input[type='submit'], input[type='button'] {cursor: pointer;}
button:disabled, input:disabled, select:disabled {cursor: not-allowed;}
::selection {background: rgba(215, 29, 31, 0.18); color: var(--ink);}

/* ==================== RESPONSIVE ==================== */
/* Nav collapses to hamburger before links can overflow the logo/buttons */
@media (max-width: 1240px) {
  .nav-links {display: none;}
  .nav-hamburger {display: flex;}
  /* Keep the WALLET CHIP in the header on mobile — the account/login
     buttons collapse into the drawer, but money stays one tap away.
     (JS controls the chip's inline display, so it only shows when
     signed in + wallet enabled.) */
  .nav-actions {display: flex;}
  .nav-actions .nav-account-btn,
  .nav-actions .nav-login-btn {display: none !important;}
}
@media (max-width: 1024px) {
  .stats-ribbon {grid-template-columns: repeat(2, 1fr);}
  .slots-schedule {grid-template-columns: repeat(2, 1fr);}
  .team-grid {grid-template-columns: repeat(4, 1fr);}
  .why-grid {grid-template-columns: repeat(2, 1fr);}
  .steps-grid {grid-template-columns: repeat(2, 1fr);}
  .testimonials-grid {grid-template-columns: repeat(2, 1fr);}
  .format-grid {grid-template-columns: 1fr;}
  .team-grid-management {grid-template-columns: repeat(2, 1fr);}
  .booking-layout {grid-template-columns: 1fr;}
  .footer-grid {grid-template-columns: 1fr 1fr;}
}
@media (max-width: 768px) {
  #scene-arena { padding-top: calc(var(--nav-h) + 20px); }
  .stats-ribbon {grid-template-columns: 1fr 1fr;}
  .why-grid {grid-template-columns: 1fr;}
  .steps-grid {grid-template-columns: 1fr;}
  .testimonials-grid {grid-template-columns: 1fr;}
  .slots-schedule {grid-template-columns: 1fr;}
  .team-grid {grid-template-columns: repeat(3, 1fr);}
  .team-grid-management {grid-template-columns: 1fr;}
  .pricing-tiers {flex-direction: column; align-items: stretch;}
  .tier-card {max-width: none;}
  .faq-grid {grid-template-columns: 1fr;}
  .rules-grid {grid-template-columns: 1fr;}
  .footer-grid {grid-template-columns: 1fr; gap: 32px;}
  .footer-bottom {flex-direction: column; gap: 20px;}
  .hero-ctas {flex-direction: column; width: 100%;}
  .hero-ctas .btn {width: 100%;}
  .nav-login-btn { display: none !important; }
  .nav-account-btn { display: none !important; }
}
@media (max-width: 600px) {
  .tournament-modal {padding: 24px 16px;}
  .tm-row {flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px;}
  .tm-row .v {text-align: left;}
}
@media (max-width: 480px) {
  .team-grid {grid-template-columns: repeat(2, 1fr);}
  .form-row {grid-template-columns: 1fr;}
}

/* =====================================================================
   SIGNATURE LAYER — logo DNA (loaded last to win the cascade)
   Anton condensed caps for headings · Rajdhani HUD for labels/buttons
   · claw-slash red accents. This IS the brand look — do not remove.
   ===================================================================== */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.12;
}
.hero-title, .tournament-announcement-title {letter-spacing: 0.01em;}
.hero-subtitle, .badge-text, .tag, .tier-badge, .stat-value, .stat-label,
.tournament-status-chip, .form-label, .banner-title, .faq-question,
.nav-links a, .nav-menu a, .footer-col h4, .step-number, .status-chip,
.src-chip, .admin-tab, .admin-btn, .admin-stat-label, .admin-stat-value,
.section-title, .section-title-alt {
  font-family: var(--font-hud);
}
.btn, button, .admin-btn, .social-btn {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
}
.nav-links a, .nav-menu a {text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600;}
.stat-value, .tier-price {letter-spacing: 0.02em;}
.hero-title {text-shadow: none;}
/* claw-slash marks before section headings */
.section-title::before, .section-title-alt::before {
  content: '//';
  color: var(--accent);
  margin-right: 12px;
  font-family: var(--font-hud);
  font-weight: 700;
  letter-spacing: -0.05em;
}
/* primary CTA — logo red with hot glow edge */
.btn-primary {box-shadow: 0 6px 20px rgba(215, 29, 31, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.25);}
.btn-primary:hover {box-shadow: 0 10px 28px rgba(215, 29, 31, 0.50), inset 0 -2px 0 rgba(0, 0, 0, 0.25);}
::selection {background: rgba(215, 29, 31, 0.45); color: #fff;}

/* =====================================================================
   HERO TITLE — old-look big Oswald, THE CURSED/ESPORTS white,
   WARRIOR red, subtle glow (drop-shadow works with gradient-clipped text)
   ===================================================================== */
.hero-title,
.tournament-announcement-title {
  font-family: 'Oswald', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: clamp(3.5rem, 11vw, 8rem);
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.hero-title .chrome-text,
.tournament-announcement-title .chrome-text {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F4F8 50%, #D8DCE4 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, 0.22));
}
.hero-title .red-metal-text,
.tournament-announcement-title .red-metal-text {
  background: linear-gradient(135deg, #FF2A44 0%, #D30B20 60%, #8B0000 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(255, 42, 68, 0.35));
}

/* Logo — seamless, natural aspect, no box */
.nav-logo-img,
.footer-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

/* ==========================================
   WALLET + STANDINGS + PHONE (v35)
   ========================================== */

/* ---- Nav: spacing + wallet chip ---- */
.nav > .container { gap: 20px; }
.nav-links { gap: 4px; margin: 0 auto; }
.nav-link { padding: 10px 11px; }
.nav-actions { gap: 10px; }

.nav-wallet-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(255, 160, 0, 0.06));
  color: #FFD700;
  font-weight: 800;
  font-size: 0.85rem;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.nav-wallet-chip:hover { border-color: rgba(255, 215, 0, 0.7); background: rgba(255, 215, 0, 0.16); transform: translateY(-1px); }
.nav-wallet-chip-amount { font-variant-numeric: tabular-nums; }
.nav-wallet-chip-mobile { width: 100%; justify-content: center; margin-top: 8px; }

/* ---- Wallet strip (below header, arena top — logged-in only) ---- */
.wallet-strip-wrap { position: relative; z-index: 2; }
.wallet-strip-wrap[hidden] { display: none; }
.wallet-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(135deg, rgba(20, 22, 30, 0.96), rgba(12, 13, 18, 0.96));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 14px 20px;
  margin-bottom: 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.ws-welcome { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ws-hello { font-size: 0.78rem; color: var(--muted); }
.ws-name { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-family: var(--font-display); }
.ws-stats { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; padding: 10px 18px; }
.ws-stat { display: flex; align-items: center; gap: 10px; padding: 0 18px; }
.ws-stat + .ws-stat { border-left: 1px solid rgba(255, 255, 255, 0.10); }
.ws-stat:first-child { padding-left: 0; }
.ws-stat:last-child { padding-right: 0; }
.ws-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; }
.ws-ico svg { width: 19px; height: 19px; }
.ws-ico-balance { color: #7FB8FF; background: rgba(127, 184, 255, 0.12); }
.ws-ico-prize { color: #FFD700; background: rgba(255, 215, 0, 0.12); }
.ws-meta { display: flex; flex-direction: column; gap: 1px; }
.ws-label { font-size: 0.72rem; color: var(--muted); white-space: nowrap; }
.ws-value { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; font-family: var(--font-display); }
.ws-balance { color: #FFB020; }
.ws-prize { color: #4ADE80; }
.ws-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 900px) {
  .wallet-strip { flex-direction: column; align-items: stretch; text-align: center; }
  .ws-welcome { align-items: center; }
  .ws-name { max-width: none; }
  .ws-stats { flex-direction: column; align-items: stretch; gap: 0; padding: 6px 14px; }
  .ws-stat { justify-content: flex-start; padding: 10px 4px; }
  .ws-stat + .ws-stat { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.10); }
  .ws-actions { flex-direction: column; }
  .ws-actions .btn { width: 100%; justify-content: center; }
}

/* ---- Toast ---- */
.tcw-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--surface-2, #17171B);
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  color: var(--ink, #EFECEC);
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all var(--dur-base) var(--ease-out);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  max-width: calc(100vw - 40px);
  text-align: center;
}
.tcw-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Account modal: wallet card + tabs ---- */
.wallet-balance-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 215, 0, 0.30);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.08), rgba(255, 160, 0, 0.04));
  margin: 12px 0 14px;
}
.wallet-balance-label { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; color: var(--muted); }
.wallet-balance-amount { display: block; font-family: var(--font-display); font-size: 1.7rem; color: #FFD700; line-height: 1.1; }
.wallet-balance-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.withdraw-balance-line { font-size: 0.9rem; color: var(--muted); background: rgba(255,255,255,0.04); border: 1px solid var(--border-light, rgba(255,255,255,0.12)); border-radius: 10px; padding: 10px 14px; }
.withdraw-balance-line strong { color: #FFD700; font-size: 1.05rem; }
.wallet-choice-title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin: 10px 0 2px; text-align: left; }

.account-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.account-tab {
  flex: 1;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border-light, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: inherit;
}
.account-tab:hover { color: var(--ink); border-color: rgba(255,255,255,0.25); }
.account-tab.active { color: #FFD700; border-color: rgba(255, 215, 0, 0.5); background: rgba(255, 215, 0, 0.08); }

/* ---- Top-up modal ---- */
.topup-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.topup-amount-btn {
  padding: 14px 8px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light, rgba(255,255,255,0.14));
  background: var(--surface, #101013);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.topup-amount-btn:hover { border-color: rgba(255, 215, 0, 0.5); }
.topup-amount-btn.active { border-color: #FFD700; background: rgba(255, 215, 0, 0.12); color: #FFD700; }
.topup-pay-amount { color: #FFD700; font-weight: 800; }
.topup-success { text-align: center; padding: 18px 6px; }
.topup-success-icon { font-size: 3rem; margin-bottom: 10px; }
.topup-success h3 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: 8px; }
.topup-success p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; margin-bottom: 18px; }

/* ---- Booking: payment method toggle ---- */
.pay-method-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 16px; }
.pay-method-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border-light, rgba(255,255,255,0.14));
  background: var(--surface, #101013);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: inherit;
}
.pay-method-btn:hover { border-color: rgba(255,255,255,0.3); }
.pay-method-btn.active { border-color: var(--accent, #D71D1F); background: rgba(215, 29, 31, 0.08); box-shadow: 0 0 0 1px var(--accent, #D71D1F) inset; }
.pay-method-btn.insufficient { opacity: 0.75; }
.pay-method-icon { font-size: 1.4rem; }
.pay-method-text { display: flex; flex-direction: column; line-height: 1.25; font-weight: 700; font-size: 0.9rem; }
.pay-method-sub { font-size: 0.7rem; font-weight: 600; color: var(--muted); }
.pay-method-sub.low { color: #F5A623; font-weight: 700; }

/* ==========================================
   PAYMENT TERMINAL BUTTONS — the CURSED red metal
   (same red as the arcade hero title) — flat, zero glow
   Covers: CONFIRM & BOOK SLOT / INSTANT BOOK FROM WALLET
   (both are #submitBooking), ADD MONEY (#walletPayTopupBtn),
   and COPY UPI ID (.btn-copy)
   ========================================== */
#submitBooking,
#walletPayTopupBtn,
.btn-copy {
  background: linear-gradient(135deg, #FF2A44 0%, #D30B20 60%, #8B0000 100%);
  border: 1px solid rgba(215, 29, 31, 0.65);
  color: #fff;
  box-shadow: none;
}
#submitBooking:hover:not(:disabled),
#walletPayTopupBtn:hover:not(:disabled),
.btn-copy:hover {
  background: linear-gradient(135deg, #F03A3C 0%, #D71D1F 60%, #9A1C1E 100%);
  border-color: rgba(215, 29, 31, 0.85);
  color: #fff;
  box-shadow: none;
}
/* Disabled stays grey (matches .btn-gold:disabled) */
#submitBooking:disabled,
#walletPayTopupBtn:disabled {
  background: #2A2D36;
  color: #7C8194;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: none;
}
/* Low-balance warning keeps the same CURSED red — flat, the label text warns */
.btn.btn-low, .btn-gold.btn-low {
  background: linear-gradient(135deg, #FF2A44 0%, #D30B20 60%, #8B0000 100%);
  border: 1px solid rgba(215, 29, 31, 0.65);
  color: #fff;
  box-shadow: none;
}
.btn.btn-low:hover:not(:disabled) {
  background: linear-gradient(135deg, #F03A3C 0%, #D71D1F 60%, #9A1C1E 100%);
  box-shadow: none;
}

.wallet-pay-hint {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 215, 0, 0.35);
  background: rgba(255, 215, 0, 0.06);
  margin-bottom: 16px;
}
.wallet-pay-hint-icon { font-size: 1.8rem; }
.wallet-pay-hint-text { flex: 1; font-size: 0.9rem; line-height: 1.45; }
.wallet-pay-hint-text strong { color: #FFD700; }
.wallet-pay-hint-sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.wallet-pay-hint.short { border-color: rgba(215, 29, 31, 0.5); background: rgba(215, 29, 31, 0.06); }

/* ---- Standings scene ---- */
.standings-section { margin-top: 36px; }
.standings-section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-bottom: 14px;
  padding-left: 12px;
  border-left: 3px solid var(--accent, #D71D1F);
}
.standings-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border-light, rgba(255,255,255,0.10)); background: var(--surface, #101013); }
.standings-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.standings-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--border-light, rgba(255,255,255,0.12));
  white-space: nowrap;
}
.standings-table td { padding: 11px 14px; font-size: 0.9rem; border-bottom: 1px solid rgba(255,255,255,0.05); color: var(--ink); }
.standings-table tr:last-child td { border-bottom: none; }
.standings-table tr:hover td { background: rgba(255,255,255,0.03); }
.standings-rank { font-weight: 800; width: 60px; }
.standings-team { font-weight: 700; font-family: var(--font-display); letter-spacing: 0.02em; }
.standings-total { font-weight: 800; color: #FFD700; font-variant-numeric: tabular-nums; }
.standings-first td { background: rgba(255, 215, 0, 0.05); }
.standings-empty { text-align: center; color: var(--muted); padding: 26px 14px !important; font-size: 0.88rem; }
.standings-updated { font-size: 0.75rem; color: var(--faint); }

.mvp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.mvp-card {
  background: var(--surface, #101013);
  border: 1px solid var(--border-light, rgba(255,255,255,0.10));
  border-radius: var(--radius-lg);
  padding: 18px;
  text-align: center;
  transition: all var(--dur-base) var(--ease-out);
}
.mvp-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,0.25); }
.mvp-card-first { border-color: rgba(255, 215, 0, 0.45); background: linear-gradient(160deg, rgba(255,215,0,0.07), var(--surface)); }
.mvp-rank { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; color: #FFD700; margin-bottom: 8px; }
.mvp-name { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
.mvp-team { font-size: 0.78rem; color: var(--muted); margin: 3px 0 12px; }
.mvp-stats { display: flex; justify-content: center; gap: 26px; }
.mvp-stat { display: flex; flex-direction: column; }
.mvp-stat-value { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
.mvp-stat-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; color: var(--faint); }

@media (max-width: 900px) {
  .pay-method-toggle { grid-template-columns: 1fr; }
  .topup-amounts { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================
   FIXED SOCIAL DRAWER — pinned to the right edge,
   vertically centred, always visible while scrolling
   ========================================== */
.fixed-social-drawer {position: fixed; right: 16px; top: 50%; transform: translateY(-50%); z-index: 950; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 8px 10px; border-radius: 16px; background: rgba(10, 10, 14, 0.9); border: 1px solid rgba(255, 255, 255, 0.09); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5);}
.fsd-label {font-size: 0.55rem; font-weight: 800; letter-spacing: 0.22em; color: #6D7280; writing-mode: vertical-rl; text-transform: uppercase; margin-bottom: 2px; user-select: none;}
.fsd-icon {width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: center; transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.fsd-icon img, .fsd-icon svg {width: 20px; height: 20px; object-fit: contain; background: #fff; border-radius: 6px; padding: 3px; display: block;}
.fsd-icon:hover, .fsd-icon:focus-visible {transform: translateY(-3px) scale(1.06); background: var(--fsd-brand); border-color: var(--fsd-brand); box-shadow: 0 10px 24px var(--fsd-glow); outline: none;}
.fsd-discord {--fsd-brand: #5865F2; --fsd-glow: rgba(88, 101, 242, 0.45);}
.fsd-instagram {--fsd-brand: #E1306C; --fsd-glow: rgba(225, 48, 108, 0.45);}
.fsd-youtube {--fsd-brand: #FF0000; --fsd-glow: rgba(255, 0, 0, 0.4);}
.fsd-whatsapp {--fsd-brand: #25D366; --fsd-glow: rgba(37, 211, 102, 0.45);}
.fsd-kick {--fsd-brand: #53FC18; --fsd-glow: rgba(83, 252, 24, 0.4);}
.fsd-telegram {--fsd-brand: #229ED9; --fsd-glow: rgba(34, 158, 217, 0.45);}
.fsd-generic {--fsd-brand: #6D7280; --fsd-glow: rgba(255, 255, 255, 0.25);}
.fsd-icons {display: flex; flex-direction: column; align-items: center; gap: 10px;}
.fsd-fixed-tag {display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 2px; opacity: 0.6; cursor: default; user-select: none;}
.fsd-fixed-tag svg {width: 11px; height: 11px; fill: #F87171; animation: fsd-pin-pulse 2.6s ease-in-out infinite;}
.fsd-fixed-tag em {font-style: normal; font-size: 0.5rem; font-weight: 800; letter-spacing: 0.2em; color: #9C9596; writing-mode: vertical-rl; text-transform: uppercase;}
@keyframes fsd-pin-pulse {0%, 100% {opacity: 0.45; transform: scale(1);} 50% {opacity: 1; transform: scale(1.18);}}
@media (prefers-reduced-motion: no-preference) {
  .fixed-social-drawer {animation: fsd-slide-in 0.7s var(--ease-out) 0.45s both;}
  @keyframes fsd-slide-in {from {opacity: 0; transform: translateY(-50%) translateX(26px);} to {opacity: 1; transform: translateY(-50%) translateX(0);}}
}

/* CONTINUE TO PAY stays greyed out until a valid amount (min ₹30) is picked */
.btn-gold:disabled {background: #2A2D36; color: #7C8194; border-color: rgba(255, 255, 255, 0.06); box-shadow: none; opacity: 1;}

@media (max-width: 640px) {
  .fixed-social-drawer {right: 8px; padding: 9px 6px 8px; gap: 8px; border-radius: 13px;}
  .fsd-icon {width: 32px; height: 32px; border-radius: 9px;}
  .fsd-icon img, .fsd-icon svg {width: 17px; height: 17px;}
}

/* =====================================================================
   TOURNAMENT TICKER MARQUEE — continuous horizontal drift under hero
   GPU-only transform animation � pause on hover � edge fade masks
   ===================================================================== */
.ticker-zone {margin: 34px auto 8px; width: min(1160px, calc(100% - 32px)); position: relative;}
.ticker-head {display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding: 0 4px;}
.ticker-head-title {font-family: var(--font-hud); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);}
.ticker-head-live {display: inline-flex; align-items: center; gap: 6px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; color: var(--accent-bright); background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: 999px; padding: 3px 10px;}
.ticker-head-live::before {content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 8px var(--accent-bright); animation: tk-dot 1.6s ease-in-out infinite;}
@keyframes tk-dot {0%, 100% {opacity: 1;} 50% {opacity: 0.35;}}

.ticker-viewport {position: relative; overflow: hidden; border-radius: var(--radius-lg);
  /* glassmorphic dark container #16171b */
  background: linear-gradient(180deg, rgba(22, 23, 27, 0.9), rgba(22, 23, 27, 0.72));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--metal-highlight), 0 10px 34px rgba(0, 0, 0, 0.45);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  padding: 18px 0;}
.ticker-viewport::before, .ticker-viewport::after {content: ""; position: absolute; top: 0; bottom: 0; width: 70px; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(8, 8, 10, 0.9), transparent);}
.ticker-viewport::before {left: 0;}
.ticker-viewport::after {right: 0; transform: scaleX(-1);}

.ticker-track {display: flex; width: max-content; gap: 16px; will-change: transform;}
/* Drift is driven by script.js (Ticker engine, rAF + transform) —
   immune to prefers-reduced-motion / CSS animation quirks. Hover and
   focus-within pausing handled by the JS engine too. */

/* ---- tournament card ---- */
.tk-card {flex: 0 0 auto; width: 258px; display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, rgba(23, 23, 27, 0.96), rgba(16, 16, 19, 0.92));
  border: 1px solid var(--border-light); border-radius: 12px; padding: 16px 16px 14px;
  position: relative; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);}
.tk-card:hover, .tk-card:focus-visible {transform: translateY(-4px); border-color: var(--accent-border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 22px rgba(215, 29, 31, 0.16); outline: none;}
.tk-top {display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.tk-title {font-family: var(--font-hud); font-size: 0.98rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); line-height: 1.25; margin: 0;}
.tk-sub {font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-top: 4px;}

.tk-badge {flex: 0 0 auto; font-family: var(--font-hud); font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; border-radius: 6px; padding: 4px 9px; white-space: nowrap;}
.tk-badge-live {color: #FF5A5C; background: rgba(215, 29, 31, 0.14); border: 1px solid rgba(240, 58, 60, 0.55);
  text-shadow: 0 0 10px rgba(240, 58, 60, 0.85); box-shadow: 0 0 12px rgba(215, 29, 31, 0.28), inset 0 0 8px rgba(215, 29, 31, 0.18); animation: tk-live-glow 2.2s ease-in-out infinite;}
@keyframes tk-live-glow {0%, 100% {box-shadow: 0 0 12px rgba(215, 29, 31, 0.28), inset 0 0 8px rgba(215, 29, 31, 0.18);} 50% {box-shadow: 0 0 20px rgba(215, 29, 31, 0.42), inset 0 0 12px rgba(215, 29, 31, 0.26);}}
.tk-badge-upcoming {color: #FFD700; background: rgba(255, 208, 0, 0.07); border: 1px solid rgba(255, 208, 0, 0.42);}

.tk-meta {display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;}
.tk-cell {background: rgba(8, 8, 10, 0.55); border: 1px solid rgba(239, 236, 236, 0.06); border-radius: 8px; padding: 8px 10px; min-width: 0;}
.tk-k {font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tk-v {font-family: var(--font-hud); font-size: 0.86rem; font-weight: 700; color: var(--ink-2); white-space: nowrap;}
.tk-v.tk-prize {color: #FFD700;}
.tk-slots-bar {height: 4px; border-radius: 99px; background: rgba(239, 236, 236, 0.08); margin-top: 5px; overflow: hidden;}
.tk-slots-fill {height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--crimson-dark), var(--accent-bright)); box-shadow: 0 0 8px rgba(215, 29, 31, 0.4); transition: width var(--dur-slow) var(--ease-out);}
.tk-full .tk-slots-fill {background: #5a4348; box-shadow: none;}
.tk-full .tk-v {color: var(--faint);}

@media (max-width: 640px) {
  .ticker-zone {width: calc(100% - 20px); margin-top: 26px;}
  .ticker-viewport {padding: 14px 0; border-radius: 10px;}
  .tk-card {width: 228px; padding: 13px;}
  .ticker-head-title {font-size: 0.68rem; letter-spacing: 0.16em;}
  .tk-meta {gap: 6px;}
  .tk-cell {padding: 6px 8px;}
  .tk-v {font-size: 0.78rem;}
}

/* ---- Book Now button on ticker cards ---- */
.tk-book {display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 9px 12px; border-radius: 8px; cursor: pointer;
  font-family: var(--font-hud); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em;
  color: #fff; background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-dark) 100%);
  border: 1px solid var(--crimson-bright);
  box-shadow: 0 4px 14px rgba(215, 29, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);}
.tk-book:hover {transform: translateY(-1px); box-shadow: 0 8px 22px rgba(215, 29, 31, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12); filter: brightness(1.08);}
.tk-book:active {transform: translateY(0);}
.tk-book.tk-book-full {cursor: not-allowed; color: #7C8194; background: #26272E; border-color: rgba(239, 236, 236, 0.08); box-shadow: none;}

/* ---- Ongoing tournaments (live section) ---- */
.tournaments-ongoing {margin-top: 42px;}
.section-title-alt .live-accent {
  color: #FF5A5C;
  text-shadow: 0 0 14px rgba(240, 58, 60, 0.55);
  animation: ongoing-pulse 2.2s ease-in-out infinite;
}
@keyframes ongoing-pulse {0%, 100% {opacity: 1;} 50% {opacity: 0.72;}}
.tournament-status-chip.ongoing {
  color: #FF5A5C;
  background: rgba(215, 29, 31, 0.14);
  border: 1px solid rgba(240, 58, 60, 0.55);
  text-shadow: 0 0 10px rgba(240, 58, 60, 0.85);
  box-shadow: 0 0 12px rgba(215, 29, 31, 0.28), inset 0 0 8px rgba(215, 29, 31, 0.18);
}

/* ---- ticker: ongoing tournament cards ---- */
.tk-card-tournament {border-color: rgba(240, 58, 60, 0.35);
  background: linear-gradient(180deg, rgba(38, 18, 20, 0.96), rgba(22, 16, 18, 0.92));}
.tk-tagline {font-size: 0.72rem; color: var(--muted); font-style: italic; line-height: 1.4;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.tk-book-tournament {background: linear-gradient(135deg, #8a6d00 0%, #5c4700 100%);
  border-color: #FFD700; box-shadow: 0 4px 14px rgba(255, 208, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);}
.tk-book-tournament:hover {box-shadow: 0 8px 22px rgba(255, 208, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);}

/* two stacked ticker strips: tournaments strip sits closer to the CTAs,
   lobby strip right beneath it */
.ticker-zone-tournaments {margin: 26px auto 0;}
.ticker-zone-tournaments + .ticker-zone {margin: 14px auto 8px;}

/* ---- ticker tournament banner image ---- */
.tk-banner {margin: -16px -16px 12px; border-radius: 12px 12px 0 0; overflow: hidden; height: 120px; background: #0b0b0d;}
.tk-banner img {width: 100%; height: 100%; object-fit: cover; display: block;}
.tk-card-tournament {overflow: hidden;}
.tk-card-tournament.tk-has-banner {padding-top: 0;}
@media (max-width: 640px) {.tk-banner {height: 88px;}}

/* =====================================================================
   ONGOING TOURNAMENT HERO BANNER — full-width showcase in the Arena
   ===================================================================== */
.tk-hero-banner {position: relative; width: min(1160px, calc(100% - 32px)); margin: 30px auto 6px;
  border-radius: 16px; overflow: hidden; border: 1px solid rgba(240, 58, 60, 0.35);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55), 0 0 30px rgba(215, 29, 31, 0.18);}
.tk-hero-img {width: 100%; display: block; aspect-ratio: 21 / 9; object-fit: cover; object-position: center;}
.tk-hero-overlay {position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.92) 0%, rgba(8, 8, 10, 0.35) 45%, rgba(8, 8, 10, 0.15) 100%);}
.tk-hero-content {position: absolute; inset: auto 0 0 0; padding: 22px 26px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;}
.tk-hero-title {margin: 0; font-family: var(--font-display); font-size: clamp(1.3rem, 3.2vw, 2.2rem);
  font-weight: 900; letter-spacing: 0.06em; color: #fff; text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);}
.tk-hero-meta {margin: 0; font-family: var(--font-hud); font-size: 0.95rem; font-weight: 600;
  color: #FFD700; letter-spacing: 0.08em;}
.tk-hero-actions .tk-book {width: auto; padding: 10px 22px; font-size: 0.85rem;}
@media (max-width: 640px) {
  .tk-hero-img {aspect-ratio: 16 / 9;}
  .tk-hero-content {padding: 14px 16px; gap: 6px;}
  .tk-hero-actions .tk-book {padding: 9px 18px;}
}