/* App-weite Bottom-Navigation der Kinderansicht (Issue #188). Ersetzt die
   bisherige seitliche Holz-Navigation (app-shell.css, .app-nav) fuer alle
   Bereiche einheitlich. Vier gleichwertige Haupt-Icons (Heute/Lernwege/
   Mein Buch/Fundstuecke) plus ein kleinerer, sekundaerer Erwachsene-Zugang
   (Kommentar "Verbindliche Entscheidung: 'Heute' + Fundstueck-Belohnung",
   2026-08-30: "Erwachsene ist kein gleichwertiger Navigationspunkt der
   Kinderansicht"). Eigene, in Issue #188 freigegebene Wald-/Energie-/
   Pergament-Tokens, lokal auf .app-shell beschraenkt, aendert keine
   globalen tokens.css-Werte (gleiches Muster wie zuvor .adventure-home). */
.app-shell {
  --wald: #13261A;
  --energie: #C7E82E;
  --pergament: #F4ECDA;
  --ink: #1A2117;

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.app-main {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--paper-light);
}

.app-bottom-nav {
  position: relative;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: clamp(16px, 6vw, 56px);
  padding: 10px calc(var(--safe-right) + 56px) calc(var(--safe-bottom) + 10px) calc(var(--safe-left) + 12px);
  background: var(--wald);
}

.app-bottom-nav-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 48px;
  min-height: 48px;
  padding: 4px;
  border: none;
  background: none;
  color: var(--pergament);
  font-size: 13px;
  cursor: pointer;
}

.app-bottom-nav-icon {
  width: clamp(36px, 5vw, 52px);
  height: clamp(36px, 5vw, 52px);
  border-radius: 50%;
}

.app-bottom-nav-button[aria-current="page"] .app-bottom-nav-icon {
  box-shadow: 0 0 0 3px var(--energie);
  border-radius: 50%;
}

.app-bottom-nav-button[aria-current="page"] {
  font-weight: 600;
}

/* Erwachsene: klein, ohne Icon, in der Ecke -- bewusst kein fuenftes
   gleichwertiges Welt-Icon (siehe Dateikopf), bleibt aber ein normaler,
   mindestens 44x44pt grosser Touch-Ziel-Button ueber denselben,
   PIN-geschuetzten showSection()-Pfad. */
.app-bottom-nav-secondary {
  position: absolute;
  top: 8px;
  right: calc(var(--safe-right) + 8px);
  min-height: 44px;
  padding: 6px 10px;
  border: 1px solid rgba(244, 236, 218, 0.35);
  border-radius: 4px 12px 12px 4px;
  background: none;
  color: rgba(244, 236, 218, 0.75);
  font-size: 13px;
  cursor: pointer;
}

.app-bottom-nav-secondary[aria-current="page"] {
  border-color: var(--energie);
  color: var(--pergament);
  font-weight: 600;
}

@media (max-width: 640px) {
  .app-bottom-nav {
    gap: clamp(10px, 8vw, 28px);
    padding-top: 32px;
  }

  .app-bottom-nav-secondary {
    top: 4px;
    right: calc(var(--safe-right) + 6px);
    padding: 4px 8px;
    font-size: 12px;
  }
}