/* deploy 20: result popup leaves room for the beaten-up doll; 1080x1350 share card preview */
#payoff{background:linear-gradient(to bottom,rgba(40,28,16,0) 0%,rgba(40,28,16,0) 42%,rgba(40,28,16,.38) 100%);align-items:flex-end;padding:10px 10px max(10px,env(safe-area-inset-bottom));}
#payoff .payoffCard{margin:auto auto 0;padding:16px 16px 14px;border-radius:20px;box-shadow:0 -6px 40px rgba(40,28,16,.28);}
#payoff.on .payoffCard{animation:wreckIn .45s .55s both cubic-bezier(.2,.9,.3,1.15);}
@keyframes wreckIn{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
#payoff #payoffTitle{font-size:25px;}
#payoff .rank{font-size:15px;margin-top:2px;}
#payoff #payoffStats{margin-top:3px;}
.wreck{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px;padding:6px 10px;border-radius:12px;background:rgba(200,69,47,.07);}
.wreck .seal{flex:none;font-size:13px;line-height:1.15;letter-spacing:.08em;color:#c8452f;border:2px solid #c8452f;border-radius:6px;padding:3px 5px;transform:rotate(-6deg);font-weight:700;}
.wreck .list{font-size:13px;color:var(--brown);text-align:left;letter-spacing:.04em;line-height:1.5;}
#payoff .payoffBtns{gap:7px;margin-top:12px;}
#payoff .payoffBtns button{padding:9px 6px;font-size:14.5px;}
#top[data-state="payoff"] .hud,#top[data-state="payoff"] .dock,#top[data-state="payoff"] #danceMove,#top[data-state="payoff"] #pause{visibility:hidden;}
@media (min-width:720px) and (min-aspect-ratio:1/1){
  #payoff{background:linear-gradient(to right,rgba(40,28,16,0) 0%,rgba(40,28,16,0) 50%,rgba(40,28,16,.32) 100%);align-items:center;justify-content:flex-end;padding:16px max(16px,5vw) 16px 16px;}
  #payoff .payoffCard{margin:auto 0;width:min(400px,40vw);padding:22px 20px 18px;box-shadow:0 20px 60px rgba(40,28,16,.3);}
  #payoff.on .payoffCard{animation-name:wreckInSide;}
  @keyframes wreckInSide{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
  #payoff #payoffTitle{font-size:28px;}
  .wreck .list{font-size:14px;}
}
@media (max-height:700px) and (max-aspect-ratio:1/1){#payoff .payoffBtns button{padding:7px 4px;font-size:14px;} #payoff #payoffLine{display:none;}}
#shareCanvas{width:min(380px,76vw,calc((100svh - 250px) * .8));}
#shareImgFallback{width:min(320px,76vw,calc((100svh - 250px) * .8));}
@media (prefers-reduced-motion:reduce){#payoff.on .payoffCard{animation:none;}}