*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root{
  --bg:        #2a2a2a;
  --surface:   #ffffff;
  --ink:       #0a0a0a;
  --ink-soft:  #444;
  --c-orange:  #F4751E;
  --c-yellow:  #FFCE28;
  --c-green:   #2BA85B;
  --c-blue:    #2B6BD9;
  --c-purple:  #6E3FCF;
  --c-red:     #E63946;
  --c-pink:    #F08BBA;
  --c-teal:    #1BA39C;
}

body {
  /* Soft cool-neutral vignette so the floating masses sit in a space,
     not on flat black. Fixed behind the panning scene. */
  background:
    radial-gradient(ellipse 130% 95% at 50% 40%,
      #3a3a40 0%, #313136 32%, #232327 70%, #171719 100%);
  background-color: var(--bg);
  background-attachment: fixed;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  height: 100vh;
  color: #eee;
}

/* ── Viewport ── */
#viewport {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  cursor: grab;
  position: relative;
  touch-action: none; /* hand all touch events to JS, prevent browser scroll/zoom interference */
}
#viewport.dragging  { cursor: grabbing; }
#viewport.rotating  { cursor: ew-resize; }

#gallery-svg {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

/* ── Nav bar ── */
#nav-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  background: rgba(20,20,20,0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 100;
}
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 46px;
  width: auto;
  display: block;
}
/* Center slot — feedback button + future action buttons */
.nav-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}
.nav-links a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }

/* ── Mini-map (top-right) ── */
#mini-map {
  position: fixed;
  top: 80px; right: 1rem;
  width: 220px;
  background: rgba(245,241,236,0.96);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  padding: 0.75rem 0.85rem 0.85rem;
  z-index: 95;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  transition: transform 0.3s, opacity 0.3s;
}
#mini-map.collapsed {
  transform: translateX(calc(100% + 1rem));
  opacity: 0;
}
#mini-map h4 {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #111;
  font-weight: 700;
  margin-bottom: 0.4rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#mini-map h4 .legend {
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  color: #777;
  font-weight: 500;
}
/* Fold/expand toggle */
.map-fold {
  background: none;
  border: none;
  padding: 0;
  margin-left: 8px;
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  line-height: 0;
  flex: 0 0 auto;
}
.map-fold:hover { color: #111; }
/* Specific enough to beat `#mini-map svg { width:100% }` (equal-specificity
   rule defined later in this file), which otherwise stretches the chevron. */
#mini-map .map-fold svg { width: 15px; height: 15px; transition: transform 0.25s; }
#mini-map.folded { width: auto; padding-bottom: 0.55rem; }
#mini-map.folded #map-svg { display: none; }
#mini-map.folded .legend { display: none; }
#mini-map.folded h4 { margin-bottom: 0; }
#mini-map.folded .map-fold svg { transform: rotate(180deg); }
#mini-map > svg { display: block; width: 100%; height: auto; }
#mini-map .map-room { cursor: pointer; transition: opacity 0.15s; }
#mini-map .map-room:hover { opacity: 0.7; }

/* ── Filikon companion (always visible; speech bubble only in tour mode) ── */
#filikon-companion {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  pointer-events: none;
}
/* Speech bubble hidden by default; shown during guided tour */
#filikon-companion.active .speech-bubble { display: block; }
#filikon-companion .filikon-avatar {
  width: 108px;
  height: 108px;
  pointer-events: auto;
  cursor: grab;
  animation: filikonIdle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
  transition: opacity 0.2s;
}
#filikon-companion .filikon-avatar.fk-ghost { opacity: 0.22; cursor: grabbing; animation: none; }
/* Drag hint label under avatar */
#filikon-drag-hint {
  position: absolute;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.53rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
#filikon-companion.active #filikon-drag-hint { display: none; }

/* "Grab me!" badge — Street-View-pegman-style pill above Filikon */
#filikon-badge {
  position: absolute;
  bottom: 116px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  animation: badgeFloat 2.8s ease-in-out infinite;
}
#filikon-badge .badge-pill {
  background: var(--c-orange);
  color: #fff;
  font: 800 0.55rem/1.3 'Inter', sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  white-space: normal;
  text-align: center;
  max-width: 88px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.18),
    0 0 14px 3px rgba(244,117,30,0.65),
    0 4px 12px rgba(0,0,0,0.45);
}
#filikon-badge .badge-arrow {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid var(--c-orange);
  filter: drop-shadow(0 2px 4px rgba(244,117,30,0.6));
}
@keyframes badgeFloat {
  0%, 100% { transform: translateX(-50%) translateY(0);   }
  50%       { transform: translateX(-50%) translateY(-5px); }
}
#filikon-companion.active #filikon-badge  { display: none; }
#filikon-badge.hidden { display: none; }
/* wrapper to allow absolutely-placed hint */
#filikon-avatar-wrap {
  position: relative;
  pointer-events: auto;
}
@keyframes filikonIdle {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-6px) rotate(1deg); }
}
@keyframes filikonWave {
  0%,100% { transform: rotate(-8deg) scale(1.05); }
  50%     { transform: rotate(8deg)  scale(1.05); }
}
#filikon-companion .filikon-avatar.waving { animation: filikonWave 0.55s ease-in-out 3; }
#filikon-companion .filikon-avatar.blinking { animation: filikonBlink 0.2s ease-in-out; }
@keyframes filikonBlink {
  0%,100% { transform: scaleY(1); }
  50%     { transform: scaleY(0.92); }
}

#filikon-companion .speech-bubble {
  display: none;   /* shown by the .active rule above */
  position: relative;
  max-width: 320px;
  background: #fff;
  color: #111;
  padding: 0.95rem 1.15rem 0.85rem;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  pointer-events: auto;
  font-size: 0.86rem;
  line-height: 1.5;
  border: 1.5px solid #111;
}
#filikon-companion .speech-bubble::before {
  content: "";
  position: absolute;
  left: -9px; bottom: 18px;
  width: 16px; height: 16px;
  background: #fff;
  border-left: 1.5px solid #111;
  border-bottom: 1.5px solid #111;
  transform: rotate(45deg);
}
#filikon-companion .bubble-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
#filikon-companion .bubble-text { margin-bottom: 0.7rem; }
#filikon-companion .bubble-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  font-size: 0.72rem;
}
#filikon-companion .bubble-controls button {
  background: #fff;
  color: #111;
  border: 1.4px solid #111;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
#filikon-companion .bubble-controls button:hover {
  background: #111; color: #fff;
}
#filikon-companion .bubble-controls button.primary {
  background: var(--c-orange); color: #fff; border-color: #111;
}
#filikon-companion .bubble-controls button.primary:hover {
  background: #111;
}

/* ── Welcome modal ── */
#welcome-modal {
  position: fixed;
  inset: 0;
  background: rgba(15,15,15,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#welcome-modal.hidden {
  opacity: 0;
  pointer-events: none;
}
#welcome-card {
  background: #f5f1ec;
  color: #111;
  border: 2px solid #111;
  border-radius: 16px;
  /* Padding scales with viewport so the card stays proportionate on small
     screens instead of overflowing. */
  padding: clamp(1.5rem, 4vw, 3.25rem) clamp(1.25rem, 3.5vw, 3rem) clamp(1.5rem, 3.5vw, 2.75rem);
  max-width: 620px;
  width: calc(100% - 2rem);
  /* Never exceed the viewport height; scroll internally if content is taller. */
  max-height: 92vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  position: relative;
}
.welcome-logo-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-bottom: clamp(0.9rem, 2.4vh, 2rem);
}

#welcome-card .welcome-logo {
  width: clamp(120px, 22vw, 190px);
  height: auto;
  display: block;
  flex-shrink: 0;
}

.welcome-logo-rule {
  width: 1px;
  height: 56px;
  background: #c0b09a;
  flex-shrink: 0;
}

.welcome-tagline {
  font: 400 0.64rem/1.65 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7d72;
  text-align: left;
  margin: 0;
}
/* Override the generic #welcome-card p rule so the tagline keeps its
   own font size and zero margin regardless of screen width. */
#welcome-card p.welcome-tagline {
  font: 400 0.64rem/1.65 'Inter', sans-serif;
  color: #8a7d72;
  margin: 0;
}
#welcome-card .filikon-hero {
  width: clamp(72px, 10vh, 130px);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto clamp(0.25rem, 0.6vh, 0.5rem);
  animation: filikonIdle 3.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2));
}
#welcome-card .hello {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-orange);
  font-weight: 700;
  margin-bottom: clamp(0.3rem, 0.8vh, 0.5rem);
}
#welcome-card h1 {
  font: 600 clamp(1.4rem, 3.5vw, 2rem)/1.15 'EB Garamond', serif;
  margin-bottom: clamp(0.5rem, 1.2vh, 0.8rem);
  color: #111;
}
#welcome-card p {
  font: 400 clamp(0.92rem, 1.8vh, 1rem)/1.5 'EB Garamond', serif;
  color: #3a3530;
  margin-bottom: clamp(1rem, 2.4vh, 1.6rem);
}
#welcome-card .wbuttons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
#welcome-card button {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid #111;
  transition: transform 0.15s, background 0.15s, color 0.15s;
}
#welcome-card button:active { transform: scale(0.96); }
#welcome-card .btn-primary {
  background: var(--c-orange);
  color: #fff;
}
#welcome-card .btn-primary:hover { background: #111; }
#welcome-card .btn-secondary {
  background: #fff; color: #111;
}
#welcome-card .btn-secondary:hover { background: #111; color: #fff; }

/* ── Welcome modal: two-state pitch layout ── */

/* Widen the card when State 1 is active */
#welcome-card.welcome-card--state1 {
  max-width: 840px;
  text-align: left;
}

/* State 1 two-column layout */
.welcome-pitch-layout {
  display: flex;
  flex-direction: row;
  gap: 2.25rem;
  align-items: flex-start;
}

.welcome-pitch-body {
  flex: 1 1 0;
  min-width: 0;
}

#welcome-card .welcome-pitch-text p {
  font: 400 1rem/1.65 'EB Garamond', Georgia, serif;
  color: #2a2520;
  margin-bottom: 1.1rem;
  text-align: left;
  hyphens: none;
}

#welcome-card .welcome-pitch-text p:last-child {
  margin-bottom: 1.6rem;
}

.welcome-pitch-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Filikon aside: portrait + bubble */
.welcome-filikon-aside {
  flex: 0 0 196px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding-top: 0.25rem;
}

.welcome-filikon-aside .filikon-hero {
  width: 160px;
  height: 160px;
  margin: 0;
  animation: filikonIdle 3.5s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.2));
}

.filikon-side-bubble {
  background: #fff;
  border: 1.5px solid #c8b89a;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  position: relative;
  width: 100%;
}

/* Speech-bubble pointer (upward triangle pointing toward Filikon above) */
.filikon-side-bubble::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #c8b89a;
}
.filikon-side-bubble::after {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #fff;
}

#welcome-card .filikon-side-bubble p {
  font: italic 0.88rem/1.58 'EB Garamond', Georgia, serif;
  color: #5a4e44;
  margin: 0;
  text-align: center;
}

/* Skip / re-read links */
/* State 2 centered within (possibly wider) card */
#welcome-state-2 {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

.welcome-discover-wrap {
  margin-top: 1.4rem;
}

.welcome-discover-btn {
  background: none;
  border: 1.5px solid #c8b89a;
  border-radius: 8px;
  padding: 0.6rem 1.1rem;
  font: italic 600 1rem/1 'EB Garamond', Georgia, serif;
  color: #7a6b5e;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  letter-spacing: 0.01em;
}
.welcome-discover-btn:hover {
  border-color: var(--c-orange, #F4751E);
  color: var(--c-orange, #F4751E);
  background: rgba(244, 117, 30, 0.05);
}

/* Mobile: single-column, pitch first then Filikon aside below */
@media (max-width: 600px) {
  #welcome-modal {
    align-items: flex-start;
    overflow-y: auto;
    padding: 1.5vh 0;
  }

  #welcome-card.welcome-card--state1 {
    text-align: left;
  }

  .welcome-pitch-layout {
    flex-direction: column;
    gap: 1.5rem;
  }

  /* On mobile, Filikon aside goes below the pitch */
  .welcome-filikon-aside {
    flex: none;
    width: 100%;
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
  }

  .welcome-filikon-aside .filikon-hero {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
  }

  .filikon-side-bubble {
    flex: 1;
    width: auto;
  }

  /* Hide the upward pointer when layout switches to horizontal row */
  .filikon-side-bubble::before,
  .filikon-side-bubble::after {
    display: none;
  }

  #welcome-card .filikon-side-bubble p {
    text-align: left;
  }
}

/* ── Detail panel ── */
#detail-panel {
  position: fixed;
  top: 0; right: 0;
  width: min(500px, 96vw);
  height: 100vh;
  background: #f5f1ec;
  z-index: 200;
  transform: translateX(100%);
  transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -12px 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
}
#detail-panel.open { transform: translateX(0); }

#detail-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.07);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #444;
  z-index: 10;
  transition: background 0.2s;
  font-family: inherit;
}
#detail-close:hover { background: rgba(0,0,0,0.13); }

#detail-content {
  overflow-y: auto;
  flex: 1;
  padding: 2.25rem 2rem 3rem;
  scrollbar-width: thin;
  scrollbar-color: #c0bbb5 #f5f1ec;
}
#detail-content::-webkit-scrollbar { width: 5px; }
#detail-content::-webkit-scrollbar-thumb { background: #c0bbb5; border-radius: 3px; }

.detail-tagline {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: #111;
  color: #fff;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-family: 'Archivo Black', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.detail-tagline .dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.detail-curator-note {
  display: flex;
  gap: 0.75rem;
  margin-top: 2rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1.5px solid #111;
  border-radius: 10px;
  position: relative;
}
.detail-curator-note img {
  width: 54px; height: 54px;
  flex-shrink: 0;
}
.detail-curator-note .cn-body {
  flex: 1;
  font: italic 0.9rem/1.5 'EB Garamond', serif;
  color: #2a2520;
}
.detail-curator-note .cn-label {
  display: block;
  font: 700 0.58rem/1 'Inter', sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: 0.25rem;
  font-style: normal;
}

/* ── SVG interactive elements ── */
.exhibit-panel, .exhibit-tag { cursor: pointer; }
.exhibit-tag { transition: transform 0.15s; transform-origin: center; transform-box: fill-box; }
.exhibit-tag:hover { filter: brightness(1.08); }
.room-group { transition: opacity 0.2s; }

/* ── Doorway step-through hotspots (Street View-style) ── */
.doorway-hit { cursor: pointer; }
.doorway-hit .doorway-chevron,
.doorway-hit .doorway-glow { transition: opacity 0.18s ease; }
.doorway-hit:hover .doorway-chevron { opacity: 0.92; }
.doorway-hit:hover .doorway-glow    { opacity: 0.55; }

/* ── First-person POV overlay ── */
#pov-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: #1b1b1b;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#pov-overlay.active { opacity: 1; pointer-events: auto; }
#pov-overlay.hidden { display: none; }
#pov-svg {
  width: 100%; height: 100%; display: block;
  user-select: none;
}
#pov-scene {
  transform-origin: center center;
  transition: transform 0.65s cubic-bezier(.2,.7,.3,1),
              opacity   0.45s ease;
}
#pov-hud-top {
  position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2; gap: 1rem;
}
#pov-hud-bottom {
  position: absolute; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.5rem; z-index: 2;
}
.pov-btn {
  background: rgba(20,20,20,0.82);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.6rem 1rem; border-radius: 8px;
  font: 600 0.78rem/1 Inter, sans-serif;
  letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pov-btn:hover {
  background: rgba(40,40,40,0.95);
  border-color: rgba(255,255,255,0.32);
}
#pov-room-label {
  background: rgba(20,20,20,0.82);
  color: #fff;
  padding: 0.55rem 1rem; border-radius: 8px;
  font-family: Inter, sans-serif;
  display: flex; align-items: baseline; gap: 0.6rem;
}
#pov-room-label #pov-room-num {
  font: 800 0.82rem/1 'Archivo Black', sans-serif;
  letter-spacing: 0.14em; opacity: 0.62;
}
#pov-room-label #pov-room-title {
  font-weight: 600; font-size: 0.92rem;
}
.pov-panel   { cursor: pointer; transition: filter 0.15s; }
.pov-panel:hover   { filter: brightness(1.08); }
.pov-doorway { cursor: pointer; transition: filter 0.15s; }
.pov-doorway:hover { filter: brightness(1.45); }
.pov-floor   { cursor: crosshair; transition: filter 0.15s; }
.pov-floor:hover   { filter: brightness(0.97); }

/* ── View controls ── */
#view-controls {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 100;
  align-items: center;
}
.ctrl-row {
  display: flex;
  gap: 0.4rem;
}
.ctrl-btn {
  width: 34px; height: 34px;
  background: rgba(20,20,20,0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.82);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  user-select: none;
  line-height: 1;
}
.ctrl-btn:hover  { background: rgba(70,70,90,0.94); color: #fff; }
.ctrl-btn:active { transform: scale(0.91); }
.ctrl-btn.accent {
  background: var(--c-orange);
  color: #fff;
  border-color: #fff2;
}
.ctrl-btn.accent:hover { background: #111; }
/* Guided-tour route icon (distinct from the nav hamburger) */
.ctrl-btn .ctrl-icon { width: 19px; height: 19px; display: block; }
#view-label {
  font-size: 0.58rem;
  color: rgba(255,255,255,0.3);
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  padding-top: 0.1rem;
  font-weight: 600;
}

/* ── Hint ── */
#hint {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20,20,20,0.78);
  color: rgba(255,255,255,0.55);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  padding: 0.45rem 1.1rem;
  border-radius: 20px;
  backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.8s ease;
  white-space: nowrap;
}

@media (max-width: 768px) {
  #mini-map { width: 160px; top: 100px; right: 0.5rem; padding: 0.55rem; }
  #filikon-companion .filikon-avatar { width: 80px; height: 80px; }
  #filikon-companion .speech-bubble { max-width: 220px; font-size: 0.78rem; }
  #welcome-card { padding: 2rem 1.5rem 1.75rem; }
  #welcome-card h1 { font-size: 1.5rem; }
}

/* ── Panorama viewer overlay (Pannellum, Louvre-style) ── */
#pano-overlay {
  position: fixed; inset: 0;
  background: #000; z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
#pano-overlay.active { opacity: 1; pointer-events: auto; }
#pano-overlay.hidden { display: none; }
#pano-container { position: absolute; inset: 0; }
#pano-header {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 1rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; pointer-events: none; z-index: 10;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  color: #fff; font-family: 'Inter', sans-serif;
}
#pano-title {
  font: 700 0.95rem/1.2 'Inter', sans-serif; letter-spacing: 0.02em;
}
#pano-title small {
  display: block; font-size: 0.78rem; opacity: 0.72; font-weight: 400;
  letter-spacing: 0.04em; margin-top: 2px;
}
#pano-exit {
  pointer-events: auto;
  background: rgba(255,255,255,0.12); color: #fff;
  border: 1px solid rgba(255,255,255,0.32);
  padding: 0.55rem 1.05rem; border-radius: 999px;
  cursor: pointer; font: 700 0.82rem 'Inter', sans-serif;
  letter-spacing: 0.05em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  transition: background 0.15s, border-color 0.15s;
}
#pano-exit:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
}
/* Style Pannellum hotspots — minimalist markers */
#pano-container .custom-hotspot {
  position: relative;
  width: 38px; height: 38px; margin-left: -19px; margin-top: -19px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: 2px solid #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  font: 800 14px 'Inter', sans-serif; color: #0a0a0a;
  cursor: pointer; pointer-events: auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
  transition: transform 0.15s, background 0.15s;
}
#pano-container .custom-hotspot:hover {
  /* No CSS transform here — Pannellum uses `transform: translate(...)`
     to position the hotspot, and any transform set on the element
     overrides that, causing the marker to jump to the viewer origin. */
  background: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,0.45), 0 3px 14px rgba(0,0,0,0.4);
}
#pano-container .custom-hotspot.door-hotspot {
  background: rgba(10,10,10,0.88); color: #fff;
  width: 60px; height: 60px; margin-left: -30px; margin-top: -30px;
  font-size: 24px;
}
#pano-container .custom-hotspot.door-hotspot:hover {
  background: #0a0a0a;
  box-shadow: 0 0 0 6px rgba(10,10,10,0.35), 0 3px 16px rgba(0,0,0,0.55);
}
#pano-container .custom-hotspot .hotspot-tooltip {
  position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; padding: 6px 12px;
  background: rgba(0,0,0,0.88); color: #fff;
  font: 600 12px 'Inter', sans-serif; letter-spacing: 0.04em;
  border-radius: 4px; opacity: 0; transition: opacity 0.15s;
  pointer-events: none;
}
#pano-container .custom-hotspot:hover .hotspot-tooltip { opacity: 1; }
/* Floor waypoints: the golden target rings are baked directly into the
   equirectangular panorama image (see _discs in the ray-cast loop).
   Clicking them is handled by _handlePanoFloorClick on the container —
   we do NOT emit Pannellum CSS hotspots for floor targets, because
   the hotspot's rectilinear screen-position projection did not line up
   with the equirectangular disc pixels and the marker kept ending up
   under the visitor's feet. */

/* ── Podium floating call-to-action label ── */
#podium-label {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  pointer-events: none;
  z-index: 120;
}
#podium-label .pl-text {
  background: linear-gradient(135deg, #f97316 0%, #fbbf24 50%, #f4751e 100%);
  color: #fff;
  font: 800 0.86rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.44rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(255,220,100,0.45);
  box-shadow: 0 0 14px rgba(249,115,22,0.75), 0 2px 8px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.35);
  animation: plPulse 1.8s ease-in-out infinite;
}
#podium-label .pl-arrow {
  font-size: 1.5rem;
  color: #fb923c;
  text-shadow: 0 0 8px rgba(251,146,60,0.95), 0 0 18px rgba(251,146,60,0.5);
  animation: plBounce 1.0s ease-in-out infinite;
  line-height: 1;
}
@keyframes plBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(7px); }
}
@keyframes plPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(249,115,22,0.65), 0 2px 8px rgba(0,0,0,0.55),
                         inset 0 1px 0 rgba(255,255,255,0.35); }
  50%       { box-shadow: 0 0 26px rgba(251,191,36,1.0),  0 2px 8px rgba(0,0,0,0.55),
                         inset 0 1px 0 rgba(255,255,255,0.35); }
}

/* ── Island "Reading Activity!" floating capsule ── */

/* ── Door destination banners ─────────────────────────────────────────── */
#door-banners {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 115;
}

.door-banner {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: dbFloat 3.2s ease-in-out infinite;
}

/* The star is drawn on ::before (a roughly-square pseudo-element) so the
   4 arms stay equal-length regardless of the text width.
   The text in .db-pill sits on top, unclipped. */
.door-banner .db-pill {
  position: relative;
  display: inline-block;
  padding: 4px 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #1a1a2e;
  white-space: nowrap;
  text-align: center;
}

.door-banner .db-pill::before {
  content: '';
  position: absolute;
  /* Extend vertically so the pseudo-element is roughly square,
     giving the 4-pointed star equal-length arms. */
  top: -30px;
  bottom: -30px;
  left: -6px;
  right: -6px;
  background: rgba(255, 251, 240, 0.94);
  clip-path: polygon(
    50%  3%,
    59%  38%,
    97%  50%,
    59%  62%,
    50%  97%,
    41%  62%,
    3%   50%,
    41%  38%
  );
  filter: drop-shadow(0 5px 20px rgba(0, 0, 0, 0.32));
  z-index: -1;
}

@keyframes dbFloat {
  0%,  100% { transform: translate(-50%, -50%); }
  50%        { transform: translate(-50%, calc(-50% - 9px)); }
}

#island-label {
  position: absolute;
  transform: translate(-4%, -100%) rotate(-4deg);
  pointer-events: none;
  z-index: 120;
}
#island-label .il-text {
  display: inline-block;
  background: linear-gradient(135deg, #047857 0%, #10b981 55%, #059669 100%);
  color: #fff;
  font: 800 0.78rem/1 'Inter', sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.40rem 1.05rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(110,231,183,0.40);
  box-shadow: 0 0 12px rgba(16,185,129,0.60), 0 2px 8px rgba(0,0,0,0.45),
              inset 0 1px 0 rgba(255,255,255,0.28);
  animation: ilPulse 2.4s ease-in-out infinite;
}
@keyframes ilPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(16,185,129,0.50), 0 2px 8px rgba(0,0,0,0.45),
                         inset 0 1px 0 rgba(255,255,255,0.28); }
  50%       { box-shadow: 0 0 22px rgba(52,211,153,0.90), 0 2px 8px rgba(0,0,0,0.45),
                         inset 0 1px 0 rgba(255,255,255,0.28); }
}

/* ── Podium glow animation ── */
.podium-trigger { cursor: pointer; }
.podium-glow { animation: podiumGlow 2.4s ease-in-out infinite; }
@keyframes podiumGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1.0; }
}

/* ── Widget modal overlay ── */
#widget-modal {
  display: none;          /* JS sets flex; never toggled by CSS alone */
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem 2rem;
  perspective: 1400px;    /* depth context for child 3-D spin */
}
/* Backdrop fade-in when opening */
#widget-modal.open {
  animation: wm-backdrop-in 0.40s ease forwards;
}
/* Backdrop fade-out when closing */
#widget-modal.closing {
  animation: wm-backdrop-out 0.35s ease forwards;
}
@keyframes wm-backdrop-in {
  from { background: rgba(8,8,20,0);    backdrop-filter: blur(0px); }
  to   { background: rgba(8,8,20,0.80); backdrop-filter: blur(6px); }
}
@keyframes wm-backdrop-out {
  from { background: rgba(8,8,20,0.80); backdrop-filter: blur(6px); }
  to   { background: rgba(8,8,20,0);    backdrop-filter: blur(0px); }
}

/* Card whirl-in: 3 full rotations + springy overshoot */
#widget-modal.open #widget-modal-inner {
  animation: wm-card-in 1.60s cubic-bezier(0.22, 1.10, 0.50, 1) both;
}
/* Card whirl-out: 3 full rotations accelerating away */
#widget-modal.closing #widget-modal-inner {
  animation: wm-card-out 0.90s cubic-bezier(0.60, 0, 0.90, 0.15) both;
}
@keyframes wm-card-in {
  0%   { transform: rotateY(-1280deg) rotateZ(-15deg) scale(0.25); opacity: 0; }
  35%  { opacity: 1; }
  78%  { transform: rotateY(22deg)   rotateZ(4deg)   scale(1.05); }
  90%  { transform: rotateY(-8deg)   rotateZ(-1deg)  scale(0.98); }
  100% { transform: rotateY(0deg)    rotateZ(0deg)   scale(1);    opacity: 1; }
}
@keyframes wm-card-out {
  0%   { transform: rotateY(0deg)    rotateZ(0deg)   scale(1);    opacity: 1; }
  25%  { opacity: 0.8; }
  100% { transform: rotateY(1270deg) rotateZ(18deg)  scale(0.20); opacity: 0; }
}

#widget-modal-inner {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 2.2rem 2rem 1.8rem;
  max-width: 1100px;
  width: 100%;
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
  transform-origin: center center;
  opacity: 0;   /* starts invisible — animation always controls visibility */
  /* CSS vars required by market widget */
  --card-bg: #f5f3ff;
  --accent: #6366f1;
  --text-color: #1a1a1a;
  --secondary: #6b7280;
}
#widget-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #f3f4f6;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: #374151;
  transition: background 0.18s;
  z-index: 10;
}
#widget-modal-close:hover { background: #e5e7eb; color: #111; }

/* ── Intro reading modal ── */
#intro-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
  overflow-y: auto;
  padding: 8vh 1rem 5vh;
}
#intro-modal.open    { animation: im-backdrop-in  0.50s ease forwards; }
#intro-modal.closing { animation: im-backdrop-out 0.40s ease forwards; }
@keyframes im-backdrop-in {
  from { background: rgba(6,4,2,0);    backdrop-filter: blur(0px); }
  to   { background: rgba(6,4,2,0.88); backdrop-filter: blur(8px); }
}
@keyframes im-backdrop-out {
  from { background: rgba(6,4,2,0.88); backdrop-filter: blur(8px); }
  to   { background: rgba(6,4,2,0);    backdrop-filter: blur(0px); }
}
#intro-modal-inner {
  position: relative;
  max-width: 860px;   /* widened for rich exhibit content */
  margin: 0 auto;
  background: #faf8f4;
  border-radius: 5px;
  padding: 3.2rem 3.6rem 2.8rem;
  box-shadow: 0 32px 100px rgba(0,0,0,0.65);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
}
#intro-modal.open #intro-modal-inner {
  animation: im-card-in 0.55s cubic-bezier(0.22,1.0,0.36,1) 0.12s both;
}
#intro-modal.closing #intro-modal-inner {
  animation: im-card-out 0.38s cubic-bezier(0.60,0,0.90,0.15) both;
}
@keyframes im-card-in {
  from { opacity:0; transform: translateY(28px) scale(0.98); }
  to   { opacity:1; transform: translateY(0)    scale(1);    }
}
@keyframes im-card-out {
  from { opacity:1; transform: translateY(0)    scale(1);    }
  to   { opacity:0; transform: translateY(-16px) scale(0.97); }
}
#intro-modal-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none;
  border: 1px solid #c8b89a;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: #7a6e62;
  transition: background 0.18s, color 0.18s;
}
#intro-modal-close:hover { background: #ede9e0; color: #1a1614; }

/* ── Intro modal: term-definition tooltips ── */
#intro-modal .term-definition {
  position: relative;
  cursor: pointer;
  color: inherit;
  border-bottom: 1px dashed #8a7560;
  display: inline;
  transition: color 0.22s, border-bottom-color 0.22s;
}
#intro-modal .term-definition:hover,
#intro-modal .term-definition.active {
  color: #6b5c4e;
  border-bottom-color: #6b5c4e;
}
.definition-tooltip {
  display: none;
  position: fixed;
  background: #faf8f4;
  color: #1a1614;
  padding: 1.25rem 1.5rem 1.1rem;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22), 0 0 0 1px #ddd8cf;
  z-index: 10100;
  min-width: 300px;
  max-width: 460px;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  font: 400 0.9rem/1.6 Inter,sans-serif;
}
.definition-tooltip strong {
  display: block;
  font: 600 0.95rem/1.4 Inter,sans-serif;
  color: #6b5c4e;
  margin-bottom: 0.55em;
}
.definition-tooltip .tt-body {
  display: block;
  margin: 0;
  line-height: 1.75;
  color: #2a2520;
  font-size: 0.9rem;
}
.definition-tooltip em {
  display: block;
  margin-top: 0.7em;
  font-style: italic;
  font-size: 0.83rem;
  line-height: 1.5;
  color: #7a6e62;
  opacity: 0.9;
}
.definition-tooltip-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(0,0,0,0.07);
  border: none;
  color: #7a6e62;
  font-size: 1rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  z-index: 10101;
}
.definition-tooltip-close:hover { opacity: 1; background: rgba(0,0,0,0.14); }

.im-room-tag {
  font: 600 0.85rem/1 Inter,sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a7560;
  margin: 0 0 1.3rem;
}
.im-title {
  font: 600 3.0rem/1.2 'EB Garamond',Georgia,serif;
  color: #1a1614;
  margin: 0 0 0.5rem;
}
.im-rule { border: none; border-top: 1px solid #c8b89a; margin: 1.8rem 0; }
.im-body { font: 400 1.5rem/1.9 'EB Garamond',Georgia,serif; color: #2a2520; }
.im-body p { margin: 0 0 1.4rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.im-body h3 {
  font: 600 1.65rem/1.2 'EB Garamond',Georgia,serif;
  color: #1a1614;
  margin: 2.2rem 0 1rem;
}
.im-newton-row {
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  margin: 1.8rem 0;
  padding: 1.4rem;
  background: #f0ece4;
  border-radius: 6px;
}
.im-newton-img {
  flex-shrink: 0;
  width: 160px;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.im-newton-quote {
  border-left: 3px solid #8a7560;
  padding-left: 1.3rem;
  margin: 0 0 1.2rem;
}
.im-newton-quote p {
  font: italic 1.35rem/1.75 'EB Garamond',Georgia,serif;
  color: #2a2520;
  margin: 0 0 0.6rem;
}
.im-newton-quote cite {
  font: 400 0.9rem/1 Inter,sans-serif;
  color: #7a6e62;
  font-style: normal;
}
.im-smith-quote {
  border-left: 2px solid #8a7560;
  padding-left: 1.3rem;
  margin: 1.4rem 0 0.2rem;
}
.im-smith-quote p {
  font: italic 1.1rem/1.7 'EB Garamond',Georgia,serif;
  color: #2a2520;
  margin: 0 0 0.5rem;
}
.im-smith-quote cite {
  font: 400 0.85rem/1 Inter,sans-serif;
  color: #7a6e62;
  font-style: normal;
}
.im-smith-link {
  display: block;
  margin-top: 0.55rem;
  font: 400 0.8rem/1 Inter,sans-serif;
  color: #8a7560;
  text-decoration: none;
}
.im-smith-link:hover { text-decoration: underline; }
#intro-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 1.5px solid #8a7560;
  background: transparent;
  color: #4a3e30;
  font: 600 0.8rem/1 Inter,sans-serif;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#intro-audio-btn:hover, #intro-audio-btn.playing { background: #8a7560; color: #fff; }
.im-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.3rem;
  background: #1a1614;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font: 700 0.76rem/1 Inter,sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: background 0.18s;
}
.im-footer-link:hover { background: #3a2e28; }
@media (max-width: 600px) {
  #intro-modal-inner { padding: 2.5rem 1.4rem 2rem; }
  .im-newton-row { flex-direction: column; }
  .im-newton-img { width: 90px; }
}

/* ── Market widget styles (scoped to modal) ── */
#widget-modal-inner .market-widget {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  max-width: 100%;
}
#widget-modal-inner .market-widget h3 {
  text-align: center;
  margin: 0 0 0.4rem 0;
  color: var(--accent);
  font-size: 1.35rem;
  font-weight: 700;
}
#widget-modal-inner .market-widget .subtitle {
  text-align: center;
  margin: 0 0 1.1rem 0;
  color: var(--text-color);
  font-size: 0.92rem;
  line-height: 1.5;
}
#widget-modal-inner .market-control-panel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: rgba(99,102,241,0.06);
  border-radius: 10px;
}
#widget-modal-inner .market-control-panel label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.87rem;
}
#widget-modal-inner input[type="range"] {
  width: 100%;
  height: 8px;
  -webkit-appearance: none;
  appearance: none;
  background: linear-gradient(to right, var(--accent), #818cf8);
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
#widget-modal-inner input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
#widget-modal-inner .range-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--secondary);
}
#widget-modal-inner .range-value { font-weight: 700; color: var(--accent); font-size: 1.05rem; }
#widget-modal-inner .market-reset-btn {
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.85rem;
  transition: all 0.25s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
#widget-modal-inner .market-reset-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(99,102,241,0.4); }
#widget-modal-inner .market-content {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1rem;
  align-items: start;
}
@media (max-width: 600px) {
  #widget-modal-inner .market-content { grid-template-columns: 1fr; }
}
#widget-modal-inner .market-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
  margin-bottom: 0;
}
#widget-modal-inner .market-card {
  padding: 0.7rem;
  border-radius: 10px;
  text-align: center;
}
#widget-modal-inner .market-card.competitive {
  background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(16,185,129,0.04));
  border: 2px solid #10b981;
}
#widget-modal-inner .market-card.monopoly {
  background: linear-gradient(135deg, rgba(220,38,38,0.1), rgba(220,38,38,0.04));
  border: 2px solid #dc2626;
}
#widget-modal-inner .market-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  margin-bottom: 0.45rem;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
#widget-modal-inner .market-card.competitive .market-card-title { color: #10b981; }
#widget-modal-inner .market-card.monopoly   .market-card-title { color: #dc2626; }
#widget-modal-inner .market-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
#widget-modal-inner .market-metric {
  padding: 0.35rem;
  background: rgba(255,255,255,0.85);
  border-radius: 6px;
}
#widget-modal-inner .market-metric-label { font-size: 0.72rem; color: var(--secondary); margin-bottom: 0.1rem; }
#widget-modal-inner .market-metric-value { font-size: 1rem; font-weight: 700; }
#widget-modal-inner .market-card.competitive .market-metric-value { color: #10b981; }
#widget-modal-inner .market-card.monopoly   .market-metric-value { color: #dc2626; }
#widget-modal-inner #marketGraph {
  display: block;
  width: 100%;
  height: 280px;
  border: 2px solid rgba(99,102,241,0.25);
  border-radius: 10px;
  background: #fafafa;
  box-shadow: 0 3px 12px rgba(0,0,0,0.07);
}
#widget-modal-inner .market-explanation {
  background: rgba(99,102,241,0.05);
  padding: 0.75rem 1rem;
  border-radius: 10px;
  margin-top: 0.8rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-color);
  border-left: 4px solid var(--accent);
}
#widget-modal-inner .widget-caption {
  margin-top: 1rem;
  font-size: 0.83rem;
  line-height: 1.55;
  color: #666;
  border-top: 1px solid #eee;
  padding-top: 0.9rem;
}

/* =============================================================
   FEEDBACK WIDGET — corner Filikon button + modal
   ============================================================= */

/* --- Nav-center feedback button --- */
#filikon-feedback {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid rgba(255,255,255,0.85);
  background: radial-gradient(circle at 35% 30%, #fff6e6 0%, #f6d99e 60%, #d8a85a 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,0.38), 0 0 0 4px rgba(244,117,30,0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.22s ease;
  animation: fb-bob 4.5s ease-in-out infinite;
}
#filikon-feedback:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), 0 0 0 6px rgba(244,117,30,0.30);
}
#filikon-feedback:active { transform: scale(0.96); }
#filikon-feedback:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(244,117,30,0.55), 0 6px 18px rgba(0,0,0,0.38);
}
#filikon-feedback img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.15));
}
#filikon-feedback .fb-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font: 600 0.72rem/1 Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#filikon-feedback:hover .fb-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
#filikon-feedback::after {
  /* small "speech dot" indicator */
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #F4751E;
  border: 2px solid #faf8f4;
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
@keyframes fb-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

/* --- Feedback modal (shares im-* animation grammar) --- */
#feedback-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
  overflow-y: auto;
  padding: 8vh 1rem 5vh;
}
#feedback-modal.open    { animation: im-backdrop-in  0.50s ease forwards; }
#feedback-modal.closing { animation: im-backdrop-out 0.40s ease forwards; }
#feedback-modal-inner {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: #faf8f4;
  border-radius: 6px;
  padding: 2.8rem 3rem 2.4rem;
  box-shadow: 0 32px 100px rgba(0,0,0,0.65);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
}
#feedback-modal.open #feedback-modal-inner {
  animation: im-card-in 0.55s cubic-bezier(0.22,1.0,0.36,1) 0.12s both;
}
#feedback-modal.closing #feedback-modal-inner {
  animation: im-card-out 0.38s cubic-bezier(0.60,0,0.90,0.15) both;
}
#feedback-modal-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: none;
  border: 1px solid #c8b89a;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: #7a6e62;
  transition: background 0.18s, color 0.18s;
}
#feedback-modal-close:hover { background: #ede9e0; color: #1a1614; }

.fb-head {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e2d9c9;
}
.fb-filikon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6e6 0%, #f6d99e 60%, #d8a85a 100%);
  padding: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fb-tag {
  font: 600 0.72rem/1 Inter,sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a7560;
  margin: 0.15rem 0 0.4rem;
}
.fb-title {
  font: 600 1.7rem/1.2 'EB Garamond',Georgia,serif;
  color: #1a1614;
  margin: 0 0 0.4rem;
}
.fb-sub {
  font: 400 0.95rem/1.55 'EB Garamond',Georgia,serif;
  color: #5a5048;
  margin: 0;
}

.fb-form { display: flex; flex-direction: column; gap: 1rem; }
.fb-honeypot { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.fb-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 600px) { .fb-row-2 { grid-template-columns: 1fr; } }

.fb-field { display: flex; flex-direction: column; gap: 0.35rem; }
.fb-field > span {
  font: 600 0.72rem/1 Inter,sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6a5e52;
}
.fb-field > span em {
  font-style: italic;
  font-weight: 500;
  color: #9a8e82;
  text-transform: none;
  letter-spacing: 0.04em;
}
.fb-field input,
.fb-field select,
.fb-field textarea {
  width: 100%;
  font: 400 1rem/1.5 'EB Garamond',Georgia,serif;
  color: #1a1614;
  background: #fdfcf8;
  border: 1px solid #d7cbb5;
  border-radius: 4px;
  padding: 0.65rem 0.8rem;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.fb-field textarea { resize: vertical; min-height: 120px; }
.fb-field input:focus,
.fb-field select:focus,
.fb-field textarea:focus {
  outline: none;
  border-color: #F4751E;
  box-shadow: 0 0 0 3px rgba(244,117,30,0.15);
}

.fb-controls {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.3rem;
}
.fb-btn {
  font: 700 0.78rem/1 Inter,sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.8rem 1.3rem;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.fb-btn:active { transform: translateY(1px); }
.fb-btn-ghost {
  background: transparent;
  color: #6a5e52;
  border-color: #c8b89a;
}
.fb-btn-ghost:hover { background: #ede9e0; color: #1a1614; }
.fb-btn-primary {
  background: #1a1614;
  color: #fff;
}
.fb-btn-primary:hover { background: #F4751E; }
.fb-btn-primary[disabled] {
  background: #9a8e82;
  cursor: not-allowed;
}

.fb-status {
  min-height: 1.2em;
  margin: 0.2rem 0 0;
  font: 500 0.88rem/1.4 Inter,sans-serif;
  color: #c0392b;
}
.fb-status.ok { color: #2a7d4c; }

.fb-thankyou {
  text-align: center;
  padding: 1rem 0 0.5rem;
}
.fb-thankyou .fb-filikon {
  display: block;
  margin: 0 auto 1rem;
  width: 88px;
  height: 88px;
}
.fb-thankyou h3 {
  font: 600 2rem/1.2 'EB Garamond',Georgia,serif;
  color: #1a1614;
  margin: 0 0 0.5rem;
}
.fb-thankyou p {
  font: 400 1.05rem/1.55 'EB Garamond',Georgia,serif;
  color: #5a5048;
  margin: 0 0 1.5rem;
}

@media (max-width: 600px) {
  #feedback-modal-inner { padding: 2.2rem 1.3rem 1.8rem; }
  .fb-head { flex-direction: column; gap: 0.8rem; }
  .fb-filikon { width: 54px; height: 54px; }
  .fb-title { font-size: 1.5rem; }
  #filikon-feedback { width: 46px; height: 46px; }
  #filikon-feedback img { width: 36px; height: 36px; }
  #filikon-feedback .fb-tooltip { display: none; }
}

/* =============================================================
   ABOUT MODAL
   ============================================================= */
#about-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
  overflow-y: auto;
  padding: 8vh 1rem 6vh;
}
#about-modal.open    { animation: im-backdrop-in  0.50s ease forwards; }
#about-modal.closing { animation: im-backdrop-out 0.40s ease forwards; }

#about-modal-inner {
  position: relative;
  max-width: 960px;
  margin: 0 auto;
  background: #faf8f4;
  border-radius: 5px;
  padding: 3.5rem 4.2rem 3.2rem;
  box-shadow: 0 32px 100px rgba(0,0,0,0.65);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
}
#about-modal.open #about-modal-inner {
  animation: im-card-in 0.55s cubic-bezier(0.22,1.0,0.36,1) 0.12s both;
}
#about-modal.closing #about-modal-inner {
  animation: im-card-out 0.38s cubic-bezier(0.60,0,0.90,0.15) both;
}

#about-modal-close {
  position: absolute;
  top: 1.2rem; right: 1.2rem;
  background: none;
  border: 1px solid #c8b89a;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: #7a6e62;
  transition: background 0.18s, color 0.18s;
}
#about-modal-close:hover { background: #ede9e0; color: #1a1614; }

/* =============================================================
   FLOOR-PLAN MODAL
   ============================================================= */
#floormap-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 3vh 1rem;
}
#floormap-modal.open {
  animation: im-backdrop-in 0.30s ease forwards;
}
#floormap-modal.closing {
  animation: im-backdrop-out 0.28s ease forwards;
}

#floormap-modal-inner {
  position: relative;
  background: #faf9f5;
  border-radius: 14px;
  padding: 2rem 2rem 1.4rem;
  max-width: 860px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.40);
  text-align: center;
}
#floormap-modal.open #floormap-modal-inner {
  animation: fm-card-in 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#floormap-modal.closing #floormap-modal-inner {
  animation: fm-card-out 0.26s ease-in both;
}
@keyframes fm-card-in {
  from { transform: scale(0.88) translateY(18px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}
@keyframes fm-card-out {
  from { transform: scale(1)    translateY(0);    opacity: 1; }
  to   { transform: scale(0.90) translateY(12px); opacity: 0; }
}

#floormap-modal-close {
  position: absolute;
  top: 0.8rem; right: 0.9rem;
  width: 32px; height: 32px;
  border: none; border-radius: 50%;
  background: transparent;
  font-size: 1rem; cursor: pointer;
  color: #777; line-height: 1;
  transition: background 0.15s, color 0.15s;
}
#floormap-modal-close:hover { background: #ede9e0; color: #1a1614; }

.fm-title {
  font: 800 1.3rem/1.2 'Archivo Black', sans-serif;
  letter-spacing: 0.06em;
  color: #0a0a0a;
  margin: 0 0 0.2rem;
  text-transform: uppercase;
}
.fm-subtitle {
  font: italic 0.88rem/1 'EB Garamond', Georgia, serif;
  color: #888;
  margin: 0 0 1.2rem;
}
.fm-img-wrap {
  border: 2px solid #d8d4cc;
  border-radius: 8px;
  overflow: hidden;
  line-height: 0;
  position: relative;
  background: #f4f2ed;
  touch-action: none;            /* we handle pinch/pan ourselves */
  cursor: default;               /* zooming is via the +/- buttons now */
}
.fm-img-wrap.zoomed { cursor: grab; }
.fm-img-wrap.panning { cursor: grabbing; }
.fm-img-wrap img {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: 0 0;
  will-change: transform;
  transition: transform 0.12s ease-out;
  user-select: none;
  -webkit-user-drag: none;
}
.fm-img-wrap.panning img { transition: none; }
.fm-zoom-controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.fm-zoom-controls button {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #cfc9bd;
  background: rgba(255,255,255,0.92);
  color: #2a2520;
  font: 700 17px/1 'Inter', Arial, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: background 0.15s, border-color 0.15s;
}
.fm-zoom-controls button:hover { background: #fff; border-color: #b3a98f; }
.fm-zoom-controls button:active { transform: translateY(1px); }
.fm-hint {
  font: italic 0.78rem/1.4 'EB Garamond', Georgia, serif;
  color: #aaa;
  margin: 0.9rem 0 0;
}

/* Scholar aside blocks */
.about-scholar {
  border-left: 3px solid #c8b89a;
  padding: 1rem 0 1rem 1.5rem;
  margin: 1.8rem 0;
}
.about-scholar-name {
  font: 600 1.1rem/1.2 'EB Garamond', Georgia, serif;
  color: #1a1614;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
}
.about-scholar-name sup a {
  font: 500 0.7rem/1 'Inter', sans-serif;
  color: #8a7560;
  text-decoration: none;
  margin-left: 2px;
  vertical-align: super;
}
.about-scholar-name sup a:hover { text-decoration: underline; }

/* Centred student-questions block */
.about-questions {
  font: italic 1.3rem/2.0 'EB Garamond', Georgia, serif;
  color: #3a3020;
  text-align: center;
  margin: 1.8rem 0;
  padding: 1.4rem 1.6rem;
  background: #f0ece4;
  border-radius: 5px;
}

/* Footnotes at the foot of the modal body */
.about-footnotes-modal {
  font: 400 0.9rem/1.6 'EB Garamond', Georgia, serif;
  color: #5a5048;
}
.about-footnotes-modal ol {
  padding-left: 1.4em;
}
.about-footnotes-modal li {
  margin-bottom: 0.8rem;
}
.about-footnotes-modal a {
  color: #6a5e52;
  text-decoration: underline;
}
.about-footnotes-modal a:hover { color: #1a1614; }

.about-logo-foot {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
}
.about-logo-foot img {
  width: 190px;
  height: auto;
  display: block;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  #about-modal-inner { padding: 2.5rem 1.4rem 2rem; }
  .about-questions { font-size: 1.1rem; padding: 1rem; }
  .about-logo-foot img { width: 120px; }
}

/* ── About modal: new five-section structure ── */

.about-section-heading {
  /* Collapsed from a stack of overriding declarations to the values that
     actually rendered (Inter 0.78rem/700, 0.18em, line-height 1.3). */
  font-family: 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  color: #1a1614;
  margin: 0 0 1.4rem;
  text-transform: uppercase;
}

/* Three-column grid for "What you will learn" */
.about-learn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}

.about-learn-item {
  background: #f0ece4;
  border-radius: 6px;
  padding: 1.4rem 1.3rem 1.5rem;
}

.about-learn-heading {
  font: 700 0.72rem/1.3 'Inter', sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-orange, #F4751E);
  margin: 0 0 0.8rem;
}

/* Override .im-body p defaults for learn items */
.about-learn-item p {
  font-size: 0.98rem !important;
  line-height: 1.65 !important;
  text-align: left !important;
  hyphens: auto;
  -webkit-hyphens: auto;
  margin-bottom: 0 !important;
  color: #3a3020;
}

/* Contact section */
.about-contact {
  color: #3a3020;
}

.about-feedback-inline {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--c-orange, #F4751E);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.about-feedback-inline:hover { color: #c85e10; }

.about-impressum-link {
  color: var(--c-orange, #F4751E);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.about-impressum-link:hover { color: #c85e10; }

/* Responsive: stack the learn grid to single column on narrow viewports */
@media (max-width: 768px) {
  .about-learn-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  .about-learn-item { padding: 1.1rem 1rem; }
}

/* ── Room I interactive components (injected via intro-modal) ── */

/* Classification game buttons */
.classify-btn {
  padding: 0.4rem 0.85rem;
  border: 1px solid #c8b89a;
  border-radius: 5px;
  background: #fff;
  color: #2a2520;
  font: 500 0.88rem/1.2 Inter, sans-serif;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.classify-btn:hover {
  background: #f0ece4;
  border-color: var(--c-orange);
}
.classify-btn.selected {
  background: var(--c-orange);
  border-color: var(--c-orange);
  color: #fff;
}

/* Ensure injected <ul> and <ol> inside im-body are readable */
.im-body ul,
.im-body ol {
  padding-left: 1.6em;
  margin: 0 0 1.4rem;
}
.im-body li {
  margin-bottom: 0.5rem;
  font: 400 1.15rem/1.75 'EB Garamond', Georgia, serif;
  color: #2a2520;
}

/* Responsive grid collapse for exhibit cards */
@media (max-width: 600px) {
  .im-body [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ── Filikon in-room speech bubble ────────────────────────────────────────── */
#filikon-room-bubble {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 120;
  width: clamp(260px, 24vw, 320px);
  margin-bottom: 6px;
}
#filikon-room-bubble .frb-text {
  background: #fff;
  color: #1a1a2e;
  font: 400 clamp(1.0rem, 1.15vw, 1.15rem)/1.5 'EB Garamond', Georgia, serif;
  padding: 0.85rem 1.1rem;
  border-radius: 12px;
  border: 1.5px solid #c8b89a;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
}
#filikon-room-bubble .frb-video {
  background: #06060e;
  border: 1.5px solid #c8b89a;
  border-radius: 12px;
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22), 0 1px 4px rgba(0,0,0,0.12);
  pointer-events: auto;        /* let the visitor pause / replay */
}
#filikon-room-bubble .frb-video video {
  display: block;
  width: 100%;
  height: auto;                /* source is square (1080×1080) */
  border-radius: 11px;
  cursor: pointer;
}
#filikon-room-bubble .frb-tail {
  width: 0; height: 0;
  margin: 0 auto;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 11px solid #c8b89a;
  position: relative;
}
#filikon-room-bubble .frb-tail::after {
  content: '';
  position: absolute;
  top: -13px;
  left: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 10px solid #fff;
}

/* ============================================================
 *  Room II — DN-Lab podium widget
 *  Shares the open/close animations of #widget-modal.
 * ============================================================ */
#r2-widget-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  overflow-y: auto;
  align-items: flex-start;
  justify-content: center;
  padding: 3vh 1rem 2rem;
  perspective: 1400px;
}
#r2-widget-modal.open    { animation: wm-backdrop-in  0.40s ease forwards; }
#r2-widget-modal.closing { animation: wm-backdrop-out 0.35s ease forwards; }
#r2-widget-modal.open    #r2-widget-modal-inner { animation: wm-card-in  1.60s cubic-bezier(0.22, 1.10, 0.50, 1) both; }
#r2-widget-modal.closing #r2-widget-modal-inner { animation: wm-card-out 0.90s cubic-bezier(0.60, 0, 0.90, 0.15) both; }

#r2-widget-modal-inner {
  position: relative;
  background: #fdfcf8;
  border-radius: 20px;
  padding: 2.4rem 2.2rem 1.8rem;
  max-width: 920px;
  width: 100%;
  box-shadow: 0 28px 90px rgba(0,0,0,0.55);
  transform-origin: center center;
  opacity: 0;
  color: #2a2520;
  font-family: 'EB Garamond', serif;
}
#r2-widget-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: #f3f4f6;
  border: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  color: #374151;
  transition: background 0.18s;
  z-index: 10;
  font-family: 'Inter', sans-serif;
}
#r2-widget-modal-close:hover { background: #e5e7eb; color: #111; }

/* Header */
.r2-dn-lab .r2-dn-header { text-align: center; margin-bottom: 1.4rem; }
.r2-dn-tag {
  font: 700 0.78rem/1 'Inter', sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6E3FCF;
  margin: 0 0 0.6rem;
}
.r2-dn-lab h3 {
  font: 600 1.55rem/1.2 'EB Garamond', serif;
  color: #1a1a1a;
  margin: 0 0 0.5rem;
}
.r2-dn-lab .r2-dn-sub {
  font: italic 0.95rem/1.55 'EB Garamond', serif;
  color: #6b6157;
  max-width: 640px;
  margin: 0 auto;
}

/* Progress dots */
.r2-dn-progress {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 0.6rem 0 1.5rem;
}
.r2-dn-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5dfd2;
  transition: background 0.25s, transform 0.25s;
}
.r2-dn-dot.past   { background: #a78bfa; }
.r2-dn-dot.active { background: #6E3FCF; transform: scale(1.35); }

/* Step content */
.r2-dn-steps { min-height: 380px; }
.r2-dn-step h4 {
  font: 600 1.25rem/1.3 'EB Garamond', serif;
  color: #6E3FCF;
  margin: 0 0 0.85rem;
}
.r2-dn-step p {
  font: 1rem/1.7 'EB Garamond', serif;
  color: #2a2520;
  margin: 0 0 1rem;
  text-align: justify;
}

/* Flagpole interactive */
.r2-fp-svg-wrap { padding: 0.5rem 0 0.25rem; text-align: center; }
.r2-fp-svg-wrap svg { width: 100%; max-width: 480px; height: auto; }
.r2-fp-buttons {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.5rem 0 1rem;
}
.r2-fp-btn {
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  border: 2px solid #c8b89a;
  background: #fff;
  color: #2a2520;
  font: 600 0.9rem/1 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
}
.r2-fp-btn-active {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}
.r2-fp-arg {
  background: #f5f3ff;
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  border-left: 4px solid #6366f1;
  transition: border-color 0.3s ease;
  margin-bottom: 0.8rem;
}
.r2-fp-label {
  margin: 0 0 0.6rem;
  font: 700 0.78rem/1 'Inter', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6366f1;
}
.r2-fp-label-rev { color: #8b5cf6; }
.r2-fp-arg ol {
  margin: 0;
  padding-left: 1.4rem;
  font: 0.95rem/1.8 'EB Garamond', serif;
  color: #2a2520;
}
.r2-fp-conclusion {
  list-style: none;
  margin: 0.5rem 0 0 -1.4rem;
  padding: 0.5rem 1rem;
  background: rgba(99,102,241,0.07);
  border-radius: 5px;
}
.r2-fp-conclusion-rev { background: rgba(139,92,246,0.07); }
.r2-fp-feedback {
  margin: 0.9rem 0 0;
  font: italic 0.9rem/1.5 'EB Garamond', serif;
  color: #6b6157;
}
.r2-fp-punchline {
  margin: 0.6rem 0 0;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(239,68,68,0.06), rgba(245,158,11,0.06));
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 8px;
  font: 0.97rem/1.65 'EB Garamond', serif;
  color: #2a2520;
}

/* Step 2 — sketch cards */
.r2-dn-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin: 1rem 0;
}
@media (max-width: 768px) {
  .r2-dn-card-grid { grid-template-columns: 1fr; }
}
.r2-dn-card {
  background: #fff;
  border: 1px solid #c8b89a;
  border-radius: 8px;
  padding: 1.05rem 1.2rem;
}
.r2-dn-card-good { border-top: 3px solid #2BA85B; }
.r2-dn-card-warn { border-top: 3px solid #F4751E; }
.r2-dn-card-label {
  font: 700 0.78rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6157;
  margin: 0 0 0.45rem;
}
.r2-dn-card-body {
  font: 0.93rem/1.65 'EB Garamond', serif;
  color: #2a2520;
  margin: 0;
}

/* Step 3 — contrast */
.r2-dn-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0 1.25rem;
}
@media (max-width: 768px) {
  .r2-dn-contrast { grid-template-columns: 1fr; }
}
.r2-dn-contrast-col {
  background: #fff;
  border: 1px solid #c8b89a;
  border-radius: 8px;
  padding: 1.05rem 1.2rem;
  border-top: 3px solid #6E3FCF;
}
.r2-dn-contrast-label {
  font: 700 0.82rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E3FCF;
  margin: 0 0 0.6rem;
}
.r2-dn-contrast-label-warn { color: #F4751E; }
.r2-dn-contrast-col ul {
  margin: 0;
  padding-left: 1.2rem;
  font: 0.92rem/1.65 'EB Garamond', serif;
  color: #2a2520;
}
.r2-dn-contrast-col li { margin-bottom: 0.35rem; }

/* Step 4 — Elster quote + pointer cards */
.r2-dn-elster-quote {
  margin: 1rem 0 1.25rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, rgba(43,168,91,0.08), rgba(110,63,207,0.05));
  border-left: 4px solid #2BA85B;
  border-radius: 0 6px 6px 0;
  font: italic 1rem/1.7 'EB Garamond', serif;
  color: #2a2520;
}
.r2-dn-elster-quote cite {
  display: block;
  margin-top: 0.6rem;
  font: normal 0.85rem/1.4 'Inter', sans-serif;
  color: #6b6157;
  text-align: right;
}
.r2-dn-pointer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin: 1rem 0 1.25rem;
}
@media (max-width: 768px) {
  .r2-dn-pointer-grid { grid-template-columns: 1fr; }
}
.r2-dn-pointer {
  background: #fff;
  border: 1px solid #d8d4cc;
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.r2-dn-pointer h5 {
  margin: 0.2rem 0 0.4rem;
  font: 600 1.05rem/1.2 'EB Garamond', serif;
  color: #1a1a1a;
}
.r2-dn-pointer p {
  margin: 0;
  font: 0.9rem/1.55 'EB Garamond', serif;
  color: #2a2520;
  text-align: left;
}
.r2-dn-pointer-wall {
  font: 700 0.72rem/1 'Inter', sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6157;
  margin: 0;
}
.r2-dn-pointer-purple { border-top: 3px solid #6E3FCF; }
.r2-dn-pointer-green  { border-top: 3px solid #2BA85B; }
.r2-dn-pointer-blue   { border-top: 3px solid #2B6BD9; }
.r2-dn-pointer-teal   { border-top: 3px solid #1BA39C; }
/* 4-up layout — front-wall trio + left-wall mechanists */
.r2-dn-pointer-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .r2-dn-pointer-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .r2-dn-pointer-grid-4 { grid-template-columns: 1fr; }
}

.r2-dn-takeaway {
  margin: 1.1rem 0 0;
  padding: 0.9rem 1.15rem;
  background: rgba(244,117,30,0.06);
  border-left: 3px solid #F4751E;
  border-radius: 0 6px 6px 0;
  font: italic 0.95rem/1.65 'EB Garamond', serif;
  color: #2a2520;
}
.r2-dn-takeaway-final {
  background: rgba(43,168,91,0.08);
  border-left-color: #2BA85B;
}

/* Navigation */
.r2-dn-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid #e5dfd2;
}
.r2-dn-nav-btn {
  padding: 0.65rem 1.4rem;
  border-radius: 8px;
  border: 1.5px solid #c8b89a;
  background: #fff;
  color: #2a2520;
  font: 600 0.9rem/1 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s ease;
}
.r2-dn-nav-btn:hover:not(:disabled) {
  background: #f5f3ff;
  border-color: #6E3FCF;
}
.r2-dn-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.r2-dn-nav-btn-primary {
  background: linear-gradient(135deg, #6E3FCF, #8b5cf6);
  color: #fff;
  border-color: #6E3FCF;
  box-shadow: 0 4px 12px rgba(110,63,207,0.30);
}
.r2-dn-nav-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #5a32b0, #7c3aed);
  border-color: #5a32b0;
  color: #fff;
}

/* ── Footer ── */
footer {
  background: rgba(42, 42, 42, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1rem 1.5rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.footer-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  list-style: none;
  justify-content: flex-start;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
}

.footer-links a.current {
  color: #F4751E;
  font-weight: 600;
}

.copyright {
  text-align: right;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .footer-inner {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .footer-links {
    justify-content: center;
  }
  
  .copyright {
    text-align: center;
  }
}

/* (Removed dead `@media (max-width: 480px) { footer { padding } }` — it was
   fully overridden by the ≤600px footer rule in mobile.css.) */

/* ── Newsletter button ───────────────────────────────────────────────────── */
#newsletter-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid rgba(255,255,255,0.80);
  background: #f5f1e8;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 4px rgba(26,26,46,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  position: relative;
  color: #1a1a2e;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease;
  animation: fb-bob 5.5s ease-in-out 1.4s infinite;
}
#newsletter-btn svg {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
#newsletter-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 0 0 6px rgba(26,26,46,0.14);
}
#newsletter-btn:active { transform: scale(0.96); }
#newsletter-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(244,117,30,0.50), 0 6px 18px rgba(0,0,0,0.28);
}
#newsletter-btn .fb-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font: 600 0.72rem/1 Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.45rem 0.7rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
#newsletter-btn:hover .fb-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Newsletter modal ────────────────────────────────────────────────────── */
#newsletter-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1400;
  overflow-y: auto;
  padding: 8vh 1rem 5vh;
}
#newsletter-modal.open    { animation: im-backdrop-in  0.50s ease forwards; }
#newsletter-modal.closing { animation: im-backdrop-out 0.40s ease forwards; }
#newsletter-modal-inner {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  background: #faf8f4;
  border-radius: 6px;
  padding: 2.8rem 3rem 2.4rem;
  box-shadow: 0 32px 100px rgba(0,0,0,0.65);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
}
#newsletter-modal.open #newsletter-modal-inner {
  animation: im-card-in 0.55s cubic-bezier(0.22,1.0,0.36,1) 0.12s both;
}
#newsletter-modal.closing #newsletter-modal-inner {
  animation: im-card-out 0.38s cubic-bezier(0.60,0,0.90,0.15) both;
}
#newsletter-modal-close {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: none;
  border: 1px solid #c8b89a;
  width: 34px; height: 34px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  color: #7a6e62;
  transition: background 0.18s, color 0.18s;
}
#newsletter-modal-close:hover { background: #ede9e0; color: #1a1614; }

.nl-head {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.8rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid #e2d9c9;
}
.nl-icon-wrap {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #f5f1e8;
  border: 2px solid rgba(10,10,10,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a2e;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.nl-icon-wrap svg { width: 26px; height: 26px; }

/* ── Infomaniak form overrides (scoped to the newsletter modal) ──────────── */
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd h4 { display: none; }
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd > span { display: none; }
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd .inf-content {
  margin-top: 0 !important;
}
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd input[type="email"] {
  width: 100% !important;
  height: auto !important;
  font: 400 1.05rem/1.5 'EB Garamond', Georgia, serif !important;
  color: #1a1614 !important;
  background: #fdfcf8 !important;
  border: 1px solid #d7cbb5 !important;
  border-radius: 4px !important;
  padding: 0.65rem 0.9rem !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
#newsletter-modal .inf-main_8ec959b57278128ac65607f07812f0fd input[type="email"]:focus {
  outline: none !important;
  border-color: #F4751E !important;
  box-shadow: 0 0 0 3px rgba(244,117,30,0.15) !important;
}
#newsletter-modal .inf-rgpd {
  font: 400 0.82rem/1.55 Inter, sans-serif !important;
  color: #8a7e72 !important;
  margin: 0.9rem 0 0.6rem !important;
}
#newsletter-modal .inf-submit {
  text-align: right !important;
  margin-top: 1rem !important;
}
#newsletter-modal .inf-submit input[type="submit"] {
  font: 700 0.78rem/1 Inter, sans-serif !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background: #1a1614 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 0.8rem 1.6rem !important;
  height: auto !important;
  cursor: pointer !important;
  transition: background 0.18s !important;
}
#newsletter-modal .inf-submit input[type="submit"]:hover {
  background: #F4751E !important;
}
#newsletter-modal .inf-success h4 {
  display: block !important;
  font: 600 1rem/1.55 'EB Garamond', Georgia, serif !important;
  color: #1a1614 !important;
  margin: 0 0 1rem !important;
}
#newsletter-modal .inf-success .inf-btn {
  font: 700 0.75rem/1 Inter, sans-serif !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  background: #1a1614 !important;
  color: #fff !important;
  border-radius: 4px !important;
  padding: 0.65rem 1.1rem !important;
  text-decoration: none !important;
  display: inline-block !important;
  box-shadow: none !important;
}

/* ── Room number capsules (SVG overlay) ──────────────────────────────────── */
.room-num-capsule { transition: filter 0.12s ease; }
.room-num-capsule:hover { filter: drop-shadow(0 2px 6px rgba(0,0,0,0.28)); }
.room-num-capsule:hover .room-num-capsule-bg { opacity: 1 !important; }

/* ── Keyboard navigation (Phase 3) ───────────────────────────────────────── */

/* Skip link: off-screen until keyboard-focused */
#skip-link {
  position: fixed; top: -80px; left: 14px; z-index: 11000;
  padding: 0.65em 1.2em;
  background: #14142a; color: #fff;
  border: 1px solid rgba(244,117,30,0.6); border-radius: 10px;
  font: 600 0.9rem/1 Inter, sans-serif; text-decoration: none;
  transition: top 0.15s ease;
}
#skip-link:focus { top: 14px; outline: 2px solid #F4751E; outline-offset: 2px; }

/* Visually hidden but exposed to screen readers (#sr-status announcer) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* In-room keyboard-target HUD: centre reticle + bottom name pill */
#kb-reticle {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(244,117,30,0.9);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35);
  pointer-events: none; z-index: 12;
}
#kb-target-hud {
  position: absolute; left: 50%; bottom: 64px;
  transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 0.7em;
  max-width: min(80vw, 640px);
  padding: 0.55em 1.1em;
  background: rgba(16,16,28,0.88);
  border: 1px solid rgba(244,117,30,0.55);
  border-radius: 999px;
  font-family: Inter, sans-serif;
  pointer-events: none; z-index: 12;
}
#kb-target-hud .kbt-name {
  color: #fff; font-weight: 700; font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#kb-target-hud .kbt-hint {
  color: #F4751E; font-weight: 600; font-size: 0.8rem;
  letter-spacing: 0.04em; white-space: nowrap;
}

/* Keyboard help overlay (? from map or room) */
#kb-help {
  position: fixed; inset: 0; z-index: 10500;
  display: none;
  background: rgba(8,8,16,0.62);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
#kb-help.open { display: flex; align-items: center; justify-content: center; }
#kb-help-card {
  position: relative;
  width: min(92vw, 560px); max-height: 84vh; overflow: auto;
  background: #14142a; color: #eee;
  border: 1px solid rgba(244,117,30,0.45);
  border-radius: 14px;
  padding: 1.6rem 1.9rem 1.4rem;
  font-family: Inter, sans-serif;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
#kb-help-card h2 {
  margin: 0 0 0.9rem; font-size: 1.15rem; letter-spacing: 0.02em;
}
#kb-help-close {
  position: absolute; top: 0.7rem; right: 0.8rem;
  background: none; border: none; color: #aaa;
  font-size: 1.05rem; cursor: pointer; padding: 0.3rem 0.45rem;
}
#kb-help-close:hover, #kb-help-close:focus-visible { color: #fff; }
.kbh-section dt {
  margin: 0.9rem 0 0.25rem; font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #F4751E;
}
.kbh-section dd { margin: 0; font-size: 0.92rem; line-height: 1.75; color: #ddd; }
.kbh-section kbd {
  display: inline-block; min-width: 1.5em; text-align: center;
  padding: 0.05em 0.4em; margin: 0 0.06em;
  background: #23233e; border: 1px solid #3a3a5c; border-bottom-width: 2px;
  border-radius: 5px; font: 600 0.82em/1.5 Inter, sans-serif; color: #fff;
}

/* Keyboard focus ring (capsules are tabbable role="button" elements).
   :focus-visible only — mouse/touch activation shows no ring. */
.room-num-capsule:focus { outline: none; }
.room-num-capsule:focus-visible { filter: drop-shadow(0 2px 8px rgba(0,0,0,0.38)); }
.room-num-capsule:focus-visible .room-num-capsule-bg {
  stroke: #ffffff;
  stroke-width: 5;
  opacity: 1 !important;
}

/* ── Entry Hall beacon — sonar rings + scale breath ─────────────────────── */

/* Sonar ring: expands from pill edge, fades to nothing */
@keyframes entrySonar {
  0%   { transform: scale(1);   opacity: 0.75; }
  70%  { opacity: 0.15; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Pill breathes in and out with glow */
@keyframes entryBreath {
  0%, 100% {
    transform: scale(1);
    filter: drop-shadow(0 0 6px  rgba(244,117,30,0.45));
  }
  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 24px rgba(244,117,30,1))
            drop-shadow(0 0 8px  rgba(244,117,30,0.6));
  }
}

/* "START HERE" sub-label pulses between white and orange */
@keyframes entrySubLabelPulse {
  0%, 100% { opacity: 1;    fill: #ffffff; }
  50%      { opacity: 0.65; fill: #F4751E; }
}

/* Sonar rings — same keyframes, staggered delays */
.entry-sonar-ring {
  transform-origin: center;
  transform-box: fill-box;
}
.entry-ring-1 { animation: entrySonar 2.4s ease-out infinite 0s;    }
.entry-ring-2 { animation: entrySonar 2.4s ease-out infinite 0.8s;  }
.entry-ring-3 { animation: entrySonar 2.4s ease-out infinite 1.6s;  }

/* Pill breath */
.entry-badge-breath {
  animation: entryBreath 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Sub-label pulse */
.entry-start-label {
  animation: entrySubLabelPulse 2.4s ease-in-out infinite;
}

/* Hover: freeze all motion, standard shadow */
[data-room-id="entry"].room-num-capsule:hover .entry-sonar-ring { animation: none; opacity: 0; }
[data-room-id="entry"].room-num-capsule:hover .entry-badge-breath {
  animation: none;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
}
[data-room-id="entry"].room-num-capsule:hover .entry-start-label { animation: none; opacity: 1; }

/* Accessibility: respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  /* Keep the nicer static end-states for the entry cues … */
  .entry-sonar-ring  { animation: none; opacity: 0.25; }
  .entry-badge-breath { animation: none; filter: drop-shadow(0 0 10px rgba(244,117,30,0.7)); }
  .entry-start-label { animation: none; }
  /* … then neutralise all remaining decorative CSS motion (badge float, capsule
     breath, modal/backdrop transitions, etc.). JS-driven panning and the in-room
     WebGL render loop are not CSS and remain; this covers page chrome only. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Room load-error overlay (shown when WebGL / Three.js can't load) ──────── */
#room-load-error {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 4, 2, 0.9);
}
#room-load-error.show { display: flex; }
#room-load-error .rle-card {
  max-width: 420px;
  width: 100%;
  background: #faf8f4;
  color: #1a1614;
  border-radius: 14px;
  padding: 1.8rem 1.9rem 1.6rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
}
#room-load-error .rle-title {
  font: 700 1.15rem/1.3 'EB Garamond', Georgia, serif;
  margin-bottom: 0.6rem;
}
#room-load-error .rle-msg {
  font: 400 0.9rem/1.55 'Inter', sans-serif;
  color: #5a534c;
  margin-bottom: 1.3rem;
}
#room-load-error .rle-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
#room-load-error .rle-btn {
  font: 600 0.85rem/1 'Inter', sans-serif;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #c8b89a;
}
#room-load-error .rle-reload {
  background: var(--c-orange, #F4751E);
  color: #fff;
  border-color: transparent;
}
#room-load-error .rle-dismiss {
  background: none;
  color: #5a534c;
}

/* ── "Opening soon" notice (placeholder rooms IV–XII) ─────────────────────── */
#room-soon-notice {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 4, 2, 0.78);
}
#room-soon-notice.show { display: flex; }
#room-soon-notice .rsn-card {
  max-width: 440px;
  width: 100%;
  background: #faf8f4;
  color: #1a1614;
  border-radius: 14px;
  padding: 1.8rem 1.9rem 1.6rem;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  text-align: center;
}
#room-soon-notice .rsn-kicker {
  font: 700 0.72rem/1 'Inter', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-orange, #F4751E);
  margin-bottom: 0.55rem;
}
#room-soon-notice .rsn-title {
  font: 700 1.25rem/1.3 'EB Garamond', Georgia, serif;
  margin-bottom: 0.6rem;
}
#room-soon-notice .rsn-msg {
  font: 400 0.9rem/1.55 'Inter', sans-serif;
  color: #5a534c;
  margin-bottom: 1.3rem;
}
#room-soon-notice .rsn-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
#room-soon-notice .rsn-btn {
  font: 600 0.85rem/1 'Inter', sans-serif;
  padding: 0.7rem 1.2rem;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid #c8b89a;
}
#room-soon-notice .rsn-notify {
  background: var(--c-orange, #F4751E);
  color: #fff;
  border-color: transparent;
}
#room-soon-notice .rsn-dismiss {
  background: none;
  color: #5a534c;
}

/* ── Room capsule hover tooltip ──────────────────────────────────────────── */
#room-capsule-tooltip {
  position: fixed;
  z-index: 320;
  width: 240px;
  transform: translate(-50%, -100%);
  background: rgba(250, 248, 243, 0.98);
  border: 1.5px solid rgba(10, 10, 10, 0.10);
  border-radius: 12px;
  padding: 13px 15px 11px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.13s ease;
  font-family: 'Inter', sans-serif;
}
#room-capsule-tooltip.visible { opacity: 1; }

/* Small arrow pointer at bottom of tooltip */
#room-capsule-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid rgba(250, 248, 243, 0.98);
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}

.rct-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #1a1a2e;
  margin-bottom: 6px;
}

.rct-body {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.55;
  color: #3a3a4a;
  margin-bottom: 9px;
}

.rct-cta {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #1a1a2e;
  border-top: 1px solid rgba(10,10,10,0.08);
  padding-top: 8px;
  font-style: italic;
}

.rct-cta-construction {
  color: #7a6e8a;
}

/* Filikon row for under-construction rooms */
.rct-filikon-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.rct-filikon-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.rct-under-construction {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9a8aaa;
  background: rgba(154,138,170,0.12);
  border-radius: 20px;
  padding: 2px 8px;
}

/* =============================================================
   WIDGET CONTROL PANEL — named wrappers (replaces inline styles)
   ============================================================= */
#widget-modal-inner .wm-slider-wrap {
  flex: 1;
  min-width: 180px;
}
#widget-modal-inner .wm-hint-wrap {
  text-align: center;
  width: 160px;
  flex-shrink: 0;
  min-height: 4.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#widget-modal-inner .wm-profit-comparison {
  font-size: 0.88rem;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
#widget-modal-inner .wm-slider-hint {
  font-size: 0.78rem;
  line-height: 1.3;
}

/* =============================================================
   MOBILE OVERRIDES — ≤ 560px
   Fixes control panel overflow, card stacking, mini-map,
   and hint bar on phones and small tablets.
   ============================================================= */
@media (max-width: 600px) {

  /* ── Mini-map: hide on very small screens ──────────────────
     The floor-map panel inside the 3D room still provides
     access via tap → floormap modal.                          */
  #mini-map {
    display: none;
  }

  /* ── Hint bar: allow wrapping + touch-appropriate text ───── */
  #hint {
    white-space: normal;
    text-align: center;
    max-width: calc(100vw - 2.5rem);
    font-size: 0.65rem;
    padding: 0.4rem 0.8rem;
    line-height: 1.5;
  }

  /* ── Widget modal: reduce outer padding ──────────────────── */
  #widget-modal {
    padding: 2vh 0.5rem 1.5rem;
  }
  #widget-modal-inner {
    padding: 1.6rem 1rem 1.2rem;
    border-radius: 14px;
  }

  /* ── Control panel: stack vertically ─────────────────────── */
  #widget-modal-inner .market-control-panel {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  #widget-modal-inner .wm-slider-wrap {
    min-width: 0;
  }
  #widget-modal-inner .wm-hint-wrap {
    width: 100%;
    flex-shrink: 1;
    min-height: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
  }
  #widget-modal-inner .market-reset-btn {
    align-self: center;
    width: 100%;
  }

  /* ── Comparison cards: stack vertically ──────────────────── */
  #widget-modal-inner .market-comparison {
    grid-template-columns: 1fr;
  }

  /* ── Graph: shorter on small screens ─────────────────────── */
  #widget-modal-inner #marketGraph {
    height: 200px;
  }

  /* ── Nav bar: tighten on small screens ───────────────────── */
  #nav-bar {
    padding: 0 0.75rem;
  }
  .nav-logo-img {
    height: 36px;
  }
  .nav-links a {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
}


/* ── DN-Lab UX improvements ──────────────────────────────────── */
.r2-dn-step-counter {
  font-size: 0.8rem;
  color: var(--secondary, #888);
  margin-left: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  opacity: 0.85;
}

/* Interaction prompt above flagpole buttons */
.r2-fp-prompt {
  text-align: center;
  font-size: 0.88rem;
  color: var(--secondary, #888);
  margin: 0.25rem 0 0.75rem;
  font-style: italic;
}
.r2-fp-prompt-arrow {
  display: inline-block;
  animation: r2FpBounce 1.3s ease-in-out infinite;
  margin-right: 0.2em;
}
@keyframes r2FpBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(4px); }
}

/* Pulse ring on the "reversed" button to invite clicking */
@keyframes r2FpPulse {
  0%   { box-shadow: 0 0 0 0   rgba(139, 92, 246, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(139, 92, 246, 0); }
  100% { box-shadow: 0 0 0 0   rgba(139, 92, 246, 0); }
}
.r2-fp-pulse {
  animation: r2FpPulse 1.6s ease-out infinite !important;
  border-color: #8b5cf6 !important;
}

/* Next-button step subtitle */
.r2-dn-next-hint {
  display: block;
  font-size: 0.7rem;
  font-weight: 400;
  opacity: 0.75;
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
}

/* ============================================================
   DN-Lab — Auditor's Game (case files, audit log, verdicts)
   ============================================================ */

/* Audit log — sits above the progress dots */
.r2-audit-log {
  background: linear-gradient(135deg, #fdfaf2, #f8f4e8);
  border: 1px solid #e0d6bf;
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0 1rem;
}
.r2-al-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.r2-al-title {
  font: 700 0.75rem/1 'Inter', sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6157;
}
.r2-al-count {
  font: 600 0.78rem/1 'Inter', sans-serif;
  color: #6E3FCF;
}
.r2-al-badges {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.r2-al-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.65rem;
  border-radius: 999px;
  border: 1.5px dashed #c8b89a;
  background: #fff;
  font: 600 0.78rem/1.1 'Inter', sans-serif;
  color: #a99c8c;
  opacity: 0.7;
  transition: all 0.4s ease;
}
.r2-al-badge.r2-al-filled {
  border-style: solid;
  border-color: #6E3FCF;
  background: linear-gradient(135deg, #6E3FCF, #8b5cf6);
  color: #fff;
  opacity: 1;
  box-shadow: 0 3px 10px rgba(110,63,207,0.30);
  transform: scale(1.04);
}
.r2-al-badge-icon { font-size: 0.95rem; }

/* Case-file header — sits at top of each step */
.r2-case-head {
  margin: 0 0 1rem;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, rgba(110,63,207,0.06), rgba(139,92,246,0.04));
  border-left: 3px solid #6E3FCF;
  border-radius: 0 8px 8px 0;
}
.r2-case-num {
  font: 700 0.72rem/1 'Inter', sans-serif;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6E3FCF;
  margin: 0 0 0.3rem;
}
.r2-case-head h4 {
  margin: 0 0 0.3rem;
  color: #1a1a1a;
  font: 600 1.2rem/1.3 'EB Garamond', serif;
}
.r2-case-prompt {
  margin: 0;
  font: 0.95rem/1.55 'EB Garamond', serif;
  color: #5b524a;
  text-align: left;
}

/* Case verdict — the audit finding box that appears after interaction */
.r2-case-verdict {
  margin-top: 1rem;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(135deg, rgba(43,168,91,0.07), rgba(244,117,30,0.04));
  border: 1px solid rgba(43,168,91,0.25);
  border-radius: 8px;
  animation: r2-verdict-in 0.55s ease both;
}
@keyframes r2-verdict-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.r2-vb {
  margin: 0 0 0.45rem;
  font: 700 0.82rem/1.1 'Inter', sans-serif;
  color: #2BA85B;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.r2-vb-icon { margin-right: 0.3rem; }
.r2-vb-name { color: #1a1a1a; letter-spacing: 0.02em; }
.r2-case-verdict p:last-child {
  margin: 0;
  font: 0.93rem/1.65 'EB Garamond', serif;
  color: #2a2520;
  text-align: left;
}

/* Sorter (Case 2) */
.r2-sort-legend {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.7rem 0 0.9rem;
}
.r2-sl {
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font: 600 0.78rem/1.1 'Inter', sans-serif;
  background: #fff;
  border: 1.5px solid #c8b89a;
  color: #5b524a;
}
.r2-sl-dn     { color: #2BA85B; border-color: #2BA85B; }
.r2-sl-sketch { color: #F4751E; border-color: #F4751E; }
.r2-sl-cp     { color: #E63946; border-color: #E63946; }
.r2-sort-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.65rem;
  margin: 0.6rem 0 0.85rem;
}
.r2-sort-card {
  background: #fff;
  border: 1px solid #c8b89a;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.r2-sort-card.r2-sc-correct   { border-color: #2BA85B; box-shadow: 0 3px 14px rgba(43,168,91,0.16); }
.r2-sort-card.r2-sc-incorrect { border-color: #E63946; box-shadow: 0 3px 14px rgba(230,57,70,0.14); }
.r2-sc-claim {
  margin: 0 0 0.55rem;
  font: 0.96rem/1.6 'EB Garamond', serif;
  color: #2a2520;
}
.r2-sc-btns {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}
.r2-sc-b {
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1.5px solid #c8b89a;
  background: #fff;
  font: 600 0.82rem/1.1 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.18s;
  color: #2a2520;
}
.r2-sc-b-dn:hover     { border-color: #2BA85B; color: #2BA85B; }
.r2-sc-b-sketch:hover { border-color: #F4751E; color: #F4751E; }
.r2-sc-b-cp:hover     { border-color: #E63946; color: #E63946; }
.r2-sc-b.r2-sc-b-picked { cursor: default; }
.r2-sc-b.r2-sc-b-right  { background: #2BA85B; border-color: #2BA85B; color: #fff; }
.r2-sc-b.r2-sc-b-wrong  { background: #E63946; border-color: #E63946; color: #fff; opacity: 0.85; }
.r2-sc-b.r2-sc-b-dimmed { background: #f4f4f4; color: #999; opacity: 0.7; }
.r2-sc-reveal {
  margin-top: 0.6rem;
  padding: 0.55rem 0.8rem;
  border-radius: 6px;
  background: #f8f5ee;
  font: 0.88rem/1.55 'EB Garamond', serif;
  color: #5b524a;
}
.r2-sort-tally {
  margin: 0.4rem 0 0;
  text-align: center;
  font: italic 0.88rem/1.4 'EB Garamond', serif;
  color: #6b6157;
}

/* Cp-Hydra (Case 3) */
.r2-hydra-claim {
  margin: 0.6rem 0 0.9rem;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(135deg, rgba(230,57,70,0.08), rgba(244,117,30,0.05));
  border: 1px solid rgba(230,57,70,0.25);
  border-radius: 8px;
}
.r2-hydra-claim p {
  margin: 0;
  font: italic 1.05rem/1.5 'EB Garamond', serif;
  color: #2a2520;
  text-align: center;
}
.r2-hydra-prompt {
  margin: 0.3rem 0 0.65rem;
  font: 0.92rem/1.55 'EB Garamond', serif;
  color: #5b524a;
  text-align: center;
}
.r2-hydra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
  margin: 0.55rem 0;
}
@media (max-width: 600px) {
  .r2-hydra-grid { grid-template-columns: 1fr; }
}
.r2-hydra-btn {
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #c8b89a;
  background: #fff;
  font: 500 0.88rem/1.4 'Inter', sans-serif;
  color: #2a2520;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.r2-hydra-btn:hover:not(:disabled) {
  border-color: #6E3FCF;
  color: #6E3FCF;
  background: #f5f3ff;
}
.r2-hydra-btn:disabled {
  background: #f4f4f4;
  color: #999;
  border-color: #ddd;
  cursor: not-allowed;
  text-decoration: line-through;
}
.r2-hydra-log {
  margin: 0.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.r2-hydra-entry {
  padding: 0.55rem 0.85rem;
  background: #fff;
  border-left: 3px solid #6E3FCF;
  border-radius: 0 6px 6px 0;
  font: 0.88rem/1.55 'EB Garamond', serif;
  animation: r2-hydra-in 0.5s ease both;
}
.r2-hydra-entry .r2-he-cond {
  color: #6E3FCF;
  font-weight: 600;
}
.r2-hydra-entry .r2-he-counter {
  display: block;
  margin-top: 0.25rem;
  color: #5b524a;
}
.r2-hydra-entry .r2-he-counter::before {
  content: '↳ historical record: ';
  font: 700 0.72rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #E63946;
  margin-right: 0.4rem;
}
@keyframes r2-hydra-in {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}
.r2-hydra-tally {
  margin: 0.5rem 0 0;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  font: 0.82rem/1.4 'Inter', sans-serif;
  color: #6b6157;
}
.r2-ht-item strong { color: #6E3FCF; }

/* Final report (Step 4) */
.r2-report-findings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.7rem 0 1rem;
}
.r2-rf {
  padding: 0.55rem 0.9rem;
  background: linear-gradient(135deg, rgba(110,63,207,0.07), rgba(139,92,246,0.04));
  border-left: 3px solid #6E3FCF;
  border-radius: 0 6px 6px 0;
  font: 0.93rem/1.55 'EB Garamond', serif;
  color: #2a2520;
}
.r2-rf-icon {
  color: #6E3FCF;
  margin-right: 0.45rem;
  font-size: 1.05rem;
}
.r2-report-survives {
  margin: 1rem 0;
  padding: 0.9rem 1.15rem;
  background: rgba(43,168,91,0.07);
  border-left: 3px solid #2BA85B;
  border-radius: 0 8px 8px 0;
}
.r2-report-survives h5 {
  margin: 0 0 0.5rem;
  font: 700 0.82rem/1 'Inter', sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2BA85B;
}
.r2-report-survives p {
  margin: 0 0 0.6rem;
  font: 0.93rem/1.65 'EB Garamond', serif;
  color: #2a2520;
}
.r2-report-survives p:last-child { margin-bottom: 0; }
.r2-report-handoff {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin: 1rem 0 0;
  padding: 0.85rem 1.1rem;
  background: linear-gradient(135deg, rgba(244,117,30,0.07), rgba(230,57,70,0.04));
  border-radius: 8px;
  border: 1px solid rgba(244,117,30,0.25);
}
.r2-rh-arrow {
  font: 800 1.6rem/1 'Inter', sans-serif;
  color: #F4751E;
  margin: 0;
  flex-shrink: 0;
}
.r2-report-handoff p {
  margin: 0;
  font: 0.95rem/1.6 'EB Garamond', serif;
  color: #2a2520;
}

/* ==========================================================================
   FLUID CHROME CUSHION  (601–1100 px viewport band)
   --------------------------------------------------------------------------
   The fixed UI chrome (nav, mini-map, floating Filikon, footer) is tuned for
   roomy desktop viewports. When the CSS viewport is narrow — a small laptop,
   or, most commonly, a visitor browsing at 125–150 % browser zoom — those
   fixed px sizes render proportionally oversized. This band lets the chrome
   scale down fluidly with the viewport so it stays in proportion.

   Scope is deliberately bounded so nothing the user is already happy with
   changes:
     • ≤ 600 px  → untouched (handled by mobile.css mobile layout)
     • ≥ 1100 px → untouched (clamp() reaches its max = the original size)
   Inside the band, clamp() interpolates between a sensible floor and the
   original desktop value.
   ========================================================================== */
@media (min-width: 601px) and (max-width: 1280px) {
  #nav-bar          { height: clamp(52px, 6.2vw, 68px); }
  .nav-logo-img     { height: clamp(34px, 4.2vw, 46px); }
  #mini-map         { width:  clamp(150px, 20vw, 220px); }
  #filikon-companion .filikon-avatar {
    width:  clamp(58px, 9.8vw, 108px);
    height: clamp(58px, 9.8vw, 108px);
  }
  .footer-links a   { font-size: clamp(0.70rem, 1.18vw, 0.8125rem); }
  .copyright        { font-size: clamp(0.66rem, 1.10vw, 0.75rem); }
}

/* ── Quick-search palette (Cmd/Ctrl+K) — shares im-* animation grammar ──── */
#quicksearch-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1500;
  padding: 12vh 1rem 5vh;
}
#quicksearch-modal.open    { display: block; animation: im-backdrop-in 0.32s ease forwards; }
#quicksearch-modal.closing { display: block; animation: im-backdrop-out 0.22s ease forwards; }
#qs-card {
  max-width: 560px;
  margin: 0 auto;
  background: #faf8f4;
  border-radius: 10px;
  box-shadow: 0 32px 100px rgba(0,0,0,0.65);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.985);
}
#quicksearch-modal.open #qs-card {
  animation: im-card-in 0.40s cubic-bezier(0.22,1,0.36,1) 0.05s both;
}
#quicksearch-modal.closing #qs-card {
  animation: im-card-out 0.22s cubic-bezier(0.60,0,0.90,0.15) both;
}
#qs-inputwrap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid #e2dcd0;
}
#qs-icon { width: 19px; height: 19px; color: #9a8f80; flex-shrink: 0; }
#qs-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font: 400 1.06rem/1.4 'EB Garamond', serif;
  color: #1a1a1a;
}
#qs-input::placeholder { color: #a89d8e; }
#qs-kbd {
  font: 600 0.62rem/1 Inter, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9a8f80;
  border: 1px solid #d8d1c4;
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  background: #f1ece2;
}
#qs-list { list-style: none; margin: 0; padding: 0.4rem; }
#qs-empty {
  padding: 1.1rem 0.9rem 1.3rem;
  font: italic 0.95rem/1.5 'EB Garamond', serif;
  color: #7a7570;
}
.qs-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.7rem;
  border-radius: 7px;
  cursor: pointer;
}
.qs-item.active { background: #efe9dd; }
.qs-num {
  font: 700 0.68rem/1 Inter, sans-serif;
  letter-spacing: 0.05em;
  border-radius: 5px;
  padding: 0.32rem 0.42rem;
  min-width: 2.1rem;
  text-align: center;
  flex-shrink: 0;
}
.qs-text {
  display: flex;
  flex-direction: column;
  gap: 0.14rem;
  min-width: 0;
  flex: 1;
}
.qs-title {
  font: 600 0.98rem/1.3 'EB Garamond', serif;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-room {
  font: 600 0.62rem/1 Inter, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8075;
}
.qs-go {
  font-size: 0.85rem;
  color: #b5aa99;
  opacity: 0;
  flex-shrink: 0;
}
.qs-item.active .qs-go { opacity: 1; }
#qs-hint {
  margin: 0;
  padding: 0.55rem 1.1rem 0.7rem;
  border-top: 1px solid #eee8dc;
  font: 500 0.68rem/1 Inter, sans-serif;
  letter-spacing: 0.04em;
  color: #9a8f80;
}

/* Nav search button — same grammar as #newsletter-btn */
#quicksearch-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  border: 2px solid rgba(255,255,255,0.80);
  background: #f5f1e8;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 4px rgba(26,26,46,0.08);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  flex-shrink: 0;
  position: relative;
  color: #1a1a2e;
  transition: transform 0.22s cubic-bezier(0.22,1,0.36,1), box-shadow 0.22s ease;
}
#quicksearch-btn svg { width: 22px; height: 22px; pointer-events: none; }
#quicksearch-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 10px 28px rgba(0,0,0,0.38), 0 0 0 6px rgba(26,26,46,0.14);
}
#quicksearch-btn:active { transform: scale(0.96); }
#quicksearch-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(244,117,30,0.50), 0 6px 18px rgba(0,0,0,0.28);
}
#quicksearch-btn .fb-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: rgba(20,20,20,0.92);
  color: #fff;
  font: 600 0.66rem/1 Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.42rem 0.6rem;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#quicksearch-btn:hover .fb-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}