/* Block Dropper page: the canvas (drawn small, shown with hard pixels like the Spawn world's look), Spawn's HUD
   (its own styles live in scripts/ui.js) and the few Block Friends extras. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#bfe6ee;font-family:"Jersey 10",monospace;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#c{position:fixed;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
#hud{position:fixed;inset:0;z-index:3;pointer-events:none;--spawn-chrome-reservation-right-inset:0px}
#hud>div{position:absolute;inset:0}
.dmg{position:fixed;z-index:4;transform:translate(-50%,-50%);font:28px "Jersey 10",monospace;-webkit-text-stroke:4px #3a2418;paint-order:stroke fill;pointer-events:none;animation:dmg 1.1s ease-out forwards}
@keyframes dmg{from{translate:0 0;opacity:1}to{translate:0 -50px;opacity:0}}
#bar{position:fixed;left:50%;transform:translateX(-50%);top:118px;z-index:6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
body.falling #bar{display:none}
.chip{display:inline-block;border:3px solid #3a2418;cursor:pointer;color:#3a2418;text-decoration:none;font:20px "Jersey 10",monospace;padding:2px 12px;border-radius:999px;background:#fbefd5;box-shadow:0 4px 0 #3a2418}
#who{font:20px "Jersey 10",monospace;color:#fbefd5;-webkit-text-stroke:4px #3a2418;paint-order:stroke fill}#who b{color:#ffd96a}
#name{font:20px "Jersey 10",monospace;padding:4px 12px;border-radius:999px;border:3px solid #3a2418;background:#fbefd5;color:#3a2418;outline:none;min-width:220px;-webkit-user-select:text;user-select:text}
#stick{display:none;position:fixed;z-index:5;width:120px;height:120px;border-radius:50%;background:#fbefd540;border:3px solid #3a241880;pointer-events:none}
#knob{position:absolute;left:35px;top:35px;width:50px;height:50px;border-radius:50%;background:#fbefd5;border:3px solid #3a2418}
#tbtns{display:none;position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:5;gap:10px;align-items:flex-end}
body.touch #tbtns{display:flex}
#tbtns button{font:22px "Jersey 10",monospace;color:#fbefd5;-webkit-text-stroke:4px #3a2418;paint-order:stroke fill;border:3px solid #3a2418;border-radius:50%;width:76px;height:76px;background:#ef6f8e;box-shadow:0 5px 0 #3a2418}
#tbtns #tjump{width:92px;height:92px;background:#6fb35a}
#loading{position:fixed;inset:0;z-index:7;display:grid;place-content:center;text-align:center;background:#bfe6ee;color:#ff86a6;font:72px "Jersey 10",monospace;-webkit-text-stroke:8px #3a2418;paint-order:stroke fill;transition:opacity .5s}
#loading small{font-size:26px;color:#fbefd5;-webkit-text-stroke:5px #3a2418}
body.ready #loading{opacity:0;pointer-events:none}
body.dropper #soc{top:auto;bottom:calc(140px + env(safe-area-inset-bottom,0px));left:24px}
body.touch.dropper #soc{display:none}