@media (max-width: 920px) {
  .app-shell {
    width: min(680px, calc(100% - 28px));
  }

  .start-screen {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 8px 0 24px;
  }

  .start-copy {
    padding-bottom: 0;
    text-align: center;
  }

  .eyebrow {
    margin-top: 28px;
  }

  .start-copy h1,
  .start-lead {
    margin-right: auto;
    margin-left: auto;
  }

  .start-features {
    justify-content: center;
    margin-top: 38px;
  }

}

@media (max-width: 767.98px) {
  .game-sidebar {
    margin-top: 0;
    padding-inline: 0;
    border-right: 1px solid var(--line);
    box-shadow: 18px 0 48px color-mix(in srgb, var(--color-ink) 20%, transparent);
  }

  .game-sidebar .offcanvas-header {
    min-height: 60px;
    padding: 8px 18px;
    border-bottom: 1px solid var(--line);
  }

  .game-sidebar .offcanvas-body {
    padding: 18px;
    overflow-y: auto;
  }

  .game-sidebar__content > h2 {
    font-size: 1.9rem;
  }

  .sidebar-actions {
    margin-top: 18px;
  }
}

@media (max-width: 620px) {
  .home-link {
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .app-shell {
    width: min(100% - 22px, 520px);
    padding: 13px 0 22px;
  }

  .start-copy h1 {
    font-size: clamp(3rem, 15vw, 4.4rem);
  }

  .eyebrow {
    margin-top: 24px;
  }

  .start-lead {
    margin-top: 18px;
  }

  .start-features {
    display: none;
  }

  .setup-card {
    padding: 19px;
    border-radius: 24px;
  }

  .size-option {
    min-height: 62px;
    padding: 10px 13px;
  }

  .picker-label {
    margin-top: 14px;
  }

  .difficulty-option {
    min-height: 56px;
  }

  .game-header .brand > span:last-child {
    display: none;
  }

  .game-layout {
    padding-top: 14px;
  }

  .secondary-button {
    width: 44px;
    min-height: 44px;
    padding: 0;
    font-size: 0;
  }

  .secondary-button span {
    font-size: 1.05rem;
  }

  .turn-strip {
    min-height: 44px;
    margin-bottom: 10px;
  }

  .turn-mark {
    width: 38px;
    height: 38px;
  }

  .board-wrap {
    padding: 8px;
    border-radius: 19px;
  }

  .game-screen[data-size="3"] .board-area { max-width: 310px; }
  .game-screen[data-size="5"] .board-area { max-width: 340px; }
  .game-screen[data-size="7"] .board-area,
  .game-screen[data-size="9"] .board-area { max-width: 100%; }

  .game-board {
    --board-gap: 7px;
    padding: 3px;
  }

  .game-board[data-size="5"] {
    --board-gap: 5px;
  }

  .game-board[data-size="7"],
  .game-board[data-size="9"] {
    --board-gap: 3px;
  }

  .board-caption {
    display: none;
  }

  .result-dialog {
    padding: 30px 23px;
  }
}

@media (max-width: 390px) {
  .size-option {
    min-height: 60px;
    padding: 9px 12px;
  }

  .size-option strong {
    font-size: 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}