*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid #7bdcff;outline-offset:2px}
html{scroll-behavior:smooth}

:root{
  --bg:#0b0d12;
  --panel:#121521;
  --soft:#1a1f2e;
  --muted:#a8b0c0;
  --text:#e6ebff;
  --accent:#7bdcff;
  --accent2:#ffd36b;
  --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --w:1200px;
  --nav-h:64px;
}

body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  background:#0f1422;
  color:var(--text);
  line-height:1.6;
  padding-top:var(--nav-h);
  cursor:url('assets/mouse.png'),auto;
}

body::before{
  content:'';
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:2000px;
  height:100vh;
  border-left:1px solid rgba(123,220,255,.15);
  border-right:1px solid rgba(123,220,255,.15);
  box-shadow:
    inset 0 0 100px rgba(123,220,255,.03),
    0 0 80px rgba(123,220,255,.08);
  pointer-events:none;
  z-index:10000;
}

main{
  position:relative;
  background:#0f1422;
  max-width:2000px;
  margin:0 auto;
}

a,button,.btn,.thumb,.card{
  cursor:url('assets/mouse.png'),pointer;
}

.wrap{max-width:var(--w);margin:0 auto;padding:0 20px}
section{padding:60px 0}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}
.h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:0 0 1rem}
.muted{color:var(--muted)}
.grid{display:grid;gap:20px}
.card{background:var(--panel);border:1px solid #ffffff10;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card.elevated{border:1px solid #ffffff18}
.pad{padding:24px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.btn{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.9rem 1.1rem;
  border-radius:12px;
  border:2px solid #888;
  background:rgba(0,0,0,.20);
  backdrop-filter:blur(2px);
  color:#fff;
  box-shadow:var(--shadow);
  transition:all .3s ease;
}
.btn:hover{
  transform:translateY(-2px);
  border-color:var(--accent);
  background:#fff;
  color:#000;
  box-shadow:0 8px 24px rgba(123,220,255,.3);
}
.btn.secondary{background:rgba(0,0,0,.20);border:2px solid #888}
.btn.secondary:hover{background:#fff;border-color:var(--accent);color:#000}
.btn.ks{
  background: linear-gradient(135deg, #05CE78, #03a85e);
  border: 2px solid #05CE78;
  padding: 1rem 1.8rem;
  font-size: 1rem;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 0 rgba(5,206,120,0),
    0 8px 32px rgba(5,206,120,0.45);
  animation: ks-pulse 2.4s ease-in-out infinite;
  transform: scale(1.08);
}
.btn.ks::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 20%,rgba(255,255,255,0.18) 50%,transparent 80%);
  transform:translateX(-120%);
  animation:ks-shimmer 2.6s ease-in-out infinite;
}
.ks-inner{
  display:flex;
  align-items:center;
  gap:.75rem;
}
.ks-inner .icon{
  width:28px;
  height:28px;
  flex-shrink:0;
  filter:brightness(0) invert(1);
}
.ks-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
}
.ks-label{
  font-size:1.05rem;
  font-weight:900;
  letter-spacing:.08em;
  color:#fff;
}
.ks-sub{
  font-size:.72rem;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  letter-spacing:.03em;
}
.btn.ks:hover{
  background:linear-gradient(135deg,#07e888,#05CE78);
  border-color:#07e888;
  color:#fff;
  transform:scale(1.13) translateY(-2px);
  box-shadow:
    0 0 30px rgba(5,206,120,.7),
    0 12px 40px rgba(5,206,120,.5);
}
@keyframes ks-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(5,206,120,0),0 8px 32px rgba(5,206,120,.45)}
  50%{box-shadow:0 0 0 8px rgba(5,206,120,0.12),0 8px 40px rgba(5,206,120,.6)}
}
@keyframes ks-shimmer{
  0%{transform:translateX(-120%)}
  60%,100%{transform:translateX(120%)}
}
.btn .icon{width:20px;height:20px}

header{
  position:fixed;
  top:0;
  left:50%;
  transform:translateX(-50%);
  right:auto;
  width:100%;
  max-width:2000px;
  height:var(--nav-h);
  z-index:1000;
  background:transparent;
  border-bottom:1px solid transparent;
  box-shadow:none;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease;
}

header.is-sticky{
  background:rgba(0,0,0,.58);
  backdrop-filter:blur(8px) saturate(130%);
  border-bottom:1px solid #ffffff18;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:40px}
.nav a.logo{display:flex;align-items:center;gap:.6rem;font-weight:200;margin-right:auto}
.nav img.logo{
  max-height:150px;
  width:200px;
  height:auto; 
}
.primary-nav{flex:0 0 auto}
.primary-nav ul{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.primary-nav a.link{color:#fff;font-weight:700;font-size:1.05rem;text-shadow:0 2px 6px rgba(0,0,0,.55);transition:color .3s ease}
.primary-nav a.link:hover{color:var(--accent)}

.social-top{display:flex;align-items:center;gap:12px;list-style:none;margin:0;padding:0;flex:0 0 auto}
.social-top li{list-style:none}
.social-top li::marker{content:""}
.social-top a{transition:transform .3s ease}
.social-top img{width:24px;height:24px;object-fit:contain;filter:brightness(1);transition:filter .3s ease}
.social-top a:hover{transform:scale(1.12)}
.social-top a:hover img{filter:brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(1089%) hue-rotate(156deg) brightness(103%) contrast(101%)}

.burger{display:none}
.mobile{display:none!important}

@media (max-width:900px){
  .primary-nav ul{display:none}
  .burger{display:block}
  .mobile{
    display:none!important;
    position:absolute;
    top:var(--nav-h);
    left:0;
    right:0;
    background:#0b0d12f2;
    border-bottom:1px solid #ffffff14;
    z-index:60;
  }
  .mobile.open{display:block!important}
  .mobile a{display:block;padding:16px 20px;border-top:1px solid #ffffff10;color:var(--text);transition:color .3s ease}
  .mobile a:hover{color:var(--accent)}
}

.hero{position:relative}
.hero,.hero-video{margin-top:calc(-1 * var(--nav-h))}
.hero-video{
  min-height:100vh;
  height:100vh;
  padding-top:clamp(calc(var(--nav-h) + 16px),10vh,160px);
  padding-bottom:clamp(24px,6vh,120px);
}
.hero-video .video-bg{position:absolute;inset:0;overflow:hidden}
.hero-video video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:70% 40%;
  pointer-events:none;
}

.hero-video video::-webkit-media-controls{
  display:none!important;
}

.hero-video video::-webkit-media-controls-enclosure{
  display:none!important;
}
.hero-video .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(5,7,12,.25),rgba(5,7,12,.25)),
             radial-gradient(60% 100% at 50% 100%,rgba(0,0,0,.15),transparent 60%);
}
.hero-video::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:120px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.18),rgba(0,0,0,0));
}
.hero-video .inner{position:relative;z-index:1;display:flex;align-items:center;min-height:100vh;padding-bottom:12vh}
.center-stack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin:0 auto;padding:0}
.hero-logo{width:min(800px,60vw);height:auto;filter:drop-shadow(0 14px 40px rgba(0,0,0,.5))}
.tagline{color:#fff;font-weight:bold;text-shadow:2px 2px 4px rgba(0,0,0,.6);font-size:clamp(1rem,2.3vw,1.25rem);margin-top:6px}
.hero-video .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}

@media (max-width:900px){
  .hero-video{min-height:58vh}
  .hero-logo{width:min(420px,72vw)}
}

.intro-split{position:relative;padding:clamp(56px,8vw,96px) 0}
.intro-split .bg-panel{
  position:absolute;
  inset:0;
  height:100%;
  background:#0f1422 url('assets/background_castle.webp') center/cover no-repeat;
  z-index:0;
  pointer-events:none;
}
.intro-split .split{
  position:relative;
  z-index:1;
  display:grid;
  align-items:center;
  gap:clamp(24px,4vw,56px);
  grid-template-columns:minmax(280px,520px) 1fr;
}
.intro-split .visual img{
  width:100%;
  height:auto;
  transform:translateY(-150px) translate(var(--px,0),var(--py,0));
  will-change:transform;
  pointer-events:none;
}
.intro-split:hover .visual img{transition:transform .12s ease-out}

@media (max-width:980px),(prefers-reduced-motion:reduce){
  .intro-split .visual img{transform:translateY(-150px)}
}

.intro-split .eyebrow{color:var(--accent);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.intro-split .display{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.05;margin:0 0 14px;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.intro-split .copy .muted{font-size:1.05rem}

@media (max-width:980px){
  .intro-split .split{grid-template-columns:1fr}
  .intro-split .visual{order:1;max-width:520px;margin:0 auto}
  .intro-split .copy{order:2}
}

.chars-spotlight{position:relative;padding:clamp(56px,8vw,96px) 0;overflow:hidden}
.chars-spotlight .bg-panel{position:absolute;inset:0;background:#0f1422 url('assets/background_castle.webp') center/cover no-repeat;z-index:0}
.chars-spotlight .wrap{position:relative;z-index:1}

.chars-spotlight .spotlight{
  display:grid;
  grid-template-columns:minmax(320px,640px) 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:center;
}

.chars-spotlight .visual{position:relative;min-height:540px;display:flex;align-items:center}
.chars-spotlight .keyart{
  position:absolute;
  left:-38%;
  bottom:-6%;
  height:125%;
  width:auto;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 26px 60px rgba(0,0,0,.45));
  transform:translate(var(--px,0),var(--py,0));
  z-index:4;
  transition:transform .5s ease-out,opacity .3s ease;
}

.chars-spotlight .keyart.swapping{
  opacity:0;
}

.chars-spotlight .ingame-frame{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:clamp(420px,38vw,520px);
  aspect-ratio:16/9;
  background:transparent;
  border:none;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  overflow:hidden;
  z-index:2;
  transition:transform .5s ease-out,opacity .3s ease;
}

.chars-spotlight .ingame-frame.swapping{
  opacity:0;
}

.chars-spotlight .ingame-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .3s ease,transform .3s ease;
}

.chars-spotlight .ingame-frame img.swap-out{
  animation:fadeOutScale .3s ease forwards;
}

.chars-spotlight .ingame-frame img.swap-in{
  animation:fadeInScale .3s ease forwards;
}

@keyframes fadeOutScale{
  0%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(0.95)}
}

@keyframes fadeInScale{
  0%{opacity:0;transform:scale(1.05)}
  100%{opacity:1;transform:scale(1)}
}

.chars-spotlight .copy{color:#e6ebff;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.chars-spotlight .eyebrow{color:var(--accent);font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;transition:opacity .3s ease,transform .3s ease}
.chars-spotlight .name{font-size:clamp(2rem,5.2vw,4rem);line-height:.95;margin:0 0 6px;transition:opacity .3s ease,transform .3s ease}
.chars-spotlight .era{margin:0 0 16px;color:#a8b0c0;font-weight:700;letter-spacing:.05em;transition:opacity .3s ease,transform .3s ease}
.chars-spotlight .desc{margin:0;font-size:1.05rem;color:#cfd6e6;max-width:58ch;transition:opacity .3s ease,transform .3s ease}

.chars-spotlight .copy.fade-out > *{opacity:0;transform:translateY(10px)}
.chars-spotlight .copy.fade-in > *{animation:fadeInUp .4s ease forwards}

@keyframes fadeInUp{
  0%{opacity:0;transform:translateY(10px)}
  100%{opacity:1;transform:translateY(0)}
}

.chars-spotlight .carousel{
  --bubble:88px;
  --gap:18px;
  --arrow:38px;
  position:relative;
  display:grid;
  grid-template-columns:auto max-content auto;
  align-items:center;
  justify-content:center;
  column-gap:12px;
  margin-top:12px;
}
.chars-spotlight .carousel .nav{
  width:var(--arrow);
  height:var(--arrow);
  border-radius:10px;
  border:1px solid #ffffff22;
  background:#0b0f1a7a;
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
  color:#fff;
  font-size:28px;
  font-weight:700;
  line-height:1;
}
.chars-spotlight .carousel .nav:hover{transform:translateY(-1px);background:#101626d9;border-color:#ffffff44}
.chars-spotlight .carousel .nav.prev{grid-column:1;justify-self:end}
.chars-spotlight .carousel .nav.next{grid-column:3;justify-self:start}

.chars-spotlight .track{
  grid-column:2;
  display:grid;
  grid-auto-flow:column;
  gap:var(--gap);
  align-items:center;
  overflow-x:auto;
  scrollbar-width:none;
  padding:6px;
  border-radius:14px;
}
.chars-spotlight .track::-webkit-scrollbar{display:none}
.chars-spotlight .thumb{
  width:var(--bubble);
  height:var(--bubble);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#0f1422;
  border:2px solid #ffffff25;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
  overflow:hidden;
  padding:0;
}
.chars-spotlight .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.6);
  transform-origin:50% 50%;
}
.chars-spotlight .thumb:is(:hover,:focus-visible){transform:translateY(-1px);border-color:#ffffff33}
.chars-spotlight .thumb.is-active{border-color:var(--accent);box-shadow:0 0 0 3px #ffffff14,0 8px 28px rgba(0,0,0,.45)}
.chars-spotlight .thumb.is-active img{transform:scale(1.7)}
.chars-spotlight .thumb:hover img{transform:scale(1.65)}

@media (min-width:1025px){
  .chars-spotlight .spotlight{
    --col-gap:clamp(24px,4vw,56px);
    gap:var(--col-gap);
  }
  .chars-spotlight .ingame-frame{
    right:calc(-1 * var(--col-gap) - 40px);
    top:50%;
    transform:translateY(-50%);
    z-index:2;
  }
}

@media (min-width:1400px){
  .chars-spotlight .ingame-frame{
    right:calc(-1 * var(--col-gap) + 30px);
  }
}

@media (max-width:1024px){
  .chars-spotlight .spotlight{grid-template-columns:1fr}
  .chars-spotlight .visual{min-height:480px}
  .chars-spotlight .keyart{left:-2%;height:auto;width:110%;bottom:-2%}
  .chars-spotlight .ingame-frame{right:4%;width:clamp(260px,50%,420px)}
}

@media (max-width:640px){
  .chars-spotlight .visual{min-height:420px}
  .chars-spotlight .ingame-frame{width:70%;right:6%}
}

/* ── Gameplay Features ── */
.gameplay-features{
  position:relative;
  padding:clamp(56px,8vw,96px) 0;
  background:#0f1422;
}

.features-grid{
  display:grid !important;
  grid-template-columns:repeat(2, 1fr) !important;
  gap:28px;
}

@media (max-width:700px){
  .features-grid{
    grid-template-columns:1fr !important;
  }
}

.feature-card{
  display:flex;
  flex-direction:column;
  border:1px solid #ffffff10;
  border-radius:var(--radius);
  overflow:hidden;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  background:var(--panel);
}

.feature-card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(123,220,255,.18),0 20px 48px rgba(0,0,0,.4);
}

.feature-img-wrap{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  background:var(--soft);
  overflow:hidden;
}

.feature-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease;
  image-rendering:pixelated;
}

.feature-card:hover .feature-img-wrap img{
  transform:scale(1.05);
}

.feature-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.feature-title{
  font-size:clamp(1.1rem,2vw,1.35rem);
  margin:0;
  color:var(--text);
  line-height:1.25;
  transition:color .3s ease;
}

.feature-card:hover .feature-title{
  color:var(--accent);
}

.feature-desc{
  margin:0;
  font-size:.95rem;
  line-height:1.65;
  flex:1;
}



/* ── Gallery ── */
.gallery{position:relative;padding:clamp(56px,8vw,96px) 0}
.gallery .grid{grid-template-columns:repeat(4,1fr)}
.gallery .card{
  position:relative;
  overflow:hidden;
  border:1px solid #ffffff10;
  border-radius:var(--radius);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.gallery .card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease;
  image-rendering:pixelated;
  height:180px;
}
.gallery .card:hover{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(123,220,255,.25),0 12px 28px rgba(0,0,0,.4);
}
.gallery .card:hover img{transform:scale(1.08)}

@media (max-width:1000px){
  .gallery .grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:700px){
  .gallery .grid{grid-template-columns:repeat(2,1fr)}
}

.community-section{padding:clamp(56px,8vw,96px) 0;position:relative}
.community-section .panel{
  position:relative;
  overflow:hidden;
  padding:clamp(24px,3vw,40px);
  background:#0f1422;
  border:1px solid #ffffff14;
  border-radius:28px;
  box-shadow:0 25px 60px rgba(0,0,0,.35);
  max-width:var(--w);
  margin:0 auto 28px;
  z-index:1;
}
.community-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,4vw,56px);
  align-items:start;
  justify-content:center;
}
.community-grid .right{max-width:500px;width:100%}

@media (max-width:900px){
  .community-grid{grid-template-columns:1fr}
}

.social-icons{display:flex;flex-wrap:wrap;gap:22px;align-items:center;justify-content:flex-start;margin-top:25px}
.social-icons .icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  transition:all .3s ease;
}
.social-icons img{width:28px;height:28px;filter:brightness(0) invert(1);transition:filter .3s ease}
.social-icons .icon:hover{
  border-color:var(--accent);
  transform:scale(1.08);
  box-shadow:0 0 20px rgba(123,220,255,.3);
}
.social-icons .icon:hover img{
  filter:brightness(0) saturate(100%) invert(79%) sepia(46%) saturate(1089%) hue-rotate(156deg) brightness(103%) contrast(101%);
}

.nl-form{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.nl-form input[type="email"]{
  flex:1 1 420px;
  min-width:320px;
  max-width:560px;
  background:transparent;
  border:2px solid #ffffff28;
  border-radius:12px;
  padding:1rem 1.2rem;
  color:var(--text);
  font-size:1rem;
  height:54px;
  box-shadow:inset 0 0 0 1px #00000033;
}
.btn-outline{
  height:54px;
  padding:0 1.2rem;
  background:transparent;
  border:2px solid var(--accent);
  border-radius:14px;
  color:#fff;
  font-weight:700;
  box-shadow:0 0 0 1px #ffffff10 inset;
  transition:transform .12s ease,background .12s ease,border-color .12s;
}
.btn-outline:hover{transform:translateY(-1px);background:#ffffff08;border-color:#9be8ff}

footer{
  position:relative;
  z-index:2;
  padding:40px 0 72px;
  border-top:1px solid #ffffff12;
  margin-top:16px;
  background:#0f1422;
  max-width:2000px;
  margin-left:auto;
  margin-right:auto;
}
footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}

.lightbox{
  position:fixed;
  inset:0;
  display:none;
  place-items:center;
  background:rgba(0,0,0,.9);
  z-index:9999;
  padding:4vh 4vw;
  opacity:0;
  transition:opacity .4s ease;
}
.lightbox.open{
  display:grid;
  animation:fadeIn .4s ease forwards;
}
.lightbox img{
  max-width:92vw;
  max-height:92vh;
  object-fit:contain;
  border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:scale(0.5);
  opacity:0;
  transition:transform .7s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .7s ease;
}
.lightbox.open img{
  transform:scale(1);
  opacity:1;
}

@keyframes fadeIn{
  0%{opacity:0}
  100%{opacity:1}
}
.lb-btn{
  position:absolute;
  background:#ffffff22;
  color:#fff;
  border:1px solid #ffffff33;
  width:44px;
  height:44px;
  border-radius:10px;
  font-size:26px;
  line-height:1;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:.15s transform ease,.15s background ease;
  backdrop-filter:blur(6px);
}
.lb-btn:hover{transform:translateY(-1px);background:#ffffff33}
.lb-close{top:20px;right:20px}
.lb-prev{left:20px;top:50%;transform:translateY(-50%)}
.lb-next{right:20px;top:50%;transform:translateY(-50%)}
body.lb-lock{overflow:hidden}

.animate-on-scroll{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .8s ease-out,transform .8s ease-out;
}

.animate-on-scroll.animate-in{
  opacity:1;
  transform:translateY(0);
}

.hero-video{
  opacity:1!important;
  transform:none!important;
}

.rain-container{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  pointer-events:none;
  z-index:9998;
  overflow:hidden;
}

.rain-drop{
  position:absolute;
  width:1.5px;
  height:60px;
  background:linear-gradient(transparent,rgba(123,220,255,.35),transparent);
  animation:rain-fall linear infinite;
  opacity:.6;
}

@media (max-width:768px){
  .rain-drop{
    width:1px;
    height:40px;
    opacity:.4;
  }
}

@keyframes rain-fall{
  0%{transform:translateY(-100px)}
  100%{transform:translateY(100vh)}
}

.roadmap{
  position:relative;
  padding:clamp(56px,8vw,96px) 0;
  background:#0f1422;
}

.timeline{
  position:relative;
  max-width:1100px;
  margin:40px auto 0;
  padding:60px 0 20px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
}

.timeline::before{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:40px;
  height:2px;
  background:linear-gradient(90deg,var(--accent),rgba(123,220,255,.3),var(--accent2));
}

.timeline-item{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.timeline-marker{
  position:relative;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--panel);
  border:3px solid #ffffff30;
  z-index:2;
  transition:all .3s ease;
  margin-bottom:24px;
}

.timeline-marker.current{
  background:var(--accent);
  border-color:var(--accent);
  box-shadow:0 0 20px rgba(123,220,255,.6);
  animation:pulse 2s ease-in-out infinite;
}

.timeline-marker.future{
  background:var(--accent2);
  border-color:var(--accent2);
  box-shadow:0 0 15px rgba(255,211,107,.5);
}

@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.2)}
}

.timeline-content{
  width:100%;
  background:var(--panel);
  border:1px solid #ffffff14;
  border-radius:16px;
  padding:20px 16px;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:all .3s ease;
}

.timeline-content:hover{
  transform:translateY(-4px);
  border-color:var(--accent);
  box-shadow:0 12px 32px rgba(123,220,255,.2);
}

.timeline-date{
  color:var(--muted);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.05em;
  margin-bottom:8px;
  text-transform:uppercase;
}

.timeline-item .timeline-marker.current ~ .timeline-content .timeline-date,
.timeline-item:has(.timeline-marker.current) .timeline-date{
  color:var(--accent);
}

.timeline-item .timeline-marker.future ~ .timeline-content .timeline-date,
.timeline-item:has(.timeline-marker.future) .timeline-date{
  color:var(--accent2);
}

.timeline-title{
  font-size:1.1rem;
  margin:0 0 8px;
  color:var(--text);
  line-height:1.3;
}

.timeline-desc{
  margin:0;
  color:var(--muted);
  font-size:.85rem;
  line-height:1.5;
}

@media (max-width:1024px){
  .timeline{
    flex-wrap:wrap;
    gap:30px;
  }
  .timeline-item{
    flex:0 0 calc(50% - 15px);
  }
  .timeline::before{
    display:none;
  }
}

@media (max-width:640px){
  .timeline{
    flex-direction:column;
    padding:20px 0;
  }
  .timeline-item{
    flex:1;
    width:100%;
  }
  .timeline::before{
    display:block;
    left:50%;
    right:auto;
    top:0;
    bottom:0;
    width:2px;
    height:auto;
    transform:translateX(-50%);
    background:linear-gradient(180deg,var(--accent),rgba(123,220,255,.3),var(--accent2));
  }
  .timeline-marker{
    position:absolute;
    left:50%;
    top:0;
    transform:translateX(-50%);
  }
  .timeline-content{
    margin-top:40px;
  }
}

/* Étape passée de la feuille de route */
.timeline-marker.done{background:#5a6474;border-color:#5a6474}

/* Choix de la langue (EN / FR) */
.lang-toggle{display:flex;gap:2px;padding:3px;border-radius:999px;border:1px solid #ffffff30;background:rgba(0,0,0,.25);color:#fff;font:700 .8rem/1 inherit;font-family:inherit;flex:0 0 auto}
.lang-toggle span{padding:5px 8px;border-radius:999px;opacity:.55;transition:background .2s ease,opacity .2s ease,color .2s ease}
.lang-toggle span.is-on{background:var(--accent);color:#0b0d12;opacity:1}
.lang-toggle:hover span:not(.is-on){opacity:.9}

/* Sprite de combat animé sous la description du personnage */
.chars-spotlight .battle-sprite{position:relative;display:flex;align-items:flex-end;justify-content:center;width:min(100%,560px);height:240px;margin-top:18px;border-radius:14px;border:1px solid #ffffff14;background:radial-gradient(ellipse 60% 18% at 50% 88%,rgba(0,0,0,.45),transparent 70%),linear-gradient(180deg,rgba(18,21,33,.0),rgba(18,21,33,.65));overflow:hidden;transition:opacity .3s ease,transform .3s ease}
.chars-spotlight .battle-sprite[hidden]{display:none}
.chars-spotlight .battle-sprite img{display:block;max-width:100%;height:auto;margin-bottom:6px;image-rendering:pixelated}
.chars-spotlight .battle-sprite-label{position:absolute;top:10px;left:14px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
@media (max-width:900px){.chars-spotlight .battle-sprite{height:200px;margin-inline:auto}.chars-spotlight .battle-sprite img{width:66%}}

/* Steam */
.steam-section{padding:30px 0 50px}
.steam-card{display:flex;align-items:center;gap:32px;padding:28px 32px;flex-wrap:wrap}
.steam-copy{flex:1 1 280px}
.steam-copy .h2{margin-bottom:.4rem}
.steam-copy p{margin:0}
.steam-widget{flex:0 1 646px;width:100%;max-width:646px;height:190px;border:0;border-radius:6px;background:#1b2838}

/* Pied de page */
footer a{color:inherit}
footer a:hover{color:var(--accent)}
@media (max-width:900px){
  .nav{gap:12px}
  .nav img.logo{width:140px}
}
@media (max-width:480px){
  .social-top{display:none}
}

/* Grandes illustrations : fondu en dégradé sur les bords (bas plus long, pour qu'elles se fondent dans le décor) */
.chars-spotlight .keyart{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 58%,transparent 96%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 58%,transparent 96%),linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-composite:intersect;
}

/* Studio dans le pied de page */
footer .studio{display:flex;align-items:center;gap:12px;color:var(--text);text-decoration:none;transition:transform .3s ease}
footer .studio img{display:block;width:46px;height:auto}
footer .studio span{display:flex;flex-direction:column;line-height:1.2}
footer .studio small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
footer .studio b{font-size:1.05rem;color:#c77dba}
footer .studio:hover{transform:translateY(-2px)}
footer .studio:hover b{color:#e39ad6}