/* ==========================================================================
   CALIGO - Handy-Kunstdesign (06.11.2026)
   Leiste mit Landschaft, Seitenmenü und Einstellungen wie ein hereingeschobenes Stück Landschaftsbild.
   Aufbau (Papier): unten ein beiges, etwas größeres Blatt mit gerissenem Rand, darauf das Bild-Blatt
   (kleiner, eigener gerissener Rand) mit Schatten. So bleibt ringsum ein Papierrand sichtbar.
   NUR die Knöpfe sind verschwommen und abgedunkelt, sie schweben frei über dem Bild.
   Nur bis 768 px. Bilder: assets/ui/hdr_*.webp (Leiste), drw_*.webp (Menü/Einstellungen), Wechsel: js/mobile-art.js
   ========================================================================== */

/* Am PC neutral */
.paper-layers { display: none; }
.paper-scroll { display: contents; }

/* ---------- 1) Obere Leiste: gilt für ALLE Breiten (Handy hoch und quer, Tablet, PC) ---------- */
.topbar {
  position: fixed !important;
  overflow: hidden;
  background: #06070d !important;
  border-bottom: 1px solid rgba(230, 182, 85, .38) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .55);
}
.topbar > .hdr-art { display: block !important; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hdr-art i {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 45%;
  opacity: 0; transition: opacity 1s ease;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.28) 100%);
          mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.45) 72%, rgba(0,0,0,.28) 100%);
}
.hdr-art i.on { opacity: 1; }
.hdr-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,7,13,0) 0%, rgba(6,7,13,.30) 50%, rgba(6,7,13,.62) 100%),
    linear-gradient(180deg, rgba(6,7,13,.05) 0%, rgba(6,7,13,.45) 100%);
}
.topbar > :not(.hdr-art) { position: relative; z-index: 1; }
.topbar .brand span { text-shadow: 0 1px 8px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }

/* Links in der Leiste (PC und Querformat) lesbar auf dem Bild */
.topbar .topnav a { text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9); }
.topbar .topnav a:hover { color: #f3d596; }

@media (max-width: 768px) {

  .topbar .btn-mobile-lang {
    background: rgba(6, 7, 13, .5) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-color: rgba(230, 182, 85, .55) !important;
  }
  .btn-mobile-burger {
    background: rgba(6, 7, 13, .5) !important;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(230, 182, 85, .55) !important;
    border-radius: 50% !important;
    width: 42px !important; height: 42px !important;
  }
  .btn-mobile-burger > span { display: none !important; }
  .btn-mobile-burger .burger-seal {
    width: 24px; height: 24px; fill: #f3d596;
    filter: drop-shadow(0 0 6px rgba(230,182,85,.55));
    transition: transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .btn-mobile-burger.active .burger-seal { transform: rotate(90deg) scale(1.08); }

  /* ---------- Papier-Blätter (Menü und Einstellungen) ---------- */
  .paper-layers { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .paper-under, .paper-shadow, .paper-top { position: absolute; }
  .paper-under {
    inset: 0;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.35), transparent 60%),
      repeating-linear-gradient(8deg, rgba(120,95,55,.07) 0 2px, transparent 2px 7px),
      linear-gradient(135deg, #efe3c9, #d6c5a0);
  }
  .paper-shadow { inset: 0; }                       /* trägt den Schatten des Bildblatts auf das Beige */
  .paper-top {
    inset: 0;
    background:
      linear-gradient(180deg, rgba(6,7,13,.30) 0%, rgba(6,7,13,.16) 38%, rgba(6,7,13,.45) 100%),
      var(--drw-img, none) center / cover no-repeat,
      #0a0d18;
  }
  .paper-scroll { display: block; position: relative; z-index: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  /* ---------- 2) Seitenmenü ---------- */
  .mobile-drawer {
    width: min(92vw, 392px) !important;
    border-left: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
    transition: transform .42s cubic-bezier(.16, 1, .3, 1) !important;
  }
  .mobile-drawer .paper-shadow { filter: drop-shadow(-4px 1px 6px rgba(0,0,0,.6)); }
  .mobile-drawer .paper-top { left: 16px; }
  .mobile-drawer .paper-scroll {
    height: 100%; display: flex; flex-direction: column;
    padding: 1.1rem 1rem 1.6rem calc(16px + 1.5rem);
  }
  .mobile-drawer-head { border-bottom: 1px solid rgba(243, 213, 150, .55) !important; }
  .mobile-drawer-logo { text-shadow: 0 1px 10px rgba(0,0,0,1), 0 0 3px rgba(0,0,0,.9); color: #f3d596 !important; }
  .mobile-drawer-nav { gap: .8rem !important; }

  /* freischwebende Knöpfe: nur sie sind verschwommen und abgedunkelt */
  .mobile-drawer-link,
  .mobile-drawer-close,
  .mobile-drawer .btn-mobile-lang {
    background: rgba(5, 7, 14, .52) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(243, 213, 150, .38) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.45);
    color: #f6f1e4 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.8);
  }
  .mobile-drawer-link {
    border-radius: 14px !important;
    width: fit-content !important; max-width: 100%;       /* Knöpfe nur so breit wie ihr Text, nicht über die ganze Breite */
    padding: 10px 20px 10px 14px !important;
    min-height: 44px !important;
    align-self: flex-start;
  }
  .mobile-drawer-link:active, .mobile-drawer-link:hover {
    background: rgba(40, 30, 10, .55) !important;
    border-color: rgba(243, 213, 150, .9) !important;
  }
  .mobile-drawer-link.btn-gold-drawer {
    background: linear-gradient(135deg, rgba(243,213,150,.9), rgba(201,149,58,.85)) !important;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #1a1205 !important; text-shadow: none;
    border-color: rgba(255, 236, 190, .95) !important;
  }
  .mobile-drawer-backdrop { background: rgba(2, 3, 8, .66) !important; }

  /* ---------- 3) Einstellungen ---------- */
  .settings-modal { align-items: flex-end !important; padding: 0 !important; }
  .settings-panel {
    position: relative;
    width: 100% !important;
    max-height: 90vh; max-height: 90dvh;
    display: flex; flex-direction: column;
    overflow: hidden !important;
    border: 0 !important; border-radius: 0 !important; padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    animation: caligoSheetUp .42s cubic-bezier(.16, 1, .3, 1);
  }
  .settings-panel .paper-shadow { filter: drop-shadow(0 -4px 6px rgba(0,0,0,.6)); }
  .settings-panel .paper-top {
    top: 16px;
    background:
      linear-gradient(180deg, rgba(6,7,13,.50) 0%, rgba(6,7,13,.42) 50%, rgba(6,7,13,.64) 100%),
      var(--drw-img, none) center / cover no-repeat, #0a0d18;
  }
  .settings-panel .paper-scroll {
    flex: 1 1 auto; min-height: 0;
    padding: 2.4rem 1rem calc(1.4rem + env(safe-area-inset-bottom));
  }
  .settings-head { border-bottom-color: rgba(243,213,150,.5) !important; }
  .settings-panel h3, .settings-label-title, .settings-desc, .settings-panel p, .settings-panel label {
    text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
  }
  .settings-section { margin-bottom: 1.4rem; }
  .settings-panel .settings-toggle-row,
  .settings-panel .theme-opt-btn,
  .settings-panel .lang-opt-btn,
  .settings-panel .settings-close {
    background: rgba(5, 7, 14, .52) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(243, 213, 150, .34) !important;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
    margin-bottom: .6rem;
  }
  .settings-panel .settings-toggle-row { padding: .8rem 1rem !important; }
  .settings-panel .settings-close { border-radius: 50%; margin: 0; }
  .settings-panel .theme-opt-btn.active { border-color: rgba(243,213,150,.9) !important; background: rgba(60,45,12,.55) !important; }
  .settings-backdrop { background: rgba(2,3,8,.66) !important; }

  /* Radio-Knopf: läuft Musik, bleibt er gut sichtbar (damit man sie jederzeit ausschalten kann) */
  .floating-quick-dock .ambient-music-btn.is-playing { opacity: 1 !important; box-shadow: 0 0 0 3px rgba(243,213,150,.55), 0 0 18px rgba(243,213,150,.6); }
}
@keyframes caligoSheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ==========================================================================
   Einstellungen am PC: dasselbe Papier-Design als Seitenblatt von rechts (gerissene Kante links)
   ========================================================================== */
@media (min-width: 769px) {
  /* Kante wechselt von "oben" (Handy) zu "links" (PC) */
  .settings-panel .paper-under.edge-switch, .settings-panel .paper-top.edge-switch { clip-path: var(--clip-left) !important; }

  .settings-modal { justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; }
  .settings-panel {
    position: relative;
    width: min(560px, 92vw) !important;
    max-width: none !important;
    height: 100vh; height: 100dvh;
    max-height: none !important;
    display: flex; flex-direction: column;
    overflow: hidden !important;
    border: 0 !important; border-radius: 0 !important; padding: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    animation: caligoSheetIn .45s cubic-bezier(.16, 1, .3, 1);
  }
  .settings-panel .paper-layers { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .settings-panel .paper-under, .settings-panel .paper-shadow, .settings-panel .paper-top { position: absolute; }
  .settings-panel .paper-under {
    inset: 0;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.35), transparent 60%),
      repeating-linear-gradient(8deg, rgba(120,95,55,.07) 0 2px, transparent 2px 7px),
      linear-gradient(135deg, #efe3c9, #d6c5a0);
  }
  .settings-panel .paper-shadow { inset: 0; filter: drop-shadow(-4px 1px 7px rgba(0,0,0,.6)); }
  .settings-panel .paper-top {
    inset: 0; left: 18px; top: 0;
    background:
      linear-gradient(180deg, rgba(6,7,13,.50) 0%, rgba(6,7,13,.42) 50%, rgba(6,7,13,.64) 100%),
      var(--drw-img, none) center / cover no-repeat, #0a0d18;
  }
  .settings-panel .paper-scroll {
    display: block; position: relative; z-index: 1;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 2.2rem 1.8rem 2rem calc(18px + 2rem);
  }
  .settings-head { border-bottom-color: rgba(243,213,150,.5) !important; }
  .settings-panel h3, .settings-label-title, .settings-desc, .settings-panel p, .settings-panel label {
    text-shadow: 0 1px 6px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.9);
  }
  .settings-panel .settings-toggle-row,
  .settings-panel .theme-opt-btn,
  .settings-panel .lang-opt-btn,
  .settings-panel .settings-close {
    background: rgba(5, 7, 14, .52) !important;
    -webkit-backdrop-filter: blur(10px) saturate(1.15); backdrop-filter: blur(10px) saturate(1.15);
    border: 1px solid rgba(243, 213, 150, .34) !important;
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(0,0,0,.4);
    margin-bottom: .6rem;
  }
  .settings-panel .settings-toggle-row { padding: .8rem 1rem !important; }
  .settings-panel .settings-close { border-radius: 50%; margin: 0; }
  .settings-panel .theme-opt-btn.active { border-color: rgba(243,213,150,.9) !important; background: rgba(60,45,12,.55) !important; }
  .settings-backdrop { background: rgba(2,3,8,.62) !important; }
}
@keyframes caligoSheetIn { from { transform: translateX(46px); opacity: 0; } to { transform: none; opacity: 1; } }