:root {
  color-scheme: dark;
  --theme-bg: #0b0d0f;
  --theme-bg-2: #16191c;
  --theme-rail: #111417;
  --theme-panel: #181b1e;
  --theme-panel-2: #222529;
  --theme-accent: #b4a87f;
  --theme-bright: #eee5cb;
  --theme-muted: #aaa99f;
  --theme-border: #746f61;
  --theme-route: #a9a17d;
  --theme-glow: rgba(202, 188, 137, .46);
  --theme-haze: rgba(167, 153, 109, .14);
  --zone-1: rgba(196, 186, 151, .12);
  --zone-2: rgba(130, 143, 151, .11);
  --zone-3: rgba(88, 90, 96, .13);
  font-family: Inter, "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 0; min-height: 100%; margin: 0; overflow: hidden; background: var(--theme-bg); }
body { color: #eeecdf; transition: background 600ms ease, color 600ms ease; }
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--theme-bright); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; clip: rect(0, 0, 0, 0); overflow: hidden; white-space: nowrap; border: 0; }
.vector-icon { display: inline-block; width: 1.35em; height: 1.35em; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.particle-field { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 300ms ease; }
.particle-field canvas { display: block; width: 100%; height: 100%; }

body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; transition: background 600ms ease, opacity 600ms ease; }
body::before {
  background:
    radial-gradient(circle at 49% 36%, var(--theme-haze), transparent 39%),
    radial-gradient(circle at 82% 86%, color-mix(in srgb, var(--theme-accent) 10%, transparent), transparent 32%),
    linear-gradient(118deg, transparent 0 43%, rgba(255,255,255,.018) 50%, transparent 57%);
}
body::after {
  opacity: .36;
  background-image: linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 54% 45%, black, transparent 76%);
}

.map-shell { position: relative; z-index: 1; display: grid; grid-template-columns: 118px minmax(560px, 1fr) minmax(380px, 440px); width: 100vw; height: 100vh; min-height: 650px; isolation: isolate; }
.floor-rail {
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 12px;
  border-right: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-rail) 94%, var(--theme-accent) 6%), var(--theme-rail));
  box-shadow: 16px 0 42px rgba(0,0,0,.34);
  transition: background 600ms ease, border-color 600ms ease;
}
.back-button, .icon-button {
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--theme-border) 75%, transparent);
  color: var(--theme-muted);
  background: color-mix(in srgb, var(--theme-panel-2) 90%, transparent);
  cursor: pointer;
  transition: color 170ms ease, border-color 170ms ease, background 170ms ease, transform 170ms ease, box-shadow 170ms ease;
}
.back-button { width: 50px; height: 42px; text-decoration: none; }
.back-button .vector-icon { width: 27px; height: 27px; }
.back-button:hover { transform: translateX(-3px); }
.back-button:hover, .icon-button:hover, .icon-button[aria-pressed="true"] {
  color: var(--theme-bright);
  border-color: var(--theme-accent);
  background: color-mix(in srgb, var(--theme-panel-2) 78%, var(--theme-accent) 22%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--theme-glow) 65%, transparent);
}
.back-button:active, .icon-button:active { transform: scale(.94); }
.icon-button, .floor-button { -webkit-tap-highlight-color: transparent; }
.icon-button[data-tooltip]::after, .floor-button[data-tooltip]::before {
  position: absolute;
  z-index: 30;
  left: calc(100% + 12px);
  top: 50%;
  width: max-content;
  max-width: 190px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--theme-border) 68%, transparent);
  color: var(--theme-bright);
  background: color-mix(in srgb, var(--theme-panel-2) 94%, black);
  box-shadow: 0 10px 26px rgba(0,0,0,.34);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .05em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity 150ms ease, transform 150ms ease;
}
.icon-button[data-tooltip]::after { content: attr(data-tooltip); }
.floor-button[data-tooltip]::before { content: attr(data-tooltip); }
.icon-button[data-tooltip]:hover::after, .icon-button[data-tooltip]:focus-visible::after,
.floor-button[data-tooltip]:hover::before, .floor-button[data-tooltip]:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
.rail-brand { display: grid; place-items: center; width: 66px; height: 48px; border-block: 1px solid color-mix(in srgb, var(--theme-border) 68%, transparent); color: var(--theme-accent); }
.rail-brand .vector-icon { width: 31px; height: 31px; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--theme-glow) 72%, transparent)); }

.floor-nav { display: grid; justify-items: center; gap: 10px; width: 100%; }
.floor-button { position: relative; display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 1px solid transparent; color: var(--theme-muted); background: transparent; cursor: pointer; transition: 190ms ease; }
.floor-button::after { content: ""; position: absolute; right: -13px; width: 4px; height: 0; border-radius: 3px; background: var(--theme-bright); box-shadow: 0 0 12px var(--theme-glow); transition: height 190ms ease; }
.floor-button:hover, .floor-button.active { color: var(--theme-bright); border-color: color-mix(in srgb, var(--theme-border) 70%, transparent); background: color-mix(in srgb, var(--theme-panel-2) 78%, transparent); }
.floor-button.active::after { height: 42px; }
.floor-button:active .floor-emblem { transform: scale(.92); }
.floor-emblem { position: relative; display: grid; place-items: center; width: 46px; height: 46px; color: color-mix(in srgb, var(--theme-muted) 82%, transparent); transition: color 190ms ease, transform 190ms ease, filter 190ms ease; }
.floor-emblem .vector-icon { width: 34px; height: 34px; }
.floor-button:hover .floor-emblem, .floor-button.active .floor-emblem { color: var(--theme-bright); transform: scale(1.06); filter: drop-shadow(0 0 7px var(--theme-glow)); }
.rail-tools { display: grid; gap: 9px; margin-top: auto; }
.icon-button { position: relative; width: 46px; height: 46px; }
.icon-button .vector-icon { width: 23px; height: 23px; }

.map-stage {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  padding: 18px clamp(26px, 3.5vw, 66px) 34px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--theme-accent) 11%, transparent), transparent 52%), linear-gradient(180deg, color-mix(in srgb, var(--theme-bg-2) 84%, transparent), color-mix(in srgb, var(--theme-bg) 88%, transparent));
  transition: background 600ms ease;
}
.map-heading { z-index: 2; display: flex; align-items: end; justify-content: space-between; gap: 28px; }
.map-stage.floor-entering .map-heading { animation: floor-heading-enter 460ms cubic-bezier(.2,.8,.2,1) both; }
.map-stage.floor-entering .arch-frame { animation: floor-map-enter 500ms cubic-bezier(.2,.8,.2,1) both; }
.eyebrow { margin: 0 0 8px; color: var(--theme-accent); font-family: Georgia, serif; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.map-heading h1 { margin: 0; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: clamp(38px, 4vw, 62px); font-weight: 500; line-height: 1; letter-spacing: .08em; text-shadow: 0 4px 24px rgba(0,0,0,.28); }
.map-heading p:last-child { margin: 10px 0 0; color: var(--theme-muted); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .12em; }
.heading-status { display: grid; justify-items: end; gap: 10px; margin-bottom: 3px; }
.map-status, .map-mode { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--theme-border) 58%, transparent); color: var(--theme-muted); background: color-mix(in srgb, var(--theme-panel) 72%, transparent); font-size: 12px; letter-spacing: .08em; }
.map-status .vector-icon { width: 17px; height: 17px; color: var(--theme-accent); }
.map-mode span { width: 8px; height: 8px; border-radius: 50%; background: var(--theme-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-muted) 13%, transparent); }
.map-mode.explore span { background: var(--theme-bright); box-shadow: 0 0 0 4px color-mix(in srgb, var(--theme-accent) 24%, transparent), 0 0 12px var(--theme-glow); }

.arch-frame {
  --arch-rise: clamp(68px, 8vh, 104px);
  position: relative;
  width: min(100%, 820px);
  height: calc(100% + var(--arch-rise));
  min-height: clamp(500px, calc(100vh - 158px), 980px);
  margin-top: calc(-1 * var(--arch-rise));
  justify-self: center;
  overflow: hidden;
  border: 2px solid color-mix(in srgb, var(--theme-accent) 74%, var(--theme-border));
  border-radius: 50% 50% 8px 8px / 31% 31% 8px 8px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--theme-panel) 78%, transparent), color-mix(in srgb, var(--theme-bg) 87%, transparent));
  box-shadow: inset 0 0 0 10px color-mix(in srgb, var(--theme-bg) 76%, transparent), inset 0 0 0 11px color-mix(in srgb, var(--theme-bright) 20%, transparent), inset 0 -80px 110px rgba(0,0,0,.28), 0 34px 80px rgba(0,0,0,.42), 0 0 45px color-mix(in srgb, var(--theme-glow) 24%, transparent);
  transition: background 600ms ease, border-color 600ms ease, box-shadow 600ms ease;
}
.arch-frame.sealed-active { overflow: hidden; }
.arch-frame::before, .arch-frame::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; }
.arch-frame::before { inset: 12px; z-index: 0; border: 1px solid color-mix(in srgb, var(--theme-bright) 20%, transparent); }
.arch-frame::after { inset: 22px; z-index: 0; border: 1px dotted color-mix(in srgb, var(--theme-accent) 16%, transparent); }
.arch-depth { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 12%, color-mix(in srgb, var(--theme-bright) 13%, transparent), transparent 29%), radial-gradient(circle at 50% 86%, var(--theme-haze), transparent 43%), conic-gradient(from 0deg at 50% 50%, transparent, color-mix(in srgb, var(--theme-accent) 4%, transparent), transparent 34%); }
.map-viewport { position: absolute; inset: calc(var(--arch-rise) + 2.4%) 7.5% 2.2%; min-height: 0; }
.route-layer, .node-layer, .region-zones { position: absolute; inset: 0; width: 100%; height: 100%; }
.region-zones { z-index: 0; pointer-events: none; }
.region-zone { position: absolute; left: 0; right: 0; height: 0; }
.region-copy { position: absolute; z-index: 3; left: 1.5%; top: 40px; width: clamp(112px, 18%, 148px); text-shadow: 0 2px 10px rgba(0,0,0,.72); transition: opacity 190ms ease, transform 190ms ease, filter 190ms ease; }
.region-zone:first-child .region-copy { top: 54px; }
.region-copy strong { display: block; color: color-mix(in srgb, var(--theme-bright) 86%, transparent); font-family: Georgia, "Songti SC", serif; font-size: clamp(18px, 1.35vw, 24px); font-weight: 500; letter-spacing: .14em; }
.region-copy small { display: block; margin-top: 5px; color: color-mix(in srgb, var(--theme-muted) 82%, transparent); font-size: clamp(11px, .82vw, 13px); line-height: 1.55; letter-spacing: .04em; }
.explore-active .region-copy { opacity: .58; }
.explore-active .region-zone:not(.is-discovered) .region-copy { opacity: 0; visibility: hidden; transform: translateY(8px); }
.region-zone.is-active .region-copy { opacity: 1; transform: translateX(5px); filter: drop-shadow(0 0 9px var(--theme-glow)); }
.region-zone.is-active .region-copy strong { color: var(--theme-bright); }

.route { fill: none; stroke: color-mix(in srgb, var(--theme-route) 66%, var(--theme-border)); stroke-width: 1.15; vector-effect: non-scaling-stroke; opacity: .64; stroke-linecap: round; stroke-dasharray: 1.5 8.8; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--theme-glow) 48%, transparent)); transition: opacity 240ms ease, stroke 240ms ease, stroke-width 240ms ease; animation: route-flow 5.2s linear infinite; }
.route.explored { stroke: color-mix(in srgb, var(--theme-route) 78%, var(--theme-bright)); stroke-width: 1.8; stroke-dasharray: none; opacity: .9; animation: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--theme-glow) 68%, transparent)); }
.route.related { stroke: var(--theme-bright); stroke-width: 2.45; opacity: 1; filter: drop-shadow(0 0 5px var(--theme-accent)) drop-shadow(0 0 13px var(--theme-glow)); }
.route.preview { stroke: color-mix(in srgb, #e4f9ff 84%, var(--theme-accent)); stroke-width: 2.45; opacity: 1 !important; filter: none; stroke-dasharray: 2.2 6.2; animation: route-preview-flow 1.15s linear infinite; }
.route.preview-to-start { marker-start: url(#routePreviewArrow); }
.route.preview-to-end { marker-end: url(#routePreviewArrow); }
#routePreviewArrow { overflow: visible; }
.route-preview-arrow-shape { fill: #e4f9ff; stroke: color-mix(in srgb, #8bdfff 74%, var(--theme-accent)); stroke-width: .18; filter: none; }
.route-travel-pulse { opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.route-travel-pulse.active { opacity: 1; }
.route-pulse-tail { fill: color-mix(in srgb, var(--theme-accent) 46%, transparent); filter: drop-shadow(0 0 2.5px var(--theme-accent)) drop-shadow(0 0 7px var(--theme-glow)); }
.route-pulse-core { fill: color-mix(in srgb, var(--theme-bright) 92%, white); filter: drop-shadow(0 0 2px var(--theme-bright)) drop-shadow(0 0 7px var(--theme-accent)); }

.map-node { position: absolute; z-index: 2; width: clamp(46px, 4vw, 62px); height: clamp(46px, 4vw, 62px); padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; cursor: pointer; opacity: 1; visibility: visible; transition: opacity 260ms ease, visibility 260ms ease, filter 260ms ease; }
.map-node::before { content: ""; position: absolute; inset: 6px; border: 2px solid color-mix(in srgb, var(--theme-border) 78%, transparent); border-radius: 50%; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--theme-panel-2) 64%, var(--theme-bright) 16%), var(--theme-panel) 72%); box-shadow: 0 0 0 7px color-mix(in srgb, var(--theme-route) 7%, transparent), 0 7px 17px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.12); transition: 180ms ease; }
.map-node::after { content: ""; position: absolute; inset: 16px; border-radius: 50%; background: color-mix(in srgb, var(--theme-muted) 82%, var(--theme-panel)); box-shadow: inset 0 1px rgba(255,255,255,.16); transition: 180ms ease; }
.map-node.has-event::after { background: var(--theme-accent); box-shadow: 0 0 12px var(--theme-accent), 0 0 28px var(--theme-glow); animation: node-breathe 2.9s ease-in-out infinite; }
.map-node:hover::before, .map-node:focus-visible::before { transform: scale(1.14); border-color: var(--theme-bright); box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-accent) 12%, transparent), 0 0 25px var(--theme-glow); }
.map-node:hover .node-label, .map-node:focus-visible .node-label { color: var(--theme-bright); transform: translateX(-50%) translateY(2px); }
.map-node:active::before { transform: scale(1.02); }
.map-node.selected::before { transform: scale(1.18); border-color: var(--theme-bright); background: color-mix(in srgb, var(--theme-panel-2) 68%, var(--theme-accent) 32%); box-shadow: 0 0 0 9px color-mix(in srgb, var(--theme-accent) 14%, transparent), 0 0 30px var(--theme-glow); }
.map-node.selected::after { background: var(--theme-bright); box-shadow: 0 0 17px var(--theme-bright), 0 0 36px var(--theme-glow); }
.map-node.selected .node-ripple { position: absolute; inset: 0; border: 2px solid var(--theme-bright); border-radius: 50%; animation: ripple 760ms ease-out both; }
.map-node.locked { pointer-events: none; opacity: 0; visibility: hidden; }
.map-node.reachable::before { border-color: color-mix(in srgb, var(--theme-accent) 84%, var(--theme-border)); }
.map-node.reachable:not(.selected)::before { box-shadow: 0 0 0 8px color-mix(in srgb, var(--theme-accent) 8%, transparent), 0 0 18px color-mix(in srgb, var(--theme-glow) 60%, transparent), 0 7px 17px rgba(0,0,0,.35); }
.map-node.visited::before { border-color: var(--theme-bright); }
.explore-active .map-node:not(.locked)::before { box-shadow: 0 0 0 12px color-mix(in srgb, var(--theme-accent) 9%, transparent), 0 0 42px 14px color-mix(in srgb, var(--theme-glow) 26%, transparent), 0 7px 17px rgba(0,0,0,.4); }
.explore-active .map-node.reachable:not(.visited):not(.selected) { opacity: .6; filter: grayscale(.64) saturate(.25); }
.explore-active .map-node.reachable:not(.visited):not(.selected)::before { border-color: #b9c0c7; background: radial-gradient(circle at 35% 28%, #9ea7af, #434a50 74%); box-shadow: 0 0 0 8px rgba(185,192,199,.08), 0 0 17px rgba(200,210,220,.18), 0 7px 17px rgba(0,0,0,.35); }
.explore-active .map-node.reachable:not(.visited):not(.selected)::after { background: #aeb6bd; box-shadow: 0 0 9px rgba(208,218,226,.26); animation: none; }
.node-label { position: absolute; left: 50%; top: calc(100% + 5px); width: 96px; transform: translateX(-50%); color: color-mix(in srgb, var(--theme-bright) 72%, var(--theme-muted)); font-family: Georgia, serif; font-size: 12px; line-height: 1.2; text-align: center; text-shadow: 0 2px 7px #000; white-space: nowrap; transition: color 170ms ease, transform 170ms ease; }
.map-grain { position: absolute; inset: 0; pointer-events: none; opacity: .16; mix-blend-mode: screen; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); }

.sealed-layer { position: absolute; z-index: 6; inset: 0; overflow: hidden; pointer-events: none; }
.sealed-layer[hidden] { display: none; }
.sealed-map { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; text-align: center; }
.sealed-square { position: absolute; width: clamp(360px, 72%, 590px); aspect-ratio: 1; border: 2px solid color-mix(in srgb, var(--theme-accent) 74%, transparent); opacity: .48; animation: sealed-square-spin 18s linear infinite; }
.sealed-content { position: relative; z-index: 1; width: min(82%, 560px); padding: 32px; border-block: 1px solid color-mix(in srgb, var(--theme-accent) 46%, transparent); background: color-mix(in srgb, var(--theme-panel) 57%, transparent); backdrop-filter: blur(7px); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.sealed-mark { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 18px; color: var(--theme-bright); filter: drop-shadow(0 0 14px var(--theme-glow)); }
.sealed-mark .vector-icon { width: 72px; height: 72px; }
.sealed-content h2 { margin: 0; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: clamp(29px, 3vw, 45px); font-weight: 500; letter-spacing: .12em; }
.sealed-content > p { margin: 13px auto 22px; color: var(--theme-muted); font-size: 14px; line-height: 1.85; }
.sealed-regions { display: grid; gap: 8px; }
.sealed-region { display: flex; justify-content: space-between; gap: 16px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--theme-border) 34%, transparent); color: color-mix(in srgb, var(--theme-bright) 74%, var(--theme-muted)); background: color-mix(in srgb, var(--theme-panel-2) 58%, transparent); font-size: 12px; text-align: left; }
.sealed-region small { color: var(--theme-muted); }

.map-legend { position: absolute; z-index: 7; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; flex-wrap: wrap; gap: 22px; color: var(--theme-muted); font-size: 11px; letter-spacing: .07em; }
.map-legend span { display: flex; align-items: center; gap: 8px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--theme-muted); }
.legend-dot.current { background: var(--theme-bright); box-shadow: 0 0 9px var(--theme-bright); }
.legend-dot.event { background: var(--theme-accent); box-shadow: 0 0 8px var(--theme-glow); }

.dossier { z-index: 4; min-width: 0; border-left: 1px solid color-mix(in srgb, var(--theme-border) 72%, transparent); color: var(--theme-bright); background: linear-gradient(180deg, color-mix(in srgb, var(--theme-panel-2) 94%, black), var(--theme-panel)); box-shadow: -18px 0 48px rgba(0,0,0,.3); transition: background 600ms ease, border-color 600ms ease; }
.dossier-scroll { height: 100%; padding: 36px 32px 48px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--theme-accent) 68%, transparent) transparent; }
.dossier-scroll::-webkit-scrollbar { width: 7px; }
.dossier-scroll::-webkit-scrollbar-track { background: transparent; }
.dossier-scroll::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 8px; background: color-mix(in srgb, var(--theme-accent) 62%, transparent); background-clip: padding-box; }
.dossier-scroll.content-changing { animation: dossier-refresh 300ms cubic-bezier(.2,.8,.2,1) both; }
.dossier-head { position: relative; }
.location-index { position: absolute; top: 0; right: 0; margin: 0; color: var(--theme-muted); font-family: Georgia, serif; font-size: 13px; letter-spacing: .14em; }
.dossier h2 { max-width: 86%; margin: 0; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: clamp(30px, 2.35vw, 42px); font-weight: 500; line-height: 1.15; }
.dossier-head > p:last-child { margin: 11px 0 0; color: var(--theme-muted); font-size: 14px; letter-spacing: .07em; }
.dossier-rule { position: relative; height: 28px; margin: 20px 0 14px; }
.dossier-rule::before, .dossier-rule::after { content: ""; position: absolute; top: 50%; width: calc(50% - 20px); border-top: 1px solid color-mix(in srgb, var(--theme-border) 62%, transparent); }
.dossier-rule::after { right: 0; }
.dossier-rule span { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--theme-accent); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.section-heading h3 { margin: 0; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: 18px; letter-spacing: .12em; }
.section-heading span { color: var(--theme-muted); font-size: 12px; }
.event-list { display: grid; gap: 12px; margin-top: 14px; }
.event-card { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) 14px; gap: 13px; align-items: center; width: 100%; padding: 15px; border: 1px solid color-mix(in srgb, var(--theme-border) 62%, transparent); color: var(--theme-bright); background: color-mix(in srgb, var(--theme-panel-2) 72%, transparent); cursor: pointer; text-align: left; box-shadow: 0 8px 18px rgba(0,0,0,.13); animation: card-enter 300ms ease both; transition: 170ms ease; }
.event-card:hover, .event-card.active { transform: translateX(-4px); border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-panel-2) 73%, var(--theme-accent) 10%); box-shadow: 7px 9px 24px rgba(0,0,0,.2), 0 0 16px color-mix(in srgb, var(--theme-glow) 26%, transparent); }
.event-card::after { content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 3px; background: var(--theme-accent); box-shadow: 0 0 10px var(--theme-glow); transform: scaleY(0); transition: transform 180ms ease; }
.event-card.active::after { transform: scaleY(1); }
.event-card:active { transform: translateX(-2px) scale(.985); }
.event-card.active .event-sigil { transform: scale(1.06); border-color: var(--theme-bright); box-shadow: 0 0 16px var(--theme-glow); }
.event-card-copy { min-width: 0; }
.event-card-chevron { width: 9px; height: 9px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; color: var(--theme-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform 180ms ease, color 180ms ease; }
.event-card.active .event-card-chevron { color: var(--theme-bright); transform: rotate(225deg) translate(-2px, -2px); }
.event-sigil { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid color-mix(in srgb, var(--theme-accent) 76%, transparent); color: var(--theme-bright); background: color-mix(in srgb, var(--theme-panel) 72%, var(--theme-accent) 28%); font-family: Georgia, "Songti SC", serif; font-size: 20px; }
.event-card strong { display: block; overflow: hidden; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.event-card small { display: block; margin-top: 5px; color: var(--theme-muted); font-size: 11px; letter-spacing: .05em; }
.empty-record { margin-top: 15px; padding: 26px 20px; border: 1px dashed color-mix(in srgb, var(--theme-border) 70%, transparent); color: var(--theme-muted); background: color-mix(in srgb, var(--theme-panel-2) 56%, transparent); text-align: center; }
.empty-record strong { display: block; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: 23px; font-weight: 500; }
.empty-record p { margin: 10px 0 0; font-size: 14px; line-height: 1.75; }
.event-detail { margin-top: 24px; padding-top: 22px; border-top: 1px solid color-mix(in srgb, var(--theme-border) 62%, transparent); animation: detail-open 230ms ease both; }
.event-detail h3 { margin: 0 0 11px; color: var(--theme-bright); font-family: Georgia, "Songti SC", serif; font-size: 27px; }
.detail-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.detail-badges span { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--theme-border) 62%, transparent); color: var(--theme-muted); background: color-mix(in srgb, var(--theme-panel-2) 66%, transparent); font-size: 11px; }
.event-detail p { color: color-mix(in srgb, var(--theme-bright) 76%, var(--theme-muted)); font-family: Georgia, "Songti SC", serif; font-size: 15px; line-height: 1.85; }
.detail-link { display: block; margin-top: 18px; padding: 13px 14px; border: 1px solid var(--theme-accent); color: var(--theme-bright); background: color-mix(in srgb, var(--theme-panel-2) 66%, var(--theme-accent) 22%); font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; transition: 160ms ease; }
.detail-link:hover { background: color-mix(in srgb, var(--theme-panel-2) 50%, var(--theme-accent) 38%); box-shadow: 0 0 19px color-mix(in srgb, var(--theme-glow) 35%, transparent); }
.detail-link:active { transform: translateY(1px) scale(.99); }
.event-card[data-event-type="战斗"] .event-sigil { animation: sigil-heartbeat 3s ease-in-out infinite; }
.event-card[data-event-type="探索"] .event-sigil { animation: sigil-float 4s ease-in-out infinite; }
.event-card[data-event-type="解谜"] .event-sigil { animation: sigil-glint 3.5s ease-in-out infinite; }
.event-card[data-event-type="思绪"] .event-sigil { animation: sigil-drift 5s ease-in-out infinite; }
.dossier-handle { display: none; }
.map-feedback { position: fixed; z-index: 4; left: 132px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: min(360px, calc(100vw - 154px)); pointer-events: none; }
.map-feedback-item { width: fit-content; min-width: 190px; max-width: 100%; padding: 11px 17px; border: 1px solid color-mix(in srgb, var(--theme-accent) 68%, transparent); color: var(--theme-bright); background: color-mix(in srgb, var(--theme-panel-2) 94%, black); box-shadow: 0 14px 34px rgba(0,0,0,.36), 0 0 18px color-mix(in srgb, var(--theme-glow) 24%, transparent); font-size: 12px; line-height: 1.45; letter-spacing: .07em; text-align: left; animation: feedback-track 2.9s cubic-bezier(.2,.82,.2,1) both; }

body[data-floor-theme="overgrowth"] { --theme-bg:#0b1108; --theme-bg-2:#17200d; --theme-rail:#11190d; --theme-panel:#17210f; --theme-panel-2:#223017; --theme-accent:#c5b94f; --theme-bright:#eef0b5; --theme-muted:#a8b58d; --theme-border:#667849; --theme-route:#c8c465; --theme-glow:rgba(190,199,71,.43); --theme-haze:rgba(93,137,55,.18); --zone-1:rgba(91,128,48,.16); --zone-2:rgba(176,152,48,.10); --zone-3:rgba(194,205,164,.10); }
body[data-floor-theme="arcane"] { --theme-bg:#0e0917; --theme-bg-2:#191025; --theme-rail:#150d20; --theme-panel:#1b1228; --theme-panel-2:#291b3d; --theme-accent:#9b72da; --theme-bright:#e0d0ff; --theme-muted:#aa9cbd; --theme-border:#68518a; --theme-route:#a989df; --theme-glow:rgba(144,91,221,.5); --theme-haze:rgba(117,70,178,.22); --zone-1:rgba(106,68,160,.15); --zone-2:rgba(138,102,189,.11); --zone-3:rgba(177,151,215,.10); }
body[data-floor-theme="depths"] { --theme-bg:#130708; --theme-bg-2:#230b0d; --theme-rail:#1b090b; --theme-panel:#210c0e; --theme-panel-2:#341115; --theme-accent:#a63b42; --theme-bright:#e9b3ae; --theme-muted:#b6928e; --theme-border:#744247; --theme-route:#c45c61; --theme-glow:rgba(174,47,58,.5); --theme-haze:rgba(135,29,37,.24); --zone-1:rgba(136,28,37,.18); --zone-2:rgba(194,180,150,.09); --zone-3:rgba(102,37,66,.13); }

@keyframes route-flow { to { stroke-dashoffset: -22; } }
@keyframes route-preview-flow { to { stroke-dashoffset: -18; } }
@keyframes node-breathe { 50% { transform: scale(.72); opacity: .66; } }
@keyframes ripple { to { inset: -17px; opacity: 0; } }
@keyframes card-enter { from { transform: translateY(10px); opacity: 0; } }
@keyframes detail-open { from { transform: translateY(-5px); opacity: 0; } }
@keyframes feedback-track {
  0% { opacity: 0; transform: translateX(calc(-100% - 26px)) scale(.98); }
  14%, 68% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(0, 22px) scale(.985); }
}
@keyframes feedback-hold { from, to { opacity: 1; transform: none; } }
@keyframes sealed-square-spin { to { transform: rotate(360deg); } }
@keyframes floor-heading-enter { from { transform: translateY(-8px); opacity: .35; } }
@keyframes floor-map-enter { from { transform: translateY(10px) scale(.985); opacity: .45; filter: saturate(.7); } }
@keyframes dossier-refresh { from { transform: translateX(7px); opacity: .55; } }
@keyframes sigil-heartbeat { 4%, 12% { transform: scale(1.07); } 8%, 16% { transform: scale(1); } }
@keyframes sigil-float { 50% { transform: translateY(-3px); } }
@keyframes sigil-glint { 50% { box-shadow: inset 0 0 18px color-mix(in srgb, var(--theme-bright) 32%, transparent), 0 0 13px var(--theme-glow); } }
@keyframes sigil-drift { 33% { transform: rotate(-2deg); } 66% { transform: rotate(2deg); } }

@media (max-width: 1260px) {
  .map-shell { grid-template-columns: 104px minmax(470px, 1fr) 360px; }
  .floor-button { width: 58px; height: 58px; }
  .floor-emblem { width: 44px; height: 44px; }
  .map-stage { padding-inline: 24px; }
  .dossier-scroll { padding-inline: 24px; }
  .map-feedback { left: 118px; width: min(340px, calc(100vw - 140px)); }
}

@media (max-width: 820px) {
  html, body { overflow-x: hidden; overflow-y: auto; }
  .map-shell { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 82px minmax(640px, 78vh) auto; width: 100%; height: auto; min-height: 100vh; }
  .floor-rail { position: sticky; top: 0; z-index: 10; flex-direction: row; justify-content: flex-start; gap: 9px; padding: 9px 12px; border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 70%, transparent); }
  .back-button { flex: 0 0 46px; width: 46px; height: 42px; }
  .rail-brand { display: none; }
  .floor-nav { display: flex; flex: 1 1 auto; gap: 6px; width: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .floor-nav::-webkit-scrollbar { display: none; }
  .floor-button { flex: 0 0 54px; display: grid; width: 54px; height: 54px; min-height: 54px; padding: 3px; }
  .floor-button::after { right: auto; bottom: -10px; width: 0; height: 3px; }
  .floor-button.active::after { width: 36px; height: 3px; }
  .floor-emblem { width: 42px; height: 42px; }
  .floor-emblem .vector-icon { width: 31px; height: 31px; }
  .rail-tools { display: flex; flex: 0 0 auto; gap: 5px; margin: 0 0 0 auto; }
  .icon-button { width: 40px; height: 40px; }
  .icon-button[data-tooltip]::after, .floor-button[data-tooltip]::before { display: none; }
  .map-stage { min-height: 640px; padding: 24px 17px 17px; }
  .map-heading { align-items: start; }
  .map-heading h1 { font-size: 38px; }
  .map-heading p:last-child { font-size: 13px; }
  .heading-status { gap: 6px; }
  .map-status, .map-mode { padding: 4px 7px; font-size: 9px; }
  .arch-frame { --arch-rise: clamp(48px, 6vh, 72px); width: min(100%, 600px); }
  .region-copy { max-width: 52%; }
  .region-copy strong { font-size: 15px; }
  .region-copy small { font-size: 9px; }
  .dossier { position: fixed; inset: auto 0 0; z-index: 12; height: min(68vh, 620px); border-top: 1px solid var(--theme-border); border-left: 0; transform: translateY(calc(100% - 72px)); transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
  .dossier.open { transform: translateY(0); }
  .dossier-handle { display: grid; grid-template-columns: 34px 1fr; align-items: center; width: 100%; min-height: 72px; padding: 10px 22px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--theme-border) 55%, transparent); color: var(--theme-bright); background: var(--theme-panel-2); text-align: left; }
  .dossier-handle span { width: 14px; height: 14px; margin-left: 6px; border-top: 2px solid var(--theme-accent); border-left: 2px solid var(--theme-accent); transform: rotate(45deg) translate(3px, 3px); transition: transform 220ms ease; }
  .dossier.open .dossier-handle span { transform: rotate(225deg) translate(3px, 3px); }
  .dossier-handle strong { font-size: 16px; }
  .dossier-scroll { height: calc(100% - 72px); padding: 24px 22px 42px; }
  .dossier h2 { font-size: 34px; }
  .map-feedback { z-index: 9; left: 12px; right: 12px; top: 91px; bottom: auto; width: auto; align-items: flex-start; }
  .map-feedback-item { min-width: 0; max-width: min(360px, 100%); }
}

@media (max-width: 520px) {
  .map-shell { grid-template-rows: 74px minmax(610px, 78vh) auto; }
  .floor-rail { gap: 5px; padding-inline: 8px; }
  .back-button { flex-basis: 42px; width: 42px; }
  .floor-button { flex-basis: 48px; width: 48px; height: 48px; justify-items: center; }
  .floor-emblem { grid-row: auto; width: 40px; height: 40px; }
  .rail-tools { gap: 3px; }
  .icon-button { width: 37px; height: 37px; }
  .icon-button .vector-icon { width: 20px; height: 20px; }
  .map-stage { padding: 18px 12px 14px; }
  .map-heading { gap: 10px; }
  .map-heading h1 { font-size: 32px; }
  .map-heading p:last-child { max-width: 220px; font-size: 11px; }
  .map-status { display: none; }
  .map-mode { margin-top: 19px; }
  .arch-frame { --arch-rise: 36px; border-radius: 50% 50% 7px 7px / 26% 26% 7px 7px; }
  .map-viewport { inset-inline: 4%; }
  .region-copy { left: 7px; top: 47px; max-width: 62%; }
  .region-zone:first-child .region-copy { top: 61px; }
  .region-copy strong { font-size: 13px; }
  .region-copy small { display: none; }
  .map-node { width: 46px; height: 46px; }
  .node-label { font-size: 10px; }
  .map-legend { gap: 12px; font-size: 9px; }
  .sealed-content { width: 92%; padding: 24px 17px; }
  .sealed-square { width: 78%; min-width: 300px; }
  .sealed-content > p { font-size: 12px; }
  .sealed-region { display: grid; gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .map-feedback-item { animation-name: feedback-hold !important; }
}