*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--modal-bg:#1a0a2e;--modal-border:rgba(255,224,102,.25);--modal-title:#ffe066;--modal-accent:#ffe066;--modal-accent-glow:rgba(255,224,102,.4);--bg:#1a0a2e;--sky:#2a1845;--ground:#3d2b5e;--pixel:#ffe066;--red:#ff4757;--green:#2ed573;--blue:#1e90ff;--dim:rgba(255,224,102,.4)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--pixel);font-family:'Press Start 2P',monospace;user-select:none;image-rendering:pixelated}
.page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.7rem;padding:.5rem}
.title{font-size:clamp(.7rem,3vw,1.1rem);color:var(--pixel);text-shadow:3px 3px 0 var(--red);letter-spacing:.05em}
.hud{display:flex;gap:1.5rem;font-size:.5rem;color:var(--dim)}
.hud span b{color:var(--pixel)}
#runCanvas{border:3px solid var(--ground);image-rendering:pixelated;display:block}
.ctrls{display:flex;gap:.8rem;margin-top:.3rem}
.pbtn{background:var(--ground);border:3px solid var(--pixel);color:var(--pixel);font-family:'Press Start 2P',monospace;font-size:.55rem;padding:.5rem 1rem;cursor:pointer;image-rendering:pixelated}
.pbtn:active{background:var(--pixel);color:var(--bg)}
.overlay{position:fixed;inset:0;background:rgba(26,10,46,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:20;text-align:center}
.overlay h2{font-size:clamp(.7rem,3vw,1rem);color:var(--pixel);text-shadow:2px 2px 0 var(--red)}
.overlay p{font-size:.45rem;color:var(--dim);line-height:2;max-width:240px}
footer{position:fixed;bottom:0;width:100%;text-align:center;padding:.3rem;font-size:.4rem;color:rgba(255,224,102,.2);border-top:2px solid var(--ground)}
footer a{color:rgba(255,71,87,.4);text-decoration:none}footer a:hover{color:var(--red)}
.fl{display:inline-flex;gap:1rem}

/* ── WIN MODAL ── */
.win-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeInBD .25s ease;backdrop-filter:blur(4px)}
@keyframes fadeInBD{from{opacity:0}to{opacity:1}}
.win-modal{background:var(--modal-bg,#1a1a2e);border:2px solid var(--modal-border,rgba(255,255,255,.2));border-radius:20px;padding:2rem 1.8rem;text-align:center;max-width:min(320px,88vw);width:100%;box-shadow:0 24px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);animation:popInModal .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes popInModal{from{transform:scale(.5) translateY(40px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.win-modal .wm-icon{font-size:3rem;display:block;margin-bottom:.6rem;animation:spinOnce .5s ease .1s both}
@keyframes spinOnce{from{transform:rotate(-20deg) scale(.6)}to{transform:rotate(0deg) scale(1)}}
.win-modal .wm-title{font-size:1.5rem;font-weight:800;margin-bottom:.35rem;color:var(--modal-title,#fff)}
.win-modal .wm-stars{font-size:1.6rem;margin:.3rem 0;letter-spacing:.1rem}
.win-modal .wm-body{font-size:.84rem;color:rgba(255,255,255,.55);line-height:1.65;margin-bottom:1.2rem}
.win-modal .wm-body b{color:rgba(255,255,255,.85)}
.win-modal-btns{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.wm-btn{font-family:inherit;font-weight:700;font-size:.82rem;padding:.52rem 1.4rem;border-radius:50px;border:none;cursor:pointer;letter-spacing:.04em;transition:transform .12s,filter .12s}
.wm-btn:active{transform:scale(.94)}
.wm-btn-primary{background:var(--modal-accent,#00d2ff);color:#0a0a1a;box-shadow:0 4px 18px var(--modal-accent-glow,rgba(0,210,255,.35))}
.wm-btn-primary:hover{filter:brightness(1.15)}
.wm-btn-secondary{background:rgba(255,255,255,.08);color:rgba(255,255,255,.65);border:1px solid rgba(255,255,255,.14)}
.wm-btn-secondary:hover{background:rgba(255,255,255,.14);color:#fff}