/* --- Dunia Arcade: beda 180 derajat dari home --- */
body.arcade{
  --bg:#0e0b1f;
  --bg-2:#171432;
  --line:#2c2857;
  --teks:#eae7ff;
  --redup:#9b96c9;
  --aksen:#22d3ee;
  --aksen-2:#f472b6;
}

/* Scanline CRT + vignette di seluruh layar */
body.arcade::after{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0px,rgba(0,0,0,.25) 1px,transparent 1px,transparent 3px);
  opacity:.45;
}
body.arcade::before{
  content:"";position:fixed;inset:0;z-index:59;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%);
}

/* Navbar & footer ikut pindah dunia */
body.arcade header{background:linear-gradient(180deg,rgba(8,6,20,.85) 0%,rgba(8,6,20,0) 100%)}
body.arcade header.scrolled{background:rgba(8,6,20,.72);border-bottom-color:var(--line)}
body.arcade footer{background:rgba(8,6,20,.5)}

/* --- Hero arcade --- */
.arcade-hero{padding:170px 24px 40px;text-align:center}
.lights{display:flex;gap:12px;justify-content:center;margin-bottom:28px}
.lights span{
  width:9px;height:9px;border-radius:50%;
  background:#2c2857;
  animation:chase 1.8s infinite;
  animation-delay:calc(var(--i) * .13s);
}
@keyframes chase{
  0%,100%{background:#2c2857;box-shadow:0 0 0 transparent}
  45%{background:#fbbf24;box-shadow:0 0 12px rgba(251,191,36,.8)}
}
.neon{
  font-size:clamp(3rem,10vw,5.6rem);
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#fff;
  text-shadow:0 0 6px #22d3ee,0 0 18px #22d3ee,0 0 46px #0ea5e9;
  animation:neonflick 5s infinite;
}
.neon.small{font-size:clamp(2.2rem,8vw,4rem)}
@keyframes neonflick{
  0%,91%,94%,97%,100%{opacity:1}
  92%{opacity:.55}
  95%{opacity:.75}
}
.tagline{color:var(--redup);max-width:52ch;margin:18px auto 0}
.scoreboard{
  display:flex;flex-wrap:wrap;gap:14px 36px;justify-content:center;
  margin:32px auto 0;padding:14px 24px;max-width:560px;
  border:1px solid var(--line);border-radius:12px;background:#080614;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--redup);
}
.scoreboard b{color:var(--aksen);font-weight:600;text-shadow:0 0 8px rgba(34,211,238,.6)}

/* --- Kabinet game --- */
.cabs-section{padding:80px 24px 120px;max-width:960px;margin:0 auto}
.cabs-intro{color:var(--redup);max-width:56ch}
.cab-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;margin-top:36px;
}
.cab{
  padding:18px;border:3px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,var(--bg-2),#0b0919);
  transition:border-color .25s ease,transform .25s ease,box-shadow .25s ease;
}
.cab:hover{
  border-color:var(--aksen);transform:translateY(-4px);
  box-shadow:0 0 26px rgba(34,211,238,.18);
}
.screen{
  position:relative;height:150px;border-radius:10px;overflow:hidden;
  background:#041018;border:2px solid #000;
  box-shadow:inset 0 0 26px rgba(34,211,238,.14);
  display:grid;place-items:center;
}
.screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);
}
.px{position:absolute;width:12px;height:12px;border-radius:3px}
.px-snake{
  left:34px;top:64px;background:#4ade80;
  box-shadow:12px 0 0 #4ade80,24px 0 0 #4ade80,36px 0 0 #4ade80,36px 12px 0 #4ade80,36px 24px 0 #4ade80,48px 24px 0 #22c55e;
}
.px-apple{
  left:130px;top:52px;background:#ef4444;
  box-shadow:0 -12px 0 0 #84cc16;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.blink{
  font-family:ui-monospace,Menlo,monospace;
  color:var(--aksen-2);letter-spacing:.22em;text-transform:uppercase;font-size:.8rem;
  animation:blink 1.3s infinite;
}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}
.cab h3{
  margin-top:16px;
  font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
}
.cab-meta{
  font-family:ui-monospace,Menlo,monospace;
  font-size:.74rem;color:var(--redup);margin-top:6px;letter-spacing:.06em;
}
.play{
  display:inline-block;margin-top:14px;padding:10px 20px;
  border:2px solid var(--aksen);border-radius:8px;
  color:var(--aksen);text-decoration:none;
  font-family:ui-monospace,Menlo,monospace;
  font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;
  box-shadow:0 0 12px rgba(34,211,238,.35),inset 0 0 8px rgba(34,211,238,.12);
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.play:hover{background:var(--aksen);color:#06121a;box-shadow:0 0 22px rgba(34,211,238,.6)}
.play.ghost{
  border-color:var(--line);color:var(--redup);box-shadow:none;cursor:default;
}
.cab.locked{opacity:.8}
.cab.locked:hover{border-color:var(--aksen-2);box-shadow:0 0 26px rgba(244,114,182,.15)}

/* --- Halaman 404 GAME OVER --- */
.go-wrap{min-height:100vh;display:grid;place-items:center;text-align:center;padding:60px 24px}
.go-teks{color:var(--redup);max-width:46ch;margin:20px auto 0}
.go-score{
  font-family:ui-monospace,Menlo,monospace;
  color:var(--redup);letter-spacing:.2em;margin:22px 0 28px;font-size:.85rem;
}

/* --- Scroll reveal (sama seperti about) --- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.reveal.muncul{opacity:1;transform:none}

@media (max-width:720px){
  .arcade-hero{padding-top:150px}
  .scoreboard{gap:10px 22px;padding:12px 16px}
}
@media (prefers-reduced-motion:reduce){
  .lights span,.neon,.px-apple,.blink{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Latar cyberpunk dinamis (dunia arcade) --- */
#cyber-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
body.game #cyber-bg{opacity:.5}
.cb-glow{position:absolute;width:60vmax;height:60vmax;border-radius:50%}
.cb-g1{
  top:-22vmax;left:-16vmax;
  background:radial-gradient(circle,rgba(34,211,238,.10),transparent 60%);
  animation:glowPulse 11s ease-in-out infinite;
}
.cb-g2{
  bottom:-26vmax;right:-16vmax;
  background:radial-gradient(circle,rgba(244,114,182,.08),transparent 60%);
  animation:glowPulse 13s ease-in-out infinite 2s;
}
@keyframes glowPulse{
  0%,100%{opacity:.7;transform:scale(1)}
  50%{opacity:1;transform:scale(1.08)}
}
.cb-floor{
  position:absolute;left:-30%;right:-30%;bottom:-38%;height:75%;
  background:
    repeating-linear-gradient(90deg,rgba(34,211,238,.12) 0 2px,transparent 2px 90px),
    repeating-linear-gradient(0deg,rgba(34,211,238,.12) 0 2px,transparent 2px 64px);
  transform:perspective(700px) rotateX(62deg);
  transform-origin:50% 0%;
  will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 35%);
  animation:floorMove 2.6s linear infinite;
}
@keyframes floorMove{
  from{transform:perspective(700px) rotateX(62deg) translateY(-64px)}
  to{transform:perspective(700px) rotateX(62deg) translateY(0)}
}
.cb-fade{
  position:absolute;left:0;right:0;bottom:37%;height:18vh;
  background:linear-gradient(180deg,#0e0b1f 0%,rgba(14,11,31,0) 100%);
}
.cb-horizon{
  position:absolute;left:0;right:0;bottom:37%;height:2px;
  background:rgba(103,232,249,.35);
  box-shadow:0 0 18px rgba(34,211,238,.45);
}
.cb-scan{
  position:absolute;left:0;right:0;top:-12%;height:90px;
  background:linear-gradient(180deg,transparent,rgba(34,211,238,.05) 45%,rgba(103,232,249,.10) 50%,rgba(34,211,238,.05) 55%,transparent);
  animation:scanMove 9s linear infinite;
}
@keyframes scanMove{
  from{transform:translateY(-10vh)}
  to{transform:translateY(120vh)}
}
.cb-dot{
  position:absolute;width:3px;height:3px;border-radius:50%;
  left:var(--x);top:var(--y);
  background:rgba(103,232,249,.5);
  box-shadow:0 0 6px rgba(34,211,238,.6);
  animation:dotFloat var(--t) ease-in-out infinite var(--d);
}
@keyframes dotFloat{
  0%,100%{transform:translateY(0);opacity:.25}
  50%{transform:translateY(-26px);opacity:.8}
}
@media (prefers-reduced-motion:reduce){
  #cyber-bg *{animation:none}
}