:root {
  color-scheme: dark;
  --bg-top: #1a1613;
  --bg-bottom: #0b0908;
  --panel: rgba(21, 18, 15, 0.82);
  --panel-strong: rgba(17, 14, 11, 0.9);
  --line: rgba(255, 240, 220, 0.1);
  --line-strong: rgba(255, 240, 220, 0.18);
  --text: #f7efe5;
  --muted: #cbb9a4;
  --accent: #e0bf86;
  --accent-strong: #f4ddaf;
  --shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  --font-body: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  /* Kernel 95 Pass 3 (broad normalization, K95 doc §10): same identity
     as Catharsis/First Theater, extended to the campus/main shell --
     this is the first screen anyone sees, logged in or not, so it
     should read as the same product from the very first pixel. Fonts
     vendored once, shared across venues + campus via this path. */
  --font-title: "Cinzel", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-subtitle: "Playfair Display", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/assets/fonts/playfair-display-variable.woff2") format("woff2");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/cinzel-700.woff2") format("woff2");
}

h1 {
  font-family: var(--font-title);
  letter-spacing: 0.02em;
}

h2,
h3 {
  font-family: var(--font-subtitle);
  font-weight: 600;
  letter-spacing: 0.01em;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  min-height: 100vh;
  font-family: var(--font-body);
  background:
    radial-gradient(circle at 12% 10%, rgba(142, 94, 54, 0.12), transparent 24%),
    radial-gradient(circle at 88% 0%, rgba(122, 92, 49, 0.1), transparent 22%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
  color: var(--text);
  overflow-x: hidden;
}

.app-shell {
  position: relative;
  min-height: 100vh;
}

.map-shell {
  display: flex;
  flex-direction: column;
}

.app-header {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100vw;
  max-width: none;
  z-index: 20;
  margin: 0;
  padding: 0;
  /* Was 4px -- confirmed on real hardware as "there, but just barely":
     a razor-thin sliver is nearly impossible to hover into on purpose.
     24px is still visually unobtrusive but gives a real target. */
  min-height: 24px;
  overflow: visible;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 7, 0.5) 0,
    rgba(10, 8, 7, 0.16) 2px,
    rgba(10, 8, 7, 0) 4px
  );
  box-shadow: none;
  backdrop-filter: blur(1px);
}

.app-header::before {
  content: "";
  position: absolute;
  inset: 0;
  height: 96px;
  z-index: 0;
  opacity: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 8, 7, 0.92),
    rgba(10, 8, 7, 0.7),
    rgba(10, 8, 7, 0)
  );
  backdrop-filter: blur(12px);
  pointer-events: none;
  /* Stickiness: appears immediately on hover (no delay going in), but
     lingers for a beat before fading once the pointer actually leaves --
     confirmed on real hardware that a symmetric fast fade felt twitchy,
     easy to lose again while still moving toward it. */
  transition: opacity 160ms ease 0s;
}

.app-header:not(:hover):not(:focus-within)::before {
  transition: opacity 220ms ease 500ms;
}

.app-header:hover::before,
.app-header:focus-within::before {
  opacity: 1;
}

.brand-row {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.72rem 1rem 0.82rem;
  align-items: center;
  pointer-events: none;
  transition:
    opacity 140ms ease 0s,
    transform 180ms ease 0s;
}

.app-header:not(:hover):not(:focus-within) .brand-row {
  transition:
    opacity 220ms ease 500ms,
    transform 220ms ease 500ms;
}

.app-shell--anonymous .app-header::before,
.app-shell--anonymous .brand-row,
/* First-ever visit to the map (app.js): shown plainly instead of
   relying on an Operator to discover a hover-to-reveal header on
   their own. app.js adds/removes this class; it doesn't change the
   hover behavior itself, just starts revealed. */
.app-shell--first-visit .app-header::before,
.app-shell--first-visit .brand-row,
/* Explicit opt-in via the pin button (#header-pin-toggle) -- a signed-in
   Operator's own persistent choice (localStorage), not tied to a signed-in
   state or a one-time intro the way the two selectors above are. */
.app-shell--pinned .app-header::before,
.app-shell--pinned .brand-row {
  opacity: 1;
  pointer-events: auto;
}

.header-pin-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.55;
  transform: rotate(35deg);
  transition: opacity 140ms ease, transform 140ms ease, background 140ms ease;
}

.header-pin-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  opacity: 0.85;
}

.header-pin-toggle[aria-pressed="true"] {
  opacity: 1;
  transform: rotate(0deg);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.28);
}

.app-shell--anonymous .app-header::before {
  height: 112px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand-copy {
  min-width: 0;
}

.map-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow);
  text-transform: lowercase;
}

.map-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app-header:hover .brand-row,
.app-header:focus-within .brand-row {
  opacity: 1;
  pointer-events: auto;
}

.brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.account-controls {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

[hidden] {
  display: none !important;
}

.forbidden-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #d4bd8d;
  color: #3b2a18;
  padding: 24px;
}

.forbidden-card {
  max-width: 760px;
  text-align: center;
}

.forbidden-card img {
  width: min(100%, 720px);
  border-radius: 12px;
  display: block;
  margin: 0 auto 18px;
}

.forbidden-card h1 {
  margin: 0 0 8px;
}

.forbidden-card p {
  margin: 0 0 18px;
  font-size: 1.1rem;
}

.back-map-button {
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;
  background: #6b4a24;
  color: #fff2d0;
  text-decoration: none;
  font-weight: bold;
}

.app-header h1 {
  margin: 0;
  font-size: 1.18rem;
  line-height: 1.05;
}

.app-subtitle {
  margin: 0.2rem 0 0;
  opacity: 0.92;
  font-size: 0.74rem;
}

.login-link {
  display: inline-block;
  color: var(--text);
  text-decoration: none;
  padding: 0.6rem 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  white-space: nowrap;
  box-shadow: var(--shadow);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.login-link::before {
  content: "";
  width: 0.82rem;
  height: 0.82rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 2px rgba(9, 8, 7, 0.24);
}

.login-link--signed-in::before,
.app-shell--signed-in .login-link::before {
  background: linear-gradient(180deg, #f4ddaf 0%, #e0bf86 100%);
  border-color: rgba(255, 232, 190, 0.36);
}

.login-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

.account-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  cursor: pointer;
  box-shadow: var(--shadow);
}

.account-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.1);
}

.account-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 12rem;
  padding: 0.45rem;
  border-radius: 1rem;
  background: rgba(16, 15, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 0.35rem;
  z-index: 30;
}

.account-menu-link,
.account-menu-button {
  appearance: none;
  border: 0;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.85rem;
  border-radius: 0.75rem;
  color: #fff;
  background: transparent;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}

.account-menu-link:hover,
.account-menu-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.map-stage {
  position: relative;
  flex: 1;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.25rem 0 0.75rem;
}

.map-layer {
  position: relative;
  width: min(100vw, calc((100vh - 4rem) * 1.5));
  height: min(calc(100vw / 1.5), calc(100vh - 4rem));
  background-image:
    linear-gradient(180deg, rgba(10, 8, 7, 0.08), rgba(10, 8, 7, 0.22)),
    url("/assets/mapbackground.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
}

.map-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.34), transparent 14%),
    radial-gradient(circle at 38% 26%, rgba(255, 255, 255, 0.24), transparent 12%),
    radial-gradient(circle at 68% 16%, rgba(255, 255, 255, 0.2), transparent 13%),
    radial-gradient(circle at 82% 46%, rgba(255, 255, 255, 0.24), transparent 16%),
    radial-gradient(circle at 26% 72%, rgba(255, 255, 255, 0.18), transparent 17%);
  mix-blend-mode: screen;
  transition: opacity 180ms ease;
}

.map-layer.map-layer--signed-in {
  background-image:
    linear-gradient(180deg, rgba(10, 8, 7, 0.08), rgba(10, 8, 7, 0.22)),
    url("/assets/mapbackground.png");
  /* Light, not the moodier signed-out treatment below -- just enough to
     keep the base layer in the same family as the now-toned venue icons
     rather than sitting at a different, more saturated baseline than
     everything placed on top of it. */
  filter: saturate(0.95) contrast(1.02);
}

.map-layer--anonymous {
  filter: saturate(0.82) contrast(0.95) brightness(0.95);
}

.map-layer--anonymous::before {
  opacity: 1;
}

.map-layer--anonymous .venue-pin img {
  filter:
    grayscale(0.22)
    saturate(0.75)
    brightness(0.88)
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.48));
}

.map-layer--anonymous .venue-label {
  background: rgba(9, 8, 7, 0.68);
}

.map-fog-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  /* Info Booth (50%, 93%) stays legible signed-in or out -- cut a clear hole
     through the whole fog layer (base + all puffs) rather than relying on
     puff placement to avoid it. */
  -webkit-mask-image: radial-gradient(circle at 50% 93%, transparent 0%, transparent 9%, black 16%);
  mask-image: radial-gradient(circle at 50% 93%, transparent 0%, transparent 9%, black 16%);
}

.map-fog-puff--anon-center {
  transition: opacity 250ms ease;
}

.map-layer--signed-in .map-fog-puff--anon-center {
  opacity: 0;
}

.map-fog-base {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(12, 11, 16, 0) 0%, rgba(10, 9, 14, 0.45) 100%);
  opacity: 0.28;
  transition: opacity 900ms ease;
}

.map-fog-puff {
  --puff-scale: 1;
  position: absolute;
  width: calc(19% * var(--puff-scale));
  aspect-ratio: 1.65 / 1;
  transform: translate(-50%, -50%);
  border-radius: 46% 58% 51% 44% / 54% 42% 57% 46%;
  background:
    radial-gradient(ellipse at 30% 55%, rgba(226, 226, 238, 0.52) 0 24%, transparent 58%),
    radial-gradient(ellipse at 55% 35%, rgba(234, 234, 243, 0.56) 0 27%, transparent 61%),
    radial-gradient(ellipse at 76% 59%, rgba(218, 219, 232, 0.48) 0 23%, transparent 57%);
  filter: blur(7px);
  opacity: 0.62;
  transition: opacity 1400ms ease;
}

.map-fog-puff::before,
.map-fog-puff::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(232, 232, 241, 0.44) 0 35%, rgba(226, 226, 238, 0) 72%);
}

.map-fog-puff::before {
  width: 58%;
  height: 82%;
  left: 8%;
  top: -12%;
}

.map-fog-puff::after {
  width: 65%;
  height: 76%;
  right: -5%;
  bottom: -13%;
}

.map-fog-puff.map-fog-puff--receded {
  opacity: 0;
}

.map-fog-puff--venue-wide {
  aspect-ratio: 2.05 / 1;
}

.map-fog-puff--wide-left {
  margin-left: -2.5%;
  rotate: -7deg;
}

.map-fog-puff--wide-right {
  margin-left: 2.5%;
  rotate: 6deg;
}

.map-fog-puff--ambient {
  opacity: 0.32;
}

.map-fog-puff--woods {
  opacity: 0.18;
}

.map-fog-puff--anon-center {
  opacity: 0.42;
}

.map-fog-puff--drift-slow {
  animation: map-fog-drift 34s ease-in-out infinite;
}

.map-fog-puff--drift-med {
  animation: map-fog-drift 22s ease-in-out infinite;
}

.map-fog-puff--drift-fast {
  animation: map-fog-drift 14s ease-in-out infinite;
}

@keyframes map-fog-drift {
  0% { transform: translate(-50%, -50%) translate(0, 0); }
  50% { transform: translate(-50%, -50%) translate(1.5%, 1%); }
  100% { transform: translate(-50%, -50%) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .map-fog-puff--drift-slow,
  .map-fog-puff--drift-med,
  .map-fog-puff--drift-fast {
    animation: none;
  }
}

.status {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 15;
  padding: 0.6rem 0.85rem;
  border-radius: 999px;
  background: rgba(9, 8, 7, 0.62);
  backdrop-filter: blur(8px);
  font-size: 0.95rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.tool-panel {
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.tool-row {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.tool-row:last-child {
  margin-bottom: 0;
}

.tool-row button {
  padding: 8px 12px;
  font-size: 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
}

.tool-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.venue-icons {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.venue-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 0;
  padding: 1rem;
  cursor: pointer;
}

.venue-pin .venue-notification {
  position: absolute;
  top: 0.55rem;
  right: 0.75rem;
  min-width: 1.4rem;
  height: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #cf5b31;
  color: #fff7ec;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

.venue-pin img {
  width: clamp(64px, 6vw, 88px);
  height: auto;
  object-fit: contain;
  /* The icon set spans several unrelated rendering styles (glossy 3D
     renders, painted illustration, ink sketches) and a handful carry
     their own baked-in rectangular vignette background instead of real
     alpha transparency -- confirmed by inspecting the source PNGs
     directly (info-booth, third-place, and storyboards all show a
     colored halo baked into the image itself). No CSS filter can remove
     color that already exists in the pixels, but every one of those
     source images centers its actual subject, so a soft radial mask
     fades exactly that peripheral bleed to transparent while leaving
     the subject untouched -- also cleans up the edges on icons that
     were already properly transparent, at no cost to them. */
  mask-image: radial-gradient(circle at 50% 45%, black 62%, transparent 97%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 62%, transparent 97%);
  /* One shared tone + one shared neutral ground shadow for every venue,
     replacing the mix of per-venue colored glows below -- warmed and
     desaturated slightly toward the map's own muted, painterly palette
     rather than each icon's native rendering style fighting the others. */
  filter:
    saturate(0.82)
    brightness(0.97)
    sepia(0.08)
    contrast(1.02)
    drop-shadow(0 10px 14px rgba(10, 8, 6, 0.55));
  transition: transform 0.18s ease, filter 0.18s ease;
}

.venue-pin:hover img,
.venue-pin:focus-visible img {
  transform: scale(1.08);
}

.venue-pin--third-place img {
  transform: scale(1.8);
}

.venue-pin--third-place:hover img,
.venue-pin--third-place:focus-visible img {
  transform: scale(1.88);
}

.venue-pin--first-theater img {
  transform: scale(0.75);
}

.venue-pin--first-theater:hover img,
.venue-pin--first-theater:focus-visible img {
  transform: scale(0.8);
}

.venue-label {
  padding: 0.35rem 1rem;
  border-radius: 999px;
  background: rgba(9, 8, 7, 0.58);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  opacity: 0.5;
  transform: scale(0.7);
}

.venue-pin--info-booth .venue-label {
  opacity: 1;
  transform: scale(1);
  color: #fff6d8;
  border-color: rgba(255, 220, 132, 0.5);
  background: rgba(24, 17, 8, 0.82);
  box-shadow:
    0 0 0 1px rgba(255, 234, 180, 0.12),
    0 0 18px rgba(255, 194, 82, 0.42),
    0 7px 18px rgba(0, 0, 0, 0.55);
  font-weight: 650;
  letter-spacing: 0.025em;
}

.venue-pin--info-booth {
  z-index: 31;
}

.venue-pin--audition-hall {
  z-index: 29;
}

.venue-pin--audition-hall img {
  transform: scale(1.03);
}

.venue-pin--audition-hall:hover img,
.venue-pin--audition-hall:focus-visible img {
  transform: scale(1.08);
}

.venue-pin--audition-hall .venue-label {
  opacity: 0.96;
  transform: scale(0.82);
  background: rgba(14, 10, 9, 0.76);
  border-color: rgba(255, 200, 140, 0.22);
  color: #ffe8cf;
  box-shadow:
    0 0 0 1px rgba(255, 226, 190, 0.08),
    0 6px 14px rgba(0, 0, 0, 0.45);
}

.venue-pin:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 12px;
}

/* Victory Theater emphasis */
.venue-pin--theater {
  gap: 0.5rem;
  z-index: 30;
}

.venue-pin--theater img {
  transform: scale(1.7);
  transform-origin: center bottom;
  animation: theaterPulse 3.5s ease-in-out infinite;
}

.venue-pin--theater:hover img,
.venue-pin--theater:focus-visible img {
  transform: scale(1.7);
}

.venue-pin--theater .venue-label {
  position: relative;
  z-index: 2;
  background: rgba(9, 8, 7, 0.72);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.modal-open {
  overflow: hidden;
}

.booth-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 12, 0.72);
  backdrop-filter: blur(12px);
}

.booth-sheet {
  position: relative;
  width: min(1120px, 100%);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top, rgba(232, 192, 121, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(34, 28, 24, 0.98), rgba(18, 14, 12, 0.98));
  color: #f7efe3;
  padding: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.booth-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Same chip-on-hairline label as the venues' drawer/tray section
   titles (Kernel 94 grouping pattern, carried through K95 Pass 3) --
   was a plain uppercase text line, now a small gold pill so the
   campus shell reads as the same product as the venues it leads
   into. */
.booth-eyebrow {
  display: inline-block;
  margin: 0 0 10px;
  color: var(--accent-strong);
  background: rgba(224, 191, 134, 0.1);
  border: 1px solid rgba(224, 191, 134, 0.2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.booth-title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.25rem);
}

.booth-copy {
  margin: 10px 0 0;
  color: rgba(247, 239, 227, 0.84);
  line-height: 1.55;
  max-width: 78ch;
}

.booth-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(160px, 1fr) minmax(320px, 1.4fr) minmax(180px, 1fr);
  margin-top: 20px;
}

.booth-column {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  padding: 18px;
}

.booth-column h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #f0d39e;
}

.booth-column ul {
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: rgba(247, 239, 227, 0.88);
}

.booth-center {
  background:
    radial-gradient(circle at top, rgba(214, 175, 99, 0.16), transparent 44%),
    rgba(255, 255, 255, 0.04);
}

.booth-footer {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.booth-footer strong {
  display: block;
  margin-bottom: 4px;
}

.booth-footer-copy {
  flex: 1 1 260px;
}

.booth-actions,
.booth-guest-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.booth-actions {
  flex: 1 1 auto;
  justify-content: flex-end;
}

.booth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 232, 190, 0.3);
  background: linear-gradient(180deg, #6b4a24 0%, #473018 100%);
  color: #fff2d0;
  text-decoration: none;
  font-weight: 700;
  box-shadow: var(--shadow);
}

.booth-button--secondary {
  background: rgba(255, 255, 255, 0.055);
  border-color: rgba(255, 255, 255, 0.18);
  color: #f7efe3;
}

.booth-button--placeholder:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  background: rgba(255, 255, 255, 0.035);
  border-style: dashed;
  box-shadow: none;
}

.booth-button--mailbox {
  margin-left: 14px;
}

.booth-guest-actions[hidden],
.booth-button[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .booth-actions {
    justify-content: flex-start;
  }

  .booth-button--mailbox {
    margin-left: 0;
  }
}

.map-menu {
  position: fixed;
  inset: 0;
  z-index: 75;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 5.2rem 1rem 1rem;
  background: rgba(8, 10, 12, 0.42);
  backdrop-filter: blur(10px);
}

.map-menu-sheet {
  width: min(380px, calc(100vw - 2rem));
  max-height: calc(100vh - 6.25rem);
  overflow: auto;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top, rgba(232, 192, 121, 0.12), transparent 30%),
    linear-gradient(180deg, rgba(26, 22, 19, 0.98), rgba(16, 13, 11, 0.98));
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
  padding: 18px;
}

.map-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.map-menu-eyebrow,
.soil-experts-eyebrow {
  display: inline-block;
  margin: 0 0 8px;
  color: var(--accent-strong);
  background: rgba(224, 191, 134, 0.1);
  border: 1px solid rgba(224, 191, 134, 0.2);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.map-menu-header h2,
.soil-experts-title {
  margin: 0;
  font-size: 1.6rem;
}

.map-menu-close,
.soil-experts-close {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

.map-menu-outline {
  display: grid;
  gap: 12px;
}

.map-menu-group {
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.map-menu-group h3 {
  margin: 0 0 10px;
  color: #f0d39e;
  font-size: 0.96rem;
}

.map-menu-group ul {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
}

.map-menu-group a,
.map-menu-group button {
  color: #fff5df;
  text-decoration: none;
  font: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.map-menu-group small {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 2px;
}

.map-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.map-menu-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 232, 190, 0.22);
  background: rgba(255, 255, 255, 0.04);
  color: #fff2d0;
  text-decoration: none;
  font-weight: 700;
}

.soil-experts-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 12, 0.78);
  backdrop-filter: blur(14px);
}

.soil-experts-sheet {
  position: relative;
  width: min(1180px, 100%);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(260px, 1fr) minmax(220px, 1fr);
  gap: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(circle at top, rgba(232, 192, 121, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(18, 14, 12, 0.98), rgba(10, 8, 7, 0.98));
  color: #f7efe3;
  padding: 24px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5);
}

.soil-experts-asset {
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #171210;
}

.soil-experts-asset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.soil-experts-copy {
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  color: rgba(247, 239, 227, 0.86);
  line-height: 1.6;
}

.soil-experts-copy p {
  margin: 0 0 14px;
}

/* A quiet "this one's alive" cue for the flagship venue -- depth only,
   no color, so it stays in the same coherent family as every other pin
   instead of standing out as its own differently-toned glow. */
@keyframes theaterPulse {
  0% {
    filter:
      saturate(0.82)
      brightness(0.97)
      sepia(0.08)
      contrast(1.02)
      drop-shadow(0 10px 14px rgba(10, 8, 6, 0.55));
  }
  50% {
    filter:
      saturate(0.82)
      brightness(1.01)
      sepia(0.08)
      contrast(1.02)
      drop-shadow(0 12px 20px rgba(10, 8, 6, 0.62));
  }
  100% {
    filter:
      saturate(0.82)
      brightness(0.97)
      sepia(0.08)
      contrast(1.02)
      drop-shadow(0 10px 14px rgba(10, 8, 6, 0.55));
  }
}

/* Hide old card-based layout if any old markup remains */
#venues,
.venues,
.app-content,
.venue-card,
.venue-button,
.map-overlay {
  display: none !important;
}

.login-link--signed-in {
  background: rgba(255, 220, 120, 0.14);
  border-color: rgba(255, 220, 120, 0.45);
}

/* Kernel 91: guided-tour overlay (dim/spotlight/arrow/card). One shared
   implementation mounted by /lib/tour-engine.js on every page with tour
   content -- see kernel-91 S48's "high-profile client" visual-quality bar. */
.tour-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  /* Container only -- deliberately not the dimming layer itself. A single
     full-viewport element here would sit on top of the whole page and
     swallow every click before any click-gating logic ran, no matter what
     that logic decided. The actual dimming is four .tour-mask rectangles
     framing the target, which leave the target's own hole in the DOM's
     hit-testing, not just visually. */
  pointer-events: none;
}

.tour-mask {
  position: fixed;
  z-index: 200;
  background: rgba(8, 10, 12, 0.62);
  pointer-events: auto;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tour-spotlight {
  position: fixed;
  z-index: 201;
  border-radius: 14px;
  box-shadow:
    0 0 0 2px rgba(232, 192, 121, 0.85),
    0 0 24px rgba(232, 192, 121, 0.35);
  background: transparent;
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

.tour-arrow {
  position: fixed;
  z-index: 202;
  width: 20px;
  height: 20px;
  pointer-events: none;
}

.tour-arrow--up::before,
.tour-arrow--down::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: rgba(232, 192, 121, 0.94);
  transform: rotate(45deg);
}

.tour-arrow--up::before {
  top: -6px;
}

.tour-arrow--down::before {
  bottom: -6px;
}

.tour-card {
  position: fixed;
  z-index: 203;
  pointer-events: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(circle at top, rgba(232, 192, 121, 0.14), transparent 34%),
    linear-gradient(180deg, rgba(34, 28, 24, 0.98), rgba(18, 14, 12, 0.98));
  color: #f7efe3;
  padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.tour-card-eyebrow {
  margin: 0 0 6px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #d9b36d;
  font-size: 0.72rem;
}

.tour-card h2 {
  margin: 0 0 8px;
  font-size: 1.3rem;
}

.tour-card-body {
  margin: 0;
  color: rgba(247, 239, 227, 0.88);
  line-height: 1.5;
}

.tour-card-hint {
  margin: 10px 0 0;
  color: rgba(232, 192, 121, 0.92);
  font-size: 0.85rem;
  font-style: italic;
}

.tour-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.tour-button {
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #f7efe3;
  padding: 8px 18px;
  font-size: 0.85rem;
  cursor: pointer;
}

.tour-button--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
}

.tour-button--primary {
  background: rgba(232, 192, 121, 0.9);
  border-color: rgba(232, 192, 121, 0.9);
  color: #1c1712;
  font-weight: 600;
}

.tour-button--primary:hover {
  background: rgba(232, 192, 121, 1);
}

@media (prefers-reduced-motion: reduce) {
  .tour-spotlight,
  .tour-mask {
    transition: none;
  }
}

@media (max-width: 720px) {
  .tour-card {
    padding: 16px 18px;
  }
}