/* kaoyan-mobile-matchgame-live-shell-fix1-20260723: phone-only non-overlap layout */
@media (max-width: 700px), (max-height: 520px) and (max-width: 900px) and (orientation: landscape) {
  .appShell .matchBoard {
    /* The untouched MatchGame start state is absolutely positioned, so it needs a real board height. */
    min-height: 320px;
    max-height: min(64dvh, 560px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: 10px;
    overflow-y: auto;
    padding: 12px;
  }

  .appShell .wordBall {
    width: 100%;
    min-width: 0;
    max-width: none;
    min-height: 48px;
    position: static;
    left: auto;
    top: auto;
    transform: none;
    overflow-wrap: anywhere;
    padding: 8px;
    box-shadow: 0 7px 16px rgba(41, 98, 91, 0.1);
  }

  .appShell .wordBall.selected {
    transform: none;
    box-shadow: 0 0 0 3px rgba(230, 204, 131, 0.32), 0 7px 16px rgba(41, 98, 91, 0.12);
  }

  .appShell .wordBall.matched { transform: none; }
}

@media (max-height: 520px) and (max-width: 900px) and (orientation: landscape) {
  .appShell .matchBoard {
    min-height: 210px;
    max-height: 62dvh;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
  }

  .appShell .wordBall,
  .appShell .wordBall.selected,
  .appShell .wordBall.matched {
    min-height: 40px;
    padding: 6px;
  }
}