@font-face {
  font-family: "Nimbus Sans Roomie";
  src: url("assets/roomie/NimbusSanNovD.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Machina Roomie";
  src: url("assets/roomie/NeueMachina-Ultralight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --roomie-brand-800: #272C3A;
  --roomie-brand-700: #275859;
  --roomie-brand-600: #066E6E;
  --roomie-brand-500: #078282;
  --roomie-brand-400: #6bd3d3;
  --roomie-brand-300: #9de2e2;
  --roomie-brand-200: #cef0f0;
  --roomie-brand-100: #e9f6f7;
  --roomie-brand-000: #f4fbfb;
  --roomie-blue-400: #8dd6d6;
  --roomie-gold-500: #FFC53D;
  --roomie-gold-600: #FAAD14;
  --roomie-gray-1000: #1D202B;
  --roomie-gray-800: #3e4659;
  --roomie-gray-700: #525E70;
  --roomie-gray-600: #667283;
  --roomie-gray-500: #a3abb9;
  --roomie-gray-400: #B7BFCB;
  --roomie-gray-300: #d0d5dd;
  --roomie-gray-200: #E8E9ED;
  --roomie-gray-100: #f3f4f6;
  --roomie-white: #f7f5f3;
  --roomie-panel: rgba(247, 245, 243, 0.94);
  --roomie-shadow: 0 10px 28px rgba(29, 32, 43, 0.24);
  --roomie-radius-pill: 999px;
  --roomie-radius-panel: 18px;
  --roomie-radius-soft: 12px;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Nimbus Sans Roomie", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: #000;
  color: var(--roomie-gray-800);
}

#pano {
  position: absolute;
  inset: 0;
}

#title-bar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  min-width: 170px;
  padding: 0.65rem 1.15rem 0.7rem;
  background: var(--roomie-panel);
  border: 1px solid rgba(163, 171, 185, 0.42);
  border-radius: var(--roomie-radius-pill);
  box-shadow: var(--roomie-shadow);
  color: var(--roomie-gray-800);
  z-index: 10;
}

.eyebrow {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--roomie-brand-600);
  font-size: 0.68rem;
  line-height: 1;
  text-transform: uppercase;
}

#scene-name {
  display: block;
  font-family: "Neue Machina Roomie", "Nimbus Sans Roomie", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.2;
}

#floorplan-panel {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: 260px;
  background: var(--roomie-panel);
  border: 1px solid rgba(163, 171, 185, 0.52);
  border-radius: var(--roomie-radius-panel);
  box-shadow: var(--roomie-shadow);
  color: var(--roomie-gray-800);
  z-index: 10;
  transition: width 0.2s;
  overflow: hidden;
}

#floorplan-panel.collapsed {
  width: 120px;
}

#floorplan-panel.collapsed #floorplan-container {
  display: none;
}

#floorplan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(208, 213, 221, 0.84);
  color: var(--roomie-gray-800);
}

#floorplan-toggle {
  display: grid;
  place-items: center;
  background: var(--roomie-brand-100);
  border: 1px solid var(--roomie-brand-400);
  border-radius: var(--roomie-radius-pill);
  color: var(--roomie-brand-700);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  width: 24px;
  height: 24px;
  padding: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

#floorplan-toggle:hover {
  background: var(--roomie-brand-500);
  border-color: var(--roomie-brand-500);
  color: var(--roomie-white);
}

#floorplan-container {
  padding: 0.5rem;
}

.floorplan-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--roomie-radius-soft);
  background: var(--roomie-brand-000);
}

.station-dot {
  cursor: pointer;
  transition: r 0.15s;
}

.station-dot:hover {
  r: 11;
}

.floorplan-tooltip {
  position: fixed;
  z-index: 30;
  transform: translate(-50%, calc(-100% - 12px));
  padding: 0.25rem 0.5rem;
  background: var(--roomie-brand-700);
  border-radius: 10px;
  color: var(--roomie-white);
  font-size: 0.75rem;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.floorplan-tooltip.visible {
  opacity: 1;
}

.view-direction-line {
  stroke: url("#view-direction-stroke-fade");
  stroke-width: 1.4;
  stroke-linecap: round;
}

.view-direction-fan {
  fill: url("#view-direction-fade");
  stroke: none;
}

.view-direction-compass-ring {
  fill: var(--roomie-gold-500);
  stroke: var(--roomie-white);
  stroke-width: 2;
  filter: drop-shadow(0 1px 2px rgba(39, 44, 58, 0.26));
}

.view-direction-nose {
  fill: var(--roomie-gold-500);
  stroke: none;
}

#powered-by {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  background: rgba(39, 44, 58, 0.9);
  border: 1px solid rgba(141, 214, 214, 0.4);
  border-radius: var(--roomie-radius-pill);
  box-shadow: var(--roomie-shadow);
  color: var(--roomie-white);
  font-size: 0.68rem;
  text-transform: uppercase;
  z-index: 10;
}

#powered-by img {
  display: block;
  width: 118px;
  height: auto;
}

/* Hotspot styling */
.link-hotspot {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: pointer;
  pointer-events: auto;
}

.link-hotspot-icon {
  position: absolute;
  inset: 0;
  background: rgba(7, 130, 130, 0.72);
  border: 2px solid var(--roomie-white);
  border-radius: 50%;
  box-shadow: 0 0 0 7px rgba(141, 214, 214, 0.2);
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

.link-hotspot:hover .link-hotspot-icon {
  transform: scale(1.15);
  background: rgba(7, 130, 130, 0.94);
  box-shadow: 0 0 0 9px rgba(141, 214, 214, 0.26);
}

.link-hotspot-tooltip {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 0.5rem;
  padding: 0.32rem 0.55rem;
  background: var(--roomie-brand-700);
  border-radius: 10px;
  color: var(--roomie-white);
  font-size: 0.75rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

@media (max-width: 640px) {
  #title-bar,
  #powered-by {
    left: 0.75rem;
  }

  #title-bar {
    top: 0.75rem;
    max-width: calc(100vw - 1.5rem);
    box-sizing: border-box;
  }

  #floorplan-panel {
    right: 0.75rem;
    bottom: 0.75rem;
    width: min(240px, calc(100vw - 1.5rem));
  }

  #powered-by {
    bottom: auto;
    top: 5.3rem;
  }
}

.link-hotspot:hover .link-hotspot-tooltip {
  opacity: 1;
}