/* 雷奥纳达 / Vice —— 给玩家的第二块屏幕，不是一个通用后台面板。

   在 app.css **之后**加载，覆盖在它上面。结构、数据和地图行为都留在原来的文件
   里；这一层负责视觉系统和响应式的阅读流。

   换句话说：app.css 管「东西在哪、怎么排」，vice.css 管「看起来什么样」。
   两者有 56% 的选择器重复，所以改 app.css 里的样式之前，先在这里搜一下有没有
   同名选择器——有的话，真正生效的是这里。

   分区顺序：品牌与导航 → 发售前信息 → 地图框 → 点位与选中卡 → 收藏品面板
   → 站内广告 → 参考页 → 现实对照长文 → 紧凑屏 → 攻略 → 404 */

:root {
  --bg: #080b12;
  --bg-2: #0d121b;
  --bg-3: #151c28;
  --panel: #0f151f;
  --panel-raised: #171f2c;
  --line: #263142;
  --line-2: #3a485d;
  --ink: #f4f6fa;
  --dim: #a8b3c4;
  --dim-2: #748197;
  --pink: #ff4d94;
  --pink-soft: #ff4d941c;
  --cyan: #43e8d4;
  --cyan-soft: #43e8d41c;
  --amber: #ffca6a;
  --sunset: #ff8d78;
  --violet: #9b87ff;
  --radius: 10px;
  --shadow: 0 24px 70px -24px #000f;
  --font: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "Arial Narrow", "Aptos Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bar: 70px;
}

html { background: var(--bg); }
body {
  background:
    radial-gradient(70% 45% at 4% 0%, #3c17343d 0, transparent 70%),
    radial-gradient(55% 45% at 100% 0%, #123c4530 0, transparent 72%),
    var(--bg);
}
::selection { background: var(--pink); color: #fff; }
a, button, input, select { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
:focus-visible { outline-color: var(--cyan); }

/* Brand and navigation: broadcast graphics meets a game HUD. */
.topbar {
  height: var(--bar);
  gap: 28px;
  padding: 0 22px;
  background: #090e16ed;
  border-bottom: 0;
  box-shadow: 0 1px 0 #ffffff08 inset;
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--pink), #ff4d9425 34%, #43e8d422 72%, var(--cyan));
  opacity: .85;
}
.brand { gap: 10px; }
.brand-mark {
  width: 43px;
  height: 38px;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: skew(-7deg);
}
.brand-mark::before {
  content: "VI";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: italic 900 29px/1 var(--display);
  letter-spacing: -.12em;
  padding-right: 4px;
  text-shadow: 3px 2px 0 var(--pink), -2px -1px 0 #167d80;
}
.brand-mark::after {
  content: "";
  inset: auto 3px 1px 7px;
  height: 2px;
  border: 0;
  border-radius: 0;
  clip-path: none;
  background: linear-gradient(90deg, var(--cyan), var(--pink));
}
.brand-text { gap: 4px; }
.brand-text strong {
  font: 800 17px/1 var(--display);
  letter-spacing: .14em;
}
.brand-text em {
  margin: 0;
  color: var(--dim-2);
  font-size: 9px;
  letter-spacing: .29em;
}
.collections { gap: 2px; align-self: stretch; }
.coll {
  position: relative;
  align-self: stretch;
  padding: 0 14px;
  border: 0;
  border-radius: 0;
  color: var(--dim);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: .035em;
}
.coll:hover { color: #fff; background: #ffffff06; }
.coll[aria-current="page"] {
  color: #fff;
  background: linear-gradient(180deg, transparent, #ff4d940e);
  border: 0;
}
.coll[aria-current="page"]::before {
  width: auto;
  height: 2px;
  border-radius: 0;
  background: var(--pink);
  box-shadow: 0 0 14px #ff4d9490;
  position: absolute;
  content: "";
  left: 12px;
  right: 12px;
  bottom: 0;
}
.coll .n { color: var(--dim-2); font: 10px var(--mono); }
.actions { gap: 12px; }
.progress { width: 42px; height: 42px; }
.progress .track { stroke: #2b3545; }
.progress .fill { stroke: var(--cyan); }
.progress-text b { color: var(--ink); }
.spoiler {
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 6px;
  background: #111722;
  border-color: var(--line);
}
.spoiler span { color: var(--dim-2); font: 9px var(--mono); }
.spoiler select { min-height: 26px; }
.btn, .lang {
  min-height: 36px;
  border-radius: 6px;
  font-size: 12px;
}
.btn {
  position: relative;
  border-color: #ff4d9470;
  background: #ff4d9414;
  color: #ffd9e8;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.btn:hover { background: var(--pink); box-shadow: 0 0 24px -8px var(--pink); }
.lang { background: transparent; border-color: var(--line); }

/* Pre-launch information remains visible, but no longer owns the first screen. */
.notice {
  min-height: 34px;
  padding: 6px 22px;
  gap: 12px;
  background: #211a18;
  border-bottom-color: #ffca6a25;
  color: #e9cda4;
  font-size: 11px;
}
.notice b {
  flex: none;
  border-radius: 3px;
  background: var(--amber);
  font: 800 9px var(--mono);
  letter-spacing: .09em;
}
.band {
  position: relative;
  min-height: 96px;
  gap: 10px 30px;
  padding: 14px 22px 12px;
  overflow: hidden;
  background:
    linear-gradient(105deg, #ff4d940e, transparent 43%),
    radial-gradient(circle at 90% -160%, #ff8d7850, transparent 58%),
    #0c111a;
  border-bottom-color: var(--line);
}
.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(var(--pink), var(--sunset));
}
.band-copy { flex-basis: 520px; }
.band-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  color: #ff9dbf;
  font: 700 9px var(--mono);
  letter-spacing: .15em;
}
.band-kicker::before { content: ""; width: 14px; height: 2px; background: var(--pink); }
.band-intro { color: var(--dim); font-size: 12px; line-height: 1.55; }
.band-side { position: relative; }
.countdown {
  min-width: 146px;
  padding: 9px 14px 10px;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  border-radius: 7px;
  background: #131a25c9;
  border-color: #ff8d7840;
  box-shadow: 0 0 30px -20px var(--sunset);
}
.cd-label { color: #c79790; font: 9px var(--mono); letter-spacing: .09em; }
.cd-value {
  color: #ffd6bd;
  font: 800 24px/1 var(--display);
  letter-spacing: -.01em;
}
.countdown.is-today { border-color: var(--cyan); }
.band-legal { color: var(--dim-2); font-size: 10px; }

/* The map is a framed instrument panel, not a rectangular embed. */
.stage { grid-template-columns: minmax(0, 1fr) 392px; }
.map-wrap {
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 40%, #173040 0, #0a1420 62%, #070d16 100%);
}
.map-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 440;
  pointer-events: none;
  background:
    linear-gradient(#ffffff03 1px, transparent 1px),
    radial-gradient(ellipse at center, transparent 45%, #03070d75 100%);
  background-size: 100% 4px, 100% 100%;
  opacity: .45;
}
.map-wrap.is-real::after { opacity: .18; }
#map { background-color: transparent; }
.leaflet-image-layer.basemap { filter: brightness(.9) saturate(.96); }
body.is-bright .leaflet-image-layer.basemap { filter: brightness(1.03) saturate(1.04); }
.map-reader { top: 18px; left: 18px; }
.map-view-tabs {
  gap: 2px;
  padding: 3px;
  border-radius: 7px;
  background: #080e17e8;
  border-color: #3b4c60;
  box-shadow: 0 10px 28px -14px #000;
}
.map-view-tabs button {
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 4px;
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .03em;
}
.map-view-tabs button[aria-pressed="true"] {
  color: #fff;
  background: #492039;
  box-shadow: inset 0 -2px 0 var(--pink);
}
.map-view-tabs button[data-map-view="source"][aria-pressed="true"] {
  background: #222c3a;
  box-shadow: inset 0 -2px 0 #738197;
}
.map-view-note {
  margin-top: 7px;
  padding: 4px 7px;
  border-left: 2px solid #486071;
  border-radius: 0 4px 4px 0;
  background: #080e17d9;
  color: #a7b7c9;
  font-size: 10px;
}
.map-legend {
  left: 18px;
  bottom: 70px;
  padding: 6px 9px;
  border-radius: 5px;
  background: #080e17e8;
  border-color: #344657;
  color: #b2c0cf;
  font-size: 10px;
}
.legend-pin { border-color: var(--pink); box-shadow: 0 0 8px #ff4d9480; }
.region-label-copy {
  padding: 3px 8px;
  border: 1px solid #5b778055;
  border-left: 2px solid #9de4dc;
  border-radius: 3px;
  background: #07131ee8;
  color: #f0f8f7;
  box-shadow: 0 4px 16px #0006;
  font: 650 11px/19px var(--font);
  letter-spacing: .025em;
}
.region-entry-link {
  border-radius: 6px;
  background: #09121ded;
  border-color: #42606e;
  box-shadow: 0 8px 24px -10px #000;
}
.region-entry-link:hover { background: #241729; border-color: var(--pink); }
.region-entry-link b { border-radius: 4px; background: #ff4d9420; color: #ffb0ce; }
.map-tools {
  left: 18px;
  bottom: 18px;
  gap: 0;
  padding: 3px;
  overflow: hidden;
  border: 1px solid #3a4a5d;
  border-radius: 8px;
  background: #080e17ed;
  box-shadow: 0 14px 34px -16px #000;
  backdrop-filter: blur(12px);
}
.tool {
  min-height: 42px;
  padding: 7px 12px;
  border: 0;
  border-right: 1px solid #263344;
  border-radius: 4px;
  background: transparent;
  color: #aab7c8;
  font-size: 11px;
  backdrop-filter: none;
}
.tool:last-child { border-right: 0; }
.tool:hover { color: #fff; background: #ffffff09; border-color: #263344; }
.tool[aria-pressed="true"] {
  color: var(--cyan);
  background: #43e8d40c;
  border-color: #263344;
}
.tool svg { width: 14px; height: 14px; }
.leaflet-top.leaflet-right { top: 14px; right: 14px; }
.leaflet-bar.leaflet-control-zoom { border-color: #3a4a5d; border-radius: 7px; }
.leaflet-bar.leaflet-control-zoom a {
  width: 34px;
  height: 32px;
  line-height: 32px;
  background: #080e17ed;
  color: #c2cddb;
}
.leaflet-bar.leaflet-control-zoom a:hover { background: #1a2634; color: var(--cyan); }
.map-switch, .map-credit { background: #080e17ed; border-color: #3a4a5d; }
.map-switch .seg.is-on { background: var(--cyan); }

/* Numbered targets and the selection card. */
.pin {
  border-radius: 6px;
  background: #130f1a;
  border-color: var(--pink);
  box-shadow: 0 3px 12px #000b, 0 0 0 3px #ff4d9418;
  font: 750 10px var(--mono);
  transform: rotate(-3deg);
}
.pin span { transform: rotate(3deg); }
.pin-wrap:hover .pin { transform: rotate(-3deg) scale(1.18); }
.pin.is-found { background: var(--cyan); border-color: var(--cyan); }
.pin-wrap.is-active .pin {
  background: var(--pink);
  box-shadow: 0 0 0 4px #ff4d9438, 0 0 22px #ff4d9455;
}
.detail {
  left: 18px;
  bottom: 76px;
  border: 1px solid #425066;
  border-top: 2px solid var(--pink);
  border-radius: 9px;
  background: #0b111bf5;
  box-shadow: 0 26px 80px -20px #000;
}
.detail-inner { padding: 17px; }
.detail-num {
  border-radius: 6px;
  background: var(--pink);
  border-color: var(--pink);
  color: #fff;
  font: 800 13px var(--mono);
}
.detail h2 { font: 750 20px/1.15 var(--display); letter-spacing: -.01em; }
.detail .region { color: #9eacbd; }
.detail-close { width: 30px; height: 30px; border-radius: 5px; }
.fact dt { color: #77869b; font: 9px var(--mono); }
.fact dd { color: #d5dce7; }
.mark {
  min-height: 44px;
  border-radius: 6px;
  background: #43e8d414;
  color: #b8fff5;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}
.step { border-radius: 6px; }
.video-link { border-radius: 5px; }

/* Collection panel: one clear task, with a proper search and tappable rows. */
.panel {
  background: linear-gradient(180deg, #111722, #0c1119 45%);
  border-left-color: #2a3546;
  box-shadow: -18px 0 50px -40px #000;
}
.panel-head { padding: 22px 20px 0; border-bottom: 0; }
.list-controls { padding: 0 20px 14px; border-bottom: 1px solid var(--line); }
.panel-head h1 {
  max-width: 330px;
  font: 800 28px/1.03 var(--display);
  letter-spacing: -.025em;
}
.panel-head h1::before {
  content: "LEONIDA / FIELD GUIDE";
  display: block;
  margin-bottom: 9px;
  color: var(--pink);
  font: 700 9px var(--mono);
  letter-spacing: .12em;
}
.lede { color: var(--dim); font-size: 12px; line-height: 1.55; }
.search-row { margin-top: 17px; }
.search {
  min-height: 46px;
  padding: 9px 12px;
  gap: 10px;
  border-radius: 7px;
  background: #080d15;
  border-color: #303d50;
  box-shadow: 0 1px 0 #ffffff05 inset;
}
.search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px #43e8d411; }
.search svg { stroke: #718197; }
.search input { font-size: 13px; }
kbd { border-radius: 3px; background: #141b26; }
.chips {
  gap: 3px;
  margin-top: 11px;
  padding: 3px;
  border: 1px solid #283446;
  border-radius: 7px;
  background: #0a0f17;
}
.chip {
  flex: 1;
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: 4px;
  color: #8e9bad;
  font-size: 11px;
}
.chip:hover { color: #fff; background: #ffffff08; }
.chip.is-on {
  color: #fff;
  background: #283244;
  border: 0;
  box-shadow: inset 0 -2px 0 var(--pink);
}
.list { padding: 7px 9px 20px; scrollbar-color: #344154 transparent; scrollbar-width: thin; }
.group {
  padding: 14px 11px 8px;
  background: #0d131cf2;
  backdrop-filter: blur(10px);
  box-shadow: none;
  color: #8290a4;
  font: 700 9px var(--mono);
  letter-spacing: .13em;
}
.group::after { background: #2a3544; }
.row {
  grid-template-columns: minmax(0, 1fr) 46px;
  gap: 2px;
  margin-bottom: 3px;
  padding: 3px 4px 3px 10px;
  border: 1px solid #202b3a;
  border-radius: 7px;
  background: #121925a8;
}
.row:hover { background: #192231; border-color: #354458; }
.row.is-active { background: #251a2a; border-color: #ff4d9470; }
.row.is-active::before { background: var(--pink); }
.row.is-found { background: #0f1c20; border-color: #25433f; }
.row.is-found .row-name { color: #738b8b; }
.row-open { min-height: 50px; grid-template-columns: 29px minmax(0, 1fr); gap: 10px; }
.row-num {
  width: 29px;
  height: 29px;
  border-radius: 5px;
  background: #1b2330;
  border-color: #334154;
  color: #b6c1d0;
  font: 700 10px var(--mono);
}
.row.is-active .row-num { background: var(--pink); border-color: var(--pink); color: #fff; }
.row-name { font-size: 13px; font-weight: 600; }
.row-sub { color: #718096; font-size: 10px; }
.check { width: 46px; height: 48px; }
.check-box { width: 22px; height: 22px; border-radius: 5px; border-color: #46546a; }
.panel-foot {
  padding: 12px 20px 15px;
  background: #090e16;
  border-top-color: #253042;
  font-size: 10px;
}
.panel-foot .legal { color: #a4afbe; }
.panel-foot .site-links span { color: #68768b; }

/* House advertising stays quiet and visually separate from game controls.
   On the tracker it sits after the list, so it never interrupts the search. */
.panel > .ad-slot { padding: 0 20px 12px; }
.panel > .ad-slot .ad {
  align-items: center;
  padding: 7px 10px;
  border-style: solid;
  border-color: #2b3748;
  background: #0c131d;
}
.panel > .ad-slot .ad-house {
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.panel > .ad-slot .ad-house strong { font-size: 11px; }
.panel > .ad-slot .ad-house span { display: none; }
.panel > .ad-slot .ad-house em { font-size: 10px; }
.ad { border-radius: 6px; background: #111823; border-color: #364255; }
.ad-house em { color: var(--cyan); }
.toast { border-radius: 7px; background: #111a26f5; border-color: #405069; }
.mobile-list-link, .mobile-map-link { display: none; }

/* Reference pages use the same field-guide language as the tracker. */
.panel-doc { padding: 24px 24px 0; scrollbar-color: #344154 transparent; scrollbar-width: thin; }
.crumbs { font: 10px var(--mono); color: #7c899c; }
.crumbs a { color: #a0adbf; }
.panel-doc h1 {
  margin-top: 17px;
  font: 800 32px/1.04 var(--display);
  letter-spacing: -.028em;
}
.panel-doc .lede { font-size: 13px; line-height: 1.65; }
.prose { color: #c1cbd9; font-size: 13px; line-height: 1.75; }
.prose h2 {
  margin-top: 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid #273244;
  color: #ff9dbf;
  font: 700 10px var(--mono);
  letter-spacing: .13em;
}
.prose h2::before { content: "// "; color: #59677b; }
.prose a { color: var(--cyan); }
.spec { border-color: #2b3748; }
.spec > div { border-top-color: #202a38; padding: 10px 0; }
.spec dt { color: #7f8da1; font-size: 11px; }
.spec dd { color: #e0e5ed; }
.evidence-status { border-radius: 5px; background: #ffca6a0c; color: #e8c88f; }
.evidence {
  border-radius: 8px;
  background: #121a26;
  border-color: #2c384a;
}
.evidence h2 { font-family: var(--display); font-size: 17px; }
.nearby a, .acard, .directory-search {
  border-radius: 7px;
  background: #121a26;
  border-color: #2c394b;
}
.nearby a:hover, .acard:hover { background: #192332; border-color: #4a5b72; }
.acard { overflow: hidden; }
.acard img { filter: saturate(.85) brightness(.88); transition: filter .2s, transform .3s; }
.acard:hover img { filter: saturate(1.05) brightness(1); transform: scale(1.025); }
.acard-body { padding: 11px 12px 12px; }
.acard-body b { font-size: 13px; }
.acard-body em { color: #8694a8; }
.directory-search { box-shadow: inset 3px 0 0 var(--pink); }
.directory-search input, .directory-search select, .directory-search button { border-radius: 5px; }
.directory-search button { background: #1a2432; }
.region-nav a { border-radius: 6px; background: #121a26; }
.plist li, .basis li { border-top-color: #202a38; }
.plist a { min-height: 42px; align-items: center; }
.agroup h2 { font-family: var(--display); font-size: 16px; }
.doc-pin .pin { border-radius: 50%; }
.doc-pin.is-near .pin { transform: none; }
.doc-pin.is-near:hover .pin { transform: scale(1.5); }

/* Long-form reality report. */
.reality-main { background: radial-gradient(60% 30% at 20% 0%, #ff4d940c, transparent 70%); }
.rwrap { max-width: 960px; padding-top: 30px; }
.reality h1 {
  max-width: 780px;
  font: 800 clamp(34px, 4.5vw, 52px)/.98 var(--display);
  letter-spacing: -.035em;
}
.reality .lede { color: #b5c0cf; }
.rstats { border-color: #2c3748; }
.rstats > div { border-left-color: #2c3748; }
.rstats b { color: #fff; font-family: var(--display); }
.rstats > div:first-child b { color: var(--pink); }
.rmap { border-radius: 9px; background: #0a111b; border-color: #2d3a4b; }
.rsec > h2 { color: #ff9dbf; font-family: var(--mono); }
.rfinding h3 { font-family: var(--display); font-size: 19px; }
.rfinding::before { color: var(--pink); }
.rcta {
  position: relative;
  overflow: hidden;
  border-color: #ff4d9435;
  border-radius: 9px;
  background:
    linear-gradient(115deg, #ff4d941c, transparent 55%),
    #121924;
}
.rcta::after {
  content: "VI";
  position: absolute;
  right: 16px;
  top: -17px;
  color: #ffffff08;
  font: italic 900 104px var(--display);
  transform: skew(-8deg);
  pointer-events: none;
}
.rcta h2, .rcta p, .rbtn { position: relative; z-index: 1; }
.rbtn {
  border-radius: 5px;
  background: var(--pink);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%);
}

/* Compact screens: preserve the map, then keep the actual work controls sticky. */
@media (max-width: 1180px) {
  .stage { grid-template-columns: minmax(0, 1fr) 350px; }
  .topbar { gap: 16px; padding-inline: 16px; }
  .coll { padding-inline: 10px; }
  .panel-head { padding-inline: 17px; }
  .panel-head h1 { font-size: 25px; }
}

@media (max-width: 999px) {
  :root { --bar: 58px; }
  .topbar {
    height: var(--bar);
    gap: 12px;
    padding: 0 14px;
    background: #090e16f5;
  }
  .brand-mark { width: 38px; height: 34px; }
  .brand-mark::before { font-size: 26px; }
  .brand-text strong { font-size: 15px; }
  .collections { order: initial; width: auto; }
  .coll { min-height: 44px; align-self: center; padding: 0 10px; }
  .coll[aria-current="page"]::before { left: 8px; right: 8px; }
  .actions { margin-left: auto; gap: 8px; }
  .spoiler { min-height: 36px; }
  .btn, .lang { min-height: 38px; }
  .notice { padding: 7px 14px; font-size: 11px; }
  .band {
    min-height: 0;
    padding: 11px 14px 10px;
    gap: 8px 16px;
  }
  .band-copy { flex-basis: 360px; }
  .band-intro { font-size: 11.5px; }
  .band-side { flex: 0 0 auto; }
  .countdown { min-width: 128px; padding: 7px 11px; }
  .cd-value { font-size: 20px; }
  .band-legal { font-size: 9.5px; }
  .stage { display: flex; flex-direction: column; }
  .map-wrap, .stage-doc .map-wrap {
    order: 1;
    height: 62svh;
    min-height: 480px;
    max-height: 640px;
  }
  .stage-doc .map-wrap { height: 48svh; min-height: 390px; }
  #map { top: 76px; bottom: 70px; }
  .map-reader { top: 10px; left: 12px; max-width: calc(100% - 96px); }
  .stage-doc .map-reader { max-width: calc(100% - 24px); }
  /* Phone region labels use both edge columns. Pinch zoom and Fit remain
     available; removing the two desktop buttons keeps every region tappable. */
  .stage-doc .leaflet-bar.leaflet-control-zoom { display: none; }
  .map-view-tabs button { min-height: 38px; }
  .leaflet-top.leaflet-right { top: 12px; right: 12px; }
  .leaflet-bar.leaflet-control-zoom { display: block; }
  .leaflet-bar.leaflet-control-zoom a {
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-right: 0;
    border-bottom: 1px solid #263344;
  }
  .leaflet-bar.leaflet-control-zoom a:last-child { border-bottom: 0; }
  .map-view-note { max-width: 82vw; }
  .map-legend { left: 12px; bottom: 62px; max-width: calc(100% - 24px); }
  .map-tools {
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    width: auto;
    padding: 3px;
  }
  .tool {
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 7px 8px;
    gap: 5px;
  }
  .tool span { display: inline; font-size: 10px; }
  .tool svg { flex: none; }
  .map-switch { right: 12px; bottom: 70px; }
  .map-credit { right: 12px; bottom: 122px; }
  .panel { order: 2; border-top: 1px solid #344154; border-left: 0; }
  .panel-head { padding: 22px 16px 0; border-bottom: 0; }
  .panel-head h1 { max-width: none; font-size: 29px; }
  .panel-head h1::before { margin-bottom: 7px; }
  .panel-head .lede { max-width: 68ch; margin-bottom: 16px; }
  .list-controls {
    position: sticky;
    top: 0;
    z-index: 25;
    margin: 0;
    padding: 10px 16px 11px;
    background: #0d141ef5;
    border-top: 1px solid #263244;
    border-bottom: 1px solid #334054;
    backdrop-filter: blur(16px);
  }
  .search-row { margin-top: 0; }
  .search { min-height: 48px; }
  .search input { font-size: 16px; }
  .search kbd { display: none; }
  .chips { margin-top: 8px; }
  .chip { min-height: 36px; }
  .mobile-map-link {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin: -3px 0 5px;
    color: #94a5ba;
    font-size: 11px;
    text-decoration: none;
  }
  .mobile-map-link::before { content: "↑"; margin-right: 6px; color: var(--cyan); }
  .mobile-list-link {
    order: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 8px 16px;
    background: #111a26;
    border-top: 1px solid #334154;
    border-bottom: 1px solid #334154;
    color: #d9e2ed;
    font-size: 12px;
    text-decoration: none;
  }
  .mobile-list-link::after { content: "↓"; color: var(--pink); font-size: 16px; }
  .list { order: 3; overflow: visible; padding: 10px 12px 22px; }
  .row { margin-bottom: 5px; }
  .row-open { min-height: 54px; }
  .row-name { font-size: 14px; }
  .row-sub { font-size: 11px; }
  .check { height: 52px; }
  .panel > .ad-slot { order: 4; padding: 12px 16px 16px; }
  .panel-foot { order: 5; padding: 18px 16px calc(22px + env(safe-area-inset-bottom)); }
  .detail {
    left: 12px;
    right: 12px;
    bottom: 68px;
    width: auto;
    max-height: 62%;
    overflow-y: auto;
  }
  .detail-actions {
    position: sticky;
    bottom: -14px;
    background: #0b111b;
    padding: 10px 0 14px;
  }
  .panel-doc { padding: 22px 18px 0; overflow: visible; }
  .panel-doc h1 { font-size: 30px; }
  .panel-doc .panel-foot { margin-inline: -18px; }
  .directory-jump { min-height: 46px; }
  .reality-main { overflow: visible; }
  .rwrap { padding: 22px 18px 0; }
  .reality h1 { font-size: 36px; }
}

@media (max-width: 700px) {
  .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    height: auto;
    min-height: 58px;
    padding: 8px 12px 0;
    gap: 6px 8px;
  }
  .brand { grid-column: 1; grid-row: 1; height: 42px; }
  .brand-text em { display: block; font-size: 8px; }
  .actions { grid-column: 2; grid-row: 1; justify-self: end; height: 42px; }
  .progress { width: 36px; height: 36px; }
  .spoiler span { display: none; }
  .spoiler { padding: 3px 7px; }
  .spoiler select { max-width: 105px; font-size: 11px; }
  .btn { padding: 7px 10px; }
  .btn span { display: none; }
  .lang { padding-inline: 9px; }
  .collections {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    width: calc(100% + 24px);
    height: 45px;
    margin: 2px -12px 0;
    padding: 0 8px;
    border-top: 1px solid #1d2735;
  }
  .coll { flex: 1 0 auto; justify-content: center; min-height: 45px; padding: 0 12px; }
  .notice { min-height: 36px; }
  .notice b { display: inline-block; }
  .notice p { -webkit-line-clamp: 2; }
  .band { align-items: center; min-height: 58px; padding-block: 10px; }
  .band-copy { flex: 1 1 130px; }
  .band-kicker { margin: 0; font-size: 9px; }
  .band-intro, .band-legal { display: none; }
  .band-side { flex: 0 0 auto; }
  .countdown {
    min-width: 0;
    padding: 0;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .cd-label { max-width: none; font-size: 8px; line-height: 1.35; text-align: right; white-space: nowrap; }
  .cd-value { font-size: 20px; white-space: nowrap; }
  .map-wrap, .stage-doc .map-wrap { height: 61svh; min-height: 450px; }
  .stage-doc .map-wrap { height: 45svh; min-height: 370px; }
  #map { top: 72px; bottom: 68px; }
  .map-view-note { font-size: 9.5px; }
  .map-legend { font-size: 9.5px; }
  .tool span { font-size: 10px; }
  .panel-head { padding-top: 20px; }
  .panel-head h1 { font-size: 28px; }
  .panel-head .lede { font-size: 12px; }
  .fact { grid-template-columns: 1fr; gap: 3px; }
  .detail h2 { font-size: 19px; }
  .rstats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rstats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .rlegend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rplaces { grid-template-columns: 1fr; }
  .reality h1 { font-size: 32px; }
}

@media (max-width: 430px) {
  .topbar { padding-inline: 10px; }
  .collections { width: calc(100% + 20px); margin-inline: -10px; }
  .brand { gap: 7px; }
  .brand-text strong { font-size: 13px; letter-spacing: .1em; }
  .brand-text em { font-size: 7px; letter-spacing: .16em; }
  .brand-mark { width: 32px; }
  .spoiler select { max-width: 78px; }
  .progress { width: 32px; height: 32px; }
  .actions { gap: 4px; }
  .btn { padding-inline: 8px; }
  .lang { padding-inline: 8px; }
  .notice b { font-size: 8px; }
  .map-wrap, .stage-doc .map-wrap { min-height: 440px; }
  .stage-doc .map-wrap { min-height: 360px; }
  .tool { padding-inline: 5px; gap: 4px; }
  .tool svg { width: 12px; height: 12px; }
  .tool span { font-size: 9px; }
  .map-legend { right: 12px; width: fit-content; }
  .region-label-copy { font-size: 10px; }
  .panel-doc h1 { font-size: 28px; }
  .spec > div { grid-template-columns: 82px minmax(0, 1fr); }
  .acards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .brand-text em { display: none; }
  .spoiler select { max-width: 78px; }
  .tool svg { display: none; }
  .tool span { font-size: 10px; }
  .band-kicker { font-size: 8px; letter-spacing: .08em; }
  .cd-label { display: none; }
}

@media (max-width: 350px) {
  .brand-text { display: none; }
  .brand-mark { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .acard img { transition: none; }
  .acard:hover img { transform: none; }
}

/* ── 攻略 ───────────────────────────────────────────────────
   The one page family that is a document rather than a tool. It keeps the
   top bar and the footer so it belongs to the site, and drops the map, the
   list and the HUD so the only thing on screen is the text. Two columns on a
   desktop: prose at a readable measure, contents pinned beside it. */

.guide-main { background: radial-gradient(60% 30% at 20% 0%, #ff4d940c, transparent 70%); }
.gwrap { max-width: 1080px; margin: 0 auto; padding: 26px 26px 40px; }

.guide-head { max-width: 780px; margin-top: 18px; }
.guide-kicker {
  margin: 0 0 10px;
  font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--pink);
}
.guide-head h1 {
  margin: 0;
  font: 800 clamp(32px, 4.4vw, 50px)/.98 var(--display);
  letter-spacing: -.03em; color: var(--ink);
}
.guide-head .lede {
  margin: 14px 0 0; max-width: 62ch;
  font-size: 17px; line-height: 1.62; color: #b5c0cf;
}
.guide-meta {
  margin: 14px 0 0;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--dim-2);
}

.guide-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 248px;
  gap: 46px; align-items: start; margin-top: 32px;
}

.guide-body { font-size: 16.5px; line-height: 1.72; color: #c8d1de; max-width: 68ch; }
.guide-body p { margin: 0 0 16px; }
.guide-body h2 {
  margin: 36px 0 12px;
  font: 800 clamp(22px, 2.4vw, 27px)/1.18 var(--display);
  letter-spacing: -.02em; color: var(--ink);
}
.guide-body h3 { margin: 28px 0 10px; font-size: 18px; font-weight: 750; color: var(--ink); }
.guide-body h4 { margin: 22px 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.guide-body ul, .guide-body ol { margin: 0 0 16px; padding-left: 22px; }
.guide-body li { margin-bottom: 7px; }
.guide-body li::marker { color: var(--pink); }
.guide-body a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid #2ae7d440; }
.guide-body a:hover { border-bottom-color: var(--cyan); }
.guide-body strong { color: var(--ink); font-weight: 650; }
.guide-body em { color: #dbe3ee; }
.guide-body img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 18px 0; }
.guide-body blockquote {
  margin: 22px 0; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--pink);
  color: #dbe3ee; font-size: 17px; font-style: italic;
}
.guide-body blockquote p { margin: 0; }
.guide-body hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line); }
.guide-body code {
  padding: 1px 5px; border-radius: 4px;
  background: #131a25; border: 1px solid #1e2836;
  font: 500 13px/1.5 var(--mono); color: #ffb7d0;
}
.guide-code { margin: 0 0 18px; }
.guide-code pre {
  margin: 0; padding: 14px 16px; overflow-x: auto;
  border: 1px solid var(--line); border-radius: 8px; background: #0a0f18;
}
.guide-code code { padding: 0; border: 0; background: none; color: #a9b6c8; font-size: 12.5px; line-height: 1.62; }

.guide-table { margin: 0 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.guide-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.guide-table th {
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: #131a25;
  font: 650 10px/1.4 var(--mono); letter-spacing: .09em; text-transform: uppercase; color: #dbe3ee;
  white-space: nowrap;
}
.guide-table td { padding: 9px 12px; border-top: 1px solid #1b2331; vertical-align: top; }
.guide-table tr:first-child td { border-top: 0; }

.guide-callout {
  margin: 22px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--violet);
  border-radius: 0 8px 8px 0; background: #0e1720;
}
.guide-callout.is-info { border-left-color: var(--violet); }
.guide-callout.is-tip { border-left-color: var(--cyan); }
.guide-callout.is-warn { border-left-color: var(--amber); }
.guide-callout.is-danger { border-left-color: var(--pink); }
.guide-callout-title {
  margin: 0 0 7px !important;
  font: 700 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
}
.guide-callout p:last-child, .guide-callout ul:last-child, .guide-callout ol:last-child { margin-bottom: 0; }
.guide-callout ul, .guide-callout ol { margin-bottom: 0; }

.guide-accordion {
  margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: #0d1420;
}
.guide-accordion summary {
  display: flex; gap: 9px; align-items: baseline;
  padding: 12px 15px; cursor: pointer; list-style: none;
  font-size: 14.5px; font-weight: 650; color: var(--ink);
}
.guide-accordion summary::-webkit-details-marker { display: none; }
.guide-accordion summary::before {
  content: "▸"; color: var(--pink); font-size: 11px;
  transition: transform .18s ease; transform-origin: 50% 45%;
}
.guide-accordion[open] summary::before { transform: rotate(90deg); }
.guide-accordion-body { padding: 0 15px 4px 33px; font-size: 15px; }
.guide-accordion-body p:last-child { margin-bottom: 12px; }

.guide-stat {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: baseline;
  margin: 20px 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: 8px; background: #0d1420;
}
.guide-stat div { min-width: 0; }
.guide-stat span { display: block; font-size: 13.5px; color: var(--ink); font-weight: 650; }
.guide-stat em { font-style: normal; font: 10.5px var(--mono); color: var(--dim-2); }
.guide-stat b { font: 800 20px var(--display); color: var(--pink); }
.guide-stat i {
  grid-column: 1 / -1; display: block; height: 5px; border-radius: 99px;
  background: #1b2331; overflow: hidden; position: relative;
}
.guide-stat i::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--value, 0%);
  background: linear-gradient(90deg, var(--pink), var(--sunset));
}

.guide-video {
  display: inline-flex; gap: 10px; align-items: center;
  margin: 4px 0 20px; padding: 10px 17px;
  border: 1px solid #ff4d9440; border-radius: 999px; background: #ff4d9412;
  color: #fff; font-size: 13.5px; font-weight: 650; text-decoration: none;
}
.guide-video span { color: var(--pink); font-size: 11px; }
.guide-video:hover { background: #ff4d9422; border-color: #ff4d9470; }

.guide-affiliate {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  margin: 22px 0; padding: 14px 16px;
  border: 1px dashed var(--line-2); border-radius: 8px; background: #0b121c;
}
.guide-affiliate strong { display: block; font-size: 13.5px; color: var(--ink); }
.guide-affiliate span { font-size: 12.5px; color: var(--dim); }
.guide-affiliate .guide-sponsored {
  display: inline-block; margin-left: 8px; padding: 1px 6px; border-radius: 3px;
  background: #ff4d9420; color: var(--pink);
  font: 700 8.5px var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.guide-affiliate a {
  padding: 8px 15px; border-radius: 999px; background: var(--pink);
  color: #14060d; font-size: 12.5px; font-weight: 750; text-decoration: none; white-space: nowrap;
}
.guide-component { margin: 0 0 16px; }

.guide-cta {
  margin: 36px 0 0; padding: 22px 24px; overflow: hidden;
  border: 1px solid #ff4d9435; border-radius: 12px;
  background: linear-gradient(120deg, #1b0f1a, #0c1520 62%);
}
.guide-cta h2 { margin: 0 0 8px; font: 800 22px var(--display); letter-spacing: -.02em; color: #fff; }
.guide-cta p { margin: 0 0 16px; font-size: 14px; color: #b5c0cf; max-width: 52ch; }
.gbtn {
  display: inline-block; padding: 11px 20px; border-radius: 999px;
  background: var(--pink); color: #14060d;
  font-size: 13px; font-weight: 800; letter-spacing: .01em; text-decoration: none;
}
.gbtn:hover { background: #ff6ba6; }
.guide-back { margin: 20px 0 0; font-size: 13px; }
.guide-back a { color: var(--dim); text-decoration: none; border: 0; }
.guide-back a:hover { color: var(--cyan); }

.guide-aside { position: sticky; top: calc(var(--bar) + 18px); }
.guide-aside:empty { display: none; }
.guide-toc { padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #0c131d; }
.guide-toc > p {
  margin: 0 0 9px; font: 700 9.5px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase; color: var(--dim-2);
}
.guide-toc ol { margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.guide-toc li { margin-bottom: 7px; line-height: 1.4; }
.guide-toc li.is-h3 { padding-left: 11px; font-size: 12px; }
.guide-toc a { color: var(--dim); text-decoration: none; }
.guide-toc a:hover { color: var(--cyan); }

.guide-foot { margin-top: 44px; padding: 16px 0 0; border-top: 1px solid var(--line); }

.guide-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 28px; }
.guide-card {
  display: flex; gap: 14px; padding: 14px;
  border: 1px solid var(--line); border-radius: 12px; background: #0d1420;
  text-decoration: none; color: inherit; transition: border-color .18s, background .18s;
}
.guide-card:hover { border-color: #ff4d9455; background: #111a27; }
.guide-card-art {
  flex: 0 0 88px; height: 88px; border-radius: 8px;
  background-size: cover; background-position: center;
}
.guide-card h2 { margin: 0 0 6px; font: 750 17px/1.22 var(--display); color: var(--ink); }
.guide-card p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.guide-card-kicker { margin: 0 0 5px; font: 700 9px/1 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--pink); }
.guide-card-meta { font: 500 10px/1.4 var(--mono); color: var(--dim-2); }

@media (max-width: 999px) {
  .gwrap { padding: 20px 18px 34px; }
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 26px; }
  .guide-aside { display: none; }
  .guide-body { font-size: 16px; max-width: none; }
}

@media (max-width: 700px) {
  .guide-head h1 { font-size: 33px; }
  .guide-head .lede { font-size: 15.5px; }
  .guide-body { font-size: 15.5px; line-height: 1.7; }
  .guide-body h2 { margin-top: 30px; font-size: 22px; }
  .guide-body blockquote { font-size: 15.5px; }
  .guide-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .guide-card-art { flex-basis: 68px; height: 68px; }
  .guide-cta { padding: 18px; }
  .guide-cta h2 { font-size: 19px; }
  .guide-stat { grid-template-columns: 1fr auto; }
}

@media (max-width: 430px) {
  .gwrap { padding: 16px 14px 28px; }
  .guide-head h1 { font-size: 28px; letter-spacing: -.025em; }
  .guide-card { gap: 11px; padding: 12px; }
  .guide-card-art { flex-basis: 56px; height: 56px; }
  .guide-card h2 { font-size: 15.5px; }
}

/* Five tabs (two collections, three reference pages) do not fit beside the
   brand below ~1100px. The collection counts are the least useful thing in the
   bar — the list header states them — so they go first and the tabs stay
   readable. Below ~700px the strip scrolls, which is the only honest option
   left for five labels on a phone. */
@media (max-width: 1100px) {
  .coll .n { display: none; }
  .coll { padding-inline: 9px; }
}

@media (max-width: 430px) {
  /* Five labels on a 360px strip: 8px of side padding and half a point of type
     is the difference between "Guides" being visible and being a scroll away. */
  .coll { padding-inline: 8px; font-size: 11.5px; letter-spacing: .02em; }
}

@media (max-width: 430px) {
  /* Five labels on a 360px strip: 8px of side padding and half a point of type
     is the difference between "Guides" being visible and being a scroll away. */
  .coll { padding-inline: 8px; font-size: 11.5px; letter-spacing: .02em; }
}

@media (max-width: 365px) {
  .coll { padding-inline: 6px; font-size: 11px; }
}

@media (max-width: 365px) {
  .coll { padding-inline: 6px; font-size: 11px; }
}

/* The quick answer sits above the prose, not inside it: it is the paragraph an
   AI overview quotes and a reader skims before deciding to read on. A callout
   would read as a warning; this is the answer, so it gets its own frame. */
.guide-answer {
  margin: 0 0 26px; padding: 15px 18px;
  border: 1px solid #43e8d43d; border-radius: 10px;
  background: linear-gradient(120deg, #0c1b1e, #0c1520 72%);
}
.guide-answer-label {
  margin: 0 0 7px;
  font: 700 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--cyan);
}
.guide-answer p:last-child { margin: 0; font-size: 17px; line-height: 1.62; color: #e2e9f2; }

.guide-faq-block { margin: 40px 0 0; }
.guide-faq-block > h2 {
  margin: 0 0 4px;
  font: 800 clamp(22px, 2.4vw, 27px)/1.18 var(--display);
  letter-spacing: -.02em; color: var(--ink);
}
.guide-faq-block > h2 + .guide-faq { margin-top: 14px; }
.guide-faq summary::before { color: var(--cyan); }

@media (max-width: 700px) {
  .guide-answer p:last-child { font-size: 16px; }
  .guide-faq-block { margin-top: 32px; }
}

/* ── 404 页 ────────────────────────────────────────────────────────────────
   Served at whatever URL was missed, so this page cannot rely on being one
   level deep. Everything it loads is absolute; these rules only lay it out. */
.nf-main { min-height: 60vh; display: flex; align-items: center; padding: 48px 24px 32px; }
.nf-wrap { width: 100%; max-width: 620px; margin: 0 auto; }
.nf-code {
  margin: 0; font: 800 64px/1 var(--display); letter-spacing: -.03em;
  color: #1b2534; user-select: none;
}
.nf-wrap h1 { margin: 6px 0 0; font: 750 26px/1.2 var(--display); color: var(--ink); }
.nf-zh { margin: 6px 0 0; font-size: 14px; color: var(--dim); }
.nf-lede { margin: 14px 0 0; font-size: 15px; line-height: 1.65; color: var(--dim); }
.nf-cta { margin: 20px 0 0; }
.nf-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.nf-links a {
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: #0d1420; color: var(--ink); font-size: 13px; font-weight: 600;
  text-decoration: none; transition: border-color .18s, background .18s;
}
.nf-links a:hover { border-color: #ff4d9455; background: #111a27; }
.nf-links em { font-style: normal; font-weight: 400; color: var(--dim-2); margin-left: 4px; }
.nf-note { margin: 24px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--dim-2); }
.nf-note a { color: var(--cyan); text-decoration: none; }
.nf-foot {
  padding: 22px 24px 34px; max-width: 620px; margin: 0 auto;
  border-top: 1px solid var(--line); color: var(--dim-2); font-size: 12px; line-height: 1.6;
}
.nf-foot p { margin: 0 0 6px; }
@media (max-width: 520px) {
  .nf-code { font-size: 48px; }
  .nf-wrap h1 { font-size: 21px; }
  .nf-main { padding: 32px 18px 24px; }
}