/* Invulpuzzel: the grid of the paper (white squares, black filler), the word list by length beside it (below on a phone). */
.sp-board--invulpuzzel { padding: 22px; }
.ip-loading { margin: 0; padding: 40px 0; text-align: center; font-size: 18px; color: #4b5563; }
.ip { display: grid; grid-template-columns: minmax(0, 560px) minmax(240px, 340px); gap: 32px; justify-content: center; align-items: start; }

.ip-gridbox { container-type: inline-size; }
.ip-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); width: 100%; max-width: calc(var(--cols) * 56px); margin: 0 auto; background: #1f2937; border: 2px solid #1f2937; gap: 1px; }
.ip-cell { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: #fff; font: 700 22px/1 Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: min(30px, calc(100cqi / var(--cols) * .56)); color: #1f2937; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ip-cell--block { background: #1f2937; cursor: default; }
.ip-cell.is-given { background: #eef4f0; color: #2f5d45; }
.ip-cell.is-slot { background: #fdf0b8; }
.ip-cell.is-start { box-shadow: inset 0 0 0 3px #d4a106; }
.ip-cell.is-wrong { color: #b42318; background: #fde8e6; }
.ip-cell.is-slot.is-wrong { background: #fbd5d0; }
.ip.is-over .ip-cell { cursor: default; }

.ip-now { min-height: 2.6em; margin: 12px 0 0; font-size: 17px; line-height: 1.35; color: #374151; }
.ip-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ip.is-over .ip-tools { display: none; }

.ip-lists { min-width: 0; }
.ip-lists__title { margin: 0 0 10px; font: 700 24px/1.2 Georgia, 'Times New Roman', serif; color: #1a1a1a; }
.ip-group { margin: 0 0 12px; padding: 8px 10px 10px; border-radius: 12px; background: #fbf9f4; box-shadow: inset 0 0 0 1.5px #ece7da; }
.ip-group.is-fitting { background: #fdf6d8; box-shadow: inset 0 0 0 2px #d4a106; }
.ip-group__title { margin: 0 0 6px; font: 700 14px/1.2 Inter, system-ui, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #2f5d45; }
.ip-words { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ip-word { min-height: 44px; padding: 0 12px; border: 1.5px solid #cfe0d6; border-radius: 8px; background: #fff; font: 700 17px/1 Inter, system-ui, sans-serif; letter-spacing: .04em; color: #1f2937; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ip-word:hover { border-color: #2f5d45; }
.ip-word:focus-visible { outline: 3px solid #f2b705; outline-offset: 2px; }
.ip-word.is-picked { background: #2f5d45; border-color: #2f5d45; color: #fff; }
.ip-word.is-placed { background: #f1efe9; border-color: #e2ddd1; color: #8a8f98; text-decoration: line-through; text-decoration-thickness: 2px; }
.ip-word.is-given { font-style: italic; }
.ip-word.is-placed.is-wrong { color: #b42318; border-color: #f0b4ad; background: #fde8e6; }
.ip-word:disabled { cursor: default; }

@media (max-width: 900px) {
  .ip { grid-template-columns: minmax(0, 1fr) minmax(220px, 280px); gap: 20px; }
}
@media (max-width: 760px) {
  .sp-board--invulpuzzel { padding: 10px; }
  .ip { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ip-play { max-width: 560px; width: 100%; margin: 0 auto; }
  .ip-lists__title { font-size: 21px; }
  .ip-tools .sp-button { flex: 1 1 0; padding: 0 12px; }
}
@media (max-width: 400px) {
  .sp-board--invulpuzzel { padding: 6px; }
  .ip-grid { border-width: 1.5px; }
  .ip-group { padding: 8px 6px 8px; }
  .ip-word { padding: 0 9px; font-size: 16px; }
}

/* Larger text: a wider grid, larger words in the list. */
.sp--large .ip { grid-template-columns: minmax(0, 620px) minmax(260px, 380px); }
.sp--large .ip-grid { max-width: calc(var(--cols) * 64px); }
.sp--large .ip-cell { font-size: min(34px, calc(100cqi / var(--cols) * .62)); }
.sp--large .ip-now { font-size: 19.5px; }
.sp--large .ip-word { min-height: 50px; font-size: 20px; }
.sp--large .ip-group__title { font-size: 16px; }
@media (max-width: 760px) {
  .sp--large .ip { grid-template-columns: minmax(0, 1fr); }
  .sp--large .ip-word { font-size: 19px; }
}

/* More contrast. */
.sp--contrast .ip-grid, .sp--contrast .ip-cell--block { background: #000; border-color: #000; }
.sp--contrast .ip-cell { color: #000; }
.sp--contrast .ip-cell.is-slot { background: #fde68a; }
.sp--contrast .ip-cell.is-start { box-shadow: inset 0 0 0 3px #92400e; }
.sp--contrast .ip-cell.is-wrong { color: #b00020; }
.sp--contrast .ip-word { border-color: #1f2937; color: #000; }
.sp--contrast .ip-word.is-placed { color: #4b5563; border-color: #9ca3af; }
.sp--contrast .ip-group { background: #fff; box-shadow: inset 0 0 0 1.5px #1f2937; }
.sp--contrast .ip-now { color: #000; }