*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#7fd6d0;font-family:"Trebuchet MS",Verdana,system-ui,sans-serif;color:#3d2c5e;touch-action:none;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0}
canvas#game{width:100%;height:100%;display:block;touch-action:none}
#fx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:4}
.pop{position:absolute;transform:translate(-50%,-50%);font-weight:900;font-size:22px;color:#fff;-webkit-text-stroke:1.5px #3d2c5e;text-shadow:0 3px 0 #3d2c5e;white-space:nowrap;animation:pop 1.1s ease-out forwards}
.pop.big{font-size:30px;color:#ffd23f}
.pop.void{color:#a3e635}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-30%) scale(.5)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-190%) scale(1)}}
.bubble{position:absolute;transform:translate(-50%,-100%);background:#fff8e7;border:3px solid #3d2c5e;border-radius:12px;padding:4px 10px;font-weight:800;font-size:14px;white-space:nowrap;box-shadow:0 3px 0 #3d2c5e;animation:bub 2.6s ease forwards}
.bubble:after{content:"";position:absolute;left:50%;bottom:-9px;margin-left:-6px;border:6px solid transparent;border-top-color:#3d2c5e}
@keyframes bub{0%{opacity:0;margin-top:8px}10%{opacity:1;margin-top:0}85%{opacity:1}100%{opacity:0}}
#hud{position:absolute;top:max(8px,env(safe-area-inset-top));left:8px;right:8px;display:flex;gap:6px;justify-content:center;flex-wrap:wrap;z-index:5}
.chip{background:#fff8e7;border:3px solid #3d2c5e;border-radius:12px;padding:5px 11px;font-weight:900;box-shadow:0 4px 0 #3d2c5e;font-size:15px}
#h-ammo span{display:inline-block;margin:0 1px;opacity:.85}
#h-ammo span.cur{transform:scale(1.35);opacity:1;filter:drop-shadow(0 0 3px #ffd23f)}
#h-ammo span.used{opacity:.2}
#power{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(260px,60vw);height:16px;border:3px solid #3d2c5e;border-radius:10px;background:#fff8e7;z-index:5;overflow:hidden}
#power-fill{height:100%;width:0;background:linear-gradient(90deg,#a3e635,#ffd23f,#ff6b6b)}
.hidden{display:none!important}
.btn{background:#ffd23f;border:3px solid #3d2c5e;border-radius:12px;padding:10px 18px;font:900 17px inherit;font-family:inherit;color:#3d2c5e;cursor:pointer;box-shadow:0 4px 0 #3d2c5e;text-decoration:none;display:inline-block}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #3d2c5e}
.btn.small{padding:6px 12px;font-size:15px}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(61,44,94,.28);z-index:10;padding:12px}
.screen.active,#pause.show{display:flex}
.card{background:#fff8e7;border:4px solid #3d2c5e;border-radius:18px;padding:16px 18px;max-width:440px;width:100%;text-align:center;box-shadow:0 8px 0 #3d2c5e;max-height:94vh;overflow:auto}
h1{font-size:42px;color:#ff6b6b;letter-spacing:1px;text-shadow:3px 3px 0 #3d2c5e;-webkit-text-stroke:1px #3d2c5e}
h2{font-size:30px;color:#ff6b6b;text-shadow:2px 2px 0 #3d2c5e}
.badge{display:inline-block;background:#a3e635;border:2px solid #3d2c5e;border-radius:6px;padding:2px 10px;font-weight:900;font-size:12px}
.tag{margin:6px 0;font-weight:700}
.howto{text-align:left;margin:6px 0 8px 22px;font-size:14px}
.tot{font-weight:900;color:#c98a1a}
#levels{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:8px 0}
#levels button{aspect-ratio:1;border:2px solid #3d2c5e;border-radius:6px;background:#e9f7f5;font:900 14px inherit;font-family:inherit;cursor:pointer;color:#3d2c5e;line-height:1.05;box-shadow:0 3px 0 #3d2c5e}
#levels button small{display:block;font-size:9px;color:#c98a1a}
#levels button:disabled{opacity:.35;cursor:default}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:8px 0}
.stars{font-size:42px;color:#ffd23f;text-shadow:0 3px 0 #3d2c5e;letter-spacing:4px}
.fine{font-size:12px;opacity:.75;margin-top:4px}
.ver{font-size:11px;opacity:.6;margin-top:4px}
#toast{position:absolute;top:70px;left:50%;transform:translateX(-50%);background:#3d2c5e;color:#fff8e7;padding:8px 16px;border-radius:12px;font-weight:900;z-index:6;white-space:nowrap;max-width:94vw;overflow:hidden;text-overflow:ellipsis}
#coach{position:absolute;left:50%;bottom:max(56px,calc(env(safe-area-inset-bottom) + 50px));transform:translateX(-50%);background:#fff8e7;border:3px solid #3d2c5e;border-radius:14px;padding:10px 14px;font-weight:800;z-index:6;max-width:min(420px,92vw);text-align:center;box-shadow:0 5px 0 #3d2c5e;animation:coach 1.4s ease-in-out infinite alternate}
@keyframes coach{from{transform:translateX(-50%) translateY(0)}to{transform:translateX(-50%) translateY(-5px)}}
#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;z-index:20;background:#7fd6d0}
.shake{animation:shk .3s}
@keyframes shk{0%,100%{transform:none}25%{transform:translate(4px,-3px)}50%{transform:translate(-4px,2px)}75%{transform:translate(2px,3px)}}
@media (max-width:440px){.chip{padding:4px 7px;font-size:13px;border-width:2px}#hud{gap:4px}#b-pause{padding:4px 8px}.card{padding:12px}h1{font-size:34px}}