/* ============ NEON ARCADE theme ============ */
:root{
  --bg:#050508;
  --bg2:#0a0a14;
  --panel:#0d0d1a;
  --line:#1e1e38;
  --txt:#e8eaf2;
  --dim:#8a93a8;
  --faint:#4a5266;
  --pink:#ff4ad8;
  --cyan:#3ae8ff;
  --yellow:#ffe81f;
  --green:#7dff7d;
  --orange:#ff9a3a;
  --font:'Courier New',Courier,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--txt); font-family:var(--font);
  overflow-x:hidden; min-height:100vh;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(90,40,160,.18), transparent),
    radial-gradient(ellipse 60% 40% at 90% 110%, rgba(30,120,180,.10), transparent);
}
::selection{background:var(--pink);color:#000}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#080810}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--pink),var(--cyan));border-radius:5px}

/* ---------- preloader ---------- */
#boot{
  position:fixed;inset:0;z-index:200;background:#000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  transition:opacity .5s, visibility .5s;
}
#boot.done{opacity:0;visibility:hidden}
#boot .coin{
  font-size:15px;letter-spacing:6px;color:var(--yellow);
  text-shadow:0 0 14px rgba(255,232,31,.7);
  animation:blink 1s steps(2) infinite;
}
#boot .bar{width:220px;height:8px;border:1px solid var(--line);border-radius:4px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--pink),var(--cyan));animation:load 1.1s ease forwards}
@keyframes load{to{width:100%}}
@keyframes blink{50%{opacity:.25}}

/* ---------- nav ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(5,5,10,.72);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:background .3s;
}
.logo{font-size:18px;letter-spacing:4px;color:#fff;text-decoration:none;font-weight:bold}
.logo b{color:var(--pink);text-shadow:0 0 12px rgba(255,74,216,.8)}
.logo span{color:var(--cyan);text-shadow:0 0 12px rgba(58,232,255,.8)}
.nav-links{display:flex;gap:26px}
.nav-links a{
  color:var(--dim);text-decoration:none;font-size:12px;letter-spacing:2px;
  position:relative;transition:color .25s;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;
  background:linear-gradient(90deg,var(--pink),var(--cyan));transition:width .3s;
}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}
@media(max-width:720px){.nav-links{display:none}}

/* ---------- hero ---------- */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
#stars{position:absolute;inset:0}
.hero-inner{position:relative;z-index:2;text-align:center;padding:120px 20px 80px;max-width:900px}
.kicker{
  display:inline-block;font-size:11px;letter-spacing:6px;color:var(--cyan);
  border:1px solid rgba(58,232,255,.4);border-radius:20px;padding:8px 18px;margin-bottom:26px;
  background:rgba(58,232,255,.06);
  animation:floaty 4s ease-in-out infinite;
}
@keyframes floaty{50%{transform:translateY(-6px)}}
h1.mega{
  font-size:clamp(44px,9vw,110px);letter-spacing:10px;line-height:1.05;font-weight:bold;
  background:linear-gradient(180deg,#fff 20%,var(--pink) 55%,var(--cyan) 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(255,74,216,.35));
  animation:heroIn 1s cubic-bezier(.2,.9,.25,1.2) both;
}
@keyframes heroIn{from{opacity:0;transform:translateY(40px) scale(.96)}}
.hero-sub{margin:22px auto 0;max-width:620px;color:var(--dim);font-size:14px;letter-spacing:2px;line-height:2;animation:heroIn 1s .15s cubic-bezier(.2,.9,.25,1.2) both}
.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:36px;flex-wrap:wrap;animation:heroIn 1s .3s cubic-bezier(.2,.9,.25,1.2) both}
.btn{
  display:inline-block;padding:15px 34px;font-family:var(--font);font-size:13px;letter-spacing:3px;
  text-decoration:none;border-radius:8px;cursor:pointer;border:1px solid transparent;
  transition:transform .2s, box-shadow .25s, background .25s;position:relative;overflow:hidden;
}
.btn-primary{
  color:#000;font-weight:bold;background:linear-gradient(135deg,var(--pink),var(--orange));
  box-shadow:0 0 28px rgba(255,74,216,.45);
}
.btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 44px rgba(255,74,216,.7)}
.btn-ghost{color:var(--cyan);border-color:rgba(58,232,255,.5);background:rgba(58,232,255,.05)}
.btn-ghost:hover{transform:translateY(-3px);background:rgba(58,232,255,.14);box-shadow:0 0 28px rgba(58,232,255,.35)}
.btn::before{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg);transition:left .5s;
}
.btn:hover::before{left:130%}
.stats{display:flex;gap:44px;justify-content:center;margin-top:64px;flex-wrap:wrap;animation:heroIn 1s .45s both}
.stat{text-align:center}
.stat .num{font-size:34px;font-weight:bold;color:#fff;text-shadow:0 0 16px rgba(58,232,255,.6)}
.stat .lbl{font-size:10px;letter-spacing:3px;color:var(--faint);margin-top:6px}
.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  color:var(--faint);font-size:10px;letter-spacing:4px;animation:bounce 1.8s ease-in-out infinite;z-index:2;
}
@keyframes bounce{50%{transform:translate(-50%,8px)}}

/* ---------- marquee ---------- */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:rgba(10,10,20,.6);overflow:hidden;white-space:nowrap;padding:12px 0;
}
.marquee .track{display:inline-block;animation:scrollX 28s linear infinite;font-size:12px;letter-spacing:4px;color:var(--dim)}
.marquee .track b{color:var(--yellow);text-shadow:0 0 10px rgba(255,232,31,.6)}
@keyframes scrollX{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
section{padding:100px 24px;max-width:1200px;margin:0 auto;position:relative}
.sec-head{text-align:center;margin-bottom:54px}
.sec-kicker{font-size:11px;letter-spacing:6px;color:var(--pink);margin-bottom:14px}
.sec-title{font-size:clamp(28px,4.5vw,46px);letter-spacing:6px;color:#fff;text-shadow:0 0 20px rgba(255,74,216,.3)}
.sec-sub{color:var(--dim);font-size:13px;letter-spacing:2px;margin-top:14px;line-height:2;max-width:640px;margin-left:auto;margin-right:auto}
.reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- game cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  position:relative;transform-style:preserve-3d;will-change:transform;
  transition:border-color .3s, box-shadow .3s;
}
.card:hover{border-color:var(--glow,var(--pink));box-shadow:0 18px 60px -18px var(--glow,var(--pink))}
.card .thumb{position:relative;height:190px;background:#000;overflow:hidden}
.card .thumb canvas{width:100%;height:100%;display:block}
.card .thumb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
}
.card .kind{
  position:absolute;top:12px;left:12px;z-index:2;font-size:10px;letter-spacing:2px;
  padding:5px 10px;border-radius:4px;background:rgba(0,0,0,.65);border:1px solid var(--glow,var(--pink));color:var(--glow,var(--pink));
}
.card .year{position:absolute;top:12px;right:12px;z-index:2;font-size:10px;letter-spacing:2px;color:var(--dim);background:rgba(0,0,0,.65);padding:5px 10px;border-radius:4px}
.card .body{padding:22px}
.card h3{font-size:19px;letter-spacing:3px;color:#fff;margin-bottom:8px}
.card h3 .dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--glow,var(--pink));box-shadow:0 0 10px var(--glow,var(--pink));margin-right:10px;vertical-align:2px}
.card .tagline{font-size:12px;color:var(--glow,var(--pink));letter-spacing:1px;margin-bottom:12px}
.card p.desc{font-size:12px;color:var(--dim);line-height:1.9;margin-bottom:14px;min-height:88px}
.card .controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.card .controls span{font-size:10px;letter-spacing:1px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:4px 8px;background:rgba(255,255,255,.02)}
.card .playrow{display:flex;align-items:center;justify-content:space-between}
.play-btn{
  display:inline-block;padding:12px 28px;font-size:12px;letter-spacing:3px;font-weight:bold;
  color:#000;background:var(--glow,var(--pink));border-radius:6px;text-decoration:none;
  box-shadow:0 0 20px var(--glow,var(--pink));transition:transform .2s,box-shadow .25s;
}
.play-btn:hover{transform:scale(1.06);box-shadow:0 0 34px var(--glow,var(--pink))}
.hiscore{font-size:11px;color:var(--faint);letter-spacing:1px}
.hiscore b{color:var(--yellow)}

/* ---------- mashup lab ---------- */
#lab{background:linear-gradient(180deg,transparent,rgba(255,74,216,.04),transparent)}
.concept-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}
.concept{
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:26px;
  position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.concept:hover{transform:translateY(-6px);border-color:var(--cyan);box-shadow:0 16px 44px -16px var(--cyan)}
.concept::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--pink),var(--cyan));opacity:.7;
}
.concept .formula{font-size:11px;letter-spacing:2px;color:var(--cyan);margin-bottom:10px}
.concept h3{font-size:17px;letter-spacing:3px;margin-bottom:10px}
.concept p{font-size:12px;color:var(--dim);line-height:1.9;margin-bottom:18px;min-height:86px}
.vote-row{display:flex;align-items:center;justify-content:space-between}
.vote-btn{
  font-family:var(--font);font-size:11px;letter-spacing:2px;cursor:pointer;
  background:rgba(58,232,255,.07);color:var(--cyan);border:1px solid rgba(58,232,255,.4);
  border-radius:6px;padding:10px 18px;transition:all .2s;
}
.vote-btn:hover:not(:disabled){background:rgba(58,232,255,.18);box-shadow:0 0 18px rgba(58,232,255,.35);transform:scale(1.05)}
.vote-btn:disabled{opacity:.45;cursor:default;border-color:var(--pink);color:var(--pink)}
.vote-count{font-size:12px;color:var(--dim);letter-spacing:1px}
.vote-count b{color:var(--yellow);font-size:16px}
.concept .rank{
  position:absolute;top:14px;right:16px;font-size:11px;color:var(--faint);letter-spacing:2px;
}
.lab-note{text-align:center;margin-top:36px;color:var(--faint);font-size:12px;letter-spacing:2px}

/* ---------- hall of fame ---------- */
.hof-controls{display:flex;gap:12px;justify-content:center;margin-bottom:36px;flex-wrap:wrap}
.hof-controls input{
  font-family:var(--font);font-size:13px;letter-spacing:1px;color:#fff;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:12px 18px;width:min(340px,90vw);outline:none;transition:border-color .25s,box-shadow .25s;
}
.hof-controls input:focus{border-color:var(--cyan);box-shadow:0 0 16px rgba(58,232,255,.25)}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:36px}
.chip{
  font-family:var(--font);font-size:11px;letter-spacing:2px;cursor:pointer;
  background:transparent;color:var(--dim);border:1px solid var(--line);
  border-radius:20px;padding:8px 16px;transition:all .2s;
}
.chip:hover{color:#fff;border-color:var(--dim)}
.chip.on{background:linear-gradient(135deg,var(--pink),var(--orange));color:#000;font-weight:bold;border-color:transparent;box-shadow:0 0 16px rgba(255,74,216,.4)}
.hof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.hof-item{
  background:rgba(13,13,26,.7);border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  transition:transform .2s,border-color .2s;animation:hofIn .5s both;
}
@keyframes hofIn{from{opacity:0;transform:translateY(12px)}}
.hof-item:hover{transform:translateY(-3px);border-color:var(--pink)}
.hof-item .y{font-size:10px;letter-spacing:2px;color:var(--pink)}
.hof-item h4{font-size:14px;letter-spacing:2px;margin:6px 0;color:#fff}
.hof-item .m{font-size:10px;letter-spacing:1px;color:var(--faint);margin-bottom:8px}
.hof-item p{font-size:11px;color:var(--dim);line-height:1.7}
.hof-empty{text-align:center;color:var(--faint);padding:40px;letter-spacing:2px;grid-column:1/-1}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:60px 24px 40px;text-align:center;background:rgba(8,8,16,.6)}
footer .flogo{font-size:20px;letter-spacing:6px;margin-bottom:16px}
footer .flogo b{color:var(--pink)}footer .flogo span{color:var(--cyan)}
footer p{color:var(--faint);font-size:11px;letter-spacing:2px;line-height:2;max-width:560px;margin:0 auto}
footer .konami-hint{margin-top:18px;color:#2c3346;font-size:10px;letter-spacing:3px}

/* ---------- play page ---------- */
.play-wrap{max-width:1100px;margin:0 auto;padding:110px 20px 60px}
.play-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:22px}
.play-head h2{font-size:clamp(24px,4vw,38px);letter-spacing:5px}
.back-link{color:var(--dim);text-decoration:none;font-size:12px;letter-spacing:2px;border:1px solid var(--line);padding:10px 18px;border-radius:8px;transition:all .2s}
.back-link:hover{color:#fff;border-color:var(--pink);box-shadow:0 0 14px rgba(255,74,216,.3)}
.stage{
  position:relative;background:#000;border:1px solid var(--line);border-radius:12px;overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,.8),0 0 40px rgba(255,74,216,.08);
}
.stage iframe{display:block;width:100%;border:0;background:#000}
.stage.portrait iframe{aspect-ratio:224/288;max-height:78vh}
.stage.landscape iframe{aspect-ratio:288/224}
.stage.wide iframe{aspect-ratio:480/320}
.stage.tall iframe{aspect-ratio:224/256}
.play-meta{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}
@media(max-width:760px){.play-meta{grid-template-columns:1fr}}
.meta-box{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px}
.meta-box h4{font-size:12px;letter-spacing:3px;color:var(--pink);margin-bottom:14px}
.meta-box p{font-size:12px;color:var(--dim);line-height:2}
.meta-box .controls span{display:inline-block;font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:5px 10px;margin:0 8px 8px 0}
.full-btn{
  font-family:var(--font);font-size:12px;letter-spacing:2px;cursor:pointer;margin-top:16px;
  background:rgba(58,232,255,.07);color:var(--cyan);border:1px solid rgba(58,232,255,.4);
  border-radius:8px;padding:12px 22px;transition:all .2s;
}
.full-btn:hover{background:rgba(58,232,255,.16);box-shadow:0 0 18px rgba(58,232,255,.3)}
.more-strip{margin-top:60px}
.more-strip h4{font-size:13px;letter-spacing:4px;color:var(--dim);margin-bottom:20px;text-align:center}
.more-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.more-cards a{
  display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:18px;transition:all .2s;text-align:center;
}
.more-cards a:hover{transform:translateY(-4px);border-color:var(--mg,var(--pink))}
.more-cards .t{font-size:13px;letter-spacing:2px;color:#fff;margin-bottom:6px}
.more-cards .k{font-size:10px;letter-spacing:2px;color:var(--mg,var(--pink))}

/* ---------- party mode (konami) ---------- */
body.party{animation:partyHue 6s linear infinite}
@keyframes partyHue{to{filter:hue-rotate(360deg)}}

/* ---------- custom cursor glow (desktop) ---------- */
#glowdot{
  position:fixed;width:340px;height:340px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(255,74,216,.07),transparent 65%);
  transform:translate(-50%,-50%);transition:opacity .3s;
}
@media(pointer:coarse){#glowdot{display:none}}