:root{--bg:#070816;--bg2:#0d1024;--text:#f7f8ff;--muted:#aeb6d9;--cyan:#00f5ff;--purple:#8b5cf6;--pink:#ff3df2;--blue:#3b82f6;--glass:rgba(255,255,255,.075);--line:rgba(255,255,255,.16);--shadow:0 24px 80px rgba(0,0,0,.55);--radius:28px;--header-h:76px}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;min-width:320px;overflow-x:hidden;color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 20% 10%,rgba(0,245,255,.16),transparent 32rem),radial-gradient(circle at 85% 18%,rgba(255,61,242,.15),transparent 30rem),linear-gradient(180deg,#050611 0%,#0a0d1f 45%,#050611 100%)}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.shell{width:min(1160px,calc(100% - 32px));margin-inline:auto}.section{padding:86px 0;position:relative}.skip-link{position:absolute;left:-999px;top:12px;z-index:999;background:#fff;color:#000;padding:10px 14px;border-radius:12px}.skip-link:focus{left:12px}
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--header-h);display:flex;align-items:center;background:rgba(5,6,17,.78);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.12)}.site-header.scrolled{box-shadow:0 12px 40px rgba(0,0,0,.35)}.nav{display:flex;align-items:center;justify-content:space-between;gap:18px}.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:.02em;min-width:0}.brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;font-family:Orbitron,sans-serif;background:linear-gradient(135deg,var(--cyan),var(--pink));color:#050611;box-shadow:0 0 28px rgba(0,245,255,.42)}.brand-text{font-family:Orbitron,sans-serif}.nav-menu{display:flex;gap:20px;align-items:center}.nav-menu a{color:var(--muted);font-weight:700;font-size:.95rem}.nav-menu a:hover{color:var(--cyan);text-shadow:0 0 16px var(--cyan)}.nav-toggle{display:none;width:46px;height:46px;border:1px solid var(--line);background:var(--glass);border-radius:14px;color:#fff}.nav-toggle span{display:block;width:21px;height:2px;margin:5px auto;background:#fff;transition:.25s ease}
.language-select{display:inline-flex;align-items:center;gap:8px;padding:7px 8px 7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.075);color:var(--muted);font-weight:900;font-size:.82rem}.language-select select{appearance:none;border:0;outline:0;cursor:pointer;border-radius:999px;padding:8px 28px 8px 12px;color:#fff;font-weight:900;background:linear-gradient(45deg,transparent 50%,var(--cyan) 50%) calc(100% - 14px) 50%/6px 6px no-repeat,linear-gradient(135deg,var(--purple),var(--pink));box-shadow:0 0 18px rgba(255,61,242,.18)}.language-select select option{background:#0a0d1f;color:#fff}
.hero{min-height:100svh;padding-top:calc(var(--header-h) + 46px);display:flex;align-items:center}.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}.hero-bg:before{content:"";position:absolute;inset:-20%;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:54px 54px;transform:perspective(800px) rotateX(60deg) translateY(-10%)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center}.eyebrow{color:var(--cyan);text-transform:uppercase;letter-spacing:.18em;font-weight:900;font-size:.78rem}h1,h2,h3{margin:0;line-height:1.03}h1,h2{font-family:Orbitron,Inter,sans-serif;letter-spacing:-.05em}h1{font-size:clamp(2.55rem,8vw,5.9rem);max-width:820px}h2{font-size:clamp(2rem,6vw,4rem)}p{color:var(--muted);line-height:1.75}.hero-text{font-size:clamp(1rem,2.6vw,1.24rem);max-width:650px}.hero-actions,.cookie-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}.btn,.store-btn{min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 20px;border-radius:999px;border:1px solid var(--line);font-weight:900;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.btn:hover,.store-btn:hover{transform:translateY(-3px)}.btn-primary{background:linear-gradient(135deg,var(--cyan),var(--purple),var(--pink));color:#fff;box-shadow:0 0 36px rgba(0,245,255,.25)}.btn-secondary{background:rgba(255,255,255,.08);color:#fff}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px;max-width:560px}.hero-stats div,.feature-card,.studio-panel,.contact-card,.game-card{background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(18px)}.hero-stats div{padding:14px;border-radius:20px}.hero-stats strong{display:block;color:#fff}.hero-stats span{color:var(--muted);font-size:.82rem}.hero-visual{position:relative;justify-self:center;width:min(100%,430px);transform-style:preserve-3d}.phone-frame{padding:14px;border-radius:38px;background:linear-gradient(135deg,rgba(0,245,255,.45),rgba(255,61,242,.35));box-shadow:0 0 80px rgba(139,92,246,.28),inset 0 0 0 1px rgba(255,255,255,.25)}.phone-screen{aspect-ratio:9/16;overflow:hidden;border-radius:28px;background:#111;position:relative}.phone-screen img{width:100%;height:100%;object-fit:cover}.scanline{position:absolute;inset:0;background:linear-gradient(transparent 50%,rgba(255,255,255,.045) 50%);background-size:100% 6px;mix-blend-mode:screen}.floating-card{position:absolute;padding:12px 16px;border-radius:18px;background:rgba(5,6,17,.72);border:1px solid var(--line);box-shadow:0 0 34px rgba(0,245,255,.22);font-weight:900}.card-a{top:9%;right:-8%}.card-b{bottom:13%;left:-8%}
.section-head{max-width:760px;margin-bottom:34px}.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.game-card{border-radius:var(--radius);overflow:hidden;transition:.28s ease;position:relative}.game-card:hover{transform:translateY(-8px);border-color:rgba(0,245,255,.5);box-shadow:0 0 44px rgba(0,245,255,.18),var(--shadow)}.game-card img{width:100%;aspect-ratio:16/10;object-fit:cover}.game-content{padding:22px}.tag{display:inline-flex;color:var(--cyan);font-weight:900;font-size:.78rem;margin-bottom:12px}.store-btn{width:100%;margin-top:12px;background:rgba(0,245,255,.1)}.features-section:before{content:"";position:absolute;inset:8% 0 auto;height:55%;background:radial-gradient(circle,rgba(139,92,246,.18),transparent 58%);pointer-events:none}.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature-card{border-radius:24px;padding:22px;min-height:210px}.feature-card span{font-size:2rem;filter:drop-shadow(0 0 12px var(--cyan))}.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.gallery-item{padding:0;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--glass);cursor:pointer}.gallery-item img{width:100%;aspect-ratio:9/14;object-fit:cover;transition:.35s ease}.gallery-item:hover img{transform:scale(1.06)}
.studio-grid{display:grid;grid-template-columns:1fr .85fr;gap:24px;align-items:center}.studio-panel,.contact-card{border-radius:var(--radius);padding:28px}.socials{display:flex;flex-wrap:wrap;gap:12px}.socials a,.mail-link{color:var(--cyan);font-weight:900}.contact-card{display:grid;grid-template-columns:1fr 1fr;gap:24px}.contact-form{display:grid;gap:14px}.contact-form label{display:grid;gap:7px;color:#fff;font-weight:800}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:16px;padding:14px 15px;background:rgba(0,0,0,.25);color:#fff;outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--cyan);box-shadow:0 0 0 4px rgba(0,245,255,.12)}
.site-footer{padding:28px 0;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}.footer-grid{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}.footer-grid a{margin-left:14px;color:var(--muted)}.lightbox,.cookie-modal{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));background:rgba(0,0,0,.78);overflow:auto}.lightbox.active,.cookie-modal.active{display:flex}.lightbox img{max-width:min(100%,960px);max-height:82svh;border-radius:24px;border:1px solid var(--line);box-shadow:var(--shadow);object-fit:contain}.modal-close{position:fixed;top:16px;right:16px;z-index:210;width:46px;height:46px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.1);color:#fff;font-size:2rem;cursor:pointer}.cookie-box{width:min(620px,100%);max-height:calc(100svh - 36px);overflow:auto;border:1px solid var(--line);border-radius:26px;padding:24px;background:rgba(10,12,30,.96);box-shadow:var(--shadow)}.cookie-options{display:grid;gap:10px;margin:18px 0}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:translateY(0)}
@media (max-width:920px){.nav-toggle{display:block}.nav-menu{position:fixed;top:calc(var(--header-h) + 10px);left:16px;right:16px;display:grid;gap:8px;padding:16px;border:1px solid var(--line);border-radius:22px;background:rgba(5,6,17,.96);transform:translateY(-16px);opacity:0;pointer-events:none;transition:.25s ease}.nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto}.nav-menu a{padding:13px 12px;border-radius:14px;background:rgba(255,255,255,.055)}.language-select{width:100%;justify-content:space-between;border-radius:16px;padding:10px 12px}.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-toggle.open span:nth-child(2){opacity:0}.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.hero{padding-top:calc(var(--header-h) + 30px)}.hero-grid,.studio-grid,.contact-card{grid-template-columns:1fr}.hero-visual{width:min(86vw,370px);margin-top:18px}.games-grid{grid-template-columns:1fr 1fr}.features-grid,.gallery{grid-template-columns:1fr 1fr}}
@media (max-width:560px){:root{--header-h:68px;--radius:22px}.shell{width:min(100% - 24px,1160px)}.section{padding:64px 0}.brand-text{font-size:.95rem}.brand-logo img{width:132px;max-height:52px}.hero{min-height:auto}.hero-actions .btn{width:100%}.hero-stats{grid-template-columns:1fr}.games-grid,.features-grid,.gallery{grid-template-columns:1fr}.game-card img{aspect-ratio:16/11}.gallery-item img{aspect-ratio:16/10}.floating-card{font-size:.8rem;padding:9px 12px}.card-a{right:-2%;top:5%}.card-b{left:-2%;bottom:8%}.footer-grid{display:grid}.footer-grid a{margin:0 12px 0 0}.cookie-actions .btn{width:100%}h1{font-size:clamp(2.25rem,13vw,3.4rem)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}} /* Header logo + Kullion Games text */
.brand-logo-text{ display:flex; align-items:center; gap:14px; min-width:0;
}
.brand-logo-text img{ width:clamp(54px, 6vw, 76px); height:auto; max-height:64px; object-fit:contain; filter:drop-shadow(0 0 16px rgba(0,245,255,.46)) drop-shadow(0 0 20px rgba(255,61,242,.28));
}
.brand-logo-text span{ font-family:Orbitron, Inter, sans-serif; font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(.9rem, 1.45vw, 1.25rem); background:linear-gradient(90deg, var(--pink), var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 0 22px rgba(0,245,255,.22); white-space:nowrap;
}
@media (max-width:560px){ .brand-logo-text{gap:9px} .brand-logo-text img{width:46px;max-height:46px} .brand-logo-text span{font-size:.82rem;letter-spacing:.035em}
} /* Featured Games Gallery */
.games-slider-wrapper{ position:relative; display:flex; align-items:center; gap:18px;
}
.games-slider{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(320px, 360px); gap:22px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding:12px 4px;
}
.games-slider::-webkit-scrollbar{ display:none;
}
.games-arrow{ flex:0 0 auto; width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-size:2rem; cursor:pointer; backdrop-filter:blur(12px); transition:.25s ease; box-shadow:0 0 24px rgba(0,245,255,.14);
}
.games-arrow:hover{ transform:scale(1.08); box-shadow:0 0 32px rgba(255,61,242,.28);
}
.games-slider .game-card{ min-height:100%;
}
.games-slider .game-card img{ aspect-ratio:16/9; object-fit:cover;
}
@media (max-width:768px){ .games-slider{ grid-auto-columns:88%; } .games-arrow{ width:46px; height:46px; font-size:1.5rem; }
} /* Showcase video */
.gallery-video{ overflow:hidden; border-radius:22px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
}
.gallery-video video{ width:100%; height:100%; display:block; aspect-ratio:9/14; object-fit:cover; background:#000;
}
@media (max-width:560px){ .gallery-video video{ aspect-ratio:16/10; }
} /* Screenshots & Trailer slider gallery */
.showcase-slider-wrapper{ position:relative; display:flex; align-items:center; gap:18px;
}
.showcase-slider{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px, 320px); gap:18px; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; padding:12px 4px;
}
.showcase-slider::-webkit-scrollbar{ display:none;
}
.showcase-arrow{ flex:0 0 auto; width:58px; height:58px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.08); color:#fff; font-size:2rem; cursor:pointer; backdrop-filter:blur(12px); transition:.25s ease; box-shadow:0 0 24px rgba(0,245,255,.14);
}
.showcase-arrow:hover{ transform:scale(1.08); box-shadow:0 0 32px rgba(255,61,242,.28);
}
.showcase-slider .gallery-item{ width:100%; min-height:100%;
}
.showcase-slider .gallery-item img{ aspect-ratio:16/10; object-fit:cover;
}
@media (max-width:768px){ .showcase-slider{ grid-auto-columns:88%; } .showcase-arrow{ width:46px; height:46px; font-size:1.5rem; }
} /* Featured Games: exactly 3 visible cards on larger screens */
.games-slider-wrapper{ overflow:hidden;
}
.games-slider{ flex:1 1 auto; min-width:0; scroll-snap-type:x mandatory; scroll-padding:0; grid-auto-columns:calc((100% - 44px) / 3);
}
.games-slider .game-card{ scroll-snap-align:start;
}
@media (max-width:920px){ .games-slider{ grid-auto-columns:calc((100% - 22px) / 2); }
}
@media (max-width:640px){ .games-slider{ grid-auto-columns:100%; }
} /* Fixed Play Store button alignment in Featured Games cards */
.games-slider .game-card{ display:flex; flex-direction:column;
}
.games-slider .game-content{ display:flex; flex-direction:column; flex:1;
}
.games-slider .game-content p{ flex:1;
}
.games-slider .store-btn{ margin-top:auto;
} /* Enhanced cinematic hover effects */
.hero-visual{ transition:transform .16s ease, filter .22s ease; will-change:transform;
}
.hero-visual:hover{ filter:drop-shadow(0 0 34px rgba(0,245,255,.42)) drop-shadow(0 0 42px rgba(255,61,242,.28));
}
.hero-visual:hover .phone-frame{ box-shadow: 0 0 42px rgba(0,245,255,.46), 0 0 90px rgba(255,61,242,.28), inset 0 0 0 1px rgba(255,255,255,.32);
}
.hero-visual:hover .phone-screen img{ transform:scale(1.045);
}
.phone-screen img{ transition:transform .28s ease;
}
.hero-visual::after{ content:""; position:absolute; inset:-14px; border-radius:46px; pointer-events:none; opacity:0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,245,255,.28), transparent 28%), linear-gradient(135deg, rgba(0,245,255,.2), transparent 40%, rgba(255,61,242,.2)); filter:blur(16px); transition:opacity .18s ease; z-index:-1;
}
.hero-visual:hover::after{ opacity:1;
} .games-slider .game-card{ transform-style:preserve-3d; transition: transform .18s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease; will-change:transform;
}
.games-slider .game-card::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,245,255,.22), transparent 28%), linear-gradient(135deg, rgba(255,61,242,.18), transparent 45%, rgba(0,245,255,.18)); transition:opacity .18s ease; mix-blend-mode:screen;
}
.games-slider .game-card:hover{ border-color:rgba(0,245,255,.72); box-shadow: 0 0 34px rgba(0,245,255,.24), 0 0 58px rgba(255,61,242,.18), 0 30px 90px rgba(0,0,0,.62); filter:saturate(1.18) contrast(1.04);
}
.games-slider .game-card:hover::after{ opacity:1;
}
.games-slider .game-card img{ transition:transform .28s ease, filter .28s ease;
}
.games-slider .game-card:hover img{ transform:scale(1.065); filter:saturate(1.25) contrast(1.08);
}
.games-slider .game-card:hover .tag,
.games-slider .game-card:hover h3{ text-shadow:0 0 18px rgba(0,245,255,.38), 0 0 22px rgba(255,61,242,.26);
}
.games-slider .game-card:hover .store-btn{ border-color:rgba(0,245,255,.58); box-shadow:0 0 26px rgba(0,245,255,.22), inset 0 0 18px rgba(255,255,255,.045);
}
@media (max-width:920px){ .hero-visual:hover, .games-slider .game-card:hover{ transform:none; }
} /* Screenshots & Trailer: exactly 3 visible cards on larger screens */
.showcase-slider-wrapper{ overflow:hidden;
}
.showcase-slider{ flex:1 1 auto; min-width:0; scroll-snap-type:x mandatory; scroll-padding:0; grid-auto-columns:calc((100% - 36px) / 3);
}
.showcase-slider .gallery-item{ scroll-snap-align:start;
}
@media (max-width:920px){ .showcase-slider{ grid-auto-columns:calc((100% - 18px) / 2); }
}
@media (max-width:640px){ .showcase-slider{ grid-auto-columns:100%; }
} /* Portrait gameplay screenshots */
.showcase-slider .gallery-item img{ aspect-ratio:9/16 !important; object-fit:cover; border-radius:22px;
}
@media (max-width:640px){ .showcase-slider .gallery-item img{ aspect-ratio:9/16 !important; }
} /* Trailer section */
.trailer-heading{ margin-top:90px;
}
.trailer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}
.trailer-card{ position:relative; border-radius:28px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg, rgba(16,22,48,.9), rgba(8,10,22,.96)); min-height:240px; box-shadow:0 0 30px rgba(0,245,255,.08); transition:.28s ease;
}
.trailer-card:hover{ transform:translateY(-6px); border-color:rgba(0,245,255,.45); box-shadow: 0 0 30px rgba(0,245,255,.18), 0 0 60px rgba(255,61,242,.12);
}
.trailer-placeholder{ width:100%; height:100%; min-height:240px; display:flex; align-items:center; justify-content:center; text-align:center; padding:30px; font-size:1.25rem; font-weight:700; color:#fff; background: radial-gradient(circle at top left, rgba(0,245,255,.14), transparent 40%), radial-gradient(circle at bottom right, rgba(255,61,242,.16), transparent 40%);
}
@media (max-width:920px){ .trailer-grid{ grid-template-columns:1fr; }
} /* FIXED CONTENT WIDTH FOR SCREENSHOTS + TRAILER */
#showcase .container{ width:min(1280px, calc(100% - 40px)); margin-inline:auto;
} .showcase-slider-wrapper,
.trailer-grid,
.section-heading{ max-width:1280px; margin-inline:auto;
} .showcase-slider{ width:100%;
} .gallery-item{ width:100%;
} @media (max-width:768px){ #showcase .container{ width:min(100%, calc(100% - 24px)); }
}








/* FINAL SCROLL OFFSET FIX */
html{
  scroll-padding-top:48px;
}

#games,
#features,
#showcase,
#trailers,
#studio,
#contact{
  scroll-margin-top:48px;
}

@media (max-width:768px){
  html{
    scroll-padding-top:40px;
  }

  #games,
  #features,
  #showcase,
  #trailers,
  #studio,
  #contact{
    scroll-margin-top:40px;
  }
}

/* CENTERED STACKED FOOTER */
.footer-bottom{
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:22px;
  width:100%;
}

.footer-bottom p{
  margin:0;
  line-height:1.4;
}

.footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:34px;
  flex-wrap:wrap;
  width:100%;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}


/* CENTER FOOTER CONTENT */
footer,
.footer,
.footer-container{
  text-align:center;
}

.footer-bottom{
  display:flex !important;
  flex-direction:column-reverse !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  width:100%;
  margin:0 auto;
}

.footer-links{
  justify-content:center !important;
  align-items:center !important;
  width:100%;
}

/* Vertical social links */
.social-links-vertical{
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
}

.social-links-vertical a{
  display:block;
}


/* Standalone legal pages */
.legal-page{
  padding-top:calc(var(--header-h) + 90px);
  min-height:70vh;
}

.legal-page h1{
  margin-bottom:28px;
}

.legal-card{
  max-width:900px;
  padding:32px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}

.legal-card h2{
  font-size:1.3rem;
  margin:26px 0 10px;
}

.legal-card h2:first-child{
  margin-top:0;
}

.legal-card a{
  color:var(--cyan);
  font-weight:900;
}


/* GDPR cookie consent */
.cookie-consent{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(10px);
  overflow:auto;
}
.cookie-consent.active{
  display:flex;
}
.cookie-consent-box{
  position:relative;
  width:min(680px, 100%);
  max-height:calc(100svh - 40px);
  overflow:auto;
  padding:28px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.16);
  background:linear-gradient(180deg, rgba(18,21,44,.98), rgba(8,10,22,.98));
  box-shadow:0 30px 120px rgba(0,0,0,.7), 0 0 50px rgba(0,245,255,.12);
}
.cookie-consent-header h2{
  margin:4px 0 12px;
}
.cookie-consent-options{
  display:grid;
  gap:14px;
  margin:24px 0;
}
.cookie-option{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.055);
}
.cookie-option input{
  width:22px;
  height:22px;
  accent-color:#ff3df2;
  margin-top:2px;
}
.cookie-option strong{
  display:block;
  color:#fff;
  margin-bottom:5px;
}
.cookie-option small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.cookie-consent-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.cookie-consent-actions .btn{
  flex:1 1 160px;
}
.cookie-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  cursor:pointer;
}
.cookie-settings-btn{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:120;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,22,.82);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(14px);
  cursor:pointer;
  box-shadow:0 0 24px rgba(0,245,255,.12);
}
@media (max-width:560px){
  .cookie-consent{
    align-items:flex-end;
    padding:12px;
  }
  .cookie-consent-box{
    padding:22px 16px 16px;
    border-radius:22px;
    max-height:calc(100svh - 24px);
  }
  .cookie-consent-actions{
    display:grid;
  }
  .cookie-settings-btn{
    left:12px;
    bottom:12px;
    font-size:.82rem;
  }
}


/* Cookie consent fixed */
.cookie-consent{
  position:fixed !important;
  inset:0 !important;
  z-index:99999 !important;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(12px);
  overflow:auto;
}
.cookie-consent.active{
  display:flex !important;
}
body.cookie-open{
  overflow:hidden;
}
.cookie-consent-box{
  position:relative;
  width:min(680px, 100%);
  max-height:calc(100svh - 40px);
  overflow:auto;
  padding:30px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(18,21,44,.98), rgba(8,10,22,.98));
  box-shadow:0 30px 120px rgba(0,0,0,.72), 0 0 52px rgba(0,245,255,.14);
}
.cookie-consent-box h2{
  margin:6px 0 12px;
}
.cookie-consent-options{
  display:grid;
  gap:14px;
  margin:24px 0;
}
.cookie-option{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
}
.cookie-option input{
  width:22px;
  height:22px;
  accent-color:#ff3df2;
  margin-top:2px;
}
.cookie-option strong{
  display:block;
  color:#fff;
  margin-bottom:5px;
}
.cookie-option small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.cookie-consent-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.cookie-consent-actions .btn{
  flex:1 1 160px;
}
.cookie-close{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.cookie-settings-btn{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:9999;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,22,.84);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(14px);
  cursor:pointer;
  box-shadow:0 0 24px rgba(0,245,255,.12);
}
@media (max-width:560px){
  .cookie-consent{
    align-items:flex-end;
    padding:12px;
  }
  .cookie-consent-box{
    padding:22px 16px 16px;
    border-radius:22px;
    max-height:calc(100svh - 24px);
  }
  .cookie-consent-actions{
    display:grid;
  }
  .cookie-settings-btn{
    left:12px;
    bottom:12px;
    font-size:.82rem;
  }
}


/* Working cookie consent */
.cookie-consent{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(12px);
}
.cookie-consent.is-visible{
  display:flex !important;
}
.cookie-lock{
  overflow:hidden !important;
}
.cookie-consent-box{
  position:relative;
  width:min(680px, 100%);
  max-height:calc(100svh - 40px);
  overflow:auto;
  padding:30px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg, rgba(18,21,44,.98), rgba(8,10,22,.98));
  box-shadow:0 30px 120px rgba(0,0,0,.76), 0 0 55px rgba(0,245,255,.16);
}
.cookie-consent-box h2{
  margin:6px 0 12px;
}
.cookie-options-list{
  display:grid;
  gap:14px;
  margin:24px 0;
}
.cookie-row{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.13);
  background:rgba(255,255,255,.055);
}
.cookie-row input{
  width:22px;
  height:22px;
  margin-top:3px;
  accent-color:#ff3df2;
}
.cookie-row strong{
  display:block;
  color:#fff;
  margin-bottom:5px;
}
.cookie-row small{
  display:block;
  color:var(--muted);
  line-height:1.55;
}
.cookie-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}
.cookie-buttons .btn{
  flex:1 1 160px;
}
.cookie-x{
  position:absolute;
  top:14px;
  right:14px;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
}
.cookie-settings-button{
  position:fixed;
  left:18px;
  bottom:18px;
  z-index:2147483646;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,22,.86);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(14px);
  cursor:pointer;
  box-shadow:0 0 24px rgba(0,245,255,.12);
}
@media (max-width:560px){
  .cookie-consent{
    align-items:flex-end;
    padding:12px;
  }
  .cookie-consent-box{
    padding:22px 16px 16px;
    border-radius:22px;
    max-height:calc(100svh - 24px);
  }
  .cookie-buttons{
    display:grid;
  }
  .cookie-settings-button{
    left:12px;
    bottom:12px;
    font-size:.82rem;
  }
}


/* Final hard cookie close behavior */
#cookieConsent[style*="display: none"]{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
#cookieConsent.is-visible{
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}


/* Community social links vertical */
.studio-panel .socials,
.socials{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:14px !important;
}

.studio-panel .socials a,
.socials a{
  display:block !important;
  width:max-content;
  margin:0 !important;
}

@media (max-width:768px){
  .studio-panel .socials,
  .socials{
    align-items:flex-start !important;
  }
}


/* Impressum final text readability */
.legal-card p{
  margin:0 0 18px;
}
.legal-card h2{
  margin-top:34px;
}
.legal-card h2:first-child{
  margin-top:0;
}
.legal-card a{
  word-break:break-word;
}


/* Datenschutz final readability */
.legal-card ul{
  color:var(--muted);
  line-height:1.75;
  margin:0 0 22px 1.25rem;
  padding:0;
}
.legal-card li{
  margin-bottom:6px;
}


/* Footer vertical centered layout */
.footer-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
  padding:42px 0;
}

.footer-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.footer-links a{
  display:block;
}

.footer-copy{
  margin:0;
}


/* Trailer gallery like screenshots */
.trailer-slider-wrapper{
  position:relative;
  display:flex;
  align-items:center;
  gap:18px;
  max-width:1280px;
  margin-inline:auto;
  overflow:hidden;
}

.trailer-slider{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 36px) / 3);
  gap:18px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  scroll-padding:0;
  scrollbar-width:none;
  padding:12px 4px;
  flex:1 1 auto;
  min-width:0;
}

.trailer-slider::-webkit-scrollbar{
  display:none;
}

.trailer-slider .trailer-card{
  scroll-snap-align:start;
  min-height:100%;
}

.trailer-arrow{
  flex:0 0 auto;
  width:58px;
  height:58px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  backdrop-filter:blur(12px);
  transition:.25s ease;
  box-shadow:0 0 24px rgba(0,245,255,.14);
}

.trailer-arrow:hover{
  transform:scale(1.08);
  box-shadow:0 0 32px rgba(255,61,242,.28);
}

@media (max-width:920px){
  .trailer-slider{
    grid-auto-columns:calc((100% - 18px) / 2);
  }
}

@media (max-width:640px){
  .trailer-slider{
    grid-auto-columns:100%;
  }

  .trailer-arrow{
    width:46px;
    height:46px;
    font-size:1.5rem;
  }
}


/* Working footer: safe, centered, no layout break */
.site-footer{
  padding:36px 0;
  border-top:1px solid rgba(255,255,255,.12);
  background:rgba(5,6,17,.72);
}

.site-footer .footer-bottom{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  text-align:center;
}

.site-footer .footer-bottom p{
  margin:0;
  line-height:1.5;
}

.site-footer .footer-links{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.site-footer .footer-links a{
  display:block;
  margin:0;
}


/* =========================================================
   PREMIUM VISUAL UPGRADE
   ========================================================= */

/* Loading screen */
.page-loader{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 20%, rgba(0,245,255,.20), transparent 34rem),
    radial-gradient(circle at 70% 75%, rgba(255,61,242,.18), transparent 34rem),
    #050611;
  transition:opacity .55s ease, visibility .55s ease;
}
.page-loader.is-hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.loader-logo{
  display:grid;
  justify-items:center;
  gap:14px;
  font-family:Orbitron, Inter, sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.loader-logo img{
  width:92px;
  filter:drop-shadow(0 0 28px rgba(0,245,255,.55)) drop-shadow(0 0 38px rgba(255,61,242,.32));
  animation:loaderPulse 1.6s ease-in-out infinite;
}
.loader-logo span{
  background:linear-gradient(90deg,var(--pink),var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.loader-line{
  width:min(300px,70vw);
  height:3px;
  margin-top:26px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
}
.loader-line i{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--pink));
  animation:loaderLine 1.2s ease-in-out infinite;
}
@keyframes loaderPulse{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.08);opacity:1}
}
@keyframes loaderLine{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(260%)}
}

/* Animated aurora background */
.aurora-bg{
  position:fixed;
  inset:0;
  z-index:-3;
  overflow:hidden;
  pointer-events:none;
  background:#050611;
}
.aurora-bg span{
  position:absolute;
  width:46vw;
  height:46vw;
  min-width:340px;
  min-height:340px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.34;
  mix-blend-mode:screen;
  animation:auroraFloat 18s ease-in-out infinite alternate;
}
.aurora-bg span:nth-child(1){
  left:-12vw;
  top:8vh;
  background:rgba(0,245,255,.45);
}
.aurora-bg span:nth-child(2){
  right:-14vw;
  top:24vh;
  background:rgba(255,61,242,.42);
  animation-delay:-5s;
}
.aurora-bg span:nth-child(3){
  left:28vw;
  bottom:-18vh;
  background:rgba(139,92,246,.48);
  animation-delay:-9s;
}
@keyframes auroraFloat{
  from{transform:translate3d(-2%, -2%,0) scale(1)}
  to{transform:translate3d(7%, 5%,0) scale(1.14)}
}

/* Floating particles */
.particle-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  overflow:hidden;
}
.particle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(0,245,255,.85);
  box-shadow:0 0 14px rgba(0,245,255,.8);
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  from{transform:translateY(105vh);opacity:0}
  10%,85%{opacity:.75}
  to{transform:translateY(-10vh);opacity:0}
}

/* Cinematic reveal polish */
.hero-copy .eyebrow,
.hero-copy h1,
.hero-copy .hero-text,
.hero-actions,
.hero-stats{
  animation:heroRise .9s ease both;
}
.hero-copy h1{animation-delay:.08s}
.hero-copy .hero-text{animation-delay:.16s}
.hero-actions{animation-delay:.24s}
.hero-stats{animation-delay:.32s}
.hero-visual{
  animation:heroFloatIn 1.1s cubic-bezier(.2,.9,.2,1) both, phoneIdle 5s ease-in-out 1.2s infinite;
}
@keyframes heroRise{
  from{opacity:0;transform:translateY(26px);filter:blur(8px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroFloatIn{
  from{opacity:0;transform:translateY(32px) scale(.96) rotateX(8deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
}
@keyframes phoneIdle{
  0%,100%{translate:0 0}
  50%{translate:0 -10px}
}

/* Animated gradient borders */
.game-card,
.feature-card,
.studio-panel,
.contact-card,
.trailer-card,
.gallery-item{
  position:relative;
}
.game-card::before,
.feature-card::before,
.studio-panel::before,
.contact-card::before,
.trailer-card::before,
.gallery-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1px;
  pointer-events:none;
  background:linear-gradient(120deg, transparent, rgba(0,245,255,.55), rgba(255,61,242,.45), transparent);
  opacity:0;
  transition:opacity .25s ease;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
}
.game-card:hover::before,
.feature-card:hover::before,
.studio-panel:hover::before,
.contact-card:hover::before,
.trailer-card:hover::before,
.gallery-item:hover::before{
  opacity:1;
}

/* Mouse reactive glow */
.game-card::after,
.trailer-card::after,
.gallery-item::after,
.feature-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(0,245,255,.22), transparent 34%);
  transition:opacity .18s ease;
  mix-blend-mode:screen;
}
.game-card:hover::after,
.trailer-card:hover::after,
.gallery-item:hover::after,
.feature-card:hover::after{
  opacity:1;
}

/* Trailer cards preview feel */
.trailer-card{
  transform-style:preserve-3d;
  transition:transform .22s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  overflow:hidden;
}
.trailer-card:hover{
  transform:translateY(-8px) scale(1.015);
  border-color:rgba(0,245,255,.58);
  filter:saturate(1.2) contrast(1.05);
  box-shadow:0 0 36px rgba(0,245,255,.18),0 0 70px rgba(255,61,242,.12),0 28px 80px rgba(0,0,0,.58);
}
.trailer-placeholder{
  position:relative;
}
.trailer-placeholder::before{
  content:"▶";
  position:absolute;
  inset:auto auto 22px 22px;
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(135deg,var(--cyan),var(--pink));
  box-shadow:0 0 26px rgba(0,245,255,.28);
}
.trailer-card:hover .trailer-placeholder{
  background:
    radial-gradient(circle at 20% 10%, rgba(0,245,255,.25), transparent 42%),
    radial-gradient(circle at 80% 90%, rgba(255,61,242,.24), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
}

/* Section separators */
.section-separator{
  width:min(1080px, calc(100% - 40px));
  height:1px;
  margin:0 auto;
  background:linear-gradient(90deg, transparent, rgba(0,245,255,.48), rgba(255,61,242,.38), transparent);
  box-shadow:0 0 28px rgba(0,245,255,.22);
}

/* Sticky header extra polish */
.site-header{
  transition:height .24s ease, background .24s ease, box-shadow .24s ease;
}
.site-header.scrolled{
  background:rgba(5,6,17,.90);
  box-shadow:0 12px 44px rgba(0,0,0,.48), 0 0 28px rgba(0,245,255,.08);
}

/* Custom scrollbar */
::-webkit-scrollbar{
  width:10px;
}
::-webkit-scrollbar-track{
  background:#050611;
}
::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:linear-gradient(var(--cyan),var(--pink));
  box-shadow:0 0 18px rgba(0,245,255,.35);
}

/* Premium mobile dock */
.mobile-dock{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:130;
  display:none;
  align-items:center;
  gap:6px;
  padding:8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  background:rgba(8,10,22,.78);
  backdrop-filter:blur(18px);
  box-shadow:0 18px 55px rgba(0,0,0,.42), 0 0 28px rgba(0,245,255,.12);
}
.mobile-dock a{
  padding:10px 12px;
  border-radius:999px;
  color:#fff;
  font-size:.78rem;
  font-weight:900;
}
.mobile-dock a:hover{
  background:rgba(255,255,255,.10);
  color:var(--cyan);
}

/* Audio button placeholder style, only if later added */
.audio-toggle{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:140;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,10,22,.82);
  color:#fff;
  backdrop-filter:blur(14px);
}

@media (max-width:768px){
  .mobile-dock{
    display:flex;
  }
  .cookie-settings-button,
  .cookie-settings-btn{
    bottom:76px!important;
  }
  body{
    padding-bottom:74px;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-loader,
  .aurora-bg span,
  .particle,
  .hero-visual,
  .hero-copy .eyebrow,
  .hero-copy h1,
  .hero-copy .hero-text,
  .hero-actions,
  .hero-stats{
    animation:none!important;
  }
}


/* =========================================================
   ULTRA PREMIUM PHASE 2
   ========================================================= */

:root{
  --theme-a:#00f5ff;
  --theme-b:#ff3df2;
  --theme-c:#8b5cf6;
}

/* Dynamic grid + film texture + spotlight */
.live-grid{
  position:fixed;
  inset:-20%;
  z-index:-4;
  pointer-events:none;
  opacity:.20;
  background:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:70px 70px;
  transform:perspective(900px) rotateX(62deg) translateY(-12%);
  animation:gridDrift 18s linear infinite;
}
@keyframes gridDrift{
  to{background-position:0 140px,140px 0}
}
.noise-overlay{
  position:fixed;
  inset:0;
  z-index:999998;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode:overlay;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.6) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.45) 0 1px, transparent 1px);
  background-size:7px 7px, 11px 11px;
}
.spotlight-layer{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at var(--sx,50%) var(--sy,35%), rgba(0,245,255,.16), transparent 34rem);
  transition:background .08s linear;
}

/* Dynamic theme lighting */
body{
  transition:background .45s ease;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.26;
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--theme-a) 45%, transparent), transparent 28rem),
    radial-gradient(circle at 84% 24%, color-mix(in srgb, var(--theme-b) 42%, transparent), transparent 30rem);
  transition:opacity .35s ease;
}

/* Ultra buttons */
.btn,
.store-btn{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn::after,
.store-btn::after{
  content:"";
  position:absolute;
  inset:-120% -30%;
  z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform:translateX(-120%) rotate(12deg);
  transition:transform .55s ease;
}
.btn:hover::after,
.store-btn:hover::after{
  transform:translateX(120%) rotate(12deg);
}
.btn:active,
.store-btn:active{
  transform:translateY(1px) scale(.98);
}

/* Holographic game cards */
.games-slider .game-card{
  isolation:isolate;
  cursor:pointer;
}
.games-slider .game-card::before{
  background:
    linear-gradient(120deg,
      transparent,
      color-mix(in srgb, var(--theme-a) 65%, transparent),
      rgba(255,255,255,.35),
      color-mix(in srgb, var(--theme-b) 55%, transparent),
      transparent);
}
.games-slider .game-card:hover{
  box-shadow:
    0 0 42px color-mix(in srgb, var(--theme-a) 30%, transparent),
    0 0 76px color-mix(in srgb, var(--theme-b) 22%, transparent),
    0 34px 90px rgba(0,0,0,.65);
}
.games-slider .game-card .game-content::before{
  content:"";
  position:absolute;
  inset:auto 22px 22px 22px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--theme-a), var(--theme-b), transparent);
  opacity:.0;
  transition:.25s ease;
}
.games-slider .game-card:hover .game-content::before{
  opacity:.75;
}

/* Genre badges */
.tag{
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.065);
  box-shadow:inset 0 0 18px rgba(255,255,255,.035);
}

/* Cinematic scroll-in variants */
.reveal.visible{
  animation:cinematicReveal .75s cubic-bezier(.2,.85,.2,1) both;
}
@keyframes cinematicReveal{
  from{opacity:0;transform:translateY(34px) scale(.985);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}

/* Hero live mockup screen cycling polish */
.phone-screen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.16) 48%, transparent 58%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.18), transparent 36%);
  mix-blend-mode:screen;
  opacity:.55;
}
.phone-screen img{
  opacity:1;
}
.phone-screen img.is-switching{
  animation:screenSwitch .55s ease;
}
@keyframes screenSwitch{
  0%{opacity:.35;transform:scale(1.08) translateY(8px)}
  100%{opacity:1;transform:scale(1.045) translateY(0)}
}

/* Trailer gallery premium preview */
.trailer-slider .trailer-card{
  cursor:pointer;
}
.trailer-slider .trailer-card::before{
  background:
    linear-gradient(120deg, transparent, var(--theme-a), rgba(255,255,255,.28), var(--theme-b), transparent);
}
.trailer-card:hover .trailer-placeholder span{
  transform:translateY(-8px);
  text-shadow:0 0 22px var(--theme-a), 0 0 28px var(--theme-b);
}
.trailer-placeholder span{
  transition:.25s ease;
}

/* Liquid glass panels */
.studio-panel,
.contact-card,
.legal-card,
.cookie-consent-box,
.game-detail-panel{
  backdrop-filter:blur(22px) saturate(1.25);
}

/* Mobile dock active indicator */
.mobile-dock a{
  position:relative;
  transition:.22s ease;
}
.mobile-dock a.active,
.mobile-dock a:hover{
  background:linear-gradient(135deg, rgba(0,245,255,.16), rgba(255,61,242,.14));
  box-shadow:0 0 20px rgba(0,245,255,.18);
}

/* Game detail modal */
.game-detail-modal{
  position:fixed;
  inset:0;
  z-index:99998;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.78);
  backdrop-filter:blur(14px);
  overflow:auto;
}
.game-detail-modal.active{
  display:flex;
}
.game-detail-panel{
  position:relative;
  width:min(1040px,100%);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:28px;
  padding:28px;
  border-radius:32px;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--theme-a) 22%, transparent), transparent 28rem),
    radial-gradient(circle at 90% 85%, color-mix(in srgb, var(--theme-b) 20%, transparent), transparent 28rem),
    rgba(8,10,22,.94);
  box-shadow:0 34px 130px rgba(0,0,0,.75), 0 0 55px color-mix(in srgb, var(--theme-a) 20%, transparent);
}
.game-modal-media{
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:#050611;
}
.game-modal-media img{
  width:100%;
  height:100%;
  min-height:420px;
  object-fit:cover;
}
.game-modal-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.game-modal-content h2{
  font-size:clamp(2rem,5vw,4rem);
  margin-bottom:16px;
}
.game-modal-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:18px 0 26px;
}
.game-modal-badges span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.075);
  color:#fff;
  font-weight:900;
  font-size:.82rem;
}
.game-modal-close{
  position:absolute;
  top:14px;
  right:14px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  cursor:pointer;
}

/* Section ambient background on hover */
#trailers:hover,
#games:hover,
#showcase:hover{
  --sectionGlow:1;
}

/* smoother page feel */
html{
  scroll-behavior:smooth;
}

@media (max-width:820px){
  .game-detail-panel{
    grid-template-columns:1fr;
    padding:20px;
  }
  .game-modal-media img{
    min-height:auto;
    aspect-ratio:16/10;
  }
}


/* =========================================================
   AAA EXPERIENCE LAYER
   ========================================================= */

/* WebGL/canvas nebula background */
.webgl-nebula{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-6;
  pointer-events:none;
  opacity:.72;
}

/* Custom cursor orb */
.cursor-orb{
  position:fixed;
  left:0;
  top:0;
  width:34px;
  height:34px;
  border-radius:50%;
  pointer-events:none;
  z-index:999997;
  opacity:.72;
  transform:translate3d(-50%,-50%,0);
  border:1px solid rgba(0,245,255,.55);
  box-shadow:0 0 22px rgba(0,245,255,.32), inset 0 0 18px rgba(255,61,242,.16);
  mix-blend-mode:screen;
  transition:width .18s ease,height .18s ease,opacity .18s ease,border-color .18s ease;
}
.cursor-orb.is-hover{
  width:58px;
  height:58px;
  opacity:.92;
  border-color:rgba(255,61,242,.72);
  box-shadow:0 0 34px rgba(255,61,242,.36), inset 0 0 20px rgba(0,245,255,.18);
}
@media (pointer:coarse){
  .cursor-orb{display:none}
}

/* 3D Coverflow mode for Featured Games */
.games-slider{
  perspective:1200px;
  transform-style:preserve-3d;
}
.games-slider .game-card{
  transform-origin:center;
  transition:transform .35s cubic-bezier(.2,.9,.2,1), opacity .3s ease, filter .3s ease, box-shadow .3s ease;
}
.games-slider .game-card.is-near{
  opacity:.86;
  filter:saturate(.9) brightness(.92);
}
.games-slider .game-card.is-active{
  transform:translateZ(46px) scale(1.035);
  filter:saturate(1.18) brightness(1.04);
  z-index:4;
}
.games-slider .game-card.is-left{
  transform:rotateY(10deg) translateX(8px) scale(.98);
}
.games-slider .game-card.is-right{
  transform:rotateY(-10deg) translateX(-8px) scale(.98);
}

/* Realistic glare on cards and panels */
.game-card .game-content,
.trailer-card,
.gallery-item,
.hub-card{
  overflow:hidden;
}
.game-card .game-content::after,
.trailer-card .trailer-placeholder::after,
.gallery-item::after,
.hub-card::after{
  content:"";
  position:absolute;
  inset:-60%;
  background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.18), transparent 55%);
  transform:translateX(-80%) rotate(10deg);
  opacity:0;
  transition:transform .7s ease, opacity .25s ease;
  pointer-events:none;
}
.game-card:hover .game-content::after,
.trailer-card:hover .trailer-placeholder::after,
.gallery-item:hover::after,
.hub-card:hover::after{
  opacity:1;
  transform:translateX(80%) rotate(10deg);
}

/* Magnetic buttons extra premium */
.btn,
.store-btn,
.games-arrow,
.showcase-arrow,
.trailer-arrow{
  will-change:transform;
}

/* Hero HUD overlays */
.hero-hud{
  position:absolute;
  padding:10px 13px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  background:rgba(8,10,22,.70);
  backdrop-filter:blur(16px);
  color:#fff;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  box-shadow:0 0 24px rgba(0,245,255,.16);
  animation:hudFloat 5s ease-in-out infinite;
}
.hud-a{right:8%;bottom:30%}
.hud-b{left:5%;top:22%;animation-delay:-2s}
@keyframes hudFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* Holographic typography */
h1,
.section-head h2,
.publisher-hub h2{
  background:linear-gradient(90deg,#fff 0%,#dbeafe 35%,var(--theme-a) 55%,var(--theme-b) 82%,#fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 34px color-mix(in srgb, var(--theme-a) 18%, transparent);
}

/* Publisher hub */
.publisher-hub{
  position:relative;
}
.hub-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.hub-card{
  position:relative;
  min-height:170px;
  padding:24px;
  border-radius:26px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.04));
  box-shadow:0 24px 70px rgba(0,0,0,.42);
  backdrop-filter:blur(18px);
  transition:.28s ease;
}
.hub-card:hover{
  transform:translateY(-8px);
  border-color:color-mix(in srgb, var(--theme-a) 55%, transparent);
  box-shadow:0 0 36px color-mix(in srgb, var(--theme-a) 20%, transparent),0 26px 70px rgba(0,0,0,.55);
}
.hub-card strong{
  display:block;
  color:#fff;
  font-size:1.18rem;
  margin-bottom:12px;
}
.hub-card span{
  color:var(--muted);
  line-height:1.6;
}

/* Fullscreen cinematic trailer overlay */
.trailer-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(0,0,0,.82);
  backdrop-filter:blur(16px);
}
.trailer-overlay.active{
  display:flex;
}
.trailer-overlay-panel{
  position:relative;
  width:min(1040px,100%);
  border-radius:32px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--theme-a) 20%, transparent), transparent 34rem),
    radial-gradient(circle at 80% 90%, color-mix(in srgb, var(--theme-b) 18%, transparent), transparent 34rem),
    rgba(8,10,22,.96);
  padding:24px;
  box-shadow:0 34px 130px rgba(0,0,0,.76),0 0 60px color-mix(in srgb, var(--theme-a) 18%, transparent);
}
.trailer-stage{
  aspect-ratio:16/9;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(0,245,255,.16), rgba(255,61,242,.12)),
    #050611;
  display:grid;
  place-items:center;
}
.trailer-stage-placeholder{
  font-family:Orbitron,Inter,sans-serif;
  font-size:clamp(1.3rem,4vw,3rem);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
  text-align:center;
  background:linear-gradient(90deg,var(--theme-a),#fff,var(--theme-b));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.trailer-stage-note{
  margin:16px 4px 0;
  text-align:center;
}
.trailer-overlay-close{
  position:absolute;
  top:12px;
  right:12px;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:1.8rem;
  cursor:pointer;
  z-index:2;
}

/* Scroll storytelling depth */
.section{
  transform-style:preserve-3d;
}
.section.is-story-active .section-head{
  transform:translateZ(20px);
}

/* Advanced nav active glow */
.nav-menu a.active{
  color:var(--theme-a);
  text-shadow:0 0 18px var(--theme-a);
}

/* App-store style ribbons */
.game-card h3::after{
  content:"";
  display:block;
  width:46px;
  height:3px;
  margin-top:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--theme-a),var(--theme-b));
  box-shadow:0 0 14px color-mix(in srgb, var(--theme-a) 45%, transparent);
}

/* Better mobile */
@media (max-width:920px){
  .hub-grid{grid-template-columns:1fr}
  .hero-hud{display:none}
}
@media (max-width:640px){
  .trailer-stage{aspect-ratio:9/14}
}
@media (prefers-reduced-motion:reduce){
  .live-grid,
  .hero-hud{
    animation:none!important;
  }
}


/* Featured Games: exakt 3 Karten sichtbar, keine angeschnittene 4. Karte */
.games-slider-wrapper{
  overflow:hidden !important;
}

.games-slider{
  overflow-x:auto;
  overflow-y:visible;
  scroll-snap-type:x mandatory;
  scroll-padding:0;
  grid-auto-columns:calc((100% - 44px) / 3) !important;
  gap:22px !important;
  padding:12px 0 !important;
  margin:0 !important;
}

.games-slider .game-card{
  min-width:0 !important;
  width:100% !important;
  scroll-snap-align:start;
}

/* Coverflow darf keine nächste Karte in den sichtbaren Bereich kippen */
.games-slider .game-card.is-left,
.games-slider .game-card.is-right,
.games-slider .game-card.is-near,
.games-slider .game-card.is-active{
  transform:none !important;
}

@media (max-width:920px){
  .games-slider{
    grid-auto-columns:calc((100% - 22px) / 2) !important;
  }
}

@media (max-width:640px){
  .games-slider{
    grid-auto-columns:100% !important;
  }
}


/* ======================================================
   FEATURED GAMES: markierten dunklen Schatten entfernen
   Ursache war der große schwarze box-shadow der Karten.
   ====================================================== */

/* Slider selbst bleibt transparent */
#games .games-slider-wrapper,
#games .games-slider{
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}

/* Exakt 3 Karten sichtbar, kein Anschnitt der 4. Karte */
#games .games-slider-wrapper{
  overflow:hidden !important;
}

#games .games-slider{
  grid-auto-columns:calc((100% - 44px) / 3) !important;
  gap:22px !important;
  padding:12px 0 !important;
  margin:0 !important;
}

/* KEIN schwarzer Schatten mehr zwischen/unter den Karten */
#games .game-card,
#games .games-slider .game-card{
  margin:0 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 24px rgba(0,245,255,.08),
    0 0 34px rgba(255,61,242,.05) !important;
}

/* Hover ohne dunkle Fläche, nur Neon-Glow */
#games .game-card:hover,
#games .games-slider .game-card:hover{
  box-shadow:
    0 0 0 1px rgba(0,245,255,.34),
    0 0 32px rgba(0,245,255,.20),
    0 0 44px rgba(255,61,242,.13) !important;
}

/* Coverflow-/3D-Offsets verhindern, damit keine Schatten/Überstände entstehen */
#games .games-slider .game-card.is-left,
#games .games-slider .game-card.is-right,
#games .games-slider .game-card.is-near,
#games .games-slider .game-card.is-active{
  transform:none !important;
}

/* Pseudo-Overlays dürfen nicht über die Kartenfläche hinaus abdunkeln */
#games .game-card::before,
#games .game-card::after{
  inset:0 !important;
  border-radius:inherit !important;
}

/* Tablet/Mobile sauber halten */
@media (max-width:920px){
  #games .games-slider{
    grid-auto-columns:calc((100% - 22px) / 2) !important;
  }
}

@media (max-width:640px){
  #games .games-slider{
    grid-auto-columns:100% !important;
  }
}


/* Trailer videos inside existing trailer cards */
.trailer-card{
  overflow:hidden;
}

.trailer-card .trailer-video{
  width:100%;
  aspect-ratio:9/16;
  display:block;
  object-fit:cover;
  border-radius:22px;
  background:#050611;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 28px rgba(0,245,255,.10);
}

.trailer-card h3{
  margin:14px 0 0;
  font-size:1.05rem;
  color:#fff;
}

/* Alte Placeholder in Trailer Cards ausblenden, falls noch vorhanden */
.trailer-card .trailer-placeholder{
  display:none !important;
}


/* ======================================================
   TRAILER CARDS EXACTLY LIKE SCREENSHOT CARDS
   ====================================================== */

/* Trailer-Slider nutzt exakt dieselbe sichtbare Kartenlogik wie Screenshots */
#trailers .trailer-slider-wrapper{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:18px !important;
  max-width:1280px !important;
  margin-inline:auto !important;
  overflow:hidden !important;
}

#trailers .trailer-slider{
  display:grid !important;
  grid-auto-flow:column !important;
  grid-auto-columns:calc((100% - 36px) / 3) !important;
  grid-template-columns:none !important;
  gap:18px !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  scroll-behavior:smooth !important;
  scroll-snap-type:x mandatory !important;
  scroll-padding:0 !important;
  scrollbar-width:none !important;
  padding:12px 4px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}

#trailers .trailer-slider::-webkit-scrollbar{
  display:none !important;
}

/* Trailer-Karte verhält sich wie Screenshot-Karte */
#trailers .trailer-card{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:100% !important;
  scroll-snap-align:start !important;
  border-radius:22px !important;
  overflow:hidden !important;
  padding:0 !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.14) !important;
}

/* Video exakt im gleichen Hochformat wie Screenshot-Bilder */
#trailers .trailer-card video,
#trailers .trailer-card .trailer-video{
  width:100% !important;
  height:auto !important;
  aspect-ratio:9/16 !important;
  display:block !important;
  object-fit:cover !important;
  border-radius:22px !important;
  border:0 !important;
  box-shadow:none !important;
  background:#050611 !important;
}

/* Titel unter Videos entfernen, damit Höhe exakt wie Screenshot-Karten ist */
#trailers .trailer-card h3{
  display:none !important;
}

/* Pfeile exakt wie Screenshot-Galerie */
#trailers .trailer-arrow{
  flex:0 0 auto !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
}

/* Tablet: exakt wie Screenshots 2 Karten */
@media (max-width:920px){
  #trailers .trailer-slider{
    grid-auto-columns:calc((100% - 18px) / 2) !important;
  }
}

/* Mobile: exakt wie Screenshots 1 Karte */
@media (max-width:640px){
  #trailers .trailer-slider{
    grid-auto-columns:100% !important;
  }

  #trailers .trailer-arrow{
    width:46px !important;
    height:46px !important;
    font-size:1.5rem !important;
  }
}