html,body,#game-frame{width:100%;height:100%;margin:0;overflow:hidden;background:#f57c28}
#game-frame canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#boot-message,#exit-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#f57c28;color:#1d1712;font-family:Arial,sans-serif;z-index:99999;transition:opacity .5s}
#boot-message{pointer-events:none}
#boot-message.done{opacity:0}
.loading-label{margin:28px 0 0;color:#fff;font:700 18px/1.4 Arial,sans-serif;letter-spacing:.3px}
.loading-dots{display:inline-flex;width:20px}
.loading-dots span{animation:loading-dot 1.2s infinite both}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
@keyframes loading-dot{0%,20%{opacity:.15}50%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.loading-dots span{animation:none}}
.boot-heart{width:min(30vw,150px);height:auto;fill:#fff;filter:drop-shadow(5px 5px 0 #1d1712);animation:beat 1.4s ease-in-out .9s infinite alternate}
.boot-heart rect{animation:drop .5s steps(5) both}
.boot-heart rect:nth-child(1){animation-delay:0ms}
.boot-heart rect:nth-child(2){animation-delay:40ms}
.boot-heart rect:nth-child(3){animation-delay:80ms}
.boot-heart rect:nth-child(4){animation-delay:120ms}
.boot-heart rect:nth-child(5){animation-delay:160ms}
.boot-heart rect:nth-child(6){animation-delay:200ms}
.boot-heart rect:nth-child(7){animation-delay:240ms}
.boot-heart rect:nth-child(8){animation-delay:280ms}
.boot-heart rect:nth-child(9){animation-delay:320ms}
.boot-heart rect:nth-child(10){animation-delay:360ms}
.boot-heart rect:nth-child(11){animation-delay:400ms}
.boot-heart rect:nth-child(12){animation-delay:440ms}
.boot-heart rect:nth-child(13){animation-delay:480ms}
.boot-heart rect:nth-child(14){animation-delay:520ms}
.boot-heart rect:nth-child(15){animation-delay:560ms}
.boot-heart rect:nth-child(16){animation-delay:600ms}
.boot-heart rect:nth-child(17){animation-delay:640ms}
.boot-heart rect:nth-child(18){animation-delay:680ms}
.boot-heart rect:nth-child(19){animation-delay:720ms}
.boot-heart rect:nth-child(20){animation-delay:760ms}
.boot-heart rect:nth-child(21){animation-delay:800ms}
.boot-heart rect:nth-child(22){animation-delay:840ms}
.boot-heart rect:nth-child(23){animation-delay:880ms}
.boot-heart rect:nth-child(24){animation-delay:920ms}
.boot-heart rect:nth-child(25){animation-delay:960ms}
.boot-heart rect:nth-child(26){animation-delay:1000ms}
.boot-heart rect:nth-child(27){animation-delay:1040ms}
.boot-heart rect:nth-child(28){animation-delay:1080ms}
.boot-heart rect:nth-child(29){animation-delay:1120ms}
.boot-heart rect:nth-child(30){animation-delay:1160ms}
.boot-heart rect:nth-child(31){animation-delay:1200ms}
.boot-heart rect:nth-child(32){animation-delay:1240ms}
.boot-heart rect:nth-child(33){animation-delay:1280ms}
.boot-heart rect:nth-child(34){animation-delay:1320ms}
.boot-heart.still,.boot-heart.still rect{animation:none}
@keyframes drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes beat{to{transform:scale(1.06)}}
#exit-message h1{font-size:22px;letter-spacing:-.5px;font-weight:700;margin:30px 0 0;text-align:center;padding:0 24px}
#rejoin{margin-top:20px;font:700 16px Arial,sans-serif;background:#fff;color:#1d1712;border:3px solid #1d1712;border-radius:0;padding:14px 28px;cursor:pointer;box-shadow:5px 5px 0 #1d1712}
#rejoin:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #1d1712}
#rejoin:focus-visible{outline:3px solid #fff;outline-offset:4px}
#exit-message[hidden],#hint[hidden]{display:none}
#hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:99998;background:#1d1712;color:#fff;font:600 14px/1.4 Arial,sans-serif;padding:12px 18px;border:3px solid #fff;text-align:center;pointer-events:none;max-width:90vw}
@media(prefers-reduced-motion:reduce){.boot-heart,.boot-heart rect{animation:none}#boot-message{transition:none}}
