/* Camera and readable cards. All graph coordinates remain in world units. */
.hero { padding: 58px 0 32px; align-items: center; }
.hero h1 { font-size: clamp(3rem, 7vw, 6.7rem); line-height: .93; }
.hero h1 span { display: inline; margin-inline: .08em; }
.hero h1 em { display: block; }
.toolbar { flex-wrap: wrap; position: relative; }
.atlas-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 13px 16px; background: #0d1324; border: 1px solid var(--line); border-bottom: 0; }
.atlas-controls button { min-height: 40px; padding: 8px 12px; border: 1px solid #43516c; background: #101a2c; border-radius: 4px; color: #dce7ff; cursor: pointer; font-size: 12px; }
.atlas-controls button:hover, .atlas-controls button[aria-pressed="true"] { color: var(--cyan); border-color: var(--cyan); background: #122b3a; }
.camera-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.zoom-control { display: flex; gap: 9px; align-items: center; color: #bbcae1; font-size: 12px; }
#atlas-zoom { width: 140px; accent-color: var(--cyan); cursor: ew-resize; }
#atlas-scale { min-width: 4ch; font: 12px 'DM Mono', monospace; color: var(--cyan); }
.view-tabs { display: flex; gap: 6px; margin-left: auto; }
.atlas-help { margin: 0; color: #adbbd3; font-size: 12px; line-height: 1.6; }
.atlas-navigation { display: flex; overflow-x: auto; gap: 6px; padding: 10px 16px; background: #080e1c; border: 1px solid var(--line); border-bottom: 0; scrollbar-width: thin; }
.atlas-navigation button { flex-shrink: 0; cursor: pointer; border: 1px solid #354762; border-radius: 3px; padding: 8px 12px; color: #c4d4ef; background: transparent; font: 11px 'DM Mono', monospace; min-height: 36px; }
.atlas-navigation button:hover { border-color: var(--cyan); color: var(--cyan); }
.stage-shell { overflow: hidden; }
.stage-shell > .legend { position: relative; flex-wrap: wrap; font-size: 10px; line-height: 1.5; white-space: normal; }
.atlas-viewport { position: relative; isolation: isolate; overflow: hidden; height: min(72vh, 830px); min-height: 430px; background: radial-gradient(ellipse at 24% 20%, #13334255, transparent 65%), #060b17; cursor: grab; touch-action: none; outline-offset: -3px; }
.atlas-viewport:before { content: ''; position: absolute; z-index: -1; inset: -60%; pointer-events: none; background-image: linear-gradient(#79bde014 1px, transparent 1px), linear-gradient(90deg, #79bde014 1px, transparent 1px); background-size: 56px 56px; transform: perspective(850px) rotateX(35deg); transform-origin: center; }
.atlas-viewport.dragging, .atlas-viewport.dragging * { cursor: grabbing !important; user-select: none; }
.atlas-viewport .graph { position: absolute; top: 0; left: 0; width: 2992px; min-width: 2992px; padding: 44px 44px 64px; transform-origin: 0 0; will-change: transform; user-select: none; }
.atlas-viewport .epoch-row, .atlas-viewport .lane-grid { display: grid; grid-template-columns: repeat(9, 280px); gap: 48px; }
.atlas-viewport .epoch-row { margin-bottom: 22px; }
.atlas-viewport .epoch { color: #d7e7ff; font-size: 18px; letter-spacing: -.02em; }
.epoch small { display: block; color: #8aa5bd; font-size: 11px; margin-top: 8px; letter-spacing: .02em; }
.atlas-viewport .lane { display: flex; position: relative; min-height: 100px; padding: 0; gap: 24px; }
.atlas-viewport .lane:before, .atlas-viewport .lane:after { display: none; }
.atlas-viewport .lane[data-epoch] > .node:first-of-type { margin-top: 0; }
.atlas-viewport #lines { display: block; }
.node { --node-color: var(--cyan); overflow: visible; border-radius: 6px; padding: 0; background: #101b30; }
.node-main { display: block; width: 100%; min-height: 146px; padding: 20px 18px 48px; border: 0; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; cursor: pointer; }
.node h3 { font-size: 17px; line-height: 1.55; letter-spacing: -.02em; margin: 11px 0 7px; word-break: normal; overflow-wrap: anywhere; }
.node .english-title { display: block; color: #adbed6; font-size: 11px; line-height: 1.5; letter-spacing: .01em; }
.node .node-type, .node time { font-size: 10px; }
.node .node-top { gap: 12px; }
.node .check { position: absolute; bottom: 7px; right: 8px; z-index: 2; width: auto; min-width: 88px; min-height: 36px; height: auto; padding: 8px 10px; border-radius: 4px; cursor: pointer; color: #d9e5fa; background: #1a283d; font: 12px Manrope, 'Noto Sans JP', sans-serif; border: 1px solid #6f829d; }
.node.done .check { color: #082216; background: var(--green); border-color: var(--green); }
.node.done:after { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: var(--green); }
.node.dim, .node.character-dim { opacity: .52; }
.node:hover, .node.active { transform: none; }
.node-main:focus-visible, .check:focus-visible, .atlas-controls :focus-visible, .atlas-navigation :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.has-depth .node { border-top-color: #678095; box-shadow: 4px 5px 0 #192637, 8px 14px 20px #0008, inset 0 1px 0 #ceefff22; background: linear-gradient(130deg, #1b2e45, #101a2d 75%); }
.has-depth .node.active, .has-depth .node:has(.node-main:hover) { border-color: var(--node-color); box-shadow: 4px 5px 0 #244058, 8px 17px 26px #000a, 0 0 22px color-mix(in srgb, var(--node-color) 22%, transparent); }
.has-depth .node.character-hit { border-color: var(--green); box-shadow: 3px 5px 0 #153731, 0 0 24px #77f5a124; }
.line { stroke: #7295c466; stroke-width: 1.7; }
.line.hot { stroke-width: 3; }
.line.character-line { stroke: var(--green); filter: drop-shadow(0 0 3px #77f5a155); }
.line.dim { opacity: .13; }
.detail { scroll-margin-top: 20px; }
.detail h2 { font-size: clamp(1.4rem, 2.6vw, 2.3rem); letter-spacing: -.03em; line-height: 1.5; }
.detail p { font-size: 14px; }
.connection { font: 12px/1.6 Manrope, 'Noto Sans JP', sans-serif; text-align: left; padding: 9px 12px; min-height: 40px; }
.atlas-status { color: #92adcc; padding: 10px 16px; margin: 0; background: #080e1c; font-size: 11px; line-height: 1.6; }
.atlas-viewport.is-list { height: auto; min-height: 0; overflow: visible; cursor: auto; touch-action: auto; }
.atlas-viewport.is-list:before { display: none; }
.atlas-viewport.is-list .graph { position: relative; width: 100%; min-width: 0; padding: 28px 24px; transform: none !important; user-select: auto; }
.atlas-viewport.is-list .epoch-row, .atlas-viewport.is-list #lines { display: none; }
.atlas-viewport.is-list .lane-grid { display: block; }
.atlas-viewport.is-list .lane { margin-bottom: 26px; padding: 32px 0 0 20px; border-left: 1px solid #528294; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.atlas-viewport.is-list .lane:after { display: block; content: attr(data-epoch); position: absolute; top: 0; left: 18px; width: auto; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--cyan); font: 14px 'DM Mono', monospace; }
.atlas-viewport.is-list .lane:not(:has(.node)) { display: none; }
.atlas-viewport.is-list .node { transform: none; }
.camera-tools[hidden], .atlas-help[hidden], .atlas-navigation[hidden] { display: none; }
@media(max-width:800px) {
  .hero { padding: 30px 0 22px; }
  .hero h1 { font-size: 3.2rem; }
  .hero h1 em { display: inline; }
  .hero .intro { margin-top: 20px; font-size: 13px; }
  .top .sys { max-width: 180px; font-size: 8px; text-align: right; }
  .toolbar { padding: 10px 0; }
  .filters { width: 100%; }
  .filter { min-height: 40px; font-size: 10px; }
  .atlas-controls { padding: 10px; }
  .view-tabs { margin-left: 0; order: -1; width: 100%; }
  .camera-tools { gap: 5px; }
  .camera-tools button { padding: 8px; }
  #atlas-zoom { width: 100px; }
  .atlas-navigation { padding: 8px; }
  .atlas-viewport { height: 64vh; min-height: 400px; }
  .atlas-viewport.is-list .graph { padding: 24px 12px; }
  .atlas-viewport.is-list .lane { display: flex; padding-left: 12px; gap: 14px; }
  .atlas-viewport.is-list .node-main { min-height: 130px; padding: 15px 14px 49px; }
  .atlas-viewport.is-list .node h3 { font-size: 16px; }
  .atlas-viewport.is-list .check { min-height: 44px; bottom: 4px; }
  .stage-shell > .legend { gap: 8px; padding: 10px; font-size: 9px; }
  .detail-toggle { min-height: 44px; font-size: 12px; }
}
@media(prefers-reduced-motion:reduce) {
  .atlas-viewport:before { transform: none; }
}

/* Fixed image slots keep connection anchors stable while posters load. */
.node:before { pointer-events: none; }
.node-body { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 13px; align-items: start; margin-top: 14px; }
.node-copy { min-width: 0; }
.node .node-copy h3 { margin: 0 0 8px; font-size: 16px; line-height: 1.55; }
.poster-slot { display: block; position: relative; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 3px; background: #070d19; box-shadow: 0 4px 14px #0005; }
.poster-slot img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: #070d19; }
.poster-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: #aabbd3; font-size: 11px; background: linear-gradient(145deg, #203b51, #101727); }
.node-main { padding: 17px 15px 50px; }
.detail.with-poster { grid-template-columns: 120px minmax(0, 1fr) auto; align-items: start; }
.detail-poster { width: 120px; }
.image-credits { border-top: 1px solid var(--line); padding: 24px 0 34px; color: #aab5ca; font-size: 12px; line-height: 1.8; }
.image-credits h2 { margin: 0 0 12px; color: #dce7ff; font-size: 14px; }
.image-credits img { display: block; width: 150px; height: auto; margin: 12px 0; }
.image-credits p { margin: 6px 0; }
@media(max-width:800px) {
  .atlas-viewport.is-list .node-main { padding: 15px 14px 52px; }
  .atlas-viewport.is-list .node-body { grid-template-columns: 88px minmax(0, 1fr); }
  .detail.with-poster { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 14px; }
  .detail-poster { width: 82px; }
  .detail.with-poster .detail-toggle { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .detail.with-poster h2 { font-size: 19px; }
}
@media(max-width:360px) {
  .atlas-viewport.is-list .node-body { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; }
}

/* Constellation view: independent card positions with shared perspective lines. */
.atlas-viewport:not(.is-list) { background: radial-gradient(ellipse at 48% 45%, #21315177, transparent 60%), radial-gradient(ellipse at 85% 15%, #29214666, transparent 45%), #050914; }
.atlas-viewport:not(.is-list):before { inset: 0; transform: none; background-image: radial-gradient(1px 1px at 30px 24px, #b6dafca8 95%, transparent), radial-gradient(1px 1px at 78px 90px, #88acd566 95%, transparent), radial-gradient(2px 2px at 136px 160px, #6ff5ff60 60%, transparent); background-size: 173px 157px, 263px 221px, 419px 347px; }
.atlas-viewport:not(.is-list):after { content: ''; position: absolute; z-index: -1; width: 110%; height: 75%; top: 10%; left: -5%; border: 1px solid #7896c118; border-radius: 50%; transform: rotate(-17deg); box-shadow: 0 0 90px #5b89c508, inset 0 0 90px #5b89c508; pointer-events: none; }
.atlas-viewport:not(.is-list) .graph { width: 3600px; min-width: 3600px; height: 2000px; padding: 0; }
.atlas-viewport:not(.is-list) .graph.camera-travel { transition: transform 920ms cubic-bezier(.3,0,.2,1); }
.atlas-viewport:not(.is-list) .epoch-row { display: none; }
.atlas-viewport:not(.is-list) .lane-grid, .atlas-viewport:not(.is-list) .lane { display: contents; }
.atlas-viewport:not(.is-list) .lane:before, .atlas-viewport:not(.is-list) .lane:after { display: none; }
.atlas-viewport:not(.is-list) .node { position: absolute; top: 0; left: 0; width: 280px; transform-origin: 0 0; margin: 0; transition: border-color .25s, box-shadow .25s; background: linear-gradient(135deg, #192a40f5, #0a1427f5); box-shadow: 0 12px 40px #0006; }
.atlas-viewport:not(.is-list) .node.cosmos-related { border-color: #8ebbe8; box-shadow: 0 12px 45px #020511aa, 0 0 22px #4ca1e51a; }
.atlas-viewport:not(.is-list) .node.active { border-color: #ffe0a0; box-shadow: 0 0 0 1px #fbd58b70, 0 0 50px #fbcb6b22, 0 18px 50px #0008; }
.atlas-viewport:not(.is-list) .node.cosmos-related:before { content: attr(data-relation); position: absolute; inset: auto auto auto 12px; top: -26px; width: auto; height: auto; padding: 3px 8px; border-radius: 3px; background: #0b182c; color: #aac9e8; font-size: 11px; opacity: 1; }
.atlas-viewport:not(.is-list) .node.active:before { color: #ffe0a0; }
.atlas-viewport:not(.is-list) #lines { width: 3600px; height: 2000px; z-index: 0; }
.atlas-viewport:not(.is-list) .line { stroke: #7198cc40; stroke-width: 1.5; transition: none; }
.atlas-viewport:not(.is-list) .line.hot { stroke: #acd4ff; stroke-width: 2.5; filter: drop-shadow(0 0 6px #72b6ff77); }
.atlas-viewport:not(.is-list) .line.character-line { stroke: #8eebc1; }
.atlas-viewport:not(.is-list) .line.dim { opacity: .10; }
.cosmos-rail { display: flex; align-items: center; gap: 7px; overflow-x: auto; padding: 12px 16px; background: #0a1120; border: 1px solid var(--line); border-bottom: 0; scrollbar-width: thin; }
.cosmos-rail-label { flex-shrink: 0; color: #c2d5ee; font-size: 11px; margin-right: 6px; }
.cosmos-rail button { flex-shrink: 0; padding: 8px 11px; min-height: 36px; border: 1px solid #344a65; border-radius: 20px; background: #111e32; color: #b8cce3; font-size: 11px; cursor: pointer; }
.cosmos-rail button:hover, .cosmos-rail button[aria-pressed="true"] { border-color: #f6d28e; color: #ffe0a0; }
.cosmos-rail .cosmos-return { border-style: dashed; color: #8ce4ef; }
.cosmos-rail[hidden] { display: none; }
@media(max-width:800px) {
  .cosmos-rail { padding: 10px; }
  .cosmos-rail button { min-height: 44px; }
  .atlas-viewport:not(.is-list) { min-height: 470px; height: 66vh; }
}
@media(prefers-reduced-motion:reduce) {
  .atlas-viewport:not(.is-list) .graph { transition: none !important; }
}

.release-meta { display: block; margin-top: 9px; color: #9fb6d2; font: 10px/1.6 'DM Mono', 'Noto Sans JP', sans-serif; }
.node .node-top time { white-space: nowrap; font-size: 9px; }
.legacy-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.legacy-card { display: flex; flex-direction: column; padding: 14px; border-radius: 6px; }
.legacy-card .legacy-era { margin-bottom: 12px; font-size: 10px; }
.legacy-card .poster-slot { flex-shrink: 0; }
.legacy-card b { margin: 14px 0 7px; font-size: 17px; line-height: 1.5; }
.legacy-card small { margin: 0 0 12px; font-size: 11px; line-height: 1.6; }
.legacy-card .legacy-image-caption { margin: 0 0 14px; color: #b49fb4; font: 10px/1.7 Manrope, 'Noto Sans JP', sans-serif; }
.legacy-card .legacy-watch { margin-top: auto; padding: 11px 8px; border: 1px solid #86607c; border-radius: 4px; color: #ffd3e7; font: 12px/1.5 Manrope, 'Noto Sans JP', sans-serif; text-align: center; }
.legacy-card.done .legacy-watch { background: var(--pink); border-color: var(--pink); color: #210b20; }
.legacy-card:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
@media(max-width:600px) {
  .legacy-head { display: block; }
  .legacy-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .legacy-card { min-width: 0; padding: 10px; }
  .legacy-card b { font-size: 14px; }
  .legacy-card .legacy-era { font-size: 8px; }
}