/* Leaflet 1.9.4 kern (ingebouwd, geen externe stylesheet nodig) */
.leaflet-pane,.leaflet-tile,.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile-container,.leaflet-pane>svg,.leaflet-pane>canvas,.leaflet-zoom-box,.leaflet-image-layer,.leaflet-layer{position:absolute;left:0;top:0}
.leaflet-container{overflow:hidden;-webkit-tap-highlight-color:transparent;outline-offset:1px;touch-action:none}
.leaflet-marker-icon,.leaflet-marker-shadow,.leaflet-tile{user-select:none;-webkit-user-drag:none}
.leaflet-container img.leaflet-marker-icon{max-width:none!important;max-height:none!important}
.leaflet-pane{z-index:400}.leaflet-overlay-pane{z-index:400}.leaflet-shadow-pane{z-index:500}.leaflet-marker-pane{z-index:600}.leaflet-tooltip-pane{z-index:650}.leaflet-popup-pane{z-index:700}
.leaflet-map-pane canvas{z-index:100}.leaflet-map-pane svg{z-index:200}
.leaflet-zoom-animated{transform-origin:0 0}
.leaflet-zoom-anim .leaflet-zoom-animated{transition:transform .25s cubic-bezier(0,0,.25,1)}
.leaflet-zoom-anim .leaflet-zoom-hide{visibility:hidden}
.leaflet-interactive{cursor:pointer}.leaflet-grab{cursor:grab}.leaflet-dragging .leaflet-grab{cursor:grabbing}
.leaflet-marker-icon,.leaflet-image-layer,.leaflet-pane>svg path{pointer-events:none}
.leaflet-marker-icon.leaflet-interactive,.leaflet-image-layer.leaflet-interactive,.leaflet-pane>svg path.leaflet-interactive{pointer-events:auto}
.leaflet-control{position:relative;z-index:800;pointer-events:auto;float:left;clear:both}
.leaflet-top,.leaflet-bottom{position:absolute;z-index:1000;pointer-events:none}
.leaflet-top{top:0}.leaflet-right{right:0}.leaflet-bottom{bottom:0}.leaflet-left{left:0}
.leaflet-right .leaflet-control{float:right}
.leaflet-top .leaflet-control{margin-top:12px}.leaflet-bottom .leaflet-control{margin-bottom:0}
.leaflet-left .leaflet-control{margin-left:12px}.leaflet-right .leaflet-control{margin-right:0}
.leaflet-bar{border-radius:12px;overflow:hidden}
.leaflet-bar a{display:block;width:36px;height:36px;line-height:34px;text-align:center;text-decoration:none;font:700 20px/34px var(--body)}
.leaflet-bar a+a{border-top:1px solid var(--line)}
.leaflet-bar a.leaflet-disabled{opacity:.4;cursor:default}
.leaflet-control-attribution{padding:2px 8px;font-size:11px}
.leaflet-popup{position:absolute;text-align:center;margin-bottom:20px}
.leaflet-popup-content-wrapper{padding:1px;text-align:left;border-radius:14px}
.leaflet-popup-content{line-height:1.4;min-height:1px}
.leaflet-popup-tip-container{width:40px;height:20px;position:absolute;left:50%;margin-top:-1px;margin-left:-20px;overflow:hidden;pointer-events:none}
.leaflet-popup-tip{width:17px;height:17px;padding:1px;margin:-10px auto 0;transform:rotate(45deg)}
.leaflet-container a.leaflet-popup-close-button{position:absolute;top:0;right:0;border:none;text-align:center;width:28px;height:28px;font:18px/28px Tahoma,Verdana,sans-serif;text-decoration:none;background:transparent}
.leaflet-div-icon{background:transparent;border:0}

/* Ontwerp: nachtelijk dorp, pompoenen als wegwijzers. Volgt de huisstijl van trickortreat.be */
:root{
  color-scheme:dark;
  --night:#120a1c; --night-2:#1a0f28; --dusk:#241438; --plum:#33204d; --line:#4a3466;
  --bone:#f6efe4; --muted:#c4b7d3; --orange:#ff914e; --ember:#e8692a; --glow:#ffc98a;
  --moss:#7c9d40; --ink:#1a0f22; --you:#6fb7ff;
  --display:"Griffy",Georgia,serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:20px;
}
*{box-sizing:border-box}
body{background:var(--night);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.5;margin:0;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background-image:radial-gradient(1100px 480px at 85% -10%,rgba(255,145,78,.13),transparent 60%),radial-gradient(800px 460px at -10% 35%,rgba(124,157,64,.08),transparent 60%)}
.wrap{max-width:1180px;margin:0 auto;padding-block:clamp(28px,5vw,56px)}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(44px,8vw,88px);line-height:.95;margin:14px 0 8px;text-wrap:balance}
h1 span{color:var(--orange);text-shadow:0 0 30px rgba(255,145,78,.45)}
.lead{color:var(--muted);max-width:62ch;margin:0;font-size:clamp(16px,2vw,19px)}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0 20px}
.fact{background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0}
.fact b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(20px,2.4vw,26px);color:var(--orange);line-height:1.15;font-variant-numeric:tabular-nums}
.fact small{color:var(--muted);font-size:14px}

.board{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px}
.mapbox{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);min-height:640px;background:var(--night-2);
  box-shadow:0 20px 60px rgba(0,0,0,.45)}
#map{position:absolute;inset:0;background:#160d22}
.mapctl{position:absolute;z-index:1100;right:12px;top:12px;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.btn{appearance:none;border:0;cursor:pointer;font:800 14px/1 var(--body);border-radius:999px;padding:11px 16px;background:var(--orange);color:var(--ink);
  box-shadow:0 6px 18px rgba(255,145,78,.35);display:inline-flex;gap:8px;align-items:center}
.btn:hover{background:var(--glow)}
.btn.ghost{background:rgba(18,10,28,.88);color:var(--bone);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--orange);color:var(--glow)}
.btn:focus-visible{outline:2px solid var(--glow);outline-offset:2px}
.note{max-width:220px;background:rgba(18,10,28,.92);border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13px;color:var(--muted)}
.legend{position:absolute;z-index:1100;left:12px;bottom:12px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:rgba(18,10,28,.88);
  border:1px solid var(--line);border-radius:12px;padding:8px 12px;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;vertical-align:middle;margin-right:6px}
.legend .l-route{width:22px;height:4px;border-radius:2px;background:var(--orange);box-shadow:0 0 8px var(--orange)}
.legend .l-pin{width:14px;height:14px;border-radius:50%;background:var(--orange)}
.legend .l-start{width:14px;height:14px;border-radius:50%;background:var(--moss)}

.list{background:var(--night-2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;max-height:640px;min-width:0}
.list header{padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.list h2{font-family:var(--display);font-weight:400;font-size:28px;margin:0;line-height:1}
.list p{margin:4px 0 0;color:var(--muted);font-size:14px}
.list ol{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1;scrollbar-color:var(--line) transparent}
.list li button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:12px}
.list li button:hover,.list li button.on{background:var(--plum)}
.list li button:focus-visible{outline:2px solid var(--orange)}
.num{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:13px;background:var(--orange);color:var(--ink);font-variant-numeric:tabular-nums}
.num.se{background:var(--moss);color:var(--bone);font-size:15px}
.addr{font-weight:600;font-size:15px;line-height:1.25;min-width:0}
.addr small{display:block;font-weight:400;color:var(--muted);font-size:13px}

.pin{width:30px;height:30px;border-radius:50% 50% 46% 46%;background:radial-gradient(circle at 35% 30%,#ffb27f,var(--orange) 45%,var(--ember));
  color:var(--ink);font:900 12px/30px var(--body);text-align:center;border:2px solid var(--night);position:relative;
  box-shadow:0 0 0 2px rgba(255,145,78,.35),0 4px 10px rgba(0,0,0,.5);transition:transform .15s}
.pin::before{content:"";position:absolute;left:50%;top:-6px;width:4px;height:7px;margin-left:-2px;background:var(--moss);border-radius:2px 2px 0 0}
.pin.on{transform:scale(1.35);box-shadow:0 0 0 3px var(--glow),0 0 22px var(--orange)}
.start{width:46px;height:46px;border-radius:50%;background:var(--moss);border:3px solid var(--bone);display:grid;place-items:center;font-size:22px;
  box-shadow:0 0 0 4px rgba(124,157,64,.35),0 6px 16px rgba(0,0,0,.6)}
.me{width:18px;height:18px;border-radius:50%;background:var(--you);border:3px solid var(--bone);box-shadow:0 0 0 6px rgba(111,183,255,.3)}
.street{font:600 11px/1 var(--body);color:rgba(196,183,211,.75);white-space:nowrap;transform:translate(-50%,-50%);text-shadow:0 0 4px #160d22,0 0 4px #160d22;pointer-events:none}
.leaflet-container .street-layer{display:none}
.zoomed .street{display:block}
#map:not(.zoomed) .street{display:none}

.leaflet-container{font-family:var(--body)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--night);color:var(--bone);border:1px solid var(--line)}
.leaflet-popup-content{margin:12px 16px;font-size:15px}
.leaflet-popup-content b{font-family:var(--display);font-weight:400;font-size:20px;color:var(--orange);display:block;margin-bottom:2px}
.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}
.leaflet-bar a{background:var(--night);color:var(--bone)}
.leaflet-bar{border:1px solid var(--line)}
.leaflet-bar a:hover{background:var(--plum);color:var(--glow)}
.leaflet-control-attribution{background:rgba(18,10,28,.8);color:var(--muted);border-top-left-radius:8px}
.leaflet-control-attribution a{color:var(--glow)}
.route-dash{animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-24}}
@media (prefers-reduced-motion:reduce){.route-dash{animation:none}}

.tips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.tip{background:var(--night-2);border:1px solid var(--line);border-radius:16px;padding:16px;min-width:0}
.tip h3{font-family:var(--display);font-weight:400;font-size:22px;margin:0 0 4px;color:var(--glow)}
.tip p{margin:0;color:var(--muted);font-size:15px}
.foot{margin-top:24px;color:var(--muted);font-size:13px;text-align:center}

@media (max-width:900px){
  .board{grid-template-columns:1fr}
  .mapbox{min-height:68vh}
  .list{max-height:420px}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tips{grid-template-columns:1fr}
}

.back{display:table;margin-bottom:18px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.back:hover{color:var(--glow)}
.back:focus-visible{outline:2px solid var(--glow);outline-offset:3px;border-radius:4px}