:root{
  --blue:#2121ff;--yellow:#ffff00;--red:#ff0000;--pink:#ffb8ff;--cyan:#00ffff;--orange:#ffb852;
  --peach:#ffb897;--white:#dedede;--bg:#000;
  --font:'Press Start 2P','Courier New',ui-monospace,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--white);overflow:hidden;
  font-family:var(--font);letter-spacing:.04em;text-transform:uppercase;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}
#stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000}

.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px 16px;background:rgba(0,0,0,.86);text-align:center;font-size:clamp(10px,2.2vmin,15px);
  animation:fade .25s ease-out}
.overlay[hidden],[hidden]{display:none!important}
.overlay.thin{background:rgba(0,0,0,.7)}
@keyframes fade{from{opacity:0}to{opacity:1}}
h1,h2{margin:0;font-weight:normal}
.logo{font-size:clamp(22px,7vmin,44px);color:var(--yellow);text-shadow:0 0 18px rgba(255,255,0,.45);letter-spacing:.06em}
.logo span{color:var(--yellow)}
h2{font-size:clamp(14px,3.6vmin,22px);color:var(--red);letter-spacing:.1em}
.marquee{display:grid;gap:8px;margin:6px 0}
.marquee .row{display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;text-align:left}
.g{width:16px;height:16px;border-radius:8px 8px 3px 3px;display:inline-block;position:relative}
.g::after{content:"";position:absolute;left:3px;top:4px;width:4px;height:5px;background:#fff;border-radius:2px;box-shadow:6px 0 0 #fff}
.blinky{background:var(--red)}.pinky{background:var(--pink)}.inky{background:var(--cyan)}.clyde{background:var(--orange)}
.row .gname{color:inherit}
.row:nth-child(1){color:var(--red)}.row:nth-child(2){color:var(--pink)}.row:nth-child(3){color:var(--cyan)}.row:nth-child(4){color:var(--orange)}
.points{color:var(--white)}
.dot,.pill{display:inline-block;background:var(--peach);border-radius:50%;vertical-align:middle}
.dot{width:5px;height:5px}.pill{width:11px;height:11px;animation:blink .5s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.btn{font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--white);background:#000;
  border:2px solid var(--blue);padding:10px 16px;cursor:pointer;border-radius:3px;min-width:120px;
  box-shadow:0 0 0 1px #000,0 0 10px rgba(33,33,255,.4)}
.btn:hover,.btn:focus-visible{border-color:var(--yellow);color:var(--yellow);outline:none}
.btn:active{transform:translateY(1px)}
.btn.primary{color:var(--yellow);border-color:var(--yellow);animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1px #000,0 0 18px rgba(255,255,0,.7);background:#1a1a00}}
.btn.primary:hover,.btn.primary:focus-visible{animation:none;background:#1a1a00}
.btn.danger{border-color:#661111;color:#ff8888}
.btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hint{font-size:.75em;color:#888;margin:4px 0 0;max-width:90%}
.big{font-size:1.4em;color:var(--yellow)}
.rank{color:var(--cyan);animation:blink .8s steps(1) infinite}

.board{list-style:none;margin:0;padding:0;display:grid;gap:8px;width:min(92%,340px);counter-reset:r}
.board li{display:grid;grid-template-columns:2ch 1fr auto;gap:10px;text-align:left;counter-increment:r}
.board li::before{content:counter(r);color:#888}
.board li.new{color:var(--yellow)}
.board li .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board li .s{color:var(--peach)}
.board li .l{color:#888;font-size:.8em}
.board .empty{grid-template-columns:1fr;text-align:center;color:#888}
.board .empty::before{content:none}

.rules{text-align:left;margin:0;padding:0 0 0 1.2em;max-width:420px;line-height:1.7;text-transform:none;font-size:.9em}
form{display:flex;flex-direction:column;gap:12px;align-items:center}
label{color:var(--pink)}
input{font:inherit;letter-spacing:.2em;text-transform:uppercase;text-align:center;background:#000;color:var(--yellow);
  border:2px solid var(--blue);padding:10px;width:14ch;border-radius:3px;caret-color:var(--yellow)}
input:focus{outline:none;border-color:var(--yellow)}

#hud{position:absolute;top:calc(6px + env(safe-area-inset-top));right:calc(6px + env(safe-area-inset-right));display:flex;gap:4px;opacity:.55}
#hud:hover{opacity:1}
.icon{font:inherit;font-size:16px;line-height:1;background:transparent;border:0;color:#aaa;padding:6px;cursor:pointer;
  font-family:system-ui,sans-serif}
.icon:hover{color:#fff}
.icon.off{color:#666;text-decoration:line-through}

#dpad{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));
  width:150px;height:150px;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);opacity:.55;gap:4px}
#dpad button{font-size:18px;color:#fff;background:rgba(33,33,255,.35);border:1px solid rgba(255,255,255,.25);border-radius:8px;font-family:system-ui,sans-serif;
  cursor:pointer;touch-action:none}
#dpad button:active{background:rgba(255,255,0,.5)}
#dpad [data-dir=up]{grid-area:1/2}#dpad [data-dir=left]{grid-area:2/1}#dpad [data-dir=right]{grid-area:2/3}#dpad [data-dir=down]{grid-area:3/2}
body.touch.dpad-visible.has-room #dpad{display:grid}
body.touch.has-room #stage{align-items:flex-start;padding-top:calc(4px + env(safe-area-inset-top))}
body.touch [data-desktop]{display:none}
body:not(.touch) [data-mobile]{display:none}
@media (max-height:520px){.marquee{display:none}}