/* Bold gaming look: one dark theme, violet as the main light, cyan as the accent. */
/* Self-hosted (not loaded from Google's servers): no third-party request, so no IP address
   leaves LevelUp on page load and no cookie-consent banner is needed for it. */
@font-face { font-family:'Russo One'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/russo-one.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2019,U+2013,U+2014; }
:root { --bg:#0a0912; --panel:#141226; --panel-2:#1b1833; --line:#2a2650; --ink:#f1eeff; --muted:#a6a1c8; --violet:#7c5cff; --violet-solid:#704dff; --cyan:#27d9f5; --green:#3ddc97;
  --font-display:'Russo One', system-ui, sans-serif; }
/* visible only when focused: lets keyboard and screen-reader users jump past the nav */
.skip-link { position:absolute; left:12px; top:-60px; z-index:20; background:var(--cyan); color:#04222a; font-weight:800;
  padding:10px 16px; border-radius:8px; text-decoration:none; transition:top .15s ease; }
.skip-link:focus { top:12px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; color-scheme:dark; }
section[id] { scroll-margin-top:60px; } /* headings stay clear of the sticky header */
body { margin:0; font-family:system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); line-height:1.55; }
a { color:inherit; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; }
/* elements JS reveals as they scroll into view; without JS (or reduced motion) they just show */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }
.wrap { max-width:1040px; margin:0 auto; padding:64px 20px; }
.narrow { max-width:720px; }
.center { text-align:center; }
.muted { color:var(--muted); }
h1, h2 { text-wrap:balance; letter-spacing:-.01em; font-family:var(--font-display); }
h1 { font-size:clamp(2.1rem, 5.6vw, 3.6rem); line-height:1.12; margin:.3em 0 .4em; font-weight:700;
  text-shadow:0 0 34px rgba(124,92,255,.35); }
h1 em { font-style:normal; background:linear-gradient(90deg, var(--violet), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; }
h2 { font-size:clamp(1.5rem, 3.2vw, 2.1rem); margin:0 0 22px; font-weight:700; position:relative; padding-left:20px; }
h2::before { content:""; position:absolute; left:0; top:.22em; bottom:.22em; width:5px; border-radius:99px;
  background:linear-gradient(var(--violet), var(--cyan)); box-shadow:0 0 12px rgba(124,92,255,.6); }
/* centered headings (e.g. the closing CTA) have no left edge for the bar to sit against */
.center h2 { padding-left:0; }
.center h2::before { display:none; }
h3 { margin:.4em 0 .2em; }
p { margin:0 0 14px; }

.nav { position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 20px; background:rgba(10,9,18,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.logo { font-family:var(--font-display); font-size:1.15rem; letter-spacing:.03em; text-decoration:none; }
.logo span { color:var(--cyan); }
.nav nav { display:flex; align-items:center; gap:20px; font-size:.95rem; }
.nav nav a:not(.btn) { position:relative; text-decoration:none; color:var(--muted); padding-bottom:2px; }
.nav nav a:not(.btn)::after { content:""; position:absolute; left:0; right:100%; bottom:-3px; height:2px; border-radius:99px;
  background:linear-gradient(90deg, var(--violet), var(--cyan)); transition:right .2s ease; }
.nav nav a:not(.btn):hover { color:var(--ink); }
.nav nav a:not(.btn):hover::after { right:0; }
.nav nav a.btn { color:#fff; }
@media (prefers-reduced-motion:reduce) { .nav nav a::after { transition:none; } }

.btn { display:inline-block; position:relative; overflow:hidden; padding:13px 24px; border-radius:10px; background:var(--violet-solid); color:#fff; font-weight:700; text-decoration:none; border:1px solid var(--violet-solid); box-shadow:0 0 24px rgba(124,92,255,.45); transition:transform .15s, box-shadow .15s; }
.btn::after { content:""; position:absolute; inset:0; translate:-120% 0; background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transition:translate .5s ease; }
.btn:hover { transform:translateY(-2px); box-shadow:0 0 36px rgba(124,92,255,.75); }
.btn:hover::after { translate:120% 0; }
.btn.small { padding:7px 14px; box-shadow:none; }
/* the nav shows one of these two, decided before paint by the inline script in <head> (see the signed-in class) */
[data-auth="in"] { display:none; }
.signed-in [data-auth="out"] { display:none; }
.signed-in [data-auth="in"] { display:inline-flex; }
.btn.ghost { background:transparent; border-color:var(--line); box-shadow:none; color:var(--ink); }
.btn.ghost::after { display:none; }
.btn.ghost:hover { border-color:var(--cyan); box-shadow:0 0 22px rgba(39,217,245,.25); }
@media (prefers-reduced-motion:reduce) { .btn, .btn::after { transition:none; } }

/* hero: a dark gradient under a scatter of small gaming icons (public/hero-icons.js), over a slowly drifting neon grid and glow orbs */
.hero { position:relative; overflow:hidden; background:
  radial-gradient(900px 500px at 80% 0%, #3b22b8 0%, transparent 65%),
  linear-gradient(180deg, #100d28 0%, var(--bg) 100%); }
.hero-icons { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero::before { content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(340px 340px at 14% 82%, rgba(124,92,255,.35), transparent 70%),
    radial-gradient(280px 280px at 92% 30%, rgba(39,217,245,.28), transparent 70%);
  filter:blur(10px); animation:orbit 22s ease-in-out infinite alternate; }
.hero::after { content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(124,92,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(124,92,255,.14) 1px, transparent 1px);
  background-size:44px 44px; mask-image:linear-gradient(to bottom, transparent, #000 40%, transparent);
  animation:drift 34s linear infinite; }
@keyframes orbit { from { transform:translate(0,0) scale(1); } to { transform:translate(-3%, -4%) scale(1.06); } }
@keyframes drift { from { background-position:0 0, 0 0; } to { background-position:88px 44px, 88px 44px; } }
@media (prefers-reduced-motion:reduce) { .hero::before, .hero::after { animation:none; } }
.hero .wrap { position:relative; z-index:1; padding-top:88px; padding-bottom:80px; }
.hero-grid { display:grid; grid-template-columns:1.25fr .75fr; gap:40px; align-items:center; }
.hero-grid > * { min-width:0; }
.eyebrow { color:var(--cyan); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; margin:0; }
.lead { font-size:1.15rem; max-width:560px; color:var(--muted); }
.cta { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0; }
.trust-strip { display:flex; gap:10px; flex-wrap:wrap; list-style:none; padding:0; margin:0 0 22px; }
.trust-strip li { display:flex; align-items:center; gap:7px; padding:7px 14px; border-radius:99px; font-size:.82rem; font-weight:600;
  color:var(--ink); background:rgba(20,18,38,.75); border:1px solid var(--line); backdrop-filter:blur(4px); }
.trust-strip svg { width:15px; height:15px; flex:none; fill:none; stroke:var(--cyan); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.fine-print { font-size:.82rem; color:var(--muted); margin:-14px 0 22px; }
.chips { display:flex; gap:8px; flex-wrap:wrap; list-style:none; padding:0; margin:0; }
.chips li { padding:4px 12px; border:1px solid var(--line); border-radius:6px; font-size:.78rem; font-weight:700; letter-spacing:.08em; color:var(--muted); background:rgba(20,18,38,.7); }

.ticket { background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 0 60px rgba(124,92,255,.25); position:relative;
  animation:float 5s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@media (prefers-reduced-motion:reduce) { .ticket { animation:none; } }
.ticket-tag { position:absolute; top:-11px; right:16px; background:var(--cyan); color:#04222a; font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:3px 10px; border-radius:99px; }
.ticket-game { color:var(--cyan); font-weight:700; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; }
.ticket h3 { margin:.3em 0 .5em; font-size:1.15rem; }
.ticket-meta { display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:.85rem; margin-bottom:14px; }
.ticket-row { display:flex; justify-content:space-between; align-items:baseline; border-top:1px dashed var(--line); padding-top:12px; }
.ticket-row b { font-size:1.4rem; font-variant-numeric:tabular-nums; }
.ticket-status { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--green); margin:10px 0 14px; }
.ticket-status i { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); flex:none; animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity:1; } 50% { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .ticket-status i { animation:none; } }
.ticket-btn { text-align:center; padding:11px; border-radius:10px; background:var(--panel-2); border:1px solid var(--line); font-weight:700; }

.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; margin-bottom:24px; }
.card { border:1px solid var(--line); border-radius:14px; padding:16px; background:var(--panel); transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card:hover { transform:translateY(-3px); border-color:var(--violet); box-shadow:0 10px 34px rgba(124,92,255,.22); }
.card .tag { display:inline-block; font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:6px; background:var(--panel-2); color:var(--cyan); }
.card .price { font-weight:800; font-size:1.15rem; margin-top:8px; }

.steps { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; }
.steps li { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px; min-width:0; transition:transform .2s ease, border-color .2s ease; }
.steps li:hover { transform:translateY(-3px); border-color:var(--violet); }
.steps span { display:inline-grid; place-items:center; width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg, var(--violet), #5b3fe0); color:#fff; font-weight:800; box-shadow:0 0 18px rgba(124,92,255,.5); }
.steps p { margin:0; color:var(--muted); }

.band { background:var(--panel); border-block:1px solid var(--line); }
.flow { display:flex; align-items:stretch; gap:10px; margin:0 0 28px; }
.node { flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.node b { display:block; font-size:1.05rem; }
.node span { color:var(--muted); font-size:.85rem; }
.node.hold { border-color:var(--cyan); box-shadow:0 0 26px rgba(39,217,245,.25); }
.arrow { flex:none; align-self:center; width:34px; height:2px; background:linear-gradient(90deg, var(--violet), var(--cyan)); position:relative; }
.arrow::after { content:""; position:absolute; right:-1px; top:-4px; border:5px solid transparent; border-left:8px solid var(--cyan); }

.two { display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.two > * { min-width:0; }
.ticks { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:12px; }
.ticks li { padding-left:30px; position:relative; }
.ticks li::before { content:"\2713"; position:absolute; left:0; top:0; color:var(--cyan); font-weight:800; }

/* games */
.section-lead { max-width:680px; margin:-8px 0 26px; font-size:1.05rem; }
.genres { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.genre { display:flex; flex-direction:column; gap:4px; min-width:0; padding:16px; border-radius:14px; border:1px solid var(--line); background:var(--bg); text-decoration:none; transition:border-color .15s, transform .15s, box-shadow .15s; }
.genre:hover { border-color:var(--violet); transform:translateY(-3px); box-shadow:0 10px 28px rgba(124,92,255,.2); }
.genre b { font-size:1.02rem; }
.genre small { color:var(--cyan); font-weight:700; font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; min-height:1em; }
.genre span { color:var(--muted); font-size:.88rem; }
.genre.mobile { grid-column:1 / -1; border-color:rgba(39,217,245,.55); background:linear-gradient(120deg, rgba(124,92,255,.18), rgba(39,217,245,.12)), var(--bg); box-shadow:0 0 30px rgba(39,217,245,.14); }
.genre.mobile b { font-size:1.2rem; }

/* coach levels */
.levels { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-bottom:28px; }
.level { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:18px; min-width:0; transition:transform .2s ease, box-shadow .2s ease; }
.level:hover { transform:translateY(-3px); box-shadow:0 10px 28px rgba(124,92,255,.18); }
.level b { display:block; margin:12px 0 4px; font-size:1.1rem; font-variant-numeric:tabular-nums; }
.level p { margin:0; color:var(--muted); font-size:.9rem; }
.level-pill { display:inline-block; padding:3px 10px; border-radius:6px; font-size:.75rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border:1px solid; }
.level-pill.l1 { color:#9fe8c4; border-color:rgba(61,220,151,.45); background:rgba(61,220,151,.08); }
.level-pill.l2 { color:#8fe9fb; border-color:rgba(39,217,245,.45); background:rgba(39,217,245,.08); }
.level-pill.l3 { color:#c6b8ff; border-color:rgba(124,92,255,.6); background:rgba(124,92,255,.14); }
.level-pill.l4 { color:#ffd98a; border-color:rgba(255,200,87,.6); background:rgba(255,200,87,.1); box-shadow:0 0 16px rgba(255,200,87,.2); }
.notes { align-items:start; gap:28px; }
.notes h3 { margin-top:0; }
.notes p { margin:0; }
.ticks.two-col { grid-template-columns:1fr 1fr; column-gap:32px; }

/* app: a phone lock screen with example notifications */
.phone { justify-self:center; width:100%; max-width:300px; aspect-ratio:9/17; border-radius:38px; padding:26px 14px; border:1px solid var(--line);
  background:radial-gradient(260px 260px at 30% 20%, rgba(124,92,255,.45), transparent 70%), radial-gradient(240px 240px at 80% 80%, rgba(39,217,245,.3), transparent 70%), #0d0b1c;
  box-shadow:0 0 0 6px #19162e, 0 0 60px rgba(124,92,255,.3); display:flex; flex-direction:column; gap:10px; }
.phone-time { text-align:center; font-size:3.2rem; font-weight:800; line-height:1; margin-top:14px; letter-spacing:-.02em; }
.phone-date { text-align:center; color:var(--muted); margin-bottom:18px; }
.notif { background:rgba(27,24,51,.86); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:16px; padding:10px 12px; display:grid; gap:2px; font-size:.86rem; }
.notif.dim { opacity:.7; }
.notif span { color:#d8d3f0; }
.notif-head { display:flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.08em; color:var(--muted); margin-bottom:2px; }
.notif-head .muted { margin-left:auto; letter-spacing:0; }
.notif-icon { width:16px; height:16px; border-radius:4px; background:url(/icons/icon.svg) center/cover; }
.center-row { justify-content:center; margin-bottom:0; }

/* image slots: photo if the file exists, neon gradient otherwise */
.art { border-radius:18px; border:1px solid var(--line); min-height:300px; aspect-ratio:4/3; background-size:cover; background-position:center; box-shadow:0 0 50px rgba(124,92,255,.22); }
.art.globe { aspect-ratio:1/1; max-width:420px; margin-inline:auto; width:100%; background:url(/img/globe.webp) center/cover no-repeat, radial-gradient(circle at 50% 45%, #2c1f7a 0%, #120f2b 55%, var(--bg) 100%); }
.art.coach { background:url(/img/coach.webp) center/cover no-repeat, linear-gradient(135deg, #2b1c78 0%, #0f5e72 100%); }

details { border-bottom:1px solid var(--line); padding:16px 0; }
summary { cursor:pointer; font-weight:700; }
details p { color:var(--muted); margin:8px 0 0; }

.closing { background:radial-gradient(700px 300px at 50% 0%, #34209b 0%, transparent 70%), var(--panel); border-top:1px solid var(--line); }
footer { border-top:1px solid var(--line); font-size:.85rem; }
footer .wrap { padding:20px; }
.row { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }

/* legal pages */
.legal { max-width:760px; }
.legal h1 { font-size:clamp(1.9rem, 5vw, 2.6rem); }
.legal h2 { font-size:1.2rem; margin:32px 0 10px; }
.legal p, .legal li { color:#d8d3f0; }
.legal ul { padding-left:20px; display:grid; gap:6px; }
.legal a { color:var(--cyan); }
.draft { border:1px solid rgba(255,200,87,.5); background:rgba(255,200,87,.08); color:#ffc857 !important; border-radius:10px; padding:10px 14px; font-size:.9rem; }
footer a { color:var(--muted); }

/* a slim bar pinned to the bottom on phones, so the main call to action is always one tap away
   without the visitor having to scroll back up. Appears once the hero has scrolled out of view
   (toggled by site.js), and sits clear of the home-indicator area on notched phones. */
.sticky-cta { display:none; }
@media (max-width:820px) {
  .hero-grid, .two { grid-template-columns:1fr; }
  .nav nav a:not(.btn) { display:none; }
  .hero .wrap { padding-top:56px; padding-bottom:52px; }
  .flow { flex-direction:column; }
  .arrow { width:2px; height:22px; align-self:center; background:linear-gradient(var(--violet), var(--cyan)); }
  .arrow::after { right:auto; top:auto; bottom:-1px; left:-4px; border:5px solid transparent; border-top:8px solid var(--cyan); border-left-color:transparent; }
  .art { min-height:220px; }
  .ticks.two-col { grid-template-columns:1fr; }
  .phone { max-width:260px; }
  .sticky-cta { position:fixed; left:0; right:0; bottom:0; z-index:6; display:flex; gap:10px;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(10,9,18,.92);
    backdrop-filter:blur(10px); border-top:1px solid var(--line);
    transform:translateY(120%); transition:transform .25s ease; }
  .sticky-cta.show { transform:translateY(0); }
  .sticky-cta .btn { flex:1; text-align:center; padding:12px 16px; white-space:nowrap; }
  .sticky-cta .btn.ghost.small { flex:.6; padding:12px 10px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .btn, .genre, .sticky-cta { transition:none; } }

/* language picker and right-to-left languages (Arabic, Urdu) */
.lang-switch { font:inherit; font-size:.9rem; color:var(--ink); background:transparent; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:6px 8px; max-width:9.5rem; cursor:pointer; }
.lang-switch option { color:#111; background:#fff; }
.lang-switch:focus-visible { outline:2px solid #7c5cff; outline-offset:2px; }
[dir="rtl"] .nav nav a:not(.btn)::after { left:auto; right:0; }
[dir="rtl"] .nav nav a:not(.btn):hover::after { right:0; left:100%; }

/* longer words in some languages: let the menu wrap instead of running off the page */
.nav nav { flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; }
.nav nav a { white-space:nowrap; }