*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--modal-bg:#0b0c1a;--modal-border:rgba(255,209,102,.25);--modal-title:#ffd166;--modal-accent:#ffd166;--modal-accent-glow:rgba(255,209,102,.4);--storm:#0b0c1a;--cloud:#1e2035;--yellow:#ffd166;--red:#ef476f;--blue:#118ab2;--dim:rgba(255,209,102,.4)}
html,body{width:100%;height:100%;overflow:hidden;background:var(--storm);color:var(--yellow);font-family:'Barlow',sans-serif;user-select:none}
.page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:.5rem;padding:.5rem}
h1{font-family:'Bangers',cursive;font-size:clamp(1.8rem,6vw,3rem);letter-spacing:.12em;color:var(--yellow);text-shadow:3px 3px 0 var(--red),0 0 20px rgba(255,209,102,.4)}
.hud{display:flex;gap:1.5rem;font-weight:600;font-size:.82rem;color:var(--dim)}
.hud b{color:var(--yellow)}
#dodgeCanvas{border:2px solid rgba(255,209,102,.25);border-radius:6px;cursor:none}
.hearts{font-size:1.1rem;letter-spacing:.1rem}
.ctrls{display:flex;gap:.8rem;margin-top:.3rem}
.wbtn{background:rgba(255,209,102,.1);border:2px solid var(--yellow);color:var(--yellow);font-family:'Bangers',cursive;font-size:.9rem;letter-spacing:.08em;padding:.4rem 1.4rem;border-radius:4px;cursor:pointer;transition:all .15s}
.wbtn:hover{background:var(--yellow);color:var(--storm)}
.overlay{position:fixed;inset:0;background:rgba(11,12,26,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;z-index:20;text-align:center;padding:1rem}
.overlay h2{font-family:'Bangers',cursive;font-size:clamp(1.4rem,5vw,2.4rem);color:var(--yellow);letter-spacing:.1em;text-shadow:2px 2px 0 var(--red)}
.overlay p{font-size:.84rem;color:var(--dim);max-width:260px;line-height:1.6}
footer{position:fixed;bottom:0;width:100%;text-align:center;padding:.3rem;font-size:.63rem;color:rgba(255,209,102,.18);border-top:1px solid rgba(255,209,102,.1)}
footer a{color:rgba(239,71,111,.35);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}