/* Shared short-screen layout. Keep four visible rows and the template's future ad position. */
:is(.peele, .shitle) .ad-slot[data-state="placeholder"] { display: none; }
:is(.peele, .shitle) .reading-area { margin-top: 32px; }

/* Short screens trade spare spacing for the full board and 44px controls. */
@media (max-height: 850px) {
  :is(.peele, .shitle) .page-header { padding: 12px 16px 8px; }
  :is(.peele, .shitle) .page-header h1 { font-size: 30px; line-height: 1; }
  :is(.peele, .shitle) .brand-icon { width: 28px; height: 28px; }
  :is(.peele, .shitle) .page-header .h1-description { margin-top: 5px; font-size: 11px; }
  :is(.peele, .shitle) .page-header .hero-copy { margin-top: 7px; }
  :is(.peele, .shitle) .hero-lead { font-size: 12px; line-height: 1.4; }
  :is(.peele, .shitle) .hero-detail { margin-top: 2px; font-size: 11px; line-height: 1.4; }
  :is(.peele, .shitle) .game-stage { padding-top: 0; padding-bottom: 12px; }
  :is(.peele, .shitle) .game-toolbar { margin-bottom: 6px; }
  :is(.peele, .shitle) .word-goal { gap: 6px 12px; margin-bottom: 8px; }
  :is(.peele, .shitle) .score { margin-bottom: 8px; }
  :is(.peele, .shitle) .tile { width: 52px; height: 52px; }
  :is(.peele, .shitle) .word-row { margin-bottom: 4px; }
  :is(.peele, .shitle) .word-row:last-child { margin-bottom: 0; }
  :is(.peele, .shitle) .board-scroll { height: 228px; flex-shrink: 0; }
  :is(.peele, .shitle) .input-area { margin: 6px 0 4px; }
  :is(.peele, .shitle) .game-message { min-height: 20px; margin-top: 4px; }
  :is(.peele, .shitle) .keyboard { padding-top: 4px; }
  :is(.peele, .shitle) .key-row { margin-bottom: 4px; }
  :is(.peele, .shitle) .key-row:last-child { margin-bottom: 0; }
  :is(.peele, .shitle) .game-actions { margin: 4px 0 3px; }
}

@media (max-width: 340px) and (max-height: 850px) {
  :is(.peele, .shitle) .tile { width: 47px; height: 47px; }
  :is(.peele, .shitle) .board-scroll { height: 208px; }
}

@media (max-height: 700px) {
  :is(.peele, .shitle) .page-header { padding-top: 8px; padding-bottom: 4px; }
  :is(.peele, .shitle) .page-header h1 { font-size: 26px; }
  :is(.peele, .shitle) .brand-icon { width: 26px; height: 26px; }
  :is(.peele, .shitle) .page-header .h1-description { margin-top: 3px; }
  :is(.peele, .shitle) .page-header .hero-copy { margin-top: 5px; }
  :is(.peele, .shitle) .hero-detail { margin-top: 0; }
  :is(.peele, .shitle) .game-toolbar { margin-bottom: 4px; }
  :is(.peele, .shitle) .word-goal { gap: 6px 8px; margin-bottom: 4px; }
  :is(.peele, .shitle) .word-goal > span { flex-basis: auto; font-size: 11px; }
  :is(.peele, .shitle) .score { margin-bottom: 4px; }
  :is(.peele, .shitle) .tile { width: 44px; height: 44px; font-size: 25px; }
  :is(.peele, .shitle) .board-scroll { height: 196px; }
}