/* ============================================================
   MRN GREETER — shared component (James's order, 2026-10-14)
   One host pops in, says hello in a text bubble, hops away.
   House style: navy + electric blue + cream, family colors.
   The face images are square chips shown round with
   object-fit: cover (a crop, never a stretch).
   ============================================================ */
.mrn-greeter {
  position: fixed;
  left: 14px;
  bottom: 14px;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  max-width: min(92vw, 384px);
  font-family: 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mrn-greeter .g-pop { flex: none; line-height: 0; display: flex; align-items: flex-end; }
.mrn-greeter .g-face {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #29b6ff;
  box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 0 3px rgba(41,182,255,.18);
  background: #0d1b38;
}
/* GUIDE BRAINS — the remembered guest's own face, beside the
   host who greeted them (signed-in members only): a smaller
   gold-ringed round picture, or their initial in the same
   ring when they haven't picked a photo yet. A crop via
   object-fit: cover, never a stretch. */
.mrn-greeter .g-member-face,
.mrn-greeter .g-member-badge {
  flex: none;
  width: 56px;
  height: 56px;
  margin-left: -14px;
  border-radius: 50%;
  border: 2px solid #f5c86b;
  box-shadow: 0 6px 16px rgba(0,0,0,.5);
  background: #12264d;
}
.mrn-greeter .g-member-face { object-fit: cover; }
.mrn-greeter .g-member-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5c86b;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
}
.mrn-greeter.g-has-member .g-bubble { max-width: 264px; }
.mrn-greeter .g-bubble {
  position: relative;
  background: #FFFDF4;
  color: #12264d;
  border: 1px solid #29b6ff;
  border-radius: 16px;
  padding: 10px 30px 10px 13px;
  box-shadow: 0 10px 26px rgba(0,0,0,.5);
  max-width: 300px;
}
.mrn-greeter .g-bubble::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: 22px;
  width: 14px;
  height: 14px;
  background: #FFFDF4;
  border-left: 1px solid #29b6ff;
  border-bottom: 1px solid #29b6ff;
  transform: rotate(45deg);
}
.mrn-greeter .g-name {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: #0f7fd6;
  margin-bottom: 3px;
}
.mrn-greeter .g-line { font-size: .95rem; line-height: 1.38; font-weight: 600; }
.mrn-greeter .g-help {
  display: block;
  margin-top: 6px;
  font-size: .92rem;
  line-height: 1.35;
  font-weight: 800;
  color: #0a2a52;
}
.mrn-greeter .g-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mrn-greeter .g-chip {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #0f7fd6;
  background: linear-gradient(180deg, #5cc9ff, #29b6ff 55%, #0f7fd6);
  color: #06121d;
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(6,18,29,.25);
}
.mrn-greeter .g-chip:active { filter: brightness(1.12); }
.mrn-greeter .g-sub {
  display: block;
  margin-top: 5px;
  font-size: .76rem;
  line-height: 1.35;
  font-weight: 400;
  font-style: italic;
  color: #47648f;
}
.mrn-greeter .g-close {
  position: absolute;
  top: 2px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #47648f;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

/* Entrance Law — the hop: up with a stretch, land with a squash, settle alive. */
@keyframes mrnGreeterHop {
  0%   { transform: translateY(135%) scale(.7,.7); opacity: 0; }
  30%  { opacity: 1; }
  46%  { transform: translateY(-16%) scale(.93,1.09); opacity: 1; }
  63%  { transform: translateY(0) scale(1.12,.83); }
  79%  { transform: translateY(-6%) scale(.98,1.03); }
  100% { transform: translateY(0) scale(1,1); opacity: 1; }
}
@keyframes mrnBubblePop {
  0%   { transform: scale(.5); opacity: 0; }
  70%  { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes mrnGreeterBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
.mrn-greeter.g-in .g-pop { animation: mrnGreeterHop .72s cubic-bezier(.34,1.3,.5,1) both; }
/* LIVING LOOPS (2026-10-15): the bob was the old still-picture
   wobble — a living loop never gets it (the motion is IN the
   picture now, not faked by moving the picture). Only a pending
   host's picture still bobs, exactly as before; the branded
   plate never bobs. */
.mrn-greeter.g-in img.g-face:not(.g-plate) { animation: mrnGreeterBob 2.8s ease-in-out .8s infinite; }
.mrn-greeter video.g-face { display: block; }
.mrn-greeter.g-in .g-bubble { animation: mrnBubblePop .45s ease-out .18s both; transform-origin: left bottom; }
.mrn-greeter.g-out { transition: transform .28s ease-in, opacity .28s ease-in; transform: translateY(34px); opacity: 0; }

@media (max-width: 480px) {
  .mrn-greeter { left: 10px; bottom: 10px; max-width: 94vw; }
  .mrn-greeter .g-face { width: 78px; height: 78px; }
  .mrn-greeter .g-member-face,
  .mrn-greeter .g-member-badge { width: 46px; height: 46px; margin-left: -12px; font-size: 1.05rem; }
  .mrn-greeter .g-bubble { max-width: 68vw; }
  .mrn-greeter.g-has-member .g-bubble { max-width: calc(94vw - 132px); }
  .mrn-greeter .g-line { font-size: .9rem; }
}

/* ============================================================
   THE FRONT DOOR (index.html) — the guide works the door.
   The front door already keeps fixed company: the side rail
   (left, width var(--fd-rail)), the music pill (bottom-left),
   the Set Up button (bottom-right). The guide stands clear of
   all three: right of the rail, above the music pill — an
   overlay moment only; he never moves a word of the page.
   ============================================================ */
.mrn-greeter.g-frontdoor {
  /* !important: house.css's body[data-dialect] starfield rule forces
     position:relative + z-index:1 on body children — the front door's
     own fixed furniture (rail, dungeon backdrop) fights it the same
     way. Only the front door loads house.css, so only these rules
     need the muscle. */
  position: fixed !important;
  left: calc(var(--fd-rail, 60px) + 14px);
  bottom: 96px;
  z-index: 850 !important;
  max-width: min(430px, calc(100vw - var(--fd-rail, 60px) - 24px));
}
.mrn-greeter.g-frontdoor .g-bubble { max-width: 322px; }
@media (max-width: 480px) {
  .mrn-greeter.g-frontdoor { bottom: 92px; }
  .mrn-greeter.g-frontdoor .g-bubble {
    max-width: calc(100vw - var(--fd-rail, 60px) - 122px);
  }
}

/* ============================================================
   THE VISITOR'S SWITCH — "Your Guide: On/Off" (James, 16:11).
   A small pill in the house register that rides every greeter
   page, bottom-right, whether the guide is on or off. The
   music pill's pattern: the choice lives in the visitor's
   own browser and is read before anything pops.
   ============================================================ */
.mrn-guide-switch {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 860;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 7px 9px 7px 13px;
  border-radius: 999px;
  border: 1px solid rgba(41,182,255,.55);
  background: rgba(13,27,56,.92);
  color: #e9e7df;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
}
.mrn-guide-switch .gs-state {
  flex: none;
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #5cc9ff, #29b6ff 55%, #0f7fd6);
  color: #06121d;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.mrn-guide-switch { transition: opacity .25s ease, transform .25s ease; }
/* While a greeter is up, the switch STAYS — visible and tappable
   in the corner the whole time (James, 2026-10-15: guests can
   turn the crew off at any time, and the host's own greeting
   points at this switch). It never hides on a guest again. */
.mrn-guide-switch.gs-yield { opacity: 1; pointer-events: auto; transform: none; }
.mrn-guide-switch.is-off { border-color: rgba(233,231,223,.35); color: #b9b4c7; }
.mrn-guide-switch.is-off .gs-state { background: rgba(233,231,223,.16); color: #b9b4c7; }
.mrn-guide-switch:hover { border-color: #29b6ff; }
.mrn-guide-switch:active { transform: translateY(1px); }
/* Front door: the Set Up button owns bottom-right — the switch
   stacks just above it, in the same corner a guest already knows.
   (!important for the same house.css starfield rule as above.) */
.mrn-guide-switch.g-frontdoor {
  position: fixed !important;
  z-index: 860 !important;
  right: 16px;
  bottom: 76px;
}
@media (max-width: 640px) {
  /* On phones the Season pill (seasons.js) owns bottom:78 at the
     right while a season runs — the guide switch stacks above it.
     Out of season it simply keeps this home, so the corner never
     rearranges itself. (Caught in v3 QC: the two pills overlapped.) */
  .mrn-guide-switch.g-frontdoor { right: 12px; bottom: 124px; }
}
@media (max-width: 480px) {
  .mrn-guide-switch { font-size: .74rem; min-height: 38px; }
}

/* Reduced motion: the greeter simply stands there, calm and still. */
@media (prefers-reduced-motion: reduce) {
  .mrn-greeter .g-pop,
  .mrn-greeter .g-face,
  .mrn-greeter .g-bubble { animation: none !important; }
  .mrn-greeter.g-out { transition: none; }
}

/* ============================================================
   GOOD BRAINS (2026-10-15) — the guide rides EVERY visitor
   door now (data-host="house"). Most of those pages load
   house.css, whose body[data-dialect] starfield rule forces
   position:relative + z-index:1 on body children (specificity
   1,1,1 beats the base rules) — the same fight the front door
   already won with !important. House-mode greeter + switch
   carry the same muscle, at the standard corners.
   ============================================================ */
.mrn-greeter.g-house {
  position: fixed !important;
  left: 14px;
  bottom: 14px;
  z-index: 850 !important;
}
.mrn-guide-switch.g-house {
  position: fixed !important;
  z-index: 860 !important;
}
@media (max-width: 480px) {
  .mrn-greeter.g-house { left: 10px; bottom: 10px; }
}

/* THE ASK BOX — a small question line in the bubble, an
   answer block above it, and the alt chip (Another host). */
.mrn-greeter .g-chip-alt {
  background: rgba(13,27,56,.92);
  color: #e9e7df;
  border-color: rgba(41,182,255,.55);
  box-shadow: 0 3px 8px rgba(6,18,29,.35);
}
.mrn-greeter .g-answer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(15,127,214,.45);
}
.mrn-greeter .g-answer-text {
  display: block;
  font-size: .88rem;
  line-height: 1.4;
  font-weight: 600;
  color: #0a2a52;
}
.mrn-greeter a.g-chip.g-go {
  display: inline-flex;
  align-items: center;
  margin-top: 7px;
  text-decoration: none;
}
.mrn-greeter .g-chat {
  display: flex;
  gap: 6px;
  margin-top: 9px;
}
.mrn-greeter .g-ask {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid #0f7fd6;
  background: #ffffff;
  color: #12264d;
  font-family: inherit;
  font-size: .86rem;
  font-weight: 600;
}
.mrn-greeter .g-ask::placeholder { color: #7d93b5; font-weight: 500; }
.mrn-greeter .g-ask-btn {
  flex: none;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #0f7fd6;
  background: linear-gradient(180deg, #5cc9ff, #29b6ff 55%, #0f7fd6);
  color: #06121d;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(6,18,29,.25);
}
.mrn-greeter .g-ask-btn:active { filter: brightness(1.12); }
/* The newcomer's pointer at today's news (house pages). */
.mrn-greeter .g-newsline {
  display: block;
  margin-top: 7px;
  font-size: .84rem;
  line-height: 1.4;
  font-weight: 700;
  color: #0a2a52;
}
/* The host's own reminder: the crew is yours to turn off. Warm,
   small, unmissable — hospitality, not fine print. */
.mrn-greeter .g-offhint {
  display: block;
  margin-top: 7px;
  font-size: .8rem;
  line-height: 1.4;
  font-weight: 600;
  color: #33507c;
}

/* THE SHOP DOOR — A TOUCH BRIGHTER (James, 2026-10-15): identical
   block to house.css, carried here for events.html + news.html —
   the two shop pages that load greeter.css but not house.css.
   Keep the two blocks in sync. Color/light only. */
body a[href="shop.html"]{
  color:#bfe9ff;
  text-shadow:0 0 10px rgba(124,208,255,.45);
}
body a.fd-door[href="shop.html"],
body a.btn[href="shop.html"],
body a.g-hit[href="shop.html"],
body .mrn-follow-links a[href="shop.html"]{
  background:rgba(41,182,255,.13);
  border-color:rgba(168,232,255,.8);
  box-shadow:0 0 16px rgba(41,182,255,.30), inset 0 0 10px rgba(168,232,255,.10);
}