/* ==========================================================================
   机场地图（45° 斜鸟瞰）· 场景样式
   昼夜主题：.ap-day / .ap-night 挂在 #apStage 上，SVG 全部经 CSS 变量着色
   ========================================================================== */

/* ---------- 舞台 ---------- */
.ap-stage {
  position: fixed;
  inset: 0;                   /* 全视口，顶栏浮在场景上 */
  max-width: none;            /* 覆盖 style.css 的 main{max-width:76rem} */
  margin: 0; padding: 0;
  overflow: hidden;
  background: var(--ap-stagebg);
  transition: background .8s ease;
  touch-action: none;
}
#apSvg { width: 100%; height: 100%; display: block; cursor: grab; }
#apSvg:active { cursor: grabbing; }

/* ---------- 主题变量 ---------- */
.ap-day {
  --ap-stagebg: #a9c3de;
  --ap-sky1: #7fb2e0; --ap-sky2: #cfe5f7;
  --ap-earth: #8aa96b; --ap-field1: #7d9f5c; --ap-field2: #93b474; --ap-field3: #6f9257;
  --ap-grass: #82a362; --ap-strip: #8fae6e;
  --ap-hills: #6e8fa8;
  --ap-water: #7fa8c0; --ap-road2: #90959a;
  --ap-field4: #b8a06a; --ap-field5: #5f8250; --ap-tree: #4e6e3e;
  --ap-forest: #47623b;
  --ap-croprow: rgba(56, 74, 40, .3); --ap-fieldbd: rgba(30, 45, 20, .16);
  --ap-citywall: #b9c2cb; --ap-cityroof: #9aa6b1;
  --ap-asphalt1: #50545a; --ap-asphalt2: #45484e;
  --ap-shoulder: #5c6066; --ap-blast: #5c6066;
  --ap-concrete: #a9adb0; --ap-concrete2: #9b9fa3;
  --ap-pad: #b7bab0;
  --ap-mark: #f4f4ee; --ap-marky: #e8c33c; --ap-markr: #d84b3f;
  --ap-glass1: #9fc6dd; --ap-glass2: #5f87a3;
  --ap-bldgwall: #d8d4c8; --ap-bldgroof: #b5b0a2;
  --ap-shadow: rgba(30, 40, 30, .25);
  --ap-chips-bg: rgba(20, 26, 32, .78);
  --ap-chips-fg: #f3f1e6;
}
.ap-night {
  --ap-stagebg: #070d18;
  --ap-sky1: #050a14; --ap-sky2: #0d1626;
  --ap-earth: #131c14; --ap-field1: #152015; --ap-field2: #18251a; --ap-field3: #111b12;
  --ap-grass: #16211a; --ap-strip: #1a2619;
  --ap-hills: #0a1220;
  --ap-water: #0b1520; --ap-road2: #2a2e33;
  --ap-field4: #241f16; --ap-field5: #141d12; --ap-tree: #0e180c;
  --ap-forest: #0b140a;
  --ap-croprow: rgba(0, 0, 0, .4); --ap-fieldbd: rgba(0, 0, 0, .3);
  --ap-citywall: #141a26; --ap-cityroof: #10151f;
  --ap-asphalt1: #26292e; --ap-asphalt2: #20232a;
  --ap-shoulder: #22262c; --ap-blast: #24272c;
  --ap-concrete: #3c4147; --ap-concrete2: #363b41;
  --ap-pad: #33373c;
  --ap-mark: #cfd2cc; --ap-marky: #b99a33; --ap-markr: #9c3d34;
  --ap-glass1: #22303c; --ap-glass2: #131c24;
  --ap-bldgwall: #2b2f36; --ap-bldgroof: #22262c;
  --ap-shadow: rgba(0, 0, 0, .5);
  --ap-chips-bg: rgba(10, 14, 20, .82);
  --ap-chips-fg: #f3f1e6;
}

/* ---------- 天空 / 远景 ---------- */
.ap-sky { fill: var(--ap-sky2); transition: fill .8s; }
.ap-stage.ap-night .ap-sky { fill: var(--ap-sky1); }
.ap-earth { fill: var(--ap-earth); transition: fill .8s; }
.ap-hills { fill: var(--ap-hills); opacity: .55; }
.ap-urban { fill: var(--ap-cityroof); opacity: .5; }
.ap-field-f1 { fill: var(--ap-field1); } .ap-field-f2 { fill: var(--ap-field2); } .ap-field-f3 { fill: var(--ap-field3); }
.ap-grass { fill: var(--ap-grass); }
.ap-strip { fill: var(--ap-strip); }
.ap-field, .ap-grass, .ap-strip { transition: fill .8s; }
.ap-city-wall { fill: var(--ap-citywall); } .ap-city-roof { fill: var(--ap-cityroof); }
.ap-citywin { fill: #ffd98a; opacity: 0; transition: opacity .8s; }
.ap-night .ap-citywin { opacity: .85; }
.ap-star { fill: #e8ecff; opacity: 0; }
.ap-night .ap-star { opacity: .8; animation: ap-twinkle 5s ease-in-out infinite; }
.ap-sun { fill: #fff3c8; } .ap-sun-glow { fill: #fff3c8; opacity: .18; }
.ap-moon { fill: #e8e4d2; opacity: 0; } .ap-moon-glow { fill: #e8e4d2; opacity: 0; }
.ap-night .ap-moon { opacity: .95; } .ap-night .ap-moon-glow { opacity: .16; }
.ap-day .ap-sun, .ap-day .ap-sun-glow { opacity: 1; }
.ap-night .ap-sun, .ap-night .ap-sun-glow { opacity: 0; }
.ap-cloud ellipse { fill: #ffffff; opacity: .55; }
.ap-night .ap-cloud ellipse { opacity: .07; }
.ap-cloud { animation: ap-drift 120s linear infinite alternate; }

/* ---------- 道面 ---------- */
.ap-rwy { fill: url(#apRwyGrad); }
.ap-shoulder { fill: var(--ap-shoulder); }
.ap-blast { fill: var(--ap-blast); }
.ap-twy { fill: var(--ap-concrete2); }
.ap-apron { fill: var(--ap-concrete); }
.ap-road { fill: var(--ap-asphalt2); }
.ap-carpark { fill: var(--ap-concrete2); opacity: .7; }
.ap-pad { fill: var(--ap-pad); }
.ap-ga-apron { fill: var(--ap-concrete2); }
.ap-rwy, .ap-shoulder, .ap-blast, .ap-twy, .ap-apron, .ap-pad, .ap-ga-apron, .ap-road, .ap-carpark { transition: fill .8s; }
.ap-rubber { fill: #101216; opacity: .13; }
.ap-night .ap-rubber { opacity: .3; }
.ap-oil { fill: #14161a; opacity: .14; }
.ap-fence { fill: none; stroke: var(--ap-bldgroof); stroke-width: .5; stroke-dasharray: 2.5 2; opacity: .7; }
.ap-svcroad { fill: none; stroke: var(--ap-concrete2); stroke-width: 4; opacity: .8; }

/* ---------- 标识 ---------- */
.ap-mark { fill: var(--ap-mark); }
.ap-mark-ring { fill: none; stroke: var(--ap-mark); stroke-width: 2.2; }
.ap-marktext { fill: #ffffff; font-family: "Arial Narrow", "Bahnschrift", sans-serif; font-weight: 700; }
.ap-night .ap-marktext { fill: rgba(255, 255, 255, .94); }
.ap-marky { fill: var(--ap-marky); }
.ap-marky-line { fill: none; stroke: var(--ap-marky); stroke-width: 1.6; }
.ap-markr { fill: var(--ap-markr); }
.ap-gatetext { fill: var(--ap-marky); font-family: "Arial Narrow", sans-serif; font-weight: 700; opacity: .9; }

/* ---------- 灯光 ---------- */
.lt-fix { fill: #3c3f45; stroke: #20232a; stroke-width: .2; }
.ap-night .lt-fix { fill: #1c1f24; }
.lt-glow { opacity: 0; transition: opacity .9s; }
.lt-core { opacity: 0; transition: opacity .9s; }
.ap-night .lt-glow { opacity: 1; }
.ap-night .lt-core { opacity: 1; }
.lt-white.lt-glow, .lt-glow.lt-white { fill: url(#apGlowW); } .lt-core.lt-white { fill: #fffbe8; }
.lt-glow.lt-red { fill: url(#apGlowR); } .lt-core.lt-red { fill: #ff6a5e; }
.lt-glow.lt-green { fill: url(#apGlowG); } .lt-core.lt-green { fill: #7dffa8; }
.lt-glow.lt-yellow { fill: url(#apGlowY); } .lt-core.lt-yellow { fill: #ffe9a3; }
.lt-glow.lt-blue { fill: url(#apGlowB); } .lt-core.lt-blue { fill: #a8ccff; }
.lt-glow.lt-amber { fill: url(#apGlowY); } .lt-core.lt-amber { fill: #ffb347; }
.ap-pool { opacity: 0; transition: opacity 1s; fill: url(#apGlowW); }
.ap-night .ap-pool { opacity: .5; }
.ap-alspost { fill: #4a4d52; }
.ap-rabbit { fill: #fffbe8; opacity: 0; }
.ap-night .ap-rabbit { animation: ap-rabbit 2.4s linear infinite; }
.ap-guard { fill: #ffd75e; opacity: .25; }
.ap-guard.a { animation: ap-guard-a 1.2s steps(1) infinite; }
.ap-guard.b { animation: ap-guard-b 1.2s steps(1) infinite; }
.ap-day .ap-guard { opacity: .55; animation: none; fill: #8a7a30; }

/* PAPI 白天灯盒常显色（PAPI 白天也工作） */
.ap-papi-box { fill: #30343a; stroke: #16181c; stroke-width: .3; }
.ap-day .ap-papi-unit .lt-core { opacity: .9; }
.ap-day .ap-papi-unit .lt-glow { opacity: .12; }

/* ---------- 导航台 ---------- */
.ap-hut, .ap-hutp-wall { fill: var(--ap-bldgwall); } .ap-hutp-roof { fill: var(--ap-bldgroof); }
.ap-loc-ele { fill: #d8d4c8; stroke: #8a8474; stroke-width: .2; }
.ap-night .ap-loc-ele { fill: #3a3e45; }
.ap-gp-mast { fill: #c8c4b8; } .ap-gp-ant { fill: #e8e4d8; stroke: #8a8474; stroke-width: .2; }
.ap-night .ap-gp-mast { fill: #3a3e45; } .ap-night .ap-gp-ant { fill: #464a51; }
.ap-dme-wall { fill: #e8e4d8; } .ap-dme-roof { fill: #d0ccc0; }
.ap-night .ap-dme-wall { fill: #464a51; } .ap-night .ap-dme-roof { fill: #3a3e45; }
.ap-mm-base { fill: var(--ap-pad); } .ap-mm-dome { fill: #e8e4d8; }
.ap-night .ap-mm-dome { fill: #464a51; }
.ap-vor-pad { fill: var(--ap-pad); }
.ap-vor-wall { fill: #e8e4d8; } .ap-vor-roof { fill: #f4f1e6; }
.ap-vor-top { fill: #d8443c; }
.ap-night .ap-vor-wall { fill: #464a51; } .ap-night .ap-vor-roof { fill: #3a3e45; }
.ap-vor-ring .lt-fix { fill: #d8d4c8; }
.ap-ndb-mast { fill: #d8443c; } .ap-ndb-pole { fill: #c8c4b8; } .ap-ndb-wire { fill: #8a8474; }
.ap-night .ap-ndb-mast { fill: #6e2a26; } .ap-night .ap-ndb-pole { fill: #3a3e45; } .ap-night .ap-ndb-wire { fill: #2c3036; }

/* ---------- 塔台 ---------- */
.ap-twrbase-wall { fill: var(--ap-bldgwall); } .ap-twrbase-roof { fill: var(--ap-bldgroof); }
.ap-twr-shaft { fill: #c8c4b8; } .ap-twr-shaft.ap-shade { fill: #a8a498; } .ap-twr-shaft.ap-lit { fill: #e0dccf; }
.ap-night .ap-twr-shaft { fill: #33373d; } .ap-night .ap-twr-shaft.ap-shade { fill: #282c32; } .ap-night .ap-twr-shaft.ap-lit { fill: #3c4148; }
.ap-twr-cabf { fill: var(--ap-bldgroof); }
.ap-twr-glass { fill: url(#apGlassGrad); }
.ap-twr-glass.ap-front { opacity: .92; } .ap-twr-glass.ap-lit { opacity: .8; } .ap-twr-glass.ap-shade { opacity: .7; }
.ap-night .ap-twr-glass { fill: #f5d98a; opacity: .9; } /* 夜里玻璃亭透出暖光 */
.ap-twr-roof { fill: var(--ap-bldgroof); }
.ap-twr-ant { fill: #8a8474; }
/* 塔顶红色障碍灯：白天是灯座，夜里红闪 */
.ap-warn-fix { fill: #3c3f45; }
.ap-warn-glow { fill: url(#apGlowR); opacity: 0; }
.ap-warn-core { fill: #ff6a5e; opacity: 0; }
.ap-night .ap-warn-glow { animation: ap-warnblink 1.6s ease-in-out infinite; }
.ap-night .ap-warn-core { animation: ap-warnblink-c 1.6s ease-in-out infinite; }
/* 滑行道标记牌 */
.ap-sign-mand { fill: #c0392b; stroke: #f4f1e6; stroke-width: .25; }
.ap-sign-loc { fill: #1c1e22; stroke: #e8c33c; stroke-width: .25; }
.ap-sign-dir { fill: #e8c33c; stroke: #1c1e22; stroke-width: .25; }
.ap-night .ap-sign-mand { fill: #6e241c; } .ap-night .ap-sign-loc { fill: #101216; } .ap-night .ap-sign-dir { fill: #8a742a; }

/* ---------- 航站楼 / 机坪 ---------- */
.ap-term-wall { fill: var(--ap-bldgwall); } .ap-term-roof { fill: var(--ap-bldgroof); }
.ap-term-vault { fill: #cfd6dd; stroke: rgba(0, 0, 0, .12); stroke-width: .4; }
.ap-night .ap-term-vault { fill: #3a4149; }
.ap-skylight { stroke: #f4f8fa; stroke-width: 1.4; fill: none; opacity: .8; }
.ap-night .ap-skylight { stroke: #f5d98a; opacity: .5; }
.ap-termw-wall { fill: var(--ap-bldgwall); } .ap-termw-roof { fill: var(--ap-bldgroof); }
.ap-cargo-wall { fill: #c2c8cd; } .ap-cargo-roof { fill: #98a2a9; }
.ap-night .ap-cargo-wall { fill: #363c44; } .ap-night .ap-cargo-roof { fill: #282e35; }
.ap-gtc-wall { fill: var(--ap-bldgwall); } .ap-gtc-roof { fill: var(--ap-glass2); }
.ap-night .ap-gtc-wall { fill: #2b2f36; }
.ap-term-roof2 { fill: var(--ap-bldgroof); opacity: .8; }
.ap-term-win { fill: url(#apGlassGrad); opacity: .85; }
.ap-night .ap-term-win { fill: #f5d98a; opacity: .75; }
.ap-pier-wall { fill: var(--ap-bldgwall); } .ap-pier-roof { fill: var(--ap-bldgroof); }
.ap-park-wall { fill: var(--ap-bldgwall); } .ap-park-roof { fill: var(--ap-bldgroof); }
.ap-veh-bus { fill: #5a9ad0; } .ap-night .ap-veh-bus { fill: #2c4258; }
.ap-bridge { fill: #d8d4c8; } .ap-bridge-side { fill: #b5b0a2; } .ap-bridge-cab { fill: #c8c4b8; } .ap-bridge-leg { fill: #8a8474; }
.ap-night .ap-bridge { fill: #3a3e45; } .ap-night .ap-bridge-side { fill: #2c3036; } .ap-night .ap-bridge-cab { fill: #33373d; }
.ap-flood-pole { fill: #8a8474; } .ap-flood-head { fill: #4a4d52; }
.ap-flood-pool { fill: rgba(255, 246, 214, .05); opacity: 0; }
.ap-night .ap-flood-pool { opacity: 1; }
.ap-car { fill: #c8ccd0; opacity: .9; }
.ap-car-1 { fill: #b8bcc0; } .ap-car-2 { fill: #d0d4d8; } .ap-car-3 { fill: #aeb4ba; } .ap-car-4 { fill: #c4b8a8; }
.ap-night .ap-car { fill: #2c3036; }

/* ---------- 北侧建筑 ---------- */
.ap-hang-wall { fill: var(--ap-bldgwall); } .ap-hang-roof { fill: var(--ap-bldgroof); }
.ap-hang-arch { fill: var(--ap-bldgroof); opacity: .85; }
.ap-hang-door { fill: #6a6e75; } .ap-night .ap-hang-door { fill: #22262c; }
.ap-fire-wall { fill: #c8c0b8; } .ap-fire-roof { fill: #a8a098; }
.ap-night .ap-fire-wall { fill: #3a3e45; } .ap-night .ap-fire-roof { fill: #2c3036; }
.ap-fire-door { fill: #c23b30; } .ap-night .ap-fire-door { fill: #5e201a; }
.ap-firetruck { fill: #d8443c; } .ap-night .ap-firetruck { fill: #6e2a26; }
.ap-bund { fill: none; stroke: var(--ap-bldgroof); stroke-width: 1.4; }
.ap-tank-wall { fill: #e8e4d8; } .ap-tank-roof { fill: #dcd8cc; }
.ap-night .ap-tank-wall { fill: #464a51; } .ap-night .ap-tank-roof { fill: #3a3e45; }

/* ---------- 气象设施 ---------- */
.ap-met-pad { fill: var(--ap-pad); }
.ap-met-box { fill: #e8e4d8; } .ap-met-rain-wall { fill: #d8d4c8; } .ap-met-rain-roof { fill: #c8c4b8; }
.ap-met-mast { fill: #c8c4b8; } .ap-met-cups { fill: none; stroke: #c8c4b8; stroke-width: .5; }
.ap-met-ceil { fill: #d8d4c8; }
.ap-night .ap-met-box, .ap-night .ap-met-ceil { fill: #464a51; }
.ap-night .ap-met-mast { fill: #3a3e45; }
.ap-rvr { fill: #e8e4d8; } .ap-rvr-head { fill: #d0ccc0; }
.ap-night .ap-rvr { fill: #464a51; } .ap-night .ap-rvr-head { fill: #3a3e45; }
.ap-sock-pole { fill: #c8c4b8; }
.ap-sock-ring { fill: none; stroke: #c8c4b8; stroke-width: .35; }
.ap-sock1 { fill: #e8703c; } .ap-sock2 { fill: #f4f1e6; }
.ap-night .ap-sock1 { fill: #7a3c20; } .ap-night .ap-sock2 { fill: #4a4d52; }

/* ---------- 飞机（场景内顶视） ---------- */
.ap-ac-fus { fill: #e8eaec; stroke: #9aa0a6; stroke-width: .18; }
.ap-ac-wing, .ap-ac-tail { fill: #dcdfe2; stroke: #9aa0a6; stroke-width: .18; }
.ap-ac-fin { fill: #c8443c; }
.ap-ac-eng { fill: #c8ccd0; stroke: #8a9096; stroke-width: .18; }
.ap-ac-cockpitwin { fill: #3a4650; }
.ap-ac-navr { fill: #ff4d4d; } .ap-ac-navg { fill: #51e07a; } .ap-ac-navw { fill: #f4f1e6; }
.ap-ac-beaconb { fill: #ff4d4d; opacity: .9; animation: ap-blink 1.4s steps(1) infinite; }
.ap-dim { opacity: .92; }
.ap-night .ap-ac-fus { fill: #565b62; } .ap-night .ap-ac-wing, .ap-night .ap-ac-tail { fill: #4a4f56; }
.ap-night .ap-ac-eng { fill: #3c4147; } .ap-night .ap-ac-fin { fill: #6e2a26; }
.ap-ga-fus { fill: #e8eaec; } .ap-ga-wing { fill: #dcdfe2; } .ap-ga-fin { fill: #3c64b8; } .ap-ga-prop { fill: #4a4d52; }
.ap-night .ap-ga-fus { fill: #565b62; } .ap-night .ap-ga-wing { fill: #4a4f56; }
.ap-veh { fill: #e8c33c; } .ap-veh-cart { fill: #d8d4c8; } .ap-veh-fuel { fill: #e8e4d8; } .ap-veh-fm { fill: #e8c33c; }
.ap-night .ap-veh { fill: #5c5230; } .ap-night .ap-veh-cart, .ap-night .ap-veh-fuel { fill: #3a3e45; }

/* 进近中的飞机 */
.ap-landing-shadow { fill: rgba(0, 0, 0, .28); }
.ap-landlight { fill: url(#apGlowW); }
.ap-strobe-l, .ap-strobe-r { fill: #fff; opacity: 0; animation: ap-strobe 1.6s steps(1) infinite; }
.ap-strobe-r { animation-delay: .18s; }
.ap-ac-fly .ap-ac-fus { fill: #f0f2f4; }
.ap-night .ap-ac-fly .ap-ac-fus { fill: #6a7076; }
.ap-night .ap-ac-fly .ap-ac-wing, .ap-night .ap-ac-fly .ap-ac-tail { fill: #565b62; }

/* ---------- 点击热区 ---------- */
.ap-hit { fill: transparent; pointer-events: all; cursor: pointer; }
.ap-hot-zone { cursor: pointer; }
.ap-hot-zone:hover { filter: brightness(1.12); }

/* ---------- 设施 / 部位标签 chips ---------- */
.ap-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ap-chip {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .45em;
  border: 1px solid rgba(244, 241, 230, .22); border-radius: 999px;
  background: var(--ap-chips-bg); color: var(--ap-chips-fg);
  font-size: 12px; line-height: 1; padding: .5em .9em .5em .5em;
  cursor: pointer; pointer-events: all; white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
  transition: border-color .2s;   /* 不做 transform 过渡——否则拖拽/飞行时标签拖尾漂移 */
}
.ap-chip:hover { border-color: var(--color-accent, #ffd75e); }
.ap-chip::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-accent, #ffd75e); transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(255, 215, 94, .8);
}
.ap-chip-tag {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 10px; letter-spacing: .06em;
  background: var(--color-accent, #ffd75e); color: #1a1a12;
  border-radius: 4px; padding: .28em .5em;
}
.ap-chip-part {
  font-size: 11.5px; padding: .45em .8em;
  background: rgba(20, 26, 32, .66);
  border-color: rgba(244, 241, 230, .3);
  animation: ap-chip-in .3s ease backwards;
}
.ap-chip-part::after { display: none; }
.ap-chip-part:hover { border-color: var(--color-accent, #ffd75e); color: var(--color-accent, #ffd75e); }
.ap-chip.on { border-color: var(--color-accent, #ffd75e); }
/* 注意：部位 chip 的位移动画不能做 transform——会盖住内联定位；只淡入 */

/* ---------- 工具栏（左下角，避开顶栏） ---------- */
.ap-toolbar {
  position: absolute; left: 16px; bottom: 16px; z-index: 30;
  display: flex; gap: 8px;
}
.ap-btn {
  border: 1px solid rgba(244, 241, 230, .25); border-radius: 999px;
  background: var(--ap-chips-bg); color: var(--ap-chips-fg);
  font-size: 12.5px; padding: .55em 1.1em; cursor: pointer;
  backdrop-filter: blur(6px); font-family: inherit;
  transition: border-color .2s, background .2s;
}
.ap-btn:hover { border-color: var(--color-accent, #ffd75e); color: var(--color-accent, #ffd75e); }

/* ---------- 设施目录 ---------- */
.ap-menu {
  position: absolute; left: 16px; bottom: 58px; z-index: 31;
  width: 220px; max-height: 60vh; overflow: auto;
  background: rgba(14, 18, 24, .92); border: 1px solid rgba(244, 241, 230, .18);
  border-radius: 12px; padding: 8px; backdrop-filter: blur(8px);
  display: grid; gap: 2px;
}
.ap-menu[hidden] { display: none; }
.ap-menu-item {
  display: flex; align-items: center; gap: .6em;
  background: none; border: 0; border-radius: 8px;
  color: #f3f1e6; font-size: 12.5px; padding: .55em .6em;
  cursor: pointer; text-align: left; font-family: inherit;
}
.ap-menu-item:hover { background: rgba(255, 215, 94, .12); }

/* ---------- 信息卡 ---------- */
.ap-card {
  position: absolute; right: 16px; bottom: 52px; z-index: 29;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 150px);   /* 链接多的设施（气象区 10 个）可滚动 */
  overflow-y: auto;
  background: rgba(13, 17, 23, .9); border: 1px solid rgba(244, 241, 230, .18);
  border-radius: 14px; backdrop-filter: blur(10px);
  color: #f3f1e6; padding: 16px 18px 14px;
  transform: translateY(12px); opacity: 0; pointer-events: none;
  transition: transform .3s ease, opacity .3s ease;
}
.ap-card.show { transform: none; opacity: 1; pointer-events: all; }
.ap-card-tag {
  font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; letter-spacing: .12em;
  color: var(--color-accent, #ffd75e);
}
.ap-card-title { font-size: 17px; margin: .25em 0 .4em; font-weight: 700; }
.ap-card-desc { font-size: 12.8px; line-height: 1.75; color: #cfcbc0; margin: 0 0 .8em; }
.ap-card-links { display: grid; gap: 6px; margin-bottom: .6em; }
.ap-link {
  display: block; text-align: left;
  background: rgba(255, 215, 94, .12); color: var(--color-accent, #ffd75e);
  border: 1px solid rgba(255, 215, 94, .4); border-radius: 9px;
  font-size: 12.5px; padding: .55em .8em; cursor: pointer; font-family: inherit;
  transition: background .2s;
}
.ap-link:hover { background: rgba(255, 215, 94, .22); }
.ap-soon { font-size: 11.5px; color: #8a867a; border: 1px dashed rgba(244, 241, 230, .25); border-radius: 9px; padding: .5em .8em; display: inline-block; }
.ap-card-parts { border-top: 1px solid rgba(244, 241, 230, .12); padding-top: .7em; }
.ap-card-parts-label { font-size: 10.5px; letter-spacing: .1em; color: #8a867a; margin-bottom: .5em; }
.ap-card-parts-list { display: flex; flex-wrap: wrap; gap: 5px; }
.ap-partchip {
  background: rgba(244, 241, 230, .08); color: #e8e4d8;
  border: 1px solid rgba(244, 241, 230, .2); border-radius: 999px;
  font-size: 11.5px; padding: .35em .75em; cursor: pointer; font-family: inherit;
}
.ap-partchip:hover { border-color: var(--color-accent, #ffd75e); color: var(--color-accent, #ffd75e); }
.ap-card-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: #8a867a; font-size: 14px; cursor: pointer;
}
.ap-card-close:hover { color: #f3f1e6; }

/* ---------- 提示 ---------- */
.ap-hint {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20;
  font-size: 11.5px; color: rgba(243, 241, 230, .75);
  background: rgba(13, 17, 23, .6); border-radius: 999px; padding: .45em 1em;
  backdrop-filter: blur(4px); pointer-events: none;
  white-space: nowrap;
}

/* ---------- 停机位 3D 客机查看器 ---------- */
.p3d {
  position: fixed; inset: 0; z-index: 60;
  background: linear-gradient(180deg, #b8d2e8 0%, #d8e4ee 34%, #e8e6da 55%, #c9cdb9 56%, #a9ad9e 100%);
}
.p3d[hidden] { display: none; }
.p3d-stage { position: absolute; inset: 0; }
.p3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.p3d-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; pointer-events: none;
}
.p3d-title {
  color: #16202b; font-size: 15px; font-weight: 700; letter-spacing: .04em;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.p3d-title span { display: block; font-size: 11.5px; font-weight: 400; color: #3d4a56; margin-top: 2px; }
.p3d-top .ap-btn { pointer-events: auto; }
.p3d-tag {
  position: absolute; z-index: 4; pointer-events: none;
  background: rgba(22, 32, 43, .88); color: #f3f1e6;
  font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 215, 94, .45);
}
.p3d-card {
  position: absolute; right: 18px; bottom: 18px; z-index: 3;
  width: 330px; max-width: calc(100vw - 36px);
  background: rgba(16, 21, 28, .94); border: 1px solid rgba(244, 241, 230, .16);
  border-radius: 14px; padding: 16px 18px; color: #f3f1e6;
  backdrop-filter: blur(8px);
  animation: p3d-card-in .22s ease-out;
}
.p3d-card[hidden] { display: none; }
@keyframes p3d-card-in { from { opacity: 0; transform: translateY(8px); } }
.p3d-card .ap-card-links { margin-top: 10px; }
.p3d-card-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #8a867a; font-size: 13px; cursor: pointer; padding: 4px 6px;
}
.p3d-card-close:hover { color: var(--color-accent, #ffd75e); }
.p3d-fallback {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center;
  background: rgba(13, 17, 23, .55); backdrop-filter: blur(4px);
}
.p3d-fallback[hidden] { display: none; }
.p3d-fallback-box {
  max-width: 420px; margin: 20px; padding: 22px 24px;
  background: rgba(16, 21, 28, .96); border: 1px solid rgba(244, 241, 230, .2); border-radius: 14px;
  color: #f3f1e6;
}
.p3d-fallback-box h3 { margin: 0 0 8px; font-size: 15px; color: var(--color-accent, #ffd75e); }
.p3d-fallback-box p { margin: 0; font-size: 13px; line-height: 1.7; color: #c9c5b8; }

@media (prefers-reduced-motion: reduce) {
  .p3d-card { animation: none; }
}

/* ---------- 图解查看器 ---------- */
.ap-viewer { position: fixed; inset: 0; z-index: 70; background: #0d1117; display: flex; flex-direction: column; }
.ap-viewer[hidden] { display: none; }
.ap-viewer-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid rgba(244, 241, 230, .14);
}
.ap-viewer-title { color: #f3f1e6; font-size: 14px; flex: 1; }
.ap-viewer-frame { flex: 1; border: 0; width: 100%; background: #fff; }
body.ap-lock { overflow: hidden; }

/* ---------- 站内导览面板（左侧偏上，融合场景） ---------- */
.ap-guide {
  position: absolute; left: 16px; top: 88px; z-index: 28;
  width: 292px;
  transition: transform .38s cubic-bezier(.32,.72,.35,1);
}
.ap-guide-body {
  background: rgba(13, 17, 23, .68); border: 1px solid rgba(244, 241, 230, .16);
  border-radius: 14px; backdrop-filter: blur(10px);
  color: #f3f1e6; padding: 14px 12px 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
}
.ap-guide-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
.ap-guide-title {
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; letter-spacing: .18em;
  color: var(--color-accent, #ffd75e);
}
.ap-guide-fold {
  background: none; border: 1px solid rgba(244,241,230,.2); border-radius: 6px;
  color: #8a867a; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 14px;
}
.ap-guide-fold:hover { color: #f3f1e6; border-color: rgba(244,241,230,.45); }
.ap-guide-sub { font-size: 10px; letter-spacing: .12em; color: #8a867a; margin: 2px 4px 10px; }
.ap-guide-nav { display: grid; gap: 2px; }
.ap-guide-nav a {
  display: grid; grid-template-columns: 30px auto 1fr; align-items: baseline; gap: 6px;
  text-decoration: none; color: #e8e4d8; border-radius: 9px; padding: 7px 8px;
  transition: background .18s;
}
.ap-guide-nav a:hover { background: rgba(255, 215, 94, .12); }
.ap-guide-nav .no { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: #8a867a; }
.ap-guide-nav a:hover .no { color: var(--color-accent, #ffd75e); }
.ap-guide-nav .t { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.ap-guide-nav .d { font-size: 10px; color: #9a968a; line-height: 1.4; white-space: nowrap; }
.ap-guide-nav a.here { background: rgba(255, 215, 94, .1); cursor: default; }
.ap-guide-nav a.here .no, .ap-guide-nav a.here .t { color: var(--color-accent, #ffd75e); }
.ap-guide-tab {
  position: absolute; right: -30px; top: 12px; width: 30px;
  border: 1px solid rgba(244,241,230,.2); border-left: 0;
  border-radius: 0 9px 9px 0;
  background: rgba(13, 17, 23, .78); color: var(--color-accent, #ffd75e);
  font-size: 12px; line-height: 1.3; padding: 8px 0; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.ap-guide.mini { transform: translateX(calc(-100% - 16px + 30px)); }
.ap-guide.mini .ap-guide-tab { opacity: 1; pointer-events: all; }
@media (max-width: 1000px) { .ap-guide { display: none; } }

/* ---------- 地景 ---------- */
.ap-river { fill: var(--ap-water); }
.ap-riverbank { fill: var(--ap-field3); opacity: .8; }
.ap-road2 { fill: none; stroke: var(--ap-road2); stroke-width: 7; }
.ap-road2c { fill: none; stroke: var(--ap-mark); stroke-width: .35; stroke-dasharray: 6 8; opacity: .5; }
.ap-highway { fill: none; stroke: var(--ap-asphalt2); stroke-width: 15; }
.ap-highway-c { fill: none; stroke: var(--ap-marky); stroke-width: .4; stroke-dasharray: 8 10; opacity: .7; }
.ap-rail { fill: none; stroke: #6a6e75; stroke-width: 4.5; }
.ap-rail-c { fill: none; stroke: #3c3f45; stroke-width: .8; stroke-dasharray: 1.2 2.2; }
.ap-night .ap-rail { stroke: #22262c; } .ap-night .ap-rail-c { stroke: #14161a; }
.ap-field-f4 { fill: var(--ap-field4); } .ap-field-f5 { fill: var(--ap-field5); }
.ap-field { stroke: var(--ap-fieldbd); stroke-width: 1; }
.ap-croprow { fill: none; stroke: var(--ap-croprow); stroke-width: 1.1; }
.ap-forest { fill: var(--ap-forest); }
.ap-pylon { fill: #4a4d52; } .ap-night .ap-pylon { fill: #1c1f24; }
.ap-bale { fill: #c8b078; } .ap-night .ap-bale { fill: #38301e; }
.ap-train-body { fill: #3c3f45; stroke: rgba(0,0,0,.3); stroke-width: .2; }
.ap-night .ap-train-body { fill: #14161a; }
.ap-trainwin { fill: #ffd98a; opacity: 0; } .ap-night .ap-trainwin { opacity: .9; }
.ap-tree { fill: var(--ap-tree); }
.ap-farm-wall { fill: var(--ap-bldgwall); } .ap-farm-roof { fill: #a8785c; }
.ap-night .ap-farm-wall { fill: #2b2f36; } .ap-night .ap-farm-roof { fill: #3a2c22; }
.ap-shed-wall { fill: #b8bcc0; } .ap-shed-roof { fill: #8a9096; }
.ap-night .ap-shed-wall { fill: #33373d; } .ap-night .ap-shed-roof { fill: #22262c; }
/* 公路汽车 */
.ap-carbody { fill: #c8ccd0; stroke: rgba(0,0,0,.25); stroke-width: .15; }
.ap-carbody-b { fill: #4a6ac8; } .ap-carbody-r { fill: #c84a3c; } .ap-carbody-y { fill: #d8b83c; }
.ap-night .ap-carbody { fill: #22262c; }
.ap-carlight { opacity: 0; }
.ap-night .ap-carlight.f { fill: #fffbe8; opacity: .95; }
.ap-night .ap-carlight.r { fill: #ff4d4d; opacity: .9; }

/* ---------- 程序轨迹虚线（可见线 + 透明宽命中带双 path） ---------- */
.ap-traj { fill: none; stroke: rgba(255, 255, 255, .62); stroke-width: 1.6; stroke-dasharray: 8 7; stroke-linejoin: round;
  pointer-events: stroke; cursor: pointer;
  transition: stroke .2s ease-out, stroke-width .2s ease-out, filter .2s ease-out; }
.ap-night .ap-traj { stroke: rgba(178, 205, 240, .55); }
/* 透明宽命中带：靠近轨迹 6~8px 即触发，不产生可见视觉 */
.ap-traj-hit { fill: none; stroke: transparent; stroke-width: 14; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: stroke; cursor: pointer; }
/* hover 联动高亮（命中带 hover → 兄弟可见线一起亮；ap-traj-hi 为调试强制态） */
.ap-traj-hit:hover + .ap-traj,
.ap-traj:hover,
.ap-traj.ap-traj-hi {
  stroke: #ffd75e; stroke-width: 3.6;
  filter: drop-shadow(0 0 6px rgba(255, 215, 94, .9));
}
.ap-night .ap-traj-hit:hover + .ap-traj, .ap-night .ap-traj:hover, .ap-night .ap-traj.ap-traj-hi { stroke: #ffd75e; }
/* 点击选中态：出卡后轨迹保持常亮，关卡恢复 */
.ap-traj.ap-tj-on {
  stroke: #ffd75e; stroke-width: 3.6;
  filter: drop-shadow(0 0 6px rgba(255, 215, 94, .9));
}
/* 悬停提示标签（跟随光标） */
.ap-trail-tip {
  position: fixed; pointer-events: none; z-index: 99;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(12, 11, 6, .88); color: #ffd75e;
  font-size: 13px; white-space: nowrap; display: none;
}
@media (prefers-reduced-motion: reduce) { .ap-traj, .ap-traj-hit { transition: none !important; } }


/* ---------- 动画 ---------- */
@keyframes ap-warnblink { 0%, 100% { opacity: .12; } 12% { opacity: 1; } 32% { opacity: .12; } }
@keyframes ap-warnblink-c { 0%, 100% { opacity: .25; } 12% { opacity: 1; } 32% { opacity: .25; } }
@keyframes ap-rabbit { 0%, 8% { opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes ap-guard-a { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .15; } }
@keyframes ap-guard-b { 0%, 49% { opacity: .15; } 50%, 100% { opacity: 1; } }
@keyframes ap-beacon { to { transform: rotate(360deg); } }
@keyframes ap-blink { 0%, 7% { opacity: 1; } 8%, 100% { opacity: .15; } }
@keyframes ap-strobe { 0%, 5% { opacity: 1; } 6%, 12% { opacity: 0; } 13%, 18% { opacity: 1; } 19%, 100% { opacity: 0; } }
@keyframes ap-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
@keyframes ap-drift { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
@keyframes ap-chip-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ap-rabbit, .ap-guard, .ap-warn-glow, .ap-warn-core, .ap-ac-beaconb, .ap-strobe-l, .ap-strobe-r,
  .ap-star, .ap-cloud { animation: none !important; }
  .ap-night .ap-warn-glow { opacity: .8; } .ap-night .ap-warn-core { opacity: 1; }
}

/* 调试/静态渲染：冻结过渡（截图验证用） */
.ap-still, .ap-still *, .ap-still *::before, .ap-still *::after { transition: none !important; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .p3d-card { right: 10px; bottom: 10px; width: calc(100vw - 20px); }
  .ap-card { bottom: 60px; }
  .ap-chip { font-size: 11px; }
}