@import url('https://fonts.googleapis.com/css2?family=Nosifer&family=Special+Elite&display=swap');

:root{
  --abyss:#020817;
  --deep:#04142d;
  --deep2:#061d3e;
  --ink:#07101c;
  --foam:#c9ecff;
  --blood:#e33232;
  --violet:#a55cff;
  --electric:#62a8ff;
  --muted:#88a3b8;
  --panel:rgba(3,16,37,.78);
  --line:rgba(125,194,255,.15);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:#e9f4ff;
  background:
    radial-gradient(circle at 20% 10%, rgba(105,75,255,.12), transparent 28rem),
    radial-gradient(circle at 80% 35%, rgba(0,120,255,.09), transparent 30rem),
    linear-gradient(180deg,var(--deep) 0%,var(--abyss) 36%,#01040c 100%);
  min-height:100vh;
  font-family:"Special Elite",ui-monospace,monospace;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed; inset:-30%;
  z-index:-3; pointer-events:none;
  background:
    repeating-radial-gradient(ellipse at 50% -10%,
      rgba(142,217,255,.05) 0 3px,
      transparent 4px 28px);
  transform:perspective(500px) rotateX(62deg);
  animation:caustics 16s linear infinite;
  opacity:.7;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:20;
  background:
    linear-gradient(to bottom, rgba(40,127,194,.05), transparent 25%, rgba(0,0,0,.2)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen;
}
@keyframes caustics{to{transform:perspective(500px) rotateX(62deg) translate3d(4%,5%,0)}}

a{color:inherit}
img{max-width:100%; display:block}
button, a{font:inherit}
.wrap{width:min(1180px,calc(100% - 32px)); margin:auto}
.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(1,7,18,.72);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:18px;min-height:72px}
.brand{
  text-decoration:none;
  font-family:"Nosifer","Arial Black",sans-serif;
  color:#fff;
  letter-spacing:-1px;
  text-shadow:0 0 16px rgba(103,161,255,.45), 3px 3px 0 rgba(227,50,50,.7);
  white-space:nowrap
}
.brand span{color:var(--blood)}
.nav-links{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.nav-links a{
  text-decoration:none;padding:10px 12px;border-radius:999px;
  color:#b9d3e8;border:1px solid transparent;transition:.2s
}
.nav-links a:hover,.nav-links a.active{
  color:#fff;border-color:rgba(115,179,255,.28);
  background:rgba(76,141,217,.10)
}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:#fff;border-radius:10px;padding:9px 11px}

.hero{
  min-height:72vh;display:grid;align-items:center;position:relative;isolation:isolate;
  border-bottom:1px solid var(--line);overflow:hidden
}
.hero-bg{position:absolute;inset:0;z-index:-3}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.82) contrast(1.16) brightness(.48)}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(1,7,18,.95) 0%,rgba(1,7,18,.66) 45%,rgba(1,7,18,.20) 100%),
             linear-gradient(0deg,var(--abyss),transparent 45%);
}
.hero-content{padding:100px 0 76px;max-width:780px}
.kicker{color:#9dceff;text-transform:uppercase;letter-spacing:.25em;font-size:.78rem}
.scratch{
  font-family:"Nosifer","Arial Black",sans-serif;
  text-transform:uppercase;
  line-height:.98;
  letter-spacing:-.035em;
  text-shadow:2px 2px 0 #65191f,0 0 30px rgba(91,134,255,.2);
  position:relative;
}
.scratch::after{
  content:"";position:absolute;inset:12% 0;
  background:repeating-linear-gradient(-13deg,transparent 0 9px,rgba(2,8,23,.52) 10px 12px);
  mix-blend-mode:multiply;pointer-events:none;opacity:.5
}
h1{font-size:clamp(3.2rem,9vw,7.4rem);margin:.14em 0 .16em}
h2{font-size:clamp(2rem,5vw,4.2rem);margin:.15em 0 .35em}
h3{font-family:"Nosifer","Arial Black",sans-serif;font-size:1.05rem;letter-spacing:.03em}
.hero p{font-size:clamp(1.05rem,2vw,1.35rem);max-width:700px;color:#c4d5e3;line-height:1.62}
.hero-actions,.social-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 18px;border-radius:10px;text-decoration:none;
  border:1px solid rgba(133,195,255,.26);
  background:linear-gradient(180deg,rgba(34,87,148,.24),rgba(11,30,57,.42));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),0 12px 40px rgba(0,0,0,.2);
  color:#eff8ff;cursor:pointer;transition:transform .2s, border-color .2s, filter .2s
}
.btn:hover{transform:translateY(-2px);border-color:#5ba3ff;filter:brightness(1.15)}
.btn.danger{background:linear-gradient(180deg,#7a1f2c,#320c14);border-color:#b43b49}
.btn.violet{background:linear-gradient(180deg,#543191,#1e1239);border-color:#8055c8}
.btn.ghost{background:rgba(3,14,29,.55)}

section{padding:86px 0}
.section-title{max-width:820px;margin-bottom:32px}
.section-title p{color:#97b0c4;line-height:1.65}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{
  background:linear-gradient(180deg,rgba(5,26,55,.78),rgba(2,9,22,.92));
  border:1px solid var(--line);
  border-radius:18px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.26);
  position:relative
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 26%)
}
.card-pad{padding:26px}
.card p{color:#9eb5c8;line-height:1.6}
.media-card img{aspect-ratio:1/1;object-fit:cover;filter:contrast(1.08) saturate(.82)}
.media-card .caption{padding:18px}

.stat{padding:24px;border-left:2px solid #315a91}
.stat b{display:block;font-size:1.6rem;color:#fff;margin-top:8px;word-break:break-all}
.stat span{color:#7896ad;font-size:.85rem;text-transform:uppercase;letter-spacing:.12em}

.noise-title{color:#dcefff}
.red{color:var(--blood)}
.blue{color:#78b7ff}
.violet-text{color:#b88aff}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:20px 0}

.lore-copy{font-size:1.12rem;line-height:1.9;color:#c1d1dd}
.quote{
  border-left:3px solid var(--blood);padding:18px 24px;margin:28px 0;
  background:rgba(84,11,21,.16);color:#f0d7dc;font-size:1.2rem
}
.timeline{position:relative;margin-top:40px}
.timeline::before{content:"";position:absolute;left:22px;top:0;bottom:0;width:2px;background:linear-gradient(var(--violet),#2f74c7,var(--blood))}
.phase{display:grid;grid-template-columns:48px 1fr;gap:20px;margin:0 0 26px}
.phase .dot{width:20px;height:20px;border-radius:50%;background:#061327;border:3px solid #77adff;margin:5px 0 0 13px;box-shadow:0 0 20px rgba(94,163,255,.5)}
.phase:nth-child(even) .dot{border-color:#b266ff}
.phase-card{padding:24px;border:1px solid var(--line);background:rgba(3,18,39,.58);border-radius:16px}
.phase-card h3{margin-top:0}
.phase-card ul{color:#9fb7ca;line-height:1.8}

.dex-shell{min-height:520px;display:grid;place-items:center;position:relative}
.dex-placeholder{
  text-align:center;padding:44px;max-width:700px
}
.dex-placeholder strong{font-size:1.2rem;display:block;margin-bottom:12px}
.dex-frame{width:100%;height:600px;border:0;background:#020715;display:none}
.code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:#01050d;border:1px solid var(--line);padding:11px 13px;border-radius:9px;color:#9bd1ff
}

.gallery{columns:3 260px;column-gap:18px}
.gallery figure{margin:0 0 18px;break-inside:avoid;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#020a16}
.gallery img{width:100%;transition:transform .35s,filter .35s;filter:saturate(.8) contrast(1.08)}
.gallery figure:hover img{transform:scale(1.025);filter:saturate(1) contrast(1.1)}

.game-layout{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(280px,.6fr);gap:22px}
.game-shell{padding:14px}
canvas#snake{
  width:100%;aspect-ratio:14/10;background:#010817;border:1px solid rgba(103,180,255,.23);
  border-radius:12px;display:block;touch-action:none
}
.game-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.game-meta div{background:#020c1c;border:1px solid var(--line);padding:13px;border-radius:10px;text-align:center}
.game-meta b{display:block;font-size:1.25rem}
.touchpad{display:grid;grid-template-columns:repeat(3,54px);gap:7px;justify-content:center;margin-top:20px}
.touchpad button{width:54px;height:46px;border:1px solid var(--line);background:#06162e;color:#dcefff;border-radius:10px;font-size:1.15rem}
.touchpad .up{grid-column:2}.touchpad .left{grid-column:1}.touchpad .down{grid-column:2}.touchpad .right{grid-column:3}
.legend{display:flex;gap:12px;align-items:center;color:#91aabe;font-size:.9rem;margin-top:12px}
.snake-dot,.enemy-dot{width:14px;height:14px;border-radius:4px;display:inline-block}
.snake-dot{background:#3a89ff}.enemy-dot{background:#ca2732;border-radius:50%}

.footer{padding:46px 0 70px;border-top:1px solid var(--line);color:#7692a8}
.footer-grid{display:flex;justify-content:space-between;gap:30px;align-items:flex-start;flex-wrap:wrap}
.disclaimer{max-width:700px;font-size:.86rem;line-height:1.6}

.bubbles{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.bubble{
  position:absolute;bottom:-60px;border:1px solid rgba(177,225,255,.28);border-radius:50%;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.2),transparent 35%);
  animation:rise linear forwards
}
@keyframes rise{to{transform:translate3d(var(--drift),-115vh,0) scale(.72);opacity:0}}
.fish-sticker{
  position:fixed;z-index:45;pointer-events:none;
  width:90px;height:90px;display:grid;place-items:center;
  font-size:60px;filter:drop-shadow(0 10px 18px rgba(0,0,0,.55));
  animation:fishPop 3.7s ease-in-out forwards
}
@keyframes fishPop{
  0%{opacity:0;transform:scale(.4) rotate(-20deg) translateY(20px)}
  18%{opacity:1;transform:scale(1.1) rotate(7deg) translateY(0)}
  70%{opacity:1;transform:scale(.95) rotate(-5deg) translateX(20px)}
  100%{opacity:0;transform:scale(.6) rotate(18deg) translateX(70px)}
}
.buoy{
  position:fixed;z-index:6;pointer-events:none;bottom:-140px;
  width:44px;height:90px;opacity:0;
  animation:buoyRise 7s ease-in-out forwards
}
.buoy::before{
  content:"";position:absolute;left:9px;top:20px;width:26px;height:52px;border-radius:45% 45% 55% 55%;
  background:repeating-linear-gradient(0deg,#f2f2e8 0 14px,#c42836 14px 28px);
  box-shadow:0 8px 18px rgba(0,0,0,.4),0 0 18px rgba(168,77,255,.15)
}
.buoy::after{
  content:"";position:absolute;left:19px;top:2px;width:6px;height:28px;background:#7b8792;border-radius:4px
}
@keyframes buoyRise{
  0%{opacity:0;transform:translateY(0) rotate(-7deg)}
  15%{opacity:.85}
  55%{opacity:.9;transform:translateY(-62vh) rotate(7deg)}
  100%{opacity:0;transform:translateY(-108vh) rotate(-4deg)}
}

.glitch{animation:glitch 6s infinite}
@keyframes glitch{
  0%,94%,100%{transform:none;filter:none}
  95%{transform:translateX(-2px);filter:hue-rotate(30deg)}
  96%{transform:translateX(2px);filter:contrast(1.4)}
  97%{transform:none}
}

@media (max-width:900px){
  .nav{min-height:64px}
  .menu-btn{display:block}
  .nav-links{
    display:none;position:absolute;left:16px;right:16px;top:70px;padding:12px;
    background:rgba(1,7,18,.96);border:1px solid var(--line);border-radius:14px
  }
  .nav-links.open{display:grid}
  .nav-links a{width:100%}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3,.grid-2,.game-layout{grid-template-columns:1fr}
  .hero{min-height:68vh}
}
@media (max-width:560px){
  .wrap{width:min(100% - 22px,1180px)}
  .grid-4{grid-template-columns:1fr}
  section{padding:64px 0}
  .hero-content{padding-top:82px}
  .game-meta{grid-template-columns:1fr 1fr 1fr}
}