/* ══ MENU BAR ══ */
  .menubar {
    position:sticky; top:0; z-index:100;
    background:var(--bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
    transition: background 0.3s, border-color 0.3s;
    /* Use env() directly — some iOS Safari versions don't evaluate env() correctly when wrapped via var() */
    padding-top: env(safe-area-inset-top, 0px);
  }
  /* Inner toolbar — guaranteed comfortable height regardless of safe area */
  .menubar-inner {
    display:flex; align-items:center; gap:0;
    height: 56px;
    padding: 0 8px;
    border-bottom: 1px solid var(--border-bright);
    position: relative;
  }
  .menubar-inner::after {
    content:''; position:absolute; bottom:0; left:0; right:0; height:1px; pointer-events:none;
    background:linear-gradient(90deg,transparent,var(--gold),transparent); opacity:0.6;
  }
  [data-theme="dark"] .menubar { background: rgba(13,13,15,0.92); }
  [data-theme="light"] .menubar { background: rgba(248,244,234,0.92); }
  [data-theme="contrast"] .menubar { background: rgba(0,0,0,0.96); }
  .menu-brand { font-family:'Cinzel',serif; font-size:0.78rem; font-weight:700; color:var(--gold);
    letter-spacing:0.12em; padding: 0 12px; flex-shrink: 0; }
  .menu-spacer { flex:1; }

  /* Hamburger button */
  .hamburger {
    background:transparent; border:none; cursor:pointer;
    width:48px; height:48px; padding:0; margin-left:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    transition:opacity 0.2s; flex-shrink:0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .hamburger span {
    display:block; width:24px; height:2.5px; background:var(--text);
    border-radius:2px; transition:all 0.3s;
  }
  .hamburger:hover span { background:var(--gold); }
  .hamburger.active span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); background:var(--gold); }
  .hamburger.active span:nth-child(2) { opacity:0; }
  .hamburger.active span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); background:var(--gold); }

  /* Drawer */
  .drawer-backdrop {
    position:fixed; inset:0; z-index:300;
    background:rgba(0,0,0,0.55);
    opacity:0; pointer-events:none; transition:opacity 0.3s;
  }
  [data-theme="light"] .drawer-backdrop { background:rgba(20,15,5,0.4); }
  [data-theme="contrast"] .drawer-backdrop { background:rgba(0,0,0,0.85); }
  .drawer-backdrop.open { opacity:1; pointer-events:auto; }

  .drawer {
    position:fixed; top:0; left:0; bottom:0;
    width:300px; max-width:84vw; z-index:310;
    background:var(--surface); border-right:1px solid var(--border-bright);
    display:flex; flex-direction:column;
    transform:translateX(-100%); transition:transform 0.3s ease;
    padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
    box-shadow:6px 0 32px rgba(0,0,0,0.5);
  }
  [data-theme="contrast"] .drawer { box-shadow:6px 0 32px rgba(255,255,255,0.15); }
  .drawer.open { transform:translateX(0); }

  .drawer-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px 12px; border-bottom:1px solid var(--border);
  }
  .drawer-title {
    font-family:'Cinzel',serif; font-size:0.85rem; font-weight:700;
    color:var(--gold); letter-spacing:0.18em; text-transform:uppercase;
  }
  .drawer-close {
    background:transparent; border:none; color:var(--text-muted);
    font-size:24px; line-height:1; cursor:pointer; padding:0 8px;
    width:32px; height:32px; border-radius:4px; transition:all 0.15s;
  }
  .drawer-close:hover { color:var(--text); background:var(--surface2); }

  .drawer-nav { padding:8px 0; overflow-y:auto; flex:1; }
  .drawer-item {
    width:100%; display:flex; align-items:center; gap:14px;
    padding:13px 22px; font-size:0.92rem; color:var(--text);
    background:transparent; border:none; cursor:pointer; text-align:left;
    font-family:'Rajdhani',sans-serif; letter-spacing:0.04em; font-weight:500;
    transition:all 0.15s; position:relative;
  }
  .drawer-item:hover { background:var(--surface2); }
  .drawer-item.current {
    color:var(--gold); font-weight:600;
    background:linear-gradient(90deg, rgba(224,188,92,0.12), transparent);
  }
  .drawer-item.current::before {
    content:''; position:absolute; left:0; top:6px; bottom:6px; width:3px;
    background:var(--gold); border-radius:0 2px 2px 0;
  }
  .drawer-item .di-icon { font-size:18px; width:24px; text-align:center; flex-shrink:0; }
  .drawer-item .di-label { flex:1; }
  .drawer-item.danger:hover { color:var(--red-light); background:rgba(212,63,46,0.08); }
  .drawer-item.support .di-icon { color:var(--gold); }
  .drawer-item.support:hover { color:var(--gold); }
  .drawer-sep { border:none; border-top:1px solid var(--border); margin:6px 14px; }

  .theme-toggle {
    background: transparent; border: 1px solid var(--border-bright); border-radius: 4px;
    padding: 0 12px; min-height:36px; cursor: pointer; font-family: inherit;
    color: var(--text); font-size: 0.82rem; letter-spacing: 0.05em; font-weight:500;
    display: flex; align-items: center; gap: 8px;
    margin-right: 6px; transition: all 0.2s; flex-shrink: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
  }
  .theme-toggle:hover { color: var(--gold); border-color: var(--gold); }
  .theme-toggle .icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; flex-shrink:0;
  }
  .theme-toggle .icon svg { width:18px; height:18px; display:block; }

  .view { display:none; }
  .view.active { display:block; }

  .app { position:relative; z-index:1; max-width:980px; margin:0 auto; padding:1.5rem 1rem; }

  .ornament { text-align:center; color:var(--text-dim); font-size:0.78rem; letter-spacing:0.3em; margin:0.6rem 0; }