@media (max-width: 880px) {
  .site-header {
    grid-template-columns: 1fr;
    gap: 12px;
    min-height: 180px; /* Reserve height for stacked items */
  }

  .hero-band,
  .layout,
  .creator-grid {
    grid-template-columns: 1fr;
  }

  .hero-action {
    align-items: flex-start;
  }

  .side-panel {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-panel h2,
  .mini-ad {
    grid-column: 1 / -1;
  }
}

@media (max-width: 620px) {
  main {
    padding-inline: 12px;
  }

  .game-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .game-card {
    min-height: 212px;
  }

  .game-art {
    min-height: 104px;
  }

  .section-head,
  .play-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .score-strip {
    justify-content: stretch;
    width: 100%;
  }

  .score-strip span {
    flex: 1;
  }


  .control-row {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    max-width: 260px;
    margin: 14px auto 0;
  }

  .control-row [data-control="up"] { grid-column: 2; grid-row: 1; }
  .control-row [data-control="left"] { grid-column: 1; grid-row: 2; }
  .control-row [data-control="down"] { grid-column: 2; grid-row: 2; }
  .control-row [data-control="right"] { grid-column: 3; grid-row: 2; }
  .icon-btn.wide { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; }
}

@media (max-width: 880px) and (orientation: portrait) {
  .stage-shell.is-playing .rotate-overlay {
    display: flex;
  }
}