@media (max-width: 480px) {
  #app { padding-top: 10px; }

  #key-section { max-height: 38dvh; }

  .key-item img,
  .key-item .key-ph {
    width: 164px;
    height: 164px;
  }
  .key-ph { font-size: 66px; }
  #key-scroll { padding: 0 calc(50% - 90px); }

  #chest-wrap { width: min(var(--chest-size), 62vw); }

  #balance-section { flex: 0 0 8%; }
  #btn-section { flex: 0 0 52px; }
  #chest-section { padding-top: 0; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}