/* ===== Кликабельная зона (hotspot) ===== */
#runtime-hotspots {
  position: absolute;
  inset: 0;
  /* World interaction stays below all panels and administrator controls. */
  z-index: var(--layer-world);
  pointer-events: none;
}

/* A location page can mount its own visual module between the atmosphere and
   shared dots/buttons. The root is passive by default: custom scenery must
   opt in to pointer events, so it cannot swallow a common interaction. */
.location-page-extension {
  position:absolute;
  inset:0;
  z-index:var(--layer-page);
  pointer-events:none;
}
.location-page-extension[data-interactive="true"] { pointer-events:auto; }

/* Relax repeats the approved local presentation: one small location title,
   a translucent equalizer and four player controls above the shared HUD.
   The extension itself stays passive so common arrows and HUD controls keep
   their existing hit areas; only the player buttons accept pointer input. */
.relax-page-title {
  position:absolute;
  top:46px;
  left:50%;
  margin:0;
  transform:translateX(-50%);
  color:rgba(240,223,178,.82);
  font:700 11px/1 var(--font-game);
  letter-spacing:.2em;
  text-transform:uppercase;
  text-shadow:0 2px 8px #000;
  white-space:nowrap;
}
.relax-player-dock {
  position:absolute;
  left:50%;
  bottom:126px;
  display:grid;
  justify-items:center;
  width:min(340px,calc(100% - 34px));
  transform:translateX(-50%);
}
.relax-equalizer {
  display:flex;
  align-items:end;
  justify-content:center;
  gap:3px;
  width:74px;
  height:24px;
  margin-bottom:5px;
  padding:4px 7px;
  border:1px solid rgba(232,216,176,.13);
  border-radius:999px;
  background:rgba(5,9,11,.28);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  opacity:.64;
}
.relax-equalizer i {
  display:block;
  width:3px;
  height:5px;
  border-radius:2px;
  background:rgba(240,223,178,.9);
  transform-origin:bottom;
}
.relax-equalizer.is-playing i { animation:relax-equalizer .82s ease-in-out infinite alternate; }
.relax-equalizer.is-playing i:nth-child(2) { animation-delay:-.45s; }
.relax-equalizer.is-playing i:nth-child(3) { animation-delay:-.18s; }
.relax-equalizer.is-playing i:nth-child(4) { animation-delay:-.62s; }
.relax-equalizer.is-playing i:nth-child(5) { animation-delay:-.3s; }
.relax-equalizer.is-playing i:nth-child(6) { animation-delay:-.7s; }
.relax-equalizer.is-playing i:nth-child(7) { animation-delay:-.08s; }
.relax-equalizer.is-playing i:nth-child(8) { animation-delay:-.52s; }
.relax-track-title {
  width:100%;
  min-height:20px;
  margin:0 0 5px;
  overflow:hidden;
  color:#f2e5c4;
  font:700 12px/1.2 var(--font-game);
  text-align:center;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-shadow:0 2px 10px #000;
}
.relax-player-controls {
  display:grid;
  grid-template-columns:42px 46px 42px 42px;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid rgba(232,216,176,.23);
  border-radius:999px;
  background:rgba(5,9,11,.5);
  box-shadow:0 8px 28px rgba(0,0,0,.38);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  pointer-events:auto;
}
.relax-player-control {
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  padding:0;
  border:0;
  border-radius:999px;
  background:transparent;
  color:#f0dfb2;
  cursor:pointer;
  touch-action:manipulation;
}
.relax-player-control.primary {
  width:46px;
  border:1px solid rgba(240,223,178,.25);
  background:rgba(255,255,255,.055);
}
.relax-player-control:active { transform:scale(.92); }
.relax-player-control:focus-visible { outline:2px solid #f0dfb2; outline-offset:2px; }
.relax-player-control svg { width:18px; height:18px; fill:currentColor; }
.relax-player-control[data-relax-action="toggle"] svg { width:17px; }
.relax-player-control.mode { position:relative; color:rgba(240,223,178,.82); }
.relax-player-control.mode svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.relax-player-control.mode text { fill:currentColor; stroke:none; font:700 8px var(--font-game); }
.relax-player-toast {
  position:absolute;
  top:0;
  left:50%;
  max-width:82%;
  padding:7px 11px;
  border:1px solid rgba(232,216,176,.28);
  border-radius:999px;
  background:rgba(8,12,14,.9);
  color:#e9dcbf;
  font:10px/1.2 var(--font-game);
  text-align:center;
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  transform:translate(-50%,calc(-100% - 2px));
  transition:.2s;
}
.relax-player-toast.show { opacity:1; transform:translate(-50%,calc(-100% - 8px)); }
@keyframes relax-equalizer { from { height:4px; opacity:.45; } to { height:17px; opacity:1; } }
@media (max-width:430px) { .relax-player-dock { bottom:132px; } }
@media (prefers-reduced-motion:reduce) {
  .relax-equalizer.is-playing i { animation:none; height:10px; }
  .relax-player-toast,.relax-player-control { transition:none; }
}
.hotspot {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
  left: 16%;
  top: 40%;
  width: 8%;
  height: 6%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  touch-action: manipulation;
}
.hotspot-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--interactive-dot-size, 11px);
  height: var(--interactive-dot-size, 11px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: var(--interactive-border-width, 2px) solid color-mix(in srgb, var(--interactive-color, rgba(255, 255, 255, 0.85)) calc(var(--interactive-border-opacity, 1) * 100%), transparent);
  background:var(--interactive-point-background, color-mix(in srgb, var(--interactive-color, #ffffff) 12%, transparent));
  animation: hotspot-pulse 1.8s ease-out infinite;
  pointer-events: none;
}
.hotspot:not(.interactive-button).interactive-cooling .hotspot-hint {
  /* The dot has the same server-backed recovery state as a button: the
     coloured arc grows clockwise and its quiet centre remains readable. */
  animation:none;
  background:conic-gradient(
    from -90deg,
    var(--interactive-color, #c59a4a) calc(var(--interactive-cooldown-progress, 0) * 1turn),
    rgba(9, 11, 14, .76) 0
  );
  box-shadow:0 0 0 1px rgba(255,246,220,.7), 0 0 12px color-mix(in srgb, var(--interactive-color, #c59a4a) 46%, transparent);
}
.hotspot:not(.interactive-button).interactive-cooling .hotspot-hint::after {
  content:'';
  position:absolute;
  inset:3px;
  border-radius:inherit;
  background:rgba(9, 11, 14, .88);
}
/* A point has one status line at a time. While its server cooldown is
   active, the countdown replaces the authored caption/legacy slot label;
   removing the class restores that text without rebuilding the hotspot. */
.hotspot:not(.interactive-button).interactive-cooling .hotspot-caption,
.hotspot:not(.interactive-button).interactive-cooling > i {
  visibility:hidden;
}
@keyframes hotspot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0.5); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 255, 255, 0); }
  100% { box-shadow: 0 0 0 0   rgba(255, 255, 255, 0); }
}
.hotspot:not(.interactive-button).interactive-raid-completed .hotspot-hint {
  border-color:#d85b4a;
  background:rgba(216,91,74,.28);
  animation:raid-completed-pulse .36s cubic-bezier(.2,.75,.25,1) infinite;
}
@keyframes raid-completed-pulse {
  0% { box-shadow:0 0 0 0 rgba(216,91,74,.92),0 0 8px rgba(216,91,74,.9); }
  42% { box-shadow:0 0 0 6px rgba(216,91,74,.25),0 0 15px rgba(216,91,74,1); }
  78% { box-shadow:0 0 0 10px rgba(216,91,74,0),0 0 9px rgba(216,91,74,.74); }
  100% { box-shadow:0 0 0 0 rgba(216,91,74,0),0 0 8px rgba(216,91,74,.9); }
}
@media (prefers-reduced-motion:reduce) {
  .hotspot:not(.interactive-button).interactive-raid-completed .hotspot-hint {
    animation:none;
    box-shadow:0 0 0 5px rgba(216,91,74,.3),0 0 14px rgba(216,91,74,.9);
  }
}
.hotspot.hidden { display: none; }
.interactive-button { width:auto; height:auto; min-height:var(--interactive-min-height,34px); max-width:160px; padding:var(--interactive-padding-y,7px) var(--interactive-padding-x,12px); border:var(--interactive-border-width,1px) solid color-mix(in srgb, var(--interactive-color, var(--bound-activity-color, #c59a4a)) calc(var(--interactive-border-opacity, 1) * 100%), transparent); border-radius:var(--interactive-radius,9px); color:var(--interactive-text-color,#fff6dc); background:color-mix(in srgb, var(--interactive-background-color, #0a0c0e) calc(var(--interactive-background-opacity, .86) * 100%), transparent); box-shadow:0 var(--interactive-shadow-y,4px) var(--interactive-shadow-blur,16px) rgba(0,0,0,.45); font:var(--interactive-font-weight,700) var(--interactive-font-size,var(--type-control-size,12px))/var(--interactive-line-height,1.333) var(--font-game); letter-spacing:var(--interactive-letter-spacing,0px); text-align:var(--interactive-text-align,center); text-transform:none; }
.interactive-button[data-interactive-wrap="wrap"] { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:var(--interactive-max-lines,3); overflow:hidden; white-space:normal; }
.interactive-button[data-interactive-wrap="single"] { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.interactive-button.interactive-cooling {
  /* Recovery grows from the left edge to the right edge. Explicit matching
     stops avoid a browser reordering the empty 0% stop into a flat fill. */
  background:linear-gradient(
    to right,
    color-mix(in srgb, var(--interactive-color,#c59a4a) 58%, #0a0c0e) 0%,
    color-mix(in srgb, var(--interactive-color,#c59a4a) 58%, #0a0c0e) calc(var(--interactive-cooldown-progress,0) * 100%),
    color-mix(in srgb, var(--interactive-background-color,#0a0c0e) calc(var(--interactive-background-opacity,.86) * 100%), transparent) calc(var(--interactive-cooldown-progress,0) * 100%),
    color-mix(in srgb, var(--interactive-background-color,#0a0c0e) calc(var(--interactive-background-opacity,.86) * 100%), transparent) 100%
  );
  cursor:wait;
}
.interactive-button:disabled { opacity:1; }
.interactive-position-anchor { position:absolute; width:100%; height:100%; pointer-events:none; }
.interactive-position-anchor>.hotspot { left:0; top:0; }
.hotspot.interactive-button {
  transform:translate(-50%,-50%);
  width:var(--interactive-width, auto);
  height:var(--interactive-height, auto);
  min-width:var(--interactive-min-width, 0px);
  min-height:max(var(--interactive-min-height, 34px), var(--interactive-min-height-extra, 0px));
  max-width:none;
}
.hotspot.interactive-button:not(.interactive-auto-size) {
  /* Authored dimensions are the minimum footprint. A translated or edited
     label may need another line on a narrower device; grow around the same
     centre instead of clipping text or moving the saved anchor. */
  height:auto;
  min-height:max(var(--interactive-min-height, 0px), var(--interactive-height, 0px));
}
.hotspot.interactive-button:active { transform:translate(-50%,-50%) scale(.94); }
.hotspot.interactive-no-background { background:transparent; }
.hotspot.interactive-glow { filter:drop-shadow(0 0 var(--interactive-glow-blur,9px) var(--interactive-color, #f4d483)); }
.hotspot-caption {
  position:absolute;
  left:50%;
  top:calc(50% + max(var(--interactive-caption-offset, 15px), var(--interactive-dot-size, 11px)));
  width:var(--interactive-caption-width, max-content);
  max-width:260px;
  transform:translateX(-50%);
  color:var(--interactive-caption-color, #fff6dc);
  box-sizing:content-box;
  overflow:visible;
  padding:1px 2px 2px;
  font:var(--interactive-caption-font-weight,700) var(--interactive-caption-size,var(--type-control-size,12px))/var(--interactive-caption-line-height,1.333) var(--font-game);
  letter-spacing:var(--interactive-caption-letter-spacing,0px);
  text-align:var(--interactive-caption-text-align,center);
  text-shadow:0 1px 3px #000;
  pointer-events:none;
}
.hotspot-caption.interactive-caption-top,
.hotspot.interactive-caption-top .hotspot-caption { top:auto; bottom:calc(50% + max(var(--interactive-caption-offset, 15px), var(--interactive-dot-size, 11px))); }
.hotspot.interactive-caption-left .hotspot-caption { left:auto; right:calc(50% + max(var(--interactive-caption-offset, 15px), var(--interactive-dot-size, 11px))); top:50%; transform:translateY(-50%); text-align:right; }
.hotspot.interactive-caption-right .hotspot-caption { left:calc(50% + max(var(--interactive-caption-offset, 15px), var(--interactive-dot-size, 11px))); top:50%; transform:translateY(-50%); text-align:left; }
.hotspot-cooldown { position:absolute; left:50%; top:calc(50% + max(var(--interactive-cooldown-offset,18px), var(--interactive-dot-size, 11px))); transform:translateX(-50%); min-width:max-content; color:#fff0c6; font:700 var(--interactive-cooldown-font-size,10px)/1 var(--font-game); text-shadow:0 1px 3px #000; pointer-events:none; }
.hotspot-link-editor .hotspot-hint { animation-duration:var(--interactive-pulse-speed,1.15s); }
.scene-link-editor-live { background:transparent !important; }
.scene-link-editor-live .event-link-canvas { background:transparent !important; }

/* ===== Кнопка «назад» ===== */
.back-btn {
  position: absolute;
  /* World navigation: compact edge control. It stays below the former
     position by 5px, close to the scene edge, and uses glass—not black. */
  bottom: 95px;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(35, 37, 40, 0.46);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  transition: background 0.15s ease, transform 0.1s ease;aspect-ratio:1;flex-shrink:0;min-width:36px;max-width:36px;min-height:36px;max-height:36px;}
.back-btn .arrow-right { display: block; }
.back-btn .arrow-left  { display: none; }
.back-btn.side-left { left: 9px; right: auto; }
.back-btn.side-left .arrow-right { display: none; }
.back-btn.side-left .arrow-left  { display: block; }
.back-btn.side-right { right: 9px; left: auto; }
.back-btn:hover  { background: rgba(64, 66, 69, 0.58); }
.back-btn:active { transform: scale(0.92); }
.back-btn.hidden { display: none; }
/* Visual circle is deliberately compact; the transparent halo preserves a
   comfortable 44px touch target on phones. */
.back-btn::before { content:''; position:absolute; inset:-4px; border-radius:50%; }