/* ═══════════════════════════════════════════════════════════
   Campus building labels — Lecture Hall + Library destination
   cards shown during the explore phase. Overrides the inline
   yellow-tooltip style from main.js with a white-card design:
   yellow circular icon up top, dark navy ENTER button.

   Selectors target #cs-building-label-left (Lecture Hall) and
   #cs-building-label-right (Library) — these IDs are set by
   q._enterCampusExplore() in main.js. Inline styles win on
   specificity ties, so each override carries !important.
   ═══════════════════════════════════════════════════════════ */

#cs-building-label-left,
#cs-building-label-right {
  /* Dark glass card with gold border + glow — matches the
     destination card visual idiom from the campus tour. Icon
     sits on the LEFT, text + ENTER button stack to its right. */
  background:
    linear-gradient(180deg, rgba(20, 20, 38, 0.94), rgba(10, 10, 22, 0.97)) !important;
  color: #ffffff !important;
  padding: 16px 22px 16px 84px !important;
  border-radius: 18px !important;
  border: 1.5px solid rgba(255, 215, 0, 0.6) !important;
  min-width: 230px !important;
  max-width: 280px !important;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 32px rgba(255, 215, 0, 0.18) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /* JS now writes the final left/top in pixels for each card (fixed
     viewport positions, not world-space projection). No transform
     offsets needed — the card anchors at its inline left/top. */
  position: fixed;
  overflow: visible;
}

/* Hover lift — slight raise without disturbing the JS-controlled
   left/top positioning. */
#cs-building-label-left:hover,
#cs-building-label-right:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(255, 215, 0, 0.9) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 0 44px rgba(255, 215, 0, 0.35) !important;
}

/* Gold rounded-square icon disc anchored to the LEFT edge of
   each card (matching the destination-card icon position from
   the campus tour). */
#cs-building-label-left::before,
#cs-building-label-right::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 14px;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #ffd700;
  box-shadow:
    0 6px 18px rgba(255, 215, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.25);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
}

/* Lecture Hall — building / columns icon. */
#cs-building-label-left::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V10'/><path d='M9 21V10'/><path d='M15 21V10'/><path d='M19 21V10'/><path d='M2 10l10-6 10 6'/><path d='M3 10h18'/></svg>");
}

/* Library — open book icon. */
#cs-building-label-right::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4.5C2 3.67 2.67 3 3.5 3H9a3 3 0 0 1 3 3v14a2 2 0 0 0-2-2H3.5A1.5 1.5 0 0 1 2 16.5z'/><path d='M22 4.5c0-.83-.67-1.5-1.5-1.5H15a3 3 0 0 0-3 3v14a2 2 0 0 1 2-2h6.5a1.5 1.5 0 0 0 1.5-1.5z'/></svg>");
}

/* Title — first text div. Gold, left-aligned (icon is on left). */
#cs-building-label-left  > div:nth-child(1),
#cs-building-label-right > div:nth-child(1) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  color: #ffd700 !important;
  margin-bottom: 4px !important;
  text-align: left;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* Description — second text div. Light gray, left-aligned. */
#cs-building-label-left  > div:nth-child(2),
#cs-building-label-right > div:nth-child(2) {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
  text-align: left;
}

/* ENTER button — gold pill with dark text, image-1 destination
   card idiom. */
#cs-building-label-left  .cs-bldg-enter-btn,
#cs-building-label-right .cs-bldg-enter-btn {
  display: inline-block !important;
  width: auto !important;
  padding: 9px 22px !important;
  background: #ffd700 !important;
  color: #0a0a1f !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 999px !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, filter 0.12s ease !important;
  box-shadow: 0 4px 14px rgba(255, 215, 0, 0.35);
}

#cs-building-label-left  .cs-bldg-enter-btn:hover,
#cs-building-label-right .cs-bldg-enter-btn:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 215, 0, 0.5);
}

/* Hide the inline downward-arrow pointer from the original
   tooltip design — replaced with side-pointing CSS arrows below. */
#cs-building-label-left  > div:last-child:not(:nth-child(-n+2)),
#cs-building-label-right > div:last-child:not(:nth-child(-n+2)) {
  display: none !important;
}

/* Side-pointing triangle arrows. Lecture Hall card points LEFT
   (toward its building on the left of the campus); Library card
   points RIGHT (toward its building on the right). Gold color +
   subtle drop-shadow so they read as continuous with the card's
   gold border. */
#cs-building-label-left::after,
#cs-building-label-right::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}
#cs-building-label-left::after {
  /* Triangle points LEFT — flat edge meets card's left edge. */
  left: -14px;
  border-right: 16px solid rgba(255, 215, 0, 0.85);
}
#cs-building-label-right::after {
  /* Triangle points RIGHT — flat edge meets card's right edge. */
  right: -14px;
  border-left: 16px solid rgba(255, 215, 0, 0.85);
}
/* On hover the border brightens; brighten the arrow to match. */
#cs-building-label-left:hover::after  { border-right-color: rgba(255, 215, 0, 1) !important; }
#cs-building-label-right:hover::after { border-left-color:  rgba(255, 215, 0, 1) !important; }

/* When the camera rotates, _updateExploreLabels() writes a
   `data-card-side` attribute on each card reflecting which half
   of the screen its world-anchored building actually projects to.
   Below rules override the ID-driven arrow defaults above so the
   triangle always points toward the building, even after the
   player turns 180° and the two cards visually swap sides. */
#cs-building-label-left[data-card-side="right"]::after,
#cs-building-label-right[data-card-side="right"]::after {
  left: auto !important;
  right: -14px !important;
  border-left: 16px solid rgba(255, 215, 0, 0.85) !important;
  border-right: none !important;
}
#cs-building-label-left[data-card-side="left"]::after,
#cs-building-label-right[data-card-side="left"]::after {
  left: -14px !important;
  right: auto !important;
  border-right: 16px solid rgba(255, 215, 0, 0.85) !important;
  border-left: none !important;
}
#cs-building-label-left[data-card-side="right"]:hover::after,
#cs-building-label-right[data-card-side="right"]:hover::after {
  border-left-color: rgba(255, 215, 0, 1) !important;
}
#cs-building-label-left[data-card-side="left"]:hover::after,
#cs-building-label-right[data-card-side="left"]:hover::after {
  border-right-color: rgba(255, 215, 0, 1) !important;
}

/* ═══════════════════════════════════════════════════════════
   Destination cards — Lecture Hall / Assembly Hall / Library
   shown by _showDestinationCards() during the campus-tour.
   The card markup already has dark glass background, gold
   pointer arrow, and bt-card-name/tagline/enter children.
   We add an icon disc on the left and reflow padding so the
   text starts after it.
   ═══════════════════════════════════════════════════════════ */

.gp-dest-card-overlay[data-dest-id] {
  /* Fluid sizing: card width + icon padding scale with viewport so
     the cards stay anchored to their buildings as the screen shrinks
     instead of overflowing or covering the wrong building. */
  padding-left: clamp(60px, 7vw, 86px) !important;
  padding-right: clamp(14px, 1.6vw, 22px) !important;
  padding-top: clamp(10px, 1.2vw, 18px) !important;
  padding-bottom: clamp(10px, 1.2vw, 18px) !important;
  min-width: clamp(190px, 22vw, 280px) !important;
  max-width: clamp(220px, 26vw, 340px) !important;
  position: absolute;
}

/* Title + tagline + button scale with the card width so the
   layout stays balanced at every viewport. */
.gp-dest-card-overlay[data-dest-id] .bt-card-name    { font-size: clamp(0.95rem, 1.2vw, 1.18rem) !important; }
.gp-dest-card-overlay[data-dest-id] .bt-card-tagline { font-size: clamp(0.72rem, 0.85vw, 0.86rem) !important; line-height: 1.35 !important; }
.gp-dest-card-overlay[data-dest-id] .bt-card-enter   { font-size: clamp(0.7rem,  0.82vw, 0.82rem) !important; padding: clamp(6px, 0.7vw, 9px) clamp(12px, 1.4vw, 18px) !important; }

/* main.js sets inline left/top per card (lecture: 30%, assembly: 40%,
   library: 70%) — fine without icons, but the new icon box makes the
   cards wider so Lecture + Assembly overlap. Spread them out via CSS
   variables so window._destTune() can nudge each card live from the
   console; the !important on the variable read still wins over the
   inline style main.js writes. */
.gp-dest-card-overlay[data-dest-id="lecture"]  { left: var(--dest-lecture-left,  30%) !important; top: var(--dest-lecture-top,  32%) !important; }
.gp-dest-card-overlay[data-dest-id="assembly"] { left: var(--dest-assembly-left, 41%) !important; top: var(--dest-assembly-top, 10%) !important; }
.gp-dest-card-overlay[data-dest-id="library"]  { left: var(--dest-library-left,  75%) !important; top: var(--dest-library-top,  32%) !important; }

/* Yellow rounded-square icon box anchored on the card's left edge.
   Width + glyph size scale with viewport width so the icon never
   eats the card's text column on narrower screens. */
.gp-dest-card-overlay[data-dest-id]::before {
  content: '';
  position: absolute;
  left: clamp(8px, 0.9vw, 14px);
  top: 50%;
  transform: translateY(-50%);
  width:  clamp(40px, 4.6vw, 56px);
  height: clamp(40px, 4.6vw, 56px);
  border-radius: 12px;
  background: #ffd700;
  background-repeat: no-repeat;
  background-position: center;
  background-size: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 30px);
  box-shadow:
    0 6px 16px rgba(255, 215, 0, 0.35),
    0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

/* Lecture Hall — building / columns. */
.gp-dest-card-overlay[data-dest-id="lecture"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V10'/><path d='M9 21V10'/><path d='M15 21V10'/><path d='M19 21V10'/><path d='M2 10l10-6 10 6'/><path d='M3 10h18'/></svg>");
}

/* Library — open book. */
.gp-dest-card-overlay[data-dest-id="library"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4.5C2 3.67 2.67 3 3.5 3H9a3 3 0 0 1 3 3v14a2 2 0 0 0-2-2H3.5A1.5 1.5 0 0 1 2 16.5z'/><path d='M22 4.5c0-.83-.67-1.5-1.5-1.5H15a3 3 0 0 0-3 3v14a2 2 0 0 1 2-2h6.5a1.5 1.5 0 0 0 1.5-1.5z'/></svg>");
}

/* Assembly Hall — graduation cap (progress + certificates). */
.gp-dest-card-overlay[data-dest-id="assembly"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 10v6'/><path d='M2 10l10-5 10 5-10 5z'/><path d='M6 12v5c0 2 3 3 6 3s6-1 6-3v-5'/></svg>");
}

/* ─── Tablet / narrow desktop ─────────────────────────────────
   The campus video is `object-fit: cover` so as the viewport
   narrows the buildings on the edges crop in. Pull the side
   cards inward proportionally so they stay over their buildings
   instead of marching off-screen. */
@media (max-width: 1100px) {
  .gp-dest-card-overlay[data-dest-id="lecture"]  { left: 26% !important; top: 36% !important; }
  .gp-dest-card-overlay[data-dest-id="assembly"] { left: 50% !important; top: 12% !important; transform: translate(-50%) !important; }
  .gp-dest-card-overlay[data-dest-id="library"]  { left: 74% !important; top: 36% !important; }
}

/* ─── Mobile portrait (< 720px) ───────────────────────────────
   Cards stack vertically along the left edge; centred horizontally
   would cover the student avatar. Pointer arrows are hidden — at
   this size the building isn't a clean target anymore. */
@media (max-width: 720px) {
  /* Building-anchored white labels (Lecture Hall / Library that
     hover above the buildings during the explore phase) shrink
     proportionally and tuck closer in. */
  #cs-building-label-left,
  #cs-building-label-right {
    padding: 12px 16px 12px 68px !important;
    min-width: 180px !important;
    max-width: 220px !important;
    border-radius: 14px !important;
  }
  #cs-building-label-left::before,
  #cs-building-label-right::before {
    width: 44px;
    height: 44px;
    left: 10px;
    background-size: 22px 22px;
    border-radius: 10px;
  }
  #cs-building-label-left  > div:nth-child(1),
  #cs-building-label-right > div:nth-child(1) {
    font-size: 0.95rem !important;
  }
  #cs-building-label-left  > div:nth-child(2),
  #cs-building-label-right > div:nth-child(2) {
    font-size: 0.72rem !important;
  }
  #cs-building-label-left  .cs-bldg-enter-btn,
  #cs-building-label-right .cs-bldg-enter-btn {
    padding: 7px 18px !important;
    font-size: 0.72rem !important;
  }

  /* Destination overlay (Lecture / Assembly / Library 3-up) —
     restack as a centred column. main.js's pointer arrow no
     longer points at the right building so we hide it. */
  .gp-dest-card-overlay[data-dest-id="lecture"],
  .gp-dest-card-overlay[data-dest-id="assembly"],
  .gp-dest-card-overlay[data-dest-id="library"] {
    left: 50% !important;
    top: auto !important;
    transform: translate(-50%) !important;
    min-width: clamp(220px, 76vw, 320px) !important;
    max-width: 90vw !important;
  }
  .gp-dest-card-overlay[data-dest-id="lecture"]  { top: 18% !important; }
  .gp-dest-card-overlay[data-dest-id="assembly"] { top: 44% !important; }
  .gp-dest-card-overlay[data-dest-id="library"]  { top: 70% !important; }
  .gp-dest-card-overlay[data-dest-id] .bt-card-pointer,
  .gp-dest-card-overlay[data-dest-id] .bt-card-pointer-left,
  .gp-dest-card-overlay[data-dest-id] .bt-card-pointer-right {
    display: none !important;
  }
}

/* ─── Very narrow (< 480px) ───────────────────────────────────
   Trim padding further so the card text doesn't wrap awkwardly. */
@media (max-width: 480px) {
  .gp-dest-card-overlay[data-dest-id] {
    padding-left: 56px !important;
  }
  .gp-dest-card-overlay[data-dest-id]::before {
    width: 38px;
    height: 38px;
    left: 8px;
    background-size: 22px 22px;
  }
}