:root{
  --bg:#0b0e14;
  --panel:rgba(12,16,24,.72);
  --panel2:rgba(12,16,24,.55);
  --line:rgba(255,255,255,.12);
  --text:rgba(255,255,255,.88);
  --muted:rgba(255,255,255,.60);
  --heading:rgba(255,255,255,.95);
  --red:#b51f27;
  --red2:#8e151c;
  --btn:rgba(255,255,255,.08);
  --btn2:rgba(255,255,255,.14);
  --shadow:0 18px 50px rgba(0,0,0,.55);
  --radius:16px;
  --radius2:18px;
  --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:radial-gradient(1200px 700px at 20% 0%,rgba(255,255,255,.05),transparent 60%),radial-gradient(900px 500px at 85% 35%,rgba(255,255,255,.04),transparent 55%),var(--bg);
  overflow-x:hidden;
}

/* Site scrollbar
   Chromium/WebKit gets the full branded scrollbar. Firefox uses the standard
   scrollbar properties as a fallback. */
@supports (-moz-appearance:none){
  html,body{scrollbar-width:thin;scrollbar-color:#a91c24 #080b10}
}
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{
  background:linear-gradient(180deg,#070a0f 0%,#0c1017 48%,#070a0f 100%);
  border-left:1px solid rgba(255,255,255,.055);
  box-shadow:inset 2px 0 7px rgba(0,0,0,.55)
}
::-webkit-scrollbar-thumb{
  min-height:52px;
  background:linear-gradient(90deg,#6f1117 0%,#b51f27 42%,#8e151c 72%,#5e0d12 100%);
  border:3px solid #080b10;
  border-radius:999px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 0 8px rgba(181,31,39,.16)
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(90deg,#81151c 0%,#cf2933 42%,#a71922 72%,#701117 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 0 10px rgba(181,31,39,.24)
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(90deg,#5f0d12,#9f1820 48%,#771118)
}
::-webkit-scrollbar-corner{background:#080b10}
::-webkit-scrollbar-button{display:none;width:0;height:0}
/* Original Perplexing World film-grain overlay. Keep this above the page
   background (pointer-events:none means it never interferes with controls). */
body:before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
  opacity:.18;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%}
.wrap{width:min(var(--max),calc(100% - 40px));margin:0 auto}
.skip-link{position:fixed;left:12px;top:12px;z-index:1000;transform:translateY(-160%);background:#fff;color:#111;padding:10px 14px;border-radius:10px}
.skip-link:focus{transform:none}
:focus-visible{outline:2px solid rgba(255,255,255,.92);outline-offset:3px}

/* Navigation */
.nav{position:absolute;top:0;left:0;right:0;z-index:20;padding:20px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:Cinzel,serif;letter-spacing:.18em;font-weight:600;text-transform:uppercase;font-size:18px;opacity:.95;white-space:nowrap}
.nav-links{display:flex;gap:18px;align-items:center;font-size:13px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.nav-links a{padding:10px;border-radius:12px}
.nav-links a:hover{background:rgba(255,255,255,.06)}
.nav-toggle{display:none;border:1px solid rgba(255,255,255,.16);background:rgba(8,10,15,.48);border-radius:12px;width:44px;height:44px;cursor:pointer;backdrop-filter:blur(10px)}
.nav-toggle span,.nav-toggle:before,.nav-toggle:after{content:"";display:block;width:20px;height:2px;background:rgba(255,255,255,.88);margin:4px auto;transition:.18s ease}
.nav-toggle[aria-expanded="true"] span{opacity:0}
.nav-toggle[aria-expanded="true"]:before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"]:after{transform:translateY(-6px) rotate(-45deg)}

/* Hero */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-start;padding:100px 0 40px;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,12,18,.92) 0%,rgba(10,12,18,.70) 42%,rgba(10,12,18,.25) 70%,rgba(10,12,18,.70) 100%),url("hero-bg.png?v=c5f10d5095f1");background-size:cover;background-position:center;transform:scale(1.03);filter:saturate(1.05) contrast(1.05)}
.hero-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(900px 420px at 20% 25%,rgba(255,255,255,.09),transparent 60%),radial-gradient(700px 400px at 75% 20%,rgba(255,255,255,.06),transparent 55%),linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,.55));opacity:.9}
.hero-content{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;width:min(var(--max),calc(100% - 40px));margin:0 auto;align-items:start}
.hero h1{font-family:Cinzel,serif;color:var(--heading);font-weight:400;font-size:clamp(36px,4.4vw,64px);line-height:1.05;margin:0 0 18px;text-shadow:0 12px 40px rgba(0,0,0,.55)}
.hero p{margin:0 0 26px;color:var(--muted);max-width:52ch;font-size:15px;line-height:1.7}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:1px solid rgba(255,255,255,.15);background:var(--btn);letter-spacing:.06em;text-transform:uppercase;font-size:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);backdrop-filter:blur(10px);cursor:pointer}
.btn:hover{background:var(--btn2);border-color:rgba(255,255,255,.22)}
.btn-primary{background:linear-gradient(180deg,var(--red) 0%,var(--red2) 100%);border-color:rgba(255,255,255,.12);box-shadow:0 16px 40px rgba(181,31,39,.25),0 18px 55px rgba(0,0,0,.55)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-dark{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.play{width:18px;height:18px;display:inline-grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.18)}
.play:before{content:"";display:block;width:0;height:0;border-left:7px solid rgba(255,255,255,.9);border-top:4px solid transparent;border-bottom:4px solid transparent;margin-left:2px}
.hero-right{display:flex;justify-content:flex-end}
.hero-card{width:min(420px,100%);border-radius:var(--radius2);border:1px solid rgba(255,255,255,.12);background:rgba(10,12,18,.35);box-shadow:var(--shadow);padding:16px;backdrop-filter:blur(12px)}
.hero-card .meta{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:rgba(255,255,255,.65);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}
.hero-card .line{height:1px;background:rgba(255,255,255,.10);margin:12px 0}
.hero-card .stat{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.hero-card .stat:last-child{border-bottom:0}.hero-card .stat b{color:rgba(255,255,255,.90);font-weight:600}.hero-card .stat small{display:block;color:rgba(255,255,255,.62);font-size:13px;margin-top:2px}.pill{padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);font-size:12px;color:rgba(255,255,255,.72);white-space:nowrap}

/* Sections */
.section{padding:44px 0}.section-title{display:flex;align-items:center;gap:14px;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:rgba(255,255,255,.75);margin:0 0 18px}.section-title:before,.section-title:after{content:"";height:1px;flex:1;background:rgba(255,255,255,.10)}.section-title span{padding:0 2px;white-space:nowrap}

/* Shared cards */
.card{border-radius:var(--radius2);border:1px solid rgba(255,255,255,.12);overflow:hidden;background:rgba(10,12,18,.40);box-shadow:0 14px 45px rgba(0,0,0,.45);position:relative;transform:translateZ(0)}
.card:hover{border-color:rgba(255,255,255,.20)}
.card .img{height:240px;background-size:cover;background-position:center;filter:saturate(1.05) contrast(1.05);position:relative}
.card .img:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,18,.87),rgba(10,12,18,.10),rgba(10,12,18,.28))}
.card .body{padding:14px 16px 16px}.card h3{margin:0 0 6px;font-family:Cinzel,serif;font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:18px;color:rgba(255,255,255,.92)}.card p{margin:0;color:rgba(255,255,255,.62);font-size:13px;line-height:1.55}.card .shine{pointer-events:none;position:absolute;inset:-40%;background:radial-gradient(circle at var(--mx,30%) var(--my,30%),rgba(255,255,255,.16),transparent 40%);opacity:0;transition:opacity .2s ease}.card:hover .shine{opacity:1}.tilt{will-change:transform,filter;transition:transform .12s ease,filter .12s ease}

/* Games carousel */
.carousel-shell{position:relative;padding:0 0 10px}
.carousel-stage{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:36px;align-items:center;margin-inline:-80px}
.games-carousel{position:relative;grid-column:2;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 36px)/3);gap:18px;min-width:0;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:5px;scrollbar-width:none;padding:3px 5px 18px;overscroll-behavior-inline:contain;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
.games-carousel::-webkit-scrollbar{display:none}
/* Keep scroll-snap anchors stationary while the cards inside them tilt. */
.game-slide{scroll-snap-align:start;min-width:0;display:grid}
.game-card{min-width:0;box-shadow:none}
.game-card .body{min-height:92px;display:flex;flex-direction:column}
.game-card .img.placeholder{display:grid;place-items:end start;padding:18px;background:radial-gradient(circle at 22% 22%,rgba(255,255,255,.14),transparent 26%),linear-gradient(135deg,rgba(181,31,39,.22),rgba(14,18,28,.78)),url("hero-bg.png?v=c5f10d5095f1");background-size:cover;background-position:center}
.game-card .img.placeholder:before{content:attr(data-mark);position:absolute;right:14px;bottom:8px;font-family:Cinzel,serif;font-size:clamp(52px,6vw,88px);line-height:1;color:rgba(255,255,255,.10);letter-spacing:.04em;z-index:0}
.game-card .img.placeholder .placeholder-title{position:relative;z-index:2;font-family:Cinzel,serif;font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 4px 18px rgba(0,0,0,.65)}
/* Buttons otherwise vertically center their contents when stretched to the slide height. */
.game-download{appearance:none;display:flex;flex-direction:column;justify-content:flex-start;text-align:left;padding:0;width:auto;color:inherit;font:inherit;cursor:pointer}
.game-download .img{flex-shrink:0}
.game-download .download-note{color:rgba(255,255,255,.84);font-weight:600}
.carousel-btn{position:static;z-index:8;width:44px;height:44px;display:grid;place-items:center;align-self:center;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(10,12,18,.78);backdrop-filter:blur(10px);box-shadow:0 12px 32px rgba(0,0,0,.42);cursor:pointer;font-size:24px;line-height:1;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.carousel-btn:hover{background:rgba(181,31,39,.88);border-color:rgba(255,255,255,.22);transform:scale(1.05)}
.carousel-prev{grid-column:1}.carousel-next{grid-column:3}
.carousel-count{min-width:80px;margin:-8px auto 0;text-align:center;color:rgba(255,255,255,.58);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* Philosophy */
.philo{margin-top:22px;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius2);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));padding:22px 18px;box-shadow:0 16px 55px rgba(0,0,0,.35)}
blockquote{margin:0;text-align:center;font-family:Inter,sans-serif;color:rgba(255,255,255,.78);line-height:1.75;font-size:14px}blockquote b{color:rgba(255,255,255,.92)}
.feature-strip{margin-top:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08)}
.feat{display:flex;gap:10px;align-items:center;justify-content:center;padding:12px 10px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:14px;color:rgba(255,255,255,.70);font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-align:center}.feat i{opacity:.85;font-style:normal;font-size:14px}

/* Behind the scenes */
.bts-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px;align-items:stretch}.bts-big .img,.bts-small .img{height:260px}.overlay-badge{position:absolute;left:14px;top:14px;z-index:2;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(10,12,18,.55);border:1px solid rgba(255,255,255,.14);padding:8px 10px;border-radius:12px;backdrop-filter:blur(10px)}.watch-now{margin-top:12px;display:inline-flex;gap:10px;align-items:center;padding:10px 14px;border-radius:14px;background:linear-gradient(180deg,var(--red) 0%,var(--red2) 100%);border:1px solid rgba(255,255,255,.12);text-transform:uppercase;letter-spacing:.08em;font-size:12px}

/* Join */
.join{padding:36px 0 60px}.join-card{border-radius:var(--radius2);border:1px solid rgba(255,255,255,.12);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:22px 18px;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.join-card h4{margin:0;font-family:Cinzel,serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.90)}.join-card p{margin:6px 0 0;color:rgba(255,255,255,.64);font-size:13px}.join-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Footer */
footer{padding:28px 0 36px;color:rgba(255,255,255,.48);border-top:1px solid rgba(255,255,255,.08);font-size:11px;letter-spacing:.045em}.footer-inner{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}.footer-brand{text-transform:uppercase;line-height:1.7}.footer-company{margin-top:5px;text-transform:none;letter-spacing:.02em;color:rgba(255,255,255,.39)}.footer-links{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end;text-transform:uppercase}.footer-links a:hover{color:rgba(255,255,255,.78)}

/* Modal */
.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.72);backdrop-filter:blur(6px)}.modal-card{width:min(520px,100%);border:1px solid rgba(255,255,255,.16);border-radius:18px;background:#10151f;box-shadow:0 24px 90px rgba(0,0,0,.68);padding:22px}.modal-card h2{font-family:Cinzel,serif;margin:0 0 10px;font-size:22px;letter-spacing:.05em}.modal-card p{color:rgba(255,255,255,.68);font-size:14px;line-height:1.65;margin:0 0 14px}.modal-card .small{font-size:12px;color:rgba(255,255,255,.48)}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;flex-wrap:wrap}.modal-close{background:rgba(255,255,255,.06)}

/* Legal pages */
.legal-page .nav{position:relative;background:rgba(8,10,15,.55);border-bottom:1px solid rgba(255,255,255,.08)}.legal-main{padding:56px 0 70px}.legal-wrap{width:min(850px,calc(100% - 40px));margin:0 auto}.legal-main h1{font-family:Cinzel,serif;font-size:clamp(30px,5vw,46px);font-weight:400;margin:0 0 10px}.legal-main h2{font-family:Cinzel,serif;font-size:19px;margin:32px 0 10px;color:rgba(255,255,255,.90)}.legal-main p,.legal-main li{color:rgba(255,255,255,.68);font-size:14px;line-height:1.75}.legal-main ul{padding-left:20px}.legal-main a{text-decoration:underline;text-underline-offset:3px}.legal-meta{color:rgba(255,255,255,.48);font-size:12px;margin-bottom:30px}.legal-box{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.035);border-radius:16px;padding:16px 18px;margin:20px 0}

@media (max-width:1360px) and (min-width:1321px){
  .carousel-stage{grid-template-columns:44px minmax(0,1fr) 44px;gap:16px;margin-inline:-60px}
}
@media (max-width:1320px) and (min-width:721px){
  .carousel-stage{grid-template-columns:44px minmax(0,1fr) 44px;gap:12px;margin-inline:0}
}
@media (max-width:980px){
  .hero-content{grid-template-columns:1fr}.hero-right{justify-content:flex-start}.hero{min-height:auto;padding-bottom:34px}.games-carousel{grid-auto-columns:calc((100% - 18px)/2)}.bts-grid{grid-template-columns:1fr 1fr}.bts-big{grid-column:1/-1}.feature-strip{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .wrap,.hero-content,.legal-wrap{width:min(100% - 28px,var(--max))}.nav{padding:14px 0}.logo{font-size:15px;letter-spacing:.13em}.nav-toggle{display:block}.nav-links{position:absolute;top:66px;left:14px;right:14px;display:grid;gap:4px;background:rgba(10,12,18,.95);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:10px;box-shadow:var(--shadow);backdrop-filter:blur(15px);transform-origin:top;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.17s ease}.nav-links.open{opacity:1;visibility:visible;transform:none}.nav-links a{padding:12px 13px}
  .hero{padding:88px 0 28px}.hero-bg{background-position:62% center}.hero h1{font-size:clamp(34px,11vw,48px);margin-bottom:14px}.hero p{font-size:14px;line-height:1.6;margin-bottom:20px}.cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.cta-row .btn{width:100%;padding-inline:10px}.hero-content{gap:24px}.hero-card{padding:13px}.hero-card .meta{margin-bottom:4px}.hero-card .stat{padding:9px 0}.hero-card .stat small{font-size:12px}.pill{font-size:10px;padding:5px 7px}
  .section{padding:34px 0}.section-title{margin-bottom:14px}.carousel-shell{padding:0 0 18px}.carousel-stage{grid-template-columns:38px minmax(0,1fr) 38px;gap:6px;margin-inline:0}.games-carousel{grid-auto-columns:86%;gap:12px;padding:3px 6px 14px;scroll-padding-inline:6px}.card .img{height:190px}.game-card .body{min-height:92px}.carousel-btn{width:38px;height:38px;background:rgba(10,12,18,.90);font-size:21px}.carousel-count{margin-top:-5px}
  .feature-strip{grid-template-columns:1fr 1fr;gap:8px}.feat{min-height:58px;font-size:10px;letter-spacing:.04em;padding:9px 7px}.feat:last-child{grid-column:1/-1}
  .bts-grid{display:grid;grid-auto-flow:column;grid-auto-columns:86%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:2px 2px 14px;scrollbar-width:none}.bts-grid::-webkit-scrollbar{display:none}.bts-grid>.card{scroll-snap-align:start}.bts-big{grid-column:auto}.bts-big .img,.bts-small .img{height:190px}
  .join{padding:26px 0 42px}.join-card{padding:17px 14px}.join-actions{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:9px}.join-actions .btn{width:100%;padding-inline:9px}
  .footer-inner{grid-template-columns:1fr}.footer-links{justify-content:flex-start;gap:12px}.footer-company{line-height:1.55}
}
@media (max-width:390px){.cta-row,.join-actions{grid-template-columns:1fr}.games-carousel,.bts-grid{grid-auto-columns:91%}.hero-card .stat{grid-template-columns:1fr}.pill{justify-self:start}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.tilt,.nav-links{transition:none}.games-carousel{scroll-behavior:auto}}

/* Mobile-only refinements — desktop layout intentionally unchanged. */
@media (max-width:720px){
  /* Show the left side of the hero artwork on phones. */
  .hero-bg{background-position:left center}

  /* One complete game per swipe/click. Keeping the viewport at exactly 100%
     ensures every slide, including the final game, can become the active slide. */
  .games-carousel{
    grid-auto-columns:100%;
    gap:12px;
    padding-left:0;
    padding-right:0;
    scroll-padding-inline:0;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .game-slide{
    scroll-snap-align:start;
    scroll-snap-stop:always;
    width:100%;
  }
  .game-card{width:100%}
}