/* Gridrop — landscape two-pane layout for the 6x8 single-grid modes
   (Blitz / Race / Online / Multiplayer). Linked only by those pages.
   Portrait is untouched; this only applies when rotated to a short landscape.

   Technique: flex column-wrap. The short rail items (top bar, scores, drop tile,
   buttons) fill the left column; the tall grid (order:9, comes last) can't fit
   under them so it wraps into its own right column. No shared row tracks. */
@media (orientation: landscape) and (max-height: 820px) {
  body { padding: 6px; justify-content: center; }
  .frame { max-width: none; width: 100%; }

  .topnote { margin-bottom: 2px !important; justify-content: flex-end !important; }
  .topnote > span[data-en] { display: none; }   /* hide tagline */
  .topnote .toggle { display: none; }            /* drop the language toggle in landscape (set it on the home screen) */

  /* compact logo at top-left: badge with the wordmark beside it, smaller */
  .topbar { justify-content: flex-start !important; margin-bottom: 5px !important; }
  .brand { flex-direction: row !important; align-items: center !important; gap: 8px !important; font-size: 16px !important; letter-spacing: .5px !important; }
  .brand img { width: 32px !important; height: 32px !important; }

  /* compact the rail so all of it fits in one column beside the grid */
  .pscore { gap: 10px; margin: 6px 0 6px !important; }
  .pcard { padding: 13px 6px 8px !important; border-radius: 13px; }
  .pcard .av { width: 26px; height: 26px; top: -13px; }
  .pcard .av svg { width: 13px; height: 13px; }
  .pcard .pn { font-size: 11px; margin-bottom: 2px; }
  .pcard .pv { font-size: 23px; }
  .turnbar { padding: 7px !important; margin-bottom: 6px !important; font-size: 12px; }
  .qrow { padding: 9px !important; margin-bottom: 0 !important; gap: 12px; }
  .qcur { width: 52px !important; height: 52px !important; font-size: 28px !important; border-radius: 13px !important; }
  .qlbl { font-size: 9px; }

  .scr {
    min-height: 0;
    height: calc(100dvh - 42px);   /* leaves room for the slim top bar */
    padding: 10px 16px;
    display: flex;
    flex-flow: column wrap;
    align-content: center;       /* center the two columns as a group */
    justify-content: flex-start; /* items top-aligned within a column */
    gap: 0;
    overflow: hidden;
  }
  /* rail items: fixed-ish width column, trimmed spacing */
  .scr > * { width: min(46vw, 330px); max-width: 330px; margin: 0 0 6px 0 !important; flex: none; }
  .topbar { margin-bottom: 6px !important; }
  .actions { margin: 8px 0 0 0 !important; padding-top: 0 !important; }
  .langlock { display: none; }

  /* grid pane: its own right column, no width clamp, sized by height */
  .scr > .gridwrap {
    order: 9; width: auto; max-width: none;
    margin: 0 0 0 16px !important; align-self: center;
  }
  .cols { display: none !important; }            /* tap the cells directly to drop */
  .gridwrap { --cell: min(70px, calc((100dvh - 126px) / 8)); }   /* grid is 6 wide x 8 tall; accounts for framed grid padding+border */
  .grid { grid-template-columns: repeat(6, var(--cell)) !important; width: auto !important; }
  .cell { width: var(--cell); height: var(--cell); aspect-ratio: auto; font-size: calc(var(--cell) * 0.46); }
  .colbtn { padding: 3px 0; }
}