/* Mobile Drawer – Pretty UI (addon)
   Loaded after app.mobile.css to avoid breaking existing logic.
*/
@media (max-width: 900px){

  /* Enforce hidden attribute to REALLY hide overlays */
  [hidden] { display: none !important; }

  #mobileDrawerBackdrop.drawer-backdrop{
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
  }
  body.drawer-open #mobileDrawerBackdrop.drawer-backdrop{
    opacity: 1;
    pointer-events: auto;
  }

  /* Drawer panel */
  #mobileDrawer.drawer{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2100;
    width: min(86vw, 360px);
    padding: 18px 16px 18px;
    background:
      linear-gradient(180deg, rgba(28,52,73,.92) 0%, rgba(12,18,30,.92) 55%, rgba(10,14,22,.92) 100%);
    border-right: 1px solid rgba(255,255,255,.12);
    box-shadow: 24px 0 80px rgba(0,0,0,.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transform: translateX(-110%);
    transition: transform .22s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
  }
  body.drawer-open #mobileDrawer.drawer{ transform: translateX(0); }

  /* Header inside drawer */
  #mobileDrawer .drawer-head{
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 6px 0 12px;
    margin: -6px 0 14px;
    background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #mobileDrawer .drawer-title{
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px;
  }
  #mobileMenuClose{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Meta row (Max Pferde + Theme) */
  #mobileDrawer .drawer-meta{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
  }
  #mobileDrawer .drawer-meta .pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
    border-radius: 16px;
    font-weight: 700;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
  }
  #themeBtnMobile.btn{
    padding: 12px 10px;
    border-radius: 16px;
    width: 100%;
  }

  /* Links */
  #mobileDrawer .drawer-links{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
  }
  #mobileDrawer .drawer-links .drawer-link{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 14px;
    border-radius: 18px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 750;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
  #mobileDrawer .drawer-links .drawer-link::after{
    content: "›";
    font-size: 22px;
    line-height: 1;
    opacity: .55;
    margin-left: auto;
  }
  #mobileDrawer .drawer-links .drawer-link:active{
    transform: translateY(1px);
    background: rgba(255,255,255,.09);
    border-color: rgba(255,255,255,.16);
  }

  /* Optional: add small separator space if you later add more sections */
  #mobileDrawer .drawer-links + .drawer-links{ margin-top: 16px; }
}