/*
 * gr-menu — shared hamburger menu for gamingrooms.net.
 * Bottom sheet on mobile, dropdown on desktop. Chunky 3D button
 * language so it sits naturally next to game UIs that use the same.
 *
 * Theme integration: every surface uses CSS vars with fallbacks, so
 * the menu inherits whatever palette the host page defines. The host
 * is expected to provide --gm-* variables (see fallbacks below) or
 * use the legacy --bg / --card / --text / --border / --accent vars
 * the rest of the site uses — both work.
 */

/* ---- CSS variables (fallback chain so this works in any theme) ---- */
:root {
  --gm-bg:        var(--card, var(--bg, #1a1a1c));
  --gm-bg-deep:   var(--bg-soft, var(--bg, #111));
  --gm-text:      var(--text, #fff);
  --gm-text-dim:  var(--text-dim, var(--text-muted, #aaa));
  --gm-border:    var(--card-border, var(--border, rgba(255,255,255,0.1)));
  --gm-shadow:    var(--card-shadow, rgba(0,0,0,0.3));
  --gm-accent:    var(--accent, var(--highlight, #ff7a1a));
  --gm-accent-2:  var(--accent-2, var(--highlight-bright, #ffa040));
  --gm-danger:    var(--danger, var(--wrong, #c91a0c));
}

/* ---- Menu trigger button ---- */
.gr-menu-btn {
  width: 44px; height: 44px;
  background: var(--gm-bg);
  border: 2px solid var(--gm-border);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--gm-text);
  box-shadow: 0 3px 0 var(--gm-shadow), 0 5px 10px rgba(0,0,0,0.12);
  transition: transform 0.12s, box-shadow 0.12s, background-color 0.4s, border-color 0.4s;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.gr-menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--gm-shadow); }
.gr-menu-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Backdrop ---- */
/* Almost invisible — just a click-trap so the menu closes when you tap
   outside it. We don't dim the page since the dropdown is small and
   non-blocking. */
.gr-menu-backdrop {
  position: fixed; inset: 0;
  background: transparent;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.gr-menu-backdrop.open { opacity: 1; pointer-events: auto; }

/* ---- Dropdown panel anchored to the trigger button ---- */
/* Always a compact dropdown, mobile and desktop. Anchors to the same
   edge as the menu trigger button: top-end-LTR (right) by default,
   top-end-RTL (left) when the page is RTL. The host page's #gr-menu-slot
   handles the trigger position; the panel just mirrors it via fixed
   coordinates. */
.gr-menu-sheet {
  position: fixed;
  z-index: 9999;
  background: var(--gm-bg);
  border: 2px solid var(--gm-border);
  box-shadow: 0 4px 0 var(--gm-shadow), 0 8px 24px rgba(0,0,0,0.18);
  display: flex; flex-direction: column;
  font-family: inherit;
  color: var(--gm-text);
  top: calc(64px + env(safe-area-inset-top, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
  width: 280px; max-width: calc(100vw - 28px);
  /* overflow:visible so the language popup can extend past the bottom
     of the sheet (otherwise the last language gets cut off). The menu
     itself is short enough to fit in viewport on every supported
     phone, so we don't need to scroll inside it. */
  overflow: visible;
  border-radius: 16px;
  padding: 10px;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.gr-menu-sheet.open {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

/* RTL: trigger sits top-left, so the dropdown anchors there too. */
body[dir="rtl"] .gr-menu-sheet,
body.rtl .gr-menu-sheet {
  right: auto;
  left: calc(14px + env(safe-area-inset-left, 0px));
  transform-origin: top left;
}

/* Grip handle is bottom-sheet vestigial — hidden globally now. */
.gr-menu-grip { display: none; }

/* ---- Header (avatar + name) ---- */
.gr-menu-header {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 6px 14px;
  border-bottom: 1px solid var(--gm-border);
  margin-bottom: 8px;
}
.gr-menu-header img {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gm-bg-deep); object-fit: cover;
  flex-shrink: 0;
}
.gr-menu-header .gm-h-name {
  font-weight: 800; font-size: 15px; color: var(--gm-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gr-menu-header .gm-h-sub {
  font-size: 12px; color: var(--gm-text-dim);
}
.gr-menu-header .gm-h-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.gr-menu-header.signed-in { cursor: pointer; border-radius: 12px; transition: background 0.15s; padding-left: 10px; padding-right: 10px; margin-left: -4px; margin-right: -4px; }
.gr-menu-header.signed-in:hover { background: var(--gm-bg-deep); }

/* ---- Items ---- */
.gr-menu-list { display: flex; flex-direction: column; gap: 4px; }

.gr-menu-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--gm-text);
  cursor: pointer; text-align: start;
  text-decoration: none;
  width: 100%;
  transition: background 0.12s, border-color 0.12s;
}
.gr-menu-item:hover { background: var(--gm-bg-deep); }
.gr-menu-item:active { background: var(--gm-bg-deep); border-color: var(--gm-border); }
.gr-menu-item .gm-icon {
  width: 22px; height: 22px;
  flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  color: var(--gm-accent);
}
.gr-menu-item .gm-label { flex: 1; }
.gr-menu-item .gm-value {
  font-size: 13px; font-weight: 700; color: var(--gm-text-dim);
  background: var(--gm-bg-deep); border: 1px solid var(--gm-border);
  padding: 4px 10px; border-radius: 999px;
}

/* Toggle row (theme, sound) — value pill flips colour when "on/active". */
.gr-menu-item.toggle .gm-value.on  { color: var(--gm-text); border-color: var(--gm-accent); }
.gr-menu-item.toggle .gm-value.off { opacity: 0.7; }

/* Language picker now uses the shared .lang-dropdown component
   (lang-picker.js). The old in-flow .gr-menu-langs row of pills was
   removed in favour of a popup dropdown that opens from the chip. */
.gr-menu-item.language { padding-block: 8px; }
.gr-menu-item.language .lang-dropdown { margin-inline-start: auto; }
.gr-menu-item.language .lang-dropdown-toggle {
  font-size: 13px; padding: 6px 10px;
}
/* The chip is on the inline-end side of the row, so the popup grows
   toward the sheet's interior (inline-start). Tighten min-width so it
   doesn't push past the sheet edge if the trigger sits close to it. */
.gr-menu-item.language .lang-dropdown-menu {
  min-width: 120px;
  max-width: 180px;
}

/* Divider between groups. */
.gr-menu-divider {
  height: 1px; background: var(--gm-border);
  margin: 6px 0;
}

/* Exit row — softer red accent so it reads as a leave action. */
.gr-menu-item.exit .gm-icon { color: var(--gm-danger); }

/* ---- How-to-play modal (separate from sheet — reused dialog). ---- */
.gr-howto-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.gr-howto-overlay.open { display: flex; }
.gr-howto-card {
  background: var(--gm-bg); color: var(--gm-text);
  border: 2px solid var(--gm-border);
  border-radius: 18px;
  max-width: 460px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  padding: 18px 20px 22px;
  box-shadow: 0 4px 0 var(--gm-shadow), 0 12px 40px rgba(0,0,0,0.4);
}
.gr-howto-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.gr-howto-head h3 { font-size: 18px; font-weight: 800; margin: 0; }
.gr-howto-close {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--gm-bg-deep); border: 1px solid var(--gm-border);
  color: var(--gm-text); font-family: inherit; font-size: 22px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.gr-howto-body { font-size: 14px; line-height: 1.6; color: var(--gm-text-dim); }
.gr-howto-body p { margin: 0 0 10px; }
.gr-howto-body strong { color: var(--gm-text); }

/* RTL flips the exit-icon shadow + adjusts panel anchoring. */
body[dir="rtl"] .gr-menu-item .gm-icon,
body.rtl .gr-menu-item .gm-icon { /* keep stroke direction; SVGs are symmetrical */ }