:root{
  --bg0:#070614;
  --bg1:#120829;
  --bg2:#250a4a;
  --bg3:#3b0f6a;
  --text:#f6f4ff;
  --muted:rgba(246,244,255,.74);
  --glass:rgba(255,255,255,.08);
  --glass2:rgba(255,255,255,.12);
  --stroke:rgba(255,255,255,.18);
  --stroke2:rgba(255,255,255,.28);
  --shadow:0 30px 70px rgba(0,0,0,.55);
  --shadow2:0 18px 40px rgba(0,0,0,.35);
  --radius:24px;
  --radius2:18px;
  --brand:#8b5cf6;
  --brand2:#a78bfa;
  --accent:#c4b5fd;
}
*{box-sizing:border-box}
html{color-scheme:dark; scroll-behavior:smooth}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg0);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* Global fixed tint (prevents color banding while scrolling) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-4;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 15% 20%, rgba(139,92,246,.34), transparent 58%),
    radial-gradient(1100px 800px at 85% 18%, rgba(167,139,250,.24), transparent 56%),
    radial-gradient(1200px 900px at 55% 85%, rgba(34,211,238,.09), transparent 60%),
    radial-gradient(900px 700px at 45% 55%, rgba(251,113,133,.08), transparent 64%);
}

/* Disable selection / context menu intent */
body, img, a, button{ -webkit-tap-highlight-color: transparent; }
.noselect, body{
  -webkit-user-select:none; user-select:none;
}
input, textarea{ -webkit-user-select:text; user-select:text; }

#bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:-2; pointer-events:none;
  opacity:.9;
}
#bg-glow{
  position:fixed; inset:-30%;
  background: conic-gradient(from 180deg at 50% 50%,
    rgba(139,92,246,.35),
    rgba(167,139,250,.18),
    rgba(99,102,241,.22),
    rgba(139,92,246,.35));
  filter: blur(60px);
  z-index:-3;
  opacity:.55;
  animation: spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg)} }

a{color:inherit; text-decoration:none}
a.underline{text-decoration:underline; text-underline-offset:3px}
.container{width:min(1180px, 92%); margin:0 auto}
header{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(9,6,22,.78), rgba(9,6,22,.48));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding: max(14px, env(safe-area-inset-top)) 0 14px;
  gap:14px;
}
.brand{
  display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px;
}
.brand-dot{
  width:22px;
  height:22px;
  border-radius:7px;
  background: image-set(url('/assets/img/favicon.webp') type('image/webp'), url('/assets/img/favicon.png') type('image/png')) center/cover no-repeat;
  box-shadow:0 0 0 4px rgba(139,92,246,.14), 0 0 26px rgba(139,92,246,.50);
  flex: 0 0 auto;
}
.brand-logo{
  width:22px;
  height:22px;
  border-radius:7px;
  box-shadow: 0 0 22px rgba(167,139,250,.45);
  flex: 0 0 auto;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand:hover{opacity:1}

nav{
  display:flex; gap:22px; align-items:center;
}
nav a{opacity:.88}
nav a:hover{opacity:1}
.nav-right{display:flex; gap:12px; align-items:center}
.pill{
  display:inline-block;
  line-height:1;
  margin:0 0 12px 0;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

select.lang{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:var(--text);
  outline:none;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07);
  color:var(--text);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{transform: translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.45)}
.btn.primary{
  background: linear-gradient(135deg, rgba(139,92,246,.95), rgba(167,139,250,.78));
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 50px rgba(139,92,246,.30);
}
.btn.primary:hover{box-shadow:0 16px 60px rgba(139,92,246,.40)}
.btn.glow{
  position:relative;
}
.btn.glow:after{
  content:"";
  position:absolute; inset:-2px;
  border-radius:999px;
  background: radial-gradient(120px 50px at 30% 40%, rgba(255,255,255,.35), transparent 60%),
              radial-gradient(140px 60px at 80% 60%, rgba(167,139,250,.40), transparent 65%);
  filter: blur(10px);
  opacity:.0;
  transition: opacity .18s ease;
  z-index:-1;
}
.btn.glow:hover:after{opacity:1}

.menu-btn{display:none}
.drawer-backdrop{
  position:fixed; inset:0; z-index:80;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.drawer{
  position:fixed; top:0; right:0; left:auto; height:100%;
  width:86vw; max-width:360px;
  z-index:90;
  transform: translateX(110%);
  transition: transform .24s ease;
  background: linear-gradient(180deg, rgba(18,8,41,.92), rgba(7,6,20,.92));
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
  display:block;
}

html[dir="rtl"] html[dir="rtl"] .drawer{
  right:auto;
  left:0;
  border-left:0;
  border-right:1px solid rgba(255,255,255,.12);
  transform: translateX(-110%);
}
html[dir="rtl"] ..drawer-toggle:checked ~ .drawer{
  transform: translateX(0) !important;
}

.drawer.open{transform: translateX(0)}
.drawer-backdrop.open{opacity:1; pointer-events:auto}
.drawer a{display:block; padding:14px 12px; border-radius:14px; opacity:.92}
.drawer a:hover{background:rgba(255,255,255,.06); opacity:1}
.drawer .row{display:flex; gap:10px; margin-top:10px}
.drawer .row .btn{width:100%}

main{padding: 34px 0 70px}
.hero{
  display:grid; grid-template-columns: 1.15fr .85fr;
  gap:22px;
  align-items:stretch;
}
.panel{
  border-radius: calc(var(--radius) + 10px);
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.panel-inner{padding: 26px 26px 22px}
.kicker{
  display:inline-flex; gap:10px; align-items:center;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
  font-weight:700;
  font-size:13px;
}
h1{font-size: clamp(34px, 4.2vw, 54px); line-height:1.02; margin:14px 0 12px; letter-spacing:-.6px}
h2{font-size: clamp(22px, 2.2vw, 30px); margin:0 0 12px}
p{color:var(--muted); margin:0 0 12px; line-height:1.65}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 18px}
.badge{
  padding:8px 10px;
  border-radius:999px;
  border:1px dashed rgba(255,255,255,.18);
  background: transparent;
  color:rgba(255,255,255,.78);
  font-weight:600;
  font-size:12px;
  letter-spacing:.2px;
  cursor:default;
  user-select:none;
}
.cta-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.small-note{font-size:12px; opacity:.75; margin-top:10px}

.hero-media{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  min-height: 360px;
  background: radial-gradient(900px 600px at 60% 30%, rgba(139,92,246,.30), transparent 60%),
              radial-gradient(700px 500px at 20% 75%, rgba(167,139,250,.18), transparent 60%),
              linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
}
.hero-media .frame{
  width:min(420px, 92%);
  transform: perspective(900px) rotateY(-12deg) rotateX(6deg);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.55));
  transition: transform .35s ease;
}
.hero-media:hover .frame{
  transform: perspective(900px) rotateY(-7deg) rotateX(4deg) translateY(-6px);
}
.hero-media:before{
  content:"";
  position:absolute; inset:-40%;
  background: radial-gradient(circle at 30% 40%, rgba(255,255,255,.14), transparent 55%),
              radial-gradient(circle at 75% 60%, rgba(139,92,246,.22), transparent 60%);
  filter: blur(34px);
  opacity:.7;
}

.section{
  margin-top:28px;
}
.section .panel{transition: transform .22s ease, box-shadow .22s ease}
.section .panel:hover{transform: translateY(-6px); box-shadow:0 38px 90px rgba(0,0,0,.55)}
.grid-3{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  padding:18px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0; font-size:14px}

.alt{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
  align-items:stretch;
}
.bleed{
  position:relative;
  overflow:hidden;
  min-height: 300px;
}
.bleed .bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.06);
}
.bleed .bg:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(7,6,20,.80), rgba(7,6,20,.25));
}
.bleed .content{
  position:relative;
  padding:22px;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
}
.table th,.table td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.10);
  text-align:left;
  font-size:14px;
}
.table th{color:rgba(255,255,255,.9); font-weight:750; background: rgba(255,255,255,.06)}
.table tr:last-child td{border-bottom:none}

.footer{
  margin-top:38px;
  padding: 22px 0 max(22px, env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,.10);
  background: transparent;
  backdrop-filter: none;
}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap}
.social{display:flex; gap:10px; align-items:center}
.icon-btn{
  width:44px; height:44px; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.icon-btn:hover{transform: translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.45)}
.icon{width:18px; height:18px; opacity:.92}

@media (max-width: 980px){
  nav{display:none}
  .menu-btn{display:inline-flex}
  .hero{grid-template-columns:1fr}
  .hero-media{min-height: 280px}
  .grid-3{grid-template-columns:1fr}
  .alt{grid-template-columns:1fr}
  header .header-inner{padding-left:0; padding-right:0}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* === V15 adjustments === */
/* Hero: remove glass card feel on media; keep layout */
.hero-media{ background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.hero-media .frame{ filter: drop-shadow(0 30px 60px rgba(0,0,0,.55)); }

/* Hero copy: subtle blurred hero image behind text */
.hero .panel:not(.hero-media){
  position: relative;
  overflow: hidden;
}
.hero .panel:not(.hero-media)::before{
  content:"";
  position:absolute; inset:-30px;
  background: image-set(url('/assets/img/hero.webp') type('image/webp'), url('/assets/img/hero.webp') type('image/png')) center/cover no-repeat;
  filter: blur(10px) brightness(.72) saturate(.95);
  opacity: .28;
  transform: scale(1.08);
  pointer-events:none;
}
.hero .panel:not(.hero-media) > *{ position:relative; z-index:1; }

/* Slight blur on all photos (content images) */
.panel img.frame,
.section img,
.card img,
.media img,
.gallery img,
img.photo,
img.media-img,
img.bg-img,
.hero-media img,
.features img,
.tiles img,
figure img,
picture img{
  filter: blur(1.2px) brightness(.88) saturate(.96) drop-shadow(0 24px 50px rgba(0,0,0,.45));
  transform: translateZ(0);
}


/* Global image softening for readability */
img{filter: blur(2px) brightness(.88); opacity:.95;}
img.no-blur{filter:none !important; opacity:1 !important;}

.hero .panel{position:relative}
.hero .panel::before{content:"";position:absolute;inset:-22px;background:image-set(url('/assets/img/hero.webp') type('image/webp'), url('/assets/img/hero.webp') type('image/png')) center/cover no-repeat;filter:blur(10px) brightness(.75);opacity:.45;transform:scale(1.06);z-index:0;}
.hero .panel > *{position:relative;z-index:1}

.brand-icon{display:inline-block;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 10px 24px rgba(0,0,0,.35);}


/* Desktop hero centering fix */
@media (min-width: 1024px) {
  .hero,
  .hero-content,
  .hero-inner {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero {
    display: flex;
    justify-content: center;
  }

  .hero-content {
    width: 100%;
  }
}


/* --- Mobile drawer: CSS toggle fallback (works without JS) --- */
.drawer-toggle{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; overflow:hidden !important; pointer-events:none !important; -webkit-appearance:none !important; appearance:none !important;}
/* Use sibling selectors: input + ... + backdrop + drawer */
.drawer-toggle:checked ~ .drawer-backdrop{opacity:1; pointer-events:auto;}
..drawer-toggle:checked ~ .drawer{transform: translateX(0);}



/* === Drawer (mobile menu) - definitive fix (JS toggles .drawer-open on <body>) === */
.drawer-backdrop{
  position:fixed; inset:0; z-index:80;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  opacity:0; pointer-events:none;
  transition: opacity .2s ease;
}
.drawer{
  position:fixed; top:0; bottom:0;
  right:0; left:auto;
  width:86vw; max-width:360px;
  z-index:90;
  transform: translate3d(110%,0,0);
  transition: transform .24s ease;
  background: linear-gradient(180deg, rgba(18,8,41,.92), rgba(7,6,20,.92));
  border-left:1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 16px 18px 18px;
  display:block;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}
html[dir="rtl"] .drawer{
  left:0; right:auto;
  border-left:0;
  border-right:1px solid rgba(255,255,255,.12);
  transform: translate3d(-110%,0,0);
}

body.drawer-open .drawer-backdrop{
  opacity:1; pointer-events:auto;
}
body.drawer-open .drawer{
  transform: translate3d(0,0,0) !important;
}

.drawer a{display:block; padding:14px 12px; border-radius:14px; opacity:.92}
.drawer a:hover{background:rgba(255,255,255,.06); opacity:1}





/* Justified body text */
main p,
main li,
footer p,
footer li{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}



/* --- Added: glass utility (was used in HTML but not styled) --- */
.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

/* --- Added: teaser card layout (Gaming Hosts teaser) --- */
.section.teaser{ margin-top: 18px; }
.teaser-card{
  border-radius: var(--radius2);
  padding: 18px 18px 16px;
  max-width: 980px;
  margin: 0 auto;
}
.teaser-card .pill{
  display:inline-flex;
  margin: 0 0 12px 0;
}
.teaser-card h2{ margin: 0 0 10px; }
.teaser-card p{ margin: 0; }

/* --- Added: Coming soon label used on /host pages --- */
.coming{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);
  font-weight:700;
  font-size:13px;
  margin: 0 0 12px;
}

/* --- Added: background rotator for Gaming Live Hosts section --- */
.bg-rotator{
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.06); /* keep glass tone when images not loaded */
}
.bg-rotator .bg-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.06);
  filter: saturate(1.05) contrast(1.05);
  opacity:0;
  transition: opacity 1.2s ease;
  z-index:0;
}
.bg-rotator .bg-slide.active{ opacity:.55; }
.bg-rotator .bg-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(7,6,20,.80), rgba(7,6,20,.35));
  z-index:1;
}
.bg-rotator > *{
  position:relative;
  z-index:2;
}

/* Gaming section spacing */
#gamingLiveHosts{ padding:22px; }
#gamingLiveHosts h2{ margin-top:0; }