/* ===== live SVG backgrounds ===== */
/* hero: circuit board */
.ckt use{fill:none}
.ckt .base{stroke:var(--bgline);stroke-width:1.5}
.ckt .pulse{stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:7 93;animation:dash 5s linear infinite var(--dl,0s)}
.ckt .node{fill:var(--panel-solid);stroke:var(--accent);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:node 2.8s ease-in-out infinite var(--dl,0s)}
@keyframes dash{from{stroke-dashoffset:7}to{stroke-dashoffset:-93}}
@keyframes node{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.7);opacity:1}}

/* services: drifting shapes */
.bg-shapes .fl{fill:none;stroke:var(--bgline);stroke-width:2;transform-box:fill-box;transform-origin:center;animation:floaty 10s ease-in-out infinite var(--dl,0s)}
.bg-shapes .solid{fill:var(--bgfill)}
.bg-shapes .fast{animation-duration:6s}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-28px) rotate(90deg)}}

/* process: flowing waves */
.bg-waves .wv{animation:flow 16s linear infinite}
.bg-waves .w1{fill:var(--wave1)}
.bg-waves .w2{fill:var(--wave2);animation-duration:24s;animation-direction:reverse}
.bg-waves .w3{fill:var(--wave3);animation-duration:34s}
@keyframes flow{from{transform:translateX(0)}to{transform:translateX(-600px)}}

/* terminal: falling binary */
.bg-rain text{font-family:var(--mono);font-size:15px;fill:var(--accent);opacity:.3;animation:rain linear infinite}
@keyframes rain{from{transform:translateY(-460px)}to{transform:translateY(760px)}}

/* about: radar */
.bg-radar{display:block}
.bg-radar .ring{fill:none;stroke:var(--bgline);stroke-width:1.5}
.bg-radar .sweep{transform-origin:300px 300px;animation:spin 7s linear infinite}
.bg-radar .sweep path{fill:var(--accent);fill-opacity:.13}
.bg-radar .sweep line{stroke:var(--accent);stroke-width:2}
.bg-radar .blip{fill:var(--accent);transform-box:fill-box;transform-origin:center;animation:blip 7s ease-out infinite var(--dl,0s)}
@keyframes blip{0%{opacity:0;transform:scale(.4)}6%{opacity:1;transform:scale(1.6)}40%,100%{opacity:0;transform:scale(1)}}
.radar-wrap{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;pointer-events:none}
.radar-wrap svg{width:min(980px,150%);height:auto;opacity:.75}

/* contact: morphing blobs */
.bg-blobs path{fill:var(--blob)}

/* page-wide sky: stars (dark) / bubbles (light) */
html:not([data-theme="dark"]) .stars{display:none}
.star{fill:#cfdcff;animation:twinkle 3s ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.shoot{stroke:#e6edff;stroke-width:2;stroke-linecap:round;opacity:0;animation:shoot 11s linear infinite var(--dl,0s)}
@keyframes shoot{0%{transform:translate(0,0);opacity:0}1%{opacity:1}7%{transform:translate(-520px,312px);opacity:0}100%{transform:translate(-520px,312px);opacity:0}}

/* ===== game HUD ===== */
.gm{position:fixed;left:16px;bottom:16px;z-index:120;font-family:var(--mono)}
.gm-badge{display:flex;align-items:center;gap:10px;background:var(--panel-solid);color:var(--ink);border:2px solid var(--accent);border-radius:10px;padding:8px 12px;font:700 .78rem var(--mono);cursor:pointer;box-shadow:4px 4px 0 var(--shadow);transition:transform .15s,box-shadow .15s}
.gm-badge:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--shadow)}
.gm-badge:focus-visible,.gm button:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gm-lv{color:var(--accent)}
.gm-bar{width:70px;height:8px;border-radius:5px;background:var(--line);overflow:hidden}
.gm-bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:5px;transition:width .5s ease;box-shadow:0 0 10px var(--accent)}
.gm-xp{color:var(--muted);font-weight:600}
.gm.pop .gm-badge{animation:poke .5s ease}
.gm-panel{position:absolute;left:0;bottom:calc(100% + 12px);width:min(330px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;background:var(--panel-solid);color:var(--ink);border:2px solid var(--accent);border-radius:12px;box-shadow:8px 8px 0 var(--shadow);padding:16px 18px;font-size:.8rem;line-height:1.5}
.gm-panel[hidden]{display:none}
.gm-panel h3{font-size:1rem;margin-bottom:2px}
.gm-panel .sub{color:var(--muted);margin:0 0 12px}
.gm-panel ul{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:7px}
.gm-panel li{display:flex;gap:9px;align-items:flex-start;color:var(--muted)}
.gm-panel li::before{content:"[ ]";color:var(--muted);flex:none}
.gm-panel li.done{color:var(--ink)}
.gm-panel li.done::before{content:"[x]";color:var(--accent);font-weight:700}
.gm-panel li b{display:block;color:inherit}
.gm-panel li span{display:block;font-size:.74rem;opacity:.85}
.gm-acts{display:flex;flex-wrap:wrap;gap:8px}
.gm-acts button,.gm-btn{font:700 .75rem var(--mono);color:var(--accent);background:var(--panel);border:2px solid var(--accent);border-radius:6px;padding:7px 11px;cursor:pointer}
.gm-acts button:hover,.gm-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.gm-acts .primary,.gm-btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.toasts{position:fixed;right:16px;top:80px;z-index:130;display:grid;gap:10px;width:min(320px,calc(100vw - 32px));pointer-events:none}
.toast{background:var(--panel-solid);color:var(--ink);border:2px solid var(--accent);border-left-width:8px;border-radius:8px;padding:10px 14px;font:600 .78rem/1.5 var(--mono);box-shadow:5px 5px 0 var(--shadow);animation:toastin .4s ease both}
.toast b{color:var(--accent)}
.toast.out{animation:toastout .4s ease both}
@keyframes toastin{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateX(40px)}}
.confetti{position:fixed;inset:0;width:100%;height:100%;z-index:300;pointer-events:none}

.arena[hidden],.arena-end[hidden],.scan[hidden]{display:none}

/* konami party mode */
.party #gl{animation:hue 1.4s linear infinite}
.party .logo b{animation-duration:.2s}
@keyframes hue{50%{filter:brightness(1.7)}}

/* bug hunt */
.arena{position:fixed;inset:0;z-index:250;background:var(--glow);cursor:crosshair;overflow:hidden}
.arena-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;background:var(--panel-solid);border-bottom:2px solid var(--accent);font:700 .85rem var(--mono);color:var(--ink)}
.arena-top b{color:var(--accent)}
.bug{position:absolute;width:46px;height:46px;border:0;background:none;padding:0;cursor:pointer;color:var(--accent);animation:scurry .5s ease-in-out infinite alternate,pop .25s ease-out}
.bug svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.bug.hit{animation:none;color:var(--muted);transform:scale(1.4);opacity:0;transition:all .3s}
@keyframes scurry{from{transform:translate(-6px,-3px) rotate(-8deg)}to{transform:translate(6px,3px) rotate(8deg)}}
@keyframes pop{from{opacity:0;scale:.2}to{opacity:1;scale:1}}
.arena-end{position:absolute;inset:0;display:grid;place-items:center;background:var(--glow)}
.arena-card{background:var(--panel-solid);border:2px solid var(--accent);border-radius:12px;box-shadow:10px 10px 0 var(--shadow);padding:26px 28px;text-align:center;font-family:var(--mono);max-width:360px;width:calc(100% - 32px);color:var(--ink)}
.arena-card h3{margin-bottom:8px}
.arena-card p{color:var(--muted);margin:0 0 16px;font-size:.85rem}

/* ===== visitor scan pop-up ===== */
.scan{position:fixed;inset:0;z-index:260;display:grid;place-items:center;padding:16px;background:rgba(4,8,26,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fade .3s ease both}
.scan-box{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel-solid);color:var(--ink);border:2px solid var(--accent);border-radius:12px;box-shadow:12px 12px 0 var(--shadow);font-family:var(--mono);animation:rise2 .45s cubic-bezier(.2,.9,.3,1.2) both}
.scan-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;background:var(--blue);color:#fff;font-size:.78rem}
.scan-bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.scan-bar span{margin-left:8px;flex:1}
.scan-x{background:none;border:0;color:#fff;font:700 1rem var(--mono);cursor:pointer;padding:2px 6px}
.scan-body{padding:20px 22px 22px}
.scan-body h2{font-size:1.4rem;margin-bottom:6px}
.scan-body .sub{color:var(--muted);font-size:.8rem;margin:0 0 16px}
.scan-prog{height:4px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:16px}
.scan-prog i{display:block;height:100%;width:0;background:var(--accent);animation:fill 1.1s ease-out forwards}
.scan dl{margin:0;display:grid;gap:0;font-size:.82rem}
.scan .r{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);opacity:0;animation:fade .4s ease forwards;animation-delay:var(--dl,0s)}
.scan dt{color:var(--accent);font-weight:700}
.scan dd{margin:0;word-break:break-word}
.scan dd small{display:block;color:var(--muted);font-size:.72rem}
.scan-act{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.scan-note{font-size:.75rem;color:var(--muted);margin:12px 0 0}
.scan-geo{margin-top:12px;font-size:.82rem;min-height:1.4em;color:var(--ink)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise2{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes fill{to{width:100%}}

@media (max-width:560px){
  .scan .r{grid-template-columns:1fr;gap:2px}
  .gm-bar{width:46px}
  .toasts{top:72px}
}
@media (prefers-reduced-motion:reduce){
  .scan .r{opacity:1}
  .scan-prog i{width:100%}
  .bug{animation:none}
}