/* WEIRDOS! — biro on paper. Everything is drawn, nothing is an emoji. */
*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
html,body{height:100%; overflow:hidden; overscroll-behavior:none;
  font-family:"Comic Sans MS","Chalkboard SE",system-ui,sans-serif; background:#e9dcc4}

#arena{position:fixed; inset:0; touch-action:none; user-select:none; overflow:hidden;
  background:#f7ecd9;
  background-image:
    repeating-linear-gradient(0deg, rgba(120,100,70,.07) 0 1px, transparent 1px 34px),
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.7), transparent 60%);
}
#arena.shake{animation:shake .35s ease}
@keyframes shake{0%,100%{transform:translate(0,0)} 25%{transform:translate(-6px,3px)}
  60%{transform:translate(5px,-4px)}}

#hud{position:absolute; top:0; left:0; right:0; height:13vh; z-index:8; padding:0 14px;
  display:flex; align-items:center; justify-content:space-between; pointer-events:none;
  color:#3a2f22; font-weight:800}
#hearts{font-size:clamp(20px,6vw,30px); color:#c8452f; letter-spacing:2px}
#mid{text-align:center; line-height:1.15}
#mid b{display:block; font-size:clamp(15px,4.6vw,20px)}
#mid span{font-size:clamp(12px,3.6vw,15px); opacity:.7}
#score{font-size:clamp(26px,8vw,40px)}

#stage,#fog{position:absolute; inset:0}
#stage{z-index:4} #fog{z-index:6; pointer-events:none}
#stage>div,#fog>div{position:absolute; left:0; top:0; will-change:transform}

.w-svg{width:100%; height:100%; display:block; overflow:visible}
.you{width:clamp(46px,13vw,74px); aspect-ratio:1; z-index:6}
.you-name{position:absolute;left:50%;top:96%;transform:translateX(-50%);white-space:nowrap;
  color:#3a2f22;background:rgba(255,250,240,.8);padding:1px 5px;border-radius:8px;
  font-size:clamp(8px,2.3vw,11px);font-weight:800}
.you.frozen{filter:hue-rotate(160deg) brightness(1.2)}
.you.ouch{animation:blink .26s steps(2) 5}
@keyframes blink{50%{opacity:.2}}

.mob{width:clamp(52px,15vw,86px); aspect-ratio:1; z-index:5}
.mob.m-baby{width:clamp(30px,8vw,44px)}
.mob.still{opacity:.75}
.mob.charging{animation:rage .22s ease-in-out infinite alternate}
@keyframes rage{to{transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(calc(var(--s,1) * 1.12))}}
.mob.screaming{animation:scream .18s ease-in-out infinite alternate}
@keyframes scream{to{transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) rotate(6deg) scale(calc(var(--s,1) * 1.1))}}
.mob.boing{animation:boing .2s ease}
@keyframes boing{50%{transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(calc(var(--s,1) * .8))}}
.mob.running{opacity:.85}

.brow{position:absolute; height:1.6vh; background:#8a4a2f; border-radius:99px; z-index:5;
  box-shadow:0 0 0 2px rgba(138,74,47,.35)}

.bit{width:clamp(22px,6vw,32px); aspect-ratio:1; z-index:3; display:grid; place-items:center;
  font-size:clamp(20px,5.5vw,28px); color:#d99a1f; animation:twinkle 1.4s ease-in-out infinite alternate}
@keyframes twinkle{to{transform:translate3d(var(--x),var(--y),0) translate(-50%,-50%) scale(1.25) rotate(25deg)}}

.shot{width:clamp(26px,7vw,38px); aspect-ratio:1; z-index:6; display:grid; place-items:center;
  font-size:clamp(20px,6vw,30px)}
.puddle{width:clamp(56px,17vw,96px); aspect-ratio:1; z-index:2; border-radius:50%;
  background:radial-gradient(circle, rgba(61,139,214,.42), rgba(61,139,214,.12) 70%, transparent 72%)}
.blab{background:#fff; border:3px solid #4a9a7a; color:#2c5c4a; border-radius:16px;
  padding:6px 12px; font-size:clamp(13px,3.8vw,17px); font-weight:700; white-space:nowrap;
  box-shadow:0 3px 0 rgba(74,154,122,.3)}

.flash{position:absolute; left:50%; top:22%; transform:translateX(-50%); z-index:9;
  background:#3a2f22; color:#fff; padding:10px 18px; border-radius:99px;
  font-size:clamp(15px,4.4vw,20px); font-weight:800; animation:up 1.1s ease forwards}
@keyframes up{to{transform:translateX(-50%) translateY(-30px); opacity:0}}

#banner{position:absolute; left:50%; top:15%; transform:translate(-50%,-14px); z-index:9;
  background:#fffaf0; border:4px solid #3a2f22; border-radius:20px; padding:12px 22px;
  text-align:center; opacity:0; pointer-events:none; max-width:88vw;
  transition:opacity .25s, transform .25s}
#banner.on{opacity:1; transform:translate(-50%,0)}
#banner b{display:block; font-size:clamp(17px,5.2vw,24px); color:#3a2f22}
#banner span{font-size:clamp(12px,3.6vw,15px); color:#7a6a52}

#hint{position:absolute; left:50%; bottom:5%; transform:translateX(-50%); z-index:8;
  background:rgba(58,47,34,.82); color:#fff; padding:10px 18px; border-radius:99px;
  font-size:clamp(12px,3.6vw,15px); pointer-events:none}
#passport{position:absolute;right:10px;bottom:10px;z-index:10;border:3px solid #3a2f22;
  border-radius:99px;background:#fffaf0;color:#3a2f22;padding:7px 11px;
  font-family:inherit;font-size:12px;font-weight:700;
  box-shadow:0 3px 0 #c8b89a;cursor:pointer}
#passport:active{transform:translateY(2px);box-shadow:0 1px 0 #c8b89a}

#over[hidden],#dex[hidden]{display:none}
#over{position:absolute; inset:0; z-index:12; display:flex; align-items:center; justify-content:center;
  background:rgba(40,32,20,.72)}
.o-box{background:#fffaf0; border:5px solid #3a2f22; border-radius:26px; padding:24px 28px;
  text-align:center; max-width:88vw}
.o-title{font-size:clamp(18px,5.4vw,24px); font-weight:800; color:#c8452f}
.o-score{font-size:clamp(48px,16vw,78px); font-weight:800; line-height:1.05; color:#3a2f22}
.o-sub{font-size:clamp(13px,3.8vw,16px); color:#7a6a52}
.o-best{font-size:clamp(14px,4.2vw,18px); color:#d99a1f; font-weight:800; margin-top:4px}
.o-row{display:flex; gap:10px; margin-top:18px; justify-content:center; flex-wrap:wrap}
.o-row button{border:0; border-radius:99px; padding:14px 26px; cursor:pointer; font-family:inherit;
  font-size:clamp(15px,4.4vw,19px); font-weight:800; background:#3fa96a; color:#fff;
  box-shadow:0 5px 0 #2f8452}
.o-row button.ghost{background:#fff; color:#3a2f22; box-shadow:0 5px 0 #d8c8aa}
.o-row button:active{transform:translateY(3px); box-shadow:none}

#dex{position:absolute; inset:0; z-index:14; background:#f7ecd9; overflow:auto; padding:14px}
.d-head{display:flex; align-items:center; gap:12px; padding:6px 4px 14px; position:sticky; top:0;
  background:#f7ecd9; z-index:2}
.d-head b{flex:1; font-size:clamp(19px,5.6vw,26px); color:#3a2f22; letter-spacing:1px}
.d-head span{color:#a08a68; font-weight:800}
.d-head button{border:0; background:#3a2f22; color:#fff; width:40px; height:40px; border-radius:50%;
  font-size:19px; cursor:pointer}
#d-list{display:grid; gap:10px; grid-template-columns:1fr; padding-bottom:20px}
.d-card{display:flex; align-items:center; gap:12px; background:#fffaf0; border:3px solid #e2d3b4;
  border-radius:18px; padding:10px 12px}
.d-card.locked{opacity:.55; border-style:dashed}
.d-pic{width:64px; height:64px; flex:0 0 auto; display:grid; place-items:center}
.d-pic .q{font-size:34px; color:#c8b89a; font-weight:800}
.d-txt b{display:block; font-size:clamp(15px,4.4vw,18px); color:#3a2f22}
.d-txt span{font-size:clamp(12px,3.5vw,14px); color:#8a7a62}
@media (min-width:620px){ #d-list{grid-template-columns:1fr 1fr} }