@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg:#050913;
  --bg-2:#08111f;
  --panel:#091523d9;
  --panel-2:#0d1d2e;
  --line:#17334d;
  --cyan:#16c7ff;
  --cyan-2:#008cff;
  --pink:#ff4fab;
  --orange:#ffad32;
  --green:#7ef06a;
  --text:#e8f7ff;
  --muted:#7f9bb0;
  --shadow:0 0 28px rgba(22,199,255,.12);
  --radius:4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 50% 15%, rgba(17,61,94,.38), transparent 36%),
    linear-gradient(180deg,var(--bg-2),var(--bg));
  font-family:"Space Mono",monospace;
  min-height:100vh;
  overflow-x:hidden;
}
body.neon-boost{
  --cyan:#49e5ff;
  --pink:#ff6bc1;
  --orange:#ffc15a;
  filter:saturate(1.18);
}
body.glitching{animation:bodyGlitch .12s steps(2) 5}
@keyframes bodyGlitch{
  0%{transform:translate(0)}
  25%{transform:translate(2px,-1px)}
  50%{transform:translate(-2px,1px)}
  75%{transform:translate(1px,2px)}
  100%{transform:translate(0)}
}

a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{cursor:pointer}

#pixelCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:-3;
  opacity:.72;
}
.scanlines{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:20;
  opacity:.14;
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.045) 4px);
}
.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.13;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:20px 20px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:15;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:28px;
  padding:16px clamp(20px,4vw,72px);
  background:rgba(3,9,16,.86);
  border-bottom:1px solid rgba(22,199,255,.18);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:14px}
.brand-text{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(.8rem,1.45vw,1.25rem);
  letter-spacing:-.08em;
}
.brand-text span{color:var(--cyan)}
.brand-avatar{
  position:relative;
  width:34px;
  height:34px;
  image-rendering:pixelated;
  filter:drop-shadow(0 0 8px rgba(22,199,255,.5));
}
.brand-avatar span{position:absolute;display:block}
.brand-avatar .face{left:8px;top:10px;width:20px;height:18px;background:#ffd0ad;box-shadow:-4px 4px 0 #ffd0ad,4px 4px 0 #ffd0ad}
.brand-avatar .hair{left:6px;top:3px;width:22px;height:12px;background:var(--cyan);box-shadow:4px 4px 0 var(--cyan-2),-4px 4px 0 var(--cyan)}
.brand-avatar .eye{top:17px;width:3px;height:3px;background:#111}
.brand-avatar .eye-left{left:12px}
.brand-avatar .eye-right{left:23px}
.nav{justify-self:center;display:flex;gap:26px}
.nav a{position:relative;color:#a8bfce;font-size:.82rem}
.nav a:hover,.nav a.active{color:var(--cyan)}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:2px;
  background:var(--cyan);transform:scaleX(0);transition:.2s;
}
.nav a:hover::after,.nav a.active::after{transform:scaleX(1)}
.sound-toggle{
  color:#bed2df;background:#0b1724;border:1px solid #28415a;
  padding:10px 14px;border-radius:4px;display:flex;gap:9px;align-items:center;
}
.sound-toggle:hover{border-color:var(--cyan);color:var(--cyan)}

.hero{
  min-height:760px;
  display:grid;
  grid-template-columns:minmax(210px,270px) minmax(420px,1fr) minmax(230px,300px);
  gap:28px;
  align-items:center;
  max-width:1500px;
  margin:0 auto;
  padding:72px clamp(20px,4vw,72px) 44px;
}
.panel{
  position:relative;
  background:linear-gradient(180deg,rgba(13,29,46,.95),rgba(6,15,26,.93));
  border:1px solid #244561;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.35),var(--shadow);
  clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);
}
.panel::before{
  content:"";
  position:absolute;
  inset:6px;
  border:1px solid rgba(22,199,255,.08);
  pointer-events:none;
}
.panel-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:13px 15px;border-bottom:1px solid var(--line);
  color:#bfe9ff;font-size:.72rem;letter-spacing:.08em;
}
.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.status-dot.online{background:var(--green);box-shadow:0 0 12px var(--green)}
.blink{color:var(--green);animation:blink 1.2s steps(1) infinite}
@keyframes blink{50%{opacity:.25}}

.player-panel,.progress-panel{padding-bottom:15px}
.hearts{display:flex;gap:8px;padding:18px 16px;color:var(--pink);font-size:1.35rem;text-shadow:0 0 12px var(--pink)}
.player-row{display:flex;justify-content:space-between;padding:7px 16px;font-size:.7rem}
.player-row span{color:var(--muted)}
.player-row strong{color:var(--cyan)}
.meter{
  height:8px;margin:6px 16px 13px;background:#12273a;border:1px solid #1d3b53;overflow:hidden;
}
.meter span{
  display:block;height:100%;width:var(--value);
  background:linear-gradient(90deg,var(--cyan-2),var(--cyan));
  box-shadow:0 0 12px rgba(22,199,255,.55);
  animation:meterIn 1.2s ease both;
}
.meter.pink span{background:linear-gradient(90deg,#b51c72,var(--pink))}
.meter.orange span{background:linear-gradient(90deg,#cc7116,var(--orange))}
.meter.green span{background:linear-gradient(90deg,#4ba63d,var(--green))}
@keyframes meterIn{from{width:0}}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 16px 2px}
.mini-grid div{background:#07121f;border:1px solid #18364e;padding:12px}
.mini-grid small{display:block;color:var(--muted);font-size:.58rem}
.mini-grid strong{display:block;margin-top:5px;color:var(--orange)}
.progress-row{padding:13px 0 0}
.progress-row>div:first-child{display:flex;justify-content:space-between;padding:0 16px;font-size:.68rem}
.progress-row strong{color:#cceeff}

.forge{text-align:center;position:relative}
.forge-sign{
  display:inline-flex;flex-direction:column;gap:4px;
  padding:8px 32px;margin-bottom:24px;color:#c2d8e6;
  background:#091421;border:1px solid #27445a;box-shadow:0 0 18px rgba(0,0,0,.5);
  font-family:"Press Start 2P";font-size:.72rem;
}
.forge-sign small{font-family:"Space Mono";font-size:.58rem;color:var(--cyan)}
.hero-badge{color:#8db0c6;font-size:.7rem;letter-spacing:.3em;margin-bottom:12px}
h1{
  margin:0;
  font-family:"Press Start 2P",monospace;
  font-size:clamp(2.2rem,5vw,5.5rem);
  line-height:1.05;
  letter-spacing:-.09em;
  text-shadow:0 0 30px rgba(255,255,255,.15);
}
h1 span{color:var(--cyan);text-shadow:0 0 22px rgba(22,199,255,.55)}
.under-title{
  display:inline-flex;gap:13px;align-items:center;
  margin:22px 0 8px;padding:12px 18px;
  color:var(--pink);
  border:1px solid var(--cyan);
  box-shadow:0 0 16px rgba(22,199,255,.22),inset 0 0 18px rgba(255,79,171,.08);
  font-family:"Press Start 2P";font-size:clamp(.7rem,1.5vw,1.1rem);
  animation:titlePulse 3s ease-in-out infinite;
}
@keyframes titlePulse{50%{box-shadow:0 0 26px rgba(22,199,255,.4),inset 0 0 24px rgba(255,79,171,.12)}}
.chev{color:var(--cyan)}
.subline{margin:10px 0 20px;color:#8cdfff;font-size:1rem}
.hero-actions{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.btn{
  min-width:190px;padding:13px 18px;border:1px solid;font-size:.78rem;font-weight:700;
  background:#09131f;color:white;transition:.2s;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.btn:hover{transform:translateY(-2px)}
.btn-cyan{border-color:var(--cyan);box-shadow:0 0 14px rgba(22,199,255,.22)}
.btn-cyan:hover{background:rgba(22,199,255,.12);box-shadow:0 0 24px rgba(22,199,255,.4)}
.btn-pink{border-color:var(--pink);box-shadow:0 0 14px rgba(255,79,171,.22)}
.btn-pink:hover{background:rgba(255,79,171,.12);box-shadow:0 0 24px rgba(255,79,171,.4)}

.forge-stage{position:relative;height:220px;margin-top:8px}
.forge-glow{
  position:absolute;left:50%;bottom:32px;width:300px;height:90px;transform:translateX(-50%);
  background:radial-gradient(ellipse,var(--orange),rgba(255,112,22,.28) 35%,transparent 70%);
  filter:blur(16px);opacity:.75;animation:glowPulse 1.3s ease-in-out infinite alternate;
}
@keyframes glowPulse{to{opacity:1;transform:translateX(-50%) scale(1.08)}}
.anvil{position:absolute;left:50%;bottom:15px;transform:translateX(-50%)}
.anvil-top{width:260px;height:34px;background:#273748;border:2px solid #4d6275;clip-path:polygon(8% 0,92% 0,100% 35%,88% 100%,12% 100%,0 35%)}
.anvil-base{width:160px;height:55px;margin:auto;background:#152334;border:2px solid #354a5c;clip-path:polygon(16% 0,84% 0,72% 100%,28% 100%)}
.pixel-core{
  position:absolute;left:50%;bottom:92px;width:76px;height:76px;transform:translateX(-50%) rotate(45deg);
  border:0;background:linear-gradient(135deg,#1878bc,var(--cyan));box-shadow:0 0 30px rgba(22,199,255,.8),0 0 70px rgba(255,173,50,.28);
  image-rendering:pixelated;transition:.22s;
}
.pixel-core:hover{transform:translateX(-50%) rotate(135deg) scale(1.08)}
.pixel-core:active{transform:translateX(-50%) rotate(225deg) scale(.94)}
.pixel-core span{position:absolute;width:20px;height:20px;background:rgba(255,255,255,.28)}
.pixel-core span:nth-child(1){left:8px;top:8px}
.pixel-core span:nth-child(2){right:8px;top:8px;background:#4fa9e2}
.pixel-core span:nth-child(3){left:8px;bottom:8px;background:#0c5d96}
.pixel-core span:nth-child(4){right:8px;bottom:8px;background:#75e4ff}
.spark{
  position:absolute;width:6px;height:6px;background:var(--orange);
  box-shadow:0 0 10px currentColor;pointer-events:none;
  animation:sparkFly .9s ease-out forwards;
}
@keyframes sparkFly{
  from{opacity:1;transform:translate(0,0) scale(1)}
  to{opacity:0;transform:translate(var(--x),var(--y)) scale(.2)}
}
.hint{font-size:.65rem;color:#658399;animation:blink 1.7s steps(1) infinite}

.dashboard{
  max-width:1400px;margin:0 auto;padding:16px clamp(20px,4vw,72px) 70px;
  display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:24px;
}
.system-list{list-style:none;margin:0;padding:14px 16px 18px}
.system-list li{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dashed #19334a;font-size:.72rem}
.system-list span{color:#9bb2c2}
.ok{color:var(--green)}
.pink-text{color:var(--pink)}
.orange-text{color:var(--orange)}
.cyan-text{color:var(--cyan)}
.terminal{padding:14px 18px 18px;min-height:180px;background:rgba(0,0,0,.24)}
.terminal p{margin:8px 0;color:#8da9bb;font-size:.72rem}
.terminal p span{color:var(--cyan)}
.cursor{animation:blink 1s steps(1) infinite}
.control-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:15px}
.control-grid button{
  padding:13px 8px;background:#07121d;color:#b9d4e4;border:1px solid #244159;font-size:.65rem;
}
.control-grid button:hover{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 14px rgba(22,199,255,.2)}

.roadmap-section{
  max-width:1400px;margin:0 auto 70px;padding:0 clamp(20px,4vw,72px);
}
.section-heading span,.eyebrow{color:var(--cyan);font-size:.7rem;letter-spacing:.18em}
.section-heading h2,.contact-section h2{font-family:"Press Start 2P";font-size:clamp(1.2rem,2.4vw,2.2rem);margin:12px 0 26px}
.roadmap{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.roadmap-item{
  position:relative;display:flex;gap:18px;padding:22px;background:rgba(7,18,30,.8);
  border:1px solid #1e394f;min-height:170px;
}
.roadmap-item::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#244159}
.roadmap-item.done::after{background:var(--green)}
.roadmap-item.active::after{background:var(--pink);box-shadow:0 0 14px var(--pink)}
.step{font-family:"Press Start 2P";color:#284a63}
.roadmap-item small{color:var(--muted);font-size:.55rem}
.roadmap-item.active small{color:var(--pink)}
.roadmap-item.done small{color:var(--green)}
.roadmap-item h3{margin:10px 0;font-size:.95rem}
.roadmap-item p{margin:0;color:#839bab;font-size:.75rem;line-height:1.7}

.contact-section{
  max-width:1400px;margin:0 auto 70px;padding:34px clamp(20px,4vw,72px);
  display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  background:linear-gradient(90deg,rgba(8,23,38,.92),rgba(11,16,31,.9));
  border-top:1px solid #24445e;border-bottom:1px solid #24445e;
}
.contact-section p{color:#8ca4b4}
.notify-form{display:grid;grid-template-columns:1fr auto;gap:10px}
.notify-form input{
  background:#06101a;border:1px solid #29445a;color:white;padding:15px;outline:none;
}
.notify-form input:focus{border-color:var(--cyan);box-shadow:0 0 14px rgba(22,199,255,.18)}
.notify-form button{background:var(--pink);color:#fff;border:0;padding:0 22px;font-weight:700}
.notify-form button:hover{filter:brightness(1.12)}
.form-message{grid-column:1/-1;min-height:20px;font-size:.7rem;color:var(--green)}

footer{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;
  padding:24px clamp(20px,4vw,72px);border-top:1px solid #18334a;
  color:#6f8798;font-size:.7rem;background:#040912;
}
.heart{color:var(--pink)}
.footer-links{display:flex;justify-content:flex-end;gap:20px}
.footer-links a:hover{color:var(--cyan)}

dialog{
  width:min(520px,calc(100% - 30px));color:var(--text);background:#07111e;
  border:1px solid var(--cyan);padding:28px;box-shadow:0 0 50px rgba(22,199,255,.28);
}
dialog::backdrop{background:rgba(0,5,12,.8);backdrop-filter:blur(5px)}
.dialog-close{position:absolute;right:14px;top:10px;border:0;background:none;color:#9ab1c1;font-size:1.6rem}
.dialog-kicker{color:var(--cyan);font-size:.65rem;letter-spacing:.18em}
dialog h2{font-family:"Press Start 2P";font-size:1.2rem;line-height:1.55}
dialog p{color:#96aebe;line-height:1.7}
.dialog-status{display:grid;grid-template-columns:1fr auto;gap:11px;padding-top:14px;border-top:1px solid #18334a;font-size:.72rem}
.dialog-status span{color:#7891a3}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:1050px){
  .topbar{grid-template-columns:auto auto}.nav{display:none}.sound-toggle{justify-self:end}
  .hero{grid-template-columns:1fr 1fr;padding-top:44px}.forge{grid-column:1/-1;grid-row:1}.player-panel,.progress-panel{align-self:stretch}
  .dashboard{grid-template-columns:1fr 1fr}.controls-card{grid-column:1/-1}
}
@media (max-width:720px){
  .topbar{gap:10px;padding:13px 15px}.brand-text{font-size:.72rem}.sound-toggle span:last-child{display:none}
  .hero{grid-template-columns:1fr;padding:38px 15px 20px;gap:18px;min-height:auto}
  .forge{grid-column:auto}.player-panel,.progress-panel{display:none}
  h1{font-size:clamp(1.65rem,10vw,3rem)}
  .under-title{font-size:.58rem;padding:10px 9px;gap:7px}
  .subline{font-size:.82rem}
  .forge-stage{height:190px}.pixel-core{width:62px;height:62px;bottom:88px}
  .dashboard{grid-template-columns:1fr;padding:0 15px 50px}.controls-card{grid-column:auto}
  .roadmap-section{padding:0 15px}.roadmap{grid-template-columns:1fr}
  .contact-section{grid-template-columns:1fr;padding:28px 15px;margin-bottom:35px}
  .notify-form{grid-template-columns:1fr}.notify-form button{padding:14px}
  footer{grid-template-columns:1fr;text-align:center;padding:22px 15px}.footer-links{justify-content:center}
}