/*
  Story map — authority MinSpec §27.8–§27.13.

  Redesigned to match the Android ChapterScreen glass-card layout:
  - Overview: tall glass cards with image frame at top, info below, diamond markers
  - Chapter detail: larger picture nodes, right-angle connectors, better spacing
  - Chapter 8 fork: scaled fixed-unit map, identical to Android
*/

.story-map-overlay {
  --map-gold: var(--nagi-gold, #D7BE86);
  --map-void: #091522;
  --map-line: rgba(215, 190, 134, 0.76);
  --map-line-soft: rgba(220, 228, 237, 0.18);
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.story-map-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 17px;
  z-index: 3;
}

.story-map-scroll {
  position: absolute;
  inset: 0;
  padding: 52px 0 34px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------- headings */

.story-kicker {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--map-gold);
  text-transform: uppercase;
}

.story-heading {
  margin: 6px 0 0;
  font-family: var(--font-serif, Georgia, 'Noto Serif SC', serif);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.24;
  color: var(--snow-94, rgba(247, 249, 252, 0.94));
}

.story-sub {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(154, 168, 186, 0.92);
}

.story-hint {
  margin: 22px 0 0;
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: rgba(205, 216, 229, 0.46);
}

/* ============================================================ overview */

.story-overview,
.story-chapter {
  padding: 0 14px;
}

.story-overview .story-heading + .story-sub {
  max-width: 280px;
}

.story-overview .story-kicker,
.story-overview .story-heading,
.story-overview .story-sub {
  padding-left: 10px;
}

.story-landmarks {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ---- glass chapter card (matches Android StoryGlassChapterCard) ---- */

.story-landmark {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 76%;
  min-height: 260px;
  padding: 0;
  border: 0;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.075),
    rgba(15, 27, 44, 0.60) 50%,
    rgba(11, 22, 38, 0.44)
  );
  border: 1px solid rgba(215, 190, 134, 0.32);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* alignment set via inline style (nth-child unreliable with connector SVGs interspersed) */

.story-landmark[disabled]  { cursor: default; }
.story-landmark.is-locked  { opacity: 0.48; }
.story-landmark.is-locked  { border-color: rgba(154, 168, 186, 0.20); }

/* image frame inside the card */
.story-landmark-frame {
  display: block;
  margin: 14px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  background: rgba(7, 17, 29, 0.72);
}

.story-landmark-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;
}

.story-landmark-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 26px;
  color: rgba(154, 168, 186, 0.28);
}

.story-landmark-seal::before { content: '◇'; }

/* info block below the image */
.story-landmark-info {
  display: flex;
  flex-direction: column;
  padding: 0 18px;
  flex: 1;
}

.story-landmark-kicker {
  font-size: 10px;
  letter-spacing: 0.19em;
  color: var(--map-gold);
  opacity: 0.86;
}

.story-landmark.is-locked .story-landmark-kicker { opacity: 0.42; }

.story-landmark-title {
  margin-top: 8px;
  font-family: var(--font-serif, Georgia, 'Noto Serif SC', serif);
  font-size: 22px;
  line-height: 1.14;
  color: rgba(247, 243, 234, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.story-landmark-title .masked { letter-spacing: 0.14em; }

.story-landmark-desc {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(218, 225, 233, 0.66);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* diamond progress markers */
.story-landmark-dots {
  display: flex;
  gap: 7px;
  padding: 0 18px 14px;
  margin-top: auto;
}

.story-diamond {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: rgba(154, 168, 186, 0.22);
}

.story-diamond.is-lit {
  background: rgba(215, 190, 134, 0.76);
}

/* overview connector between cards */
.story-overview-connector {
  display: block;
  width: 100%;
  height: 66px;
}

/* ======================================= chapter subpage: node layout */

.story-chapter-head {
  padding: 0 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.story-nodes {
  list-style: none;
  margin: 0;
  padding: 30px 0 0;
}

/* ---- connector SVG between nodes ---- */

.story-connector-svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ---- node row ---- */

.story-row {
  position: relative;
  display: flex;
  width: 100%;
}

.story-row-pic { min-height: 158px; }
.story-row-text { min-height: 62px; }

.story-node {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.story-node[disabled] { cursor: default; }

/* ---- text node: dot + index + title (§27.9.1) ---- */

.story-node-text {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 62px;
}

.story-node-text .story-node-dot {
  position: absolute;
  left: calc(var(--center, 0.5) * 100%);
  transform: translateX(-50%);
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--map-void);
  border: 1.2px solid var(--map-gold);
}

.story-node-text .story-node-dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--map-gold);
  transform: translate(-50%, -50%);
}

.story-node-text.is-locked .story-node-dot {
  border-color: #66758A;
}
.story-node-text.is-locked .story-node-dot::after {
  background: #66758A;
}

.story-node-copy {
  position: absolute;
  width: 96px;
}

.story-node-copy.align-end {
  right: calc((1 - var(--center, 0.5)) * 100% + 18px);
  text-align: right;
}
.story-node-copy.align-start {
  left: calc(var(--center, 0.5) * 100% + 18px);
  text-align: left;
}

.story-node-index {
  display: block;
  font-size: 8px;
  letter-spacing: 0.18em;
  color: var(--map-gold);
}

.story-node-text.is-locked .story-node-index { color: #8390A2; }

.story-node-title {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif, Georgia, 'Noto Serif SC', serif);
  font-size: 13px;
  line-height: 1.32;
  color: rgba(244, 238, 223, 0.94);
  text-shadow: 0 0 3px rgba(7, 17, 30, 0.80);
}

.story-node-text.is-locked .story-node-title { color: #8390A2; }
.story-node-title span { display: block; }

/* ---- picture node (§27.9.2): card with image ---- */

.story-node-pic {
  position: relative;
  width: 224px;
  height: 158px;
  margin-left: calc(var(--center, 0.5) * 100% - 112px);
  overflow: hidden;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  border: 1px solid rgba(215, 190, 134, 0.62);
  background: rgba(7, 17, 29, 0.80);
}

.story-node-pic.is-locked {
  opacity: 0.48;
  border-color: rgba(154, 168, 186, 0.22);
}

.story-node-pic .story-node-art {
  position: absolute;
  inset: 0;
}

.story-node-pic .story-node-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;
}

.story-node-seal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 25px;
  color: rgba(154, 168, 186, 0.26);
}

.story-node-seal::before { content: '◇'; }

.story-node-gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 70px;
  background: linear-gradient(to bottom, transparent, rgba(7, 17, 29, 0.94));
  pointer-events: none;
}

.story-node-caption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 10px;
  z-index: 1;
}

.story-node-caption .story-node-index {
  font-size: 9px;
  letter-spacing: 0.2em;
  color: rgba(215, 190, 134, 0.86);
}

.story-node-caption .story-node-title {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.25;
  color: #FFF8E9;
  text-shadow: 0 1.5px 4px rgba(7, 17, 30, 0.88);
}

/* ------------------------------------------------------ chapter 8 fork */

.story-branch-hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}

.story-branch-svg {
  display: block;
  width: 100%;
  height: 90px;
}

.story-branch-gates {
  display: flex;
  width: 100%;
  gap: 8px;
}

.story-branch-gate {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: rgba(10, 21, 35, 0.42);
  border: 1px solid rgba(215, 190, 134, 0.18);
  font-size: 8px;
  letter-spacing: 1.4px;
  color: rgba(215, 190, 134, 0.74);
}

.story-route-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 15px 18px;
  margin-top: 26px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  background: rgba(11, 23, 38, 0.26);
  border: 1px solid rgba(215, 190, 134, 0.16);
}

.story-route-kicker {
  font-size: 8px;
  letter-spacing: 1.8px;
  color: rgba(215, 190, 134, 0.74);
}

.story-route-label {
  margin-top: 6px;
  font-family: var(--font-serif, Georgia, 'Noto Serif SC', serif);
  font-size: 19px;
  color: rgba(246, 239, 223, 0.94);
}

.story-route-spacer { height: 78px; }
.story-route-gap { height: 34px; }

/* ---------------------------------------------------------- chapter pager */

.story-pager {
  margin: 30px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(9, 21, 34, 0.88);
  border: 1.5px solid rgba(215, 190, 134, 0.24);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.story-pager-arrow {
  flex: none;
  padding: 4px 8px;
  border: 0;
  background: none;
  font-size: 13px;
  color: rgba(215, 190, 134, 0.62);
  cursor: pointer;
}

.story-pager-arrow[disabled] { opacity: 0.25; cursor: default; }

.story-pager-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.story-pager-kicker {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--map-gold);
}

.story-pager-title {
  font-family: var(--font-serif, Georgia, 'Noto Serif SC', serif);
  font-size: 17px;
  color: #F1E7D3;
}

.story-pager-count {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #8E9BAE;
}