@font-face{font-family:"Cormorant";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"GMono";src:url(fonts/geistmono.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#07060b;--plum:#170f22;--plum2:#22142f;--ink:#efe6d8;--muted:#9b90a8;--dim:#5d556a;
  --brass:#c9a24a;--gold:#e8c26a;--pink:#ff4fa3;--peri:#8b7bff;
  --lyra:#ff6fb5;--gemini:#2fd4c4;--luna:#f2b13c;--spark:#9b7bff;--haru:#7cf29a;--mina:#e8c26a;
  --serif:"Cormorant",Georgia,serif;--mono:"GMono",ui-monospace,Menlo,monospace;
  --st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#000;color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font-family:var(--mono);font-size:13px;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
input{font:inherit;color:inherit}
.hidden{display:none!important}
.serif{font-family:var(--serif)}
.center{text-align:center}
.tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
.micro{font-size:8.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.gold{color:var(--gold)}.pink{color:var(--pink)}.amber{color:var(--luna)}.violet{color:var(--spark)}.green{color:var(--haru)}

#app{position:relative;margin:0 auto;max-width:480px;height:100vh;height:100dvh;background:var(--bg);overflow:hidden;isolation:isolate}
@media (min-width:481px){#app{box-shadow:0 0 0 1px #1d1726,0 0 80px #2a0f4a55}}

/* HUD */
#hud{position:absolute;z-index:50;top:0;left:0;right:0;padding:calc(var(--st) + 10px) 14px 0;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.hud-label{font-size:8.5px;letter-spacing:.24em;color:var(--dim);transition:opacity .4s}
.hud-btns{display:flex;gap:8px;pointer-events:auto}
.hud-btn{height:30px;min-width:30px;padding:0 10px;border-radius:15px;background:#0d0a14cc;border:1px solid #ffffff1c;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:grid;place-items:center;font-size:9.5px;letter-spacing:.2em;color:var(--ink)}
.hud-btn svg{width:16px;height:16px}
.hud-btn .ico-off{display:none}
#app.muted .hud-btn .ico-on{display:none}#app.muted .hud-btn .ico-off{display:block;color:var(--pink)}
.hud-btn.exit{border-color:#ff4fa355;color:#ffd1e6}
.hud-btn:active{transform:scale(.94)}

/* screens */
.screen{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translateY(14px) scale(.985);transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s .55s;overflow:hidden}
.screen.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease),visibility 0s}
.screen.tabbed{padding-bottom:calc(64px + var(--sb))}

.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:48px;border-radius:24px;padding:0 22px;font-family:var(--serif);font-size:18px;letter-spacing:.02em;transition:transform .15s,filter .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,#9a8cff,#7563f0);color:#120c22;box-shadow:0 8px 30px #7a66ff55,inset 0 1px 0 #ffffff55}
.btn.ghost{border:1px solid #ffffff22;color:var(--ink);background:#ffffff06}
.btn.danger{border:1px solid #ff4fa366;color:#ffc2dd;background:#ff4fa312}
.btn.wide{width:100%;justify-content:space-between}
.btn.wide:not(.primary){justify-content:center}
.btn .arr{font-family:var(--mono);font-size:14px}

/* splash */
#s-splash{display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 50px) 22px calc(var(--sb) + 22px)}
.splash-glow{position:absolute;inset:0;background:radial-gradient(40% 25% at 30% 30%,#ff4fa31f,transparent 70%),radial-gradient(40% 25% at 72% 32%,#2fd4c41a,transparent 70%),radial-gradient(50% 30% at 50% 45%,#8b7bff1a,transparent 70%)}
.ring369{position:relative;width:min(62vw,250px);height:auto;flex:0 1 auto;max-height:46vh;animation:breathe 7s ease-in-out infinite}
.ring369 .r{fill:none;stroke:#ffffff1f;stroke-width:1}
.ring369 .core{stroke:#a493ff;stroke-width:1.3;filter:drop-shadow(0 0 8px #8b7bff)}
.ring369 .axis{stroke:#ffffff26}
.ring369 .dot{fill:#a493ff}.ring369 .dot.hot{fill:#e7defe;filter:drop-shadow(0 0 6px #fff)}
.ring369 .n{font-family:var(--serif);font-size:24px;text-anchor:middle}
.n3{fill:var(--gemini)}.n6{fill:#d8cfff}.n9{fill:var(--lyra)}
@keyframes breathe{50%{transform:scale(1.025);filter:brightness(1.15)}}
.splash-copy{position:relative;margin-top:auto;width:100%;text-align:center}
.splash-copy h1{font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;margin:0 0 12px;letter-spacing:.01em}
.kicker{font-size:8.5px;letter-spacing:.28em;color:var(--muted);margin-bottom:16px}
.splash-copy p{font-family:var(--serif);font-size:18px;line-height:1.35;color:#c9bfd4;margin:0 auto 26px;max-width:320px}
.whisper{margin-top:18px;font-size:9px;letter-spacing:.3em;color:var(--peri);animation:flick 4s infinite}
.splash-copy .micro{margin-top:8px}
@keyframes flick{0%,92%,100%{opacity:1}93%{opacity:.2}95%{opacity:.9}96%{opacity:.3}}

/* lock */
#s-lock{color:#fff}
.lock-bg{position:absolute;inset:0;background:#0b0a0d url(assets/lock.jpg) center top/100% auto no-repeat;transform-origin:50% 0;animation:drift 22s ease-in-out infinite alternate}
@media (min-aspect-ratio:1/2){.lock-bg{background-size:auto 72%}}
@keyframes drift{to{transform:scale(1.06)}}
.lock-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0009 0,transparent 16%,transparent 42%,#0b0a0d 66%,#050407 100%)}
.lock-top{position:absolute;top:calc(var(--st) + 48px);left:20px;right:20px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:.25em;color:#ffffffaa}
.lock-mid{position:absolute;left:18px;right:18px;bottom:calc(var(--sb) + 120px);text-align:center}
.lock-time{font-family:var(--serif);font-weight:300;font-size:86px;line-height:1;letter-spacing:.02em;text-shadow:0 0 30px #e8c26a55}
.lock-sub{font-size:8.5px;letter-spacing:.22em;color:#ffffffb0;margin:8px 0 18px}
.notif{display:flex;gap:12px;align-items:center;width:100%;text-align:left;padding:11px 13px;border-radius:16px;background:#120d1acc;border:1px solid #e8c26a33;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:notifIn .8s .6s both var(--ease)}
.notif img{width:34px;height:34px;border-radius:50%;object-fit:cover;border:1px solid var(--gold)}
.notif-h{font-size:8.5px;letter-spacing:.2em;color:var(--gold);margin-bottom:3px}
.notif-b{font-family:var(--serif);font-size:16px}
@keyframes notifIn{from{opacity:0;transform:translateY(16px)}}
.lock-enter{position:absolute;left:0;right:0;bottom:calc(var(--sb) + 56px);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:#ffffffcc;animation:nudge 2.4s infinite}
.chev{font-size:18px;color:var(--gold)}
@keyframes nudge{50%{transform:translateY(-5px);opacity:.7}}
.lock-foot{position:absolute;bottom:calc(var(--sb) + 22px);width:100%;text-align:center;font-family:var(--serif);font-size:12px;letter-spacing:.45em;color:#ffffff88}

/* blackout */
#s-blackout{background:#000;transition:none!important;transform:none}
#s-blackout.on .bo-num{animation:boN .83s steps(8) both}
.bo-num{position:absolute;inset:0;display:grid;place-items:center;font-size:11px;letter-spacing:.5em;color:#ff4fa3;opacity:0}
@keyframes boN{0%{opacity:0}30%{opacity:.9}40%{opacity:0}60%{opacity:.6;transform:translateX(3px)}70%{opacity:0}100%{opacity:0}}

/* greet */
.greet-art{position:absolute;inset:0 0 30% 0;display:flex;justify-content:center;align-items:flex-start}
.greet-art img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transform:scale(1.12);opacity:0;transition:opacity 2.2s,transform 9s ease-out}
#s-greet.on .greet-art img{opacity:1;transform:scale(1)}
.greet-shade{position:absolute;inset:0;background:linear-gradient(180deg,#07060b66 0,transparent 18%,transparent 45%,#07060be6 66%,#07060b 74%)}
.greet-panel{position:absolute;left:0;right:0;bottom:0;padding:0 24px calc(var(--sb) + 24px)}
.greet-panel .tag{margin-bottom:12px}
.caption{min-height:3.2em;line-height:1.38;cursor:pointer}
.caption.serif{font-size:22px}
.caption .cur{display:inline-block;width:.45em;height:1em;vertical-align:-.12em;background:currentColor;opacity:.7;animation:blinkc 1s steps(2) infinite;margin-left:2px}
@keyframes blinkc{50%{opacity:0}}
#greetCap{min-height:6.2em}
.skip-hint{font-size:8px;letter-spacing:.2em;color:var(--dim);margin:8px 0 16px;text-transform:uppercase}

/* home */
#s-home{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--st) + 44px);background:radial-gradient(90% 50% at 50% 30%,#2a1450 0,#0f0a1c 55%,var(--bg) 100%)}
.home-head{display:flex;flex-direction:column;align-items:center;gap:6px;color:#cdbfff}
.tri{width:28px;height:26px;filter:drop-shadow(0 0 6px #8b7bff)}
.brandline{font-family:var(--serif);font-size:15px;letter-spacing:.32em;color:#e3dbff}
.orb-wrap{width:min(80vw,330px);aspect-ratio:1;margin:10px 0 4px;flex:0 1 auto;cursor:pointer}
@media (max-height:820px){.orb-wrap{width:min(66vw,270px);margin:4px 0 0}}
@media (max-height:700px){.orb-wrap{width:min(50vw,200px)}}
.orb{width:100%;height:100%;overflow:visible}
.orbit{fill:none;stroke:#b9a6ff;stroke-opacity:.45;stroke-width:1}
.orbit.faint{stroke-opacity:.15;stroke-dasharray:2 5}
.spin{transform-origin:150px 150px;animation:spin 40s linear infinite}
.spin.b{animation-duration:55s;animation-direction:reverse}.spin.c{animation-duration:70s}
@keyframes spin{to{transform:rotate(360deg)}}
.core-pulse{animation:cp 3.69s ease-in-out infinite;transform-origin:150px 150px}
@keyframes cp{50%{transform:scale(1.5);opacity:.6}}
.onode{animation:np 3s ease-in-out infinite}
@keyframes np{50%{opacity:.6}}
.tagline{font-size:23px;color:#efe8ff;margin:2px 0 14px;text-shadow:0 0 18px #8b7bff88}
.council-row{display:flex;gap:10px;justify-content:center;width:100%;padding:0 12px}
.cbubble{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:9px;letter-spacing:.06em;color:#d9d0e6;width:62px}
.cbubble .o{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:1.5px solid var(--c);background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 70%,#fff) 0,color-mix(in srgb,var(--c) 35%,#0b0714) 45%,#0b0714 75%);box-shadow:0 0 14px color-mix(in srgb,var(--c) 60%,transparent),inset 0 0 10px #0008;transition:transform .2s}
.cbubble .o svg{width:20px;height:20px;color:#fff;filter:drop-shadow(0 0 4px #fff)}
.cbubble:active .o{transform:scale(.92)}
.cbubble span{white-space:nowrap}
.mission-card{margin:14px 16px 0;width:calc(100% - 32px);padding:12px 14px;border-radius:16px;background:linear-gradient(180deg,#1b1229ee,#120c1cee);border:1px solid #ffffff14;display:flex;gap:12px;align-items:center;cursor:pointer}
.mission-card .dotc{width:9px;height:9px;border-radius:50%;background:var(--c,#ff4fa3);box-shadow:0 0 10px var(--c,#ff4fa3);flex:none;animation:np 1.6s infinite}
.mission-card .mc-t{font-family:var(--serif);font-size:17px;line-height:1.15}
.mission-card .mc-k{font-size:8.5px;letter-spacing:.2em;color:var(--muted);margin-bottom:3px}
.mission-card .go{margin-left:auto;font-size:15px;color:var(--peri)}
.chat-reply{margin:10px 16px 0;width:calc(100% - 32px);padding:10px 13px;border-radius:14px;background:#e8c26a10;border:1px solid #e8c26a33;font-family:var(--serif);font-size:15.5px;line-height:1.3;animation:notifIn .4s both}
.chat-reply b{display:block;font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.22em;color:var(--gold);margin-bottom:3px}
.talk{margin:auto 16px 12px;width:calc(100% - 32px);display:flex;align-items:center;height:46px;border-radius:23px;background:#ffffff0d;border:1px solid #ffffff1a;padding:0 6px 0 18px}
.talk input{flex:1;background:none;border:0;outline:0;font-family:var(--serif);font-size:17px;min-width:0}
.talk input::placeholder{color:#a79cb8}
.talk button{width:36px;height:36px;display:grid;place-items:center;color:#c6b8ff}
.talk button svg{width:20px;height:20px}

/* tabs */
#tabs{position:absolute;z-index:40;left:0;right:0;bottom:0;height:calc(64px + var(--sb));padding-bottom:var(--sb);display:flex;background:linear-gradient(180deg,#0e0a17f2,#07060bfa);border-top:1px solid #ffffff10;transform:translateY(110%);transition:transform .45s var(--ease)}
#app.show-tabs #tabs{transform:none}
#tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:9px;letter-spacing:.08em;color:#8c829c;position:relative}
#tabs button svg{width:22px;height:22px}
#tabs button.on{color:#d8ccff}
#tabs button.on::before{content:"";position:absolute;top:8px;width:44px;height:44px;border-radius:14px;background:#8b7bff22;box-shadow:0 0 18px #8b7bff33;z-index:-1}
.badge{position:absolute;top:10px;right:calc(50% - 18px);width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 8px var(--pink)}

/* call */
#s-call{display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 58px) 22px calc(var(--sb) + 18px);text-align:center}
.call-bg{position:absolute;inset:0;background:radial-gradient(80% 45% at 50% 28%,#3a2408 0,#1a0f1e 50%,var(--bg) 100%);z-index:-1}
.call-top{color:var(--luna);opacity:.9}
.call-avatar{position:relative;width:150px;height:150px;margin:22px 0 18px;flex:none}
.call-avatar img{position:absolute;inset:10px;width:130px;height:130px;border-radius:50%;object-fit:cover;border:2px solid var(--luna);filter:sepia(.5) saturate(1.4) hue-rotate(-12deg) brightness(1.05);box-shadow:0 0 40px #f2b13c88}
.ring{position:absolute;inset:0;border-radius:50%;border:1px solid #f2b13c88;animation:ringp 2s infinite}
.ring.r2{animation-delay:1s}
@keyframes ringp{from{transform:scale(.85);opacity:1}to{transform:scale(1.45);opacity:0}}
#s-call.active .ring{animation:none;opacity:.25;transform:scale(1.05)}
.call-name{font-size:46px;line-height:1;margin-bottom:8px}
.call-timer{font-size:12px;letter-spacing:.2em;color:var(--muted);margin-top:8px}
.call-quote{font-style:italic;font-size:19px;line-height:1.35;color:#e6dccd;max-width:320px;margin:18px 0 0}
.caption-box{width:100%;margin-top:16px;text-align:left;padding:14px 16px;border-left:2px solid var(--luna);background:#f2b13c0d;border-radius:0 12px 12px 0}
.cap-who{font-size:8.5px;letter-spacing:.22em;margin-bottom:6px}
#callCap{font-size:20px;min-height:4.2em}
.wave{display:flex;gap:3px;align-items:center;height:34px;margin:auto 0 18px}
.wave i{width:3px;border-radius:2px;background:var(--luna);opacity:.85;animation:wv 1s ease-in-out infinite}
@keyframes wv{0%,100%{height:5px}50%{height:var(--h,24px)}}
.call-actions{display:flex;gap:30px;justify-content:center}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:9px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.cbtn .c{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:22px;transition:transform .15s}
.cbtn:active .c{transform:scale(.92)}
.cbtn.decline .c{background:#5a1830;border:1px solid #ff4f7a66;color:#ff9ab4}
.cbtn.text .c{background:#2a2040;border:1px solid #ffffff22;color:#d8ccff}
.cbtn.answer .c{background:radial-gradient(circle at 40% 35%,#ffd98a,#f2b13c 60%,#b07816);color:#2a1800;box-shadow:0 0 26px #f2b13caa;animation:ans 1.2s infinite}
@keyframes ans{50%{transform:scale(1.07)}}
.cbtn.end .c{background:#7a1c34;color:#fff}
.call-note{margin-top:16px}

/* thread */
#s-thread{display:flex;flex-direction:column;background:linear-gradient(180deg,#120c18,var(--bg))}
.thread-head{display:flex;align-items:center;gap:12px;padding:calc(var(--st) + 50px) 16px 12px;border-bottom:1px solid #ffffff10}
.thread-head img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:1px solid var(--luna)}
.tint-luna{filter:sepia(.5) saturate(1.4) hue-rotate(-12deg)}
.th-name{font-size:22px;line-height:1}
.back{font-size:28px;color:var(--muted);width:24px}
.thread{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:84%;padding:11px 14px;border-radius:18px 18px 18px 6px;background:#1e1526;border:1px solid #f2b13c26;font-family:var(--serif);font-size:17.5px;line-height:1.3;animation:msgIn .4s both var(--ease)}
.msg .w{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--luna);margin-bottom:4px}
.msg.sys{align-self:center;max-width:100%;background:none;border:0;font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--gold);text-align:center;text-transform:uppercase}
.msg.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:#8b7bff26;border-color:#8b7bff44}
.typing{display:flex;gap:4px;padding:14px 16px;width:62px;border-radius:18px;background:#1e1526}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--luna);animation:ty 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes ty{50%{opacity:.25;transform:translateY(-3px)}}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}}
.thread-foot{padding:10px 16px calc(var(--sb) + 18px)}

/* map */
#s-map{display:flex;flex-direction:column;background:#0a0812}
.map-top{position:absolute;z-index:3;top:calc(var(--st) + 46px);left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;padding:11px 14px;border-radius:14px;background:#0d0a14e6;border:1px solid #ffffff14;backdrop-filter:blur(8px)}
.mt-title{font-size:19px;margin-top:3px}
.mt-count{font-family:var(--serif);font-size:20px;color:var(--gold)}
.map-wrap{position:absolute;inset:0 0 calc(64px + var(--sb)) 0}
.map-wrap svg{width:100%;height:100%;display:block}
.map-card{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(76px + var(--sb));padding:14px;border-radius:16px;background:#120d1af2;border:1px solid #ffffff18;backdrop-filter:blur(10px);animation:notifIn .45s both var(--ease)}
.map-card.rival{border-color:#ff4fa366;box-shadow:0 0 30px #ff4fa322}
.mc-row{display:flex;justify-content:space-between;align-items:center}
.mc-title{font-family:var(--serif);font-size:21px;margin:4px 0 2px}
.mc-sub{font-size:10.5px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.mc-btns{display:flex;gap:8px}
.mc-btns .btn{flex:1;height:44px;font-size:16px;padding:0 12px}
.geo-note{font-size:9px;letter-spacing:.08em;color:var(--muted);margin-top:9px;line-height:1.5}
.pin-pulse{animation:pp 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pp{from{transform:scale(.6);opacity:.9}to{transform:scale(2.4);opacity:0}}
.rival-g{opacity:0;transition:opacity .8s}
.rival-g.on{opacity:1}
.street{stroke:#221a30;stroke-linecap:round;fill:none}
.label{font-family:var(--mono);font-size:7px;letter-spacing:.18em;fill:#4c4360}

/* glasses */
#s-glasses{background:#05040a}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;filter:saturate(.6) contrast(1.1) brightness(.75)}
#s-glasses.camon #cam{opacity:1}#s-glasses.camon .fallback-scene{opacity:0}
.fallback-scene{position:absolute;inset:0;transition:opacity .6s;overflow:hidden}
.sky{position:absolute;inset:0;background:radial-gradient(60% 30% at 50% 0,#2a1a3e,#0b0812 70%)}
.facade{position:absolute;left:8%;right:8%;top:22%;height:44%;background:linear-gradient(180deg,#1b1524,#120e19);border:1px solid #2b2238;display:flex;justify-content:space-around;align-items:flex-end;padding:0 6%}
.facade i{width:12%;height:78%;background:linear-gradient(180deg,#221a2e,#17121f);border-radius:40px 40px 0 0;border:1px solid #30263f}
.steps{position:absolute;left:0;right:0;top:66%;bottom:0;perspective:300px;display:flex;flex-direction:column}
.steps b{flex:1;background:linear-gradient(180deg,#1c1724,#130f1a);border-top:1px solid #2e2639}
.steps b:nth-child(n+4){border-top-color:#251e30}
.lamp{position:absolute;top:34%;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,#e8c26a55,transparent 65%)}
.lamp.l1{left:-30px}.lamp.l2{right:-30px}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,#ffffff05 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.hud-row{position:absolute;left:16px;right:16px;display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.2em;color:#cfc5dd}
.hud-row.top{top:calc(var(--st) + 50px)}
.hud-row.bottom{bottom:calc(var(--sb) + 14px)}
.rec{display:inline-block;width:6px;height:6px;border-radius:50%;border:1px solid #888;margin-right:6px}
.compass{position:absolute;top:calc(var(--st) + 74px);left:15%;right:15%;height:20px;overflow:hidden;border-bottom:1px solid #e8c26a44;mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.compass .strip{position:absolute;white-space:nowrap;font-size:9px;letter-spacing:.1em;color:var(--gold);left:50%;transform:translateX(-50%);transition:transform 1s}
.compass .tick{position:absolute;left:50%;bottom:0;width:1px;height:7px;background:var(--pink)}
.reticle{position:absolute;left:50%;top:40%;width:min(76vw,300px);height:150px;transform:translate(-50%,-50%);transition:transform .6s}
.reticle .lbl{position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:8.5px}
.reticle .c{position:absolute;width:22px;height:22px;border:2px solid var(--gold);filter:drop-shadow(0 0 4px #e8c26a)}
.c.tl{top:0;left:0;border-right:0;border-bottom:0}.c.tr{top:0;right:0;border-left:0;border-bottom:0}.c.bl{bottom:0;left:0;border-right:0;border-top:0}.c.br{bottom:0;right:0;border-left:0;border-top:0}
.reticle.lock .c{animation:lockc .5s 3}
@keyframes lockc{50%{transform:scale(.8)}}
.plate{position:absolute;inset:26px 22px 34px;display:flex;flex-direction:column;justify-content:center;gap:5px;text-align:center;font-family:var(--serif);letter-spacing:.14em;font-size:11.5px;color:#2a1c06;background:linear-gradient(135deg,#f0d189,#b38935 45%,#e3bf6c 70%,#8c6522);border-radius:3px;box-shadow:0 0 22px #e8c26a66,inset 0 0 8px #0006;opacity:0;transform:scale(.9);transition:opacity .8s,transform .8s}
.reticle.lock .plate{opacity:1;transform:none}
.plate .worn{color:#3d2a0a;letter-spacing:.1em;text-shadow:0 0 2px #fff6}
.plate.solved .worn{color:#5a0c32}
.moons{position:absolute;bottom:6px;left:0;right:0;text-align:center;color:var(--gold);font-size:13px;letter-spacing:.5em}
.cam-btn{position:absolute;right:14px;top:calc(var(--st) + 100px);font-size:9px;letter-spacing:.14em;padding:8px 12px;border-radius:14px;border:1px solid #ffffff2a;background:#0008;color:#ddd}
.glass-cap{position:absolute;left:14px;right:14px;bottom:calc(var(--sb) + 40px);padding:14px 16px;border-left:2px solid var(--spark);background:#0b0814d9;border-radius:0 14px 14px 0;backdrop-filter:blur(6px)}
#glassCap{font-family:var(--serif);font-size:19px;min-height:3.9em}
.riddle{display:flex;gap:8px;margin-top:12px}
.riddle input{flex:1;min-width:0;height:44px;border-radius:22px;border:1px solid #9b7bff66;background:#ffffff0a;padding:0 16px;font-family:var(--serif);font-size:17px;outline:0}
.riddle .btn{height:44px;font-size:15px;padding:0 14px}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.hint{margin-top:10px;color:#c9bcff;line-height:1.6;letter-spacing:.12em}

/* flag */
#s-flag{display:flex;flex-direction:column;align-items:center;padding:calc(var(--st) + 56px) 20px calc(var(--sb) + 18px);background:radial-gradient(70% 40% at 50% 26%,#3a2a10 0,#140d1c 55%,var(--bg))}
.flag-rays{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at 50% 38%,#e8c26a10 0 6deg,transparent 6deg 18deg);animation:spin 60s linear infinite;z-index:-1}
.hex{width:122px;margin:16px 0 8px;filter:drop-shadow(0 0 26px #e8c26a99)}
#s-flag.on .hex{animation:hexIn 1.1s both var(--ease)}
@keyframes hexIn{from{transform:scale(.3) rotate(-30deg);opacity:0}}
.hex text{font-family:var(--serif);font-size:34px;fill:#3a2a10}
.flag-title{font-weight:400;font-size:36px;margin:4px 0 4px;text-align:center}
.flag-sub{font-style:italic;font-size:17px;color:#cdbfa8;text-align:center;margin:0 0 16px;max-width:320px}
.stats{display:flex;gap:8px;width:100%}
.stats div{flex:1;border:1px solid #ffffff16;border-radius:12px;padding:10px 4px;text-align:center;background:#ffffff05}
.stats b{display:block;font-family:var(--serif);font-weight:500;font-size:21px;color:var(--gold)}
.stats span{font-size:7.5px;letter-spacing:.2em;color:var(--muted)}
.keys{width:100%;margin:16px 0 10px}
.key-bars{display:flex;gap:6px;margin-top:8px}
.key-bars div{flex:1;font-size:7.5px;letter-spacing:.14em;color:var(--muted);text-align:center}
.key-bars .bar{height:5px;border-radius:3px;background:#ffffff14;margin-bottom:5px;overflow:hidden}
.key-bars .bar i{display:block;height:100%;background:var(--c);box-shadow:0 0 8px var(--c);transition:width 1.2s .4s var(--ease)}
.wall-line{width:100%;padding:10px 14px;border-radius:12px;border:1px solid #ffffff12;font-size:11px;line-height:1.5;color:#d6cce2;margin-bottom:auto}
.wall-line .micro{margin-bottom:3px}
#flagNext{margin-top:14px}

/* hijack */
#s-hijack{background:radial-gradient(80% 50% at 50% 20%,#3a0f2a,#10081a 60%,var(--bg))}
.hj-noise{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");animation:nz .3s steps(3) infinite;pointer-events:none}
@keyframes nz{33%{background-position:30px 10px}66%{background-position:-20px 40px}}
.hj-phase{position:absolute;inset:0;padding:calc(var(--st) + 60px) 20px calc(var(--sb) + 20px);display:flex;flex-direction:column;gap:12px;animation:notifIn .5s both var(--ease)}
.alert-pulse{width:90px;height:90px;margin:8px auto 6px;border-radius:50%;border:2px solid var(--pink);box-shadow:0 0 40px #ff4fa3,inset 0 0 30px #ff4fa388;animation:ap 1.2s infinite}
@keyframes ap{50%{transform:scale(1.1);box-shadow:0 0 70px #ff4fa3,inset 0 0 40px #ff4fa3}}
.blink{animation:flick 1.4s infinite}
.hj-title{font-size:32px;font-weight:400;line-height:1.08;margin:0;text-align:center}
.hj-p{font-size:18px;line-height:1.35;color:#d8cde4;margin:0;text-align:center}
.hj-p b{font-family:var(--mono);font-weight:400;font-size:13px;color:var(--pink);letter-spacing:.1em}
.speaker{padding:12px 14px;border-left:2px solid var(--spark);background:#9b7bff12;border-radius:0 12px 12px 0;margin-top:auto}
.speaker .caption{font-family:var(--serif);font-size:18px;min-height:3.9em}
#hjOpen{margin-top:4px}
.slots{display:flex;gap:12px;justify-content:center;margin-top:6px}
.slots i{width:46px;height:46px;border-radius:12px;border:1px dashed #9b7bff66;display:grid;place-items:center;font-style:normal;font-family:var(--serif);font-size:24px;color:var(--spark)}
.slots i.f{border-style:solid;background:#9b7bff22;box-shadow:0 0 14px #9b7bff55}
.dial{position:relative;width:min(78vw,300px);aspect-ratio:1;margin:8px auto;border-radius:50%;border:1px solid #ffffff14;background:radial-gradient(circle,#9b7bff14,transparent 60%)}
.dial::after{content:"";position:absolute;inset:30%;border-radius:50%;border:1px dashed #ff4fa344;animation:spin 12s linear infinite}
.node{position:absolute;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:1px solid #ffffff2a;background:#140e20;font-family:var(--serif);font-size:24px;display:grid;place-items:center;transition:transform .15s,background .2s,box-shadow .2s}
.node:active{transform:scale(.9)}
.node.hit{background:#9b7bff;color:#130a24;box-shadow:0 0 22px #9b7bff}
.node.bad{background:#ff4fa3;color:#20061a}
.glitch-title{position:relative;font-family:var(--mono);font-size:21px;letter-spacing:.18em;text-align:center;color:#fff;margin-top:6px;animation:gl 2.2s infinite}
.glitch-title::before,.glitch-title::after{content:attr(data-t);position:absolute;inset:0;mix-blend-mode:screen}
.glitch-title::before{color:#ff4fa3;transform:translate(-2px,0);clip-path:inset(0 0 55% 0);animation:gl1 1.1s steps(2) infinite}
.glitch-title::after{color:#2fd4c4;transform:translate(2px,0);clip-path:inset(50% 0 0 0);animation:gl2 .9s steps(2) infinite}
@keyframes gl{0%,88%,100%{transform:none}90%{transform:skewX(12deg)}94%{transform:skewX(-8deg) translateX(3px)}}
@keyframes gl1{50%{transform:translate(3px,-1px);clip-path:inset(20% 0 40% 0)}}
@keyframes gl2{50%{transform:translate(-3px,1px);clip-path:inset(60% 0 5% 0)}}
.hj-meta{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.2em;color:var(--muted)}
.scope{border:1px solid #ff4fa333;border-radius:10px;background:#0006;overflow:hidden}
.scope canvas{width:100%;height:70px;display:block}
.transcript{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px}
.tx{font-size:11.5px;line-height:1.5;padding:9px 12px;border-radius:10px;background:#ffffff07;border-left:2px solid var(--c,#666);animation:msgIn .35s both}
.tx b{display:block;font-weight:400;font-size:8.5px;letter-spacing:.2em;color:var(--c);margin-bottom:2px}
.tx s{color:#776d86}
.tx.inject{background:#9b7bff1a}
.tx.big{font-family:var(--serif);font-size:24px;text-align:center;border:0;background:none;color:#fff;text-shadow:0 0 18px #ff4fa3}
.safety{text-align:center;line-height:1.6;color:#8a809a;border:1px solid #ffffff12;border-radius:10px;padding:8px}

/* journal / council */
.page-head{padding:calc(var(--st) + 52px) 20px 12px;border-bottom:1px solid #ffffff10}
.page-head h2{font-weight:400;font-size:34px;margin:6px 0 4px}
#s-journal,#s-council{display:flex;flex-direction:column;background:linear-gradient(180deg,#120c1a,var(--bg))}
.journal{list-style:none;margin:0;padding:14px 20px 20px 34px;overflow-y:auto;flex:1;position:relative}
.journal li{position:relative;padding:0 0 18px 14px;border-left:1px solid #ffffff16;animation:msgIn .4s both}
.journal li::before{content:"";position:absolute;left:-5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.journal .jt{font-size:8.5px;letter-spacing:.2em;color:var(--muted)}
.journal .jw{color:var(--c)}
.journal .jx{font-family:var(--serif);font-size:17px;line-height:1.3;margin-top:3px}
.journal .pts{font-family:var(--mono);font-size:10px;color:var(--gold);margin-left:6px}
.scroll{overflow-y:auto;flex:1;padding:14px 16px 20px;display:flex;flex-direction:column;gap:10px}
.mina-card{position:relative;border-radius:18px;overflow:hidden;min-height:220px;border:1px solid #e8c26a44;display:flex;align-items:flex-end;flex:none}
.mina-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%}
.mina-card .mc-in{position:relative;width:100%;padding:60px 16px 14px;background:linear-gradient(180deg,transparent,#07060bee 60%)}
.mina-card h3{font-family:var(--serif);font-weight:400;font-size:28px;margin:4px 0 2px;letter-spacing:.1em}
.mina-card p{margin:0;font-family:var(--serif);font-size:15.5px;color:#d8ccba;line-height:1.3}
.door{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid #ffffff12;background:#ffffff05;text-align:left;width:100%;flex:none}
.door .o{width:40px;height:40px;flex:none;border-radius:50%;border:1.5px solid var(--c);box-shadow:0 0 12px color-mix(in srgb,var(--c) 55%,transparent);display:grid;place-items:center;font-size:10px;color:var(--c)}
.door .dn{font-family:var(--serif);font-size:19px}
.door .dr{font-size:9px;letter-spacing:.14em;color:var(--muted);margin-top:2px;line-height:1.45}
.door .ks{margin-left:auto;font-size:9px;letter-spacing:.1em;color:var(--c);white-space:nowrap}
.ft-card{flex:none;margin-top:6px;padding:16px;border-radius:16px;border:1px dashed #2fd4c466;background:#2fd4c40a}
.ft-card h4{font-family:var(--serif);font-weight:400;font-size:22px;margin:6px 0 8px}
.ft-card ul{margin:0;padding-left:16px;font-size:10.5px;line-height:1.65;color:#cfc6da}
.soon{display:inline-block;font-size:8px;letter-spacing:.2em;padding:3px 8px;border-radius:8px;background:#2fd4c422;color:var(--gemini)}

/* sheet */
.sheet-back{position:absolute;inset:0;z-index:60;background:#000a;display:flex;align-items:flex-end;animation:fade .25s}
@keyframes fade{from{opacity:0}}
.sheet{width:100%;padding:22px 20px calc(var(--sb) + 22px);border-radius:22px 22px 0 0;background:#130d1c;border-top:1px solid var(--c,#fff3);animation:up .35s var(--ease)}
@keyframes up{from{transform:translateY(100%)}}
.sheet h3{font-family:var(--serif);font-weight:400;font-size:30px;margin:6px 0}
.sheet p{font-family:var(--serif);font-size:17px;line-height:1.35;color:#d9d0e4;margin:0 0 16px}

/* pause */
.pause{position:absolute;inset:0;z-index:80;background:#05040acc;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;padding:24px;animation:fade .3s}
.pause-in{width:100%;display:flex;flex-direction:column;gap:10px}
.pause h2{font-weight:400;font-size:36px;margin:6px 0 0}
.pause p{font-size:18px;color:#cfc4dc;margin:0 0 14px}
.toast{position:absolute;z-index:70;left:16px;right:16px;top:calc(var(--st) + 50px);padding:12px 14px;border-radius:14px;background:#160f20f2;border:1px solid #e8c26a44;font-family:var(--serif);font-size:16px;animation:notifIn .35s both}
.toast b{display:block;font-family:var(--mono);font-weight:400;font-size:8.5px;letter-spacing:.2em;color:var(--gold)}
.flash{position:absolute;inset:0;z-index:90;pointer-events:none;background:#fff;opacity:0}
.flash.go{animation:flash .5s}
@keyframes flash{10%{opacity:.5}100%{opacity:0}}
#app.glitching .screen.on{animation:scr .35s steps(3)}
@keyframes scr{33%{transform:translateX(4px);filter:hue-rotate(60deg)}66%{transform:translateX(-3px);filter:invert(.1)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

.ft-mini{margin:10px 16px 0;width:calc(100% - 32px);padding:11px 14px;border-radius:14px;border:1px dashed #2fd4c455;background:#2fd4c408;text-align:left;display:flex;flex-direction:column;gap:3px}
.ftm-t{font-size:16px}.ftm-s{font-size:9.5px;color:var(--muted);letter-spacing:.04em}
.ft-mini .soon{align-self:flex-start}
#chatReply:not(.hidden)~.talk{margin-top:10px}
#s-home:has(#chatReply:not(.hidden)) .ft-mini{display:none}
@media (max-height:780px){.ft-mini{display:none}}
@media (min-height:850px){#s-flag{padding-top:calc(var(--st) + 84px)}.hex{width:140px;margin:22px 0 12px}.wall-line{margin-bottom:auto}.alert-pulse{width:120px;height:120px;margin:24px auto 14px}}