:root{
  --pink:#ff2e88;
  --cyan:#4dd0e1;
  --purple:#ba68c8;
  --bg0:#0a0514;
  --bg1:#140a24;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{
  height:100%;
  background:
    radial-gradient(circle at 20% 10%, #2a0f3e 0%, transparent 50%),
    radial-gradient(circle at 85% 90%, #3a0a2a 0%, transparent 55%),
    var(--bg0);
  color:#fff;
  font-family:'VT323',monospace;
  overflow:hidden;
  touch-action:none;
}
#game-wrap{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center;
}
canvas{
  image-rendering:pixelated; image-rendering:crisp-edges;
  border:3px solid var(--pink);
  box-shadow:0 0 30px rgba(255,46,136,0.5), inset 0 0 40px rgba(0,0,0,0.4);
  background:#140a24;
  display:block;
  animation:party-glow 4s ease-in-out infinite alternate;
}
@keyframes party-glow{
  0%{box-shadow:0 0 30px rgba(255,46,136,0.5), inset 0 0 40px rgba(0,0,0,0.4);}
  50%{box-shadow:0 0 34px rgba(186,104,200,0.55), inset 0 0 40px rgba(0,0,0,0.4);}
  100%{box-shadow:0 0 30px rgba(77,208,225,0.5), inset 0 0 40px rgba(0,0,0,0.4);}
}
#scanlines,#crt{
  pointer-events:none; position:fixed; inset:0; z-index:50;
}
#scanlines{
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px, transparent 2px, transparent 3px);
  mix-blend-mode:multiply;
}
#crt{ box-shadow:inset 0 0 160px rgba(0,0,0,0.7); }

/* ---------- Overlay menus/dialog ---------- */
#overlay{
  display:none; position:fixed; inset:0; z-index:100;
  align-items:center; justify-content:center;
  background:rgba(5,2,12,0.82); backdrop-filter:blur(3px);
  padding:12px; overflow-y:auto;
}
.menu-box{
  position:relative;
  background:linear-gradient(160deg,#1a0d2e,#12081f);
  border:3px solid var(--pink);
  box-shadow:0 0 40px rgba(255,46,136,0.4), inset 0 0 60px rgba(186,104,200,0.08);
  padding:22px 20px; max-width:440px; width:100%;
  text-align:center; animation:pop .35s ease;
  overflow:hidden;
}
.menu-box::before{
  content:''; position:absolute; inset:-40%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,46,136,0.18), transparent 40%),
    radial-gradient(circle at 75% 80%, rgba(77,208,225,0.16), transparent 42%);
  animation:drift 12s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}
.menu-box > *{position:relative; z-index:1;}
@keyframes drift{from{transform:translate(-6%,-4%) rotate(0deg)}to{transform:translate(6%,4%) rotate(8deg)}}
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}

.title-glow{
  font-family:'Press Start 2P',monospace; font-size:22px; color:var(--cyan);
  text-shadow:0 0 8px var(--cyan),0 0 18px var(--pink); letter-spacing:1px;
  animation:flick 3s infinite;
}
@keyframes flick{0%,97%{opacity:1}98%{opacity:.4}99%{opacity:1}}
.title-sub{
  font-family:'Press Start 2P',monospace; font-size:20px; color:var(--pink);
  text-shadow:0 0 10px var(--pink); margin:6px 0 4px; letter-spacing:2px;
}
.tag{font-size:22px; color:#ffd; margin:12px 0; line-height:1.1;}
.tag b{color:var(--pink);}
.pick{font-family:'Press Start 2P',monospace; font-size:9px; color:var(--cyan); margin:14px 0 8px;}
.arche-list{display:flex; flex-direction:column; gap:8px; margin-bottom:12px;}
.arche-btn{
  background:#241338; border:2px solid var(--purple); color:#fff;
  padding:10px 12px; text-align:left; cursor:pointer; transition:.15s;
  font-family:'VT323',monospace;
}
.arche-btn b{display:block; font-size:20px; color:var(--purple);}
.arche-btn span{font-size:15px; opacity:.75; line-height:1.05;}
.arche-btn:hover,.arche-btn:active{background:var(--purple); transform:translateX(4px);}
.arche-btn:hover b,.arche-btn:hover span{color:#fff;}
.controls-hint{font-size:14px; opacity:.6; margin:8px 0;}
.best{font-family:'Press Start 2P',monospace; font-size:9px; color:#ffca28; margin-top:8px;}
.foot-note{margin-top:14px; font-size:15px; opacity:.7;}
.foot-note a,#footer a{color:var(--cyan); text-decoration:none;}
.foot-note a:hover{text-decoration:underline;}

.loadbar{width:80%; height:14px; margin:14px auto; border:2px solid var(--cyan); background:#0a0514;}
#loadfill{height:100%; width:0%; background:linear-gradient(90deg,var(--pink),var(--cyan)); transition:width .3s;}

/* ---------- Dialog ---------- */
.dialog-box{
  position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:560px;
  background:#0d0620; border:3px solid var(--cyan);
  box-shadow:0 0 30px rgba(77,208,225,0.5); padding:14px; z-index:120;
  animation:slideup .25s ease;
}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
.dialog-top{display:flex; align-items:center; gap:10px; margin-bottom:8px;}
.dialog-portrait{
  width:52px; height:52px; image-rendering:pixelated;
  border:2px solid var(--cyan); background:#241338;
}
.dialog-name{font-family:'Press Start 2P',monospace; font-size:12px;}
.dialog-text{font-size:22px; min-height:56px; line-height:1.05; color:#ffd; margin-bottom:10px;}
.dialog-opts{display:flex; flex-direction:column; gap:6px;}
.opt-btn{
  background:#1a0d2e; border:2px solid var(--pink); color:#fff;
  padding:9px 10px; text-align:left; font-family:'VT323',monospace; font-size:18px;
  cursor:pointer; transition:.12s;
}
.opt-btn:hover,.opt-btn:active{background:var(--pink); transform:translateX(3px);}

/* ---------- Game over ---------- */
.over-title{font-family:'Press Start 2P',monospace; font-size:16px; color:var(--pink); text-shadow:0 0 10px var(--pink); line-height:1.3;}
.over-sub{font-size:19px; color:#ffd; margin:10px 0; line-height:1.05;}
.stat-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:10px 0;}
.stat-grid div{background:#241338; border:1px solid var(--purple); padding:6px;}
.stat-grid span{display:block; font-family:'Press Start 2P',monospace; font-size:7px; color:var(--cyan); margin-bottom:3px;}
.stat-grid b{font-size:24px; color:#fff;}
.highscore{font-family:'Press Start 2P',monospace; font-size:10px; color:#ffca28; margin:8px 0; animation:flick 1s infinite;}
.badges{display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin:8px 0;}
.badge{background:#2a1a3e; border:1px solid var(--cyan); padding:3px 6px; font-size:14px;}
.review{background:#0d0620; border-left:3px solid var(--cyan); padding:8px 10px; font-size:17px; color:#cfe; margin:10px 0; line-height:1.1; font-style:italic; text-align:left;}
.lb-actions{display:flex; gap:6px; margin:8px 0;}
#nick{flex:1; background:#0a0514; border:2px solid var(--purple); color:#fff; padding:7px; font-family:'VT323',monospace; font-size:18px;}
.menu-btn{
  background:#241338; border:2px solid var(--cyan); color:#fff;
  padding:8px 12px; font-family:'Press Start 2P',monospace; font-size:8px;
  cursor:pointer; transition:.12s;
}
.menu-btn.primary{width:100%; margin-top:10px; border-color:var(--pink); color:var(--pink); font-size:11px; padding:12px;}
.menu-btn:hover,.menu-btn:active{background:var(--cyan); color:#0a0514;}
.menu-btn.primary:hover{background:var(--pink); color:#fff;}
.leaderboard{margin:8px 0; text-align:left; font-size:17px;}
.lb-title{font-family:'Press Start 2P',monospace; font-size:9px; color:#ffca28; margin-bottom:6px; text-align:center;}
.lb-row{display:flex; justify-content:space-between; gap:8px; padding:3px 6px; border-bottom:1px dashed rgba(255,255,255,0.1);}
.lb-row b{flex:1; color:#fff;} .lb-row em{color:var(--cyan); font-style:normal;}
.lb-empty{font-size:15px; opacity:.7; text-align:center;}

/* ---------- Touch controls ---------- */
#dpad{
  display:none; position:fixed; bottom:14px; left:14px; z-index:60;
  flex-direction:column; align-items:center; gap:4px; user-select:none;
}
.dmid{display:flex; gap:4px;}
.db{
  width:52px; height:52px; background:rgba(36,19,56,0.85);
  border:2px solid var(--cyan); color:var(--cyan); font-size:20px;
  border-radius:8px; touch-action:none;
}
.db:active{background:var(--cyan); color:#0a0514;}
#ghost-btn{
  display:none; position:fixed; bottom:30px; right:14px; z-index:60;
  background:rgba(186,104,200,0.85); border:2px solid var(--purple); color:#fff;
  padding:16px 14px; border-radius:10px; font-family:'VT323',monospace; font-size:18px;
}
#ghost-btn:active{background:var(--purple);}

/* Show touch controls on touch devices / small screens */
@media (hover:none),(max-width:820px){
  #dpad,#ghost-btn{display:flex;}
}

/* ---------- Footer ---------- */
#footer{
  position:fixed; bottom:2px; left:50%; transform:translateX(-50%); z-index:55;
  font-size:14px; opacity:.65; white-space:nowrap;
}
#mute-toggle{cursor:pointer;}
#mute-toggle:hover{color:var(--cyan);}
#auth-status{position:fixed; top:6px; right:8px; z-index:55; font-size:14px; color:var(--cyan); opacity:.8;}

@media (max-width:820px){ #footer{bottom:auto; top:auto; bottom:96px;} }
</parameter>