.shikaku-shell {
  --game-accent: var(--g-shikaku);
  /* Yellow is light, so icons on it are dark. */
  --game-on-accent: #1b1b1b;
  --sk-cell: #ffffff;
  --sk-grid: rgb(0 0 0 / 0.09);
  --sk-frame: #cfcfca;
  /* Each rectangle gets one of six colours: a light fill and a solid outline. */
  --sk-0: #3b82d6;
  --sk-1: #ee8a3a;
  --sk-2: #3fa66b;
  --sk-3: #9466d4;
  --sk-4: #e25d8f;
  --sk-5: #2aa3a8;
  --sk-fill: 20%;
}
:root[data-theme='dark'] .shikaku-shell {
  --sk-cell: #1a1a1a;
  --sk-grid: rgb(255 255 255 / 0.08);
  --sk-frame: #3a3a3a;
  --sk-0: #5a9bea;
  --sk-1: #f29a50;
  --sk-2: #4cb87a;
  --sk-3: #a77ce2;
  --sk-4: #ec74a0;
  --sk-5: #3cbcc1;
  --sk-fill: 26%;
}
.shikaku-shell .shell-stage {
  padding: 0 var(--space-4);
}
.shikaku-shell .shell-board-area {
  width: 100%;
}
.shikaku-shell .sk-board-wrap {
  width: min(560px, calc(100vw - 32px), calc(100dvh - 210px));
  margin: 0 auto;
}
.shikaku-shell .sk-board {
  position: relative;
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: var(--columns) / var(--rows);
  border: 2px solid var(--sk-frame);
  border-radius: 10px;
  background: var(--sk-cell);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.shikaku-shell .sk-cell {
  position: relative;
  z-index: 0;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 800 calc(100cqw / var(--columns) * 0.42) / 1 var(--font-app);
  box-shadow: inset 0 0 0 0.5px var(--sk-grid);
  cursor: pointer;
  touch-action: none;
}
.shikaku-shell .sk-board-wrap {
  container-type: inline-size;
}
.shikaku-shell .sk-cell span {
  position: relative;
  z-index: 3;
}
.shikaku-shell .sk-cell:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px var(--text);
}
.shikaku-shell .sk-cell.corner {
  box-shadow: inset 0 0 0 3px var(--text);
}
.shikaku-shell .tone-0 {
  --tone: var(--sk-0);
}
.shikaku-shell .tone-1 {
  --tone: var(--sk-1);
}
.shikaku-shell .tone-2 {
  --tone: var(--sk-2);
}
.shikaku-shell .tone-3 {
  --tone: var(--sk-3);
}
.shikaku-shell .tone-4 {
  --tone: var(--sk-4);
}
.shikaku-shell .tone-5 {
  --tone: var(--sk-5);
}
.shikaku-shell .sk-cell[class*='tone-'] {
  background: color-mix(in srgb, var(--tone) var(--sk-fill), var(--sk-cell));
}
/* Assist: numbers whose rectangle is already drawn fade back. */
.shikaku-shell .sk-cell.done span {
  opacity: 0.35;
}
.shikaku-shell .sk-region,
.shikaku-shell .sk-hint-outline {
  z-index: 2;
  margin: 2px;
  border: 3px solid var(--tone);
  border-radius: 6px;
  pointer-events: none;
}
.shikaku-shell .sk-region.bad {
  border-color: var(--danger);
  border-style: dashed;
}
.shikaku-shell .sk-region.just-set {
  animation: sk-pop 180ms cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes sk-pop {
  from {
    transform: scale(0.94);
    opacity: 0.4;
  }
}
.shikaku-shell .sk-hint-outline {
  border: 3px dashed var(--hint-target);
  background: color-mix(in srgb, var(--hint-target) 12%, transparent);
}
/* Drag preview with the running area: "6 / 6" turns solid when it matches the number. */
.shikaku-shell .sk-drag {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border: 3px dashed var(--text-muted);
  border-radius: 6px;
  pointer-events: none;
}
.shikaku-shell .sk-drag[hidden] {
  display: none;
}
.shikaku-shell .sk-drag[class*='tone-'] {
  border-color: var(--tone);
}
.shikaku-shell .sk-drag.match {
  border-style: solid;
  background: color-mix(in srgb, var(--tone) 18%, transparent);
}
.shikaku-shell .sk-drag.invalid {
  border-color: var(--danger);
}
.shikaku-shell .sk-drag b {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--mark-bg);
  color: var(--mark-ink);
  font: 700 13px/1.4 var(--font-app);
  font-variant-numeric: tabular-nums;
}
.shikaku-shell .sk-board.shake {
  animation: sk-shake 240ms ease-in-out;
}
@keyframes sk-shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
.shikaku-shell .sk-board.solved .sk-cell {
  animation: sk-solved 520ms ease-out both;
  animation-delay: calc(var(--i) * 30ms);
}
@keyframes sk-solved {
  40% {
    filter: brightness(1.18);
    transform: scale(0.92);
  }
}
@media (prefers-reduced-motion: reduce) {
  .shikaku-shell .sk-region.just-set,
  .shikaku-shell .sk-board.shake,
  .shikaku-shell .sk-board.solved .sk-cell {
    animation: none;
  }
}