/* ═══════════════════════════════════════════════════════════════════
   MP-DESKTOP v1.0 — Tablet- & Browser-Layout für MEINEPACKS
   ───────────────────────────────────────────────────────────────────
   Reine Layout-Schicht. Unter 768px: NULL Wirkung (alles in @media).
   Kein Eingriff in Kauflogik, IDs, Handler oder DOM-Struktur.

   Stufe T (≥768px):  App-Säule 768px, Phone-Card-Look weg,
                      Bühne mit Gold-Glows, Bottom-Nav bleibt.
   Stufe D (≥1024px): Side-Rail links (aus #mp-navbar, CSS-only),
                      Feed als zentrierte Säule auf offener Bühne,
                      Bottom-Sheets werden zentrierte Modals.
   © MEINEPACKS 2026
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════ STUFE T — TABLET (ab 768px) ═══════════ */
@media (min-width: 768px) {

  /* Bühne: Theme-korrekte Grundfläche statt hartem #0A0A0A.
     (--bg auf body liest sonst immer nur den :root-Light-Wert,
     weil [data-theme=dark] nur unter #app gilt.) */
  html, body { background: #FAFAF7; }
  html:not([data-ambient]):has(#app[data-theme="dark"]) body {
    background: #050403;
  }
  /* Gold-Glows über der Grundfläche — !important, weil die
     Ambiente-Regel background als Shorthand setzt (killt sonst
     das image). Farbfläche selbst bleibt Ambiente-Sache. */
  body {
    background-image:
      radial-gradient(1100px 560px at 88% -8%,
        rgba(212, 175, 55, .10), transparent 62%),
      radial-gradient(900px 560px at -6% 108%,
        rgba(212, 175, 55, .055), transparent 58%) !important;
    background-attachment: fixed !important;
  }

  /* App-Säule: Phone-Card-Optik (430×932, Radius, Schatten) weg */
  #app {
    max-width: 768px;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    border-left: 1px solid var(--border, #F0F0F0);
    border-right: 1px solid var(--border, #F0F0F0);
  }

  /* Feed-Inhalt mittig mit etwas Luft */
  #screen-home > div:first-child {
    max-width: 720px;
    margin: 0 auto;
    width: 100%;
  }

  /* Bottom-Nav folgt der Säule kompakt */
  #mp-navbar #mp-nav-inner { max-width: 560px; }

  /* Dezente Scrollbars statt unsichtbar (Desktop-Browser) */
  #screen-home::-webkit-scrollbar,
  .screen::-webkit-scrollbar,
  #shop-overlay::-webkit-scrollbar,
  #cart-overlay::-webkit-scrollbar,
  #checkout-overlay::-webkit-scrollbar {
    width: 10px;
    display: block;
  }
  #screen-home::-webkit-scrollbar-thumb,
  .screen::-webkit-scrollbar-thumb,
  #shop-overlay::-webkit-scrollbar-thumb,
  #cart-overlay::-webkit-scrollbar-thumb,
  #checkout-overlay::-webkit-scrollbar-thumb {
    background: rgba(200, 168, 78, .28);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: content-box;
  }
  #screen-home::-webkit-scrollbar-track,
  .screen::-webkit-scrollbar-track,
  #shop-overlay::-webkit-scrollbar-track,
  #cart-overlay::-webkit-scrollbar-track,
  #checkout-overlay::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* Maus-Politur: sanftes Anheben statt nur Tap-Scale */
@media (min-width: 768px) and (hover: hover) {
  .lift { transition: transform .18s ease, box-shadow .18s ease; }
  .lift:hover { transform: translateY(-2px); }
}

/* ═══════════ STUFE D — DESKTOP / iPAD QUER (ab 1024px) ═══════════ */
@media (min-width: 1024px) {

  /* ── App-Fläche: Säule löst sich auf, Feed schwebt auf der Bühne ── */
  #app {
    width: auto;
    max-width: none;
    margin: 0 0 0 236px;      /* Platz für die Side-Rail */
    background: transparent;   /* Bühne scheint durch */
    border: none;
    box-shadow: none;
  }

  /* Feed als zentrierte Content-Säule */
  #screen-home { padding: 0 32px; }
  #screen-home > div:first-child {
    max-width: 680px;
    margin: 0 auto;
    width: 100%;
  }

  /* ── SIDE-RAIL: die echte Bottom-Nav, nur umgeformt (CSS-only,
        alle Nodes, Listener & Badges bleiben unangetastet) ── */
  #mp-navbar {
    top: 0;
    bottom: 0;
    left: 0;
    right: auto;
    width: 236px;
    padding: 0;
    padding-bottom: 0;
    border-top: none;
    border-right: 1px solid var(--border, #F0F0F0);
    display: flex;
    flex-direction: column;
  }

  /* Wortmarke oben in der Rail */
  #mp-navbar::before {
    content: "MEINEPACKS";
    display: block;
    flex: 0 0 auto;
    font-family: 'Bebas Neue', 'Outfit', sans-serif;
    font-size: 27px;
    letter-spacing: 2.5px;
    line-height: 1;
    padding: 30px 22px 20px;
    margin: 0 14px 8px;
    border-bottom: 1px solid var(--border, #F0F0F0);
    background: linear-gradient(135deg, #D4AF37, #F5D76E 55%, #B8941F);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  /* Footer unten in der Rail */
  #mp-navbar::after {
    content: "MEINEPACKS · TIKTOK LIVE";
    display: block;
    flex: 0 0 auto;
    margin-top: auto;
    padding: 16px 22px 20px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 2.5px;
    color: var(--sub, #999);
    opacity: .55;
    text-transform: uppercase;
  }

  /* Tabs: Spalte statt Zeile, Pill-Hover, große Labels */
  #mp-navbar #mp-nav-inner {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    max-width: none;
    margin: 0;
    padding: 8px 14px;
    flex: 1 1 auto;
    overflow-y: auto;
  }
  #mp-navbar .mn-tab {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    width: 100%;
  }
  #mp-navbar .mn-tab:hover {
    background: rgba(200, 168, 78, .09);
  }
  #mp-navbar .mn-tab.on {
    background: rgba(200, 168, 78, .13);
  }
  #mp-navbar .mn-tab:active { transform: scale(.98) !important; }
  #mp-navbar .mn-lbl {
    font-size: 14px;
    font-weight: 600;
    margin-top: 0;
    letter-spacing: 0;
  }
  #mp-navbar .mn-tab.on .mn-lbl { font-weight: 800; }
  #mp-navbar .mn-ind { display: none; }
  #mp-navbar .mn-tab.on .mn-bg { display: none; }
  /* .mn-badge bleibt bewusst am Original-Platz (Icon-Ecke) —
     funktioniert im Row-Layout genauso */

  /* ── Vollflächen-Screens im App-Bereich als zentrierte Spalten ── */
  #shop-overlay, #cart-overlay, #checkout-overlay {
    left: 0;
    right: 0;
    width: min(720px, 100%);
    margin: 0 auto;
    border-left: 1px solid var(--border, #F0F0F0);
    border-right: 1px solid var(--border, #F0F0F0);
    background: var(--bg, #FAFAFA);
  }
  /* Coin-Shop (fixed am body) bekommt dieselbe Spalten-Behandlung */
  #coinshop-overlay {
    left: 0;
    right: 0;
    width: min(720px, 100%);
    margin: 0 auto;
    border-left: 1px solid var(--border, #F0F0F0);
    border-right: 1px solid var(--border, #F0F0F0);
  }
  /* Auktions-Zahlsheet: vom Bottom-Sheet zum zentrierten Modal */
  #aucPaySheetInner {
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    border-radius: 28px !important;
    max-height: min(86vh, 900px) !important;
    overflow-y: auto !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .45) !important;
  }
  /* Deal-Warenkorbleiste: bleibt unten, aber als mittige Karte */
  #dcb-sheet {
    max-width: 520px;
    margin: 0 auto;
    border-radius: 28px 28px 0 0 !important;
  }
  #login-gate > div {
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
  }
  #onboarding { background: #0A0A0A; }
  #ob-content > div {
    max-width: 560px;
    margin: 0 auto;
    width: 100%;
  }

  /* ── BOTTOM-SHEETS → ZENTRIERTE MODALS ──
     Matcht alle Overlays nach ihrem stabilen Style-Muster
     (position:fixed + inset:0 + align-items:flex-end):
     Kassen-Picker, mpe/mpd/pp-Sheets, Deals, Paletten, Kauf-Hinweis …
     WICHTIG: je Property BEIDE Schreibweisen — die Roh-Form aus
     innerHTML-Attributen ("position:fixed") UND die vom Browser
     serialisierte Form aus el.style.cssText ("position: fixed"). */
  div:is([style*="position:fixed"], [style*="position: fixed"]):is([style*="inset:0"], [style*="inset: 0px"]):is([style*="align-items:flex-end"], [style*="align-items: flex-end"]) {
    align-items: center !important;
    padding: 44px 28px !important;
  }
  /* Die Sheets selbst: runder Vollradius, Deckel-Höhe, Schatten,
     eigener Scroll falls Inhalt höher als der Schirm */
  div:is([style*="position:fixed"], [style*="position: fixed"]):is([style*="inset:0"], [style*="inset: 0px"]):is([style*="align-items:flex-end"], [style*="align-items: flex-end"]) > div:is([style*="border-radius:28px 28px 0 0"], [style*="border-radius: 28px 28px 0px 0px"], [style*="border-radius:32px 32px 0 0"], [style*="border-radius: 32px 32px 0px 0px"]) {
    border-radius: 28px !important;
    max-height: min(86vh, 900px) !important;
    overflow-y: auto !important;
    box-shadow: 0 40px 120px rgba(0, 0, 0, .45) !important;
  }
}