/* Large touch targets remain inside a scrollable mirror, never the whole page. */
.mirror-workspace{width:100%;min-width:0;--mirror-size:clamp(44px,6vw,64px)}
.mirror-viewport{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:35px 2px 12px;scrollbar-color:#a8bbc6 #e7eeee;scrollbar-width:thin}
.mirror-board{width:max-content;margin-inline:auto;gap:12px;padding-inline:2px}
.mirror-half{grid-template-columns:repeat(var(--mirror-cols),var(--mirror-size));gap:5px}
.mirror-cell{width:var(--mirror-size);height:var(--mirror-size);padding:5px;border-radius:11px}
.mirror-overview,.mirror-navigation{display:none}
.mirror-mini-half.mirrored .art{transform:scaleX(-1)}
.mirror-cell.filled .art{transform:scaleX(-1)}
.focus-board{gap:14px}
.focus-rule{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.focus-target{display:flex;position:relative;align-items:center;gap:5px;padding:5px 10px;border:2px solid #d4dfd5;border-radius:18px;background:#eff4ec}
.focus-target>.art{width:48px;height:48px}.focus-target>.ui-icon{width:20px;height:20px;color:#849d83}
.focus-target.active{border-color:#b8a256;background:#fff3c5;box-shadow:0 0 0 3px #e6cf8533}
.focus-target.waiting{background:#edf0ee;border-style:dashed}
.focus-target>b{font-size:14px;color:#7e8c78}
.focus-rule-arrow .ui-icon{width:21px;height:21px;color:#99ad96}
.focus-rule-label{font-size:12px;color:#7f927b;text-align:center;width:100%}
.focus-progress{display:flex;align-items:center;justify-content:center;gap:12px;color:#78917e;font-size:12px}
.focus-progress #firefly-counter{display:flex;gap:4px}.focus-progress i{width:23px;height:25px;display:block}.focus-progress i.lit{transform:translateY(-2px)}
.focus-pond{height:300px;min-height:260px;border-radius:34% 33% 28% 29%}
.pond-bugs{position:absolute;inset:32px 30px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));align-items:center;justify-items:center;gap:8px;z-index:2}
.pond-bugs .bug{position:relative;top:auto;left:auto;transform:none;width:clamp(52px,8vw,82px);height:clamp(60px,9vw,88px);min-width:44px;min-height:44px;padding:4px}
.pond-bugs .bug:active:not(:disabled){transform:scale(.94)}.pond-bugs .bug.caught{transform:translateY(-10px) scale(.7)}
.pond-listen{grid-column:1/-1;grid-row:1/-1;display:flex;align-items:center;flex-direction:column;gap:12px;color:#567e74;font-size:12px}.pond-listen>.art{width:75px;height:75px}
@media(max-width:600px){
 .symmetry-board{gap:14px;padding-left:12px;padding-right:12px}
 .mirror-wide .mirror-overview{display:flex;justify-content:center;gap:8px;padding:8px 0;border-radius:14px;background:#edf2ef}
 .mirror-mini-half{display:grid;grid-template-columns:repeat(var(--mirror-cols),minmax(0,1fr));width:min(43%,130px);gap:3px}
 .mirror-mini-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#fffdf5;border-radius:4px;border:1px solid #d8e3de;font-size:12px;color:#c0cbbf;padding:1px}
 .mirror-mini-cell.filled{background:#e5eedc}.mirror-mini-axis{border-left:2px dashed #9bb8c8}
 .mirror-wide .mirror-navigation{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;color:#9eacaa}
 .mirror-navigation button{min-height:44px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 9px;border:1px solid #d6e0d9;background:#f1f5ea;border-radius:15px;color:#678677;font-size:10px}
 .mirror-navigation .ui-icon{width:18px;height:18px}
 .mirror-viewport{padding-top:32px}.mirror-cell{padding:5px}
 .focus-rule{gap:7px}.focus-target{padding:4px 7px}.focus-target>.art{width:41px;height:41px}
 .focus-pond{height:262px!important;min-height:262px;border-width:5px}
 .pond-bugs{inset:30px 12px;gap:5px}.focus-progress{gap:8px}
}
@media(prefers-reduced-motion:reduce){.pond-bugs .bug,.pond-bugs .bug:after{animation:none}}