/* Shared responsive navbar.
   Every page links this so the bar behaves identically everywhere. Three different
   navbars grew up in this repo — the Site Nav component, the homepage's own copy and
   Travel's hand-written one — so the selectors below cover all three naming schemes:

     rail    [data-navhost="2"] · [data-navhost="1"][data-desktop-nav="1"] · .navhost
     icons   [data-navicon="1"] · .ico
     brand   [data-partymark="1"] (Travel also puts .brand/.dot on it)
     menu    [data-navminiwrap="1"] · [data-menu-btn="1"] · #menuBtn

   Fold points, measured against the tightest page (Music Room, whose SoundCloud tile
   takes the left edge) and the widest name the label allows, each with a scrollbar's
   worth of headroom:
     any   mood box -> L/A pill      (once a mood is picked, or while the bar can't fit the
                                     open box: each page's script measures the bar)
      930  brand -> its orb          (full brand needs ~890px)
      670  icons -> MENU bubble      (needs ~630px; all ten or none, never partial)
      470  ME/YOU/US -> the bubble   (needs ~430px)
   The bubble alone needs ~295px, so 320px phones still have room.

   !important is unavoidable: every control carries an inline width/height/display.
   Sizes must NOT be transitioned — during a drag-resize a transition lags behind the
   viewport and the rail briefly overflows the right edge. clamp() is already smooth. */

nav[aria-label="Main"] {
  max-width: 100%;
  /* Clipped sideways; tooltips and dropdowns still hang below. Not `overflow: clip
     visible` — Chrome paints the tooltip but stops hit-testing it a little below the
     bar, so the lower links in a tooltip "fell through" and it faded mid-choice. */
  overflow: visible;
  clip-path: inset(0 0 -100vh 0);
  flex-wrap: nowrap;
  gap: clamp(3px, .6vw, 8px) !important;
  padding: clamp(8px, 1.05vw, 11px) clamp(10px, 1.2vw, 18px) !important;
}

/* Edges: the mood box pinned left, the profile photo pinned right, the brand and icons
   centred between them. Both ends grow from zero in equal shares, so with room to spare
   they come out the same width and the middle sits at the true centre. When space runs
   short neither end can shrink below its own contents, so nothing ever overlaps — and
   no width has to be guessed and reserved, which is what went wrong when the mood box
   was absolutely positioned behind a fixed 190px of padding. */
[data-toprail="1"],
nav[aria-label="Main"] .toprail,
[data-navright="1"] {
  position: static !important;
  flex: 1 1 0 !important;
  min-width: max-content !important; /* beats the inline min-width: 0 the mood box carries */
  display: flex !important;
  align-items: center;
}
[data-toprail="1"], nav[aria-label="Main"] .toprail { justify-content: flex-start !important; }
[data-navright="1"] { justify-content: flex-end; }

[data-navhost="2"],
[data-navhost="1"][data-desktop-nav="1"],
nav[aria-label="Main"] .navhost { gap: clamp(1px, .38vw, 8px) !important; min-width: 0; }

[data-navicon="1"],
nav[aria-label="Main"] .ico {
  width: clamp(24px, 2.45vw, 32px) !important;
  height: clamp(24px, 2.45vw, 32px) !important;
  flex: 0 0 auto;
  transition: background-color .2s ease, color .2s ease;
}
[data-navicon="1"] svg,
nav[aria-label="Main"] .ico svg { width: clamp(12px, 1.2vw, 16px); height: clamp(12px, 1.2vw, 16px); }

/* Brand folds to its orb, which keeps its twinkle and its click animation. The label
   slides away rather than popping, and stays in the accessibility tree. */
[data-partymark="1"] { flex: 0 0 auto; }
/* A visitor's name can be up to 14 characters, and wide letters make that very wide.
   Cap the label so no name can push the bar past its breakpoints; anything longer
   ends in an ellipsis instead. The breakpoints below are measured against this cap. */
[data-partylabel="1"],
nav[aria-label="Main"] #houseName {
  display: inline-block !important;
  max-width: 13.5rem !important; /* "WELCOME HOME!" needs 206px; never truncate the default */
  overflow: hidden !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
[data-partymark="1"] > span:not([data-partydot="1"]):not(.dot) {
  transition: max-width .34s cubic-bezier(.34,1.56,.64,1), opacity .24s ease;
}

/* Hovering the brand must never move or cover anything.
   - Moving: the hover look (wider Bungee letters, "IS IN THE HOUSE!") used to widen the
     brand, which re-centred the bar under the cursor and made hover flicker on the way
     to ME. An invisible copy of the label in the resting font (the sizer) now holds the
     brand's width, and the text you see (the face) sits over it.
   - Covering: rather than spilling sideways over ME/YOU, the face stays inside the
     brand's own box. On hover the name lifts and the suffix ("IS IN THE HOUSE!", or
     "MAKE YOURSELF AT HOME" for guests) slides in on a small second line beneath it.
     The sizer is never narrower than that line, so it always fits. */
[data-partymark="1"] { position: relative; }
[data-partymark="1"]:hover,
[data-partymark="1"]:focus-visible { transform: scale(1.04) !important; } /* was 1.14: it poked into the gaps */
[data-partytext="1"] { position: relative; }
[data-partysizer="1"] {
  display: inline-block;
  visibility: hidden;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  min-width: 7.9rem;  /* the width of the small suffix line (guests: MAKE YOURSELF AT HOME) */
  max-width: 13.5rem;
  overflow: hidden;
  white-space: nowrap;
  text-align: center;
  vertical-align: bottom;
}
[data-partyface="1"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  line-height: 1.1;
  pointer-events: none;
}
[data-partyface="1"] [data-partylabel="1"],
nav[aria-label="Main"] [data-partyface="1"] #houseName {
  max-width: 100% !important;
  opacity: 1 !important; /* guests keep "WELCOME HOME!" on hover; the suffix goes beneath */
}
[data-partyface="1"] [data-partyhouse="1"],
[data-partyface="1"] .house {
  display: block !important;
  max-width: 100% !important;
  max-height: 0;
  overflow: hidden;
  font-size: 8.5px;
  letter-spacing: .1em;
  line-height: 1.25;
  color: #FF8AD1;
  transition: max-height .26s cubic-bezier(.22,1,.36,1), opacity .2s ease !important;
}
[data-partymark="1"]:hover [data-partyface="1"] [data-partyhouse="1"],
[data-partymark="1"]:focus-visible [data-partyface="1"] [data-partyhouse="1"],
[data-partymark="1"]:hover [data-partyface="1"] .house,
[data-partymark="1"]:focus-visible [data-partyface="1"] .house {
  max-height: 1.25em;
}
@media (min-width: 931px) {
  /* The two lines are a little taller than one; let them show (sideways it never spills). */
  [data-partymark="1"],
  [data-partymark="1"] > [data-partytext="1"] { overflow: visible !important; }
}
@media (max-width: 930px) {
  [data-partymark="1"] > span:not([data-partydot="1"]):not(.dot) { max-width: 0 !important; opacity: 0 !important; }
  [data-partymark="1"] { gap: 0 !important; padding: 6px 8px !important; }
}

/* Above 670 the full rail shows: all ten icons or none, never a partial set. */
@media (min-width: 671px) {
  [data-navhost="2"],
  [data-navhost="1"][data-desktop-nav="1"],
  nav[aria-label="Main"] .navhost { display: flex !important; }
  [data-navicon="1"],
  nav[aria-label="Main"] .ico { display: flex !important; }
  [data-navminiwrap="1"],
  [data-menu-btn="1"],
  nav[aria-label="Main"] #menuBtn { display: none !important; }
}

/* Stage one — the icons fold into the bubble; ME/YOU/US stay in the bar, being the
   cheapest to keep and the most used. */
@media (max-width: 670px) {
  [data-navhost="2"],
  [data-navhost="1"][data-desktop-nav="1"],
  nav[aria-label="Main"] .navhost { display: flex !important; }
  [data-navicon="1"],
  nav[aria-label="Main"] .ico { display: none !important; }
  [data-navminiwrap="1"],
  [data-menu-btn="1"],
  nav[aria-label="Main"] #menuBtn { display: inline-flex !important; }
}

/* Stage two — ME/YOU/US fold in too, above the icon links behind a divider. */
[data-navdrop="1"] [data-dropme="1"] { display: none; }
[data-dropdiv="1"] { display: block; height: 1px; margin: 7px 9px; background: rgba(232,244,255,.15); }
@media (max-width: 470px) {
  [data-navmenu="1"],
  nav[aria-label="Main"] .word,
  nav[aria-label="Main"] .wordmenu { display: none !important; }
  [data-navdrop="1"] [data-dropme="1"] { display: block !important; }
}

/* The dropdown on the collapsed bubble. On a pointer device it is the whole menu:
   hover opens it and a click pins it open (data-navpinned). Touch has no hover, so
   there the bubble still opens the fullscreen overlay instead. :focus-within sits
   outside the (hover: hover) query so keyboard users get it too — focusing the
   button is what makes the links tabbable at all. */
[data-navdrop="1"] {
  position: absolute; top: calc(100% + 11px); right: 0; z-index: 91;
  display: flex; flex-direction: column; gap: 1px;
  min-width: 196px; padding: 9px;
  border-radius: 16px; border: 1px solid rgba(232,244,255,.16);
  background: rgba(5,7,12,.95); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 26px 62px -28px rgba(0,0,0,.95);
  max-height: min(72svh, 440px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px) scale(.97); transform-origin: top right;
  transition: opacity .19s ease, transform .25s cubic-bezier(.34,1.56,.64,1), visibility 0s linear .2s;
}
[data-navminiwrap="1"][data-navpinned="1"] [data-navdrop="1"],
[data-navminiwrap="1"]:focus-within [data-navdrop="1"] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .19s ease, transform .25s cubic-bezier(.34,1.56,.64,1), visibility 0s;
}
@media (hover: hover) and (pointer: fine) {
  [data-navminiwrap="1"]:hover [data-navdrop="1"] {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .19s ease, transform .25s cubic-bezier(.34,1.56,.64,1), visibility 0s;
  }
}

/* Travel's folded mood pill: the full box unfolds over it, so it's placed from the rail
   (relative only while folded — it doesn't change how the rail sits in the bar). Whether it's
   folded is decided by each page's script: once a mood is picked, or when the open box
   doesn't fit the bar. */
nav[aria-label="Main"] .toprail.tucked { position: relative !important; }

/* --- Profile photo in the navbar (all three navbars) ------------------------------ */
[data-account-avatar] {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  overflow: hidden;
  color: rgba(232, 244, 255, 0.82);
  background: rgba(232, 244, 255, 0.06);
  border: 1px solid rgba(232, 244, 255, 0.2);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

[data-account-avatar]:hover,
[data-account-avatar][aria-expanded="true"] {
  border-color: #22e0ff;
  box-shadow: 0 0 0 3px rgba(34, 224, 255, 0.18);
}

[data-account-avatar]:focus-visible {
  outline: 2px solid #22e0ff;
  outline-offset: 2px;
}

[data-account-avatar] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[data-account-avatar] svg {
  width: 1.125rem;
  height: 1.125rem;
}

/* Signed-in monogram: the same cyan-to-magenta as the orb in the brand. */
[data-account-avatar][data-signed-in="1"] {
  border-color: transparent;
  background: radial-gradient(circle at 30% 28%, #2bf5a0, #22e0ff 42%, #ff3dbe 100%);
  color: #05070c;
}

[data-account-avatar] .oa-initials {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Reduced motion, everywhere (a net under each module's own handling): nothing loops, slides or
   glides — what moves arrives at once and stays put. Adventure mode's game draws its own gentler
   variants (adventureMode.js reduceMotion()), so its layer and pieces are left to it. */
@media (prefers-reduced-motion: reduce) {
  *:not(.adv-layer, .adv-layer *, .adv-chest, .adv-chest *, .adv-star, .adv-star *, .adv-front, .adv-front *, #adv-world, #adv-world *, #adv-backdrop, #adv-backdrop *),
  *:not(.adv-layer *, .adv-chest *, .adv-star *, .adv-front *, #adv-world *, #adv-backdrop *)::before,
  *:not(.adv-layer *, .adv-chest *, .adv-star *, .adv-front *, #adv-world *, #adv-backdrop *)::after {
    animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}