html,body,#app{overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;height:100%;margin:0}body{background:var(--bb-ui-black);position:fixed;inset:0;overflow:hidden}#app{position:relative}canvas{z-index:1;touch-action:none;width:100%;height:100%;display:block;position:relative}#mobile-controls{left:max(24px, env(safe-area-inset-left));bottom:max(24px, env(safe-area-inset-bottom));z-index:2;pointer-events:none;width:128px;height:128px;display:none;position:fixed}#mobile-joystick{background:color-mix(in srgb, var(--bb-ui-black) 32%, transparent);border:3px solid color-mix(in srgb, var(--bb-tile-white) 28%, transparent);box-sizing:border-box;border-radius:999px;position:absolute;inset:0}#mobile-joystick-knob{background:color-mix(in srgb, var(--bb-accent-teal) 72%, transparent);border:3px solid color-mix(in srgb, var(--bb-tile-white) 72%, transparent);box-sizing:border-box;border-radius:999px;width:52px;height:52px;position:absolute;top:38px;left:38px}#mobile-pickup,#mobile-action{appearance:none;bottom:max(28px, env(safe-area-inset-bottom));border:3px solid color-mix(in srgb, var(--bb-tile-white) 72%, transparent);width:72px;height:72px;color:var(--bb-tile-white);background:color-mix(in srgb, var(--bb-button-blue) 76%, transparent);pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;border-radius:999px;font:700 28px monospace;position:fixed}#mobile-pickup{right:max(112px, calc(env(safe-area-inset-right) + 112px))}#mobile-action{right:max(28px, env(safe-area-inset-right));background:color-mix(in srgb, var(--bb-brand-orange) 78%, transparent)}#app.is-title #mobile-controls,#app.is-title #game-status,#app.is-title #order-panel,#app.is-title #tutorial-panel{display:none}@media (pointer:coarse),(width<=900px){#mobile-controls{display:block}#tutorial-panel{bottom:max(112px, calc(env(safe-area-inset-bottom) + 112px));width:min(360px,100% - 32px)}#tutorial-title{font-size:18px}#tutorial-body{font-size:12px}}#gamepad-diagnostic{z-index:20;border:2px solid var(--bb-accent-teal);max-width:min(520px,100% - 32px);color:var(--bb-tile-white);white-space:pre-wrap;pointer-events:none;background:#000000e0;padding:12px 16px;font:700 12px/1.45 monospace;position:absolute;top:16px;left:50%;transform:translate(-50%)}#gamepad-diagnostic[hidden],#rotate-prompt{display:none}@media (pointer:coarse) and (orientation:portrait){#rotate-prompt{z-index:30;text-align:center;background:var(--bb-ui-black);color:var(--bb-tile-white);flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-family:monospace;display:flex;position:fixed;inset:0}#mobile-controls,#game-status,#order-panel,#tutorial-panel,canvas{visibility:hidden}#rotate-icon{border:4px solid var(--bb-brand-orange);box-sizing:border-box;border-radius:8px;width:46px;height:78px;animation:1.8s ease-in-out infinite rotate-hint}#rotate-title{color:var(--bb-brand-orange);font-size:20px;font-weight:700}#rotate-body{opacity:.75;font-size:13px}}@keyframes rotate-hint{0%,45%{transform:rotate(90deg)}55%,to{transform:rotate(0)}}:root{--hud-pad:clamp(8px, 1.4vw, 16px);--hud-radius:14px;--hud-surface:color-mix(in srgb, var(--bb-ui-black) 78%, transparent);--hud-stroke:color-mix(in srgb, var(--bb-tile-white) 16%, transparent);--hud-shadow:0 6px 20px #00000073}.hud-bar{left:max(var(--hud-pad), env(safe-area-inset-left));top:max(var(--hud-pad), env(safe-area-inset-top));z-index:3;pointer-events:none;align-items:stretch;gap:8px;font-family:monospace;display:flex;position:fixed}.hud-timer{border-radius:var(--hud-radius);border:1px solid var(--hud-stroke);background:var(--hud-surface);min-width:clamp(84px,11vw,118px);box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-direction:column;justify-content:center;gap:3px;padding:7px 12px;display:flex}.hud-clock{color:var(--bb-tile-white);letter-spacing:.02em;font-variant-numeric:tabular-nums;font-size:clamp(20px,2.9vw,30px);font-weight:700;line-height:1}.hud-timer-track{background:color-mix(in srgb, var(--bb-tile-white) 14%, transparent);border-radius:999px;height:4px;overflow:hidden}.hud-timer-fill{background:linear-gradient(90deg, var(--bb-progress-green), var(--bb-sky-golden));border-radius:999px;height:100%;transition:width .25s linear;display:block}.hud-bar.is-urgent .hud-timer{border-color:color-mix(in srgb, var(--bb-ui-red,#e24b4a) 70%, transparent);animation:.55s ease-in-out infinite hud-panic}.hud-bar.is-urgent .hud-timer-fill{background:var(--bb-brand-orange)}.hud-timer.is-over .hud-clock{opacity:.45}@keyframes hud-panic{0%,to{transform:scale(1)}50%{transform:scale(1.035)}}.hud-stats{gap:6px;display:flex}.hud-chip{border-radius:var(--hud-radius);border:1px solid var(--hud-stroke);background:var(--hud-surface);min-width:clamp(52px,6.5vw,74px);box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-direction:column;justify-content:center;gap:2px;padding:7px 10px;display:flex}.hud-label{color:color-mix(in srgb, var(--bb-tile-white) 55%, transparent);letter-spacing:.12em;font-size:clamp(7px,.85vw,9px);font-weight:700;line-height:1}.hud-value{color:var(--bb-tile-white);font-variant-numeric:tabular-nums;font-size:clamp(13px,1.7vw,18px);font-weight:700;line-height:1}.hud-chip.is-score .hud-value{color:var(--bb-sky-golden)}.hud-chip.is-hot{border-color:color-mix(in srgb, var(--bb-brand-orange) 65%, transparent);background:color-mix(in srgb, var(--bb-brand-orange) 22%, var(--hud-surface))}.hud-chip.is-hot .hud-value{color:var(--bb-brand-orange)}.hud-holding{border-radius:var(--hud-radius);border:1px dashed color-mix(in srgb, var(--bb-tile-white) 22%, transparent);background:color-mix(in srgb, var(--bb-ui-black) 55%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-direction:column;justify-content:center;gap:2px;padding:7px 12px;display:flex}.hud-holding.is-full{border-style:solid;border-color:color-mix(in srgb, var(--bb-accent-teal) 60%, transparent);background:color-mix(in srgb, var(--bb-accent-teal) 16%, var(--hud-surface))}.hud-holding-value{color:var(--bb-tile-white);white-space:nowrap;font-size:clamp(10px,1.2vw,13px);font-weight:700;line-height:1}.hud-holding.is-full .hud-holding-value{color:var(--bb-accent-teal)}#order-panel{right:max(var(--hud-pad), env(safe-area-inset-right));top:max(var(--hud-pad), env(safe-area-inset-top));z-index:3;border-radius:var(--hud-radius);border:1px solid var(--hud-stroke);border-top:3px solid var(--bb-brand-orange);background:var(--hud-surface);width:clamp(150px,20vw,230px);box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--bb-tile-white);box-sizing:border-box;pointer-events:none;padding:10px 12px;font-family:monospace;transition:opacity .2s;position:fixed}#order-title{color:color-mix(in srgb, var(--bb-tile-white) 55%, transparent);letter-spacing:.12em;font-size:clamp(7px,.85vw,9px);font-weight:700}#order-recipe{color:var(--bb-sky-golden);margin-top:3px;font-size:clamp(13px,1.7vw,19px);font-weight:700;line-height:1.1}#order-hint{color:color-mix(in srgb, var(--bb-accent-teal) 90%, white);margin-top:3px;font-size:clamp(8px,1vw,11px);line-height:1.3}#order-bar{background:color-mix(in srgb, var(--bb-tile-white) 14%, transparent);border-radius:999px;height:5px;margin-top:8px;overflow:hidden}#order-bar-fill{background:linear-gradient(90deg, var(--bb-progress-green), var(--bb-sky-golden));border-radius:999px;width:100%;height:100%;transition:width .2s linear}#tutorial-panel{left:50%;bottom:max(var(--hud-pad), env(safe-area-inset-bottom));z-index:3;border-radius:var(--hud-radius);border:1px solid var(--hud-stroke);border-left:3px solid var(--bb-sky-golden);background:var(--hud-surface);width:clamp(240px,42vw,460px);box-shadow:var(--hud-shadow);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-sizing:border-box;pointer-events:none;padding:9px 14px;font-family:monospace;position:fixed;transform:translate(-50%)}#tutorial-step{color:var(--bb-accent-teal);letter-spacing:.12em;font-size:clamp(7px,.85vw,9px);font-weight:700}#tutorial-title{color:var(--bb-sky-golden);margin-top:2px;font-size:clamp(13px,1.6vw,19px);font-weight:700;line-height:1.1}#tutorial-body{color:color-mix(in srgb, var(--bb-tile-white) 82%, transparent);margin-top:3px;font-size:clamp(9px,1.05vw,12px);font-weight:700;line-height:1.35}@media (height<=500px){#tutorial-panel{bottom:max(6px, env(safe-area-inset-bottom));width:clamp(200px,40vw,300px);padding:6px 10px}#mobile-controls{left:max(12px, env(safe-area-inset-left));bottom:max(12px, env(safe-area-inset-bottom));width:96px;height:96px}#mobile-joystick-knob{width:40px;height:40px;top:28px;left:28px}#mobile-pickup,#mobile-action{bottom:max(14px, env(safe-area-inset-bottom));width:60px;height:60px;font-size:23px}#mobile-pickup{right:max(88px, calc(env(safe-area-inset-right) + 88px))}#mobile-action{right:max(14px, env(safe-area-inset-right))}}#mobile-joystick{background:color-mix(in srgb, var(--bb-ui-black) 46%, transparent);border:2px solid color-mix(in srgb, var(--bb-tile-white) 22%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#mobile-joystick-knob{background:color-mix(in srgb, var(--bb-accent-teal) 82%, transparent);border:2px solid color-mix(in srgb, var(--bb-tile-white) 78%, transparent);box-shadow:0 3px 10px #0006}#mobile-pickup,#mobile-action{border:2px solid color-mix(in srgb, var(--bb-tile-white) 62%, transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 80ms,filter 80ms;box-shadow:0 4px 14px #00000073}#mobile-pickup:active,#mobile-action:active{filter:brightness(1.35);transform:scale(.92)}#app.is-title .hud-bar{display:none}