/* ═══════════════════════════════════════════════════════════
   Liquid Glass — Material Engine
   CHECKLIST: multi-layer blur · no hard borders · spring states
   · adaptive opacity · elevation shadows · specular rim
   ═══════════════════════════════════════════════════════════ */

/* ── Base glass container ─────────────────────────────────── */
.glass {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  contain: layout style paint;
  border-radius: var(--glass-radius-md);
  transition:
    transform var(--glass-duration-mid) var(--glass-spring-hover),
    box-shadow var(--glass-duration-mid) var(--glass-spring-hover);
}

.glass[data-radius="sm"]  { border-radius: var(--glass-radius-sm); }
.glass[data-radius="md"]  { border-radius: var(--glass-radius-md); }
.glass[data-radius="lg"]  { border-radius: var(--glass-radius-lg); }
.glass[data-radius="xl"]  { border-radius: var(--glass-radius-xl); }
.glass[data-radius="pill"] { border-radius: var(--glass-radius-pill); }

.glass[data-elevation="0"] { --glass-e-blur: var(--glass-e0-blur); --glass-e-shadow: var(--glass-e0-shadow); --glass-e-hi: var(--glass-e0-highlight); }
.glass[data-elevation="1"],
.glass:not([data-elevation]) { --glass-e-blur: var(--glass-e1-blur); --glass-e-shadow: var(--glass-e1-shadow); --glass-e-hi: var(--glass-e1-highlight); }
.glass[data-elevation="2"] { --glass-e-blur: var(--glass-e2-blur); --glass-e-shadow: var(--glass-e2-shadow); --glass-e-hi: var(--glass-e2-highlight); }
.glass[data-elevation="3"] { --glass-e-blur: var(--glass-e3-blur); --glass-e-shadow: var(--glass-e3-shadow); --glass-e-hi: var(--glass-e3-highlight); }
.glass[data-elevation="4"] { --glass-e-blur: var(--glass-e4-blur); --glass-e-shadow: var(--glass-e4-shadow); --glass-e-hi: var(--glass-e4-highlight); }
.glass[data-elevation="5"] { --glass-e-blur: var(--glass-e5-blur); --glass-e-shadow: var(--glass-e5-shadow); --glass-e-hi: var(--glass-e5-highlight); }

/* ── Layer: frosted lens (backdrop) ───────────────────────── */
.glass-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / calc(0.18 * var(--glass-e-hi))) 0%,
      oklch(1 0 0 / calc(0.05 * var(--glass-e-hi))) 28%,
      var(--glass-adaptive-fill) 62%,
      oklch(0.2 0.01 260 / calc(0.06 * var(--glass-adaptive-opacity))) 100%);
  backdrop-filter:
    blur(calc(var(--glass-e-blur) + var(--glass-adaptive-blur)))
    saturate(var(--glass-saturate))
    brightness(var(--glass-brightness));
  -webkit-backdrop-filter:
    blur(calc(var(--glass-e-blur) + var(--glass-adaptive-blur)))
    saturate(var(--glass-saturate))
    brightness(var(--glass-brightness));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    inset 0 -0.5px 0 var(--glass-shadow-bottom),
    inset 0 0 0 0.5px var(--glass-rim),
    var(--glass-e-shadow);
}

/* ── Layer: inner light diffusion ─────────────────────────── */
.glass-diffuse {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%,
      var(--glass-inner-glow) 0%,
      transparent 55%),
    linear-gradient(180deg,
      transparent 70%,
      oklch(1 0 0 / 0.02) 100%);
  opacity: calc(0.45 + var(--glass-e-hi) * 0.3);
  mix-blend-mode: soft-light;
}

/* ── Layer: specular rim + chromatic edge ─────────────────── */
.glass-edge {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      oklch(1 0 0 / calc(0.22 * var(--glass-e-hi))) 0%,
      oklch(1 0 0 / calc(0.04 * var(--glass-e-hi))) 22%,
      transparent 48%,
      transparent 70%,
      oklch(1 0 0 / 0.03) 100%);
  mix-blend-mode: soft-light;
  filter: none;
  opacity: 0.75;
}

.glass-edge::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 10%;
  right: 10%;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(1 0 0 / 0.55) 35%,
    oklch(1 0 0 / 0.72) 50%,
    oklch(1 0 0 / 0.55) 65%,
    transparent 100%);
  opacity: calc(0.5 + var(--glass-e-hi) * 0.35);
}

/* ── Content slot ─────────────────────────────────────────── */
.glass-content {
  position: relative;
  z-index: 3;
}

/* ── Interactive states ───────────────────────────────────── */
.glass-interactive {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.glass-interactive:hover:not(:disabled):not(.glass-disabled) {
  transform: translateZ(0) scale(var(--glass-hover-scale));
}

.glass-interactive:hover:not(:disabled):not(.glass-disabled) .glass-bg {
  backdrop-filter:
    blur(calc(var(--glass-e-blur) + var(--glass-adaptive-blur) + var(--glass-hover-blur-add)))
    saturate(calc(var(--glass-saturate) + 10%))
    brightness(calc(var(--glass-brightness) + 0.02));
  -webkit-backdrop-filter:
    blur(calc(var(--glass-e-blur) + var(--glass-adaptive-blur) + var(--glass-hover-blur-add)))
    saturate(calc(var(--glass-saturate) + 10%))
    brightness(calc(var(--glass-brightness) + 0.02));
}

.glass-interactive.glass-pressed,
.glass-interactive:active:not(:disabled):not(.glass-disabled) {
  transform: translateZ(0) scale(var(--glass-press-scale));
}

.glass-interactive:focus-visible {
  outline: 2px solid var(--glass-focus-ring);
  outline-offset: 2px;
}

.glass-disabled,
.glass-interactive:disabled {
  opacity: 0.48;
  pointer-events: none;
  filter: saturate(0.6);
}

/* ── Moving specular — a soft highlight that glides with the pointer,
   like light playing across a real lens. Driven by --glass-sx/--glass-sy
   (0–100, set by GlassLuminance pointer handler) and --glass-spec (0–1
   intensity, raised on hover). Rides the diffuse layer's soft-light blend
   so it reads as reflected light, never a painted dot. ─────────────── */
.glass-interactive .glass-diffuse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    38% 30% at var(--glass-sx, 50%) var(--glass-sy, 0%),
    oklch(1 0 0 / calc(0.16 * var(--glass-spec, 0))) 0%,
    oklch(1 0 0 / calc(0.05 * var(--glass-spec, 0))) 42%,
    transparent 72%
  );
  opacity: 1;
  transition: background 0.12s linear;
  pointer-events: none;
}
.glass-interactive { --glass-spec: 0; }
.glass-interactive:hover:not(:disabled):not(.glass-disabled) { --glass-spec: 1; }
@media (prefers-reduced-motion: reduce) {
  .glass-interactive .glass-diffuse::after { display: none; }
}

/* Fixed specular rim — no cursor-tracking highlight */
.glass-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--glass-text-primary);
  background: transparent;
  border-radius: var(--glass-radius-pill);
}

.glass-btn.glass-btn-sm { padding: 8px 16px; font-size: 13px; }
.glass-btn.glass-btn-lg { padding: 14px 32px; font-size: 16px; }

.glass-btn-accent .glass-bg {
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.14) 0%,
      var(--glass-adaptive-fill) 100%);
}

.glass-btn-accent .glass-content {
  color: var(--violet, oklch(0.68 0.28 295));
  font-weight: 600;
}

.glass-btn-solid .glass-bg {
  background:
    linear-gradient(180deg,
      oklch(from var(--violet, oklch(0.68 0.28 295)) l c h / 0.85) 0%,
      oklch(from var(--violet, oklch(0.68 0.28 295)) l c h / 0.72) 100%);
}

.glass-btn-solid .glass-content {
  color: oklch(0.12 0.02 270);
  font-weight: 600;
}

/* ── Glass card ───────────────────────────────────────────── */
.glass-card {
  padding: 0;
  overflow: hidden;
}

.glass-card .glass-content {
  padding: 20px 24px;
}

.glass-card.glass-card-sm .glass-content { padding: 14px 18px; }
.glass-card.glass-card-flush .glass-content { padding: 0; }

/* ── Glass input ──────────────────────────────────────────── */
.glass-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  min-height: 44px;
}

.glass-input-wrap .glass-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
}

.glass-search .glass-content {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
}

.glass-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--glass-text-primary);
  outline: none;
}

.glass-input::placeholder {
  color: var(--glass-text-secondary);
  opacity: 0.7;
}

/* ── Glass search ─────────────────────────────────────────── */
.glass-search .glass-input-wrap {
  min-height: 40px;
}

.glass-search-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  opacity: 0.55;
  color: var(--glass-text-secondary);
}

/* ── Glass modal / overlay ────────────────────────────────── */
.glass-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: oklch(0 0 0 / 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: glass-overlay-in var(--glass-duration-fast) var(--glass-spring-hover) both;
}

.glass-overlay.glass-overlay-sheet {
  align-items: flex-end;
  padding: 0;
}

.glass-modal {
  width: 100%;
  max-width: 440px;
  max-height: min(88vh, 720px);
  overflow: hidden;
  animation: glass-modal-in var(--glass-duration-mid) var(--glass-spring-press) both;
}

.glass-modal .glass-content {
  padding: 24px;
  overflow-y: auto;
  max-height: inherit;
}

.glass-sheet {
  width: 100%;
  max-height: 92vh;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  animation: glass-sheet-in var(--glass-duration-mid) var(--glass-spring-sheet) both;
}

.glass-sheet .glass-content {
  padding: 20px 24px calc(24px + var(--safe-bottom, 0px));
  overflow-y: auto;
  max-height: inherit;
}

.glass-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.22);
  margin: 10px auto 6px;
}

@keyframes glass-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes glass-modal-in {
  from { opacity: 0; transform: scale(0.94) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes glass-sheet-in {
  from { opacity: 0; transform: translateY(100%); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Glass menu / dropdown ────────────────────────────────── */
.glass-menu {
  min-width: 220px;
  max-width: 320px;
  opacity: 1;
  /* No opacity entrance animation: transform is locked (`!important` below)
     so the dropdown can only animate opacity, and a header re-render was
     restarting that animation to its 0% (opacity:0) frame every tick —
     leaving the whole profile menu invisible. Keep it simply visible. */
  box-shadow: none !important;
  transform: none !important;
}

.glass-menu .glass-content {
  padding: 6px;
}

.glass-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--glass-radius-sm);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--glass-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--glass-duration-fast) var(--glass-spring-hover);
}

.glass-menu-item:focus-visible {
  outline: 2px solid var(--glass-focus-ring);
  outline-offset: -2px;
}

.glass-menu-divider {
  height: 1px;
  margin: 6px 8px;
  background: oklch(1 0 0 / 0.08);
}

@keyframes glass-menu-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Glass toast ──────────────────────────────────────────── */
.glass-toast {
  min-width: 240px;
  max-width: 360px;
  animation: glass-toast-in var(--glass-duration-mid) var(--glass-spring-press) both;
}

.glass-toast .glass-content {
  padding: 12px 18px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 500;
  color: var(--glass-text-primary);
}

@keyframes glass-toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Glass nav bar — edge-to-edge docked chrome (no floating island) ── */
.glass-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  z-index: 600;
  border-radius: 0;
  overflow: hidden;
  box-shadow: none !important;
  transition: none;
}

.glass-navbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    oklch(1 0 0 / 0.14) 20%,
    oklch(1 0 0 / 0.18) 50%,
    oklch(1 0 0 / 0.14) 80%,
    transparent 100%);
  pointer-events: none;
  z-index: 4;
  opacity: 1;
}

.glass-navbar .glass-content {
  display: block;
  padding: 0;
  min-height: 0;
  width: 100%;
}

.glass-navbar.glass-navbar-scrolled {
  top: 0;
  border-radius: 0;
}

.glass-navbar .glass-bg-chrome,
.glass-navbar:not(.glass-navbar-scrolled) .glass-bg-chrome,
.glass-navbar.glass-navbar-scrolled .glass-bg-chrome {
  background: oklch(0.11 0.018 270 / 0.82) !important;
  backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.05) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.05) !important;
}

/* ── Glass tab bar (mobile) — iOS liquid glass dock ────────── */
.glass-tabbar-shell {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 650;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding:
    0
    max(var(--safe-right, 0px), var(--mobile-nav-float-x, 10px))
    calc(var(--mobile-nav-float-gap, 8px) + var(--safe-bottom, 0px))
    max(var(--safe-left, 0px), var(--mobile-nav-float-x, 10px));
  pointer-events: none;
}

@media (max-width: 768px) {
  .glass-tabbar-shell { display: block; }
}

.glass-tabbar-shell .glass {
  pointer-events: auto;
  padding: 5px;
  box-shadow: none !important;
  border-radius: 28px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

.glass-tabbar-shell .glass-tabbar .glass-bg-chrome {
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.14) 0%,
      oklch(0.14 0.02 270 / 0.55) 42%,
      oklch(0.10 0.018 270 / 0.72) 100%) !important;
  backdrop-filter: blur(40px) saturate(190%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(40px) saturate(190%) brightness(1.06) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    inset 0 0 0 0.5px oklch(1 0 0 / 0.18),
    0 12px 40px -12px oklch(0 0 0 / 0.55),
    0 4px 16px oklch(0 0 0 / 0.22) !important;
  border-radius: inherit !important;
}

/* ── Tab bar: full liquid-glass material ──────────────────────
   GlassSurface omits the .glass-diffuse / .glass-edge nodes whenever
   `chrome` is set, and `.glass-chrome` hides them outright — so the dock
   rendered as flat chrome while every non-chrome surface got the layered
   material. Re-create both layers as pseudo-elements scoped to the tab bar:
   same gradients, blend modes and token vocabulary as the real engine, with
   no global change to chrome mode and nothing touched inside .glass-content
   (icons, labels and the active pill keep their own z-index: 3 stack). */
.glass-tabbar-shell .glass-tabbar {
  /* e0's highlight (0.18) is tuned for flat inline surfaces; a floating dock
     needs the specular to actually read against the page behind it. */
  --glass-e-hi: 0.9;
}

/* Layer 1 — inner light diffusion */
.glass-tabbar-shell .glass-tabbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 45% at 50% -8%,
      var(--glass-inner-glow) 0%,
      transparent 55%),
    linear-gradient(180deg,
      transparent 70%,
      oklch(1 0 0 / 0.02) 100%);
  opacity: calc(0.45 + var(--glass-e-hi) * 0.3);
  mix-blend-mode: soft-light;
}

/* Layer 2 — specular rim + the bright crown hairline */
.glass-tabbar-shell .glass-tabbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 2;
  pointer-events: none;
  background:
    /* crown streak — the engine draws this as .glass-edge::after */
    linear-gradient(90deg,
      transparent 0%,
      oklch(1 0 0 / 0.55) 35%,
      oklch(1 0 0 / 0.72) 50%,
      oklch(1 0 0 / 0.55) 65%,
      transparent 100%) no-repeat 50% 1px / 80% 1px,
    /* diagonal sheen */
    linear-gradient(135deg,
      oklch(1 0 0 / calc(0.22 * var(--glass-e-hi))) 0%,
      oklch(1 0 0 / calc(0.04 * var(--glass-e-hi))) 22%,
      transparent 48%,
      transparent 70%,
      oklch(1 0 0 / 0.03) 100%);
  mix-blend-mode: soft-light;
  opacity: 0.75;
}

.glass-tabbar-inner {
  display: flex;
  align-items: stretch;
  gap: var(--mobile-nav-gap, 2px);
  position: relative;
}

.glass-tabbar-pill {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  border-radius: 22px;
  pointer-events: none;
  z-index: 0;
  will-change: left, width, transform;
  transition:
    left 0.55s cubic-bezier(0.32, 0.72, 0, 1),
    width 0.55s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.2s ease;
}

.glass-tabbar-pill.is-morphing .glass-bg-chrome {
  transform: scaleY(0.9) scaleX(1.1);
  transition:
    transform 0.55s cubic-bezier(0.32, 0.72, 0, 1),
    filter 0.55s cubic-bezier(0.32, 0.72, 0, 1);
  filter: brightness(1.08);
}

.glass-tabbar-pill .glass-bg-chrome {
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.28) 0%,
      oklch(1 0 0 / 0.12) 38%,
      oklch(1 0 0 / 0.06) 100%) !important;
  backdrop-filter: blur(18px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.08) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    inset 0 -1px 1px oklch(0 0 0 / 0.14),
    0 2px 10px oklch(0 0 0 / 0.18) !important;
  border-radius: inherit !important;
}

.city-nav-ico {
  /* Stroke glyphs inherit the item's state colour via currentColor. */
  vector-effect: non-scaling-stroke;
  overflow: visible;
}

.glass-tabbar-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--mobile-nav-item-h, 54px);
  padding: 7px 2px 8px;
  border: none;
  background: transparent;
  font-family: var(--font-ui), -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
  font-size: var(--mobile-nav-label-size, 11px);
  font-weight: 550;
  letter-spacing: -0.02em;
  color: oklch(0.68 0.012 260 / 0.78);
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition:
    color 0.28s cubic-bezier(0.32, 0.72, 0, 1),
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  -webkit-tap-highlight-color: transparent;
}

.glass-tabbar-item .glass-tabbar-label {
  transition: opacity 0.25s ease, color 0.25s ease;
  line-height: 1;
  font-size: inherit;
}

.glass-tabbar-item.act {
  color: #fff;
  font-weight: 650;
}

.glass-tabbar-item.pressed {
  transform: scale(0.88);
}

.glass-tabbar-item.bounce .mobile-nav-icon,
.glass-tabbar-item.bounce .city-nav-ico {
  animation: liquid-tab-icon-pop 0.58s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes liquid-tab-icon-pop {
  0%   { transform: scale(1) translateY(0); }
  35%  { transform: scale(1.22) translateY(-4px); }
  58%  { transform: scale(0.94) translateY(0); }
  100% { transform: translateY(-1px) scale(1.08); }
}

.glass-tabbar.tap-flash {
  animation: liquid-tab-bar-settle 0.42s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes liquid-tab-bar-settle {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

/* Create — slightly emphasized glyph (kept in-bar, not floating out) */
.glass-tabbar-item--accent .city-nav-ico {
  width: 30px;
  height: 30px;
  transform: translateY(-1px) scale(1.04);
  /* Line glyphs need a glow tinted to the accent, not a black drop shadow —
     a hard shadow under a 1.6px stroke just reads as a smudge. */
  filter: drop-shadow(0 0 6px oklch(0.88 0.24 135 / 0.35));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}
.glass-tabbar-item--accent {
  /* Was #ffd60a — Apple yellow, outside the app's OKLCH palette. */
  color: var(--lime, oklch(0.88 0.24 135));
}
.glass-tabbar-item--accent.act {
  color: #fff;
}
.glass-tabbar-item--accent.act .city-nav-ico,
.glass-tabbar-item--accent:hover .city-nav-ico {
  transform: translateY(-2px) scale(1.1);
  filter: drop-shadow(0 5px 12px oklch(0.7 0.14 80 / 0.35));
}
.glass-tabbar-item--accent.pressed { transform: scale(0.95); }

/* Missions pending badge stays gold */
.glass-tabbar-item--mission .mobile-nav-dot {
  background: linear-gradient(180deg, #fff6c2, #ffd60a);
  color: #1c1200;
  box-shadow:
    0 0 0 1.5px oklch(0.12 0.02 260 / 0.95),
    0 2px 7px oklch(0.75 0.14 85 / 0.45);
}

/* Colored city icons — never wash to monochrome */
.glass-tabbar-item .city-nav-ico {
  width: 28px;
  height: 28px;
  display: block;
  opacity: 1;
  filter: drop-shadow(0 2px 4px oklch(0 0 0 / 0.35));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease;
}
.glass-tabbar-item.act .city-nav-ico {
  transform: translateY(-1px) scale(1.08);
  filter: drop-shadow(0 3px 8px oklch(0 0 0 / 0.4));
}
.glass-tabbar-item:not(.act) .city-nav-ico {
  opacity: 0.92;
}

/* Notification badge */
.glass-tabbar-item .mobile-nav-dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(6px);
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8.5px;
  font-weight: 800;
  border-radius: 99px;
  color: #fff;
  background: linear-gradient(180deg, #409cff, #0a84ff);
  box-shadow:
    0 0 0 1.5px oklch(0.12 0.02 260 / 0.95),
    0 2px 7px oklch(0.5 0.16 250 / 0.45);
  pointer-events: none;
}
.glass-tabbar-item--accent .mobile-nav-dot {
  transform: translateX(10px);
  top: 0;
}

/* ── Glass sidebar (admin) ────────────────────────────────── */
.glass-sidebar {
  height: 100%;
  border-radius: 0;
}

.glass-sidebar .glass-content {
  padding: 16px 10px;
  height: 100%;
  overflow-y: auto;
}

.glass-sidebar-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: var(--glass-radius-sm);
  background: transparent;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--glass-text-secondary);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--glass-duration-fast) var(--glass-spring-hover),
    color var(--glass-duration-fast) var(--glass-spring-hover);
}

.glass-sidebar-item:hover {
  background: oklch(1 0 0 / 0.06);
  color: var(--glass-text-primary);
}

.glass-sidebar-item.act {
  background: oklch(1 0 0 / 0.10);
  color: var(--amber, oklch(0.78 0.18 68));
  font-weight: 600;
}

/* ── Legacy .card → Liquid Glass bridge ─────────────────── */
.card {
  position: relative;
  isolation: isolate;
  transform: translateZ(0);
  contain: layout style paint;
  background: transparent !important;
  border: none !important;
  border-radius: var(--glass-radius-lg) !important;
  padding: 0 !important;
  overflow: hidden;
  transition:
    transform var(--glass-duration-mid) var(--glass-spring-hover),
    box-shadow var(--glass-duration-mid) var(--glass-spring-hover);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.14) 0%,
      oklch(1 0 0 / 0.06) 24%,
      var(--glass-adaptive-fill) 55%,
      oklch(0.45 0.02 270 / 0.08) 100%);
  backdrop-filter: blur(var(--glass-e2-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  -webkit-backdrop-filter: blur(var(--glass-e2-blur)) saturate(var(--glass-saturate)) brightness(var(--glass-brightness));
  box-shadow:
    inset 0 1px 0 var(--glass-highlight-top),
    inset 0 -0.5px 0 var(--glass-shadow-bottom),
    inset 0 0 0 0.5px var(--glass-rim),
    var(--glass-e2-shadow);
}

.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      oklch(1 0 0 / 0.20) 0%,
      transparent 42%,
      var(--glass-accent-tint-b) 100%);
  mix-blend-mode: soft-light;
}

.card > * {
  position: relative;
  z-index: 2;
  padding: 20px 24px;
}

.card:hover {
  transform: none;
  border-color: transparent !important;
}

/* Legacy .btn → glass crystal */
.btn {
  font-family: var(--font-ui) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  font-weight: 500 !important;
  border-radius: var(--glass-radius-pill) !important;
  transition: transform var(--glass-duration-fast) var(--glass-spring-press), box-shadow var(--glass-duration-mid) var(--glass-spring-hover) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.28),
    0 4px 20px oklch(0 0 0 / 0.14) !important;
}

.btn::after { display: none !important; }

.btn-v {
  background: linear-gradient(180deg, oklch(from var(--violet) l c h / 0.92), oklch(from var(--violet) l c h / 0.78)) !important;
  color: oklch(0.12 0.02 270) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 6px 24px oklch(0.68 0.28 295 / 0.22) !important;
}

.btn-v:hover {
  transform: translateY(-1px) scale(var(--glass-hover-scale)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.42),
    0 10px 32px oklch(0.68 0.28 295 / 0.26) !important;
}

.btn-l {
  background: linear-gradient(180deg, oklch(from var(--lime) l c h / 0.92), oklch(from var(--lime) l c h / 0.78)) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.35),
    0 6px 24px oklch(0.88 0.24 135 / 0.18) !important;
}

.btn-o {
  background: oklch(1 0 0 / 0.06) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: none !important;
  box-shadow: inset 0 0 0 0.5px var(--glass-rim) !important;
  color: var(--text) !important;
}

.btn-o:hover {
  background: oklch(1 0 0 / 0.10) !important;
  color: var(--text) !important;
  border-color: transparent !important;
}

/* Glass navbar — shell layout lives in header.css */
.glass-tabbar.tap-flash {
  animation: ios-tab-bar-flash 0.32s var(--glass-spring-press);
}

.mobile-nav-icon-svg {
  width: var(--mobile-nav-icon-size, 26px);
  height: var(--mobile-nav-icon-size, 26px);
  opacity: 0.72;
  transition: opacity 0.28s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.25s ease, filter 0.25s ease;
}

.glass-tabbar-item.act .mobile-nav-icon-svg {
  opacity: 1;
  transform: translateY(-1px) scale(1.08);
}

/* GameHUD lives inside a glass pill — lay its children out inline so the
   XP badge and sound toggle never stack vertically. */
.game-hud-glass .glass-content {
  padding: 4px 6px 4px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.glass-navbar .game-hud-glass {
  flex-shrink: 0;
}

.glass-navbar .game-hud-glass .glass-content {
  padding: 3px 5px 3px 4px;
}

.glass-tabbar-item .mobile-nav-icon-svg,
.glass-tabbar-item .glass-tabbar-label {
  display: block;
}

/* Admin glass shell */
.glass-admin-topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-radius: 0;
}

.glass-admin-topnav .glass-content {
  display: flex;
  align-items: center;
  padding: 0 24px;
  min-height: 52px;
  gap: 0;
}

.glass-admin-sidebar {
  width: 240px;
  min-width: 240px;
  height: 100%;
  border-radius: 0;
  flex-shrink: 0;
}

.glass-admin-sidebar .glass-content {
  padding: 16px 10px;
  height: 100%;
  overflow-y: auto;
}

.glass-panel {
  border-radius: 0;
  height: 100%;
}

.glass-panel .glass-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.glass-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: 0;
}

.glass-bottom-bar .glass-content {
  display: flex;
  align-items: center;
  padding: 0 20px;
  min-height: 36px;
  gap: 24px;
  width: 100%;
}

/* Map HUD — elevation 1 glass */
.hud-panel {
  background: transparent;
  border: none;
  border-radius: var(--glass-radius-md);
  padding: 0;
  pointer-events: all;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  will-change: transform;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hud-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: var(--glass-adaptive-fill);
  backdrop-filter: blur(var(--glass-e1-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-e1-blur)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-highlight-top), var(--glass-e1-shadow);
}

.hud-panel > * {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
}

.pin-tooltip {
  background: transparent;
  border: none;
  border-radius: var(--glass-radius-sm);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}

.pin-tooltip::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(var(--glass-e2-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-e2-blur)) saturate(var(--glass-saturate));
  background: var(--glass-adaptive-fill);
  box-shadow: inset 0 1px 0 var(--glass-rim), var(--glass-e2-shadow);
  border-radius: inherit;
}

.pin-tooltip > * {
  position: relative;
  z-index: 1;
  padding: 8px 10px;
}

.ai-result-card {
  background: transparent;
  border: none;
  border-radius: var(--glass-radius-md);
  padding: 0;
  margin-bottom: 8px;
  overflow: hidden;
  isolation: isolate;
  position: relative;
  animation: result-in 0.4s var(--glass-spring-press);
}

.ai-result-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: oklch(0.72 0.14 188 / 0.08);
  backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-near)) saturate(var(--glass-saturate));
  box-shadow: inset 0 1px 0 var(--glass-rim);
}

.ai-result-card > * {
  position: relative;
  z-index: 1;
  padding: 12px;
}

.ai-input-wrap {
  background: oklch(1 0 0 / 0.06);
  border: none;
  border-radius: var(--glass-radius-md);
  box-shadow: inset 0 0 0 0.5px var(--glass-rim);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
}

.ai-input {
  font-family: var(--font-ui);
}

/* ── Chrome mode — header, tab bar, menus (no decorative layers) ── */
.glass-chrome {
  --glass-e-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
  transform: none !important;
}

.glass-chrome:hover,
.glass-chrome:active,
.glass-chrome.glass-navbar-scrolled {
  transform: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.glass-bg-chrome {
  background: oklch(0.12 0.02 270 / 0.78) !important;
  backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.06) !important;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16) !important;
}

.glass-chrome:hover .glass-bg-chrome,
.glass-chrome .glass-bg-chrome,
.glass-navbar.glass-navbar-scrolled .glass-bg-chrome {
  background: oklch(0.12 0.02 270 / 0.78) !important;
  backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.06) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-nav)) saturate(180%) brightness(1.06) !important;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.16) !important;
}

.glass-tabbar-pill .glass-bg-chrome {
  background:
    linear-gradient(180deg,
      oklch(1 0 0 / 0.28) 0%,
      oklch(1 0 0 / 0.12) 38%,
      oklch(1 0 0 / 0.06) 100%) !important;
  backdrop-filter: blur(18px) saturate(200%) brightness(1.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(200%) brightness(1.08) !important;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.45),
    inset 0 -1px 1px oklch(0 0 0 / 0.14),
    0 2px 10px oklch(0 0 0 / 0.18) !important;
}

.glass-menu.glass-chrome .glass-bg-chrome {
  background: oklch(0.14 0.02 272 / 0.88) !important;
}

.glass-chrome .glass-edge,
.glass-chrome .glass-diffuse {
  display: none !important;
}

/* Allow liquid press / bounce on tab items (chrome kill-switch was freezing motion) */
.glass-tabbar-item:hover {
  transform: none;
  filter: none;
  box-shadow: none;
  background: transparent;
}
.glass-tabbar-item.pressed {
  transform: scale(0.88);
  filter: none;
  box-shadow: none;
  background: transparent;
}
.glass-tabbar-item.act {
  filter: none;
  box-shadow: none;
  background: transparent;
}

.glass-tabbar-item.act .mobile-nav-icon:not(:has(.city-nav-ico)),
.glass-tabbar-item.act .mobile-nav-icon-svg {
  filter: saturate(1.05) brightness(1.06)
    drop-shadow(0 2px 8px oklch(0.5 0.14 250 / 0.4));
}
.glass-tabbar-item.act .city-nav-ico,
.glass-tabbar-item--accent.act .city-nav-ico {
  /* keep multi-color fills intact */
  filter: drop-shadow(0 3px 8px oklch(0 0 0 / 0.42));
}
.glass-tabbar-shell .glass-tabbar {
  box-shadow:
    0 16px 48px -14px oklch(0 0 0 / 0.55),
    0 4px 16px oklch(0 0 0 / 0.2),
    inset 0 1px 0 oklch(1 0 0 / 0.16) !important;
}

.glass-navbar .nav-tab:hover {
  box-shadow: none;
  background: transparent;
  color: var(--text);
}

.glass-menu-item:hover {
  background: oklch(1 0 0 / 0.05);
  box-shadow: none;
}

/* View Transitions */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.38s;
  animation-timing-function: var(--glass-spring-nav);
}



/* ── Fallback: no backdrop-filter ─────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-bg {
    background: var(--bg-raised, oklch(0.14 0.02 270 / 0.94));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}