.visual { margin: .75rem 0 1rem; }
.visual-readout { font-weight: 700; margin: .45rem 0 .15rem; letter-spacing: .01em; }
.visual-extra { margin: .15rem 0 .35rem; color: #1d1b16; }
.visual-extra[hidden] { display: none; }
.visual-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
.visual-actions button { min-height: 48px; }
.visual button { touch-action: manipulation; }
.visual button:focus-visible { outline: 3px solid #1d4e89; outline-offset: 2px; z-index: 1; }
.strip { margin: 0 0 .75rem; }
.strip-tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .35rem; }
.strip-tools button { min-height: 48px; font-size: .95rem; }
.strip-bar { position: relative; width: 100%; height: 56px; overflow: hidden; }
.strip-bar.removed { height: 108px; }
.strip-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.strip-svg .off { fill: #f7f1e4; }
.strip-svg .on { fill: #1d4e89; }
.strip-svg .eaten { fill: #f3ead6; stroke: #1d1b16; stroke-width: 2; }
.strip-svg .hole { fill: #e6dece; stroke: #6f675c; stroke-width: 1.5; }
.strip-svg .hatch.light { stroke: #f7f1e4; stroke-width: 2; }
.strip-svg .hatch.dark { stroke: #3f3428; stroke-width: 2.25; }
.strip-svg .sep { stroke: #1d1b16; stroke-width: 1.75; }
.strip-svg .bite { stroke: #1d1b16; stroke-width: 2.5; }
.strip-bar .hit { position: absolute; top: 0; bottom: 0; margin: 0; padding: 0; border: 0; background: transparent; background-image: none; box-shadow: none; border-radius: 0; min-width: 0; min-height: 0; appearance: none; transition: none; }
.strip-bar .hit:hover, .strip-bar .hit:active { background: transparent; background-image: none; box-shadow: none; transform: none; }
.strip-bar .hit:focus-visible { outline-offset: -3px; }
.blocks { display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: flex-end; }
.place { display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; max-width: 100%; }
.place-blocks { display: flex; flex-wrap: wrap; gap: .35rem; align-items: flex-end; }
.place-name { margin: 0; font-size: .85rem; color: #3f3a32; }
.visual .block { padding: 0; border: 0; background: transparent; background-image: none; box-shadow: none; border-radius: .25rem; line-height: 0; overflow: hidden; min-height: 0; transition: none; }
.visual .block:hover, .visual .block:active { background: transparent; background-image: none; box-shadow: none; transform: none; }
.visual .block svg { display: block; width: 100%; height: 100%; }
.visual .hundreds .block { width: 88px; height: 88px; }
.visual .tens .block { width: 44px; height: 132px; }
.visual .ones .block { width: 44px; height: 44px; }
.visual .flat, .visual .rod, .visual .cube { fill: #f4efe4; stroke: #1d1b16; stroke-width: 2; }
.visual .grid { stroke: #1d4e89; stroke-width: 1.25; }
.visual .block:disabled { opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .visual .pop { animation: vis-pop .45s ease; }
}
@keyframes vis-pop {
  from { transform: translateY(12px) scale(.85); opacity: .15; }
  to { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .visual .pop { animation: none; }
}