#board .cell.rubble{background:radial-gradient(ellipse at 50% 70%,#ad8a70,#705166);border:2px solid #cfac80!important;overflow:visible;isolation:isolate;cursor:pointer}
#board .rubble .ricon{position:absolute;inset:4% 6% 8%;display:grid;place-items:center;font-size:0;pointer-events:none}
.blocker-art{display:block;width:100%;height:100%;background-image:url('art/board-blockers.webp');background-size:500% 200%;background-position:var(--bx) var(--by);background-repeat:no-repeat;filter:drop-shadow(0 4px 3px #36213a66);transform-origin:50% 75%}
#board .rubble .rcount{z-index:4;right:4px;bottom:4px;min-width:26px;font-size:12px;background:#4f342a;border:2px solid #f6d495;color:#fff1c8}
#board .rubble::after{content:"";position:absolute;inset:17% 19%;pointer-events:none;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M54 3 43 31 60 43 36 61 47 77 29 98M60 43 84 35M36 61 12 54' fill='none' stroke='%23362538' stroke-width='4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;z-index:2}
#board .rubble.worn::after{opacity:.45}#board .rubble.cracked::after{opacity:.8}#board .rubble.cracked .blocker-art{filter:drop-shadow(0 3px 3px #36213a66) saturate(.8)}
#board .rubble.rhit{animation:none}#board .rubble.rhit .blocker-art{animation:blocker-knock .2s ease-out}
.blocker-fx{position:fixed;pointer-events:none;z-index:48;will-change:transform,opacity}.blocker-chip{width:7px;height:7px;border-radius:2px;box-shadow:0 2px 2px #38243344}
@keyframes blocker-knock{0%{transform:scale(.88,1.08) rotate(-5deg);filter:brightness(1.45)}50%{transform:scale(1.07,.94) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@media(max-width:480px){#board .rubble .rcount{font-size:10px;min-width:20px;padding:0 3px;right:1px;bottom:1px}}
@media(prefers-reduced-motion:reduce){#board .rubble .blocker-art{animation:none!important}.blocker-fx{display:none!important}}

#board .rubble{touch-action:none;--clear-progress:0}
.blocker-cue{position:absolute;left:2px;right:2px;bottom:3px;z-index:5;display:flex;gap:3px;justify-content:center;align-items:center;color:#fff1d0;font:700 9px system-ui;line-height:1;background:#4a2f2bd9;border-radius:6px;padding:3px 2px;pointer-events:none}
.blocker-cue svg{width:17px;height:17px;flex:none;animation:gesture-cue 2.5s ease-in-out infinite}
#board .rubble .rcount{top:3px;bottom:auto;font-size:10px;right:3px}
#board .rubble .ricon{inset:3% 6% 22%}
#board .rubble:focus-visible{outline:3px solid #ffe8a1;outline-offset:3px}
#board .rubble.gesture-active{border-color:#fff1b6!important;background:radial-gradient(ellipse,#a69072,#6c505f)}
[data-action="cool"] .blocker-art,[data-action="melt"] .blocker-art{opacity:calc(1 - var(--clear-progress)*.5)}
[data-action="lift"].gesture-active .blocker-art{transform:translateY(calc(var(--hold-progress,0)*-12px))}
.blocker-weak{position:absolute;width:16px;height:16px;border:2px solid #fff6bc;border-radius:50%;background:#ffd36a;box-shadow:0 2px 8px #ff943a;pointer-events:none;transform:translate(-50%,-50%);z-index:3}
[data-action="circle"]::before{content:"";position:absolute;inset:13% 18% 24%;border:2px dashed #ffe3ab99;border-radius:50%;pointer-events:none;z-index:3}
@keyframes gesture-cue{0%,65%,100%{transform:translateX(0)}75%{transform:translateX(-3px)}90%{transform:translateX(3px)}}
@media(max-width:600px){.blocker-cue span{display:none}.blocker-cue{left:25%;right:25%;padding:1px}.blocker-cue svg{width:15px;height:15px}.blocker-weak{width:13px;height:13px}}
@media(prefers-reduced-motion:reduce){.blocker-cue svg{animation:none}[data-action="lift"].gesture-active .blocker-art{transform:none}}