/* Dorin Stonebrew tutorial overlay — parchment / tavern tone */
.rw-tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 25000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Let clicks reach the game (actions, nav) while Dorin's panel stays interactive. */
  pointer-events: none;
  transition: align-items 0.2s ease, justify-content 0.2s ease, padding 0.2s ease;
}
.rw-tutorial-overlay:not(.hidden) .rw-tutorial-panel {
  pointer-events: auto;
}
.rw-tutorial-overlay.hidden {
  display: none !important;
}

/* Panel corner placement (flex on overlay) */
.rw-tutorial-overlay--panel-center {
  align-items: center;
  justify-content: center;
}
.rw-tutorial-overlay--panel-br {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem 1.25rem max(1rem, env(safe-area-inset-bottom));
}
.rw-tutorial-overlay--panel-bl {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 1rem 1rem max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}

/*
 * Target-focused (interactive) steps: crisp game UI — no viewport blur.
 * Dim only lightly so targets read as immediately clickable.
 */
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-backdrop {
  background: rgba(5, 8, 16, 0.14);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-panel.rw-tutorial-panel--aux {
  opacity: 0.94;
  border-color: rgba(160, 130, 72, 0.45);
  box-shadow:
    0 0 0 1px rgba(20, 24, 36, 0.65),
    0 6px 22px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 248, 220, 0.06);
}
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-panel.rw-tutorial-panel--aux::before {
  opacity: 0.22;
}
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-npc {
  color: #b89a68;
  border-bottom-color: rgba(160, 130, 72, 0.28);
}
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-body {
  color: #d8d4cc;
}

/* Reading / non-interactive steps: slightly heavier dim + mild blur OK */
.rw-tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 10, 18, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  pointer-events: none;
  transition: background 0.2s ease, backdrop-filter 0.2s ease, -webkit-backdrop-filter 0.2s ease;
}

/* Extra clarity on strong highlight while target-focus (no extra blur — glow only) */
.rw-tutorial-overlay.rw-tutorial-target-focus .rw-tutorial-highlight.rw-tutorial-highlight-strong {
  outline-color: rgba(244, 226, 170, 1) !important;
  filter: none;
}
.rw-tutorial-panel {
  position: relative;
  max-width: 26rem;
  width: 100%;
  padding: 1.15rem 1.25rem 1rem;
  border-radius: 6px;
  border: 2px solid rgba(198, 162, 89, 0.65);
  box-shadow:
    0 0 0 1px rgba(20, 24, 36, 0.9),
    0 12px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 248, 220, 0.12);
  background:
    linear-gradient(165deg, rgba(42, 36, 28, 0.06), transparent 45%),
    linear-gradient(to bottom, #2a2434 0%, #1a1e2e 100%);
  background-color: #1e2230;
  color: #e8e4dc;
  font-family: inherit;
  transition: opacity 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.rw-tutorial-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity 0.2s ease;
}
.rw-tutorial-npc {
  position: relative;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #d4b87a;
  text-transform: none;
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid rgba(198, 162, 89, 0.35);
}
.rw-tutorial-body {
  position: relative;
  margin: 0 0 0.45rem;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #ede8df;
}
.rw-tutorial-subbody {
  position: relative;
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #c9b896;
  font-weight: 500;
}
.rw-tutorial-wait-hint {
  position: relative;
  min-height: 1.15em;
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: #a8b0c8;
}
.rw-tutorial-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.rw-tutorial-actions .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Highlight — default */
.rw-tutorial-highlight {
  position: relative;
  z-index: 25001 !important;
  outline: 2px solid rgba(212, 184, 122, 0.95) !important;
  outline-offset: 3px;
  box-shadow:
    0 0 0 3px rgba(212, 184, 122, 0.2),
    0 0 22px rgba(212, 184, 122, 0.45) !important;
  animation: rw-tutorial-pulse 1.8s ease-in-out infinite;
  border-radius: 4px;
}

/* Strong variant — “click here next” */
.rw-tutorial-highlight.rw-tutorial-highlight-strong {
  z-index: 26002 !important;
  outline-width: 3px !important;
  outline-color: rgba(236, 210, 140, 0.98) !important;
  outline-offset: 4px;
  animation: rw-tutorial-pulse-strong 1.35s ease-in-out infinite;
  box-shadow:
    0 0 0 4px rgba(236, 200, 110, 0.28),
    0 0 32px rgba(236, 200, 110, 0.55),
    0 0 56px rgba(212, 170, 80, 0.22) !important;
}

@keyframes rw-tutorial-pulse {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(212, 184, 122, 0.15),
      0 0 18px rgba(212, 184, 122, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(212, 184, 122, 0.28),
      0 0 28px rgba(212, 184, 122, 0.55);
  }
}

@keyframes rw-tutorial-pulse-strong {
  0%,
  100% {
    box-shadow:
      0 0 0 4px rgba(236, 200, 110, 0.22),
      0 0 28px rgba(236, 200, 110, 0.48),
      0 0 48px rgba(212, 170, 80, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 6px rgba(236, 210, 150, 0.35),
      0 0 40px rgba(236, 210, 150, 0.62),
      0 0 72px rgba(220, 180, 90, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-tutorial-highlight,
  .rw-tutorial-highlight.rw-tutorial-highlight-strong {
    animation: none;
  }
}

/* Optional: keep action detail shell readable when Start is the star (first-action step, detail view) */
#detail-panel.rw-tutorial-detail-emphasis:not(.hidden) {
  position: relative;
  z-index: 25003;
  box-shadow:
    inset 0 0 0 1px rgba(200, 170, 100, 0.22),
    0 0 32px rgba(212, 170, 80, 0.14);
}

/* --- Guest lite onboarding (Copper Vein nudge; no Dorin overlay) --- */
.rw-guest-lite-banner {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  margin: 0;
  background: linear-gradient(90deg, rgba(30, 42, 62, 0.95), rgba(22, 32, 48, 0.92));
  border-bottom: 1px solid rgba(180, 150, 90, 0.35);
  color: #e8e4dc;
  font-size: 0.92rem;
  z-index: 1200;
}
.rw-guest-lite-banner.hidden {
  display: none !important;
}
.rw-guest-lite-banner__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9a227;
  box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.7);
  animation: rw-guest-lite-dot 1.6s ease-out infinite;
  flex-shrink: 0;
}
@keyframes rw-guest-lite-dot {
  0% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(201, 162, 39, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(201, 162, 39, 0);
  }
}
.rw-guest-lite-banner__text {
  flex: 1 1 12rem;
  min-width: 0;
}
.rw-guest-lite-banner__dismiss {
  flex-shrink: 0;
}

button.action-btn.rw-guest-lite-rec-action {
  position: relative;
  outline: 2px solid rgba(212, 184, 100, 0.85) !important;
  box-shadow:
    0 0 0 3px rgba(212, 184, 100, 0.2),
    0 0 20px rgba(255, 210, 120, 0.35);
  animation: rw-guest-lite-pulse-bg 2.2s ease-in-out infinite;
}
@keyframes rw-guest-lite-pulse-bg {
  0%,
  100% {
    box-shadow:
      0 0 0 3px rgba(212, 184, 100, 0.2),
      0 0 18px rgba(255, 210, 120, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 4px rgba(236, 210, 150, 0.45),
      0 0 28px rgba(255, 220, 140, 0.5);
  }
}

#btn-start.rw-guest-lite-rec-start {
  outline: 2px solid rgba(120, 200, 255, 0.9) !important;
  box-shadow:
    0 0 0 3px rgba(120, 200, 255, 0.25),
    0 0 22px rgba(100, 180, 255, 0.45);
  animation: rw-guest-lite-pulse-start 1.8s ease-in-out infinite;
}
@keyframes rw-guest-lite-pulse-start {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rw-guest-lite-banner__pulse,
  button.action-btn.rw-guest-lite-rec-action,
  #btn-start.rw-guest-lite-rec-start {
    animation: none;
  }
}