:root{--i:#171716;--y:#ffcf40;--c:#fff9e8;--r:#f24b3b;--g:#45c787}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;color:var(--i);background:var(--c);overscroll-behavior:none}
body{background-image:radial-gradient(#17171615 1px,transparent 1px);background-size:18px 18px}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
header{height:68px;background:var(--y);border-bottom:3px solid;display:flex;align-items:center;justify-content:space-between;padding:12px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));position:relative;z-index:10}
header b{font:22px Impact,sans-serif;letter-spacing:1px}
header i{font:normal 14px Arial;background:var(--r);color:white;border:3px solid;padding:8px;display:inline-block;transform:rotate(-4deg)}
.coins{background:white;border:3px solid;border-radius:22px;padding:8px 16px;box-shadow:3px 3px 0}
.coins.pop{animation:pop .35s}
.screen{display:none;max-width:920px;margin:auto;min-height:calc(100dvh - 68px);padding:24px 20px 32px}
.screen.active{display:flex;flex-direction:column;align-items:center}
#start{text-align:center;justify-content:center}
small{font-weight:900;letter-spacing:2px;font-size:11px}
h1{font:clamp(45px,8vw,80px)/.9 Impact,sans-serif;margin:10px;letter-spacing:1px}
mark{color:var(--r);background:none;-webkit-text-stroke:2px var(--i);text-shadow:4px 4px var(--i)}
#start>p{max-width:520px;line-height:1.5}
.hero{height:135px;width:280px;position:relative;font-size:90px;transform:rotate(-20deg);animation:swing 2s infinite}
.hero span{position:absolute;left:110px;top:45px;transform:rotate(20deg);font-size:75px}
.hero em{position:absolute;font:20px Impact;left:200px;top:35px;background:white;border:3px solid;padding:7px;transform:rotate(28deg);box-shadow:4px 4px}
@keyframes swing{50%{transform:rotate(-5deg)}}
.primary,.smash,#win article>button:not(.link){border:3px solid;border-radius:12px;min-height:56px;padding:14px 25px;background:var(--r);color:white;font-weight:900;box-shadow:6px 7px var(--i);margin:10px;touch-action:manipulation}
.primary:active,.smash:active{transform:translate(4px,4px);box-shadow:2px 3px var(--i)}
.primary input{display:none}
#start .primary{width:min(390px,92vw)}
.link{background:none;border:0;text-decoration:underline;font-weight:bold;padding:10px}
nav{display:flex;align-items:center;gap:15px;width:100%}
nav button{width:48px;height:48px;border:3px solid;border-radius:50%;background:white;font-size:23px}
h2{font:29px Impact;margin:3px 0}
.status{background:var(--y);border:2px solid;border-radius:20px;padding:7px 14px;font-size:12px;font-weight:900}
#cropStage{width:min(560px,91vw);aspect-ratio:1;position:relative;overflow:hidden;background:#222;border:4px solid;border-radius:20px;box-shadow:6px 7px var(--i);touch-action:none}
canvas{display:block;width:100%;height:100%}
.frame{position:absolute;left:20%;top:12%;width:60%;height:76%;border:4px dashed white;border-radius:10px;box-shadow:0 0 0 300px #0007;pointer-events:none}
#cropStage>span{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#111d;color:white;padding:7px;border-radius:15px;font-size:11px}
.controls{display:flex;align-items:center;gap:15px;width:min(560px,91vw);margin:18px}
.controls label{display:flex;gap:8px;align-items:center;font-size:11px;font-weight:bold;flex:1}
.controls input{width:100%;accent-color:var(--r)}
.controls button,#win article>button{border:3px solid;border-radius:10px;background:white;padding:10px;font-weight:bold}
#crop>.primary{width:min(560px,91vw)}
#game{padding:8px}
.hud{display:flex;justify-content:space-between;align-items:center;width:100%}
.hud button{border:2px solid;border-radius:18px;background:white;padding:10px 12px;min-height:44px;font-size:12px;font-weight:bold}
#combo{font:20px Impact;color:var(--r);text-align:center;padding:0 8px}
#arena{width:min(620px,97vw);height:min(52vh,560px);min-height:300px;position:relative}
#arena canvas{touch-action:manipulation}
#hint{position:absolute;top:15%;left:50%;transform:translateX(-50%) rotate(-3deg);background:var(--y);border:3px solid;padding:7px;font:17px Impact;box-shadow:4px 4px;animation:pulse 1s infinite}
@keyframes pulse{50%{scale:1.08}}
.meter{width:min(650px,95vw);display:flex;align-items:center;gap:8px;font-size:9px;font-weight:900}
.meter i{height:17px;border:3px solid;border-radius:10px;background:white;flex:1;overflow:hidden}
.meter b{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--g),var(--y),var(--r));transition:width .3s}
.economy{margin:8px 0 0;font-size:12px;font-weight:800;text-align:center}
#weapons{width:min(650px,96vw);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px}
.weapon{position:relative;flex:1 1 140px;max-width:200px;min-height:80px;border:3px solid;border-radius:12px;background:white;box-shadow:3px 4px;padding:8px 6px 6px;font-size:10px;font-weight:900;line-height:1.15}
.weapon span{display:block;font-size:30px;line-height:1}
.weapon.selected{background:var(--y);transform:translateY(-4px)}
.weapon.locked{filter:grayscale(.8);background:#ddd}
.cost{position:absolute!important;right:2px;top:-10px;background:white;border:2px solid;border-radius:10px;font-size:10px!important;padding:2px 6px}
.smash{width:min(430px,90vw);font:22px Impact;letter-spacing:1px}
dialog{width:min(480px,90vw);border:4px solid;border-radius:18px;background:var(--c);box-shadow:9px 10px;padding:25px}
dialog::backdrop{background:#111b}
.close:first-child{float:right;border:0;background:none;font-size:28px}
dialog li{margin:15px;line-height:1.4}
.ver{margin:8px 0 0;font-size:11px;font-weight:700;letter-spacing:.04em;opacity:.55;text-align:center}
#win{display:none;position:fixed;inset:0;z-index:50;background:#111c;align-items:center;justify-content:center;padding:20px}
#win.show{display:flex}
#win article{width:min(470px,92vw);background:var(--c);border:4px solid;border-radius:20px;box-shadow:10px 11px var(--y);padding:23px;text-align:center;animation:pop .35s}
#win article>div{font-size:70px}
#win h3{font:28px Impact;margin:8px 0 16px}
.win-note{margin:0 0 4px;font-size:14px;font-weight:700}
@keyframes pop{from{transform:scale(.3) rotate(-12deg)}}
#win article>button{display:block;width:100%;margin:10px 0;min-height:56px}
#win article>.link{border:0;background:none}
@media(max-width:600px){
  .screen{padding-top:14px}
  .hero{scale:.8;margin:-25px}
  #arena{height:48vh}
  .weapon{flex-basis:30%;min-height:76px;font-size:9px}
  .weapon span{font-size:26px}
  .meter>span{display:none}
  .economy{font-size:11px;padding:0 8px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}