/* Shikaku (Firkanter) */
.shikaku .cell { position: relative; background: transparent; border-color: #dedad2; cursor: pointer; }
.shikaku .num {
  position: relative; z-index: 2; font-weight: 700; pointer-events: none;
  font-size: calc(min(100vw, 480px) / var(--n) * 0.42);
}
.shikaku .layer { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.shikaku .rect {
  position: absolute; border: 2px solid #0000004d; border-radius: 6px;
  left: calc(var(--c) / var(--n) * 100% + 3px); top: calc(var(--r) / var(--n) * 100% + 3px);
  width: calc(var(--w) / var(--n) * 100% - 6px); height: calc(var(--h) / var(--n) * 100% - 6px);
}
.shikaku .rect.bad { border: 3px solid var(--bad); }
.shikaku .rect.doomed { opacity: 0.35; }
.shikaku .rect.preview { background: #0a66c22e; border: 2px dashed var(--accent); }
.shikaku .size {
  position: absolute; top: 2px; left: 4px; font-weight: 700; color: var(--accent);
  font-size: calc(min(100vw, 480px) / var(--n) * 0.22);
}
.shikaku:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.shikaku:focus-visible .cell.cursor { z-index: 3; box-shadow: inset 0 0 0 3px var(--accent); }