:root{
  --bg:#0b0f16; --text:#e6eaf2; --muted:#9fb1c9; --border:#223046;
}
*{box-sizing:border-box}

/* Typography: Cinzel (titles) + Merriweather (body) */
body{font-family:"Merriweather", system-ui,-apple-system, Segoe UI, Roboto, Inter, Ubuntu, "Helvetica Neue", Arial, sans-serif}
h1,h2,h3,.brand.mark,.classic-title,.scene-title{font-family:"Cinzel","Merriweather",serif}
a{color:#e1a81c}

html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,'Helvetica Neue',Arial,sans-serif;line-height:1.5}
img{max-width:100%;display:block}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:48px 0}
.wiki-container{margin:0 auto;padding:0 10px}
.wiki-section{padding:1px 0}
.center{text-align:center}
.muted{color:var(--muted)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.card{background:rgb(16 20 27 / 88%);border:1px solid rgba(255,255,255,.08);border-radius:10px;backdrop-filter:blur(4px)}
.p-xl{padding:22px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.7rem 1.1rem;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--text);text-decoration:none}
.btn:hover{background:rgba(255,255,255,.12)}
/* Header classic */
.classic-nav{background:linear-gradient(180deg, rgba(12,16,24,.98), rgba(12,16,24,.92));border-bottom:1px solid rgba(0,0,0,.25)}
.classic-nav-row{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px}
.classic-nav .brand.mark{font-weight:900;letter-spacing:.3px;font-size:1.1rem;color:#bfe3ff;text-decoration:none}
.classic-nav .menu{list-style:none;display:flex;gap:24px;margin:0;padding:0}
.classic-nav .menu a{color:#8ea0bd;text-decoration:none}
.classic-nav .menu a:hover{color:#fff}
.classic-nav .tools{display:flex;align-items:center;gap:12px}
.classic-nav .tools .tiny{font-size:.9rem;color:#8ea0bd;text-decoration:none}
.classic-nav .tools .sep{color:#6c7a95;opacity:.6}
.cta-play{display:inline-flex;align-items:center;justify-content:center;padding:14px 22px;border-radius:4px;margin-left:10px;background:linear-gradient(180deg,#f7d14a,#d99a0c);color:#1a1406;font-weight:800;text-transform:uppercase;letter-spacing:.4px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 6px 18px rgba(0,0,0,.35);text-decoration:none}
.cta-play:hover{filter:brightness(1.05)}
/* Hero */
.classic-hero{position:relative;min-height:88svh;display:grid;align-items:start;justify-items:center;background-size:cover;background-position:center}
.classic-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.60),rgba(0,0,0,.20) 30%,rgba(0,0,0,.65));pointer-events:none}
.classic-hero .container{position:relative;z-index:1;text-align:center}
.classic-title{font-size:clamp(2.6rem,6vw + 1rem,4.5rem);letter-spacing:.08em;text-transform:uppercase;font-weight:800;color:#e9edf6;text-shadow:0 2px 10px rgba(0,0,0,.5);margin-bottom:1rem}
.classic-sub{max-width:920px;margin:0 auto 24px;font-size:clamp(1.05rem,1.6vw,1.35rem);color:#d8dde7}
.framed-video{width:min(920px,92vw);aspect-ratio:16/9;margin:10px auto 0;border:8px solid rgba(0,0,0,.35);box-shadow:0 10px 50px rgba(0,0,0,.55);background:#000;border-radius:6px;overflow:hidden}
/* Scenes */
.classic-scene{position:relative;min-height:88svh;display:grid;align-items:start;justify-items:center;background-size:cover;background-position:center}
.classic-scene .scene-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 30%, rgba(0,0,0,.65))}
.classic-scene .scene-center{position:relative;z-index:1;text-align:center}
.scene-title{font-size:clamp(2rem, 5vw + 1rem, 4.4rem);color:#f2f4f8;text-shadow:0 2px 14px rgba(0,0,0,.6);font-weight:800;letter-spacing:.02em}
.scene-sub{max-width:980px;margin:16px auto 0;font-size:clamp(1.05rem, 1.2vw, 1.35rem);color:#e6e9f0;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.classic-scene.cta .follow{color:#fff;margin:28px 0 12px;font-size:clamp(1.2rem, 1.6vw, 1.6rem);letter-spacing:.08em;text-transform:uppercase}
.social{display:flex;gap:18px;justify-content:center}
.soc{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2)}
.soc svg{width:22px;height:22px;fill:#fff;opacity:.9}
.classic-scene .cta-play.big{font-size:clamp(1rem,1.4vw,1.2rem);padding:18px 36px}
/* Layout helpers */
.site-footer{padding:24px 0;border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
@media (max-width:900px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.classic-nav-row{flex-wrap:wrap;gap:10px}.classic-nav .menu{gap:14px;flex-wrap:wrap}.cta-play{width:100%;justify-content:center}}


/* Animated background layers */
.classic-hero, .classic-scene{ overflow:hidden; }
.classic-hero .bg, .classic-scene .bg{
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  transform: scale(1.08); opacity:0; transition: transform 1800ms ease, opacity 1000ms ease;
  will-change: transform, opacity;
}
.classic-hero.is-visible .bg, .classic-scene.is-visible .bg{
  transform: scale(1); opacity:1;
}
.classic-hero .classic-hero-overlay, .classic-scene .scene-overlay{
  opacity:0; transition: opacity 900ms ease 150ms;
}
.classic-hero.is-visible .classic-hero-overlay, .classic-scene.is-visible .scene-overlay{
  opacity:1;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  .classic-hero .bg, .classic-scene .bg{ transition:none; transform:none; opacity:1; }
  .classic-hero .classic-hero-overlay, .classic-scene .scene-overlay{ transition:none; opacity:1; }
}

.classic-hero .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;     /* hace que el video “cubra” el área */
  object-position: center;
  z-index: 0;
  pointer-events: none;  /* no tapa clics del contenido */
}


/* Framed YouTube with overlay frame + sprite play button */
.framed-video{background:none;border:none;box-shadow:none}
.video-wrap{position:relative;width:min(620px,92vw);aspect-ratio:16/9;margin:10px auto 0}
.video-wrap .yt{position:absolute;inset:0;width:100%;height:100%}
.video-wrap .video-frame{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  image-rendering:auto;
}
.video-play{
  position:absolute; inset:auto; left:50%; top:50%; transform:translate(-50%,-50%);
  width:72px; height:72px; border:0; border-radius:50%;
  background: transparent url('images/classic-pre-order-video-play-icon.png') no-repeat 0 0 / 200% 100%;
  cursor:pointer; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5));
  transition: transform .15s ease;
}
.video-play:hover{ background-position: 100% 0; transform: translate(-50%,-50%) scale(1.05); }
.video-wrap.is-playing .video-play{ display:none; }

/* Accessibility helper */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* spacing tweaks for hero */
.classic-hero{ padding-top: clamp(32px, 6vh, 80px); padding-bottom: 40px; min-height: 82svh; }
.classic-title{ margin-bottom: .6rem; }
.classic-sub{ margin: 0 auto 16px; }
.framed-video{ margin: 6px auto 0; }


/* --- Hero visibility hardening --- */
.classic-hero{ background-image: url('images/hero-main.jpg'); background-size:cover; background-position:center; }
.classic-hero .bg{ z-index:0; }
.classic-hero .classic-hero-overlay{ z-index:1; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15) 35%, rgba(0,0,0,.60)); }
.classic-hero .container{ z-index:2; }
.classic-hero{ padding-top: clamp(16px, 4vh, 56px); padding-bottom: 32px; }

/* restore centered alignment for scenes */
.classic-scene{ align-items:center; justify-items:center; }
.classic-scene .bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* cubre todo el contenedor */
  object-position: center;
  z-index: 0;
  pointer-events: none;   /* no bloquea clics del contenido */
}

/* hero height & spacing tuning */
.classic-hero{ min-height: 90svh; padding-bottom: 56px; }
.classic-scene{ min-height: 88svh; }


/* ===== Page heroes ===== */
.page-hero{ position:relative; min-height: 50svh; display:grid; place-items:center; overflow:hidden; }
.page-hero .bg{ position:absolute; inset:-8%; background-size:cover; background-position:center; transform:scale(1.08); opacity:0; transition: transform 1600ms ease, opacity 900ms ease; }
.page-hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.20) 35%, rgba(0,0,0,.70)); opacity:0; transition:opacity 800ms ease 150ms; }
.page-hero .inner{ position:relative; z-index:1; text-align:center; padding: clamp(24px, 4vh, 48px) 0; }
.page-hero .title{ font-size: clamp(2rem, 5vw + .5rem, 4rem); letter-spacing:.06em; text-transform:uppercase; color:#eef1f7; text-shadow:0 2px 12px rgba(0,0,0,.55); margin:0 0 .4rem; font-family:"Cinzel","Merriweather",serif; }
.page-hero .sub{ max-width: 900px; margin:0 auto; color:#dfe5f0; }
.page-hero.is-visible .bg{ transform:scale(1); opacity:1; }
.page-hero.is-visible .overlay{ opacity:1; }

/* ===== Pretty cards ===== */
.card + .card {
  margin-top: 10px;   /* probá 16–24px a gusto */
}
.card.fx{ position:relative; transition: transform .25s ease, box-shadow .25s ease; }
.card.fx:hover{ transform: translateY(-6px); box-shadow: 0 14px 50px rgba(0,0,0,.35); }
.card.gold-border{ border:1px solid rgba(255,215,130,.35); box-shadow: inset 0 0 0 1px rgba(255,220,150,.15); background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); }
.badge{ display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .6rem; border-radius:999px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:.85rem; }
.icon{ width:22px; height:22px; opacity:.9 }
.grid-3-auto{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
@media (max-width:900px){ .grid-3-auto{ grid-template-columns:1fr; } }


/* ===== Dropdown menus in header ===== */
.main-menu{ display:flex; gap:24px; align-items:center; }
.has-menu{ position:relative; }
.menu-toggle{ background:none; border:0; color:#8ea0bd; cursor:pointer; font:inherit; padding:.4rem .2rem; }
.menu-toggle:hover{ color:#fff; }
.has-menu .dropdown{
  position:absolute; top:calc(100% + 10px); left:0; min-width:240px;
  background: rgba(15,20,28,.98); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:8px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
  opacity:0; transform: translateY(8px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 20;
}
.has-menu.open .dropdown, .has-menu:focus-within .dropdown{
  opacity:1; transform: translateY(0); pointer-events:auto;
}
.has-menu .dropdown a{
  display:block; padding:10px 12px; border-radius:8px; white-space:nowrap;
  color:#cfd9ea; text-decoration:none;
}
.has-menu .dropdown a:hover{ background:rgba(255,255,255,.06); color:#fff; }
/* Hover open on desktop */
@media (hover:hover){
  .has-menu:hover > .menu-toggle{ color:#fff; }
  .has-menu:hover{ }
}
@media (max-width: 900px){
  .main-menu{ gap:14px; flex-wrap:wrap; }
  .has-menu .dropdown{ position: absolute; left:auto; right:0; }
}


/* ===== Mobile nav (<= 900px) ===== */
.hamburger{ display:none; width:42px; height:42px; border:0; background:transparent; padding:8px; border-radius:10px; }
.hamburger span{ display:block; height:2px; background:#cfe0ff; margin:6px 0; transform-origin:left center; transition:transform .18s ease, opacity .18s ease; }
.hamburger.is-open span:nth-child(1){ transform: rotate(42deg) translateY(-1px); }
.hamburger.is-open span:nth-child(2){ opacity:0; transform: translateX(6px); }
.hamburger.is-open span:nth-child(3){ transform: rotate(-42deg) translateY(1px); }

.mobile-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:49; backdrop-filter: blur(2px); opacity:0; transition: opacity .2s ease; }
.mobile-scrim.show{ opacity:1; }

.mobile-drawer{ position:fixed; top:0; right:0; width:min(88vw,420px); height:100svh; background:linear-gradient(180deg,#0d1118,#0a0e15);
  border-left:1px solid rgba(255,255,255,.08); box-shadow: -20px 0 40px rgba(0,0,0,.45);
  transform: translateX(100%); transition: transform .22s ease; z-index:50; display:flex; flex-direction:column;
}
.mobile-drawer.open{ transform: translateX(0); }
.mobile-head{ display:flex; align-items:center; justify-content:space-between; padding:16px; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-close{ border:0; background:transparent; color:#cfe0ff; font-size:20px; padding:6px 8px; border-radius:8px; }
.mobile-body{ padding:10px 14px 22px; display:flex; flex-direction:column; gap:6px; overflow:auto; }
.mobile-body a{ display:block; padding:12px 12px; border-radius:10px; color:#dfebff; text-decoration:none; border:1px solid transparent; }
.mobile-body a:hover{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.08); }
.mobile-acc{ border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:6px; }
.mobile-acc > summary{ cursor:pointer; list-style:none; padding:10px 10px; border-radius:10px; color:#e7f0ff; }
.mobile-acc[open] > summary{ background:rgba(255,255,255,.05); }
.mobile-acc > a{ margin:4px 6px; }
.mobile-lang{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid rgba(255,255,255,.08); border-radius:10px; color:#cfe0ff; }

.cta-play.block{ display:flex; justify-content:center; margin-top:8px; }

/* Mobile switches */
@media (max-width: 900px){
  .hamburger{ display:inline-flex; }
  .main-menu, .tools{ display:none; }
}

.no-scroll, .no-scroll body{ overflow:hidden; }

/* --- Mobile hamburger visibility hardening --- */
@media (max-width:900px){
  .classic-nav-row{ position:relative; }
  .hamburger{ display:inline-flex !important; position:relative; z-index:51; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); }
  .hamburger span{ background:#e6f0ff; }
  .main-menu, .tools{ display:none !important; }
  .brand.mark{ margin-inline:auto; }
}


/* === Sticky header + golden hamburger (mobile) === */
.classic-nav{ position:sticky; top:0; z-index:60; transition: background .2s ease, border-color .2s ease, backdrop-filter .2s ease; }
.classic-nav.scrolled{ background:rgba(10,14,21,.75); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }

@media (max-width:900px){
  .classic-nav-row{ display:flex; align-items:center; }
  .brand.mark{ order:2; margin:0 auto; }
  .hamburger{ order:3; margin-left:auto; }
  .hamburger{ display:inline-flex !important; width:44px; height:44px; padding:10px; border-radius:12px;
              background:rgba(255,215,120,.06); border:1px solid rgba(255,215,120,.35);
              box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
  .hamburger span{ background:linear-gradient(180deg,#f7d14a,#d99a0c); height:3px; border-radius:2px;
                   box-shadow:0 0 6px rgba(255, 200, 80, .55); }
  .hamburger:is(:hover,.is-open){ background:rgba(255,215,120,.12); border-color:rgba(255,215,120,.5); }
}


/* === Solid 3-bar hamburger inside square === */
@media (max-width:900px){
  .hamburger{
    position:relative;
    display:inline-flex !important; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0; border-radius:12px;
    background:linear-gradient(180deg, rgba(255,215,120,.10), rgba(255,215,120,.06));
    border:1px solid rgba(255,215,120,.45);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
  }
  /* inner dark tile */
  .hamburger::before{
    content:""; position:absolute; inset:5px; border-radius:10px;
    background: rgba(8,12,18,.72);
    box-shadow: inset 0 0 0 1px rgba(255,215,120,.30);
  }
  /* three white bars */
  .hamburger span{
    position:absolute; left:50%; width:22px; height:3px;
    margin:0; background:#ffffff; border-radius:2px;
    box-shadow: 0 0 1px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.25);
    transform-origin:center;
    transition: transform .18s ease, opacity .18s ease;
  }
  .hamburger span:nth-child(1){ transform:translate(-50%, -8px); }
  .hamburger span:nth-child(2){ transform:translate(-50%, 0); }
  .hamburger span:nth-child(3){ transform:translate(-50%, 8px); }
  /* X state */
  .hamburger.is-open span:nth-child(1){ transform: translate(-50%, 0) rotate(42deg); }
  .hamburger.is-open span:nth-child(2){ opacity:0; transform: translate(-50%, 0) scaleX(.8); }
  .hamburger.is-open span:nth-child(3){ transform: translate(-50%, 0) rotate(-42deg); }
}


/* Drawer head centered (no extra X button) */
.mobile-head{ justify-content:center; }
.mobile-close{ display:none !important; }


/* ===== Language segmented control ===== */
.lang-wrap{ display:flex; align-items:center; gap:10px; }
.lang-seg{ display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:999px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,215,120,.45);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.lang-seg .seg{
  min-width:46px; padding:6px 12px; border-radius:999px; border:0; cursor:pointer;
  color:#dfe9ff; background:transparent; font-weight:800; letter-spacing:.02em;
}
.lang-seg .seg[aria-pressed="true"]{
  color:#0a0e15; background: linear-gradient(180deg,#f7d14a,#d99a0c);
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
}
.lang-seg .seg:hover{ background: rgba(255,255,255,.06); }

/* Mobile layout for language row */
.mobile-lang{ display:flex; flex-direction:column; gap:8px; }
.mobile-lang .lang-wrap{ justify-content:space-between; }
.mobile-lang .lang-seg{ flex:0 0 auto; }
.mobile-lang .lang-seg .seg{ min-width:72px; }

/* Hide native select visually but keep it for a11y */
.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; }


/* Hard-hide mobile drawer/scrim on desktop */
@media (min-width:901px){
  .mobile-drawer, .mobile-scrim{ display:none !important; }
}



/* --- Info page layout --- */
.info-layout{display:grid;grid-template-columns:1fr;gap:24px}
.info-toc .toc-nav{display:grid;gap:8px}
.info-toc .toc-nav a{color:var(--text);text-decoration:none;border:1px solid var(--border);padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.02)}
.info-toc .toc-nav a:hover{border-color:#3a567e;background:rgba(255,255,255,.04)}
.info-content{display:grid;gap:24px}
.tick-list{list-style:none;padding-left:0;margin:0}
.tick-list li{padding-left:28px;position:relative;margin:8px 0}
.tick-list li:before{content:'✓';position:absolute;left:0;top:0;transform:translateY(-2px)}
.dot-list{list-style:disc;margin:0 0 0 20px}
.source-note{opacity:.8}
@media(min-width: 980px){
  .info-layout{grid-template-columns: 280px 1fr;align-items:start}
  .info-toc{position:sticky;top:88px}
}


/* --- Support / Rules / Donate layouts --- */
.page-layout{display:grid;grid-template-columns:1fr;gap:24px}
.sidebar{position:static}
.sidebar .card{position:sticky;top:88px}
.section-title{margin-top:0}
.callout{border:1px solid var(--border);background:rgba(255,255,255,.03);padding:16px;border-radius:12px}
.callout.warn{border-color:#a86; background:linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,200,150,.06))}
.steps{counter-reset:step;display:grid;gap:10px;margin:0;padding:0;list-style:none}
.steps li{position:relative;padding-left:44px;min-height:36px;display:flex;align-items:center}
.steps li:before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:32px;height:32px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--border)}
.rules-list{margin:0 0 0 20px}
.faq{display:grid;gap:10px}
.faq details{border:1px solid var(--border);border-radius:10px;padding:8px 12px;background:rgba(255,255,255,.02)}
.faq summary{font-weight:700;cursor:pointer}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top: 10px;}
@media(min-width: 980px){
  .page-layout{grid-template-columns: 300px 1fr}
  .sidebar{position:sticky;top:88px;height:fit-content}
}

/* --- Sidebar TOC (Support/Rules/Donate) --- */
.sidebar nav{display:grid;gap:10px}
.sidebar nav h3{margin:0 0 10px}
.sidebar nav a{
  display:block;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.02);
  color:var(--text);
  text-decoration:none;
}
.sidebar nav a:hover{
  border-color:#3a567e;
  background:rgba(255,255,255,.04);
}

/* Que los anclajes no queden tapados por el header */
.content section{scroll-margin-top:96px}


/* --- Streamers Carousel --- */
.carousel{position:relative;display:grid;grid-template-columns: 48px 1fr 48px;gap:12px;align-items:center}
.carousel-viewport{overflow:hidden;border-radius:14px}
.carousel-track{display:flex;gap:16px;padding:8px;list-style:none;margin:0;transition:transform .4s ease}
.carousel-slide{min-width:calc((100% - 32px) / 3); /* 3 visible with 16px gaps */}
					
.carousel-btn{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.02);color:var(--text);border-radius:12px;width:48px;height:48px;display:grid;place-items:center;font-size:28px;cursor:pointer}
.carousel-btn:hover{border-color:#3a567e;background:rgba(255,255,255,.05)}
@media(max-width: 1024px){
  .carousel{grid-template-columns: 40px 1fr 40px}
  .carousel-slide{min-width:calc((100% - 16px) / 2);} /* 2 visible on tablets */
}
@media(max-width: 640px){
  .carousel{grid-template-columns: 36px 1fr 36px}
  .carousel-slide{min-width:100%;} /* 1 visible on phones */
}
/* Streamer card */
.streamer-card{background:rgb(16 20 27 / 88%);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;height:100%}
.streamer-cover{aspect-ratio:16/9;object-fit:cover;width:100%}
.streamer-body{padding:14px;display:grid;gap:8px}
.streamer-name{margin:0;font-size:1.15rem}
.streamer-desc{margin:0;color:var(--muted);font-size:.95rem}
.btn[data-platform]{position:relative}
.btn[data-platform]::after{content:attr(data-platform);font-size:.8rem;opacity:.8;margin-left:.6rem}
/* La tarjeta ocupa un alto fijo/responsivo */
.streamer-card{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  /* Alto responsivo: ajustalo a gusto */
  min-height: clamp(280px, 32vw, 460px);
  background: #0b0f14; /* por si tarda en cargar */
}

/* La media (img o iframe) cubre toda la tarjeta */
.streamer-card .streamer-media{
  position: absolute;
  inset: 0;                 /* top:0 right:0 bottom:0 left:0 */
  z-index: 1;
}
.streamer-card .streamer-media > img,
.streamer-card .streamer-media > iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* recorta para llenar sin deformar */
  display: block;
  border: 0;
}

/* Capa con gradiente para legibilidad del texto */
.streamer-card::after{
  content:"";
  position:absolute;
  inset: 40% 0 0 0;         /* gradiente desde mitad hacia abajo */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 60%, rgba(0,0,0,.85) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Contenido superpuesto al pie */
.streamer-card .streamer-overlay{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding: 18px 20px 20px;
}

/* (Opcional) que el botón no estire la tarjeta */
.streamer-card .live-btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  white-space:nowrap;
}

/* --- Streamers: animated carousel (3 visible) --- */
.streamers-carousel-block{margin-bottom:28px}
.carousel{position:relative;display:grid;grid-template-columns:56px 1fr 56px;gap:14px;align-items:center}
.carousel-viewport{overflow:hidden;border-radius:16px}
.carousel-track{display:flex;gap:18px;padding:8px;list-style:none;margin:0;will-change:transform;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.carousel-slide{min-width:calc((100% - 36px)/3)} /* 3 visibles con 18px de gap */
.carousel-btn{appearance:none;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text);border-radius:14px;width:56px;height:56px;display:grid;place-items:center;font-size:28px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.carousel-btn:hover{border-color:#3a567e;background:rgba(255,255,255,.06)}

@media(max-width: 1024px){
  .carousel{grid-template-columns:48px 1fr 48px}
  .carousel-slide{min-width:calc((100% - 18px)/2)}
}
@media(max-width: 640px){
  .carousel{grid-template-columns:40px 1fr 40px}
  .carousel-slide{min-width:100%}
}

/* Streamer card — más alta y vistosa */
.streamer-card{position:relative;border:1px solid var(--border);border-radius:16px;overflow:hidden;min-height:420px;background:#0f141d}
.streamer-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05);transform:scale(1.02);transition:transform .6s ease, filter .6s ease}
.streamer-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.85) 100%);z-index:1}
.streamer-card:hover .streamer-cover{transform:scale(1.06);filter:saturate(1.15)}
.streamer-overlay{position:absolute;z-index:2;bottom:0;left:0;right:0;padding:18px 16px 16px;display:grid;gap:8px}
.streamer-name{margin:0;font-size:1.35rem;letter-spacing:.2px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.streamer-desc{margin:0;color:#d6dce7;text-shadow:0 2px 6px rgba(0,0,0,.45)}

/* Botón "Ver en vivo" con badge de plataforma */
.live-btn{display:inline-flex;align-items:center;gap:.6rem}
.live-btn:before{content:"●";font-size:.9rem;filter:drop-shadow(0 0 6px currentColor);animation:blink 1.2s infinite}
@keyframes blink{0%,60%,100%{opacity:1}30%{opacity:.2}}

/* Acentos por plataforma */
.is-twitch .live-btn{border-color:#9146FF}
.is-youtube .live-btn{border-color:#FF0000}
.is-kick .live-btn{border-color:#53FC18}
.is-facebook .live-btn{border-color:#1778F2}
.is-tiktok .live-btn{border-color:#00f2ea}


/* --- Server selection page --- */
.server-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width: 980px){ .server-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.server-card{position:relative;border:1px solid var(--border);border-radius:18px;overflow:hidden;min-height:420px;background:#0f141d;isolation:isolate;transition:transform .35s ease, box-shadow .35s ease}
.server-card:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.35)}
.server-media{position:absolute;inset:0;background-image:var(--bg-img);background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.02);transform:scale(1.04);transition:transform .6s ease, filter .6s ease}
.server-card:hover .server-media{transform:scale(1.08);filter:saturate(1.2) contrast(1.05)}
.server-overlay{position:absolute;inset:0;background:radial-gradient(1200px 400px at 20% 0%, rgba(0,0,0,.55), rgba(0,0,0,.85));mix-blend-mode:multiply;opacity:.95}
.server-body{position:relative;z-index:1;display:grid;gap:12px;padding:22px}
.server-title{font-size:1.8rem;margin:4px 0}
.server-desc{color:#d6dce7;margin:0 0 4px}
.server-badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.badge{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);font-size:.85rem}
.server-card::after{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;background:linear-gradient(45deg, rgba(255,255,255,.08), rgba(58,86,126,.18));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.4}


/* ====== SERVER HUB (standalone) ====== */
.hub-topbar{position:fixed;inset:0 0 auto 0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.0));z-index:50}
.hub-topbar .lang-btn{border:1px solid var(--border);background:rgba(255,255,255,.05);color:var(--text);border-radius:10px;padding:6px 10px;margin-left:8px;cursor:pointer}
.hub-topbar .lang-btn:hover{background:rgba(255,255,255,.08)}

.servers-hub-full{min-height:100svh;position:relative;display:grid}
.hub-bg{position:absolute;inset:0;background:radial-gradient(1200px 600px at 70% 30%, rgba(70,90,120,.25), transparent), url('images/streamers-hero.jpg') center/cover no-repeat;filter:brightness(.6);}
.hub-grid{position:relative;display:grid;grid-template-columns: 420px 1fr;gap:24px;align-items:stretch;padding:16px 24px 1px;z-index:1}
@media(max-width: 980px){ .hub-grid{grid-template-columns:1fr; padding-top:88px} }

/* LEFT LIST */
.hub-list{backdrop-filter: blur(4px);}
.hub-sub{margin:0 0 10px 4px;color:#e9edf6;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.server-list{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.server-item .pill{display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:14px;padding:12px 14px;background:rgba(12,16,22,.6);transition:transform .2s ease, border-color .2s ease, background .2s ease}
.server-item .emblem{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.04);font-size:22px}
.server-item .meta .name{font-weight:800;letter-spacing:.3px}
.server-item .tags{opacity:.9}
.server-item .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#48ff73;margin:0 6px 2px 2px}
.server-item .soon{border:1px solid #a88;background:rgba(255,200,170,.08);padding:2px 8px;border-radius:999px;font-size:.75rem}
.server-item.is-active .pill{transform:translateX(6px); border-color:#3a567e; background:rgba(255,255,255,.08)}
.hub-legend{margin-top:10px;opacity:.8}
.hub-legend .sep{opacity:.4;margin:0 6px}

/* RIGHT DETAIL */
.hub-detail{position:relative;display:grid;grid-template-rows:1fr}
.detail-media{position:absolute;inset:0;overflow:hidden;border-radius:18px}
.detail-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);filter:saturate(1.1);transition:transform .8s ease, filter .8s ease}
.detail-overlay{position:absolute;inset:0;background:radial-gradient(1200px 400px at 30% 20%, rgba(0,0,0,.2), rgba(0,0,0,.8));mix-blend-mode:multiply}
.detail-body{position:relative;margin:12px;border-radius:18px;background:rgba(10,14,20,.78);backdrop-filter: blur(6px);border:1px solid var(--border)}
.detail-title{font-size:2.2rem;margin:0 0 8px}
.detail-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.detail-badges .badge{border:1px solid var(--border);padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08)}
.detail-desc{max-width:160ch}
.detail-icons{display:flex;gap:24px;margin-top:10px;opacity:.95}
.detail-icons .ico{display:grid;place-items:center;text-align:center}
.detail-icons .ico span{font-size:24px}
.detail-icons .ico small{opacity:.9}

.hub-footer{display:flex;justify-content:center;padding:14px 0;opacity:.7}

/* minor helpers */
.badge.ghost{border:1px dashed var(--border);background:transparent}


/* Server status badges */
.server-item .badge.inactive{ border:1px solid #666; color:#8a93a6; background:rgba(255,255,255,.04); }
.server-item .dot.offline{ background:#9aa4b1; }

/* Disabled start button */
.start-play.disabled, .start-play[disabled]{
  pointer-events:none; opacity:.65;
}

/* Servers hub: que el panel de detalle se ajuste al contenido */
body.servers-hub .hub-grid{ 
  align-items: start;          /* deja de estirar las filas */
}

body.servers-hub .hub-detail{
  min-height: 600px;               /* anula cualquier min-height heredado */
  height: auto;                /* asegura que crezca por contenido */
  align-self: start;           /* la columna se alinea arriba */
}

/* Card más compacto */
body.servers-hub .hub-detail .detail-body{
  height: auto;                /* por si algún .card tenía height:100% */
  padding-block: 20px;         /* baja el padding vertical (ajusta a gusto) */
}

/* (Opcional) comprime separadores internos del card */
body.servers-hub .detail-badges{ margin-top: 8px; }
body.servers-hub .detail-desc{   margin-top: 10px; }
body.servers-hub .detail-icons{  margin-top: 12px; }
body.servers-hub .btn-row{       margin-top: 12px; }

body.servers-hub .hub-legend{ display:none; }

.card{background:linear-gradient(180deg, var(--panel), var(--panel-2));border:1px solid #1e2a3a;box-shadow:var(--shadow);border-radius:var(--radius);padding:20px;margin:28px 0}
.card__header h2{margin:0 0 6px 0}
.card__header p{margin:0;color:var(--muted)}
.video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;margin-top:14px;border:1px solid #1e2a3a}
.video iframe{position:absolute;inset:0;width:100%;height:100%}