*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:'Press Start 2P',monospace;line-height:1.7;
  overflow-x:hidden;
background-image:radial-gradient(#1a1aff22 1px,transparent 1px);background-size:14px 14px}
.scan{pointer-events:none;position:fixed;inset:0;z-index:99;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px)}
.top{text-align:center;padding:24px 10px 10px}
   .logo{font-size:clamp(26px,7vw,58px);color:#ffcc00;text-shadow:4px 4px 0 #ff0055,8px 8px 0 #2121ff;letter-spacing:4px}
.logo span{color:#2121ff}
.blink{font-size:10px;margin:14px 0;color:#00ffcc;animation:bl 1s steps(2) infinite}
@keyframes bl{50%{opacity:0}}
.hud{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;font-size:10px;color:#ff3cac}
  .hud b{color:#fff}
main{max-width:760px;margin:0 auto;padding:10px}
#game{display:flex;flex-direction:column;align-items:center}
#board{display:grid;grid-template-columns:repeat(16,1fr);width:min(94vw,520px);aspect-ratio:1;
grid-template-rows:repeat(16,1fr);position:relative;overflow:hidden;
border:4px double #2121ff;box-shadow:0 0 18px #2121ff,inset 0 0 18px #2121ff55;background:#000}
.c{position:relative;min-width:0;min-height:0;overflow:hidden;line-height:1;display:flex;align-items:center;justify-content:center;font-size:min(3.6vw,20px)}
.w{background:#0b0b6e;border:2px solid #2121ff;border-radius:4px}
.d::after{content:'';width:18%;height:18%;background:#ffb8ae;border-radius:50%}
.f{animation:bob .6s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-3px) scale(1.1)}}
.pac{position:absolute;left:0;top:0;width:6.25%;height:6.25%;padding:.9%;pointer-events:none;z-index:2;
 transition:left .18s linear,top .18s linear}
.pac i{display:block;width:100%;height:100%;border-radius:50%;background:#ffcc00;transition:transform .1s;
  animation:chomp .3s linear infinite alternate}
@keyframes chomp{from{clip-path:polygon(50% 50%,100% 50%,100% 0,0 0,0 100%,100% 100%,100% 50%)}to{clip-path:polygon(50% 50%,100% 15%,100% 0,0 0,0 100%,100% 100%,100% 85%)}}
.pad{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pad button{width:56px;height:56px;margin:0 3px;font:inherit;font-size:16px;background:#111;color:#ffcc00;border:3px solid #ffcc00;border-radius:8px;box-shadow:0 4px 0 #996f00;cursor:pointer}
  .pad button:active{transform:translateY(3px);box-shadow:none}
.tip{font-size:8px;color:#888;margin:10px 0 30px}
@media(min-width:900px){.pad{display:none}}
.proj{border:4px solid #2121ff;margin:40px 0;padding:20px;background:#05052a;box-shadow:8px 8px 0 #ff0055}
.proj h2{font-size:clamp(11px,2.6vw,16px);color:#ffcc00;margin-bottom:16px}
.frame{border:3px dashed #00ffcc;padding:6px;margin-bottom:14px}
.frame img{width:100%;display:block;image-rendering:pixelated}
   .proj p{font-size:11px;color:#ddd}
.proj:target{animation:flash .4s steps(2) 4}
@keyframes flash{50%{box-shadow:8px 8px 0 #ffcc00;border-color:#ffcc00}}
#modal{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:50;padding:14px}
#modal.hide{display:none}
.box{background:#000;border:4px solid #ffcc00;outline:4px solid #ff0055;padding:24px;max-width:440px;text-align:center;animation:pop .3s steps(4)}
@keyframes pop{from{transform:scale(.2)}}
.big{font-size:54px;animation:bob .5s infinite alternate}
  .box h3{color:#00ffcc;font-size:14px;margin:12px 0}
.box p{font-size:10px;color:#fff;margin-bottom:18px}
.btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btns a,.btns button{font:inherit;font-size:10px;padding:12px;border:3px solid #ffcc00;background:#ffcc00;color:#000;text-decoration:none;cursor:pointer}
.btns button{background:#000;color:#ffcc00}
footer{text-align:center;font-size:8px;color:#555;padding:30px 10px}