/* Block Dash page: the canvas, Spawn's HUD (its own styles live in ui.js THEME) and the few Block Friends extras. */
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#12061f;color:#fff4fb;font-family:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,sans-serif;-webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent}
#c{position:fixed;inset:0;display:block;width:100%;height:100%}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:2}
#hud{position:fixed;inset:0;z-index:3;pointer-events:none;--spawn-chrome-reservation-right-inset:0px;--spawn-safe-area-top:env(safe-area-inset-top,0px);--spawn-safe-area-bottom:env(safe-area-inset-bottom,0px)}
/* the utility classes Spawn's HUD uses */
.fixed{position:fixed}.absolute{position:absolute}.inset-0{inset:0}.inset-x-0{left:0;right:0}
.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}
.text-center{text-align:center}.text-right{text-align:right}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}
#hud button{pointer-events:auto}
/* "+1 ◆" over a gem */
.dmg{position:fixed;z-index:4;transform:translate(-50%,-50%);font:900 22px Nunito,system-ui,sans-serif;text-shadow:0 2px 0 #1b0f2e;pointer-events:none;animation:dmg .9s ease-out forwards}
@keyframes dmg{from{translate:0 0;opacity:1}to{translate:0 -46px;opacity:0}}
/* Block Friends bar: hub link, sound, the name you save under (on the title card and the pause card only) */
#bar{position:fixed;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:6;display:flex;align-items:center;gap:8px;flex-wrap:wrap;max-width:calc(50vw - 24px)}
body.running #bar{display:none}
.chip{display:inline-block;border:0;cursor:pointer;color:#fff;text-decoration:none;font:900 15px Nunito,system-ui,sans-serif;padding:7px 12px;border-radius:12px;background:linear-gradient(180deg,oklch(0.36 0.1 320 / .85),oklch(0.2 0.08 300 / .9));box-shadow:inset 0 1px 0 #ffffff55,0 4px 12px #1b0f2e70,0 0 0 1px #1b0f2e}
#who{font:800 13px Nunito,system-ui,sans-serif;text-shadow:0 2px 0 #1b0f2e99}#who b{color:#ffe36e}
#name{font:800 14px Nunito,system-ui,sans-serif;padding:7px 10px;border-radius:12px;border:1.5px solid #ffffff40;background:#1b0f2ecc;color:#ffe36e;outline:none;min-width:230px;-webkit-user-select:text;user-select:text}
/* touch: Spawn's two buttons (world.config.yaml touch.style) */
#tbtns{display:none;position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;gap:10px}
body.touch.running #tbtns{display:flex}
#tbtns button{background:oklch(0.25 0.08 320 / 0.7);border:3px solid #ff8fd0;color:#ffe3f4;font:800 14px Nunito,system-ui,sans-serif;border-radius:14px;padding:10px 14px}
#tbtns button:active{background:#ff8fd0;color:#2a0f2e}
/* the first second: a title over the dark until the opening has been built */
#loading{position:fixed;inset:0;z-index:7;display:grid;place-items:center;background:#12061f;font:900 48px Nunito,system-ui,sans-serif;color:#ff8fd0;transition:opacity .4s}
body.ready #loading{opacity:0;pointer-events:none}
body.dash #soc{top:12px;left:12px}
body.running #soc{display:none}
/* centring on any screen: Spawn's top row gets equal side columns so the distance bar sits in the middle, and on
   touch the first-run hint rides above the PRACTICE / PAUSE buttons instead of under them */
#hud .justify-between>div:first-child,#hud .justify-between>div:last-child{flex:0 0 clamp(76px,9vw,110px)}
#hud .justify-between>div:last-child{align-items:flex-end}
#hud .bar{min-width:40px}
#hud #hint{padding:0 16px}
body.touch #hud #hint{bottom:calc(84px + env(safe-area-inset-bottom,0px))!important}
@media (max-width:700px){#hud .pct{font-size:20px}#hud .pct+.bar+.pct{font-size:16px!important}}