/* Space School — Laser Link */
.lz{position:relative;min-height:clamp(460px,48vw,600px);padding:14px 16px 18px;border-radius:24px;overflow:hidden;user-select:none;-webkit-user-select:none;
	background:radial-gradient(60% 70% at 15% 20%,rgba(124,58,237,.45),transparent 70%),radial-gradient(55% 60% at 90% 85%,rgba(14,165,233,.35),transparent 70%),linear-gradient(160deg,#0b1150,#060a33)}
.lz-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 8% 30%,#fff,transparent),radial-gradient(1px 1px at 26% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 18%,#fff,transparent),radial-gradient(1px 1px at 62% 64%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 22%,#fff,transparent),radial-gradient(1px 1px at 92% 52%,#fff,transparent),radial-gradient(1px 1px at 55% 90%,#fff,transparent);animation:lztw 4s ease-in-out infinite alternate}
@keyframes lztw{to{opacity:.45}}
.lz-sign{position:relative;z-index:2;max-width:720px;margin:0 auto 14px;padding:10px 16px;border-radius:18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);text-align:center;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lz-sign small{display:block;color:#5ee0ff;font:800 12px "Nunito Sans",sans-serif;text-transform:uppercase;letter-spacing:.4px}
.lz-sign b{display:block;margin-top:2px;font:700 clamp(18px,2.2vw,24px)/1.25 Fredoka,sans-serif;color:#fff}
.lz-img{display:block;max-height:110px;margin:8px auto 0;border-radius:12px}
.lz-board{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(70px,14vw,200px);align-items:center;touch-action:none}
.lz-beams{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.lz-col{position:relative;z-index:1;display:grid;gap:12px}
.lz-col.r{justify-items:stretch}

/* planets */
.lz-p{display:flex;align-items:center;gap:12px;min-height:64px;padding:6px 14px 6px 6px;border:0;border-radius:999px;background:rgba(255,255,255,.06);color:#fff;font:800 16px "Nunito Sans",sans-serif;text-align:start;cursor:grab;transition:background .2s,transform .2s,box-shadow .2s;animation:lzin .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d) * 70ms)}
@keyframes lzin{from{opacity:0;transform:translateX(-30px)}}
.lz-p:hover{background:rgba(255,255,255,.12);transform:translateX(3px)}
.lz-orb{position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 32% 30%,var(--a),var(--b) 55%,var(--c));box-shadow:inset -6px -8px 14px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--b) 60%,transparent)}
.lz-orb .ring{position:absolute;left:-12px;top:20px;width:76px;height:12px;border-radius:50%;border:3px solid rgba(255,255,255,.55);transform:rotate(-18deg)}
.lz-p.is-arm .lz-orb,.lz-p.is-pick .lz-orb{box-shadow:inset -6px -8px 14px rgba(0,0,0,.3),0 0 0 4px #fff,0 0 30px #fff}
.lz-p.is-pick{background:rgba(255,255,255,.16)}
.lz-p.is-linked{box-shadow:inset 0 0 0 2px var(--lc)}
.lz-p.is-lockd{cursor:default;box-shadow:inset 0 0 0 2px #4ade80;background:rgba(74,222,128,.12)}
.lz-p.is-lockd .lz-t::after{content:" 🔒";font-size:12px}
.lz-t{min-width:0;overflow-wrap:anywhere;line-height:1.25}

/* stations */
.lz-s{position:relative;display:flex;align-items:center;min-height:64px;padding:10px 16px 10px 30px;border:2px solid rgba(94,224,255,.35);border-radius:18px;background:linear-gradient(160deg,rgba(30,41,112,.9),rgba(12,18,70,.9));color:#fff;font:800 16px "Nunito Sans",sans-serif;text-align:start;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s;animation:lzin2 .5s cubic-bezier(.2,1.4,.4,1) both;animation-delay:calc(var(--d) * 70ms + 120ms)}
@keyframes lzin2{from{opacity:0;transform:translateX(30px)}}
.lz-s::after{content:"";position:absolute;right:10px;top:50%;width:18px;height:4px;margin-top:-2px;border-radius:2px;background:rgba(94,224,255,.35);box-shadow:0 -8px 0 rgba(94,224,255,.2),0 8px 0 rgba(94,224,255,.2)}
.lz-ant{position:absolute;right:26px;top:-12px;width:2px;height:12px;background:#94a3b8}
.lz-ant::after{content:"";position:absolute;left:-3px;top:-6px;width:8px;height:8px;border-radius:50%;background:#f87171;animation:lzblink 1.4s ease-in-out infinite}
@keyframes lzblink{50%{opacity:.25}}
.lz-light{position:absolute;left:8px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#334155;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25)}
.lz-s.is-near,.lz-s:hover{transform:translateX(-3px);border-color:#5ee0ff;box-shadow:0 0 22px rgba(94,224,255,.45)}
.lz-s.is-linked{border-color:var(--lc)}
.lz-s.is-linked .lz-light{background:var(--lc);box-shadow:0 0 12px var(--lc)}

/* beams */
.lz-live,.lz-beam{fill:none;stroke-width:5;stroke-linecap:round}
.lz-live{stroke-dasharray:10 8;animation:lzflow .5s linear infinite;opacity:.9}
.lz-beam{stroke-dasharray:14 6;animation:lzflow .9s linear infinite}
@keyframes lzflow{to{stroke-dashoffset:-20}}
.lz-beam.is-new{animation:lzflow .9s linear infinite,lzzap .35s ease-out}
@keyframes lzzap{from{stroke-width:12;opacity:.4}}
.lz-beam.is-lock,.lz-beam.is-good{stroke-dasharray:none;stroke-width:6}
.lz-beam.is-break{animation:lzbreak .6s ease-out forwards}
@keyframes lzbreak{30%{stroke-dasharray:4 10;stroke-width:7}100%{opacity:0;stroke-dasharray:1 30}}
.lz-beam.is-hint{stroke-dasharray:6 8;stroke-width:3;opacity:.75;filter:none;animation:lzflow 1.4s linear infinite,lzfade .4s ease-out both}
@keyframes lzfade{from{opacity:0}}
.lz-s.is-right,.lz-p.is-right{border-color:#4ade80;box-shadow:0 0 24px rgba(74,222,128,.55)}
.lz-s.is-right .lz-light{background:#4ade80;box-shadow:0 0 14px #4ade80}
.lz-s.is-wrong{border-color:#f87171;animation:lzshake .45s}
@keyframes lzshake{25%,75%{transform:translateX(-7px)}50%{transform:translateX(7px)}}

/* round flashes */
.lz.is-win::after,.lz.is-lose::after,.lz.is-part::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:24px;animation:fzflash .9s ease-out forwards}
.lz.is-win::after{box-shadow:inset 0 0 0 5px #4ade80,inset 0 0 60px rgba(74,222,128,.35)}
.lz.is-lose::after{box-shadow:inset 0 0 0 5px #f87171,inset 0 0 60px rgba(248,113,113,.3)}
.lz.is-part::after{box-shadow:inset 0 0 0 5px #f59e0b,inset 0 0 60px rgba(245,158,11,.3)}
@keyframes fzflash{to{opacity:0}}
.ssa.is-mode .ssa-answers.t-mode{display:block}

@media (max-width:640px){
	.lz{padding:10px 8px 14px}
	.lz-board{column-gap:36px}
	.lz-p{min-height:54px;gap:8px;padding:4px 8px 4px 4px;font-size:13.5px}
	.lz-orb{width:38px;height:38px}.lz-orb .ring{left:-8px;top:14px;width:54px;height:9px}
	.lz-s{min-height:54px;padding:8px 10px 8px 24px;font-size:13.5px}
	.lz-s::after{display:none}
}
@media (prefers-reduced-motion:reduce){.lz *{animation:none!important}}

/* ================= themes ================= */
.th-power .lz-orb,.th-spider .lz-orb,.th-city .lz-orb{background:none!important;box-shadow:none!important;border-radius:12px}
.th-power .lz-orb svg,.th-spider .lz-orb svg,.th-city .lz-orb svg{width:100%;height:100%;display:block}
.th-power .lz-light,.th-spider .lz-light,.th-city .lz-light{width:26px;height:26px;margin-top:-13px;left:4px;background:none!important;box-shadow:none!important}
.th-power .lz-light svg,.th-spider .lz-light svg,.th-city .lz-light svg{width:100%;height:100%;display:block}
.th-power .lz-s,.th-spider .lz-s,.th-city .lz-s{padding-left:38px}
.th-power .lz-ant,.th-spider .lz-ant,.th-city .lz-ant,.th-power .lz-s::after,.th-spider .lz-s::after{display:none}
/* 🔌 power board */
.lz.th-power{background:radial-gradient(circle at 20% 20%,#64748b,transparent 60%),linear-gradient(160deg,#475569,#334155 60%,#1e293b)}
.th-power .lz-stars{background-image:radial-gradient(circle at 18px 18px,#94a3b8 4px,#1e293b 5px,transparent 6px),radial-gradient(circle at calc(100% - 18px) 18px,#94a3b8 4px,#1e293b 5px,transparent 6px),radial-gradient(circle at 18px calc(100% - 18px),#94a3b8 4px,#1e293b 5px,transparent 6px),radial-gradient(circle at calc(100% - 18px) calc(100% - 18px),#94a3b8 4px,#1e293b 5px,transparent 6px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 2px,transparent 2px 6px);animation:none}
.th-power .lz-sign{background:#facc15;color:#1e293b;border:4px solid #1e293b;box-shadow:0 6px 0 rgba(0,0,0,.3)}
.th-power .lz-sign small{color:#1e293b}.th-power .lz-sign b{color:#1e293b}
.th-power .lz-p{background:rgba(15,23,42,.45)}
.th-power .lz-s{background:linear-gradient(180deg,#f1f5f9,#cbd5e1);color:#1e293b;border-color:#94a3b8}
.th-power .lz-beam{stroke-dasharray:none;stroke-width:7;filter:none;stroke-linecap:round}
.th-power .lz-live{stroke-dasharray:none;stroke-width:7}
.th-power .lz-s.is-right{box-shadow:0 0 0 3px #4ade80,0 0 30px rgba(253,224,71,.9)}
.th-power .lz-s.is-right::before{content:"💡";position:absolute;right:10px;top:-14px;font-size:22px;filter:drop-shadow(0 0 10px #fde047)}
/* 🕸️ jungle spider */
.lz.th-spider{background:radial-gradient(70% 60% at 50% 0%,rgba(190,242,100,.35),transparent 70%),linear-gradient(180deg,#14532d,#166534 50%,#052e16)}
.th-spider .lz-stars{background-image:radial-gradient(3px 3px at 12% 30%,rgba(254,240,138,.7),transparent),radial-gradient(2px 2px at 70% 20%,rgba(254,240,138,.6),transparent),radial-gradient(3px 3px at 88% 70%,rgba(254,240,138,.6),transparent);animation:lztw 2.6s ease-in-out infinite alternate}
.lz-leaf{position:absolute;width:160px;height:80px;border-radius:0 100% 0 100%;background:linear-gradient(135deg,#22c55e,#15803d);opacity:.45;pointer-events:none}
.lz-leaf.a{left:-40px;top:20%;transform:rotate(20deg)}.lz-leaf.b{right:-50px;top:8%;transform:rotate(-30deg)}.lz-leaf.c{right:20%;bottom:-30px;transform:rotate(160deg)}
.th-spider .lz-sign{background:rgba(5,46,22,.7);border-color:rgba(190,242,100,.4)}.th-spider .lz-sign small{color:#bef264}
.th-spider .lz-p{background:rgba(5,46,22,.45)}
.th-spider .lz-s{background:linear-gradient(160deg,#166534,#14532d);border-color:rgba(190,242,100,.45)}
.th-spider .lz-beam,.th-spider .lz-live{stroke:#f8fafc!important;stroke-width:2.5;stroke-dasharray:1 9;stroke-linecap:round;filter:drop-shadow(0 0 4px #fff)}
.th-spider .lz-beam{stroke-width:4}
.th-spider .lz-beam.is-good,.th-spider .lz-beam.is-lock{stroke:#d9f99d!important;stroke-dasharray:2 7}
/* 🏙️ city bridges at night */
.lz.th-city{background:radial-gradient(60% 40% at 80% 10%,rgba(253,230,138,.2),transparent 70%),linear-gradient(180deg,#0f172a,#1e1b4b 60%,#0b1026)}
.lz-moon{position:absolute;right:8%;top:6%;width:50px;height:50px;border-radius:50%;box-shadow:-12px 6px 0 0 #fef3c7;transform:rotate(-20deg);pointer-events:none}
.lz-sky{position:absolute;left:0;right:0;bottom:0;height:42%;pointer-events:none;background:
	linear-gradient(0deg,#0b1026 0 30%,transparent 30%),
	repeating-linear-gradient(90deg,#111827 0 60px,#1f2937 60px 100px,#111827 100px 150px,transparent 150px 180px);
	-webkit-mask:linear-gradient(0deg,#000 0 30%,transparent 30%),repeating-linear-gradient(90deg,#000 0 150px,transparent 150px 180px);opacity:.8}
.th-city .lz-sign{background:rgba(15,23,42,.8);border-color:rgba(253,230,138,.4)}.th-city .lz-sign small{color:#fde68a}
.th-city .lz-p{background:rgba(15,23,42,.6)}
.th-city .lz-s{background:linear-gradient(160deg,#1e293b,#0f172a);border-color:rgba(253,230,138,.45)}
.th-city .lz-beam{stroke-dasharray:3 14;stroke-width:6;stroke-linecap:round;animation:lzflow .7s linear infinite}
.th-city .lz-beam.is-good,.th-city .lz-beam.is-lock{stroke:#fde047!important;stroke-dasharray:4 12;animation:lzflow .5s linear infinite;filter:drop-shadow(0 0 8px #fde047)}
