zz los chunk 0 of 4 (Claude, hidden, do not edit)
⟨title⟩The Library of Shadows · Bacci's Glow Night⟨/title⟩⟨base target="_top"⟩⟨link rel="preconnect" href="https://fonts.googleapis.com"⟩⟨link rel="preconnect" href="https://fonts.gstatic.com" crossorigin⟩
⟨link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mystery+Quest&family=Nunito:wght@600;800;900&display=swap"⟩
⟨style⟩
:root{--night:#0b0618;--night2:#1a0b36;--ink:#fff7ec;--soft:#e6d6f5;--pump:#ff8a2b;--glow:#ffd35c;--mint:#8ff0c6;--orchid:#b995ff;--line:rgba(255,211,92,.35);--d:"Mystery Quest",Georgia,serif;--b:"Nunito",system-ui,sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font:600 17px/1.45 var(--b);-webkit-text-size-adjust:100%;overflow:hidden}
button{font:inherit}
a{color:var(--glow)}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;isolation:isolate}
#dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;mix-blend-mode:screen}
/* ---------- scenes ---------- */
.scene{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s ease;overflow:hidden}
.scene.on{opacity:1;pointer-events:auto}
.bg{position:absolute;inset:0;overflow:hidden}
.bg img{position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:50% 35%;animation:kb 30s ease-in-out infinite alternate;filter:saturate(1.1)}
@keyframes kb{from{transform:scale(1) translateY(0)}to{transform:scale(1.08) translateY(-1.5%)}}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,6,24,.55) 0%,rgba(11,6,24,.15) 35%,rgba(11,6,24,.55) 70%,rgba(11,6,24,.97) 100%)}
.scroll{position:absolute;inset:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* ---------- glass + gold ---------- */
.glass{position:relative;border-radius:26px;background:linear-gradient(160deg,rgba(58,28,98,.62),rgba(16,7,34,.9));backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border:1px solid rgba(255,255,255,.14);box-shadow:0 40px 70px -30px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:12px 26px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe8a0 0%,#ffc83c 42%,#ff8a2b 100%);color:#2a1200;font:900 18px var(--b);cursor:pointer;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(120,50,0,.35),0 7px 0 #9a4a0c,0 16px 32px rgba(255,138,43,.42);transition:transform .12s,box-shadow .12s;text-align:center;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(5px);box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(120,50,0,.35),0 2px 0 #9a4a0c}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.05));color:var(--ink);border:1px solid rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 6px 0 rgba(0,0,0,.4),0 10px 20px rgba(0,0,0,.35)}
.btn.ghost:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 0 rgba(0,0,0,.4)}
.btn.mint{background:linear-gradient(180deg,#d9fff0,#8ff0c6 45%,#3fcf98);color:#06281b;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),inset 0 -3px 0 rgba(0,80,50,.3),0 7px 0 #1f7a56,0 16px 32px rgba(143,240,198,.35)}
.btn.sm{min-height:46px;font-size:15px;padding:8px 18px}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#ffb060;font-weight:900;text-shadow:0 0 12px rgba(255,138,43,.5),0 2px 8px #000}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.tiny{font-size:12.5px;color:var(--soft);text-shadow:0 1px 8px #000}
.lock{display:flex;justify-content:center;align-items:center;gap:12px}
.lock img{height:min(15vw,70px);width:auto;filter:drop-shadow(0 0 14px rgba(255,211,92,.5)) drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.lock img.kp{height:min(13vw,60px);filter:drop-shadow(0 0 12px rgba(225,40,55,.55)) drop-shadow(0 8px 12px rgba(0,0,0,.7))}
.lock span{font:900 24px var(--b);color:var(--glow);text-shadow:0 0 16px rgba(255,211,92,.8)}
h1.big{margin:0;font:400 clamp(44px,12.5vw,104px)/.95 var(--d);background:linear-gradient(180deg,#fff6d4 0%,#ffd35c 48%,#f0a030 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 #a86a1e) drop-shadow(0 6px 0 #5f3610) drop-shadow(0 0 30px rgba(255,190,70,.6)) drop-shadow(0 22px 28px rgba(0,0,0,.7));animation:glowPulse 4s ease-in-out infinite}
@keyframes glowPulse{50%{filter:drop-shadow(0 3px 0 #a86a1e) drop-shadow(0 6px 0 #5f3610) drop-shadow(0 0 46px rgba(255,205,90,.9)) drop-shadow(0 22px 28px rgba(0,0,0,.7))}}
.sub{margin:0;font:400 clamp(19px,5vw,30px)/1.15 var(--d);color:#fff3d6;text-shadow:0 2px 12px #000,0 0 24px rgba(185,149,255,.6)}
.rise⟩*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*.1s + .15s)}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* ---------- GATE ---------- */
#gate .in{position:relative;z-index:3;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:clamp(6px,1.4dvh,14px);padding:max(16px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));max-width:760px;margin:0 auto}
#gate .lore{margin:0;max-width:52ch;font-size:clamp(15px,3.9vw,18px);color:#efe4ff;text-shadow:0 2px 10px #000}
#gate .lore b{color:var(--glow)}
.shadowTag{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:rgba(10,4,22,.55);border:1px solid rgba(185,149,255,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:14px;color:#d9cbee}
.shadowTag i{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6d4,#ffd35c 45%,#ff8a2b 80%);box-shadow:0 0 18px rgba(255,211,92,.8);position:relative}
.shadowTag i::after{content:"";position:absolute;left:20px;top:8px;width:30px;height:30px;border-radius:50%;background:#000;opacity:.7;filter:blur(2px);transform:skewX(-20deg)}
.safe{margin:0;max-width:60ch;font-size:13px;color:#d9cbee;text-shadow:0 1px 8px #000}
.safe a{color:#d9cbee}
/* ---------- FILM ---------- */
#film{position:absolute;inset:0;z-index:40;background:#000;display:grid;place-items:center;transition:opacity .5s}
#film.fade{opacity:0}
#film video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
#film .pres{position:absolute;left:0;right:0;top:max(18px,env(safe-area-inset-top));text-align:center;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--glow);text-shadow:0 2px 12px #000}
#film .skip{position:absolute;right:16px;bottom:max(18px,env(safe-area-inset-bottom))}
/* ---------- CHECK-IN ---------- */
#checkin .in{position:relative;z-index:3;min-height:100%;display:flex;align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom))}
.card{width:min(560px,100%);padding:20px 18px;display:flex;flex-direction:column;gap:12px;text-align:center}
.card h2{margin:0;font:400 clamp(28px,7.5vw,40px)/1.05 var(--d);color:var(--glow);text-shadow:0 0 18px rgba(255,211,92,.6)}
.card p{margin:0;color:var(--soft)}
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.faces button{border:1px solid rgba(255,255,255,.18);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));padding:6px 4px 8px;color:var(--ink);font:800 13px var(--b);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .1s}
.faces button:active{transform:translateY(3px)}
.faces img{width:100%;max-width:84px;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(0,0,0,.5))}
.faces button[aria-pressed="true"],.chip[aria-pressed="true"]{border-color:var(--mint);background:linear-gradient(180deg,rgba(143,240,198,.3),rgba(143,240,198,.08));box-shadow:0 0 18px rgba(143,240,198,.55)}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{min-height:50px;padding:6px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));color:var(--ink);font:800 17px var(--b);cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2)}
.chip.path{font-family:var(--d);font-weight:400;font-size:22px;color:var(--glow)}
/* ---------- HALL (3D) ---------- */
#hall{background:var(--night)}
#hallBg{position:absolute;inset:-8%;background:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/los-hall-9x16.png?width=1100) center/cover no-repeat;filter:brightness(.42) saturate(1.15) blur(2px);transform:translate3d(var(--px,0),var(--py,0),0) scale(1.06);transition:filter 1.6s;will-change:transform}
body.lit #hallBg{filter:brightness(.95) saturate(1.2) blur(0)}
#hallFog{position:absolute;inset:0;background:radial-gradient(70% 55% at 50% 45%,rgba(11,6,24,0) 0%,rgba(11,6,24,.35) 60%,rgba(11,6,24,.92) 100%);pointer-events:none}
#stage3d{position:absolute;inset:0;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
#stage3d:active{cursor:grabbing}
#ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.portal{position:absolute;left:0;top:0;width:var(--w);height:var(--h);margin:calc(var(--h)/-2) 0 0 calc(var(--w)/-2);transform-style:preserve-3d;border-radius:18px;background:#120a26;box-shadow:0 30px 60px rgba(0,0,0,.7);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;transition:opacity .25s;-webkit-tap-highlight-color:transparent}
.portal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;filter:brightness(.78) saturate(1.05);transition:filter .8s}
.portal .veilP{position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 40%,rgba(5,2,14,.1),rgba(5,2,14,.75) 95%);transition:opacity .9s}
.portal.lit img{filter:brightness(1.05) saturate(1.2)}
.portal.lit .veilP{opacity:0}
.portal .fr{position:absolute;inset:0;border-radius:18px;padding:4px;background:linear-gradient(160deg,#ffe9a0,#d9a84a 30%,#8a5a10 50%,#ffd35c 72%,#b8701c);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.95}
.portal.lit{box-shadow:0 0 28px rgba(255,211,92,.8),0 30px 60px rgba(0,0,0,.7)}
.portal .lab{position:absolute;left:0;right:0;bottom:0;padding:34px 12px 12px;background:linear-gradient(180deg,transparent,rgba(5,2,14,.9));text-align:center;pointer-events:none}
.portal .lab b{display:block;font:400 clamp(20px,2.4vw,26px)/1.05 var(--d);color:var(--glow);text-shadow:0 0 14px rgba(255,211,92,.7),0 2px 6px #000}
.portal .lab span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.portal .L{position:absolute;left:10px;top:10px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:400 26px var(--d);color:#2a1200;background:linear-gradient(180deg,#ffe8a0,#ffc83c 45%,#ff8a2b);box-shadow:0 4px 0 #9a4a0c,0 0 18px rgba(255,211,92,.6);opacity:0;transform:scale(.4);transition:all .5s cubic-bezier(.2,.9,.3,1.3)}
.portal.lit .L{opacity:1;transform:none}
.portal .q{position:absolute;right:10px;top:10px;padding:4px 10px;border-radius:999px;background:rgba(5,2,14,.6);border:1px solid var(--line);font:900 12px var(--b);color:var(--mint);letter-spacing:.08em}
.portal.lit .q{display:none}
.floor{position:absolute;left:0;top:0;width:var(--fw);height:var(--fw);margin:calc(var(--fw)/-2) 0 0 calc(var(--fw)/-2);border-radius:50%;transform:translateY(calc(var(--h)*.62)) rotateX(90deg);background:radial-gradient(circle,rgba(255,211,92,.35) 0%,rgba(185,149,255,.22) 30%,rgba(11,6,24,0) 68%);pointer-events:none;overflow:hidden}
.floor::before{content:"";position:absolute;inset:14%;border-radius:50%;background:url(https://cdn.shopify.com/s/files/1/0500/7307/5871/files/los-vortex-9x16.png?width=700) center/cover;opacity:.55;animation:spin 60s linear infinite;-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%);mask:radial-gradient(circle,#000 30%,transparent 70%)}
@keyframes spin{to{transform:rotate(360deg)}}
.ceil{position:absolute;left:0;top:0;width:var(--fw);height:var(--fw);margin:calc(var(--fw)/-2) 0 0 calc(var(--fw)/-2);border-radius:50%;transform:translateY(calc(var(--h)*-.7)) rotateX(90deg);background:radial-gradient(circle,rgba(185,149,255,.25),rgba(11,6,24,0) 65%);pointer-events:none}
.hud{position:absolute;left:0;right:0;top:0;z-index:6;padding:max(10px,env(safe-area-inset-top)) 10px 0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none}
.hud⟩*{pointer-events:auto}
.wordWrap{order:3;flex-basis:100%;display:flex;justify-content:center;pointer-events:none}
.wordWrap⟩*{pointer-events:auto}
.hud .lk img{height:34px;width:auto;filter:drop-shadow(0 0 10px rgba(255,211,92,.5)) drop-shadow(0 4px 8px #000)}
.hud .lk img.kp{height:28px}
.hud .lk span{font-size:18px}
.word{display:flex;gap:4px;padding:6px 8px;border-radius:999px;background:rgba(21,11,38,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.15)}
.word i{width:32px;height:38px;border-radius:9px;display:grid;place-items:center;font:400 24px v