/* German Eiland -- topbar (ported from the donor site's assets/topbar.css,
 * design-language reference only; the donor tree was never modified).
 * Single source of truth for the standalone-page topbar markup + behavior,
 * used by /map/, /shop/, /wallet/, /garage/, /skin/, /voice/, /status/, and
 * /admin/popcontrol/ -- both visited directly and embedded (?embedded=1)
 * inside the landing's pooled-iframe module shell (assets/js/landing.js).
 *
 * Dropped vs the donor file: the language tab/popover (no i18n widget is
 * shipped), the paid-tier pill (no such membership concept here), and the VOIP
 * live-dot nav indicator (no persistent cross-module voice session --
 * assets/js/landing.js treats VOIP as a normal pooled module).
 *
 * Tokens (--bone, --accent, etc.) come from /assets/shared.css, loaded by
 * every page ahead of this file.
 */

.topbar-apex {
  position:fixed !important;
  top:0 !important; left:0 !important; right:0 !important;
  z-index:1000 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  align-items:center; justify-content:space-between;
  padding:14px 32px;
  background:linear-gradient(180deg,
    rgba(10,9,8,0.85) 0%,
    rgba(10,9,8,0.6) 80%,
    rgba(10,9,8,0) 100%);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border-bottom:1px solid var(--bone-08);
  gap:14px;
  max-width:100%; box-sizing:border-box; overflow:hidden;
  padding-left:max(32px, env(safe-area-inset-left));
  padding-right:max(32px, env(safe-area-inset-right));
}
.topbar-apex .brand { display:flex; align-items:center; gap:14px; text-decoration:none; flex:0 1 auto; min-width:0; }
.topbar-apex .brand-mark {
  width:46px; height:46px; border-radius:9px;
  background:radial-gradient(circle at 30% 30%, rgba(var(--accent-rgb),0.18), transparent 60%),
             linear-gradient(135deg, #1a1614 0%, #1a1310 100%);
  border:1px solid rgba(var(--accent-rgb),0.18);
  box-shadow:0 0 22px rgba(var(--accent-rgb),0.16), inset 0 0 0 1px rgba(245,233,216,0.06);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:19px; letter-spacing:0.04em; color:var(--accent);
  text-shadow:0 0 12px var(--accent-glow);
  transition:transform 0.5s var(--ease);
  flex:0 0 auto;
}
.topbar-apex .brand:hover .brand-mark { transform:rotate(8deg); }
.topbar-apex .brand-text { line-height:1.05; min-width:0; }
.topbar-apex .brand-text .name { font-family:var(--display); font-size:20px; letter-spacing:0.18em; color:var(--bone); white-space:nowrap; }
.topbar-apex .brand-text .sub { font-size:9px; color:var(--bone-62); letter-spacing:0.28em; text-transform:uppercase; margin-top:3px; white-space:nowrap; }

.topbar-apex .nav {
  display:flex; gap:4px; padding:5px 6px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:12px;
  min-width:0; overflow-x:auto; scrollbar-width:none;
}
.topbar-apex .nav::-webkit-scrollbar { display:none; }
.topbar-apex .nav a {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:8px;
  color:var(--bone-62); font-size:11px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  text-decoration:none;
  transition:color 0.2s var(--ease), background 0.2s var(--ease);
  white-space:nowrap;
}
.topbar-apex .nav a:hover { color:var(--bone); background:rgba(var(--accent-rgb),0.10); }
.topbar-apex .nav a.active {
  color:var(--bone); background:rgba(var(--accent-rgb),0.10);
  box-shadow:inset 0 0 0 1px var(--accent), 0 0 16px -4px var(--accent-glow);
}

.topbar-apex .right-cluster { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; justify-content:flex-end; }

.topbar-apex .user-chip {
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 14px;
  background:var(--glass); border:1px solid var(--glass-border); border-radius:10px;
  font-size:12px; color:var(--bone-80); letter-spacing:0.04em;
  cursor:pointer; user-select:none; transition:border-color 0.18s ease;
}
.topbar-apex .user-chip:hover { border-color:rgba(var(--accent-rgb),0.50); }
.topbar-apex .user-chip .avatar {
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #4d8db5 100%);
  box-shadow:0 0 8px var(--accent-glow);
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:9px; font-weight:700; color:#1a0a02;
}
.topbar-apex .user-chip .name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.topbar-apex .user-chip .caret { color:var(--bone-62); font-size:10px; margin-left:2px; }

.user-chip-wrap { position:relative; }
.user-menu {
  position:absolute; top:calc(100% + 6px); right:0;
  min-width:180px; z-index:120;
  display:flex; flex-direction:column;
  padding:6px;
  background:rgba(10,9,8,0.94);
  border:1px solid rgba(245,233,216,0.18);
  border-radius:10px;
  box-shadow:0 18px 40px -16px rgba(var(--accent-rgb),0.30), 0 4px 16px rgba(0,0,0,0.6);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
}
.user-menu a, .user-menu button {
  display:block; width:100%; text-align:left;
  padding:9px 12px; border-radius:6px;
  background:transparent; border:none;
  color:var(--bone-80); font:inherit; font-size:12px;
  letter-spacing:0.10em; text-transform:uppercase;
  cursor:pointer; text-decoration:none;
  transition:background 0.15s, color 0.15s;
}
.user-menu a:hover, .user-menu button:hover { background:rgba(var(--accent-rgb),0.10); color:var(--bone); }
.user-menu .sep { height:1px; background:rgba(245,233,216,0.08); margin:4px 0; }
.user-menu .signout { color:var(--crimson); }
.user-menu .signout:hover { background:rgba(196,32,33,0.12); color:#ff6b73; }
.user-menu[hidden] { display:none !important; }

/* ── prominent SIGN IN button for anon visitors ──────── */
.signin-btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:10px;
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.20) 0%, rgba(var(--accent-rgb),0.08) 100%);
  border:1px solid var(--accent);
  color:var(--bone);
  font-size:11px; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  box-shadow:0 6px 18px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.06);
  transition:transform 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
  white-space:nowrap;
}
.signin-btn:hover {
  background:linear-gradient(180deg, rgba(var(--accent-rgb),0.30) 0%, rgba(var(--accent-rgb),0.14) 100%);
  transform:translateY(-1px);
  box-shadow:0 10px 24px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.08);
}
.signin-btn .signin-icon {
  color:var(--accent); text-shadow:0 0 8px var(--accent-glow);
  font-size:14px;
}

/* ── hamburger + nav drawer (≤900px) ─────────────────── */
.hamburger {
  display:none;
  width:44px; height:44px; border-radius:9px;
  background:var(--glass); border:1px solid var(--glass-border);
  align-items:center; justify-content:center;
  color:var(--bone); font-size:20px; cursor:pointer;
  flex:0 0 auto;
  transition:border-color 0.18s ease;
}
.hamburger:hover { border-color:rgba(var(--accent-rgb),0.50); }
.hamburger .bars { display:flex; flex-direction:column; gap:4px; align-items:center; }
.hamburger .bars span {
  display:block; width:18px; height:2px;
  background:var(--bone-80); border-radius:1px;
  transition:transform 0.22s var(--ease), opacity 0.22s var(--ease);
}
.hamburger.open .bars span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.hamburger.open .bars span:nth-child(2) { opacity:0; }
.hamburger.open .bars span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

.nav-drawer {
  position:fixed; top:0; left:0; right:0; z-index:49;
  background:rgba(10,9,8,0.96);
  backdrop-filter:blur(14px) saturate(110%);
  -webkit-backdrop-filter:blur(14px) saturate(110%);
  border-bottom:1px solid var(--bone-08);
  transform:translateY(-100%);
  transition:transform 0.28s var(--ease);
  padding-top:74px;
  pointer-events:none;
  max-height:100vh; overflow-y:auto;
}
.nav-drawer.open { transform:translateY(0); pointer-events:auto; }
.nav-drawer a {
  display:block; padding:18px 28px;
  color:var(--bone-80);
  font-size:13px; letter-spacing:0.18em; text-transform:uppercase;
  text-decoration:none;
  border-top:1px solid var(--bone-08);
  transition:background 0.15s, color 0.15s;
}
.nav-drawer a:first-child { border-top:none; }
.nav-drawer a.active { color:var(--bone); background:rgba(var(--accent-rgb),0.10); box-shadow:inset 3px 0 0 var(--accent); }
.nav-drawer a:hover { color:var(--bone); background:rgba(var(--accent-rgb),0.06); }

/* Push regular page content clear of the fixed topbar (~76px tall). */
body { padding-top:76px; }
/* Embed mode: keyed off <html> when topbar.js sets it synchronously (so
 * first-paint already collapses the topbar reservation) AND off <body> as a
 * fallback for the DOMContentLoaded path. */
html[data-embedded="true"] body,
body[data-embedded="true"] {
  padding-top:0 !important;
}
html[data-embedded="true"] #sky-topbar,
html[data-embedded="true"] #nav-drawer,
html[data-embedded="true"] #sky-drawer,
body[data-embedded="true"] #sky-topbar,
body[data-embedded="true"] #nav-drawer,
body[data-embedded="true"] #sky-drawer {
  display:none !important;
}

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .topbar-apex { padding-left:max(20px, env(safe-area-inset-left)); padding-right:max(20px, env(safe-area-inset-right)); }
  .topbar-apex .nav a { padding:8px 12px; letter-spacing:0.10em; }
  .signin-btn {
    padding:9px 14px; letter-spacing:0.10em; gap:8px;
    line-height:1.15; text-align:center;
    white-space:normal;
    min-width:0;
  }
}
@media (max-width: 900px) {
  .topbar-apex { padding:10px 14px; gap:10px;
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right)); }
  .topbar-apex .nav { display:none; }
  .topbar-apex .hamburger { display:inline-flex; }
  .topbar-apex .user-chip { padding:6px 10px; }
  .topbar-apex .user-chip .name { max-width:80px; font-size:11px; }
  .topbar-apex .brand-text .name { font-size:18px; }
  .topbar-apex .brand-text .sub  { display:none; }
  .topbar-apex .brand-mark { width:40px; height:40px; font-size:16px; }
  .signin-btn { padding:8px 12px; font-size:10px; gap:6px; white-space:nowrap; }
  .signin-btn .signin-icon { font-size:12px; }
}
@media (max-width: 480px) {
  .topbar-apex .brand-text { display:none; }
  .signin-btn span:not(.signin-icon) { display:none; }
  .signin-btn { padding:0; gap:0; width:44px; height:44px; justify-content:center; }
  .signin-btn .signin-icon { font-size:16px; }
}
@media (pointer: coarse) {
  .hamburger { width:44px; height:44px; }
  .topbar-apex .user-chip { min-height:44px; }
  .signin-btn { min-height:44px; }
  .nav-drawer a { min-height:44px; display:flex; align-items:center; }
}

/* ── color tab (site theme picker) + popover ─────────────────────── */
.theme-tab{width:26px;height:26px;border-radius:50%;flex:0 0 auto;border:2px solid var(--glass-border);
  box-shadow:0 0 0 2px rgba(0,0,0,.3),0 0 10px -2px var(--accent-glow);cursor:pointer;padding:0;
  transition:border-color .18s ease,transform .18s ease}
.theme-tab:hover{transform:translateY(-2px);border-color:var(--glass-border-lit)}
.theme-popover{position:fixed;width:260px;z-index:1200;padding:16px;border-radius:12px;
  background:rgba(14,11,9,.97);border:1px solid rgba(245,233,216,.16);
  box-shadow:0 18px 44px -16px rgba(0,0,0,.85);backdrop-filter:blur(12px);font-family:var(--ui)}
.theme-popover[hidden]{display:none!important}
.theme-popover-title{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bone-62);margin-bottom:12px;font-weight:600}
.theme-popover-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.theme-swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;
  padding:0;transition:border-color .15s ease,transform .15s ease}
.theme-swatch:hover{transform:scale(1.08)}
.theme-swatch.active{border-color:var(--bone);box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.theme-popover-custom{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-top:1px solid var(--bone-08);font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone-62)}
.theme-popover-custom input[type="color"]{width:34px;height:28px;padding:0;border-radius:6px;
  border:1px solid var(--glass-border);background:none;cursor:pointer}
.theme-popover-reset{width:100%;margin-top:6px;padding:9px;border-radius:8px;border:1px solid var(--glass-border);
  background:transparent;color:var(--bone-80);font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
.theme-popover-reset:hover{background:rgba(255,255,255,.06);color:var(--bone)}