@media (max-width: 760px) {
  .app {
    width: min(100% - .7rem, 760px);
    padding-top: .35rem;
  }

  .app-info h2 {
    font-size: 1.65rem;
  }

  .app-info-grid,
  .app-facts {
    grid-template-columns: 1fr;
  }

  .word-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .word-list[data-mobile-columns="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .home-puzzle-actions {
    grid-template-columns: 1fr;
  }

  .game-bar {
    min-height: 2.75rem;
    gap: .35rem;
    padding-bottom: .4rem;
  }

  .level-pill,
  .score-pill,
  .icon-button {
    min-height: 2.2rem;
  }

  .level-pill {
    padding: 0 .64rem;
    font-size: .86rem;
  }

  .score-pill {
    min-width: 3.7rem;
    padding: 0 .48rem;
    font-size: .9rem;
  }

  .icon-button {
    width: 2.2rem;
    height: 2.2rem;
  }

  .word-panel {
    padding: .42rem;
    margin-bottom: .4rem;
  }

  .word-list {
    gap: .28rem;
  }

  .word-chip {
    gap: .26rem;
    padding: .3rem .34rem;
    border-radius: .42rem;
  }

  .word-dot {
    width: .45rem;
    height: .45rem;
  }

  .word-label.word-label-length-clue {
    gap: .2rem;
  }

  .word-label-length-dot {
    width: .45rem;
    height: .45rem;
  }

  .word-grid {
    border-radius: .6rem;
  }

  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-dialog .settings-action-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #settings-dialog .settings-action-row .dialog-action {
    min-width: 0;
  }

  .app-dialog {
    top: max(3rem, 9dvh);
    max-height: calc(100dvh - max(3rem, 9dvh) - 1.5rem);
  }
}

@media (orientation: portrait) and (max-height: 720px) {
  .home-shell {
    padding-top: .5rem;
  }

  .home-logo {
    width: min(40vw, 150px);
  }

  .home-heading {
    margin-top: .5rem;
  }

  .home-actions {
    gap: .45rem;
    margin-top: .75rem;
  }

  .home-action {
    min-height: 2.65rem;
  }

  .home-links {
    padding-top: .6rem;
  }
}

/* Footer-Links (Pikasso-Projekte · Forum · Rechtliches) auf schmalen
 * Bildschirmen in einer Zeile halten, damit der Footer am Handy nicht
 * umbricht. */
@media (max-width: 480px) {
  .home-links {
    flex-wrap: nowrap;
    gap: .15rem;
  }

  .home-links a {
    padding: .45rem .4rem;
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .word-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


@media (orientation: landscape) and (min-width: 600px) {
  #game-screen {
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: flex-start;
  }

  /*
   * Auf breiten Landscape-Screens (Desktop) ist neben Wortliste und
   * Spielfeld genug Platz fuer Titel und Untertitel, analog zum
   * Home-Screen (.home-title/.home-subtitle in layout-home.css).
   */
  .game-heading {
    display: block;
    margin-bottom: .3rem;
    text-align: center;
  }

  .game-title {
    margin: 0;
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    letter-spacing: -.01em;
  }

  .game-subtitle {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .88rem;
  }

  /*
   * #game-screen ist ein Flex-Container mit mehr Kindern als nur
   * .word-panel/.grid-wrap (Header, Admin-Panels, sr-only-Elemente).
   * .game-heading und .game-bar bekommen flex-basis: 100%, damit sie im
   * Wrap-Layout eine eigene volle Zeile erzwingen und nur
   * .word-panel/.grid-wrap sich eine gemeinsame Zeile teilen.
   * flex-grow bleibt 0, sonst zieht sich z.B. der Header (.game-bar) in
   * die Hoehe, weil er als einziges Element seiner Zeile den Rest des
   * verfuegbaren Platzes aufsaugt.
   *
   * Bewusst als Nachfahren-Selektor (nicht #game-screen > ...): .game-bar
   * steckt seit der Einfuehrung von .board-aside (siehe index.html) nicht
   * mehr als direktes Kind unter #game-screen. .board-aside ist im
   * PC-Querformat display:contents und faellt damit fuer die
   * Flex-Verteilung weg - seine Kinder (game-bar, word-panel) werden zu den
   * tatsaechlichen Flex-Items von #game-screen, sind aber per Kind-Selektor
   * (>) nicht mehr erreichbar, da display:contents nur die Layout-Box,
   * nicht den DOM-Baum aendert (Selektor-Matching bleibt DOM-basiert).
   * Im Smartphone-Querformat-Block weiter unten wird .game-bar dagegen
   * durch eigene Regeln wieder ueberschrieben (position:static etc.), dort
   * ist .board-aside selbst die Spalte neben .grid-wrap.
   */
  .game-heading,
  #game-screen .game-bar {
    flex: 0 0 100%;
  }

  /*
   * .grid-wrap erbt flex: 1 1 auto aus grid.css und wächst dadurch
   * innerhalb der zweiten Flex-Zeile auf die restliche verfuegbare Hoehe
   * (#game-screen hat height: 100dvh, siehe layout-home.css) - keine
   * manuelle Hoehenberechnung noetig. Das ist die Bezugsgroesse, aus der
   * updateViewportLayout() (js/game.js) die tatsaechliche quadratische
   * Spielfeldgroesse (--grid-max-size) ableitet. Im Landscape-Zweig
   * dieser Funktion wird --word-list-max-size auf denselben Wert gesetzt,
   * damit die Wortliste (.word-list, siehe grid.css) nie hoeher als das
   * Spielfeld wird, statt die volle Zeilenhoehe zu fuellen.
   */
  .word-panel {
    flex: 0 0 clamp(200px, 32vw, 300px);
    margin: 0 .55rem 0 0;
    overflow-y: auto;
  }

  .word-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .grid-wrap {
    margin-top: 0;
  }
}

/*
 * .board-aside umschliesst game-bar + word-panel (siehe index.html). Default
 * layout-transparent: Portrait und PC-Querformat verhalten sich dadurch
 * exakt wie vor der Einfuehrung des Wrappers (game-bar bleibt eigene volle
 * Flexzeile, word-panel bleibt eigenstaendiges Flex-Kind von #game-screen).
 * Nur im Smartphone-Querformat-Block unten wird daraus eine echte Spalte.
 */
.board-aside {
  display: contents;
}

/*
 * Smartphone-Querformat (niedrige Hoehe): die Ueberschrift (.game-heading)
 * und die game-bar als eigene volle Zeilen verbrauchen zusammen so viel
 * Hoehe, dass fuer das Spielfeld kaum noch Platz bleibt (~264px bei einem
 * 390px hohen Viewport). Analog zur Home-Screen-Loesung nutzt max-height:600px
 * als Diskriminator fuer "Handy quer" (PC/Tablet-Querformat hat mehr Hoehe
 * und behaelt die Ueberschrift, siehe Basis-Block oben).
 *
 * Die game-bar wandert dafuer in dieselbe linke Spalte wie die Wortliste
 * (oberhalb davon), die Ueberschrift entfaellt. .grid-wrap bleibt direktes
 * Flex-Kind von #game-screen und ruesst dadurch an den Container-Top heran -
 * updateViewportLayout() (js/game.js) misst diese Geometrie automatisch neu
 * und vergroessert das Spielfeld entsprechend, ohne dass JS angepasst werden
 * muss.
 */
@media (orientation: landscape) and (min-width: 480px) and (max-height: 600px) {
  #game-screen {
    flex-flow: row nowrap;
    align-items: flex-start;
    align-content: flex-start;
  }

  .game-heading {
    display: none;
  }

  .board-aside {
    display: flex;
    flex-direction: column;
    flex: 0 0 clamp(12rem, 34vw, 17rem);
    height: var(--grid-max-size);
    margin: 0 .55rem 0 0;
    min-height: 0;
  }

  .grid-wrap {
    margin-top: 0;
  }

  .board-aside > .word-panel {
    display: flex;
    flex: 1 1 0;
    margin: 0;
    min-height: 0;
    overflow: hidden;
  }

  .board-aside > .word-panel .word-list {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    grid-template-columns: minmax(0, 1fr);
  }

  #game-screen .board-aside > .game-bar {
    position: static;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: .35rem;
    min-height: 0;
    padding: .1rem 0 .35rem;
    background: transparent;
    backdrop-filter: none;
    row-gap: .3rem;
  }

  .board-aside > .game-bar .bar-left {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-content: flex-start;
    align-self: start;
    flex-wrap: wrap;
    gap: .35rem;
  }

  .board-aside > .game-bar .bar-right {
    display: contents;
  }

  .board-aside > .game-bar #admin-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .board-aside > .game-bar #timer-pause {
    grid-column: 2;
    grid-row: 2;
  }

  .board-aside .level-pill,
  .board-aside .score-pill,
  .board-aside .icon-button {
    min-height: 2.1rem;
  }

  .board-aside .level-pill {
    padding: 0 .6rem;
    font-size: .88rem;
  }

  /* Die Abschnittspunkte kosten auf schmalen Seitenleisten mehr Platz als
   * sie dort vermitteln. Die Levelnummer bleibt als direkter Einstieg in die
   * Levelkarte sichtbar; so passen Status und Einstellungen in eine Zeile. */
  .board-aside .level-block-progress {
    display: none;
  }

  .board-aside .score-pill {
    min-width: 3.6rem;
    padding: 0 .46rem;
  }

  .board-aside .icon-button {
    width: 2.1rem;
    height: 2.1rem;
  }

  /* Die Wisch-Vorschau erscheint nur waehrend einer Auswahl. Als Overlay
   * verbraucht sie keinen permanenten Platz unter dem Spielfeld. */
  .selection-preview.is-visible {
    top: auto;
    bottom: .38rem;
    z-index: 8;
  }

  .topics-shell,
  .daily-shell,
  .progress-shell,
  .editor-shell {
    padding-top: .75rem;
  }

  .app-dialog,
  .app-dialog.compact-dialog {
    top: .5rem;
    width: min(calc(100% - 1rem), 520px);
    max-height: calc(100dvh - 1rem);
  }

  .app-dialog form {
    padding: .75rem;
  }

  .dialog-copy {
    margin: .7rem 0;
  }
}

/*
 * Hochformat mit ausreichend Hoehe: auf praktisch allen realen Geraeten ist
 * das Spielfeld im Hochformat durch die Viewport-BREITE begrenzt (siehe
 * grid.css, --grid-max-size: min(100%, 560px)), nicht durch die Hoehe -
 * die Ueberschrift (.game-heading, Default display:none aus game-bar.css)
 * kostet dort keinen Spielfeld-Platz, sondern nutzt bislang ungenutzten
 * vertikalen Spielraum. Erst unterhalb von ca. 560px effektiver Hoehe
 * (z.B. sichtbare Browser-Adressleiste, sehr kurzes Geraet) beginnt
 * updateViewportLayout() (js/game.js) das Spielfeld zu verkleinern, um
 * Platz zu schaffen - min-height:560px haelt die Ueberschrift genau dort
 * wieder aus, wo sie das Spielfeld noch nicht spuerbar verkleinert
 * (per Messreihe belegt: bei 560px Hoehe ~1px Verlust, darunter waechst
 * der Verlust schnell). Betrifft .game-heading (Spiel-Screen), nicht zu
 * verwechseln mit .home-heading (Home-Screen, siehe Block weiter unten).
 */
@media (orientation: portrait) and (min-height: 560px) {
  .game-heading {
    display: block;
    margin-bottom: .3rem;
    text-align: center;
  }
}

/*
 * Home-Screen: bei wenig Hochformat-Hoehe (kleine/aeltere Handys, oder
 * Handys mit sichtbarer Adressleiste) reicht der Platz fuer Logo +
 * Untertitel + alle Aktions-Buttons + Footer nicht mehr bequem aus.
 * Buttons bleiben bewusst einspaltig mit vollem Text (Senioren-Lesbarkeit
 * hat Vorrang vor Kompaktheit) - stattdessen faellt nur der Untertitel weg
 * und das Logo wird kleiner, um Hoehe zu sparen.
 */
@media (orientation: portrait) and (max-height: 640px) {
  .home-heading {
    display: none;
  }

  .home-logo {
    width: min(42vw, 150px);
  }
}

/*
 * Home-Screen im Smartphone-Querformat (niedrige Hoehe): das normale
 * 4-Zeilen-Grid aus layout-home.css (Logo -> Untertitel -> Buttons ->
 * Footer) passt nicht mehr uebereinander in die verfuegbare Hoehe. Analog
 * zum Spiel-Screen (siehe #game-screen weiter oben) wird deshalb auf ein
 * Zwei-Spalten-Layout umgestellt: Logo links, Buttons rechts, Footer ueber
 * die volle Breite darunter. min-height:601px im PC-Breakpoint unten
 * grenzt bewusst ab, damit breite/hohe Desktop-Fenster im Querformat davon
 * unberuehrt bleiben.
 */
@media (orientation: landscape) and (max-height: 600px) {
  .home-shell {
    grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-items: center;
    column-gap: clamp(1rem, 4vw, 2.5rem);
    width: min(100%, 860px);
    min-height: calc(100dvh - 2rem);
    padding-top: min(3dvh, 1rem);
  }

  .home-logo {
    grid-column: 1;
    grid-row: 1 / span 1;
    width: min(30vw, 150px);
    margin: 0 auto;
  }

  .home-heading {
    display: none;
  }

  .home-actions {
    grid-column: 2;
    grid-row: 1;
    align-content: center;
    margin-top: 0;
  }

  .home-links {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: end;
    padding-top: .6rem;
  }
}

/* Das Zahnrad gehoert im kompakten Querformat zur linken Logo-Spalte. Die
 * nachfolgende Regel steht bewusst nach dem Home-Layout-Block, damit dessen
 * allgemeine Groessen nicht wieder uebernommen werden. */
@media (orientation: landscape) and (min-width: 480px) and (max-height: 600px) {
  .home-shell {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
  }

  .home-logo {
    width: min(19vw, 150px);
  }

  .home-settings-icon {
    right: auto;
    left: calc(36% - 2.35rem);
  }
}

/*
 * PC / breites Querformat: reichlich Platz vorhanden, Untertitel darf
 * etwas prominenter stehen als im Standard-Fall aus layout-home.css.
 * min-height:601px haelt diesen Block strikt getrennt vom
 * Smartphone-Querformat-Block oben.
 */
@media (orientation: landscape) and (min-width: 900px) and (min-height: 601px) {
  .home-shell {
    padding-top: min(8dvh, 4rem);
  }

  .home-subtitle {
    font-size: 1.05rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}