@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

#map-overlay {
  --map-teal:#69e6d7; --map-cream:#f3e8c8; --map-gold:#e9b962; --map-pink:#ea78a6;
  position:fixed; inset:0; width:100%; height:100%; overflow:hidden; z-index:2000;
  align-items:stretch; justify-content:stretch; color:var(--map-cream); background:#020708;
  font-family:"IBM Plex Mono",monospace; isolation:isolate;
}
#map-canvas { position:absolute; inset:0; display:block; width:100%; height:100%; background:#03090b; cursor:grab; }
#map-canvas:active { cursor:grabbing; }
.map-grain { position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.12; 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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E"); }
.map-topbar { position:absolute; z-index:5; top:0; left:0; right:0; height:92px; display:flex; align-items:center; gap:17px; padding:17px 22px; border-bottom:1px solid rgba(105,230,215,.2); background:linear-gradient(180deg,rgba(3,13,15,.98),rgba(3,13,15,.82) 76%,transparent); }
.map-brand { width:43px; height:48px; position:relative; flex:0 0 auto; filter:drop-shadow(0 0 12px rgba(105,230,215,.28)); }
.map-brand i { position:absolute; top:5px; width:12px; height:37px; border:2px solid var(--map-teal); border-radius:9px 1px; transform:rotate(28deg); }
.map-brand i:nth-child(2){left:14px;top:2px;height:45px;border-color:var(--map-gold)}
.map-brand i:nth-child(3){left:28px;transform:rotate(-22deg)}
.map-title { min-width:220px; }
.map-title span,.map-panel-kicker { display:block; color:var(--map-gold); font-size:9px; font-weight:600; letter-spacing:.18em; }
.map-title strong { display:block; margin-top:4px; color:var(--map-cream); font:800 28px/.9 "Barlow Condensed",sans-serif; letter-spacing:.08em; }
.map-search { height:43px; width:min(360px,31vw); display:flex; align-items:center; gap:10px; margin-left:auto; padding:0 12px; border:1px solid rgba(105,230,215,.35); border-radius:13px 2px; background:rgba(10,34,35,.75); }
.map-search b { color:var(--map-teal); font-size:21px; }
.map-search input { width:100%; border:0; outline:0; color:var(--map-cream); background:transparent; font:12px "IBM Plex Mono",monospace; }
.map-search input::placeholder { color:#6e8887; }
#map-overlay .map-topbar button { height:42px; padding:0 14px; border:1px solid rgba(105,230,215,.42); border-radius:12px 2px; background:rgba(9,32,33,.88); color:var(--map-teal); font:600 9px "IBM Plex Mono",monospace; letter-spacing:.1em; cursor:pointer; }
#map-overlay .map-topbar button:hover { background:#163c3d; }
#map-overlay #map-close-btn { border-color:rgba(233,185,98,.55); color:var(--map-gold); }
.map-panel { position:absolute; z-index:4; border:1px solid rgba(105,230,215,.28); background:linear-gradient(145deg,rgba(11,37,38,.94),rgba(5,18,21,.91)); box-shadow:0 18px 55px rgba(0,0,0,.38),inset 0 0 35px rgba(105,230,215,.025); backdrop-filter:blur(10px); }
.map-panel::before { content:""; position:absolute; top:-1px; left:20px; width:46px; border-top:2px solid var(--map-gold); }
.map-layers { top:116px; left:22px; width:216px; padding:18px 14px 13px; border-radius:23px 4px; }
.map-panel-kicker { margin:0 8px 13px; }
#map-overlay .map-layer { width:100%; height:40px; display:grid; grid-template-columns:27px 1fr; align-items:center; gap:8px; padding:0 8px; border:0; border-top:1px solid rgba(130,186,180,.1); border-radius:0; background:transparent; color:#6f8987; text-align:left; cursor:pointer; }
#map-overlay .map-layer.active { color:var(--map-cream); }
.map-layer i { width:16px; height:16px; display:grid; place-items:center; color:var(--map-teal); font-style:normal; font-size:10px; }
.map-layer i.route::before { content:""; display:block; width:16px; border-top:2px dashed currentColor; transform:rotate(-20deg); }
.map-layer i.station { color:var(--map-gold); }
.map-layer i.danger { border-radius:50%; background:radial-gradient(circle,#ee7d66 0 18%,transparent 22% 42%,#ee7d66 47% 52%,transparent 55%); }
.map-layer span { font-size:10px; }
.map-danger-key { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; margin:13px 8px 4px; color:#698583; font-size:7px; letter-spacing:.1em; }
.map-danger-key i { height:3px; background:linear-gradient(90deg,#5ddbc8,#e8bb61,#e56a72); }
.map-layers p { margin:13px 8px 2px; color:#607977; font-size:8px; line-height:1.7; }
.map-sector-card { top:116px; right:22px; width:292px; padding:19px; border-radius:4px 25px; }
.map-sector-meta { display:flex; align-items:center; gap:7px; color:#789391; font-size:8px; letter-spacing:.13em; }
.map-sector-meta i { width:5px; height:5px; border-radius:50%; background:var(--map-teal); box-shadow:0 0 8px var(--map-teal); }
.map-sector-meta span:last-child { margin-left:auto; }
.map-sector-card h2 { margin:13px 0 14px; color:var(--map-cream); font:800 33px/.95 "Barlow Condensed",sans-serif; letter-spacing:.03em; text-transform:uppercase; }
.map-sector-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(105,230,215,.17); border-bottom:1px solid rgba(105,230,215,.17); }
.map-sector-stats div { padding:11px 7px; border-right:1px solid rgba(105,230,215,.12); }
.map-sector-stats div:last-child { border-right:0; }
.map-sector-stats small,.map-sector-signals>small { display:block; color:#66817f; font-size:7px; letter-spacing:.13em; }
.map-sector-stats strong { color:var(--map-cream); font:700 15px "Barlow Condensed",sans-serif; }
.map-sector-signals { margin:14px 0; }
#map-sector-signal-list { display:flex; flex-wrap:wrap; gap:5px; min-height:24px; margin-top:7px; }
#map-sector-signal-list span { padding:4px 7px; border:1px solid rgba(233,185,98,.32); border-radius:8px 2px; color:#d7bd84; background:rgba(100,69,27,.12); font-size:8px; }
#map-overlay #map-focus-btn { width:100%; height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 13px; border:1px solid var(--map-gold); border-radius:13px 2px; background:linear-gradient(90deg,rgba(233,185,98,.18),rgba(233,185,98,.03)); color:var(--map-cream); cursor:pointer; }
#map-focus-btn span { font:700 9px "IBM Plex Mono",monospace; letter-spacing:.13em; }
#map-focus-btn b { color:var(--map-gold); font-size:17px; }
.map-zoom { left:22px; bottom:24px; display:flex; align-items:center; padding:4px; border-radius:13px 3px; }
#map-overlay .map-zoom button { width:34px; height:31px; border:0; background:transparent; color:var(--map-teal); font-size:18px; cursor:pointer; }
.map-zoom output { min-width:54px; color:var(--map-cream); text-align:center; font-size:9px; }
.map-prototype-mark { position:absolute; z-index:3; right:24px; bottom:27px; color:rgba(125,160,156,.55); font:8px "IBM Plex Mono",monospace; letter-spacing:.14em; }

@media(max-width:800px){
 .map-topbar{height:76px;padding:12px;gap:9px}.map-brand{transform:scale(.75);margin-left:-6px}.map-title{min-width:0}.map-title span{display:none}.map-title strong{font-size:20px;white-space:nowrap}.map-search{flex:1;width:auto;margin:0}#map-overlay .map-topbar button{padding:0 9px}#map-radar-btn{font-size:0!important}#map-radar-btn::after{content:"RADAR";font-size:8px}.map-layers{top:auto;bottom:14px;left:12px;width:182px;padding:11px}.map-panel-kicker,.map-danger-key,.map-layers p{display:none}#map-overlay .map-layer{height:32px}.map-sector-card{top:88px;right:12px;width:248px;padding:14px}.map-sector-card h2{font-size:27px}.map-zoom{display:none}
}
@media(max-width:540px){
 .map-title,.map-brand{display:none}#map-overlay #map-close-btn{width:42px;padding:0;overflow:hidden;font-size:0}#map-overlay #map-close-btn::after{content:"×";font-size:21px}.map-sector-card{top:82px;left:12px;right:12px;width:auto}.map-sector-stats,.map-sector-signals{display:none}.map-sector-card h2{margin:10px 110px 0 0}#map-overlay #map-focus-btn{position:absolute;top:37px;right:12px;width:104px;height:34px}.map-layers{display:grid;grid-template-columns:repeat(3,1fr);left:12px;right:12px;width:auto;padding:5px}#map-overlay .map-layer{display:flex;justify-content:center;border:0}.map-layer span{display:none}.map-prototype-mark{right:12px;bottom:6px;font-size:6px}
}