/* Vossenjacht / Monsterjacht — all rules scoped under .vj so the module can live inside a host page. */
.vj{--bg:#f7f5fb;--fg:#24163a;--card:#fff;--muted:#5d5470;--acc:#f07c1a;--acc-dark:#c85f08;--green:#6d9b2a;--night1:#140b26;--night2:#3b1c5a;--ok:#2f7d32;--warn:#a65a00;--line:#e2dcec;
  color:var(--fg);font:18px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
body:has(> .vj){margin:0;background:var(--bg)}
.vj *{box-sizing:border-box}
.vj header.top{display:flex;justify-content:space-between;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--card);border-bottom:3px solid var(--acc);flex-wrap:wrap}
.vj .brand{color:var(--fg);font-weight:800;text-decoration:none}
.vj .tools a{color:var(--fg)} .vj .tools a[aria-current]{font-weight:800}
.vj main{max-width:820px;margin:0 auto;padding:1rem}
.vj .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem;margin:0 0 1rem;box-shadow:0 2px 10px #24163a0f}
.vj h1,.vj h2,.vj h3{line-height:1.2}
.vj h2{color:var(--night2);margin-top:.2rem}
.vj label{display:block;margin:.7rem 0;font-weight:600}
.vj input,.vj select,.vj textarea{display:block;width:100%;font:inherit;font-weight:400;padding:.65rem .75rem;border-radius:10px;border:2px solid var(--line);margin-top:.25rem;background:#fff;color:#24163a}
.vj input:focus,.vj select:focus{outline:3px solid #f07c1a66;border-color:var(--acc)}
.vj button,.vj .btn{font:inherit;padding:.6rem 1.1rem;border-radius:10px;border:2px solid var(--line);background:#fff;color:var(--fg);cursor:pointer;text-decoration:none;display:inline-block}
.vj button.primary,.vj .btn.primary{background:var(--acc);border-color:var(--acc);color:#1b1026;font-weight:800}
.vj button.primary:hover{background:var(--acc-dark);border-color:var(--acc-dark);color:#fff}
.vj button.big{width:100%;font-size:1.4rem;padding:1.1rem;margin:.6rem 0}
.vj .counter{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.9rem 0}.vj .counter .cnt{background:linear-gradient(160deg,var(--night2),var(--night1));color:#fff;border-radius:12px;padding:.7rem .5rem;text-align:center}.vj .counter .n{display:block;font-size:2.2rem;font-weight:800;line-height:1.1;color:#ffb35c}.vj .counter .l{display:block;font-size:.9rem;font-weight:600}
.vj .state{font-weight:800} .vj .state-running{color:var(--ok)} .vj .ok{color:var(--ok);font-weight:700} .vj .warn{color:var(--warn);font-weight:700}
.vj .small{font-size:.85rem;color:var(--muted)} .vj .progress{font-size:1.3rem;font-weight:700}
.vj a{color:var(--night2)}

/* Halloween hero */
.vj .hero{position:relative;overflow:hidden;border-radius:18px;margin:0 0 1rem;padding:2.2rem 1.2rem 1.6rem;text-align:center;color:#fff;
  background:radial-gradient(circle at 80% 18%,#ffe9a8 0 34px,#ffd45a55 35px,transparent 90px),linear-gradient(160deg,var(--night1),var(--night2) 70%,#4f2a1a)}
.vj .hero h1{margin:.2rem 0 .3rem;font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:900;letter-spacing:.5px;text-shadow:0 3px 0 #0006}
.vj .hero h1::before{content:"🎃 "}.vj .hero h1::after{content:" 👻"}
.vj .hero .when{margin:0 0 .4rem;color:#ffd9a8;font-weight:700}
.vj .hero-logo{display:block;margin:0 auto;max-width:260px;width:60%;height:auto;filter:drop-shadow(0 6px 12px #0008)}
.vj .hero .pause{position:absolute;right:.6rem;bottom:.6rem;font-size:1rem;line-height:1;padding:.35rem .5rem;background:#ffffff22;color:#fff;border-color:#ffffff55}
.vj .sky{position:absolute;inset:0;pointer-events:none}
.vj .bat{position:absolute;font-size:28px;filter:brightness(.2) drop-shadow(0 0 1px #000);animation:vj-fly 7s ease-in-out infinite}
.vj .b1{left:8%;top:22%}.vj .b2{left:72%;top:58%;animation-delay:-2s;font-size:22px}.vj .b3{left:40%;top:10%;animation-delay:-4s;font-size:18px}
@keyframes vj-fly{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(28px,-14px) rotate(6deg)}}
.vj.theme-neutral .hero{background:linear-gradient(160deg,#2c3e50,#4b6584)}.vj.theme-neutral .bat,.vj.theme-neutral .hero h1::before,.vj.theme-neutral .hero h1::after{display:none}

/* map + monsters */
.vj #map{height:60vh;min-height:320px;border-radius:14px;margin-bottom:1rem;border:3px solid var(--night2)}
.vj .mon span{font-size:30px;display:block;line-height:36px;text-align:center;filter:drop-shadow(0 0 3px #000);animation:vj-wob 2s ease-in-out infinite}
@keyframes vj-wob{50%{transform:translateY(-4px) rotate(6deg)}}
.vj .mlist{list-style:none;padding:0}.vj .mlist li{padding:.35rem 0;border-bottom:1px dashed var(--line)}.vj .mlist li.done{color:var(--ok);font-weight:700}
.vj .near,.vj .alarm{background:var(--acc);color:#1b1026;padding:.8rem;border-radius:10px;font-weight:800}
.vj .bigcode{font-size:3rem;font-weight:900;letter-spacing:.35rem;text-align:center;margin:.2rem 0;color:var(--night2)}
.vj .vj-foot{text-align:center;font-size:.75rem;color:var(--muted);padding:1rem}

/* motion off: pause button, or OS setting */
.vj.no-motion *,.vj.no-motion *::before{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.vj *{animation:none!important}}

/* dark mode of a host ([data-theme=dark]) or the OS when standalone */
[data-theme="dark"] .vj,.vj.dark{--bg:#120c1d;--fg:#f1ecfa;--card:#1e1530;--muted:#b8aecb;--line:#3a2d52}
[data-theme="dark"] .vj h2,[data-theme="dark"] .vj a{color:#e3c8ff}
@media (prefers-color-scheme:dark){body:has(> .vj) .vj{--bg:#120c1d;--fg:#f1ecfa;--card:#1e1530;--muted:#b8aecb;--line:#3a2d52}body:has(> .vj) .vj h2,body:has(> .vj) .vj a{color:#e3c8ff}}

/* admin: always light (Tabulator admin_light theme) */
.vj.admin{--bg:#f8f9f4;--fg:#22222a;--card:#fff;--primary:#8dc73f;--bg-alt:#f8f9f4;--bg-card:#fff;--border:#e0e0d8;--text-muted:#6c757d;color-scheme:light}
.vj.admin main{max-width:1500px}
.vj.admin input,.vj.admin select{display:inline-block;width:auto;min-width:8rem;margin:0}
.vj.admin td input[type=text]{width:100%}
.vj.admin .tabulator input{min-width:0;margin:0}.vj.admin .tabulator input[type=checkbox]{width:auto;padding:0;vertical-align:middle}.vj.admin .tabulator .tabulator-header-filter input{width:100%;padding:.3rem .4rem;border-radius:6px}
.vj.admin .row-actions form{display:inline}
.vj.admin .beheertabel{overflow-x:auto}
.vj.admin button.primary,.vj.admin .btn.primary{background:var(--primary);border-color:var(--primary)}
.vj.admin select.iconsel{font-size:1.15rem;min-width:12rem}
.vj table{border-collapse:collapse;width:100%}.vj td,.vj th{border-bottom:1px solid #8885;padding:.35rem;text-align:left;vertical-align:top}

.vj #boardlist li.me{font-weight:800;color:var(--acc-dark)}
.vj .mon{position:relative}
.vj .mon .dir{position:absolute;left:50%;top:50%;width:0;height:0;margin:-31px 0 0 -7px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #f07c1a;transform-origin:7px 31px;filter:drop-shadow(0 0 2px #000)}
.vj .mon.virtual span{animation:vj-wob 1.2s ease-in-out infinite}
.vj .mon img{display:block;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 1px 2px #000a)}
.vj .mlist img{height:1.4em;vertical-align:middle}
.vj .mon.virtual img{animation:vj-wob 1.2s ease-in-out infinite}
.vj.admin fieldset{border:1px solid var(--line);border-radius:10px;margin:.5rem 0;padding:.5rem .8rem}
.vj.admin legend{font-weight:700;padding:0 .3rem}
.vj.admin label.inl{display:inline-block;margin:.3rem .8rem .3rem 0;font-weight:400}
.vj.admin label.inl input[type=checkbox],.vj.admin label.inl input[type=radio]{display:inline-block;width:auto;min-width:0;margin:0 .2rem 0 0}
.vj.admin label.inl input[type=number]{width:6rem;min-width:0}
.vj.admin .phase{margin:.3rem 0;padding:.3rem .5rem;background:#f6f2fb;border-radius:8px}
.vj.admin img.chk{height:44px;vertical-align:middle;background:repeating-conic-gradient(#ddd 0 25%,#fff 0 50%) 0/12px 12px}
.vj.admin details.edit{display:block}.vj.admin details.edit>summary{cursor:pointer}
.vj.admin .btn-cell{padding:.15rem .4rem;margin:0 .1rem;font-size:1rem;border-radius:6px}
.vj.admin .btn-cell-primary{background:#e8f5d6}.vj.admin .btn-cell-danger{background:#fde2e2}
.vj .tab-badge{padding:.1rem .45rem;border-radius:8px;font-size:.85em}.vj .tab-badge-success{background:#e3f1c7}.vj .tab-badge-warning{background:#fde8c4}.vj .tab-badge-danger{background:#fbd2d2}.vj .tab-badge-info{background:#dbe9f8}
.vj label.consent{font-weight:400;display:flex;gap:.5rem;align-items:flex-start}.vj label.consent input{width:auto;margin-top:.3rem}
.vj .toolbar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
dialog.mdlg{width:min(980px,96vw);max-height:92vh;overflow:auto;border:0;border-radius:14px;padding:1rem 1.2rem;box-shadow:0 10px 40px #0005}
dialog.mdlg::backdrop{background:#1b102680}
.mdlg-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem;font-size:1.15rem}
.vj .tabulator-cell.saved{background:#e3f1c7!important;transition:background 1s}
.vj [hidden],dialog.mdlg [hidden]{display:none!important}
/* --- full-screen player page (FEAT-018) --- */
body.vj-fullbody{margin:0;height:100%;overflow:hidden;background:#140b26}
.vj.full{position:fixed;inset:0;font-size:17px}
.vj.full #map{position:absolute;inset:0;height:auto;min-height:0;margin:0;border:0;border-radius:0}
.vj.full .fbar{position:absolute;top:0;left:0;right:0;z-index:1000;display:flex;align-items:center;gap:.5rem;padding:calc(.5rem + env(safe-area-inset-top)) .6rem .5rem;background:linear-gradient(#140b26ee,#140b2600);color:#fff;pointer-events:none}
.vj.full .fbar>*{pointer-events:auto}
.vj.full .fstat{flex:1;text-align:center;line-height:1.2;text-shadow:0 1px 3px #000}
.vj.full .fstat .state{display:block;font-size:.8rem;font-weight:600;color:#ffd9a8}
.vj.full button.round{width:48px;height:48px;border-radius:50%;padding:0;font-size:1.4rem;background:#fff;color:#24163a;border:0;box-shadow:0 2px 8px #0006}
.vj.full .toasts{position:absolute;top:calc(4.2rem + env(safe-area-inset-top));left:.6rem;right:.6rem;z-index:1000;display:flex;flex-direction:column;gap:.4rem;pointer-events:none}
.vj.full .toast{margin:0;padding:.6rem .8rem;border-radius:12px;background:#fff;color:#24163a;font-weight:700;box-shadow:0 2px 10px #0005;text-align:center}
.vj.full .toast.ok{background:#e3f6d6;color:#1d5e22}.vj.full .toast.warn{background:#fff1d6;color:#7a4300}
.vj.full .toast.near{background:var(--acc);color:#1b1026}
.vj.full .fbtns{position:absolute;left:0;right:0;bottom:0;z-index:1000;padding:.6rem .6rem calc(.8rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.5rem}
.vj.full .fbtns .two{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.vj.full .fbtns button.big{margin:0;min-height:64px;font-size:1.15rem;box-shadow:0 3px 12px #0006}
.vj.full #catchbox{text-align:center}.vj.full #catchbox small{display:block;color:#fff;text-shadow:0 1px 3px #000;font-weight:700}
.vj.full button.catch{width:100%;min-height:76px;font-size:1.4rem;background:#ff3d7f;border-color:#ff3d7f;color:#fff;animation:vj-pulse 1s ease-in-out infinite}
@keyframes vj-pulse{50%{transform:scale(1.03)}}
.vj.full .leaflet-bottom.leaflet-right{bottom:calc(9.5rem + env(safe-area-inset-bottom))}
.vj.full .sheet{position:absolute;left:0;right:0;bottom:0;z-index:1100;background:var(--card);color:var(--fg);border-radius:18px 18px 0 0;padding:1rem 1rem calc(1rem + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #0007;max-height:80vh;overflow:auto}
.vj.full .sheet.tall{max-height:88vh}
.vj.full .sheet .row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.vj.full .sheet .row.between{justify-content:space-between}
.vj.full .sheet .row button.big{flex:1;margin:0;min-height:56px}
.vj.full #code{font-size:2rem;letter-spacing:.4rem;text-align:center}
.vj.full .scanbox{position:relative;border-radius:14px;overflow:hidden;background:#000;aspect-ratio:1/1;max-height:55vh;margin:.4rem auto}
.vj.full .scanbox video{width:100%;height:100%;object-fit:cover}
.vj.full .scanbox .aim{position:absolute;inset:18%;border:4px solid #fff;border-radius:14px;box-shadow:0 0 0 2000px #0005}

/* found! the monster grows big, then flies small "to you" */
.vj.full #reveal{position:absolute;inset:0;z-index:1200;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#ffd45a55,#140b26e6 70%);pointer-events:none}
.vj.full #reveal .rv-mon{width:min(70vw,60vh);height:min(70vw,60vh);display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 8px 24px #000a)}
.vj.full #reveal .rv-mon span{font-size:min(55vw,45vh);line-height:1}
.vj.full #reveal .rv-mon img{width:100%;height:100%;object-fit:contain}
.vj.full #reveal .rv-name{color:#fff;font-size:1.5rem;font-weight:900;text-align:center;text-shadow:0 2px 6px #000;margin:.5rem 1rem}
.vj.full #reveal.go .rv-mon{animation:vj-reveal 2.5s cubic-bezier(.2,.8,.3,1) forwards}
.vj.full #reveal.go .rv-name{animation:vj-fade 2.5s forwards}
@keyframes vj-reveal{0%{transform:scale(.2) rotate(-12deg);opacity:0}25%{transform:scale(1.15) rotate(4deg);opacity:1}35%{transform:scale(1) rotate(0)}65%{transform:scale(1.05)}100%{transform:translateY(42vh) scale(.12);opacity:0}}
@keyframes vj-fade{0%,15%{opacity:0}25%,70%{opacity:1}100%{opacity:0}}
.vj.admin .bgprev{display:inline-flex;align-items:center;gap:.5rem;margin:.3rem 0}.vj.admin .bgprev canvas{width:96px;height:96px;border:1px solid var(--line);border-radius:8px;background:repeating-conic-gradient(#ccc 0 25%,#fff 0 50%) 0/12px 12px}
