.screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #172727;
}
.story-stage {
  position: absolute;
  inset: 0 auto auto 0;
  transform-origin: left top;
  width: 1280px;
  height: 720px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 518px;
  gap: 40px;
  isolation: isolate;
  font: 16px/1.4 Inter, Arial, sans-serif;
  color: #fff8ea;
}
.story-stage h3, .story-stage p { margin: 0; }
.story-art { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.story-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; transform-origin: 44% 38%; }
.story-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(0deg, #091311f5, #091311c9 23%, transparent 59%),
    linear-gradient(105deg, #0a15154d, transparent 44%, #0b151525), linear-gradient(#0a13134d, transparent 15%);
}
@media (prefers-reduced-motion: reduce) {
  .story-art img { transform: none !important; }
}
.story-narrative { position: relative; min-width: 0; }
.story-running, .story-place, .story-folio, .story-mode, .story-ending span {
  text-transform: uppercase; font-weight: 500; letter-spacing: 1.7px;
}
.story-running { position: absolute; left: 40px; top: 32px; font-size: 14px; text-shadow: 0 1px 5px #000; }
.story-running::before { display: inline-block; content: ''; width: 27px; height: 1px; margin-right: 12px; vertical-align: middle; background: #e5bf88; }
.story-copy {
  position: absolute; left: 40px; right: 0; bottom: 58px; height: 340px;
  display: flex; flex-direction: column; justify-content: end; justify-content: safe end;
  text-shadow: 0 1px 6px #07110f;
}
.story-place { color: #f1cea1; font-size: 14px; line-height: 22px; letter-spacing: 1.2px; }
.story-heading { padding-top: 4px; font: 48px/1.05 Spectral, Georgia, serif; }
.story-toggle { display: inline-flex; align-items: center; gap: .35em; max-width: 100%; padding: 0; color: inherit; text-align: left; text-shadow: inherit; font: inherit; }
.story-toggle::after { content: ''; flex: none; width: .2em; height: .2em; border: solid #ead0a9; border-width: 0 2px 2px 0; transform: rotate(-135deg); transition: transform .28s; }
.story-toggle[aria-expanded=true]::after { transform: rotate(45deg); }
.story-toggle:focus-visible { outline-color: #f3d2a1; }
.story-reveal { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .32s ease, opacity .28s, transform .32s ease; }
.story-reveal > div { min-height: 0; overflow: hidden; }
.story-reveal[inert] { grid-template-rows: 0fr; opacity: 0; transform: translateY(12px); pointer-events: none; }
.story-words { padding-top: 12px; font-size: 22px; line-height: 1.36; color: #fff8ef; }
.story-folio { position: absolute; bottom: 24px; left: 40px; color: #ebcda8; font-size: 12px; }
.story-map {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
  align-self: stretch; margin: 30px 24px 24px 0;
  border: 1px solid #efdab46b; border-radius: 14px;
  background: linear-gradient(145deg, #15201fc2, #101a188f);
  box-shadow: 0 12px 40px #050c0b40;
}
.story-map-head { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 9px; padding: 17px 21px 12px; border-bottom: 1px solid #e8d9c42e; }
.story-map.is-adjustable {
  position: absolute; margin: 0;
  left: var(--map-x, calc(100% - 518px)); top: var(--map-y, 30px);
  width: var(--map-w, 494px); height: var(--map-h, calc(100% - 54px));
}
.is-adjustable .story-map-head { position: relative; }
.map-drag, .map-resize { position: absolute; touch-action: none; user-select: none; }
.map-drag { inset: 0; width: 100%; height: 100%; cursor: grab; }
.map-drag:active { cursor: grabbing; }
.map-resize { left: 0; bottom: 0; width: 34px; height: 34px; cursor: nesw-resize; color: #eacfa4; }
.map-resize::after {
  content: ''; position: absolute; left: 6px; bottom: 6px; width: 12px; height: 12px;
  background: repeating-linear-gradient(45deg, transparent 0 2px, currentColor 2px 3.5px, transparent 3.5px 5px);
  clip-path: polygon(0 0, 100% 100%, 0 100%);
}
.map-drag:focus-visible, .map-resize:focus-visible { outline-offset: -3px; outline-color: #f3d2a1; }
.story-map-head h3 { font: 31px/1.15 Spectral, Georgia, serif; }
.story-count { color: #e4dbca; font-size: 14px; white-space: pre; }
.story-diagram { position: relative; min-height: 0; min-width: 0; }
.story-canvas { height: 100%; width: 100%; }
.relationship-map { display: block; width: 100%; height: 100%; background: #f5f0e5; font-family: Inter, Arial, sans-serif; }
.relationship-map.is-interactive { cursor: grab; user-select: none; }
.relationship-map [role=button] { cursor: pointer; }
.relationship-map .halo { fill: var(--halo); }
.relationship-map .rim { fill: var(--ring); }
.relationship-map [role=button]:is(:hover,:focus-visible) .halo { fill: #3c6456; }
.relationship-map [role=button]:focus-visible { outline: none; }
.relationship-map [data-person][role=button] { cursor: grab; touch-action: none; user-select: none; }
.relationship-map [data-person][role=button] * { touch-action: none; }
.relationship-map [data-person][role=button]:active { cursor: grabbing; }
.relationship-map.is-panning, .relationship-map.is-panning * { cursor: grabbing; user-select: none; }
.relationship-map [data-edge] { cursor: pointer; }
.relationship-map [data-edge][role=button]:is(:hover,:focus-visible) { opacity: 1; }
.relationship-map [data-edge][role=button]:is(:hover,:focus-visible) .bond-line { stroke-width: 4.5px; }
.story-canvas .relationship-map { background: transparent; }
.story-canvas .map-ground { fill: transparent; }
.story-canvas .halo { stroke: #0c1516ed; stroke-width: .09; }
.story-canvas .rim { fill: color-mix(in srgb, var(--ring), #fff4d9 68%); }
.story-canvas .person-label { fill: #111c1ced; }
.story-canvas .person-name { fill: #fff6e7; }
.story-canvas .bond-line { stroke: color-mix(in srgb, var(--bond-color), #fff0d6 45%); }
.story-canvas .edge-caption rect { stroke: #f4e0ba88; stroke-width: 1px; }
.story-relation { position: relative; padding: 12px 21px 15px; background: #0b151673; border-top: 1px solid #e8d9c42e; }
.story-note { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 3px 12px; }
.story-mode { font-size: 12px; color: color-mix(in srgb, var(--bond-color), #fff0d6 65%); }
.story-new { font-size: 13px; color: #ddd7c8; }
.story-pair { margin-top: 4px; font: 24px/1.15 Spectral, Georgia, serif; }
.story-change { margin-top: 3px; font-size: 16px; color: #e1d9ca; }
.story-ending { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 53px 66px; background: linear-gradient(90deg,#132123 12%,#13212375), linear-gradient(#13212366,#13212366), var(--last-art) center / cover; color: #fcf3e3; }
.story-ending span { font-size: 18px; letter-spacing: 3px; color: #e0b783; }
.story-ending strong { font: 96px/1.4 Spectral, Georgia, serif; }
.story-ending i { width: 142px; height: 2px; background: #e0b783; }
.story-ending em { margin-top: 24px; font: italic 43px/1.4 "Spectral Italic", Georgia, serif; }

/* В компактном плеере сохраняем общий фон под заголовком и картой. */
.screen.is-compact { aspect-ratio: 390 / 365; }
.is-compact .story-stage { display: grid; grid-template: 112px minmax(0,1fr) / 1fr; gap: 0; width: 390px; height: 365px; }
.is-compact .story-art::after { background: linear-gradient(#0b15168c, transparent 34%, #0b1516bf); }
.is-compact .story-running, .is-compact .story-folio,
.is-compact .story-map-head, .is-compact .story-note { display: none; }
.is-compact .story-narrative { position: static; }
.is-compact .story-copy { inset: 0 16px auto; height: 112px; justify-content: center; z-index: 1; pointer-events: none; }
.is-compact .story-toggle { min-height: 36px; pointer-events: auto; }
.is-compact .story-reveal { position: absolute; top: 100%; left: -6px; right: -6px; }
.is-compact .story-reveal:not([inert]) { pointer-events: auto; }
.is-compact .story-words { overflow-y: auto; max-height: 240px; padding: 12px 15px; background: #111c1bf5; border: 1px solid #efdab46b; border-radius: 9px; font-size: 15px; line-height: 1.4; }
.is-compact .story-place { text-transform: none; letter-spacing: .3px; font-size: 11px; line-height: 16px; }
.is-compact .story-heading { padding: 0; font: 24px/1.1 Spectral, Georgia, serif; }
.is-compact .story-map { grid-template-rows: minmax(0, 1fr) auto; height: auto; align-self: stretch; margin: 4px 10px 17px; border-radius: 9px; }
.is-compact .story-map.is-adjustable {
  grid-template-rows: auto minmax(0, 1fr) auto; margin: 0;
  left: var(--small-map-x, 10px); top: var(--small-map-y, 116px);
  width: var(--small-map-w, 370px); height: var(--small-map-h, 232px);
}
.is-compact .is-adjustable .story-map-head { display: grid; padding: 6px 12px; align-items: center; }
.is-compact .story-map-head h3 { font-size: 17px; }
.is-compact .story-count { font-size: 10px; }
.is-compact .is-adjustable .story-relation { padding-left: 22px; }
.is-compact .story-relation { padding: 6px 12px 8px; }
.is-compact .story-pair { margin: 0; font: 13px/1.3 Inter, Arial, sans-serif; }
.is-compact .story-change { margin-top: 2px; font: 18px/1.2 Spectral, Georgia, serif; }
.is-compact .story-ending { padding: 24px; }
.is-compact .story-ending strong { font-size: 44px; }
.is-compact .story-ending em { font-size: 24px; }
@media (prefers-reduced-motion: reduce) {
  .story-reveal, .story-toggle::after { transition: none; }
}