:root{color-scheme:dark}body{margin:0;background:#1b201f;color:#e3eeeb;font-family:system-ui,sans-serif}main{max-width:1500px;margin:auto;padding:32px}.heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.heading small,.panel>small{color:#73d7bd;letter-spacing:2px;font-size:11px}h1{font-size:32px;margin:10px 0}p{color:#a9bab4;line-height:1.7}.tag{border:1px solid #426055;padding:8px 14px;border-radius:30px;color:#83d9c0;font-size:13px}.toolbar{display:flex;gap:16px;align-items:end;margin-bottom:20px}label{display:grid;gap:8px;font-size:12px;color:#aac2b9}.search{flex:1}input,select,button{font:inherit;color:inherit;border:1px solid #41554d;background:#29322e;border-radius:9px;padding:12px 16px}select{min-width:200px}button{cursor:pointer}button:hover,button:focus-visible{border-color:#6bd5b5;background:#30483e}input:focus{outline:2px solid #62ceb0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px}.viewer,.panel{border:1px solid #3b4942;border-radius:16px;background:#242b28;overflow:hidden}.mapbar{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #3b4942}.mapbar button{padding:6px 12px}#canvas{height:570px;overflow:hidden;background:radial-gradient(ellipse,#354d3e,#19251f);position:relative;cursor:grab;touch-action:none}#scene{position:absolute;left:0;top:0;transform-origin:0 0;width:640px;height:470px}#world-image{width:100%;height:100%;object-fit:contain}#spots{position:absolute;inset:0}.spot{position:absolute;padding:0;width:12px;height:12px;border:2px solid #fff;border-radius:50%;background:#008e77;box-shadow:0 1px 5px #000;transform:translate(-50%,-50%)}.spot:hover,.spot:focus{z-index:3;background:#ffcd65}.spot span{display:none;position:absolute;top:15px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#17241f;border:1px solid #7dc9ad;padding:5px 9px;border-radius:5px;color:white;font-size:12px}.spot:hover span,.spot:focus span{display:block}.mapfoot{padding:14px 20px;color:#a0b2a9;font-size:12px}.panel{padding:22px;margin-bottom:18px}h2{font-size:20px;margin:10px 0}.panel p{font-size:13px}.mini{display:block;max-width:100%;max-height:140px;margin:20px auto;object-fit:contain}.entity{display:flex;align-items:center;gap:8px;padding:7px 0;text-decoration:none;color:#9edfc9;font-size:13px}.entity img{width:30px;height:35px;object-fit:contain}.links{display:flex;gap:7px;flex-wrap:wrap}.links button{font-size:12px;padding:7px 9px}.endpoints{display:grid;gap:8px}.endpoints button{text-align:left}#swap{text-align:center;padding:3px;border:0;background:none}.hint,.note{font-size:12px}#route button{display:block;width:100%;margin:6px 0;text-align:left;font-size:13px}.note{color:#8caaa0}#results{padding:20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;max-height:570px;overflow:auto}#results[hidden]{display:none}#results button{text-align:left}#results small{display:block;margin-top:6px;color:#91aa9d}summary{cursor:pointer;color:#82cdb4;padding:10px 0}@media(max-width:900px){main{padding:20px}.layout{grid-template-columns:1fr}.toolbar{flex-wrap:wrap}.search{min-width:200px}.heading h1{font-size:25px}.tag{display:none}#canvas{height:420px}aside{display:grid;grid-template-columns:1fr 1fr;gap:16px}}@media(max-width:580px){aside{display:block}.toolbar label{width:100%}.toolbar select{width:100%}.heading{margin-bottom:16px}#canvas{height:360px}}
/* Connected map cards */
#canvas{height:680px;background-color:#18231f;background-image:linear-gradient(#5d8a7212 1px,transparent 1px),linear-gradient(90deg,#5d8a7212 1px,transparent 1px);background-size:24px 24px}
.connections{position:absolute;inset:0;overflow:visible;pointer-events:none}.connections path{fill:none;stroke-width:3;opacity:.8}.connections path.on-route{stroke:#ffe17a;stroke-width:7;opacity:1}.connections circle{stroke:#e9f7f0;stroke-width:2}.connections text{fill:#d9eee4;text-anchor:middle;font-size:22px;paint-order:stroke;stroke:#18231f;stroke-width:5px}
.map-card{position:absolute;width:250px;height:290px;padding:0;text-align:left;border:1px solid #496155;background:#27372f;border-radius:13px;box-shadow:0 10px 26px #0004;overflow:hidden}.map-card.selected{border:3px solid #71e0bd;box-shadow:0 0 0 5px #65d9b322,0 8px 30px #0005}.card-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;background:#324c3f;min-height:24px}.card-title strong{font-size:14px}.card-title small{font-size:9px;color:#a5bbae}.map-card.selected .card-title{background:#087c65}.map-thumb{margin:8px 10px;height:110px;display:flex;justify-content:center;align-items:center;background:#19291f;border-radius:7px;color:#a8b8ac;font-size:12px}.map-thumb img{max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto}.card-entities{display:flex;gap:8px;flex-wrap:wrap;padding:4px 10px}.card-entities span{display:grid;justify-items:center;width:48px;gap:2px}.card-entities img{height:30px;max-width:35px;object-fit:contain}.card-entities small{font-size:9px;color:#bdd3c5;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer{align-self:start}.panel details{max-height:240px;overflow:auto}@media(max-width:580px){#canvas{height:490px}}
.heading{padding:0;min-height:0;margin:0 0 18px}.heading h1{font-size:25px;margin:5px 0}.heading p{margin:4px 0;font-size:13px}.toolbar{margin-bottom:16px}main{padding-top:20px}.layout #canvas{height:560px}.mapbar{padding:10px 16px}@media(max-width:580px){.layout #canvas{height:430px}}
.connections{z-index:3}.connections path{stroke-width:2.5;stroke-linejoin:round;opacity:.9}.portal-dot{pointer-events:all;cursor:pointer}.portal-dot:hover,.portal-dot:focus{r:8;stroke:#fff;stroke-width:3;outline:none}.map-card{border-width:3px}.map-card.selected{border-width:3px}
/* Full-window map workspace */
html,body{height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column}.topbar{flex:none}body>main{max-width:none;width:100%;box-sizing:border-box;padding:0;margin:0;flex:1;min-height:0;display:flex;flex-direction:column;position:relative}.heading,.note{display:none}.toolbar{flex:none;display:flex;align-items:center;gap:14px;padding:12px 20px;margin:0;border-bottom:1px solid #3b4942;background:#232c28;z-index:12}.toolbar label{gap:4px}.toolbar .search{max-width:600px}.toolbar input,.toolbar select,.toolbar button{padding:10px 13px}.layout{flex:1;min-height:0;display:block;position:relative}.viewer{position:absolute;inset:0;border:0;border-radius:0}.layout #canvas{height:100%;width:100%}.mapbar{position:absolute;left:14px;right:14px;top:12px;z-index:8;pointer-events:none;border:0;padding:0;background:transparent}.mapbar strong,.mapbar>div{pointer-events:auto;background:#22332eeb;padding:8px 12px;border:1px solid #486156;border-radius:10px}.mapbar>div{display:flex;gap:5px}.mapfoot{position:absolute;bottom:12px;left:14px;max-width:calc(100% - 50px);pointer-events:none;background:#22332ee8;border:1px solid #435e50;border-radius:8px;padding:7px 12px;font-size:11px}.layout>aside{display:none;position:absolute;z-index:9;right:16px;top:74px;bottom:48px;width:320px;overflow:auto}.info-open .layout>aside{display:block}.panel{background:#24342ff5;margin-bottom:12px;padding:18px}.viewer #results{position:absolute;z-index:15;top:60px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 40px));max-height:60%;box-sizing:border-box;background:#22342ff5;border:1px solid #658b79;border-radius:12px;box-shadow:0 12px 36px #0006;grid-template-columns:1fr 1fr}.map-card{will-change:auto}@media(max-width:750px){.toolbar{gap:8px;padding:8px 10px;flex-wrap:wrap}.toolbar label{width:auto}.toolbar label:first-child{width:140px}.toolbar select{min-width:0;width:100%}.toolbar .search{min-width:0;flex:1}.toolbar button{font-size:11px;padding:7px 9px}.mapbar{top:8px;left:8px;right:8px}.mapbar strong{font-size:12px;max-width:45%}.mapbar>div{padding:5px}.layout>aside{width:min(320px,calc(100% - 24px));right:12px}.mapfoot{font-size:10px}.viewer #results{grid-template-columns:1fr}.topbar .discord-contact{display:none}}
.layout>.viewer{height:100%;width:100%;box-sizing:border-box;align-self:stretch}
#canvas{user-select:none}.toolbar label{margin:0}.toolbar{min-height:0}
.map-card.town-card{border-color:#e9be61;box-shadow:0 0 0 5px #d9aa4028,0 10px 30px #0007}.town-card .card-title{background:#65512b;color:#ffe7a6}.town-card .card-title strong{font-size:15px}.town-card.selected{border-color:#ffe6a0}#town-home{color:#ffe1a0;border-color:#957746}
.map-card{box-sizing:border-box;cursor:pointer}.card-entities .mob-preview-link{display:grid;justify-items:center;width:48px;gap:2px;text-decoration:none;border-radius:5px}.mob-preview-link:hover,.mob-preview-link:focus-visible{background:#659a7d55;outline:1px solid #82dfb9}.connections path{opacity:.55;stroke-width:2}.portal-dot{opacity:1}#monster-preview{position:fixed;z-index:100;width:250px;padding:14px;border:1px solid #8fc8ab;border-radius:12px;background:#1c3028;box-shadow:0 10px 35px #0009;pointer-events:none;color:#e3f3e9}#monster-preview[hidden]{display:none}.preview-title{display:flex;align-items:center;gap:12px;margin-bottom:8px}.preview-title img{width:48px;height:48px;object-fit:contain}#monster-preview p{margin:4px 0;font-size:12px}#monster-preview>small{display:block;margin-top:10px;color:#8ed9b8}
/* Trace a connection without relying on color alone. */
.connections path{opacity:.045;stroke:#92b2a3;stroke-width:2}.connections path.near-wire{opacity:.95;stroke-width:3.5;filter:drop-shadow(0 0 2px #071810)}.connections circle{opacity:.1}.connections circle.near-wire{opacity:1;r:7}.connections .portal-number{font-size:16px;font-weight:800;stroke-width:5px;pointer-events:none;opacity:1}.connections.single-wire path,.connections.single-wire circle,.connections.single-wire .portal-number{opacity:.025}.connections.single-wire path.active-wire{opacity:1;stroke:#ffe080;stroke-width:5;filter:drop-shadow(0 0 3px #071810)}.connections.single-wire circle.active-wire{opacity:1;fill:#ffe080;r:8}.connections.single-wire .portal-number.active-wire{opacity:1;fill:#ffe080}.map-card.wire-destination{border-color:#ffe080;box-shadow:0 0 0 4px #ffe08030}.connections path.on-route{opacity:1}
#connection-guide{position:absolute;z-index:9;left:14px;bottom:48px;width:290px;max-height:40%;overflow:auto;box-sizing:border-box;padding:14px;border:1px solid #567b65;border-radius:12px;background:#172a23f5;box-shadow:0 6px 24px #0005}#connection-guide>strong{font-size:13px;color:#d4eee0}#connection-guide p{font-size:11px;line-height:1.5;margin:7px 0 10px;color:#a5cbb7}#connection-guide button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-size:12px;padding:8px;margin:5px 0;border-color:#3a594b}#connection-guide b{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:#557b65;color:white}#connection-guide button span{margin-left:auto;font-size:10px;color:#99b8a8}#connection-guide button.active{border-color:#ffe080;color:#ffe080;background:#443f25}#connection-guide button.active b{background:#ffe080;color:#29281c}@media(max-width:750px){#connection-guide{max-height:25%;width:240px;bottom:40px;left:8px;padding:10px}}
.map-card.previewed:not(.selected){border-color:#b8e9da;box-shadow:0 0 0 3px #b8e9da33}

/* Keep the entire town route readable, including when inspecting one step. */
.connections.town-route path.near-wire{stroke:#ffe080;stroke-width:5;opacity:1;filter:drop-shadow(0 0 3px #071810)}
.connections.town-route circle.near-wire{fill:#ffe080;opacity:1}
.connections.town-route .portal-number{fill:#ffe080}
.connections.town-route path.active-wire{stroke:#fff8d9;stroke-width:7;opacity:1}
.connections.town-route circle.active-wire{fill:#fff8d9;opacity:1;r:8}
.map-card.home-path{border-color:#c9af68}.map-card.home-path .card-title{background:#48472e}
.map-card.home-path.selected{border-color:#ffe080}.map-card.home-path.selected .card-title{background:#67582e}

/* Each visible segment keeps its color in the map, portal numbers and guide. */
.connections.town-route path.near-wire,.connections.town-route path.active-wire{stroke:var(--wire-color);filter:drop-shadow(0 0 2px #071810)}
.connections.town-route circle.near-wire,.connections.town-route circle.active-wire,.connections.town-route .portal-number{fill:var(--wire-color)}
#connection-guide h4{font-size:11px;color:#a7c8b8;margin:12px 0 5px}
#connection-guide button b{background:var(--wire-color,#557b65);color:#17251f}
#connection-guide button.active{border-color:var(--wire-color);color:var(--wire-color);background:#2b3c32}

.map-card.route-locked{border-color:#ffe080;box-shadow:0 0 0 4px #ffe08040,0 8px 24px #0005}#connection-guide .lock-hint{color:#d5bd79;font-size:11px;margin-bottom:10px}

.map-lock-badge{position:absolute;top:49px;right:12px;z-index:4;display:flex;align-items:center;gap:5px;padding:4px 9px;border:1px solid #ffe080;border-radius:6px;background:#514323;color:#ffe9aa;font-size:12px;font-weight:700;box-shadow:0 2px 8px #0005;pointer-events:none}.map-lock-badge[hidden]{display:none}

/* Lock hint sits above the selected card, outside its content. */
.map-card.route-locked{overflow:visible}.map-card.route-locked .card-title{border-radius:9px 9px 0 0}.map-lock-badge{top:-35px;right:auto;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12px;padding:5px 10px}

/* Way back to town: flowing dashes along the route (toward the town) and a callout on wire 1. */
#wires .home-flow,svg .home-flow{fill:none!important;stroke:#fff!important;stroke-width:3.5!important;stroke-dasharray:3 15;stroke-linecap:round;opacity:.95;pointer-events:none;animation:home-flow .9s linear infinite}
svg .home-flow.rev{animation-direction:reverse}
@keyframes home-flow{to{stroke-dashoffset:-18}}
svg .home-callout{pointer-events:none}
svg .home-callout rect,svg .home-callout path{fill:var(--wire-color,#f06a13);stroke:#fff;stroke-width:2.5}
svg .home-callout text{fill:#fff;font:900 15px/1 'Chiron GoRound TC','Microsoft JhengHei',sans-serif;paint-order:stroke;stroke:#0005;stroke-width:3px}
svg .home-callout .home-ping{fill:none;stroke:var(--wire-color,#f06a13);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:home-ping 1.4s ease-out infinite}
@keyframes home-ping{from{opacity:1;transform:scale(.6)}to{opacity:0;transform:scale(2.4)}}
@media (prefers-reduced-motion:reduce){svg .home-flow,svg .home-callout .home-ping{animation:none}}