.hutaro-sudoku-app {
  --sudoku-ink: #1e2428;
  --sudoku-muted: #63707a;
  --sudoku-line: #aeb8bf;
  --sudoku-line-strong: #2d3a40;
  --sudoku-panel: #f7f8f5;
  --sudoku-accent: #226f76;
  --sudoku-accent-dark: #15545a;
  --sudoku-warn: #b91c1c;
  margin: 1rem 0 1.5rem;
  color: var(--sudoku-ink);
  touch-action: manipulation;
}

.hutaro-sudoku-app button,
.hutaro-sudoku-app input {
  touch-action: manipulation;
}

.hutaro-sudoku-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 330px);
  gap: 0.75rem;
  align-items: stretch;
  max-width: 100%;
  margin: 0 auto;
}

.hutaro-sudoku-play,
.hutaro-sudoku-side,
.hutaro-sudoku-input-cluster,
.hutaro-sudoku-text-memo,
.hutaro-sudoku-pad,
.hutaro-sudoku-utility,
.hutaro-sudoku-snapshots {
  display: grid;
  gap: 0.6rem;
}

.hutaro-sudoku-side {
  align-self: stretch;
  align-content: start;
  grid-auto-rows: max-content;
  background: var(--sudoku-panel);
  border: 1px solid #d7ddd8;
  border-radius: 8px;
  padding: 0.75rem;
}

.hutaro-sudoku-topbar {
  display: grid;
  gap: 0.28rem;
}

.hutaro-sudoku-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  justify-content: space-between;
}

.hutaro-sudoku-meta strong,
.hutaro-sudoku-meta span {
  font-variant-numeric: tabular-nums;
}

.hutaro-sudoku-meta .is-hidden {
  display: none;
}

.hutaro-sudoku-status {
  min-height: 2.4em;
  margin: 0;
  color: var(--sudoku-muted);
  line-height: 1.5;
  overflow: hidden;
}

.hutaro-sudoku-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  width: 100%;
  max-width: 620px;
  aspect-ratio: 1;
  border: 2px solid var(--sudoku-line-strong);
  background: var(--sudoku-line-strong);
}

.hutaro-sudoku-board.is-paused::after {
  content: "一時停止中";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(247, 248, 245, 0.94);
  color: #263238;
  font-size: 1.2rem;
  font-weight: 800;
}

.hutaro-sudoku-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  aspect-ratio: 1;
  border: 0;
  border-right: 1px solid var(--sudoku-line);
  border-bottom: 1px solid var(--sudoku-line);
  background: #fff;
  color: var(--sudoku-ink);
  padding: 0;
  cursor: pointer;
}

.hutaro-sudoku-cell:nth-child(3n) {
  border-right: 2px solid var(--sudoku-line-strong);
}

.hutaro-sudoku-cell:nth-child(9n) {
  border-right: 0;
}

.hutaro-sudoku-cell:nth-child(n + 19):nth-child(-n + 27),
.hutaro-sudoku-cell:nth-child(n + 46):nth-child(-n + 54) {
  border-bottom: 2px solid var(--sudoku-line-strong);
}

.hutaro-sudoku-cell:nth-child(n + 73) {
  border-bottom: 0;
}

.hutaro-sudoku-cell.is-peer {
  background: #eef5f2;
}

.hutaro-sudoku-cell.is-same-number {
  background: #dceeea;
}

.hutaro-sudoku-cell.is-highlighted {
  background: #fffbe3;
}

.hutaro-sudoku-cell.is-selected {
  z-index: 1;
  outline: 3px solid var(--sudoku-accent);
  outline-offset: -3px;
}

.hutaro-sudoku-cell.is-given .hutaro-sudoku-value {
  font-weight: 800;
  color: #111820;
}

.hutaro-sudoku-cell.is-mistake .hutaro-sudoku-value {
  color: var(--sudoku-warn);
}

.hutaro-sudoku-value {
  font-size: clamp(1.35rem, 6.2vw, 2.45rem);
  line-height: 1;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: #214f68;
}

.hutaro-sudoku-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  width: 82%;
  height: 82%;
  align-items: center;
  justify-items: center;
  color: #53626b;
  font-size: clamp(0.48rem, 2vw, 0.82rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.hutaro-sudoku-notes .is-note-highlight {
  display: grid;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: #c8e4df;
  color: #163f45;
  font-weight: 800;
}

.hutaro-sudoku-pads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  align-items: start;
}

.hutaro-sudoku-pad,
.hutaro-sudoku-utility,
.hutaro-sudoku-assist,
.hutaro-sudoku-snapshots {
  min-width: 0;
}

.hutaro-sudoku-pad {
  padding: 0.42rem;
  border: 1px solid #c7d1d5;
  border-radius: 8px;
  background: #ffffff;
}

.hutaro-sudoku-pad.is-note-pad {
  border-color: #d3dcda;
  background: #f5f8f6;
}

.hutaro-sudoku-pad h3,
.hutaro-sudoku-utility h3,
.hutaro-sudoku-assist h3,
.hutaro-sudoku-snapshots h3 {
  margin: 0;
  color: #2a343a;
  font-size: 1rem;
}

.hutaro-sudoku-assist-row {
  display: grid;
  grid-template-columns: minmax(0, 5.4rem) minmax(0, 1fr);
  gap: 0.5rem;
  align-items: end;
}

.hutaro-sudoku-limit-label {
  display: grid;
  gap: 0.25rem;
  color: #53626b;
  font-size: 0.86rem;
}

.hutaro-sudoku-limit-label input {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9c3c7;
  border-radius: 8px;
  background: #fff;
  color: var(--sudoku-ink);
  font: inherit;
  padding: 0.52rem 0.62rem;
}

.hutaro-sudoku-snapshot-code {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9c3c7;
  border-radius: 8px;
  background: #fff;
  color: var(--sudoku-ink);
  font: inherit;
  padding: 0.52rem 0.62rem;
}

.hutaro-sudoku-snapshot-code {
  color: #53626b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
}

.hutaro-sudoku-restore-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.hutaro-sudoku-restore-options .hutaro-sudoku-toggle {
  font-size: 0.88rem;
}

.hutaro-sudoku-snapshot-url-label {
  display: grid;
  gap: 0.32rem;
  color: #53626b;
  font-size: 0.86rem;
}

.hutaro-sudoku-snapshot-url-label input {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9c3c7;
  border-radius: 8px;
  background: #fff;
  color: var(--sudoku-ink);
  font: inherit;
  padding: 0.52rem 0.62rem;
}

.hutaro-sudoku-snapshot-status {
  min-height: 1.4em;
  margin: -0.2rem 0 0;
  color: var(--sudoku-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.hutaro-sudoku-text-memo {
  display: none;
}

.hutaro-sudoku-text-memo.is-open {
  display: grid;
}

.hutaro-sudoku-text-memo textarea {
  width: 100%;
  min-width: 0;
  resize: vertical;
  border: 1px solid #b9c3c7;
  border-radius: 8px;
  background: #fff;
  color: var(--sudoku-ink);
  font: inherit;
  line-height: 1.45;
  padding: 0.55rem 0.62rem;
}

.hutaro-sudoku-text-memo textarea:disabled {
  background: #eef1f2;
  color: #8a969b;
}

.hutaro-sudoku-pad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.38rem;
}

.hutaro-sudoku-key,
.hutaro-sudoku-button {
  min-width: 0;
  border: 1px solid #b9c3c7;
  border-radius: 8px;
  background: #fff;
  color: var(--sudoku-ink);
  font: inherit;
  cursor: pointer;
}

.hutaro-sudoku-key {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  padding: 0;
  font-size: 1.18rem;
  font-weight: 720;
  border-color: #aebbc1;
  box-shadow: 0 1px 0 rgba(20, 35, 40, 0.06);
}

.hutaro-sudoku-pad.is-note-pad .hutaro-sudoku-key {
  background: #fbfcfb;
  color: #68767d;
  font-size: 0.92rem;
  font-weight: 600;
  border-color: #c4ced2;
  box-shadow: none;
}

.hutaro-sudoku-key:hover {
  border-color: var(--sudoku-accent);
  background: #f6fbfa;
}

.hutaro-sudoku-pad.is-note-pad .hutaro-sudoku-key:hover {
  background: #eef5f2;
}

.hutaro-sudoku-key.is-complete,
.hutaro-sudoku-pad.is-note-pad .hutaro-sudoku-key.is-complete,
.hutaro-sudoku-key:disabled {
  border-color: #d4dcdf;
  background: #eef1f2;
  color: #9aa5aa;
  box-shadow: none;
  cursor: not-allowed;
}

.hutaro-sudoku-button {
  min-height: 2.35rem;
  padding: 0.42rem 0.64rem;
  font-weight: 700;
}

.hutaro-sudoku-button.is-primary {
  border-color: var(--sudoku-accent-dark);
  background: var(--sudoku-accent);
  color: #fff;
}

.hutaro-sudoku-edit-actions {
  margin-top: -0.2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.hutaro-sudoku-utility {
  margin-top: 0.8rem;
  padding-top: 0.75rem;
  border-top: 1px solid #d9dfdc;
}

.hutaro-sudoku-utility-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.hutaro-sudoku-utility-buttons .hutaro-sudoku-button {
  min-height: 2.25rem;
  padding: 0.36rem 0.5rem;
  font-size: 0.94rem;
}

.hutaro-sudoku-settings-panel,
.hutaro-sudoku-more-panel {
  display: none;
  gap: 0.58rem;
}

.hutaro-sudoku-settings-panel.is-open,
.hutaro-sudoku-more-panel.is-open {
  display: grid;
}

.hutaro-sudoku-key:active,
.hutaro-sudoku-button:active {
  transform: translateY(1px);
}

.hutaro-sudoku-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.hutaro-sudoku-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  align-items: center;
}

.hutaro-sudoku-toggle {
  display: flex;
  gap: 0.48rem;
  align-items: center;
  color: #344148;
}

.hutaro-sudoku-toggle input {
  width: 1rem;
  height: 1rem;
  margin: 0;
}

@media (max-width: 920px) {
  .hutaro-sudoku-shell {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    align-items: start;
  }

  .hutaro-sudoku-board {
    margin: 0 auto;
  }

  .hutaro-sudoku-side {
    background: transparent;
    border: 0;
    padding: 0;
  }
}

@media (max-width: 560px) {
  .hutaro-sudoku-app {
    margin-top: 0.45rem;
  }

  .hutaro-sudoku-shell {
    gap: 0.38rem;
  }

  .hutaro-sudoku-play,
  .hutaro-sudoku-side,
  .hutaro-sudoku-input-cluster,
  .hutaro-sudoku-text-memo,
  .hutaro-sudoku-pad,
  .hutaro-sudoku-utility,
  .hutaro-sudoku-snapshots {
    gap: 0.42rem;
  }

  .hutaro-sudoku-topbar {
    gap: 0.18rem;
  }

  .hutaro-sudoku-meta {
    gap: 0.35rem;
    font-size: 0.92rem;
  }

  .hutaro-sudoku-status {
    min-height: 1.6em;
    font-size: 0.86rem;
    line-height: 1.35;
  }

  .hutaro-sudoku-input-cluster {
    grid-template-columns: minmax(0, 1fr) 2.25rem;
    justify-content: center;
    align-items: start;
    gap: 0.32rem;
  }

  .hutaro-sudoku-pads {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    justify-self: stretch;
    gap: 0.45rem;
  }

  .hutaro-sudoku-pad {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .hutaro-sudoku-pad.is-note-pad {
    border: 0;
    background: transparent;
  }

  .hutaro-sudoku-edit-actions {
    margin-top: 0;
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }

  .hutaro-sudoku-pad-grid {
    gap: 0.26rem;
  }

  .hutaro-sudoku-key {
    font-size: 0.8rem;
  }

  .hutaro-sudoku-pad.is-note-pad .hutaro-sudoku-key {
    font-size: 0.64rem;
  }

  .hutaro-sudoku-button {
    min-height: 2.12rem;
    padding: 0.34rem 0.48rem;
    font-size: 0.9rem;
  }

  .hutaro-sudoku-edit-actions .hutaro-sudoku-button {
    width: 2.25rem;
    min-height: 2.25rem;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
  }

  .hutaro-sudoku-edit-actions .hutaro-sudoku-button:first-child {
    font-size: 0.9rem;
  }

  .hutaro-sudoku-actions:not(.hutaro-sudoku-edit-actions) .hutaro-sudoku-button {
    flex: 1 1 calc(50% - 0.5rem);
  }

  .hutaro-sudoku-value {
    font-size: clamp(1.2rem, 7vw, 1.8rem);
  }

  .hutaro-sudoku-notes {
    font-size: clamp(0.42rem, 2.1vw, 0.62rem);
  }
}