/* Desktop-Anpassungen (Kapitel 11.1 nennt explizit eine separate
   css/desktop.css) -- das Layout bleibt mobil-first (Kapitel 11.2), auf
   breiten Bildschirmen wird der Inhalt nur zentriert und die
   Touch-Ziel-Breite der Bottom-Nav begrenzt, statt über die volle
   Fensterbreite gestreckt zu werden. */

/* Nutzerfeedback: "Bei Querformat oder Desktop Ansicht, soll anstelle des
   Menüpunkt 'Mehr' alle Menüpunkte angezeigt werden, dann wären wir schon
   ziemlich nah an einer nutzbaren Desktop Seite und es lässt sich auch auf
   Tablets gut bedienen." -- eigene, breiteste Bedingung (nicht an die
   700px-Schwelle unten gekoppelt): "Querformat" schließt auch schmale
   Handys im Querformat mit ein (z. B. ältere/kleine Android-Geräte landen
   unter 700px Breite), die trotzdem schon von der vollen Navigation
   profitieren sollen. `.nav-item-extended`/`.nav-item-more` werden in
   main.css als mobiler Hochformat-Default (ausgeblendet bzw. sichtbar)
   deklariert -- hier wird das für Querformat/Desktop umgekehrt. Siehe
   components/bottom-nav.js: DOM-Struktur bleibt identisch, nur CSS
   entscheidet, welche Punkte sichtbar sind.*/
@media (min-width: 700px), (orientation: landscape) {
  .nav-item-extended { display: flex; }
  .nav-item-more { display: none; }
}

/* Unterhalb der 960px-Seitenleiste (siehe zweiter Breakpoint weiter unten)
   bleibt die Navigation eine (jetzt viel vollere) Bottom-Leiste -- ohne
   Anpassung würde `flex: 1` (siehe main.css) 10+ Punkte über die volle
   Breite auseinanderziehen. Stattdessen eine kompakte, mittig ausgerichtete
   Werkzeugleiste, die bei Bedarf in eine zweite Zeile umbricht. Bewusst
   NICHT an dieselbe `(orientation: landscape)`-Bedingung wie oben gekoppelt
   (`@media`-Bedingungen lassen sich nicht direkt kombinieren, ohne die
   955px-Sidebar-Variante versehentlich mit einzuschließen) -- stattdessen
   ein expliziter `max-width`, der knapp unter dem Sidebar-Breakpoint endet.
   Für sehr schmale Querformat-Handys (< 700px) gilt dieselbe
   Wrap-Behandlung, damit die Punkte dort nicht abgeschnitten werden. */
@media ((min-width: 700px) and (max-width: 959px)), ((orientation: landscape) and (max-width: 959px)) {
  .bottom-nav { flex-wrap: wrap; justify-content: center; }
  .nav-item { flex: 0 0 auto; min-width: 76px; }
}

@media (min-width: 700px) {
  .app-shell {
    max-width: 560px;
    margin: 0 auto;
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
    box-shadow: 0 0 70px -10px rgba(211, 160, 90, 0.10), 0 0 60px rgba(0, 0, 0, 0.4);
  }

  .auth-page {
    max-width: 440px;
  }

  .resource-bar {
    padding: 16px 20px;
  }

  .screen {
    padding: 18px 22px 28px;
  }

  .bottom-nav {
    padding-bottom: 4px;
  }

  .nav-item {
    font-size: 0.68rem;
  }
}

@media (min-width: 1000px) {
  .app-shell {
    max-width: 640px;
  }
}

/* Spätere Überarbeitung (Nutzer-Vorgabe: "UX-Verbesserungen" -> fein
   abgestimmtes Desktop-Layout): ab hier reicht "die Handy-Ansicht nur
   zentriert und breiter gerahmt" (siehe obige Breakpoints) nicht mehr --
   auf einem echten Desktop-Bildschirm wirkt eine schmale, mittig
   schwebende Telefonspalte mit sehr viel ungenutztem Raum links/rechts
   fehl am Platz. Ab hier wird die Bottom-Navigation zu einer festen
   Seitenleiste links (klassisches Desktop-App-Layout), der Inhalt bekommt
   entsprechend mehr Breite -- alles rein über CSS-Grid auf denselben drei
   Kindern von `.app-shell` (`.topbar-row`, `.screen`,
   `.bottom-nav`), OHNE Änderungen an app-shell.js/bottom-nav.js: die
   Navigation bleibt exakt dieselben `<a>`-Elemente, nur ihre Anordnung und
   das Layout drumherum ändern sich. */
@media (min-width: 960px) {
  .app-shell {
    display: grid;
    grid-template-columns: 232px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "nav resbar"
      "nav switcher"
      "nav screen";
    max-width: 1040px;
    /* KEIN explizites `height` mehr -- `.app-shell` ist seit main.css
       `position:fixed` mit `top/right/bottom/left:0`, die Hoehe ergibt sich
       daraus bereits zwingend. Ein zusaetzliches `height:100vh` hier wuerde
       nur unnoetig mit top/bottom konkurrieren (Ueberbestimmung). */
    border: 1px solid var(--border);
    box-shadow: 0 0 70px -10px rgba(211, 160, 90, 0.10), 0 0 60px rgba(0, 0, 0, 0.4);
  }

  /* Umsetzung UI-Skizzen-Runde 2 (05.08.2026): `.topbar-row` (statt vorher
     `#resource-bar-slot` direkt) ist jetzt das Grid-Element -- sie umschliesst
     Ressourcenleiste UND das neue Glocken-Symbol als gemeinsame Kopfzeile,
     siehe components/app-shell.js. */
  .topbar-row { grid-area: resbar; }
  #planet-switcher-slot { grid-area: switcher; padding: 8px 28px 0; }
  .screen { grid-area: screen; padding: 24px 32px 40px; }
  .screen .page-wrap { max-width: 720px; margin: 0; }

  .resource-bar {
    justify-content: flex-start;
    gap: 28px;
    padding: 16px 28px;
  }

  .bottom-nav {
    grid-area: nav;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    height: 100%;
    padding: 20px 10px;
    border-top: none;
    border-right: 1px solid var(--border);
    background: #120c19e6;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    /* Jetzt bis zu ~13 Punkte (Nutzerfeedback: "alle Menüpunkte anzeigen")
       statt der bisherigen 5 -- bei sehr niedrigen Fensterhöhen lieber
       scrollen als abzuschneiden. */
    overflow-y: auto;
  }

  .nav-item {
    flex: 0 0 auto; /* nicht mehr `flex:1` (siehe main.css) -- sonst würden
      sich 13 statt 5 Punkte gleichmäßig über die GESAMTE Seitenleistenhöhe
      verteilen, mit unschön großen Lücken dazwischen. */
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 3px;
    font-size: 0.82rem;
    min-height: auto;
    border: 1px solid transparent;
  }
  .nav-item:hover { border-color: var(--border-hi); }
  .nav-item.active {
    background: var(--panel-2);
    border-color: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
  }

  /* AP6 (Desktop-Navigation gruppieren, siehe
     planning/gameplay-ui-verbesserungsplan-2026-08.md): erst ab hier ist die
     Seitenleiste ueberhaupt vorhanden -- die Gruppen-Ueberschriften ergeben
     nur HIER Sinn (siehe main.css fuer den mobilen `display: none`-Default).
     Dezent gehalten (klein, gedaempfte Farbe, Abstand nach oben groesser als
     nach unten), damit sie wie eine Sektions-Trennung wirkt und nicht mit
     den Eintraegen selbst konkurriert. */
  .nav-group-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--muted-2);
    padding: 14px 12px 4px;
  }
  /* Die allererste Ueberschrift ("Spielen") braucht keinen zusaetzlichen
     Abstand nach oben -- sie steht direkt am Beginn der Seitenleiste. */
  .nav-group-label:first-child { padding-top: 4px; }

  /* Reine Eingabeformulare (Login/Registrierung, Nachricht verfassen,
     Allianz gründen/einladen) müssen auf der jetzt breiteren Inhaltsspalte
     nicht die volle Breite ausnutzen -- sonst wirken einzelne Textfelder
     unnatürlich lang. Listen/Info-Karten (Gebäude, Flotten, Mitglieder, ...)
     bleiben bewusst unangetastet, die profitieren durchaus vom Mehr-Platz. */
  #create-alliance-form, #compose-form, #invite-player-form {
    max-width: 480px;
  }

  /* Nutzerfeedback: "auf dem Desktop könnte der Planet auch doppelt so
     groß sein in der Ansicht" -- die Kantenlänge ist eine reine CSS-Größe
     (das SVG selbst ist vektoriell, verliert bei Vergrößerung nichts,
     siehe components/planet-canvas.js), `width`/`height` hier überstimmen
     die `width="101" height="101"`-Attribute im HTML. Das restliche
     `.stage`-Panel wächst automatisch mit (kein festes `height`), nur der
     `.planet-hero`-Innenabstand bekommt etwas mehr Luft, damit die
     Login-Streak-/Bonus-Badges direkt darunter nicht zu eng am Rand kleben. */
  .planet-hero-canvas { width: 202px; height: 202px; }
  .stage-head { margin-bottom: 8px; }
}

/* Ab dieser Breite ist genug Platz fuer zwei echte Inhaltsspalten. Bewusst
   1200px und nicht die 960px der Seitenleiste: zwischen 960 und 1200 bleibt
   nach Abzug der 232px-Leiste zu wenig uebrig, zwei Spalten waeren dort
   schmaler als die mobile Einzelspalte. */
@media (min-width: 1200px) {
  .app-shell { max-width: 1400px; }
  .screen .page-wrap { max-width: 1100px; }

  /* Nur das Planeten-Dashboard wird zweispaltig -- Listenansichten
     (Gebaeude, Flotten, Galaxie) bleiben bewusst einspaltig: dort ist die
     Reihenfolge inhaltlich bedeutsam (Warteschlangenposition,
     Koordinatenfolge), und ein zweispaltiger Umbruch macht sie unlesbar. */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  /* Banner (Angriffswarnung, Events, Onboarding) laufen ueber beide
     Spalten -- sie sind Meldungen an den Spieler, keine Karten. */
  .dashboard-grid > .dashboard-full { grid-column: 1 / -1; }
}