body:has(.blok-page){--blok-crimson:#bb5263;--blok-coral:#e89180;--blok-border:#8f344850;background:radial-gradient(ellipse at 12% 60%, #4a101850, transparent 58%), radial-gradient(ellipse at 88% 20%, #8f1a2830, transparent 62%), var(--color-bg)}.arc-main:has(.blok-page){padding-block-start:calc(var(--nav-height) + 12px)}body:has(.blok-page) .arc-footer{display:none}.blok-page{width:min(100%, 600px, calc((100svh - var(--nav-height) - 225px) / 1.2));margin-inline:auto;position:relative}.blok-heading{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.blok-heading h1{letter-spacing:-.07em;font-size:1.8rem}.blok-hud{align-items:baseline;gap:24px;margin-bottom:10px;display:flex}.blok-hud p{align-items:baseline;gap:8px;display:flex}.blok-hud p>span{color:var(--color-text-muted);font-size:.8rem}.blok-hud strong{font-variant-numeric:tabular-nums;font-size:1.6rem;font-weight:500}.blok-chain strong{color:var(--blok-coral)}.blok-best{margin-left:auto}.blok-stage{border:1px solid var(--blok-border);background:linear-gradient(145deg,#200d13,#0d080b 70%);border-radius:7px;padding:6px;position:relative;box-shadow:0 15px 100px #8f1a2815}.blok-stage[data-state=dead]{border-color:var(--blok-crimson)}.blok-stage:focus-within{outline:2px solid var(--color-focus);outline-offset:4px}.blok-board{outline:0}.blok-board canvas{aspect-ratio:1;width:100%;display:block}.blok-overlay{backdrop-filter:blur(3px);border-radius:inherit;background:#10080bd0;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.blok-overlay h2{letter-spacing:-.07em;font-size:clamp(2rem,6vw,3.6rem)}.blok-overlay p{color:var(--color-text-muted);text-align:center;font-size:.85rem}.blok-overlay-action{border:1px solid var(--blok-crimson);min-height:48px;color:var(--color-text);cursor:pointer;background:#4a101850;border-radius:6px;padding:10px 28px}.blok-overlay-action span{color:var(--color-text-muted);margin-top:4px;font-size:.7rem;display:block}.blok-tray{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding-top:12px;display:grid}.blok-slot{border:1px solid #0000;border-bottom-color:var(--blok-border);min-width:44px;height:clamp(88px,15vw,116px);color:var(--color-text-muted);touch-action:none;cursor:grab;user-select:none;background:0 0;border-radius:5px;justify-content:center;align-items:center;display:flex;position:relative}.blok-slot svg{--blok-tray-cell:clamp(14px, 4.2vw, 20px);overflow:visible}.blok-slot[aria-pressed=true]{border-color:var(--blok-coral);background:#bb526314}.blok-slot[aria-pressed=true]:after{content:"selected";color:var(--color-text-muted);font-size:.6rem;position:absolute;bottom:3px;right:5px}.blok-slot:disabled{cursor:default}.blok-slot-number{font-size:.65rem;position:absolute;top:4px;left:6px}.blok-used{color:var(--color-text-faint);font-size:1.5rem}.blok-drag-image{z-index:20;pointer-events:none;opacity:.85;filter:drop-shadow(0 4px 10px #080506);position:fixed;transform:translate(-50%,-50%)}.blok-underboard{justify-content:space-between;align-items:center;gap:12px;margin-top:6px;display:flex}.blok-underboard p{color:var(--color-text-muted);font-size:.8rem}.blok-underboard p span{color:var(--color-text-faint);font-size:.7rem}.blok-settings-trigger{min-width:44px;min-height:44px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0}.blok-feedback{min-height:1.5em;color:var(--color-text-muted);padding-bottom:12px;font-size:.8rem}.blok-sr,.blok-accessible-board{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.blok .blok-settings{border:1px solid var(--blok-border);background:linear-gradient(145deg, #281019, var(--color-bg));border-radius:12px;width:min(92vw,440px);max-height:90svh;margin:auto;padding:24px}.blok-settings-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.blok-settings-header h2{font-size:1.6rem}.blok-settings-header button{width:44px;height:44px;color:var(--color-text-muted);cursor:pointer;background:0 0;border:0;font-size:1.6rem}.blok-settings>p{color:var(--color-text-muted);font-size:.8rem}.blok-settings fieldset{border:0;border-top:1px solid var(--blok-border);min-width:0;margin-top:16px;padding:12px 0}.blok-settings legend{color:var(--blok-coral);padding-right:12px;font-size:.9rem}.blok .blok-settings label{align-items:center;gap:16px;min-height:44px;margin:0;padding:6px 0;font-size:.85rem}.blok .blok-settings label:has(input[type=range]){grid-template-columns:minmax(0,1fr) 44%}.blok .blok-settings input[type=range]{width:100%;min-height:44px;accent-color:var(--blok-coral)}.blok .blok-settings label:has(input[type=checkbox]){justify-content:space-between;display:flex}.blok .blok-settings input[type=checkbox]{width:20px;height:20px;min-block-size:0;accent-color:var(--blok-coral)}.blok-settings-actions{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.blok-atmosphere{pointer-events:none;z-index:-1;position:fixed;inset:0;overflow:clip}.blok-atmosphere .arc-line-field{mask-image:linear-gradient(90deg,#000,#0000 40% 60%,#000)}@media (width<=47.99rem){.blok-page{width:min(100%,600px)}.blok-hud{gap:16px}.blok-hud strong{font-size:1.4rem}}@media (height<=500px) and (orientation:landscape){.arc-main:has(.blok-page){padding-block-start:calc(var(--nav-height) + 4px)}.blok-page{width:min(100%,640px)}.blok-heading{margin-bottom:4px}.blok-heading h1{font-size:1.4rem}.blok{grid-template-columns:minmax(0, calc(100svh - var(--nav-height) - 80px)) minmax(200px, 1fr);gap:0 20px;display:grid}.blok-stage{grid-area:1/1/5;align-self:start}.blok-hud{flex-wrap:wrap;grid-area:1/2;gap:8px 16px}.blok-best{margin-left:0}.blok-tray{grid-area:2/2;padding-top:0}.blok-slot{height:80px}.blok-underboard{grid-area:3/2}.blok-feedback{grid-area:4/2}}.blok-score-value,.blok-chain-value[data-active=true]{animation:.18s ease-out blok-score-pop;display:inline-block}.blok-chain-value{color:var(--color-text-muted);transition:color .18s ease-out}.blok-chain-value[data-active=true]{color:var(--blok-coral)}@keyframes blok-score-pop{35%{color:var(--blok-coral);transform:scale(1.07)}}.blok-stage[data-new-best] .blok-overlay h2{color:var(--blok-coral);text-shadow:0 0 24px color-mix(in srgb, var(--blok-coral) 28%, transparent)}.blok-stage[data-state=dead] .blok-overlay{backdrop-filter:none;animation:.62s ease-out both blok-result-arrive}@keyframes blok-result-arrive{0%{background:0 0}40%{background:#10080b30}to{background:#10080b90}}.blok-stage[data-state=dead] .blok-overlay>:not(button){animation:.5s ease-out both blok-result-text}@keyframes blok-result-text{0%,35%{opacity:.15}to{opacity:1}}@media (prefers-reduced-motion:reduce){.blok-score-value,.blok-chain-value,.blok-stage[data-state=dead] .blok-overlay,.blok-stage[data-state=dead] .blok-overlay>:not(button){transition:none;animation:none}}.blok-stage[data-new-best] .blok-overlay>p:first-of-type{color:var(--color-text);font-variant-numeric:tabular-nums;font-size:clamp(1.4rem,4vw,2rem)}.blok:has([data-new-best]) .blok-best strong{animation:.24s ease-out blok-score-pop}@media (prefers-reduced-motion:reduce){.blok:has([data-new-best]) .blok-best strong{animation:none}}
