/* GeeGii universal side drawer — ONE menu for every page and every game.
   See docs/side-drawer.md before changing anything here.

   Self-contained on purpose: it has to sit on top of a fullscreen WebGL canvas
   (Guild Delve) exactly as happily as on an ordinary DOM page, so it depends on
   no page stylesheet and every selector is gg-* so it can't collide with a
   game's CSS.

   drawer.js injects this file itself when the page hasn't linked it, so a game
   needs one import and nothing else.

   Layering — deliberately in the 490s, NOT at 2^31. A game's own modals
   (settings, invite, results) must be able to sit ABOVE the drawer, and they
   can't if it claims the top of the stack:
     498  backdrop
     500  drawer (panel + tab)
     501  the iOS "Add to Home Screen" hint  */

.gg-dr-bd {
  position: fixed; inset: 0; z-index: 498; background: rgb(0 0 0 / .3);
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.gg-dr-bd.open { opacity: 1; pointer-events: auto; }

/* The whole thing — panel + the tab handle that hangs off its right edge — slides
   as one unit, so the tab is the only part on screen when it's closed.
   --gg-ui-top is measured by drawer.js from the visual viewport: on iOS in-app
   browsers the web view sits UNDER the browser toolbar and env(safe-area-inset-top)
   does not know about it. It's 0 when nothing overlaps. */
.gg-drawer {
  --w: 252px;
  position: fixed; z-index: 500; display: flex; align-items: flex-start;
  top: calc(var(--gg-ui-top, 0px) + env(safe-area-inset-top, 0px) + 12px); left: 0;
  transform: translateX(calc(-1 * var(--w)));
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* This wrapper is as TALL as the open panel (~500px) and, when closed, still
     covers the strip beside the handle. Left clickable it silently swallowed taps
     on the game canvas below the handle — Guild Delve's "←" is at x36,y90. It is
     layout, not a surface: only the panel and the handle take input. */
  pointer-events: none;
}
.gg-drawer[hidden] { display: none; }
.gg-drawer.open { transform: translateX(0); }

.gg-dr-panel {
  pointer-events: auto;
  width: var(--w); box-sizing: border-box; display: flex; flex-direction: column; gap: 3px;
  padding: 7px; border-radius: 0 15px 15px 0;
  border: 1px solid rgb(255 255 255 / .12); border-left: none;
  background: rgb(14 14 17 / .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 20px 48px rgb(0 0 0 / .5);
  /* an account + wallet + full nav drawer can outgrow a short screen */
  max-height: calc(100dvh - var(--gg-ui-top, 0px) - env(safe-area-inset-top, 0px)
                   - env(safe-area-inset-bottom, 0px) - 24px);
  overflow: hidden auto; overscroll-behavior: contain;
}

/* Author `display` beats the UA's [hidden]{display:none}, so every block that sets
   one has to opt back in explicitly. Miss it and the element is "hidden" in the DOM
   and fully visible on screen — which is exactly how a signed-out player was shown a
   D Coin balance. See docs/visual-qa.md; this is that bug, again. */
.gg-dr-me[hidden], .gg-dr-coin[hidden] { display: none; }

/* ── who you are ───────────────────────────────────────────────────────────── */
.gg-dr-me { display: flex; align-items: center; gap: 10px; padding: 9px 10px 11px; min-width: 0; }
.gg-dr-av {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: #16161b; border: 1px solid rgb(255 255 255 / .12); image-rendering: pixelated;
}
.gg-dr-who { display: grid; gap: 2px; min-width: 0; }
.gg-dr-who strong {
  font-size: 14px; font-weight: 700; color: #f2ede3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gg-dr-who span { font-size: 11px; color: #857f76; }

/* ── D Coin ────────────────────────────────────────────────────────────────── */
.gg-dr-coin {
  margin: 1px 3px 5px; padding: 9px 10px; border-radius: 11px;
  background: linear-gradient(160deg, #2a2416, #1b1b1f); border: 1px solid #6d5a24;
  display: flex; align-items: center; gap: 9px;
}
.gg-dr-coin .ic { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
.gg-dr-coin .amt { display: grid; gap: 1px; flex: 1; min-width: 0; }
.gg-dr-coin .amt b { font-size: 16px; font-weight: 800; color: #e5b84f; line-height: 1; }
.gg-dr-coin .amt span { font-size: 9.5px; color: #9c9377; letter-spacing: .1em; text-transform: uppercase; }
.gg-dr-get {
  border: 1px solid #e5b84f; background: #e5b84f; color: #221b07; font: 800 11.5px/1 inherit;
  padding: 7px 11px; border-radius: 8px; cursor: pointer; letter-spacing: .04em; white-space: nowrap;
}
.gg-dr-get:hover { background: #f2cd6c; }

/* ── the rows ──────────────────────────────────────────────────────────────── */
.gg-dr-row {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 46px; padding: 0 12px;
  border: none; background: transparent; color: #f2ede3; cursor: pointer; border-radius: 10px;
  font: 600 14px/1 inherit; text-align: left; text-decoration: none; box-sizing: border-box;
  transition: background .14s;
}
.gg-dr-row:hover { background: rgb(255 255 255 / .08); }
.gg-dr-row:active { background: rgb(255 255 255 / .13); }
.gg-dr-row[hidden] { display: none; }
.gg-dr-row svg { flex: none; color: #cfc8bb; }
.gg-dr-row .lbl { flex: 1; }
.gg-dr-row.is-on svg, .gg-dr-row.is-on .lbl { color: #7bd1ff; }
.gg-dr-row.danger svg, .gg-dr-row.danger .lbl { color: #e2694f; }

.gg-dr-sep { height: 1px; background: rgb(255 255 255 / .1); margin: 6px 10px; }
.gg-dr-sep[hidden] { display: none; }

/* ── the legal footer — the drawer is the only nav inside a fullscreen game,
      so the policy links have to live here or they're unreachable ─────────── */
.gg-dr-foot { padding: 9px 12px 5px; color: #6b665f; font-size: 10px; letter-spacing: .04em; }
.gg-dr-foot a { color: #7bd1ff; text-decoration: none; }
.gg-dr-foot a:hover { text-decoration: underline; }
.gg-dr-foot-note { display: block; margin-top: 5px; color: #57534d; }

/* ── the tab handle ────────────────────────────────────────────────────────── */
.gg-dr-tab {
  pointer-events: auto;
  flex: none; margin-top: 1px; width: 40px; height: 54px; display: grid; place-items: center;
  cursor: pointer; color: #e9e3d8; padding: 0;
  border: 1px solid rgb(255 255 255 / .12); border-left: none; border-radius: 0 13px 13px 0;
  background: rgb(14 14 17 / .92);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 26px rgb(0 0 0 / .45);
  -webkit-tap-highlight-color: transparent;
  transition: background .14s, color .14s;
}
.gg-dr-tab:hover { background: rgb(34 34 40 / .96); color: #fff; }
.gg-drawer.open .gg-dr-tab { color: #7bd1ff; }
/* a game hides the handle while a microgame or modal owns the screen */
.gg-dr-tab[hidden] { display: none; }

/* ── the iOS install hint (Safari has no install API) ──────────────────────── */
.gg-am-hint {
  position: fixed; z-index: 501; max-width: min(300px, 86vw);
  top: calc(var(--gg-ui-top, 0px) + env(safe-area-inset-top, 0px) + 76px); left: 12px;
  background: rgb(16 16 20 / .97); color: #f2ede3; border: 1px solid rgb(255 255 255 / .16);
  border-radius: 12px; padding: 13px 30px 13px 14px;
  font: 500 13px/1.55 system-ui, -apple-system, sans-serif;
  box-shadow: 0 14px 34px rgb(0 0 0 / .5);
}
.gg-am-hint[hidden] { display: none; }
.gg-am-hint b { color: #fff; font-weight: 700; }
.gg-am-hint .gg-am-x { position: absolute; top: 7px; right: 10px; cursor: pointer; color: #9a958c; font-size: 17px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .gg-drawer, .gg-dr-bd { transition: none; }
}