:root{--crust:#C68642;--wine:#722F37;--duck:#FFD23F;--pond:#3AAFA9;--ink:#1d0f0a;}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:'Bricolage Grotesque',sans-serif;color:#fff;user-select:none;touch-action:none}
#scene-container{position:fixed;inset:0}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:20;
background:radial-gradient(circle at 30% 20%,rgba(198,134,66,.35),transparent 50%),radial-gradient(circle at 80% 90%,rgba(114,47,55,.6),transparent 55%),rgba(20,8,5,.82);overflow:auto;padding:16px}
.card{max-width:760px;width:100%;text-align:center;animation:rise .6s cubic-bezier(.2,1.4,.4,1)}
.card.small{max-width:380px;background:rgba(0,0,0,.4);padding:28px;border-radius:24px;border:3px solid var(--crust)}
@keyframes rise{from{transform:translateY(40px) scale(.9);opacity:0}}
.title{font-family:'Luckiest Guy';font-size:clamp(56px,13vw,130px);line-height:.9;color:var(--duck);
text-shadow:0 6px 0 var(--crust),0 12px 0 var(--ink),0 0 40px rgba(255,210,63,.4);transform:rotate(-3deg);animation:wobble 3s ease-in-out infinite}
.title span{color:var(--crust);text-shadow:0 6px 0 var(--wine),0 12px 0 var(--ink)}
.title.red{color:#ff8a6b;font-size:clamp(42px,9vw,90px)}
.title2{font-family:'Luckiest Guy';font-size:60px;color:var(--duck);text-shadow:0 5px 0 var(--wine)}
@keyframes wobble{50%{transform:rotate(2deg) scale(1.03)}}
.sub{font-weight:300;font-style:italic;font-size:20px;margin:18px 0 22px;opacity:.9}
.big{font-family:'Luckiest Guy';font-size:34px;padding:14px 46px 8px;border:none;border-radius:60px;cursor:pointer;
background:var(--duck);color:var(--ink);box-shadow:0 7px 0 var(--crust),0 12px 24px rgba(0,0,0,.5);transition:transform .1s;margin:8px}
.big:hover{transform:translateY(-3px) rotate(-1deg)}.big:active{transform:translateY(4px);box-shadow:0 2px 0 var(--crust)}
.ghost{font-family:'Luckiest Guy';font-size:18px;padding:10px 20px 6px;background:transparent;color:var(--duck);border:3px solid var(--duck);border-radius:40px;cursor:pointer;margin:6px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;text-align:left}
@media(max-width:600px){.cols{grid-template-columns:1fr}}
.controls,.board{background:rgba(0,0,0,.35);border:3px dashed var(--crust);border-radius:18px;padding:16px}
h3{font-family:'Luckiest Guy';color:var(--crust);font-size:24px;margin-bottom:8px;letter-spacing:1px}
.controls p{font-size:15px;margin:3px 0}.controls b{color:var(--duck);font-weight:800}
.tip{margin-top:10px!important;color:var(--pond);font-style:italic}
.best{margin-bottom:6px}.best b{color:var(--duck)}
#lb{padding-left:22px;font-size:15px}#lb li{margin:2px 0}#lb li span{float:right;color:var(--duck);font-weight:800}
.remix{display:inline-block;margin-top:18px;color:var(--pond);font-weight:800}
label{display:block;margin:12px 0;text-align:left;font-weight:800}label input{width:100%;accent-color:var(--duck)}
#stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:24px auto;max-width:480px}
#stats div{background:rgba(0,0,0,.4);border:3px solid var(--crust);border-radius:14px;padding:10px}
#stats b{display:block;font-family:'Luckiest Guy';font-size:32px;color:var(--duck)}
.submit{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.submit input{padding:10px 16px;border-radius:30px;border:3px solid var(--duck);background:rgba(0,0,0,.5);color:#fff;font-size:16px;font-family:inherit}
#submsg{min-height:22px;margin:6px;color:var(--pond)}

#hud{position:fixed;inset:0;pointer-events:none;z-index:10;font-family:'Luckiest Guy'}
#hud *{text-shadow:-2px -2px 0 var(--ink),2px -2px 0 var(--ink),-2px 2px 0 var(--ink),2px 2px 0 var(--ink)}
#feathers{position:absolute;top:14px;left:14px;display:flex;gap:4px}
.feather{width:26px;height:38px;background:linear-gradient(160deg,#fff,#ffe9a0);border-radius:50% 50% 50% 50%/70% 70% 30% 30%;border:3px solid var(--ink);transform:rotate(-15deg);transition:all .5s}
.feather.lost{transform:translateY(60px) rotate(120deg);opacity:0}
#wave{position:absolute;top:12px;left:50%;transform:translateX(-50%);font-size:clamp(16px,3vw,26px);color:var(--duck);white-space:nowrap}
#scorebox{position:absolute;top:12px;right:16px;text-align:right}
#score{font-size:36px;color:#fff}
#combo{font-size:22px;color:#ff8a6b;animation:pulse .4s infinite alternate}
@keyframes pulse{to{transform:scale(1.15)}}
#ammo{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;gap:4px;font-size:20px;color:var(--duck)}
.crumb{width:14px;height:20px;background:var(--crust);border:2px solid var(--ink);border-radius:40%}
.crumb.used{opacity:.2}
#powerup{position:absolute;bottom:56px;left:50%;transform:translateX(-50%);font-size:20px;color:var(--pond)}
#crosshair{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);transition:transform .08s}
#crosshair.hit{transform:translate(-50%,-50%) scale(.6) rotate(20deg)}
#crosshair.hit path{stroke:#ff5a3c}
#vignette{position:absolute;inset:0;box-shadow:inset 0 0 160px 60px rgba(200,0,30,.8);opacity:0;transition:opacity .35s}
#shieldfx{position:absolute;inset:0;box-shadow:inset 0 0 120px 30px rgba(58,175,169,.6);opacity:0}
.pop{position:absolute;font-size:22px;color:var(--duck);animation:floatup 1.1s ease-out forwards;white-space:nowrap;transform:translate(-50%,-50%)}
@keyframes floatup{to{margin-top:-80px;opacity:0;transform:translate(-50%,-50%) scale(1.4) rotate(-6deg)}}
#banner{position:absolute;top:30%;width:100%;text-align:center;font-size:clamp(30px,7vw,70px);color:var(--duck);opacity:0;transition:opacity .4s}
#banner.show{opacity:1;animation:wobble 1s infinite}
#gun{position:absolute;right:4%;bottom:-20px;width:300px;height:220px;transition:transform .08s}
#gun.kick{transform:translate(10px,25px) rotate(4deg)}
.baguette{position:absolute;right:30px;bottom:70px;width:250px;height:58px;border-radius:40px;transform:rotate(-24deg);
background:repeating-linear-gradient(70deg,#d89a52 0 22px,#f3c785 22px 28px),#d89a52;border:4px solid var(--ink)}
.wing{position:absolute;right:60px;bottom:20px;width:120px;height:90px;background:#fff6d8;border:4px solid var(--ink);border-radius:60% 40% 50% 50%;transform:rotate(-20deg)}
.bill{position:absolute;right:-30px;bottom:-30px;width:150px;height:90px;background:#ff9f1c;border:4px solid var(--ink);border-radius:50% 50% 10% 50%}
@media(max-width:700px){#gun{transform:scale(.55);transform-origin:bottom right}#gun.kick{transform:scale(.55) translate(10px,25px)}}

#mobile{position:fixed;inset:0;z-index:11}
#look{position:absolute;right:0;top:0;width:60%;height:100%}
#joy{position:absolute;left:24px;bottom:30px;width:130px;height:130px;border-radius:50%;background:rgba(255,210,63,.15);border:3px solid rgba(255,210,63,.5)}
#knob{position:absolute;left:40px;top:40px;width:50px;height:50px;border-radius:50%;background:var(--duck)}
#mobile button{position:absolute;font-family:'Luckiest Guy';border:3px solid var(--ink);border-radius:50%;color:var(--ink)}
#mfire{right:24px;bottom:40px;width:96px;height:96px;background:#ff8a6b;font-size:22px}
#mjump{right:130px;bottom:30px;width:66px;height:66px;background:var(--duck)}
#mreload{right:40px;bottom:150px;width:56px;height:56px;background:var(--pond)}
#auth-status{position:fixed;bottom:6px;left:8px;font-size:12px;opacity:.6;z-index:30}