/*
   NEXARENA public landing page
   --------------------------------
   This is a small, local Tailwind-compatible utility layer for player.html.
   The page used to load Tailwind and Google Fonts from external CDNs.  Those
   requests could block the HTML parser for users whose route to the CDN was
   unstable.  Keeping the required utilities here makes the landing page
   render from the VPS alone and leaves Cloudflare responsible for delivery.
*/

@font-face {
  font-family: "NexaLanding";
  src: url("/assets/font-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "NexaLanding";
  src: url("/assets/font.ttf") format("truetype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tw-cyan-300: #67e8f9;
  --tw-cyan-400: #22d3ee;
  --tw-cyan-500: #06b6d4;
  --tw-sky-300: #7dd3fc;
  --tw-sky-400: #38bdf8;
  --tw-blue-500: #3b82f6;
  --tw-blue-600: #2563eb;
  --tw-slate-100: #f1f5f9;
  --tw-slate-200: #e2e8f0;
  --tw-slate-300: #cbd5e1;
  --tw-slate-400: #94a3b8;
  --tw-slate-500: #64748b;
  --tw-slate-700: #334155;
  --tw-slate-800: #1e293b;
  --tw-slate-900: #0f172a;
  --tw-emerald-400: #34d399;
  --tw-amber-400: #fbbf24;
  --tw-black: #000;
  --tw-white: #fff;
}

*,
::before,
::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "NexaLanding", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: inherit; }
button,
input,
select,
textarea { font: inherit; }
img,
svg { display: block; vertical-align: middle; }
img { max-width: 100%; }
[hidden] { display: none !important; }

/* Layout */
.block { display: block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.hidden { display: none !important; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.top-0 { top: 0; }
.z-50 { z-index: 50; }
.inset-2 { inset: .5rem; }
[class~="-inset-1"] { inset: -.25rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-1\.5 { height: .375rem; }
.h-2 { height: .5rem; }
.h-4 { height: 1rem; }
.h-6 { height: 1.5rem; }
.h-9 { height: 2.25rem; }
.h-12 { height: 3rem; }
.h-20 { height: 5rem; }
.h-36 { height: 9rem; }
.w-1\.5 { width: .375rem; }
.w-2 { width: .5rem; }
.w-4 { width: 1rem; }
.w-6 { width: 1.5rem; }
.w-9 { width: 2.25rem; }
.w-12 { width: 3rem; }
.w-36 { width: 9rem; }
.min-h-screen { min-height: 100vh; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-7xl { max-width: 80rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mr-1 { margin-right: .25rem; }
.my-6 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-20 { margin-top: 5rem; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.pt-2 { padding-top: .5rem; }
.pt-4 { padding-top: 1rem; }
.pt-8 { padding-top: 2rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-2\.5 { padding-top: .625rem; padding-bottom: .625rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.pb-4 { padding-bottom: 1rem; }
.px-2\.5 { padding-left: .625rem; padding-right: .625rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-7 { padding-left: 1.75rem; padding-right: 1.75rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.gap-1\.5 { gap: .375rem; }
.gap-2 { gap: .5rem; }
.gap-2\.5 { gap: .625rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.shrink-0 { flex-shrink: 0; }
.overflow-hidden { overflow: hidden; }
.space-y-3\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: .875rem; }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.space-y-6 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; }

/* Grid columns and responsive layout */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: .5rem; }
.rounded-xl { border-radius: .75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-3xl { border-radius: 1.5rem; }
[class~="rounded-[10px]"] { border-radius: 10px; }

/* Borders/backgrounds */
.border { border-width: 1px; }
.border-b { border-bottom-width: 1px; }
.border-t { border-top-width: 1px; }
.border-dashed { border-style: dashed; }
[class~="border-cyan-400/20"] { border-color: rgb(34 211 238 / .20); }
[class~="border-cyan-400/25"] { border-color: rgb(34 211 238 / .25); }
[class~="border-cyan-500/10"] { border-color: rgb(6 182 212 / .10); }
[class~="border-cyan-500/15"] { border-color: rgb(6 182 212 / .15); }
[class~="border-cyan-500/20"] { border-color: rgb(6 182 212 / .20); }
[class~="border-cyan-500/25"] { border-color: rgb(6 182 212 / .25); }
[class~="border-cyan-500/30"] { border-color: rgb(6 182 212 / .30); }
[class~="border-emerald-500/20"] { border-color: rgb(16 185 129 / .20); }
[class~="border-emerald-500/30"] { border-color: rgb(16 185 129 / .30); }
[class~="border-slate-700/60"] { border-color: rgb(51 65 85 / .60); }
[class~="border-slate-700/80"] { border-color: rgb(51 65 85 / .80); }
.border-slate-800 { border-color: var(--tw-slate-800); }
[class~="border-slate-800/60"] { border-color: rgb(30 41 59 / .60); }
[class~="bg-[#060A14]"] { background-color: #060a14; }
[class~="bg-[#080D1A]"] { background-color: #080d1a; }
[class~="bg-[#080D1A]/85"] { background-color: rgb(8 13 26 / .85); }
[class~="bg-[#0B1325]/80"] { background-color: rgb(11 19 37 / .80); }
[class~="bg-[#0B1325]/90"] { background-color: rgb(11 19 37 / .90); }
[class~="bg-[#0E172B]"] { background-color: #0e172b; }
[class~="bg-[#1E293B]/70"] { background-color: rgb(30 41 59 / .70); }
[class~="bg-cyan-400"] { background-color: var(--tw-cyan-400); }
[class~="bg-cyan-400/10"] { background-color: rgb(34 211 238 / .10); }
[class~="bg-cyan-500/10"] { background-color: rgb(6 182 212 / .10); }
[class~="bg-cyan-950/50"] { background-color: rgb(8 51 68 / .50); }
[class~="bg-emerald-400"] { background-color: var(--tw-emerald-400); }
[class~="bg-emerald-950/40"] { background-color: rgb(2 44 34 / .40); }
[class~="bg-emerald-950/60"] { background-color: rgb(2 44 34 / .60); }
[class~="bg-slate-900/50"] { background-color: rgb(15 23 42 / .50); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
.from-cyan-400 { --tw-gradient-from: var(--tw-cyan-400); --tw-gradient-to: rgb(34 211 238 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-cyan-500 { --tw-gradient-from: var(--tw-cyan-500); --tw-gradient-to: rgb(6 182 212 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-blue-950\/60 { --tw-gradient-from: rgb(23 37 84 / .60); --tw-gradient-to: rgb(23 37 84 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
[class~="from-[#0A162D]"] { --tw-gradient-from: #0a162d; --tw-gradient-to: rgb(10 22 45 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-cyan-300 { --tw-gradient-stops: var(--tw-gradient-from), var(--tw-cyan-300), var(--tw-gradient-to); }
.via-sky-300 { --tw-gradient-stops: var(--tw-gradient-from), var(--tw-sky-300), var(--tw-gradient-to); }
[class~="via-[#0B1733]"] { --tw-gradient-stops: var(--tw-gradient-from), #0b1733, var(--tw-gradient-to); }
.to-sky-400 { --tw-gradient-to: var(--tw-sky-400); }
.to-blue-500 { --tw-gradient-to: var(--tw-blue-500); }
.to-blue-600 { --tw-gradient-to: var(--tw-blue-600); }
.to-cyan-950\/50 { --tw-gradient-to: rgb(8 51 68 / .50); }
[class~="to-[#0D1E3F]"] { --tw-gradient-to: #0d1e3f; }

/* Typography */
.font-sans { font-family: "NexaLanding", Arial, sans-serif; }
.font-mono { font-family: "NexaMono", "NexaLanding", monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.font-black { font-weight: 900; }
.text-transparent { color: transparent; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
.text-xs { font-size: .75rem; line-height: 1rem; }
[class~="text-[11px]"] { font-size: 11px; line-height: 1rem; }
.text-sm { font-size: .875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-6xl { font-size: 3.75rem; line-height: 1; }
.text-white { color: var(--tw-white); }
.text-black { color: var(--tw-black); }
.text-slate-100 { color: var(--tw-slate-100); }
.text-slate-200 { color: var(--tw-slate-200); }
.text-slate-300 { color: var(--tw-slate-300); }
.text-slate-400 { color: var(--tw-slate-400); }
.text-slate-500 { color: var(--tw-slate-500); }
.text-slate-950 { color: #020617; }
.text-cyan-300 { color: var(--tw-cyan-300); }
.text-cyan-400 { color: var(--tw-cyan-400); }
.text-sky-400 { color: var(--tw-sky-400); }
.text-emerald-400 { color: var(--tw-emerald-400); }
.text-amber-400 { color: var(--tw-amber-400); }
.tracking-tight { letter-spacing: -.025em; }
.tracking-wider { letter-spacing: .05em; }
.tracking-widest { letter-spacing: .1em; }
.leading-tight { line-height: 1.25; }
.leading-relaxed { line-height: 1.625; }
[class~="leading-[1.1]"] { line-height: 1.1; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Visual effects */
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.opacity-20 { opacity: .2; }
.blur-2xl { filter: blur(40px); }
.backdrop-blur-md { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.drop-shadow-\[0_0_8px_rgba\(232\,83\,98\,0\.65\)\] { filter: drop-shadow(0 0 8px rgba(232,83,98,.65)); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / .25), 0 4px 6px -4px rgb(0 0 0 / .2); }
.transition { transition-property: color, background-color, border-color, opacity, box-shadow, transform; transition-duration: 150ms; transition-timing-function: cubic-bezier(.4,0,.2,1); }
.transition-all { transition: all 150ms cubic-bezier(.4,0,.2,1); }
.transition-colors { transition: color, background-color, border-color, text-decoration-color, fill, stroke 150ms cubic-bezier(.4,0,.2,1); }
.transition-transform { transition: transform 150ms cubic-bezier(.4,0,.2,1); }
[class~="duration-200"] { transition-duration: 200ms; }
[class~="duration-1000"] { transition-duration: 1000ms; }

/* Hover/focus variants used by the landing page */
[class~="hover:text-white"]:hover { color: #fff; }
[class~="hover:text-cyan-400"]:hover { color: var(--tw-cyan-400); }
[class~="hover:bg-cyan-500/10"]:hover { background-color: rgb(6 182 212 / .10); }
[class~="hover:bg-[#162342]"]:hover { background-color: #162342; }
[class~="hover:bg-[#2A374F]"]:hover { background-color: #2a374f; }
[class~="hover:border-cyan-400"]:hover { border-color: var(--tw-cyan-400); }
[class~="hover:border-cyan-400/50"]:hover { border-color: rgb(34 211 238 / .50); }
[class~="hover:border-cyan-400/60"]:hover { border-color: rgb(34 211 238 / .60); }
[class~="hover:from-cyan-300"]:hover { --tw-gradient-from: var(--tw-cyan-300); }
[class~="hover:to-sky-300"]:hover { --tw-gradient-to: var(--tw-sky-300); }
[class~="hover:scale-[1.02]"]:hover { transform: scale(1.02); }
[class~="hover:-translate-y-1"]:hover { transform: translateY(-.25rem); }
.group:hover [class~="group-hover:opacity-40"] { opacity: .4; }

/* Lightweight pulse animations; they do not depend on a JS library. */
@keyframes nexarena-pulse { 50% { opacity: .45; } }
@keyframes nexarena-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
.animate-pulse { animation: nexarena-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-ping { animation: nexarena-ping 1s cubic-bezier(0,0,.2,1) infinite; }

::selection { background: var(--tw-cyan-500); color: #000; }

@media (min-width: 640px) {
  [class~="sm:px-6"] { padding-left: 1.5rem; padding-right: 1.5rem; }
  [class~="sm:p-7"] { padding: 1.75rem; }
  [class~="sm:p-8"] { padding: 2rem; }
  [class~="sm:p-9"] { padding: 2.25rem; }
  [class~="sm:p-12"] { padding: 3rem; }
  [class~="sm:text-sm"] { font-size: .875rem; line-height: 1.25rem; }
  [class~="sm:text-base"] { font-size: 1rem; line-height: 1.5rem; }
  [class~="sm:text-lg"] { font-size: 1.125rem; line-height: 1.75rem; }
  [class~="sm:text-2xl"] { font-size: 1.5rem; line-height: 2rem; }
  [class~="sm:text-3xl"] { font-size: 1.875rem; line-height: 2.25rem; }
  [class~="sm:text-4xl"] { font-size: 2.25rem; line-height: 2.5rem; }
  [class~="sm:text-5xl"] { font-size: 3rem; line-height: 1; }
  [class~="sm:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [class~="sm:w-auto"] { width: auto; }
}

@media (min-width: 768px) {
  [class~="md:flex-row"] { flex-direction: row; }
  [class~="md:items-center"] { align-items: center; }
  [class~="md:items-start"] { align-items: flex-start; }
  [class~="md:inline-flex"] { display: inline-flex; }
  [class~="md:grid-cols-2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [class~="md:grid-cols-3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  [class~="md:grid-cols-4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  [class~="lg:flex"] { display: flex; }
  [class~="lg:grid-cols-12"] { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  [class~="lg:col-span-5"] { grid-column: span 5 / span 5; }
  [class~="lg:col-span-7"] { grid-column: span 7 / span 7; }
  [class~="lg:gap-8"] { gap: 2rem; }
  [class~="lg:px-8"] { padding-left: 2rem; padding-right: 2rem; }
  [class~="lg:py-20"] { padding-top: 5rem; padding-bottom: 5rem; }
  [class~="lg:text-4xl"] { font-size: 2.25rem; line-height: 2.5rem; }
  [class~="lg:text-6xl"] { font-size: 3.75rem; line-height: 1; }
}

/* A narrow-screen safety net.  The page's design-specific rules remain in
   player.html; these rules prevent overflow even if a user has large system
   fonts or a very narrow viewport. */
@media (max-width: 620px) {
  .grid-cols-2 { grid-template-columns: 1fr; }
  .text-5xl { font-size: 2.5rem; }
  .text-6xl { font-size: 2.75rem; }
}