/* Pixel Punkz shared theme — used by the arcade and every game page */
:root{
  --bg:#0b0221;
  --bg2:#160634;
  --pink:#ff2bd6;
  --cyan:#00f0ff;
  --yellow:#ffe600;
  --green:#39ff14;
  --white:#f4f1ff;
  --muted:#a99bd6;
  --p1:var(--cyan);
  --p2:var(--pink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg) radial-gradient(ellipse at top,#1d0848,transparent 65%) no-repeat;
  color:var(--white);
  font-family:'VT323',monospace;
  font-size:22px;
  line-height:1.35;
  min-height:100vh;
  overflow-x:hidden;
}
/* CRT scanlines */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
a{color:var(--cyan)}
.pix{font-family:'Press Start 2P',monospace;letter-spacing:.02em}

/* NAV */
nav{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 5vw;border-bottom:3px solid var(--pink);
  background:rgba(11,2,33,.85);backdrop-filter:blur(4px);position:sticky;top:0;z-index:20;
}
nav .logo{font-size:14px;color:var(--yellow);text-decoration:none;text-shadow:3px 3px 0 var(--pink)}
nav ul{display:flex;gap:20px;list-style:none;flex-wrap:wrap;align-items:center}
nav ul a,.navbtn{font-family:'Press Start 2P',monospace;font-size:10px;color:var(--white);text-decoration:none}
.navbtn{background:none;border:0;cursor:pointer;padding:0}
nav ul a:hover,.navbtn:hover{color:var(--green)}

/* BUTTONS */
.btn{
  display:inline-block;font-family:'Press Start 2P',monospace;font-size:13px;
  padding:18px 26px;background:var(--pink);color:var(--white);text-decoration:none;border:none;cursor:pointer;
  box-shadow:6px 6px 0 var(--cyan);transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--cyan)}
.btn:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--cyan)}
.btn.alt{background:transparent;border:3px solid var(--yellow);color:var(--yellow);box-shadow:6px 6px 0 var(--pink)}
.btn.small{font-size:10px;padding:12px 16px}

/* GAME PAGE LAYOUT */
.page{max-width:1000px;margin:0 auto;padding:40px 5vw 80px}
.title{font-size:clamp(22px,5vw,40px);color:var(--yellow);text-align:center;line-height:1.3;
  text-shadow:3px 3px 0 var(--pink),6px 6px 0 var(--cyan);margin-bottom:12px}
.sub{color:var(--muted);text-align:center;margin-bottom:26px;font-size:24px}
.modes{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-bottom:16px}
.modes button{
  font-family:'Press Start 2P',monospace;font-size:10px;padding:10px 14px;cursor:pointer;
  background:transparent;color:var(--white);border:3px solid var(--muted);
}
.modes button:hover{border-color:var(--cyan)}
.modes button.sel{border-color:var(--green);color:var(--green);box-shadow:3px 3px 0 var(--pink)}
.hud{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;font-size:11px;margin:22px 0}
.hud .p1{color:var(--p1)}
.hud .p2{color:var(--p2)}
.hud .on::before{content:"▶ "}
.tally{text-align:center;color:var(--muted);margin-top:-8px;margin-bottom:18px}
.status{text-align:center;font-size:28px;min-height:1.4em;margin:20px 0 8px;color:var(--yellow)}
.actions{display:flex;justify-content:center;gap:18px;margin-top:22px;flex-wrap:wrap}
.hint{text-align:center;color:var(--muted);margin-top:26px;font-size:20px}

/* OVERLAY (game over etc.) */
.overlay{position:fixed;inset:0;background:rgba(11,2,33,.82);display:none;place-items:center;z-index:40;padding:20px}
.overlay.show{display:grid}
.overlay .box{background:var(--bg2);border:4px solid var(--cyan);box-shadow:10px 10px 0 var(--pink);padding:36px 40px;text-align:center;max-width:520px}
.overlay h2{font-family:'Press Start 2P',monospace;font-size:clamp(18px,4vw,28px);color:var(--yellow);margin-bottom:18px;line-height:1.5;text-shadow:3px 3px 0 var(--pink)}
.overlay p{margin-bottom:26px;color:var(--muted);font-size:24px}

.overlay .initials{font-family:'Press Start 2P',monospace;font-size:28px;width:5.6em;text-align:center;letter-spacing:.3em;padding:12px;margin-bottom:12px;
  background:var(--bg);color:var(--green);border:3px solid var(--cyan);outline:none;text-transform:uppercase}
.overlay .initials:focus{border-color:var(--pink)}
.overlay .err{color:var(--pink);min-height:1.3em;margin-bottom:14px}
.overlay .row{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.overlay .btn:disabled{opacity:.5;cursor:wait}

/* WORLD TOP 10 panel */
.leader{max-width:440px;margin:40px auto 0;background:var(--bg2);border:3px solid var(--yellow);box-shadow:6px 6px 0 var(--pink);padding:20px 24px}
.leader h2{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--yellow);text-align:center;margin-bottom:14px;text-shadow:2px 2px 0 var(--pink)}
.leader small{display:block;text-align:center;color:var(--muted);margin:-6px 0 12px;font-size:18px}
.board-list{list-style:none;counter-reset:rank}
.board-list li{display:grid;grid-template-columns:3ch 1fr auto;gap:12px;align-items:center;padding:4px 0;border-bottom:1px dashed rgba(169,155,214,.25)}
.board-list li::before{counter-increment:rank;content:counter(rank) ".";color:var(--muted)}
.board-list li:first-child{color:var(--yellow)}
.board-list li.me{color:var(--green)}
.board-list .nm{font-family:'Press Start 2P',monospace;font-size:12px}
.board-list li.empty{display:block;text-align:center;color:var(--muted);border:0}
.board-list li.empty::before{content:none}

footer{text-align:center;padding:30px 5vw 50px;border-top:3px solid var(--pink);color:var(--muted)}
footer .pix{font-size:10px;color:var(--yellow)}

/* used by the games' winning-line flash */
@keyframes blink{50%{opacity:0}}

/* Canvas games: score bar + game screen always fit in the window together */
.screen{width:min(480px,92vw,calc((100vh - 190px)*.75));width:min(480px,92vw,calc((100svh - 190px)*.75))}

@media (max-width:760px){
  body{font-size:20px}
  /* keep the top bar on one line on phones */
  nav{flex-wrap:nowrap;gap:10px;padding:14px 4vw}
  nav .logo{font-size:11px;text-shadow:2px 2px 0 var(--pink)}
  nav ul{gap:14px;flex-wrap:nowrap}
  nav ul a,.navbtn{font-size:9px;white-space:nowrap}
}
@media (max-width:400px){nav .logo{font-size:9px}nav ul{gap:10px}nav ul a,.navbtn{font-size:8px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}