/* Candy Wall: full-screen canvas with a minimal icon HUD. */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#040405;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
body{font:500 15px/1.2 -apple-system,"SF Pro Display","SF Pro Text","Helvetica Neue",Arial,sans-serif;color:#f2f2f4}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
#hud{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:999px;background:rgba(22,22,26,.72);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 40px rgba(0,0,0,.5)}
#hud button{width:46px;height:46px;border:0;border-radius:50%;background:transparent;color:#d9d9de;display:grid;place-items:center;cursor:pointer;transition:background-color .18s,color .18s,transform .12s}
#hud button[hidden]{display:none}
#hud button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#hud button:active{transform:scale(.92)}
#hud button.sel{background:#f2f2f4;color:#0a0a0c}
@media (hover:hover){#hud button:not(.sel):hover{background:rgba(255,255,255,.1);color:#fff}}
#b-view .i-wall{display:none}
body.table #b-view .i-wall{display:block}
body.table #b-view .i-table{display:none}
#b-mute .off{display:none}
#b-mute.muted .on{display:none}
#b-mute.muted .off{display:block}
#caption{position:fixed;left:50%;top:calc(18px + env(safe-area-inset-top));transform:translate(-50%,-6px);padding:9px 16px;border-radius:999px;background:rgba(22,22,26,.72);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 0 0 1px rgba(255,255,255,.08);letter-spacing:.01em;white-space:nowrap;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
#caption.show{opacity:1;transform:translate(-50%,0)}
#load{position:fixed;left:50%;top:50%;width:140px;height:3px;margin:-1px 0 0 -70px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden;transition:opacity .4s;pointer-events:none}
#load i{display:block;height:100%;width:0;background:#f2f2f4;border-radius:2px}
#load.done{opacity:0}
