:root{
  --bg:#F2C230; --ink:#1a1a1a; --red:#D62828; --redDark:#8f1414; --panel:#fff6d6;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#2b2410; --panel:#3a3218; --ink:#f5ecd0; } }
:root[data-theme="dark"]{ --bg:#2b2410; --panel:#3a3218; --ink:#f5ecd0; }
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg); color:var(--ink); font-family:Rubik, system-ui, -apple-system, "Segoe UI", sans-serif; display:flex; flex-direction:column; align-items:center; overflow-x:hidden}
header{width:100%; padding:6px 16px 5px; text-align:center; background:repeating-linear-gradient(-45deg,#1a1a1a 0 18px,#F2C230 18px 36px)}
h1{display:inline-block; margin:0; padding:6px 16px; font-family:Bungee, Impact, "Arial Black", sans-serif; font-weight:400; font-size:clamp(1.15rem,5vw,1.9rem); letter-spacing:.02em; background:#1a1a1a; color:#F2C230; transform:rotate(-2deg)}
main{width:100%; max-width:520px; padding:8px 16px 16px; display:flex; flex-direction:column; align-items:center; gap:8px}
.stage{position:relative; width:100%; max-width:440px; width:min(100%, 440px, max(210px, calc(100vh - 400px))); width:min(100%, 440px, max(210px, calc(100svh - 400px)))}
svg{width:100%; height:auto; display:block}
.shake{animation:shake .35s}
.shake-big{animation:shake .6s}
@keyframes shake{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-4px,2px)}80%{transform:translate(3px,-1px)}}
#dummy{transform-box:fill-box; transform-origin:50% 100%}
#dummy.hit{animation:recoil .7s ease-out}
@keyframes recoil{0%{transform:scale(1,1)}15%{transform:scale(1.08,.8) translateY(-4px)}35%{transform:scale(.92,1.12) translateY(-18px)}60%{transform:scale(1.04,.94)}100%{transform:scale(1,1)}}
#dummy.launched{transform-origin:50% 50%; animation:launch .7s cubic-bezier(.3,.1,.8,.6) forwards}
@keyframes launch{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(320px,-300px) rotate(900deg)}}
#dummy.returning{animation:slidein .7s cubic-bezier(.2,.9,.3,1.2)}
@keyframes slidein{0%{transform:translateX(260px) rotate(12deg)}70%{transform:translateX(-8px) rotate(-3deg)}100%{transform:translateX(0) rotate(0)}}
.eyes-x,.mouth-open{opacity:0}
#dummy.hurt .eyes-normal,#dummy.hurt .mouth-normal,#dummy.hurt .drop{opacity:0}
#dummy.hurt .eyes-x,#dummy.hurt .mouth-open{opacity:1}
.dmg{display:none}
svg.d1 .dmg1, svg.d2 .dmg2, svg.d3 .dmg3, svg.d4 .dmg4, svg.d5 .dmg5{display:inline}
svg.d1 .gone1, svg.d2 .gone2, svg.d3 .gone3, svg.d4 .gone4, svg.d5 .gone5{display:none}
[data-char]:not(.on){display:none}
.picker{display:flex; flex-wrap:nowrap; gap:6px; width:100%; max-width:440px; position:relative; overflow-x:auto; scrollbar-width:none; padding:3px 2px; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
.picker::-webkit-scrollbar{display:none}
.picker button{font:600 .9rem Rubik, system-ui, sans-serif; background:var(--panel); color:var(--ink); border:3px solid var(--ink); border-radius:10px; padding:8px 12px; cursor:pointer; white-space:nowrap; flex:none}
.picker button[aria-pressed="true"]{background:#1a1a1a; color:#F2C230; border-color:#1a1a1a}
.picker button:focus-visible{outline:3px dashed var(--ink); outline-offset:3px}
.picker button:disabled{opacity:.6; cursor:wait}
#oof{opacity:0; transform-box:fill-box; transform-origin:center}
#oof.show{animation:pop .9s ease-out}
@keyframes pop{0%{opacity:0; transform:scale(.3) rotate(-10deg)}20%{opacity:1; transform:scale(1.15) rotate(6deg)}70%{opacity:1; transform:scale(1)}100%{opacity:0; transform:scale(1.1)}}
.console{width:100%; max-width:440px; background:var(--panel); border:4px solid var(--ink); border-radius:18px 18px 6px 6px; padding:12px 14px 10px; display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:14px; row-gap:6px}
.readout{display:flex; flex-direction:column; gap:5px; min-width:0}
.console .row{grid-column:1 / -1}
.hint{display:none}
.meter{width:100%; height:18px; border:3px solid var(--ink); border-radius:999px; overflow:hidden; background:rgba(0,0,0,.08); position:relative}
.fill{height:100%; width:0; background:linear-gradient(90deg,#F2C230,#f08a24 60%,#D62828)}
.meter.max{animation:flash .25s steps(2) infinite}
@keyframes flash{50%{border-color:#D62828}}
.meter-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 .7rem Rubik, sans-serif; color:#1a1a1a; letter-spacing:.04em}
.big-red{width:112px; height:112px; margin-bottom:10px; border-radius:50%; cursor:pointer; border:6px solid var(--ink);
  background:radial-gradient(circle at 35% 30%,#ff6b6b 0 18%,var(--red) 45%,var(--redDark) 100%);
  box-shadow:0 9px 0 var(--redDark), 0 11px 0 var(--ink);
  font-family:Bungee, Impact, sans-serif; font-size:1.1rem; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent}
.big-red.pressed{transform:translateY(8px); box-shadow:0 2px 0 var(--redDark), 0 4px 0 var(--ink)}
.big-red:disabled{cursor:wait; filter:saturate(.6) brightness(.9)}
.big-red:focus-visible{outline:4px dashed var(--ink); outline-offset:8px}
.count{font-size:.95rem; margin:0; line-height:1.2}
.count strong{font-family:Bungee, Impact, sans-serif; font-weight:400; font-size:1.6rem; vertical-align:-2px; margin-left:4px}
.status,.hint{font-size:.8rem; margin:0; line-height:1.25}
.hint{opacity:.75}
.toast{position:absolute; top:9%; left:50%; transform:translateX(-50%); width:max-content; max-width:88%; margin:0; padding:5px 12px; font-size:.9rem; font-weight:600; color:var(--red); text-align:center; background:#fff6d6; border:3px solid #1a1a1a; border-radius:10px; pointer-events:none; z-index:1}
.toast:empty{display:none}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.row button{font:600 .8rem Rubik, system-ui, sans-serif; background:none; color:var(--ink); border:2px solid var(--ink); border-radius:999px; padding:5px 12px; cursor:pointer}
.row button.primary{background:var(--ink); color:var(--panel)}
.row button:focus-visible{outline:3px dashed var(--ink); outline-offset:3px}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){ .shake,.shake-big,#dummy.hit,#dummy.launched,#dummy.returning,#oof.show,.meter.max{animation-duration:.01s} }

[data-w]:not(.won){display:none}
#dummy.flat{animation:knock 1.3s ease-out}
@keyframes knock{0%{transform:rotate(0)}18%{transform:rotate(82deg)}55%{transform:rotate(80deg)}75%{transform:rotate(-8deg)}88%{transform:rotate(3deg)}100%{transform:rotate(0)}}
#dummy.squash{animation:squash 1.1s}
@keyframes squash{0%{transform:scale(1,1)}10%{transform:scale(1.25,.6)}60%{transform:scale(1.25,.6)}72%{transform:scale(.9,1.15)}85%{transform:scale(1.03,.97)}100%{transform:scale(1,1)}}
#dummy.pancake{animation:pancake 1.7s}
@keyframes pancake{0%{transform:scale(1,1)}10%{transform:scale(1.5,.3)}70%{transform:scale(1.5,.3)}80%{transform:scale(.9,1.15)}90%{transform:scale(1.03,.97)}100%{transform:scale(1,1)}}
#dummy.huff{animation:huff .5s 3}
@keyframes huff{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(3px) rotate(1deg)}}
#dummy.indignant .mouth-normal,#dummy.indignant .drop{opacity:0}
#dummy.indignant .mouth-open{opacity:1}
.pickers{width:100%; max-width:440px; display:flex; flex-direction:column; gap:4px}
.picker-row{display:flex; align-items:center; gap:10px}
.picker-title{font:600 .8rem Rubik, sans-serif; width:50px; flex:none}
.picker-row .picker{justify-content:flex-start}
.picker button{padding:6px 10px; font-size:.85rem}
@media (prefers-reduced-motion: reduce){ #dummy.flat,#dummy.squash,#dummy.pancake,#dummy.huff{animation-duration:.01s} }

/* Wide or landscape screens: stage on the left, pickers and controls on the right */
@media (min-width:560px) and (min-aspect-ratio:1/1){
  main{max-width:1060px; display:grid; grid-template-columns:auto minmax(250px,420px); grid-template-rows:auto 1fr; grid-template-areas:"stage pickers" "stage console"; justify-content:center; align-items:start; column-gap:24px; row-gap:12px; padding-top:12px}
  .stage{grid-area:stage; max-width:none; width:min(620px, calc(100vh - 90px)); width:min(620px, calc(100svh - 90px)); min-width:260px}
  .pickers{grid-area:pickers; max-width:none}
  .picker{flex-wrap:wrap; overflow:visible; -webkit-mask-image:none; mask-image:none}
  .picker-row{align-items:flex-start}
  .picker-title{padding-top:9px}
  .console{grid-area:console; max-width:none}
  .hint{display:block}
}
@media (min-width:560px) and (min-aspect-ratio:1/1) and (max-height:560px){
  header{display:none}
  main{padding-top:8px; padding-bottom:8px; row-gap:8px}
  .stage{width:calc(100vh - 16px); width:calc(100svh - 16px); min-width:0}
  .picker{flex-wrap:nowrap; overflow-x:auto; -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .picker-title{padding-top:0; align-self:center}
  .hint{display:none}
  .big-red{width:96px; height:96px}
}