*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#2b1a0e;color:#3a2414;
  font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}
canvas{position:fixed;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
#ov{pointer-events:none}
.hidden{display:none!important}
button{font:inherit;cursor:pointer;border:0}
a{color:#a85a26}
#hurt,#stinkFx{position:fixed;inset:0;pointer-events:none;opacity:0}
#hurt{background:radial-gradient(ellipse at center,rgba(255,120,60,0) 50%,rgba(255,90,40,.55) 100%)}
#stinkFx{background:radial-gradient(ellipse at center,rgba(140,220,70,.12) 30%,rgba(110,200,50,.7) 100%)}
#touch{position:fixed;inset:0;display:none}
body.touch.playing #touch{display:block}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;display:none;
  padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
body.playing #hud{display:block}
.tl{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.bar-wrap{background:rgba(255,248,238,.92);border:3px solid #e9a96b;border-radius:16px;padding:5px 10px 6px;min-width:230px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.bar-wrap .who{font-family:Georgia,serif;font-weight:800;color:#a85a26;font-size:14px}
.bar-wrap .num{float:right;font-weight:900;color:#2b1a0e;font-size:14px}
.heart{color:#e0403a}
.bar{height:12px;background:#ead6bf;border-radius:7px;overflow:hidden;margin-top:3px;clear:both}
#hpFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7ad04a,#a6e35f);border-radius:7px;transition:width .15s}
#hp.low #hpFill{background:linear-gradient(90deg,#e0603a,#f2a541)}
#hp.low{animation:lowpulse .6s infinite alternate}
@keyframes lowpulse{to{border-color:#e0603a}}
.pill{background:rgba(43,26,14,.78);color:#fff3e4;border:2px solid rgba(233,169,107,.7);border-radius:999px;padding:4px 14px;
  display:flex;align-items:center;gap:8px;font-weight:800;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.pill.score{font-size:22px;min-width:120px}
.pill .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#e9a96b;font-weight:700}
.pill.small{font-size:15px;padding:2px 12px}
.tc{position:absolute;left:50%;transform:translateX(-50%);top:max(10px,env(safe-area-inset-top));display:flex;flex-direction:column;align-items:center;gap:6px;width:min(520px,46vw)}
.areapill{background:rgba(43,26,14,.8);border:2px solid rgba(233,169,107,.7);color:#fff3e4;border-radius:16px;padding:4px 16px;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.areapill b{display:block;font-family:Georgia,serif;font-size:16px;color:#ffd9b3}
.areapill span{font-size:13px;font-weight:700}
#bossbar{width:100%;background:rgba(30,16,40,.85);border:2px solid #9dff5a;border-radius:14px;padding:4px 10px 7px;box-shadow:0 0 18px rgba(157,255,90,.35)}
.bossname{color:#e8ffd8;font-weight:900;font-size:14px;text-align:center;letter-spacing:.03em}
.bossname em{color:#ff6a4a;font-style:normal;margin-left:6px;animation:lowpulse .4s infinite alternate}
#bossbar .bar{background:#3a2a4a;height:14px}
#bossFill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#7cff3a,#c8ff6a);border-radius:7px;transition:width .12s}
.tr{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));display:flex;gap:8px;pointer-events:auto;align-items:center}
.round{width:42px;height:42px;border-radius:50%;background:rgba(43,26,14,.78);color:#fff3e4;border:2px solid rgba(233,169,107,.7);
  font-size:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.round:active{transform:scale(.92)}
.bark{position:absolute;left:max(18px,env(safe-area-inset-left));bottom:max(18px,env(safe-area-inset-bottom));width:78px;height:78px;border-radius:50%;padding:0;
  background:#2b1a0e;border:4px solid #8a6a52;pointer-events:auto;box-shadow:0 4px 14px rgba(0,0,0,.4);--p:0}
.bark img,.tbtn img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.bark .cd,.tbtn .cd{position:absolute;inset:0;border-radius:50%;background:conic-gradient(rgba(43,26,14,.78) calc(var(--p) * 360deg),rgba(0,0,0,0) 0)}
.bark kbd{position:absolute;right:-6px;top:-6px;background:#fff8ee;color:#2b1a0e;border:2px solid #e9a96b;border-radius:8px;font:900 13px/1 "Segoe UI",sans-serif;padding:3px 6px}
.bark small,.tbtn small{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);background:#2b1a0e;color:#ffd9b3;font-size:10px;font-weight:900;letter-spacing:.1em;padding:1px 6px;border-radius:6px}
.bark.ready,.tbtn.barkt.ready{border-color:#ffd23c;box-shadow:0 0 0 3px rgba(255,210,60,.35),0 4px 14px rgba(0,0,0,.4);animation:ready 1s infinite alternate}
@keyframes ready{to{box-shadow:0 0 0 7px rgba(255,210,60,.15),0 4px 14px rgba(0,0,0,.4)}}
#ammo{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));text-align:right}
.ammobox{display:inline-flex;align-items:baseline;gap:6px;background:rgba(43,26,14,.8);border:2px solid rgba(143,232,255,.8);border-radius:16px;padding:4px 14px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.ammobox b{font-size:34px;line-height:1;font-weight:900}
.ammobox .slash{opacity:.6}
#ammoRes{font-size:18px;font-weight:800;color:#bfefff}
.bub{display:inline-block;width:20px;height:20px;border-radius:50%;align-self:center;
  background:radial-gradient(circle at 32% 30%,#fff 0 18%,rgba(220,245,255,.5) 30%,rgba(140,220,255,.35) 62%,rgba(255,170,220,.9) 100%);border:1px solid rgba(255,255,255,.8)}
.ammohint{font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 3px #000;margin-top:4px;height:16px}
.ammohint span{display:none}
#ammo.reloading .r1{display:inline}
#ammo.empty .r2{display:inline;color:#ffd23c}
#ammo.reloading .ammobox{border-color:#ffd23c}
#cross{position:absolute;left:50%;top:50%;width:0;height:0}
#cross i{position:absolute;background:#fff;border-radius:2px;box-shadow:0 0 2px rgba(0,0,0,.9);transition:transform .08s}
#cross i:nth-child(1){width:3px;height:9px;left:-1.5px;top:-17px}
#cross i:nth-child(2){width:3px;height:9px;left:-1.5px;top:8px}
#cross i:nth-child(3){width:9px;height:3px;left:-17px;top:-1.5px}
#cross i:nth-child(4){width:9px;height:3px;left:8px;top:-1.5px}
#cross b{position:absolute;width:5px;height:5px;left:-2.5px;top:-2.5px;border-radius:50%;background:#ffd23c;box-shadow:0 0 2px #000}
#cross.hit i{background:#ffd23c}
#cross.hit i:nth-child(1){transform:translateY(-4px)}#cross.hit i:nth-child(2){transform:translateY(4px)}
#cross.hit i:nth-child(3){transform:translateX(-4px)}#cross.hit i:nth-child(4){transform:translateX(4px)}
#aimHint{position:absolute;left:50%;top:58%;transform:translateX(-50%);background:rgba(43,26,14,.8);color:#fff3e4;padding:6px 14px;border-radius:999px;font-weight:700;font-size:14px}
#banner{position:absolute;left:0;right:0;top:24%;text-align:center;opacity:0;pointer-events:none}
#banner b{display:block;font-family:Georgia,serif;font-size:clamp(30px,6vw,56px);color:#fff8ee;-webkit-text-stroke:2px #2b1a0e;text-shadow:3px 4px 0 #a85a26,0 0 24px rgba(0,0,0,.5)}
#banner small{display:inline-block;margin-top:6px;font-size:clamp(14px,2.2vw,20px);font-weight:800;color:#2b1a0e;background:rgba(255,248,238,.92);padding:4px 14px;border-radius:999px}
#banner.show{animation:ban 2.2s ease forwards}
@keyframes ban{0%{opacity:0;transform:scale(.6)}12%{opacity:1;transform:scale(1.08)}20%{transform:scale(1)}82%{opacity:1}100%{opacity:0;transform:translateY(-10px)}}
#toast{position:absolute;left:50%;bottom:18%;transform:translateX(-50%) translateY(10px);background:rgba(255,248,238,.95);color:#2b1a0e;font-weight:800;font-size:15px;
  padding:7px 16px;border-radius:999px;border:2px solid #e9a96b;opacity:0;transition:opacity .2s,transform .2s;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#woof{position:absolute;left:14%;bottom:30%;font-family:Georgia,serif;font-weight:900;font-size:54px;color:#ffd23c;-webkit-text-stroke:2px #2b1a0e;text-shadow:3px 3px 0 #a85a26;opacity:0;transform:rotate(-12deg)}
#woof.show{animation:woof .8s ease-out forwards}
@keyframes woof{0%{opacity:0;transform:rotate(-12deg) scale(.4)}20%{opacity:1;transform:rotate(-8deg) scale(1.25)}100%{opacity:0;transform:rotate(-4deg) scale(1.5) translateY(-30px)}}
/* touch controls */
#joy,.tbtn{display:none}
body.touch #joy{display:block;position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;left:110px;top:calc(100% - 120px);
  background:rgba(255,248,238,.14);border:3px solid rgba(255,248,238,.4);opacity:.55}
body.touch #joy.on{opacity:1}
#knob{position:absolute;left:30px;top:30px;width:54px;height:54px;border-radius:50%;background:rgba(255,248,238,.8);border:3px solid #e9a96b}
body.touch .tbtn{display:block;position:absolute;pointer-events:auto;border-radius:50%;box-shadow:0 4px 14px rgba(0,0,0,.4);touch-action:none}
body.touch .tbtn.down{transform:scale(.92)}
.tbtn.fire{right:max(22px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));width:92px;height:92px;background:linear-gradient(180deg,#f2a541,#d9822b);border:4px solid #fff8ee}
.tbtn.fire .bub{width:42px;height:42px;display:block;margin:auto}
.tbtn.barkt{right:calc(max(22px,env(safe-area-inset-right)) + 108px);bottom:max(30px,env(safe-area-inset-bottom));width:70px;height:70px;padding:0;background:#2b1a0e;border:4px solid #8a6a52;--p:0}
.tbtn.reload{right:calc(max(22px,env(safe-area-inset-right)) + 22px);bottom:calc(max(24px,env(safe-area-inset-bottom)) + 108px);width:48px;height:48px;background:rgba(43,26,14,.8);color:#fff;font-size:22px;font-weight:900;border:2px solid rgba(143,232,255,.8)}
body.touch .bark{display:none}
body.touch #ammo{right:auto;left:50%;transform:translateX(-50%);text-align:center}
body.touch .ammohint .r2{display:none!important}
body.touch #woof{left:auto;right:30%}

/* ---------- Screens ---------- */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;
  background:radial-gradient(ellipse at center,rgba(43,26,14,.05),rgba(43,26,14,.55));overflow-y:auto;z-index:5}
.card{background:#fff8ee;border-radius:26px;padding:22px 24px 16px;max-width:440px;width:100%;text-align:center;
  box-shadow:0 18px 50px rgba(0,0,0,.45);border:3px solid #e9a96b;margin:auto;position:relative}
.card.wide{max-width:540px}
.card.slim{max-width:390px}
#start{justify-content:flex-start;padding-left:max(16px,5vw)}
#start .card{margin:70px auto auto 0}
.photo{width:112px;height:112px;margin:-70px auto 6px;border-radius:50%;padding:5px;background:linear-gradient(135deg,#9dff5a,#3c2f4a);box-shadow:0 8px 20px rgba(0,0,0,.35)}
.photo img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;border:3px solid #fff8ee}
h1{font-family:Georgia,"Times New Roman",serif;font-size:46px;line-height:1.05;color:#a85a26;text-shadow:2px 2px 0 #ffd9b3,4px 4px 0 #9dff5a}
h2{font-family:Georgia,"Times New Roman",serif;font-size:30px;color:#a85a26;line-height:1.1}
.story{margin:8px 0 10px;font-size:15px;color:#6b4a32;line-height:1.45}
.story b{color:#3c2f4a}
.tag{margin:8px 0 12px;font-size:15px;color:#6b4a32;line-height:1.4}
.tag.small{font-size:13px;margin-top:-4px}
.how{list-style:none;text-align:left;background:#f7e6d4;border-radius:16px;padding:8px 12px;margin-bottom:10px}
.how li{display:flex;align-items:center;gap:6px 8px;padding:3px 0;font-size:14px;color:#3a2414;flex-wrap:wrap}
.how b{background:#2b1a0e;color:#ffe3c6;border-radius:8px;padding:2px 8px;font-size:13px;white-space:nowrap;min-width:40px;text-align:center}
.how span{margin-right:6px}
.how .note{color:#9a7a62;font-size:12px}
.how li.tipline{display:block;font-size:13px;color:#6b4a32;padding-top:6px;line-height:1.7}
.how b.t{background:#fff8ee;color:#a85a26;border:1px solid #e9c9a6;min-width:0}
.how b.t.pink{color:#d63a7a}
.mob{display:none!important}
body.touch .mob{display:flex!important}
body.touch .desk{display:none!important}
.diff{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 12px;font-size:13px;font-weight:800;color:#9a7a62}
.diff span{margin-right:4px;text-transform:uppercase;letter-spacing:.06em}
.diff button{background:#f7e6d4;color:#6b4a32;border-radius:999px;padding:5px 14px;font-weight:800;border:2px solid transparent}
.diff button.on{background:#2b1a0e;color:#ffd9b3;border-color:#e9a96b}
.play{display:block;width:100%;background:linear-gradient(180deg,#f2a541,#d9822b);color:#2b1a0e;font-size:23px;font-weight:900;
  padding:12px;border-radius:999px;box-shadow:0 5px 0 #a85a26,0 8px 16px rgba(0,0,0,.25);letter-spacing:.03em}
.play:active{transform:translateY(3px);box-shadow:0 2px 0 #a85a26}
.ghost{display:block;width:100%;margin-top:12px;background:transparent;color:#a85a26;font-weight:700;font-size:15px;padding:8px;border:2px solid #e9a96b;border-radius:999px}
.btnrow{display:flex;gap:8px}
.btnrow .ghost{flex:1}
.bestline{margin-top:12px;font-weight:800;color:#a85a26;font-size:14px}
.links{display:flex;justify-content:space-between;gap:10px;margin-top:12px;font-size:14px;font-weight:700}
.links a{text-decoration:none}
.links a:hover{text-decoration:underline}
.dbg{font-size:11px;color:#c0392b}
.dbg:empty{display:none}
.stats{display:flex;gap:8px;justify-content:center;margin:6px 0 6px}
.stats div{flex:1;background:#f7e6d4;border-radius:14px;padding:8px 4px}
.stats .lbl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9a7a62;font-weight:700}
.stats b{font-size:26px;color:#2b1a0e}
.breakdown{font-size:12px;color:#9a7a62;margin-bottom:6px}
.newbest{font-weight:800;color:#d9822b;margin-bottom:10px;font-size:14px}
.confetti{font-size:40px;margin-top:-6px}
#win{justify-content:flex-start;padding-left:max(16px,4vw);background:radial-gradient(ellipse at 70% 50%,rgba(43,26,14,0),rgba(43,26,14,.35))}
#win .card{margin:auto auto auto 0}
#over{background:radial-gradient(ellipse at center,rgba(90,140,40,.15),rgba(43,26,14,.6))}
.stink{position:relative;width:120px;height:80px;margin:-6px auto 4px}
.stink i{position:absolute;border-radius:50%;background:#9fd46a;opacity:.85;animation:puff 1.6s ease-in-out infinite alternate}
.stink i:nth-child(1){width:54px;height:54px;left:8px;top:18px;background:#8cc858}
.stink i:nth-child(2){width:62px;height:62px;left:36px;top:4px;animation-delay:.3s}
.stink i:nth-child(3){width:48px;height:48px;left:66px;top:24px;background:#b5e07f;animation-delay:.6s}
.stink i:nth-child(4){width:40px;height:40px;left:30px;top:36px;background:#a6d873;animation-delay:.9s}
.stink span{position:absolute;left:0;right:0;top:20px;font-size:34px}
@keyframes puff{to{transform:scale(1.12) translateY(-4px)}}
@media (max-width:760px){
  #start,#win{justify-content:center;padding-left:16px}
  #start .card,#win .card{margin:70px auto auto}
  #win .card{margin:auto}
  .tc{width:min(420px,52vw)}
}
@media (max-height:700px){
  .card{padding:14px 18px 12px}
  h1{font-size:36px}
  .photo{width:84px;height:84px;margin-top:-50px}
  #start .card{margin-top:50px}
  .story{font-size:14px;margin:4px 0 8px}
  .play{font-size:20px;padding:9px}
  .how li{padding:1px 0;font-size:13px}
  .how li.tipline{display:none}
}
@media (max-height:500px){
  #start .card{margin-top:44px;max-width:620px}
  .how{display:none}
  .story{font-size:13px}
  .bar-wrap{min-width:170px;padding:3px 8px 4px}
  .pill.score{font-size:16px;min-width:90px;padding:2px 10px}
  .pill.small{font-size:12px}
  .round{width:36px;height:36px;font-size:14px}
  .areapill b{font-size:13px}.areapill span{font-size:11px}
  .ammobox b{font-size:26px}
  .confetti{display:none}
  .stats b{font-size:20px}
  .tag{font-size:13px;margin:4px 0 8px}
  h2{font-size:24px}
}
@media (max-width:520px){
  .bar-wrap{min-width:150px}
  .tc{top:64px;width:70vw}
  .pill.score{font-size:16px;min-width:80px}
  .tl .pill.small{display:none}
}
@media (max-aspect-ratio:1/1){
  .tc{top:calc(max(10px,env(safe-area-inset-top)) + 84px);width:86vw}
  body.touch #ammo{left:max(12px,env(safe-area-inset-left));right:auto;transform:none;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 250px);text-align:left}
  body.touch #ammo .ammobox b{font-size:24px}
  .tbtn.barkt{right:calc(max(22px,env(safe-area-inset-right)) + 12px);bottom:calc(max(24px,env(safe-area-inset-bottom)) + 108px)}
  .tbtn.reload{right:calc(max(22px,env(safe-area-inset-right)) + 104px);bottom:calc(max(24px,env(safe-area-inset-bottom)) + 22px)}
  #banner{top:30%}
}