/* ============================================================================
   VITARE DESIGN SYSTEM  -  vitare-design.css
   One stylesheet, loaded site-wide. Every page + Elementor block uses these
   classes. Energetic / game-y, brand blue (#38b6ff), Nunito + Luckiest Guy.

   HOW TO LOAD (WordPress - NO Elementor Pro needed):
     Elementor FREE has no Custom CSS field, so add the CSS through WordPress itself:
     - EASIEST: use "vitare-design-allinone.css" (fonts baked in) and paste it into
       Appearance > Customize > Additional CSS. Nothing to upload, no paths to fix.
     - OR host fonts (leaner): upload nunito.woff2 + luckiestguy.woff2 to
       /wp-content/uploads/vitare-fonts/, fix the two url() paths in the @font-face
       block below, then paste this file into Appearance > Customize > Additional CSS
       (or a free plugin like WPCode / "Simple Custom CSS and JS").
     BLOCKS: paste each block's HTML into an Elementor FREE "HTML" widget. Interactive
     blocks (nav, ways, trailer) carry their own <script>, which the HTML widget runs -
     no JS field needed.
   Section headers below (===) double as the block map: each block's HTML is in
   the block library.
   ============================================================================ */

/*__FONTS_START__*/
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/luckiestguy.woff2') format('woff2')}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/nunito.woff2') format('woff2')}
/*__FONTS_END__*/

/* === TOKENS ============================================================== */
:root{
  --blue:#38b6ff; --blue-deep:#1a8fe0; --blue-dark:#12568f;
  --ink:#0c3a60; --muted:#5c7791; --navy:#0b2036;
  --light:#eaf7ff; --line:#d6ecfb;
  --wrap:1220px;
}

/* === BASE =============================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,sans-serif;font-weight:700;color:var(--ink);background:#fff;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.display{font-family:'Luckiest Guy',cursive;font-weight:400;letter-spacing:.5px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.outline{color:#fff;-webkit-text-stroke:3px var(--blue-dark);paint-order:stroke fill}

/* === BUTTONS ============================================================ */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:'Luckiest Guy',cursive;font-size:19px;letter-spacing:.5px;
  padding:15px 30px;border-radius:18px;cursor:pointer;border:3px solid #fff;color:#fff;
  transition:transform .08s,box-shadow .08s,filter .12s}
.btn-play{background:linear-gradient(180deg,#7fd0ff,var(--blue));box-shadow:0 7px 0 var(--blue-dark),0 16px 26px -10px rgba(4,20,40,.6)}
.btn-play:active{transform:translateY(4px);box-shadow:0 3px 0 var(--blue-dark)}
.btn-tr{background:rgba(255,255,255,.16);backdrop-filter:blur(8px);box-shadow:0 7px 0 rgba(10,40,70,.5)}
.btn-tr:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(10,40,70,.5)}
.btn-ghost{background:transparent;border-color:var(--blue);color:var(--blue-deep);box-shadow:0 6px 0 var(--line)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
.btn .pi{width:24px;height:24px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.btn .pi svg{width:10px;height:10px;fill:var(--blue-deep);margin-left:1px}
.btn:hover{transform:translateY(-2px)}
.btn-play:hover{box-shadow:0 9px 0 var(--blue-dark),0 20px 30px -10px rgba(4,20,40,.6)}
@keyframes bpulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(0) scale(1.045)}}
.btn.pulse{animation:bpulse 2.6s ease-in-out infinite}
.btn.pulse:hover{animation-play-state:paused;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}

/* === HEADER / NAV ======================================================= */
/* .nav-solid variant = opaque bar for light content pages (no hero behind) */
header.nav{position:absolute;top:18px;left:0;right:0;z-index:40}
header.nav.nav-solid{position:sticky;top:0;padding:12px 0;background:transparent}
.nav-in{display:flex;align-items:center;gap:30px;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);
  backdrop-filter:blur(12px);border-radius:22px;padding:10px 18px;box-shadow:0 10px 30px -12px rgba(4,20,40,.5)}
.nav-solid .nav-in{background:#fff;border-color:var(--line);box-shadow:0 8px 24px -12px rgba(9,40,70,.35)}
.brand img{height:38px;display:block;filter:drop-shadow(0 3px 6px rgba(4,20,40,.4))}
.nav-solid .brand img{filter:none}
.links{display:flex;gap:24px;font-family:'Luckiest Guy',cursive;font-size:15px}
.links a{color:#fff;text-shadow:0 2px 6px rgba(4,20,40,.5)}.links a:hover{color:#bfe6ff}
.nav-solid .links a{color:var(--ink);text-shadow:none}.nav-solid .links a:hover{color:var(--blue-deep)}
.nav-cta{margin-left:auto;display:flex;gap:12px;align-items:center}
.nav-cta .signin{font-family:'Luckiest Guy',cursive;font-size:15px;color:#fff;text-shadow:0 2px 6px rgba(4,20,40,.5)}
.nav-solid .nav-cta .signin{color:var(--ink);text-shadow:none}
.nav-cta .btn{padding:10px 20px;font-size:15px;box-shadow:0 5px 0 var(--blue-dark)}
.burger{display:none;margin-left:auto;width:48px;height:48px;flex:none;border-radius:14px;cursor:pointer;
  align-items:center;justify-content:center;background:rgba(255,255,255,.14);border:2px solid rgba(255,255,255,.4);backdrop-filter:blur(8px)}
.nav-solid .burger{background:#fff;border-color:var(--line)}
.burger span{position:relative;width:22px;height:2.6px;background:#fff;border-radius:2px;transition:.2s}
.nav-solid .burger span,.nav-solid .burger span::before,.nav-solid .burger span::after{background:var(--ink)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2.6px;background:#fff;border-radius:2px;transition:.2s}
.burger span::before{top:-7px}.burger span::after{top:7px}
.nav.open .burger span{background:transparent}
.nav.open .burger span::before{top:0;transform:rotate(45deg)}
.nav.open .burger span::after{top:0;transform:rotate(-45deg)}
.mnav{display:none;flex-direction:column;gap:4px;margin-top:10px;padding:12px;border-radius:20px;
  background:rgba(6,26,50,.94);border:2px solid rgba(255,255,255,.28);backdrop-filter:blur(14px);box-shadow:0 20px 40px -14px rgba(4,20,40,.6)}
.nav.open .mnav{display:flex}
.mnav a{font-family:'Luckiest Guy',cursive;font-size:17px;color:#fff;padding:12px 14px;border-radius:12px}
.mnav a:hover{background:rgba(255,255,255,.12)}
.mnav .btn{justify-content:center;margin-top:6px;box-shadow:0 5px 0 var(--blue-dark)}
@media(max-width:900px){.links,.nav-cta{display:none}.burger{display:flex}}

/* === HERO (home) : customisable bg image + free-standing character ====== */
.hero{position:relative;min-height:100vh;overflow:hidden;isolation:isolate;display:flex;align-items:center;color:#fff}
.hero .bg{position:absolute;inset:0;z-index:-5;background-size:cover;background-position:center;
  background-image:linear-gradient(180deg,#1f5fa8 0%,#3f93d6 34%,#8fc9d6 62%,#b9d98f 100%)}
.hero .vig{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,20,38,.65),rgba(6,20,38,.15) 45%,transparent 62%),linear-gradient(0deg,rgba(6,20,38,.55),transparent 34%)}
.hero-grid{position:relative;z-index:2;width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:20px;padding-top:70px}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;text-align:center}}
/* Size and leading come from --hero-fs / --hero-lh, which home.html.twig sets
   from the LENGTH of the headline. Short copy stays huge; longer copy steps
   down instead of wrapping across the whole banner. Fallbacks keep the
   original look if the variables are ever missing. */
.hero h1{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:var(--hero-fs,clamp(50px,7.4vw,104px));line-height:var(--hero-lh,.84);color:#fff;
  -webkit-text-stroke:6px var(--blue-dark);paint-order:stroke fill;text-shadow:0 9px 0 rgba(10,50,90,.35),0 18px 30px rgba(4,20,40,.5)}
.hero h1 .l2{color:#bfe6ff;display:block}
.hero .sub{font-weight:800;font-size:clamp(17px,1.7vw,21px);margin:22px 0 28px;max-width:30ch;text-shadow:0 2px 10px rgba(4,20,40,.6)}
@media(max-width:920px){.hero .sub{margin-inline:auto}}
.hero-acts{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:920px){.hero-acts{justify-content:center}}
.showcase{position:relative;height:82vh;min-height:540px}
@media(max-width:920px){.showcase{display:none}}
.showcase .spot{position:absolute;left:52%;top:44%;transform:translate(-50%,-50%);width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(140,224,255,.85),rgba(140,224,255,0) 62%);filter:blur(8px);animation:pulse 5s ease-in-out infinite;z-index:1}
@keyframes pulse{0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
.showcase .ring{position:absolute;left:52%;bottom:6%;transform:translateX(-50%);width:60%;height:56px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(150,225,255,.95),transparent 68%);filter:blur(3px);z-index:1;animation:pulse 5s ease-in-out infinite}
.showcase .char{position:absolute;left:52%;bottom:4%;transform:translateX(-50%);z-index:3;max-height:94%;max-width:80%;width:auto;object-fit:contain;
  filter:drop-shadow(0 26px 42px rgba(4,20,40,.6)) drop-shadow(0 0 26px rgba(140,224,255,.35));animation:hover-fig 6s ease-in-out infinite}
@keyframes hover-fig{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-12px)}}
.showcase .p{position:absolute;z-index:2;width:7px;height:7px;border-radius:50%;background:#dff4ff;box-shadow:0 0 10px #9fe0ff;opacity:0;animation:rise 7s linear infinite}
@keyframes rise{0%{transform:translateY(0);opacity:0}15%{opacity:1}85%{opacity:.6}100%{transform:translateY(-260px);opacity:0}}
.wave{position:absolute;left:0;right:0;bottom:-1px;z-index:5;width:100%;height:auto;display:block}

/* === SECTION SHELLS ===================================================== */
.band{position:relative;padding:66px 0 84px}
.band-light{background:var(--light)}
.band-blue{background:linear-gradient(180deg,#e2f1fd,var(--light))}
.band-dark{background:linear-gradient(160deg,#123a5e,#0e2c49 60%,#153c66);color:#fff}
.head{text-align:center;margin-bottom:28px}
.head.left{text-align:left}
.head .eyebrow{font-family:'Luckiest Guy',cursive;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:var(--blue-deep)}
.band-dark .head .eyebrow{color:#8fd0ff}
.head h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(28px,4.4vw,50px);color:var(--ink);margin-top:8px;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;text-shadow:0 4px 0 rgba(56,182,255,.18)}
.band-dark .head h2{color:#fff;-webkit-text-stroke:0;text-shadow:0 6px 20px rgba(4,20,40,.5)}
.head p{font-weight:700;color:var(--muted);max-width:54ch;margin:12px auto 0}.band-dark .head p{color:#bcd7ee}
.foot{text-align:center;margin-top:28px}
.wtop{position:absolute;left:0;right:0;top:0;width:100%;height:64px;display:block}

/* === CARDS: reusable shells ============================================= */
.card{background:#fff;border:3px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 8px 0 var(--line),0 20px 40px -22px rgba(9,40,70,.4);transition:transform .12s}
.card:hover{transform:translateY(-6px)}
.badge{color:#fff;font-family:'Luckiest Guy',cursive;font-size:12px;padding:5px 11px;border-radius:999px;border:2px solid #fff}
.b-live{background:#1f9660}.b-hot{background:#ff6e46}.b-rank{background:#388cdc}
.b-new{background:linear-gradient(180deg,#7fd0ff,var(--blue))}

/* filter chips */
.chips{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.chips.left{justify-content:flex-start}
.chip{font-family:'Luckiest Guy',cursive;font-size:14px;letter-spacing:.5px;padding:9px 18px;border-radius:999px;cursor:pointer;
  color:var(--ink);border:3px solid var(--line);background:#fff;box-shadow:0 4px 0 var(--line);transition:.12s}
.chip:hover{transform:translateY(-2px)}
.chip.on{background:linear-gradient(180deg,#7fd0ff,var(--blue));border-color:#fff;color:#fff;box-shadow:0 4px 0 var(--blue-dark)}

/* === MODULE: live-world lot feed ======================================== */
.lots{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:980px){.lots{grid-template-columns:repeat(2,1fr)}}@media(max-width:520px){.lots{grid-template-columns:1fr}}
.lot{background:#fff;border:3px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 0 var(--line),0 20px 40px -22px rgba(9,40,70,.4);transition:transform .12s}
.lot:hover{transform:translateY(-6px)}
.lot .thumb{aspect-ratio:4/3;background-size:cover;background-position:center;position:relative;display:grid;place-items:center}
.lot .badge{position:absolute;top:10px;left:10px}
.lot .m{padding:12px 14px}.lot .m .n{font-family:'Luckiest Guy',cursive;font-size:16px;color:var(--ink)}.lot .m .o{font-size:12.5px;font-weight:700;color:var(--muted)}

/* === MODULE: "ways to play" selector (list + side preview) ============== */
.ways-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:20px;margin-top:8px}
@media(max-width:820px){.ways-grid{grid-template-columns:1fr}}
.way-list{display:flex;flex-direction:column;gap:8px}
.way-btn{display:flex;align-items:center;gap:14px;text-align:left;border:2px solid transparent;cursor:pointer;padding:13px 15px;border-radius:16px;background:rgba(255,255,255,.05);color:#dfeafc;transition:.14s}
.way-btn:hover{background:rgba(255,255,255,.1)}.way-btn.on{background:rgba(56,182,255,.2);border-color:#7fd0ff}
.way-btn .ic{width:46px;height:46px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:2px solid rgba(255,255,255,.2)}
.way-btn.on .ic{background:var(--blue);border-color:#fff}
.way-btn .ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.way-btn .t{font-family:'Luckiest Guy',cursive;font-size:18px;color:#fff}.way-btn .s{font-size:12.5px;color:#9fb8d4;font-weight:700}
.way-view{position:relative;border-radius:22px;overflow:hidden;min-height:340px;display:flex;align-items:flex-end;border:4px solid rgba(255,255,255,.2);box-shadow:0 30px 60px -26px rgba(0,0,0,.6)}
.way-scene{position:absolute;inset:0;background:linear-gradient(160deg,#3a5a80,#20375a);background-size:cover;background-position:center;transition:.3s}
.way-cap{position:relative;z-index:1;padding:22px;width:100%;background:linear-gradient(0deg,rgba(6,20,38,.92),transparent 82%)}
.way-cap h3{font-family:'Luckiest Guy',cursive;font-size:23px;color:#fff}.way-cap p{font-weight:600;font-size:14.5px;margin-top:6px;color:#dfeafc;max-width:46ch}

/* === MODULE: news / post grid =========================================== */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:820px){.news-grid{grid-template-columns:1fr}}
.post{background:#fff;border:3px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 8px 0 var(--line),0 20px 40px -22px rgba(9,40,70,.4);transition:transform .12s}
.post:hover{transform:translateY(-6px)}
.post .shot{aspect-ratio:16/9;background-size:cover;background-position:center;position:relative}
.post .tag{position:absolute;top:10px;left:10px;background:linear-gradient(180deg,#7fd0ff,var(--blue));color:#fff;font-family:'Luckiest Guy',cursive;font-size:12px;padding:5px 11px;border-radius:999px;border:2px solid #fff}
.post .pb{padding:15px 16px 18px}.post .date{font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase}
.post h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:18px;color:var(--ink);margin-top:6px}
.post .rm{color:var(--blue-deep);font-family:'Luckiest Guy',cursive;font-size:14px;margin-top:10px;display:inline-block}

/* === MODULE: promo cards (2-up) ========================================= */
.cards2{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:720px){.cards2{grid-template-columns:1fr}}
.promo{border-radius:24px;padding:30px;color:#fff;position:relative;overflow:hidden;border:4px solid #fff;box-shadow:0 8px 0 rgba(9,40,70,.25),0 24px 44px -22px rgba(9,40,70,.5)}
.promo h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:24px}.promo p{font-weight:700;margin:10px 0 18px;opacity:.96;max-width:34ch}
.promo .em{position:absolute;right:-6px;bottom:-16px;font-size:120px;opacity:.18;line-height:1}
.promo.discord{background:linear-gradient(150deg,#5865F2,#8b93ff)}.promo.refer{background:linear-gradient(150deg,#1a8fe0,#7fd0ff)}
.promo .btn{background:rgba(255,255,255,.92);color:#0a3c63;border-color:#fff;box-shadow:0 5px 0 rgba(9,40,70,.25);font-size:15px;padding:11px 20px}

/* === MODULE: teaser pillars (3-up feature cards) ======================== */
.tcards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:960px;margin:0 auto}
@media(max-width:760px){.tcards{grid-template-columns:1fr}}
.tcard{background:#fff;border:3px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 8px 0 var(--line),0 20px 40px -22px rgba(9,40,70,.4);transition:transform .12s;text-align:center}
.tcard:hover{transform:translateY(-6px)}
.tcard .ic{width:64px;height:64px;margin:0 auto 14px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(160deg,#7fd0ff,var(--blue));border:3px solid #fff;box-shadow:0 5px 0 var(--blue-dark)}
.tcard .ic svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tcard h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:21px;color:var(--ink)}
.tcard p{font-weight:700;font-size:15px;color:var(--muted);margin-top:6px}

/* === MODULE: call-to-action band (floaties, no ray-burst) =============== */
.ctab{position:relative;text-align:center;color:#fff;overflow:hidden;padding:82px 0 96px}
.ctab .bg{position:absolute;inset:0;z-index:-2;background:linear-gradient(150deg,#1a8fe0,#38b6ff 50%,#7fd0ff)}
.ctab .floaties{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.ctab .floaties span{position:absolute;bottom:-120px;border-radius:26px;background:rgba(255,255,255,.16);animation:floatUp linear infinite}
.ctab .floaties span:nth-child(1){left:8%;width:60px;height:60px;animation-duration:16s}
.ctab .floaties span:nth-child(2){left:26%;width:34px;height:34px;border-radius:50%;animation-duration:12s;animation-delay:2s}
.ctab .floaties span:nth-child(3){left:62%;width:80px;height:80px;animation-duration:19s;animation-delay:1s}
.ctab .floaties span:nth-child(4){left:82%;width:24px;height:24px;border-radius:50%;animation-duration:11s;animation-delay:4s}
.ctab .floaties span:nth-child(5){left:44%;width:46px;height:46px;animation-duration:15s;animation-delay:6s}
@keyframes floatUp{to{transform:translateY(-130vh) rotate(120deg)}}
.ctab h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(32px,5vw,60px);-webkit-text-stroke:5px #1560a0;paint-order:stroke fill;text-shadow:0 8px 0 rgba(10,50,90,.3)}
.ctab p{font-weight:800;margin:14px 0 26px;font-size:18px}

/* === MODULE: trailer modal (full-size video) ============================ */
.tr-modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(4,16,32,.86);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s}
.tr-modal.show{display:flex;opacity:1}
.tr-stage{width:min(1200px,94vw);aspect-ratio:16/9;max-height:88vh;background:#04101f;border-radius:22px;overflow:hidden;position:relative;border:4px solid #fff;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);transform:scale(.94);transition:transform .25s}
.tr-modal.show .tr-stage{transform:scale(1)}
.tr-stage iframe,.tr-stage video{width:100%;height:100%;border:0;display:block}
.tr-ph{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#cfe8ff;background:radial-gradient(120% 90% at 50% 20%,#0f4f8c,#04101f)}
.tr-ph .play{width:88px;height:88px;border-radius:50%;background:var(--blue);display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 12px 30px -6px rgba(0,0,0,.6);animation:bpulse 2.4s ease-in-out infinite}
.tr-ph .play svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.tr-ph .tt{font-family:'Luckiest Guy',cursive;font-size:22px}.tr-ph .ts{font-weight:700;opacity:.8;font-size:14px;margin-top:4px}
.tr-close{position:absolute;top:-16px;right:-16px;width:48px;height:48px;border-radius:50%;border:4px solid #fff;background:#ff6e46;color:#fff;cursor:pointer;font-size:24px;line-height:1;display:grid;place-items:center;box-shadow:0 8px 20px -4px rgba(0,0,0,.5);transition:transform .12s}
.tr-close:hover{transform:scale(1.06)}

/* === PAGE HERO (banner for content pages: news/about/download/general) === */
.page-hero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:150px 0 70px;display:flex;align-items:flex-end;min-height:46vh}
.page-hero .bg{position:absolute;inset:0;z-index:-5;background-size:cover;background-position:center;background-image:linear-gradient(160deg,#1f5fa8,#3f93d6 55%,#7fd0ff)}
.page-hero .scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(6,20,38,.8),rgba(6,20,38,.15) 70%)}
.page-hero .eyebrow{font-family:'Luckiest Guy',cursive;letter-spacing:2px;text-transform:uppercase;font-size:14px;color:#bfe6ff}
.page-hero h1{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(34px,5.5vw,68px);line-height:.92;margin-top:8px;
  -webkit-text-stroke:4px var(--blue-dark);paint-order:stroke fill;text-shadow:0 7px 0 rgba(10,50,90,.3)}
.page-hero .sub{font-weight:800;font-size:clamp(16px,1.7vw,20px);margin-top:14px;max-width:60ch;text-shadow:0 2px 10px rgba(4,20,40,.6)}
.page-hero .crumbs{font-weight:800;font-size:13px;color:#cfe8ff;margin-bottom:6px}
.page-hero .crumbs a:hover{color:#fff}
.page-wave{display:block;width:100%;height:auto;margin-top:-1px;position:relative;z-index:2}

/* === ARTICLE BODY (news item / legal / any long-form) =================== */
.section{padding:64px 0}
.section.sec-light{background:#fff}.section.sec-tint{background:var(--light)}
.article{max-width:760px;margin:0 auto}
.article .meta{display:flex;gap:14px;align-items:center;font-weight:800;color:var(--muted);font-size:14px;margin-bottom:22px;flex-wrap:wrap}
.article .meta .tag{background:linear-gradient(180deg,#7fd0ff,var(--blue));color:#fff;font-family:'Luckiest Guy',cursive;font-size:12px;padding:4px 11px;border-radius:999px}
.article-body{font-size:17px;line-height:1.7;color:#22415f}
.article-body>*+*{margin-top:18px}
.article-body h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:28px;color:var(--ink);margin-top:36px}
.article-body h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:21px;color:var(--ink);margin-top:28px}
.article-body a{color:var(--blue-deep);text-decoration:underline;text-decoration-thickness:2px}
.article-body ul,.article-body ol{padding-left:22px}.article-body li+li{margin-top:8px}
.article-body img{border-radius:18px;border:3px solid var(--line);box-shadow:0 14px 30px -18px rgba(9,40,70,.5)}
.article-body blockquote{border-left:5px solid var(--blue);background:var(--light);padding:16px 20px;border-radius:0 14px 14px 0;font-weight:700;color:var(--ink)}
.article-body figure figcaption{font-size:13px;color:var(--muted);font-weight:700;margin-top:8px;text-align:center}

/* === NEWS LANDING: featured + list ====================================== */
.feature{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;background:#fff;border:3px solid var(--line);border-radius:24px;overflow:hidden;
  box-shadow:0 8px 0 var(--line),0 26px 50px -26px rgba(9,40,70,.45);margin-bottom:34px}
@media(max-width:820px){.feature{grid-template-columns:1fr}}
.feature .shot{min-height:320px;background-size:cover;background-position:center;position:relative}
.feature .shot .tag{position:absolute;top:16px;left:16px}
.feature .fb{padding:34px;display:flex;flex-direction:column;justify-content:center}
.feature .date{font-weight:800;color:var(--muted);text-transform:uppercase;font-size:13px}
.feature h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(26px,3vw,40px);color:var(--ink);margin:8px 0 12px}
.feature p{font-weight:600;color:#3f5b76;font-size:16px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:36px}
.pager a{font-family:'Luckiest Guy',cursive;min-width:44px;height:44px;padding:0 14px;display:grid;place-items:center;border-radius:12px;
  background:#fff;border:3px solid var(--line);color:var(--ink);box-shadow:0 4px 0 var(--line)}
.pager a.on{background:linear-gradient(180deg,#7fd0ff,var(--blue));color:#fff;border-color:#fff;box-shadow:0 4px 0 var(--blue-dark)}

/* === DOWNLOAD: platform cards + steps =================================== */
.plats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:760px){.plats{grid-template-columns:1fr}}
.plat{background:#fff;border:3px solid var(--line);border-radius:22px;padding:28px;text-align:center;box-shadow:0 8px 0 var(--line),0 20px 40px -22px rgba(9,40,70,.4)}
.plat .os{width:70px;height:70px;margin:0 auto 14px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(160deg,#7fd0ff,var(--blue));border:3px solid #fff;box-shadow:0 5px 0 var(--blue-dark)}
.plat .os svg{width:38px;height:38px;fill:#fff}
.plat h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:20px;color:var(--ink)}
.plat .small{font-weight:700;color:var(--muted);font-size:13px;margin:4px 0 16px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:#fff;border:3px solid var(--line);border-radius:20px;padding:24px;position:relative;box-shadow:0 8px 0 var(--line)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:22px;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(180deg,#7fd0ff,var(--blue));color:#fff;font-family:'Luckiest Guy',cursive;display:grid;place-items:center;border:3px solid #fff;box-shadow:0 4px 0 var(--blue-dark)}
.step h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:18px;color:var(--ink);margin-top:12px}
.step p{font-weight:700;color:var(--muted);font-size:14px;margin-top:6px}
.reqs{max-width:760px;margin:0 auto;background:#fff;border:3px solid var(--line);border-radius:20px;padding:24px 28px;box-shadow:0 8px 0 var(--line)}
.reqs .row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line);font-weight:700}
.reqs .row:last-child{border-bottom:0}.reqs .row .k{color:var(--muted)}

/* === ABOUT: alternating feature rows =================================== */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center;margin-bottom:56px}
.frow:last-child{margin-bottom:0}
@media(max-width:820px){.frow{grid-template-columns:1fr;gap:22px}}
.frow.rev .fr-media{order:2}@media(max-width:820px){.frow.rev .fr-media{order:0}}
.fr-media{aspect-ratio:4/3;border-radius:24px;background-size:cover;background-position:center;border:4px solid #fff;
  box-shadow:0 10px 0 var(--line),0 30px 50px -26px rgba(9,40,70,.5)}
.fr-body .eyebrow{font-family:'Luckiest Guy',cursive;letter-spacing:2px;text-transform:uppercase;font-size:13px;color:var(--blue-deep)}
.fr-body h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(24px,3vw,38px);color:var(--ink);margin:6px 0 12px;
  -webkit-text-stroke:2px #fff;paint-order:stroke fill}
.fr-body p{font-weight:600;color:#3f5b76;font-size:16px}
.fr-body p+p{margin-top:12px}
.statsrow{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center}@media(max-width:620px){.statsrow{grid-template-columns:1fr 1fr}}
.stat{background:#fff;border:3px solid var(--line);border-radius:20px;padding:22px;box-shadow:0 8px 0 var(--line)}
.stat b{display:block;font-family:'Luckiest Guy',cursive;font-size:34px;color:var(--blue-deep)}
.stat span{font-weight:800;color:var(--muted);font-size:14px}

/* === FOOTER ============================================================= */
footer.ft{background:#0c2a48;color:#a9c4de;padding:46px 0 24px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:22px}@media(max-width:760px){.ft-top{grid-template-columns:1fr 1fr}}
.ft .brand img{height:40px;margin-bottom:10px}
.ft p{font-size:14px;font-weight:600;max-width:32ch;color:#8aa6c4}
.ft h4{color:#fff;font-family:'Luckiest Guy',cursive;font-size:14px;letter-spacing:.5px;margin-bottom:10px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:8px}.ft ul a{font-size:14px;font-weight:700;color:#a9c4de}.ft ul a:hover{color:#8fd0ff}
.ft-btm{border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:18px;font-size:12.5px;color:#7793b2;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ============================================================================
   THEME FIXES / OVERRIDES (appended - later rules win)
   ============================================================================ */

/* Nav: glass + fixed on EVERY page (drop the solid-white content-page variant) */
header.nav{position:fixed;top:18px;left:0;right:0;z-index:40}
header.nav.nav-solid{position:fixed;top:18px;padding:0}
.nav-solid .nav-in{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.nav-solid .links a,.nav-solid .nav-cta .signin{color:#fff;text-shadow:0 2px 6px rgba(4,20,40,.5)}
.nav-solid .brand img{filter:drop-shadow(0 3px 6px rgba(4,20,40,.4))}
.nav-solid .burger{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4)}
.nav-solid .burger span,.nav-solid .burger span::before,.nav-solid .burger span::after{background:#fff}
.hero-grid{padding-top:92px}

/* Hero character: large (sized by width so it scales up), bottom-aligned to the
   hero so it stands on the divider, with the glow + ground ring following it. */
.hero{align-items:stretch}
.hero-grid{align-items:center}
.showcase{align-self:end;height:auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:0}
.showcase .char{position:relative;left:auto;bottom:auto;transform:none;width:min(94%,660px);max-width:100%;max-height:min(86vh,900px);height:auto;z-index:6;animation:hover-fig 6s ease-in-out infinite}
.showcase .char-ph{position:relative;left:auto;bottom:auto;transform:none;height:min(64vh,540px)}
.showcase .spot{left:50%;top:42%;bottom:auto;transform:translate(-50%,-50%);width:108%;height:auto;aspect-ratio:1}
.showcase .ring{left:50%;bottom:2%;width:72%}
.showcase .p{z-index:7}
@keyframes hover-fig{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* os detect line + download buttons row */
.os-detect{text-align:center;font-weight:800;color:var(--muted);margin-bottom:18px}
.os-detect strong{color:var(--ink)}
.os-alt{display:flex;gap:18px;justify-content:center;margin-top:14px;font-weight:800}
.os-alt a{display:inline-flex;align-items:center;gap:6px;color:var(--blue-deep);cursor:pointer}
.os-alt svg{width:18px;height:18px;fill:currentColor}

/* System requirements (two columns) */
.sysreq{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:820px;margin:0 auto}
@media(max-width:640px){.sysreq{grid-template-columns:1fr}}
.sysreq .col{background:#fff;border:3px solid var(--line);border-radius:20px;padding:22px 24px;box-shadow:0 8px 0 var(--line)}
.sysreq h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:18px;color:var(--ink);margin-bottom:8px}
.sysreq dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-weight:700}
.sysreq dt{color:var(--muted)}.sysreq dd{color:var(--ink);text-align:right}

/* FAQ accordion */
.faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq details{background:#fff;border:3px solid var(--line);border-radius:16px;box-shadow:0 6px 0 var(--line);overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:'Luckiest Guy',cursive;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--blue);font-size:22px}
.faq details[open] summary::after{content:'-'}
.faq .rich{padding:0 20px 18px;font-weight:600;color:#3f5b76}

/* Install instruction modal (centred box) */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:22px}
.modal.is-open{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(4,16,32,.82);backdrop-filter:blur(5px)}
.modal__box{position:relative;z-index:1;width:min(620px,94vw);max-height:88vh;overflow:auto;background:#fff;border:4px solid #fff;border-radius:24px;padding:34px;box-shadow:0 40px 90px -20px rgba(0,0,0,.6)}
.modal__box h2{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:26px;color:var(--ink);margin-bottom:14px;-webkit-text-stroke:2px #eaf7ff;paint-order:stroke fill}
.modal__box .rich{font-weight:600;color:#33506c;line-height:1.6}
.modal__box .rich p{margin:10px 0}
.modal__box .rich code{background:var(--light);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font-family:ui-monospace,monospace;font-size:13px}
.modal__actions{margin-top:22px}
.modal__close{position:absolute;top:14px;right:16px;width:40px;height:40px;border:0;background:var(--light);border-radius:50%;font-size:22px;color:var(--ink);cursor:pointer}
.modal__close:hover{background:#dceefb}

/* Persona spotlight (image + text) */
.persona{display:grid;grid-template-columns:.8fr 1.2fr;gap:30px;align-items:center}
@media(max-width:720px){.persona{grid-template-columns:1fr}}
.persona .pic{aspect-ratio:1;border-radius:22px;background-size:cover;background-position:center;border:4px solid #fff;box-shadow:0 10px 0 var(--line),0 30px 50px -26px rgba(9,40,70,.5)}
.persona h3{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:clamp(22px,3vw,34px);color:var(--ink);margin-bottom:8px}
.persona .rich{font-weight:600;color:#3f5b76;font-size:16px}

/* live-lot "players here" pulsing dot (badge already styled) */
.badge .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#fff;margin-right:5px;vertical-align:middle;animation:pinglive 1.8s infinite}
@keyframes pinglive{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

/* clickable cards: kill underline, keep hover lift from .post/.lot */
a.post,a.lot,a.tcard{text-decoration:none;color:inherit;display:block}

/* Live-lots carousel (capped in JS to ~10) */
.lots-wrap{position:relative}
.lots.carousel{display:flex;overflow-x:auto;gap:18px;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 2px 12px;-ms-overflow-style:none;scrollbar-width:none}
.lots.carousel::-webkit-scrollbar{display:none}
.lots.carousel .lot{flex:0 0 clamp(220px,23%,262px);scroll-snap-align:start}
.lots-nav{position:absolute;top:calc(50% + 4px);transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:50%;border:3px solid #fff;background:var(--blue);color:#fff;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 6px 16px -6px rgba(9,40,70,.5);display:grid;place-items:center}
.lots-nav:hover{filter:brightness(1.06)}
.lots-nav.prev{left:-12px}.lots-nav.next{right:-12px}
@media(max-width:640px){.lots-nav{display:none}.lots.carousel .lot{flex:0 0 80%}}

/* Download platform cards: always centred (fixes the left-biased 2-in-3-col grid) */
.plats.center{display:flex;justify-content:center;flex-wrap:wrap;gap:20px;max-width:760px;margin:0 auto}
.plats.center .plat{flex:0 0 300px;max-width:100%}

/* Mobile: stop the fixed nav from covering the hero copy (top-align + clearance) */
@media(max-width:920px){
  .hero{min-height:72vh;align-items:flex-start}
  .hero-grid{padding-top:116px;padding-bottom:48px}
}

/* GDPR cookie banner */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:120;padding:16px}
.cookie-banner[hidden]{display:none}
.cookie-inner{max-width:1080px;margin:0 auto;background:#fff;border:3px solid var(--line);border-radius:20px;box-shadow:0 22px 54px -18px rgba(9,40,70,.55);padding:18px 22px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cookie-text{flex:1 1 340px}
.cookie-text strong{font-family:'Luckiest Guy',cursive;font-size:16px;color:var(--ink);display:block;margin-bottom:2px}
.cookie-text p{font-weight:700;color:var(--muted);font-size:14px;margin:0}
.cookie-text a{color:var(--blue-deep);text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-actions .btn{font-size:15px;padding:11px 22px}
.cookie-btn-decline{background:#fff;color:var(--ink);border-color:var(--line);box-shadow:0 5px 0 var(--line)}
.cookie-btn-decline:hover{background:var(--light)}
.cookie-btn-decline:active{transform:translateY(4px);box-shadow:0 2px 0 var(--line)}
@media(max-width:560px){.cookie-actions{flex:1 1 100%}.cookie-actions .btn{flex:1;justify-content:center}}
.ft-btm #cookieSettings{color:#7793b2}.ft-btm #cookieSettings:hover{color:#8fd0ff}

/* Decorative floating shapes for any positioned band */
.deco-floats{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deco-floats span{position:absolute;bottom:-120px;border-radius:26px;background:rgba(56,182,255,.10);animation:floatUp linear infinite}
.deco-floats span:nth-child(1){left:6%;width:54px;height:54px;animation-duration:17s}
.deco-floats span:nth-child(2){left:24%;width:30px;height:30px;border-radius:50%;animation-duration:13s;animation-delay:2s}
.deco-floats span:nth-child(3){left:66%;width:72px;height:72px;animation-duration:20s;animation-delay:1s}
.deco-floats span:nth-child(4){left:84%;width:22px;height:22px;border-radius:50%;animation-duration:12s;animation-delay:4s}
.deco-floats span:nth-child(5){left:46%;width:42px;height:42px;animation-duration:16s;animation-delay:6s}

/* Download highlights strip */
.dl-highlights{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:36px}
.dlh{background:#fff;border:3px solid var(--line);border-radius:18px;padding:14px 20px;display:flex;align-items:center;gap:12px;box-shadow:0 6px 0 var(--line)}
.dlh .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(160deg,#7fd0ff,var(--blue));border:3px solid #fff;box-shadow:0 4px 0 var(--blue-dark);flex:none}
.dlh .ic svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.dlh b{font-family:'Luckiest Guy',cursive;font-weight:400;font-size:15px;color:var(--ink);display:block;line-height:1.1}
.dlh span{font-weight:700;font-size:12.5px;color:var(--muted)}
.dlh .tx{display:flex;flex-direction:column}
.plats.center .plat{transition:transform .14s}
.plats.center .plat:hover{transform:translateY(-6px)}

/* Feature rows: number badge accent */
.frow{position:relative}
.fr-num{font-family:'Luckiest Guy',cursive;font-size:15px;color:#fff;background:linear-gradient(160deg,#7fd0ff,var(--blue));border:3px solid #fff;box-shadow:0 5px 0 var(--blue-dark);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;margin-bottom:14px}

/* Features: 4-up pillars + centred intro lead */
.tcards.pillars-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.tcards.pillars-4{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.tcards.pillars-4{grid-template-columns:1fr}}
.fr-lead{max-width:920px;margin:0 auto;text-align:center}
.fr-lead .article-body{font-size:clamp(18px,2vw,23px);line-height:1.6;color:#3a5876;font-weight:600}
.fr-lead .article-body>*+*{margin-top:16px}
.fr-lead .article-body h1,.fr-lead .article-body h2,.fr-lead .article-body h3{font-family:'Luckiest Guy',cursive;font-weight:400;color:var(--ink);font-size:clamp(30px,5vw,52px);line-height:1.04;margin:0 0 14px;-webkit-text-stroke:2px #eaf7ff;paint-order:stroke fill}
.fr-lead .article-body strong{color:var(--blue-deep)}

/* Reveal-on-scroll (adds life to feature pages) */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* Bigger, more immersive feature rows */
.feat-band .frow{grid-template-columns:1.08fr .92fr;gap:44px}
.feat-band .fr-media{aspect-ratio:4/3;min-height:360px}
.feat-band .fr-body h2{font-size:clamp(26px,3.4vw,42px)}
.feat-band .fr-text{font-size:16px;line-height:1.6;color:#3a5876;font-weight:600}
@media(max-width:820px){.feat-band .frow{grid-template-columns:1fr;gap:22px}.feat-band .fr-media{min-height:240px}}

/* --- Large screens: keep the key art in proportion ---------------------------
   The hero background is full bleed, but the content sat in the standard 1220px
   wrap with the characters capped at 660px. At 2200px that left 490px of dead
   space each side and the render at only 25% of the viewport, so the art looked
   marooned in the scene. Widen the hero column and let the render grow with it.
   Scoped to .hero so every other page keeps the normal reading width. */
@media (min-width:1500px){
  .hero .wrap{max-width:1440px}
  .showcase .char{width:min(94%,780px);max-height:min(82vh,860px)}
}
@media (min-width:1900px){
  .hero .wrap{max-width:1720px}
  .showcase .char{width:min(94%,900px);max-height:min(82vh,920px)}
}
/* Very tall monitors: a full 100vh hero pushes everything below the fold and
   stretches the scene. Cap it so the composition stays intact. */
@media (min-height:1100px){
  .hero{min-height:auto;height:clamp(760px,86vh,1040px)}
}