/* ──────────────────────────────────────────────────────────────
   Gemeinsames Burger-Menü (Drawer oben rechts, Slide-in von oben)
   Wird per burger-menu.js auf allen User-Seiten injiziert.
   Idempotent gegenüber icons.css / redesign.css.
   ────────────────────────────────────────────────────────────── */

/* Base .ic (no-op wenn icons.css schon geladen) */
.ic { display: inline-block; background-color: currentColor;
      width: 1em; height: 1em; vertical-align: -.18em; flex-shrink: 0;
      -webkit-mask-size: contain; mask-size: contain;
      -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
      -webkit-mask-position: center; mask-position: center; }

/* Drawer-Icons (idempotent, damit historie.html ohne icons.css funktioniert) */
.ic-menu    { -webkit-mask-image: url(Icons/menu.svg);    mask-image: url(Icons/menu.svg); }
.ic-home    { -webkit-mask-image: url(Icons/home.svg);    mask-image: url(Icons/home.svg); }
.ic-rocket  { -webkit-mask-image: url(Icons/rocket.svg);  mask-image: url(Icons/rocket.svg); }
.ic-qr      { -webkit-mask-image: url(Icons/qr.svg);      mask-image: url(Icons/qr.svg); }
.ic-user    { -webkit-mask-image: url(Icons/person.svg);  mask-image: url(Icons/person.svg); }
.ic-players { -webkit-mask-image: url(Icons/players.svg); mask-image: url(Icons/players.svg); }
.ic-trophy  { -webkit-mask-image: url(Icons/trophy.svg);  mask-image: url(Icons/trophy.svg); }
.ic-ticket  { -webkit-mask-image: url(Icons/ticket.svg);  mask-image: url(Icons/ticket.svg); }
.ic-tools   { -webkit-mask-image: url(Assets/settings.svg); mask-image: url(Assets/settings.svg); }
.ic-logout  { -webkit-mask-image: url(Assets/logout.svg); mask-image: url(Assets/logout.svg); }

/* Auth-only-Klassen (idempotent für Seiten ohne redesign.css, z.B. historie) */
html.auth-user  .auth-only-guest,
html.auth-guest .auth-only-user { display: none !important; }

/* Header-Button */
header .menu-btn,
header button.menu-btn {
  padding: 6px 9px; border-radius: 10px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2);
  color: #fff; cursor: pointer; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
header .menu-btn .ic { width: 18px; height: 18px; }

/* Drawer */
#menuDrawer {
  position: fixed;
  top: calc(58px + env(safe-area-inset-top, 0px));
  right: 12px;
  z-index: 60;
  width: min(360px, calc(100vw - 24px));
  background: #FFFFFF;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(17,20,45,.25);
  padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  transform-origin: top right;
  opacity: 0; transform: scale(.95) translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
#menuDrawer.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; }

#menuDrawer .mn-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  color: #11142D; text-decoration: none;
  transition: background .12s;
  background: transparent; border: none; width: 100%;
  font-family: inherit; font-size: inherit; text-align: left; cursor: pointer;
}
#menuDrawer .mn-item[hidden] { display: none; }
#menuDrawer .mn-item:hover,
#menuDrawer .mn-item:focus-visible {
  background: #EEEEF8; outline: none;
}
#menuDrawer .mn-item .qa-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: #EEEEF8; color: #11142D;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#menuDrawer .mn-item .qa-icon .ic { width: 18px; height: 18px; }
#menuDrawer .mn-item .t { font-weight: 700; font-size: 14px; color: #0F172A; }
#menuDrawer .mn-item .d { font-size: 12px; color: #64748B; margin-top: 2px; }

/* Logout-Item dezent abgesetzt */
#menuDrawer .mn-divider {
  height: 1px; background: #DDE1F0; margin: 4px 8px;
}
#menuDrawer #mnLogout .qa-icon { background: #FEE2E2; color: #DC2626; }
#menuDrawer #mnLogout .t { color: #DC2626; }

#menuBackdrop {
  position: fixed; inset: 0;
  background: rgba(10,10,30,.15);
  z-index: 55;
  opacity: 0; transition: opacity .15s ease;
  pointer-events: none;
}
#menuBackdrop.open { opacity: 1; pointer-events: auto; }