/* One top-right menu keeps optional controls in order as the visitor joins a lantay. */
:root {
  --tc-size: 44px;
  --tc-step: 54px;
  --tc-edge: 22px;
  --tc-top: max(22px, env(safe-area-inset-top));
  --tc-left: calc(var(--tc-edge) + env(safe-area-inset-left));
  --tc-right: calc(var(--tc-edge) + env(safe-area-inset-right));
}
@media (max-width: 600px) {
  :root { --tc-size: 40px; --tc-step: 46px; --tc-edge: 12px; --tc-top: max(12px, env(safe-area-inset-top)); }
}

:root #scene-menu {
  position: fixed;
  z-index: 20;
  top: var(--tc-top);
  right: var(--tc-right);
  width: var(--tc-size);
  height: var(--tc-size);
}
:root #scene-menu-toggle {
  position: relative;
  inset: auto;
  width: var(--tc-size);
  height: var(--tc-size);
  display: grid;
  place-items: center;
  padding: 0;
  opacity: 1;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--glass-ink);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
}
#scene-menu-toggle svg,
#scene-menu-panel .scene-menu-row svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
:root #scene-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  max-height: min(74dvh, 690px);
  overflow-y: auto;
  padding: 12px;
  border: 1px solid var(--paper-line, #34423933);
  border-radius: 22px;
  background: var(--paper, #f5f2e9);
  color: var(--paper-ink, #344239);
  box-shadow: var(--paper-shadow, 0 22px 44px -20px #172e3e66);
  font: 15px/1.35 'Alegreya Sans', system-ui, sans-serif;
  scrollbar-width: none;
}
#scene-menu-panel::-webkit-scrollbar { display: none; }
:root #scene-menu-panel[hidden],
:root #scene-menu-panel [hidden] { display: none !important; }
#scene-menu-panel .scene-menu-section + .scene-menu-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--paper-line, #34423933);
}
#scene-menu-panel .scene-menu-section h2 {
  margin: 0 8px 4px;
  color: var(--paper-ink, #344239);
  font: 700 13px/1.3 'Alegreya Sans', system-ui, sans-serif !important;
}
#scene-menu-panel .scene-menu-help {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  opacity: 1;
  backdrop-filter: none;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
#scene-menu-panel .scene-menu-help:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#scene-menu-panel .scene-menu-row {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 4px 8px;
  border-radius: 12px;
  cursor: pointer;
}
#scene-menu-panel .scene-menu-row:hover,
#scene-menu-panel .scene-menu-row:focus-within { background: var(--paper-field, #fffcf5); }
#scene-menu-panel .scene-menu-row > span { flex: 1; min-width: 0; }
.scene-menu-badge { display:inline-grid; place-items:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--accent,#465d48); color:var(--paper,#f5f2e9); font:700 10px/1 'Alegreya Sans',system-ui,sans-serif; }
:root #scene-menu-panel .scene-menu-row > :is(button, a) {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: none;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  opacity: 1;
  border: 1px solid var(--glass-line);
  border-radius: 50%;
  background: var(--glass);
  color: var(--glass-ink);
  backdrop-filter: none;
  text-decoration: none;
  cursor: pointer;
}
:root #scene-menu-panel .scene-menu-row > :is(button, a):focus-visible,
:root #scene-menu-toggle:focus-visible { outline: 2px solid var(--paper-ink, #344239); outline-offset: 2px; }
:root #scene-menu-panel #menu-logout { color: #9b3e35; border-color: #b5584f80; }
:root #scene-menu-panel #menu-logout:hover, :root #scene-menu-panel #menu-logout:focus-visible { background: #9b3e35; color: #fff; }
/* Sign out is a text action, not a circular icon control. Keep the row targetable. */
:root #scene-menu-panel .scene-menu-row:has(#menu-logout) > span { display: none; }
:root #scene-menu-panel .scene-menu-row > #menu-logout {
  width: auto !important;
  min-width: 0;
  height: auto !important;
  padding: 8px 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #b34b43;
  font: 600 16px/1.2 'Alegreya Sans', system-ui, sans-serif;
}
:root #scene-menu-panel .scene-menu-row > #menu-logout:hover,
:root #scene-menu-panel .scene-menu-row > #menu-logout:focus-visible { background: #b34b43; color: #fff; }
:root #chat-toggle {
  position: fixed;
  top: var(--tc-top);
  right: calc(var(--tc-right) + (var(--tc-size) * 2) + 24px);
  z-index: 20;
  width: var(--tc-size);
  height: var(--tc-size);
}
:root #notifications-toggle {
  position: fixed;
  top: var(--tc-top);
  right: calc(var(--tc-right) + var(--tc-size) + 12px);
  z-index: 20;
  width: var(--tc-size);
  height: var(--tc-size);
}
/* Guests have no notifications bell, so chat sits next to the menu. */
:root[data-account="guest"] #chat-toggle { right: calc(var(--tc-right) + var(--tc-size) + 12px); }
:root #scene-menu-panel .scene-menu-row > :is(button, a)[aria-pressed="true"] {
  background: #465d48;
  color: #f5f2e9;
}
:root.controls-hidden #scene-menu-panel .scene-menu-row:not(:has(#ui-visibility-toggle)),
:root.controls-hidden #scene-menu-panel .scene-menu-section:not(:has(#ui-visibility-toggle)) { display: none !important; }
:root.controls-hidden :is(#seat-actions, #current, #report-button, #moderation-button, #chat-toggle, #notifications-toggle) { visibility: hidden !important; pointer-events: none !important; }
:root.controls-hidden #scene-menu-panel #ui-visibility-toggle { visibility: visible !important; pointer-events: auto !important; }
html:has(#drawer.open) #scene-menu,
html:has(#store-panel:not([hidden])) #scene-menu { visibility: hidden; }

/* The seat action remains in the scene below the menu, so a visitor can join without opening controls. */
:root #seat-actions {
  top: calc(var(--tc-top) + var(--tc-size) + 12px);
  right: var(--tc-right);
  left: auto;
  bottom: auto;
}

:root #seat-actions #back-to-lantay{display:none}
:root.at-store #seat-actions #back-to-lantay{position:static;inset:auto;transform:none;opacity:1;order:3;display:block;width:100%;height:38px;min-height:38px;padding:0 14px;border:1px solid var(--paper-line);border-radius:24px;background:var(--paper);color:var(--paper-ink);font:inherit;cursor:pointer}