.shikaku-board{display:grid;width:min(100%,36rem);aspect-ratio:1 / 1;margin:auto;box-sizing:border-box;overflow:hidden;border:1px solid #c6cfda;background:#fcfdff;touch-action:none}.shikaku-cell{box-sizing:border-box;min-width:0;min-height:0;padding:0;border:0;box-shadow:inset -1px -1px #edf0f4;color:#202938;background:#fcfdff;font-size:clamp(1rem,4vw,1.8rem);font-weight:800;line-height:1;cursor:crosshair}.shikaku-cell:focus-visible{position:relative;z-index:3;outline:2px solid var(--color-primary);outline-offset:-2px}.shikaku-cell.is-region{--region-top:0 0 transparent;--region-bottom:0 0 transparent;--region-left:0 0 transparent;--region-right:0 0 transparent;background:var(--region-fill);box-shadow:inset var(--region-top),inset var(--region-bottom),inset var(--region-left),inset var(--region-right),inset -1px -1px color-mix(in srgb,var(--region-fill) 72%,#d2d8e1);cursor:pointer}.shikaku-cell.has-top-border{--region-top:0 1px var(--region-border)}.shikaku-cell.has-bottom-border{--region-bottom:0 -1px var(--region-border)}.shikaku-cell.has-left-border{--region-left:1px 0 var(--region-border)}.shikaku-cell.has-right-border{--region-right:-1px 0 var(--region-border)}.shikaku-cell.is-preview{background:#dee7ffb3;box-shadow:inset 0 0 0 1px #aab9df;cursor:crosshair}.shikaku-cell.is-region.is-preview{background-image:linear-gradient(#dee7ff66,#dee7ff66)}.shikaku-cell.is-temporarily-removed{background:#fcfdff;box-shadow:inset -1px -1px #edf0f4}.shikaku-cell.is-temporarily-removed.is-preview{background:#dee7ffb3;box-shadow:inset 0 0 0 1px #aab9df}.shikaku-cell.is-selected-region{position:relative;z-index:2;box-shadow:inset 0 0 0 1px #718096}.shikaku-cell.is-cursor{outline:1px dashed var(--color-primary);outline-offset:-3px}.shikaku-cell[data-region-color="0"]{--region-fill:#fde8ea;--region-border:#b74c61}.shikaku-cell[data-region-color="1"]{--region-fill:#fff1d8;--region-border:#ad7320}.shikaku-cell[data-region-color="2"]{--region-fill:#eff4d8;--region-border:#6f852c}.shikaku-cell[data-region-color="3"]{--region-fill:#dcf3e8;--region-border:#317b63}.shikaku-cell[data-region-color="4"]{--region-fill:#dff1fa;--region-border:#337d9e}.shikaku-cell[data-region-color="5"]{--region-fill:#ece6fa;--region-border:#7152a2}.shikaku-cell[data-region-color="6"]{--region-fill:#fde9dc;--region-border:#ac6948}.shikaku-cell[data-region-color="7"]{--region-fill:#dcf4f2;--region-border:#307c78}.shikaku-cell[data-region-color="8"]{--region-fill:#f4e5f3;--region-border:#975b93}.shikaku-cell[data-region-color="9"]{--region-fill:#f3eddf;--region-border:#88704a}.shikaku-cell[data-region-color="10"]{--region-fill:#fbe4dd;--region-border:#a65a49}.shikaku-cell[data-region-color="11"]{--region-fill:#e5ebf2;--region-border:#566d86}.shikaku-board.is-paused{position:relative;background:var(--color-surface-muted)}.shikaku-board.is-paused:after{content:"Pausado";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#ffffffd1;color:var(--color-ink);font-weight:700;pointer-events:none}.shikaku-controls{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-4) 0}@media(max-width:24rem){.shikaku-controls .button{flex:1 1 8rem}.shikaku-cell{font-size:1rem}}