.content-stage.scenario-view .stage-top .article-subtitle,
.content-stage.scenario-view .stage-top .article-authors,
.content-stage.scenario-view .stage-top .publication-details {
  display: none;
}

.content-stage.scenario-view .stage-top {
  padding-bottom: 18px;
}

.scenario-app {
  --scene-x: 0px;
  --scene-y: 0px;
  --conflict: .72;
  --support: .35;
  --bridge: .18;
  display: grid;
  gap: 16px;
  color: var(--wine-950);
}

.scenario-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 30px;
  padding: 24px 28px;
  border: 1px solid #dfc692;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0, #f1dfb6);
}

.scenario-kicker,
.scenario-copy > span {
  display: block;
  color: #976125;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.scenario-intro h2 {
  margin: 8px 0 7px;
  color: var(--wine-950);
  font-size: clamp(1.8rem, 3vw, 3rem);
  line-height: 1.02;
}

.scenario-intro p {
  max-width: 800px;
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.scenario-progress {
  min-width: 190px;
  color: var(--wine-800);
  font-size: .78rem;
  font-weight: 800;
}

.scenario-progress > div {
  height: 7px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: #ddc79a;
}

.scenario-progress i {
  display: block;
  width: 16.667%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--wine-800), var(--gold-500));
  transition: width .45s ease;
}

.scenario-stages {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.scenario-stages button {
  min-height: 72px;
  padding: 11px 10px;
  color: var(--wine-950);
  text-align: left;
  background: #fffaf0;
  border: 1px solid #dfc692;
  border-radius: 8px;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.scenario-stages button:hover { transform: translateY(-2px); }
.scenario-stages button span { display: block; color: #a36b39; font-size: .67rem; font-weight: 900; }
.scenario-stages button strong { display: block; margin-top: 5px; font-size: .79rem; line-height: 1.2; }
.scenario-stages button[aria-pressed="true"] { color: #fff8dc; background: linear-gradient(145deg, var(--wine-800), var(--wine-950)); border-color: var(--wine-900); box-shadow: inset 0 -3px var(--gold-500); }
.scenario-stages button[aria-pressed="true"] span { color: var(--gold-300); }

.scenario-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(330px, .72fr);
  min-height: 690px;
  overflow: hidden;
  border: 1px solid #d8ba7f;
  border-radius: 14px;
  background: #fffaf0;
  box-shadow: 0 18px 34px rgba(91, 19, 6, .12);
}

.scenario-scene {
  position: relative;
  min-height: 690px;
  overflow: hidden;
  isolation: isolate;
  background: #2b1512;
}

.scene-image {
  position: absolute;
  inset: -3%;
  z-index: -3;
  width: 106%;
  height: 106%;
  object-fit: cover;
  transform: translate3d(var(--scene-x), var(--scene-y), 0) scale(1.03);
  transition: opacity .35s ease, filter .35s ease, transform .25s ease;
  will-change: transform;
}

.scene-primary { opacity: .94; }
.scene-secondary { z-index: -2; opacity: 0; mix-blend-mode: screen; }
.scene-vignette { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,5,2,.08), rgba(28,5,2,.5)), radial-gradient(circle at 50% 49%, transparent 0 17%, rgba(28,5,2,.2) 53%, rgba(28,5,2,.62) 100%); transition: background .6s ease; }

.scenario-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.connection { fill: none; stroke-linecap: round; transition: opacity .55s ease, stroke-width .55s ease, stroke-dasharray .55s ease; }
.conflict-link { stroke: #ffd56f; stroke-width: calc(3px + 8px * var(--conflict)); stroke-dasharray: 16 13; opacity: calc(.18 + var(--conflict) * .76); animation: scenarioFlow 3s linear infinite; }
.support-link { stroke: #75c3a6; stroke-width: calc(2px + 6px * var(--support)); opacity: calc(.08 + var(--support) * .72); stroke-dasharray: 5 12; }
.bridge-link { stroke: #ffe7a2; stroke-width: calc(2px + 10px * var(--bridge)); opacity: var(--bridge); filter: drop-shadow(0 0 8px rgba(255,218,121,.7)); }
@keyframes scenarioFlow { to { stroke-dashoffset: -58; } }

.scenario-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  padding: 10px;
  text-align: center;
  color: #fff8dc;
  border: 2px solid rgba(255,224,138,.75);
  border-radius: 50%;
  background: rgba(75,6,2,.82);
  box-shadow: 0 18px 30px rgba(38,4,0,.32);
  backdrop-filter: blur(8px);
  transition: left .65s ease, right .65s ease, top .65s ease, transform .65s ease, opacity .45s ease, box-shadow .45s ease;
}

.scenario-node span { font-size: .9rem; font-weight: 900; }
.scenario-node small { color: #f2d59e; font-size: .66rem; }
.node-parent-a { left: 11%; top: 31%; }
.node-parent-b { right: 11%; top: 31%; }
.node-child { left: calc(50% - 68px); top: 42%; width: 136px; height: 136px; color: #570600; background: rgba(255,224,138,.93); border: 6px solid rgba(255,255,255,.72); box-shadow: 0 0 0 11px rgba(255,204,61,.15), 0 18px 35px rgba(38,4,0,.3); }
.node-child small { color: #7b2a17; }

.scene-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  color: #fff8dc;
  border: 1px solid rgba(255,224,138,.42);
  border-radius: 10px;
  background: rgba(58,5,2,.75);
  backdrop-filter: blur(12px);
}
.scene-caption span { color: var(--gold-300); font-size: .67rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.scene-caption strong { font-size: .88rem; line-height: 1.4; }

.scenario-side { display: flex; flex-direction: column; min-width: 0; padding: 27px; background: linear-gradient(180deg, #fffdf7, #f3e4c3); }
.scenario-copy h3 { margin: 10px 0 10px; font-size: clamp(1.45rem, 2vw, 2rem); line-height: 1.08; }
.scenario-copy > p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.58; }
.scenario-focus { margin-top: 18px; padding: 14px 16px; border-left: 4px solid var(--gold-500); background: #f8edda; }
.scenario-focus span { color: var(--wine-800); font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.scenario-focus p { margin: 5px 0 0; color: var(--wine-900); font-size: .86rem; line-height: 1.48; }

.scenario-controls { display: grid; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid #dfc692; }
.control-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.control-heading strong { font-size: .94rem; }
.control-heading span { color: var(--muted); font-size: .67rem; }
.scenario-controls fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.scenario-controls legend { margin-bottom: 8px; color: var(--wine-800); font-size: .72rem; font-weight: 800; }
.pattern-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.pattern-switch button { min-height: 48px; padding: 7px; color: var(--wine-900); background: #fffaf0; border: 1px solid #d8ba7f; border-radius: 6px; font-size: .68rem; font-weight: 800; line-height: 1.18; }
.pattern-switch button[aria-pressed="true"] { color: #fff8dc; background: var(--wine-900); border-color: var(--wine-950); }
.scenario-range { display: grid; gap: 7px; }
.scenario-range > span { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; font-weight: 700; }
.scenario-range output { color: var(--wine-900); font-variant-numeric: tabular-nums; }
.scenario-range input { width: 100%; accent-color: var(--wine-800); }
.scenario-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.scenario-metrics div { padding: 10px 8px; border: 1px solid #e1c99a; border-radius: 7px; background: rgba(255,255,255,.52); }
.scenario-metrics span { display: block; min-height: 28px; color: var(--muted); font-size: .63rem; line-height: 1.2; }
.scenario-metrics strong { display: block; margin-top: 3px; color: var(--wine-900); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

.scenario-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 22px; }
.scenario-actions button { flex: 1; min-height: 44px; padding: 10px 13px; color: var(--wine-900); white-space: nowrap; background: #fffaf0; border: 1px solid #d8ba7f; border-radius: 7px; font-weight: 900; }
.scenario-actions button:last-child { color: #fff8dc; background: linear-gradient(135deg, var(--wine-800), var(--wine-950)); border-color: var(--wine-900); }
.scenario-actions button:disabled { opacity: .42; cursor: default; }

.scenario-app[data-scene="conflict"] .scene-primary { filter: saturate(.72) contrast(1.06); }
.scenario-app[data-scene="conflict"] .node-parent-a { left: 6%; }
.scenario-app[data-scene="conflict"] .node-parent-b { right: 6%; }
.scenario-app[data-scene="conflict"] .node-child { opacity: .68; transform: scale(.88); }
.scenario-app[data-scene="villages"] .scene-vignette { background: linear-gradient(180deg, rgba(28,5,2,.02), rgba(28,5,2,.35)); }
.scenario-app[data-scene="villages"] .node-parent-a { left: 16%; top: 34%; }
.scenario-app[data-scene="villages"] .node-parent-b { right: 16%; top: 34%; }
.scenario-app[data-scene="child"] .scene-primary { filter: saturate(.55) brightness(.68); }
.scenario-app[data-scene="child"] .scene-vignette { background: radial-gradient(circle at 50% 51%, transparent 0 16%, rgba(28,5,2,.18) 35%, rgba(28,5,2,.82) 74%); }
.scenario-app[data-scene="child"] .node-parent-a,
.scenario-app[data-scene="child"] .node-parent-b { opacity: .48; transform: scale(.82); }
.scenario-app[data-scene="child"] .node-child { top: 35%; transform: scale(1.16); box-shadow: 0 0 0 16px rgba(255,204,61,.22), 0 0 60px rgba(255,222,129,.55); }
.scenario-app[data-scene="bridge"] .scene-primary { filter: saturate(.92); }
.scenario-app[data-scene="bridge"] .bridge-link { opacity: calc(.45 + var(--bridge) * .55); }
.scenario-app[data-scene="bridge"] .node-child { top: 36%; }
.scenario-app[data-scene="final"] .scene-secondary { opacity: .32; }
.scenario-app[data-scene="final"] .scene-vignette { background: linear-gradient(180deg, rgba(28,5,2,.02), rgba(28,5,2,.4)); }
.scenario-app[data-scene="final"] .bridge-link { opacity: calc(.55 + var(--bridge) * .45); }
.scenario-app[data-scene="final"] .node-child { box-shadow: 0 0 0 15px rgba(255,204,61,.2), 0 0 55px rgba(255,222,129,.48); }

.scenario-app[data-pattern="avoid"] .link-right { opacity: .24; stroke-dasharray: 5 19; }
.scenario-app[data-pattern="double-avoid"] .conflict-link { opacity: .18; stroke-dasharray: 3 21; }
.scenario-copy { transition: opacity .2s ease; }

@media (min-width: 1181px) and (max-width: 1500px) {
  .scenario-copy { min-height: 380px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene-image, .scenario-node, .connection, .scenario-progress i, .scenario-stages button { transition: none; animation: none; }
}

@media (max-width: 1180px) {
  .scenario-stage { grid-template-columns: 1fr; }
  .scenario-scene { min-height: 590px; }
  .scenario-side { gap: 18px; }
  .scenario-actions { margin-top: 0; }
}

@media (max-width: 780px) {
  .scenario-intro { align-items: start; flex-direction: column; padding: 20px; }
  .scenario-progress { width: 100%; }
  .scenario-stages { grid-template-columns: repeat(3, 1fr); }
  .scenario-stage { min-height: 0; }
  .scenario-scene { min-height: 470px; }
  .scenario-side { padding: 20px; }
  .scenario-node { width: 88px; height: 88px; }
  .node-child { left: calc(50% - 55px); width: 110px; height: 110px; }
  .scene-caption { left: 14px; right: 14px; bottom: 14px; align-items: start; flex-direction: column; gap: 4px; }
}

@media (max-width: 520px) {
  .scenario-stages { grid-template-columns: repeat(2, 1fr); }
  .scenario-scene { min-height: 420px; }
  .scenario-node { width: 76px; height: 76px; padding: 7px; }
  .scenario-node span { font-size: .72rem; }
  .scenario-node small { font-size: .55rem; }
  .node-parent-a { left: 4%; }
  .node-parent-b { right: 4%; }
  .node-child { left: calc(50% - 48px); width: 96px; height: 96px; }
  .pattern-switch { grid-template-columns: 1fr; }
  .scenario-metrics { grid-template-columns: 1fr; }
  .scenario-metrics span { min-height: 0; }
}