/* ═══════════════════════════════════════════════════════════════════════
   RIETI ENHANCEMENTS CSS
   Adăugat la finalul input.css (după toate regulile existente)

   SECȚIUNI:
   1. Narrator Pod — tematic per temă Rieti
   2. World Transition — overlay cinematic între lumi
   3. Credits Panel   — panou credite per poveste
   ═══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   1. NARRATOR POD RIETI — identitate fixă per poveste
   Selector: [data-rieti-story="sotterranea|gates|velino|terminillo|storia"]
   ─────────────────────────────────────────────────────────────────────── */

/* ── Baza comună ── */
.dj-narrator-pod[data-rieti-story] {
  background: var(--rieti-bg, rgba(12,8,3,0.82));
  border-color: color-mix(in srgb, var(--rieti-color, #c8933a) 30%, transparent);
  transition:
    border-color 0.7s ease,
    box-shadow   0.7s ease,
    opacity      0.5s ease,
    transform    0.5s ease;
}

.dj-narrator-pod--active[data-rieti-story] {
  border-color: var(--rieti-color, #c8933a);
  box-shadow:
    0 0 16px var(--rieti-glow, rgba(200,147,58,0.45)),
    0 0 38px var(--rieti-subtle, rgba(200,147,58,0.10));
}

/* Onde colorate per storia */
.dj-narrator-pod[data-rieti-story] .dj-narrator-waves span {
  background: var(--rieti-color, #c8933a);
}

/* ── Wrapper iconă ── */
.ri-narrator-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--rieti-subtle, rgba(200,147,58,0.10));
  border: 1px solid color-mix(in srgb, var(--rieti-color, #c8933a) 45%, transparent);
  flex-shrink: 0;
  transition: background 0.6s ease, border-color 0.6s ease, box-shadow 0.6s ease;
}

.ri-icon {
  font-size: 0.95rem;
  color: var(--rieti-color, #c8933a);
  transition: color 0.6s ease;
}

/* ── Animații iconiță per poveste ── */

/* Torță — flicker neregulat, ca flacăra */
@keyframes torch-flicker {
  0%,100% { opacity:1.0; filter:drop-shadow(0 0 4px var(--rieti-color)); }
  18%     { opacity:0.75; filter:drop-shadow(0 0 2px var(--rieti-color)); }
  22%     { opacity:1.0;  filter:drop-shadow(0 0 9px var(--rieti-color)); }
  55%     { opacity:0.85; filter:drop-shadow(0 0 3px var(--rieti-color)); }
  60%     { opacity:1.0;  filter:drop-shadow(0 0 7px var(--rieti-color)); }
  82%     { opacity:0.8;  filter:drop-shadow(0 0 2px var(--rieti-color)); }
}

/* Poartă — glow steady, puls lent și sobru */
@keyframes gate-steady {
  0%,100% { filter:drop-shadow(0 0 3px var(--rieti-color)); opacity:.9; }
  50%     { filter:drop-shadow(0 0 7px var(--rieti-color)); opacity:1; }
}

/* Apă — val continuu, ușor de sus/jos */
@keyframes water-ripple {
  0%,100% { transform:translateY(0)    scale(1);    filter:drop-shadow(0 0 4px var(--rieti-color)); }
  30%     { transform:translateY(-1px) scale(1.04); filter:drop-shadow(0 0 8px var(--rieti-color)); }
  65%     { transform:translateY(1px)  scale(0.97); filter:drop-shadow(0 0 3px var(--rieti-color)); }
}

/* Munte — static, cristallin, puls rece */
@keyframes mountain-still {
  0%,100% { filter:drop-shadow(0 0 3px var(--rieti-color)) brightness(1.0); }
  50%     { filter:drop-shadow(0 0 8px var(--rieti-color)) brightness(1.12); }
}

/* Istorie — glow cald ambrat */
@keyframes history-glow {
  0%,100% { filter:drop-shadow(0 0 3px var(--rieti-color)); }
  50%     { filter:drop-shadow(0 0 10px var(--rieti-color)) brightness(1.08); }
}

/* Aplicare animații per story via classe iconiță */
.ri-icon--torch-flicker   { animation: torch-flicker   2.2s ease-in-out infinite; }
.ri-icon--gate-steady     { animation: gate-steady     2.8s ease-in-out infinite; }
.ri-icon--water-ripple    { animation: water-ripple    1.8s ease-in-out infinite; }
.ri-icon--mountain-still  { animation: mountain-still  3.5s ease-in-out infinite; }
.ri-icon--history-glow    { animation: history-glow    2.5s ease-in-out infinite; }

/* Puls icon-wrap când naratorulee activ */
.dj-narrator-pod--active .ri-narrator-icon-wrap {
  background: var(--rieti-subtle, rgba(200,147,58,0.16));
  animation: icon-wrap-pulse 2.8s ease-in-out infinite;
}
@keyframes icon-wrap-pulse {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 8px 2px var(--rieti-subtle, rgba(200,147,58,0.18)); }
}

/* ── Accente per poveste ── */

/* SOTTERRANEA — warm dark, border ambrat-roșu */
.dj-narrator-pod[data-rieti-story="sotterranea"] {
  background: var(--rieti-bg);
  /* Subtle scanline texture — amintire de tunel */
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.18) 3px, rgba(0,0,0,0.18) 4px
  );
}

/* GATES — cold stone, border albăstrui */
.dj-narrator-pod[data-rieti-story="gates"] {
  background: var(--rieti-bg);
}

/* VELINO — deep water, border cyan */
.dj-narrator-pod[data-rieti-story="velino"] {
  background: var(--rieti-bg);
}
/* Undele râului — mai rapide */
.dj-narrator-pod[data-rieti-story="velino"] .dj-narrator-waves span {
  animation-timing-function: ease-in-out;
}

/* TERMINILLO — mountain cold, border alb-albăstrui */
.dj-narrator-pod[data-rieti-story="terminillo"] {
  background: var(--rieti-bg);
}

/* Mobile */
@media (max-width: 768px) {
  .ri-narrator-icon-wrap { width: 26px; height: 26px; }
  .ri-icon { font-size: 0.85rem; }
}



/* ────────────────────────────────────────────────────────────────────────
   2. WORLD TRANSITION — stiluri statice, animațiile sunt în JS (WAAPI)
   ─────────────────────────────────────────────────────────────────────── */

/* Panourile — stânga și dreapta */
.dwt-panel-left,
.dwt-panel-right {
  position: fixed;
  top: 0; bottom: 0;
  width: 51%;
  z-index: 9001;
  will-change: transform;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 52px,
      rgba(255,255,255,0.03) 52px, rgba(255,255,255,0.03) 53px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0px, transparent 44px,
      rgba(0,0,0,0.12) 44px, rgba(0,0,0,0.12) 45px
    ),
    linear-gradient(
      var(--panel-bg-dir, 90deg),
      #070707 0%,
      #0e0e0e 70%,
      color-mix(in srgb, var(--c, #c8933a) 9%, #0c0c0c) 100%
    );
}
.dwt-panel-left {
  left: 0;
  transform: translateX(-101%);
  --panel-bg-dir: 90deg;
  border-right: 1px solid color-mix(in srgb, var(--c, #c8933a) 30%, transparent);
  box-shadow: 3px 0 25px rgba(0,0,0,0.95);
}
.dwt-panel-right {
  right: 0;
  transform: translateX(101%);
  --panel-bg-dir: 270deg;
  border-left: 1px solid color-mix(in srgb, var(--c, #c8933a) 22%, transparent);
  box-shadow: -3px 0 25px rgba(0,0,0,0.95);
}

/* Linia verticală centrală */
.dwt-seam {
  position: fixed;
  top: 0; bottom: 0;
  left: 50%;
  width: 1px;
  z-index: 9003;
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
  transform-origin: center;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--c, #c8933a) 45%, transparent) 12%,
    var(--c, #c8933a) 38%,
    rgba(255,255,255,0.95) 50%,
    var(--c, #c8933a) 62%,
    color-mix(in srgb, var(--c, #c8933a) 45%, transparent) 88%,
    transparent 100%
  );
  box-shadow:
    0 0  4px 1px var(--g, rgba(200,147,58,0.6)),
    0 0 14px 3px color-mix(in srgb, var(--c, #c8933a) 20%, transparent);
}

/* Card central */
.dwt-card-center {
  position: fixed;
  z-index: 9004;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 2rem 2.8rem 1.8rem;
  opacity: 0;
  transform: scale(0.96);
  background: rgba(4,4,4,0.70);
  backdrop-filter: blur(8px);
  min-width: 280px; max-width: 480px;
  border: 1px solid color-mix(in srgb, var(--c, #c8933a) 20%, transparent);
  border-top: none;
}
/* Arc gotic */
.dwt-card-center::before {
  content: '';
  position: absolute;
  top: -36px; left: -1px; right: -1px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--c, #c8933a) 20%, transparent);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
/* Linie accent sus */
.dwt-card-center::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--c, #c8933a) 40%,
    rgba(255,255,255,0.9) 50%,
    var(--c, #c8933a) 60%,
    transparent
  );
  box-shadow: 0 0 8px var(--g, rgba(200,147,58,0.5));
}

.dwt-emblem {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c, #c8933a) 38%, transparent);
  background: color-mix(in srgb, var(--c, #c8933a) 9%, transparent);
  margin-bottom: 4px;
}
.dwt-emblem-icon {
  font-size: 1.35rem;
  color: var(--c, #c8933a);
  filter: drop-shadow(0 0 5px var(--g, rgba(200,147,58,0.6)));
}
.dwt-story-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c, #c8933a) 90%, white);
}
.dwt-world-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(1rem, 2.6vw, 1.55rem);
  font-weight: 500;
  color: rgba(248,248,248,0.97);
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-align: center;
  max-width: 420px;
  text-shadow: 0 2px 14px rgba(0,0,0,0.98);
}
.dwt-ornament {
  display: flex; align-items: center; gap: 10px;
  margin-top: 4px; opacity: 0.4;
}
.dwt-ornament span {
  display: block; height: 1px; width: 32px;
  background: linear-gradient(to right, transparent, var(--c, #c8933a));
}
.dwt-ornament span:last-child {
  background: linear-gradient(to left, transparent, var(--c, #c8933a));
}

@media (max-width: 600px) {
  .dwt-card-center { padding: 1.6rem 1.4rem; min-width: 230px; }
  .dwt-world-title { font-size: 1rem; }
}


/* ────────────────────────────────────────────────────────────────────────
   3. CREDITS PANEL
   ─────────────────────────────────────────────────────────────────────── */

#rieti-credits-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

#rieti-credits-overlay.rc-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop sfumat */
.rc-backdrop {
  position: absolute;
  inset: 0;
  background: var(--rc-bg, rgba(16,10,4,0.97));
  transition: opacity 0.7s ease;
}

/* Panoul central */
.rc-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  max-width: 540px;
  width: 100%;
  padding: 3rem 2rem 2.5rem;
  border: 1px solid rgba(var(--rc-accent-rgb, 212,168,67), 0.18);
  border-top: none;
  background: transparent;

  /* Animație intrare: slide-up cu stagger pe copii */
  transform: translateY(30px);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#rieti-credits-overlay.rc-visible .rc-panel {
  transform: translateY(0);
}

/* Linie decorativă top */
.rc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rc-accent, #d4a843),
    transparent
  );
  box-shadow: 0 0 12px var(--rc-accent, #d4a843);
}

/* Iconița */
.rc-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.rc-icon {
  font-size: 1.8rem;
  color: var(--rc-accent, #d4a843);
  position: relative;
  z-index: 1;
  animation: rc-icon-glow 3s ease-in-out infinite;
}

.rc-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rc-accent, #d4a843);
  opacity: 0.4;
  animation: rc-ring-pulse 3s ease-in-out infinite;
}

@keyframes rc-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--rc-accent, #d4a843)); }
  50%       { filter: drop-shadow(0 0 10px var(--rc-accent, #d4a843)); }
}

@keyframes rc-ring-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.4; }
  50%       { transform: scale(1.2); opacity: 0.15; }
}

/* Series */
.rc-series {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rc-accent, #d4a843);
  opacity: 0.8;
  margin-bottom: 0.3rem;

  opacity: 0;
  animation: rc-fadein 0.5s ease 0.3s forwards;
}

/* Episode */
.rc-episode {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;

  opacity: 0;
  animation: rc-fadein 0.5s ease 0.4s forwards;
}

/* Titlu */
.rc-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 1.5rem;

  opacity: 0;
  animation: rc-fadein 0.6s ease 0.5s forwards;
}

/* Divider ornamental */
.rc-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: rc-fadein 0.5s ease 0.65s forwards;
}

.rc-divider span {
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rc-accent, #d4a843),
    transparent
  );
}

/* Bloc credite */
.rc-credits {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 2px solid var(--rc-accent, #d4a843);
  background: rgba(255,255,255,0.03);
  text-align: left;

  opacity: 0;
  animation: rc-fadein 0.6s ease 0.8s forwards;
}

.rc-credit-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.rc-credit-key {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rc-accent, #d4a843);
  opacity: 0.7;
  min-width: 110px;
  flex-shrink: 0;
}

.rc-credit-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
}

/* Zona butoane */
.rc-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  align-items: stretch;

  opacity: 0;
  animation: rc-fadein 0.6s ease 1.0s forwards;
}

/* Butoane */
.rc-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

/* Primary — next story, evidențiat cu accent */
.rc-btn--primary {
  background: var(--rc-accent, #d4a843);
  border-color: var(--rc-accent, #d4a843);
  color: rgba(0,0,0,0.85);
}

.rc-btn--primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 16px var(--rc-accent, rgba(212,168,67,0.5));
  transform: translateY(-1px);
}

/* Secondary — azioni normali */
.rc-btn--secondary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}

.rc-btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--rc-accent, rgba(212,168,67,0.4));
  color: rgba(255,255,255,0.95);
}

/* Ghost — replay, quasi invisible */
.rc-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  font-size: 0.68rem;
  padding: 0.45rem 1rem;
}

.rc-btn--ghost:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}

/* Animație stagger generică */
@keyframes rc-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 600px) {
  .rc-panel {
    padding: 2.5rem 1.25rem 2rem;
  }
  .rc-title {
    font-size: 1.2rem;
  }
  .rc-credits {
    padding: 1rem;
  }
  .rc-credit-key {
    min-width: 90px;
  }
  .dwt-title {
    font-size: 1rem;
  }
}


/* ────────────────────────────────────────────────────────────────────────
   3. CREDITS PANEL
   ─────────────────────────────────────────────────────────────────────── */

#rieti-credits-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
}

#rieti-credits-overlay.rc-visible {
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop sfumat */
.rc-backdrop {
  position: absolute;
  inset: 0;
  background: var(--rc-bg, rgba(16,10,4,0.97));
  transition: opacity 0.7s ease;
}

/* Panoul central */
.rc-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
  max-width: 540px;
  width: 100%;
  padding: 3rem 2rem 2.5rem;
  border: 1px solid rgba(var(--rc-accent-rgb, 212,168,67), 0.18);
  border-top: none;
  background: transparent;

  /* Animație intrare: slide-up cu stagger pe copii */
  transform: translateY(30px);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#rieti-credits-overlay.rc-visible .rc-panel {
  transform: translateY(0);
}

/* Linie decorativă top */
.rc-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rc-accent, #d4a843),
    transparent
  );
  box-shadow: 0 0 12px var(--rc-accent, #d4a843);
}

/* Iconița */
.rc-icon-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.rc-icon {
  font-size: 1.8rem;
  color: var(--rc-accent, #d4a843);
  position: relative;
  z-index: 1;
  animation: rc-icon-glow 3s ease-in-out infinite;
}

.rc-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rc-accent, #d4a843);
  opacity: 0.4;
  animation: rc-ring-pulse 3s ease-in-out infinite;
}

@keyframes rc-icon-glow {
  0%, 100% { filter: drop-shadow(0 0 4px var(--rc-accent, #d4a843)); }
  50%       { filter: drop-shadow(0 0 10px var(--rc-accent, #d4a843)); }
}

@keyframes rc-ring-pulse {
  0%, 100% { transform: scale(1);   opacity: 0.4; }
  50%       { transform: scale(1.2); opacity: 0.15; }
}

/* Series */
.rc-series {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--rc-accent, #d4a843);
  opacity: 0.8;
  margin-bottom: 0.3rem;

  opacity: 0;
  animation: rc-fadein 0.5s ease 0.3s forwards;
}

/* Episode */
.rc-episode {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;

  opacity: 0;
  animation: rc-fadein 0.5s ease 0.4s forwards;
}

/* Titlu */
.rc-title {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: clamp(1.35rem, 4vw, 1.85rem);
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  letter-spacing: 0.06em;
  line-height: 1.3;
  margin: 0 0 1.5rem;

  opacity: 0;
  animation: rc-fadein 0.6s ease 0.5s forwards;
}

/* Divider ornamental */
.rc-divider {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  opacity: 0;
  animation: rc-fadein 0.5s ease 0.65s forwards;
}

.rc-divider span {
  display: block;
  width: 80px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--rc-accent, #d4a843),
    transparent
  );
}

/* Bloc credite */
.rc-credits {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 2rem;
  padding: 1.2rem 1.5rem;
  border: 1px solid rgba(255,255,255,0.07);
  border-left: 2px solid var(--rc-accent, #d4a843);
  background: rgba(255,255,255,0.03);
  text-align: left;

  opacity: 0;
  animation: rc-fadein 0.6s ease 0.8s forwards;
}

.rc-credit-row {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  flex-wrap: wrap;
}

.rc-credit-key {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rc-accent, #d4a843);
  opacity: 0.7;
  min-width: 110px;
  flex-shrink: 0;
}

.rc-credit-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.75);
}

/* Zona butoane */
.rc-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  width: 100%;
  align-items: stretch;

  opacity: 0;
  animation: rc-fadein 0.6s ease 1.0s forwards;
}

/* Butoane */
.rc-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 4px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.25s ease;
  text-align: center;
}

/* Primary — next story, evidențiat cu accent */
.rc-btn--primary {
  background: var(--rc-accent, #d4a843);
  border-color: var(--rc-accent, #d4a843);
  color: rgba(0,0,0,0.85);
}

.rc-btn--primary:hover {
  filter: brightness(1.12);
  box-shadow: 0 0 16px var(--rc-accent, rgba(212,168,67,0.5));
  transform: translateY(-1px);
}

/* Secondary — azioni normali */
.rc-btn--secondary {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.8);
}

.rc-btn--secondary:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--rc-accent, rgba(212,168,67,0.4));
  color: rgba(255,255,255,0.95);
}

/* Ghost — replay, quasi invisible */
.rc-btn--ghost {
  background: transparent;
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  font-size: 0.68rem;
  padding: 0.45rem 1rem;
}

.rc-btn--ghost:hover {
  color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.2);
}

/* Animație stagger generică */
@keyframes rc-fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile */
@media (max-width: 600px) {
  .rc-panel {
    padding: 2.5rem 1.25rem 2rem;
  }
  .rc-title {
    font-size: 1.2rem;
  }
  .rc-credits {
    padding: 1rem;
  }
  .rc-credit-key {
    min-width: 90px;
  }
  .dwt-title {
    font-size: 1rem;
  }
}

/* ────────────────────────────────────────────────────────────────────────
   4. AMBIENT OVERLAY — CSS pur, zero JS, zero Canvas
   Gradient animat per story pe body[data-story-ambient]
   Aplicat din rieti-index.js: document.body.dataset.storyAmbient = key;
   ─────────────────────────────────────────────────────────────────────── */

/* Layer ambient — pseudo-element pe bg-wrapper via CSS class */
#bg-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 58;
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease;
}

/* Activat per story */
body[data-story-ambient] #bg-wrapper::after {
  opacity: 1;
}

/* ── SOTTERRANEA — vignetta rossa-arancio ai bordi, come torce ── */
body[data-story-ambient="sotterranea"] #bg-wrapper::after {
  background:
    radial-gradient(ellipse 80% 60% at 15% 90%,
      rgba(200,80,20,0.22) 0%, transparent 65%),
    radial-gradient(ellipse 80% 60% at 85% 85%,
      rgba(180,60,10,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 100% 40% at 50% 100%,
      rgba(120,40,5,0.30) 0%, transparent 70%);
  animation: ambient-torch 4s ease-in-out infinite alternate;
}
@keyframes ambient-torch {
  0%   { opacity: 0.75; }
  35%  { opacity: 0.55; }
  60%  { opacity: 0.85; }
  100% { opacity: 0.65; }
}

/* ── GATES — freddo blu-grigio ai bordi superiori, pietra ── */
body[data-story-ambient="gates"] #bg-wrapper::after {
  background:
    radial-gradient(ellipse 100% 35% at 50% 0%,
      rgba(80,110,150,0.28) 0%, transparent 70%),
    radial-gradient(ellipse 40% 100% at 0% 50%,
      rgba(60,90,130,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 40% 100% at 100% 50%,
      rgba(60,90,130,0.15) 0%, transparent 70%);
  animation: ambient-stone 6s ease-in-out infinite alternate;
}
@keyframes ambient-stone {
  0%   { opacity: 0.70; }
  100% { opacity: 0.90; }
}

/* ── VELINO — luce acquatica riflessa dal basso ── */
body[data-story-ambient="velino"] #bg-wrapper::after {
  background:
    radial-gradient(ellipse 120% 40% at 50% 100%,
      rgba(30,130,180,0.25) 0%, transparent 65%),
    radial-gradient(ellipse 60% 50% at 20% 70%,
      rgba(20,100,160,0.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 75%,
      rgba(20,100,160,0.12) 0%, transparent 60%);
  animation: ambient-water 3.5s ease-in-out infinite alternate;
}
@keyframes ambient-water {
  0%   { opacity: 0.60; transform: scaleY(1.00); }
  50%  { opacity: 0.85; transform: scaleY(1.02); }
  100% { opacity: 0.65; transform: scaleY(0.99); }
}

/* ── TERMINILLO — luce fredda dall'alto, alba alpina ── */
body[data-story-ambient="terminillo"] #bg-wrapper::after {
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%,
      rgba(180,215,240,0.20) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 50% 0%,
      rgba(220,235,250,0.12) 0%, transparent 55%),
    linear-gradient(to bottom,
      rgba(160,200,230,0.08) 0%, transparent 40%);
  animation: ambient-snow 7s ease-in-out infinite alternate;
}
@keyframes ambient-snow {
  0%   { opacity: 0.65; }
  100% { opacity: 0.90; }
}

/* ── STORIA — calore ambrato, luce del tramonto su pietra ── */
body[data-story-ambient="storia"] #bg-wrapper::after {
  background:
    radial-gradient(ellipse 90% 50% at 50% 105%,
      rgba(200,150,40,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 5% 50%,
      rgba(180,130,30,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 60% 70% at 95% 50%,
      rgba(180,130,30,0.10) 0%, transparent 65%);
  animation: ambient-storia 5s ease-in-out infinite alternate;
}
@keyframes ambient-storia {
  0%   { opacity: 0.55; }
  100% { opacity: 0.80; }
}