@media (min-width: 1800px) {
  .page-frame {
    width: min(1880px, calc(100vw - 56px));
  }

  .board {
    --tile-width: 56px;
    --tile-height: 88px;
  }
}

@media (max-width: 1180px) {
  .page-frame {
    width: calc(100vw - 24px);
    padding: 14px 8px 20px;
  }

  .hero {
    padding: 4px 8px 14px;
  }

  .board {
    --tile-width: clamp(33px, 3.1vw, 44px);
    --tile-height: clamp(54px, 5.2vw, 70px);
    --tile-gap: clamp(3px, 0.3vw, 5px);
    padding: 11px 16px;
  }
}

@media (max-width: 760px) {
  .page-frame {
    width: calc(100vw - 12px);
    padding: 10px 4px 14px;
  }

  .header-logo {
    font-size: 13px;
    letter-spacing: 0.14em;
  }

  .hero {
    padding: 4px 4px 12px;
  }

  .hero h1 {
    font-size: clamp(32px, 11vw, 62px);
  }

  .hero .subtitle {
    font-size: 14px;
  }

  .board-section {
    padding-bottom: 8px;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .board {
    --tile-width: 27px;
    --tile-height: 43px;
    --tile-gap: 3px;
    min-width: max-content;
    border-radius: 12px;
    padding: 10px 14px;
  }

  .keyboard-hint {
    display: none;
  }
}

@media (max-width: 520px) {
  .board {
    --tile-width: 23px;
    --tile-height: 36px;
    --tile-gap: 2px;
  }

  .tile-upper span,
  .tile-lower span,
  .tile-flap-face span {
    font-size: calc(var(--tile-width) * 0.78);
  }
}

:fullscreen .board {
  --tile-width: clamp(45px, 3.55vw, 58px);
  --tile-height: clamp(72px, 6vw, 90px);
  --tile-gap: clamp(4px, 0.3vw, 6px);
}