/* CASTLE_QUEST_20261006 — the whole Schloss is the Stadt-Quest link (only while the quest is LIVE).
   Markup: <a class="lsq" id="lsqDesktop|lsqMobile" hidden> … <span class="lsq-label">…</span></a>
   The silhouette SVGs are injected and positioned by /js/castle-quest.js. */

.lsq[hidden] { display: none !important; }
.lsq {
  position: absolute; inset: 0;
  display: block;
  pointer-events: none;              /* only the castle shape and the label take clicks */
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.lsq-stage {
  position: absolute; inset: 0;
  overflow: hidden;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.lsq-stage--tint { z-index: 10; mix-blend-mode: soft-light; }   /* warms the real facade, like evening light */
.lsq.is-on .lsq-stage { opacity: 1; }
.lsq-art { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.lsq-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }

/* pulsing layers (opacity only -> compositor, cheap) */
.lsq-glow, .lsq-tint { pointer-events: none; will-change: opacity; animation: lsq-pulse 4000ms ease-in-out infinite; }
.lsq-halo { fill: none; stroke: rgb(255, 196, 92); stroke-linejoin: round; }
.lsq-rim  { fill: none; stroke: rgb(255, 222, 150); stroke-width: 1.25px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.lsq-veil { fill: rgb(255, 190, 90); fill-opacity: .55; }

/* static hit area (invisible, exactly the silhouette) */
.lsq-hit { pointer-events: none; }
.lsq-edge { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }

@keyframes lsq-pulse {
  0%, 100% { opacity: .28; }
  50%      { opacity: 1; }
}

/* hover / keyboard focus: stronger, steady glow */
.lsq:hover .lsq-glow, .lsq:focus-visible .lsq-glow,
.lsq:hover .lsq-tint, .lsq:focus-visible .lsq-tint { animation: none; opacity: 1; }
.lsq:hover .lsq-halo, .lsq:focus-visible .lsq-halo { stroke: rgb(255, 186, 70); }
.lsq:hover .lsq-veil, .lsq:focus-visible .lsq-veil { fill-opacity: .8; }

/* label: quiet dark glass pill with a gold kicker */
.lsq-label {
  position: absolute; z-index: 13;
  pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 10px;
  border-radius: 999px;
  background: rgba(24, 19, 12, .58);
  -webkit-backdrop-filter: blur(6px) saturate(1.2); backdrop-filter: blur(6px) saturate(1.2);
  border: 1px solid rgba(255, 222, 160, .55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
  color: #fff7e6;
  font: 500 clamp(11.5px, .82vw, 13px)/1.15 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
  opacity: 0; transition: opacity .6s ease, transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.lsq.is-on .lsq-label { opacity: 1; }
.lsq-k { color: #f3cf86; font-weight: 700; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.lsq-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 222, 160, .8); flex: none; }
.lsq-go { color: #f3cf86; font-weight: 700; margin-left: 1px; transition: transform .25s ease; }
/* soft ring on the pill, in step with the castle pulse */
.lsq-label::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 214, 140, .55), 0 0 14px 2px rgba(255, 200, 110, .35);
  opacity: 0; will-change: opacity; animation: lsq-pulse 4000ms ease-in-out infinite;
}
.lsq:hover .lsq-label, .lsq:focus-visible .lsq-label { background: rgba(24, 19, 12, .74); border-color: rgba(255, 222, 160, .9); }
.lsq:hover .lsq-label::after, .lsq:focus-visible .lsq-label::after { animation: none; opacity: 1; }
.lsq:hover .lsq-go, .lsq:focus-visible .lsq-go { transform: translateX(2px); }
.lsq:focus-visible .lsq-label { outline: 2px solid rgba(251, 191, 36, .9); outline-offset: 2px; }

/* desktop: label centred above the central tower, with a hairline down to it */
.lsq--desktop .lsq-label { transform: translate(-50%, calc(-100% - 12px)); }
.lsq--desktop .lsq-label::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 11px; margin-left: -.5px;
  background: linear-gradient(rgba(255, 222, 160, .85), rgba(255, 222, 160, 0));
}
.lsq--desktop:hover .lsq-label { transform: translate(-50%, calc(-100% - 14px)); }

/* mobile /m/ hero card: tilt the background up so the whole tower is in frame,
   label sits in the sky top-left (clear of the tree and the subtitle row) */
.lsq-host > .bg-cover { background-position: 50% 0% !important; transition: background-position .7s ease, transform .7s cubic-bezier(.4,0,.2,1); }
.lsq--mobile .lsq-label { left: 9px; top: 8px; padding: 4px 9px 4px 8px; gap: 6px; font-size: 11px; }
.lsq--mobile .lsq-k { font-size: 9.5px; }
.lsq--mobile .lsq-win { display: none; }          /* short pill on phones: STADT-QUEST · 100 € → (full text stays in aria-label) */
.lsq-host:hover .lsq-stage { transform: scale(1.05); }      /* follows the card's group-hover zoom */
.lsq--mobile .lsq-stage { transition: opacity .6s ease, transform .7s cubic-bezier(.4,0,.2,1); }

@media (prefers-reduced-motion: reduce) {
  .lsq-glow, .lsq-tint, .lsq-label::after { animation: none !important; }
  .lsq-glow, .lsq-tint { opacity: .75; }
  .lsq-label::after { opacity: .6; }
  .lsq-stage, .lsq-label, .lsq-host > .bg-cover { transition: none !important; }
}

/* QUEST_PILL_COMPACT_20261013 — desktop only: ~22% smaller pill, moved off the palace to the
   left corner under the hero subtitle (no hairline to the tower there). Mobile rules untouched. */
.lsq--desktop .lsq-label {
  left: 28px !important; top: 108px !important; transform: none;
  padding: 4px 9px 4px 8px; gap: 5px;
  font-size: clamp(9px, .64vw, 10px);
}
.lsq--desktop .lsq-k { font-size: 8.5px; }
.lsq--desktop .lsq-label::before { display: none; }
.lsq--desktop:hover .lsq-label { transform: translateY(-1px); }

/* QUEST_PILL_MOBILE_20261014 — mobile (/ and /m/ on phones): ~20% smaller pill, tucked into the sky
   strip in the top-left corner of the hero card, above the palace roofline (not on the facade).
   Visual pill ~18px high; an invisible ::before extends the tap target to 40px+. */
.lsq--mobile .lsq-label {
  left: 7px !important; top: 5px !important; transform: none;
  padding: 3px 7px 3px 6px; gap: 5px; font-size: 9px;
  background: rgba(24, 19, 12, .5);
}
.lsq--mobile .lsq-k { font-size: 7.6px; letter-spacing: .12em; }
.lsq--mobile .lsq-label::before {
  content: ""; position: absolute; left: -6px; right: -6px; top: -5px; bottom: -18px;
  background: transparent; pointer-events: auto;
}