@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');
:root{--gold:#ffd783;--cyan:#8cf7ff;--violet:#a875ff;--mx:0px;--my:0px}*{box-sizing:border-box}[hidden]{display:none!important}html,body{height:100%;margin:0;overflow:hidden;background:#02030b;color:#f7f5ff;font-family:Inter,system-ui,sans-serif}body{cursor:none}.world{position:fixed;inset:-30px;background-image:linear-gradient(rgba(2,3,15,.15),rgba(2,3,15,.72)),url('./assets/astral-archive.png');background-size:cover;background-position:calc(50% + var(--mx)) calc(50% + var(--my));transform:scale(1.04);transition:filter 1s;will-change:background-position}.world:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,transparent 0 21%,rgba(2,3,13,.32) 58%,#01020a 102%)}canvas{position:fixed;inset:0;width:100%;height:100%;z-index:2;touch-action:none}.grain{position:fixed;inset:0;z-index:8;pointer-events:none;opacity:.17;background:repeating-linear-gradient(0deg,transparent 0 4px,rgba(155,195,255,.04) 5px),radial-gradient(circle at 50% 50%,transparent,rgba(0,0,0,.42))}.cursor{position:fixed;width:28px;height:28px;border:1px solid rgba(159,246,255,.8);border-radius:50%;z-index:20;pointer-events:none;transform:translate(-50%,-50%);box-shadow:0 0 18px rgba(103,229,255,.32);transition:width .16s,height .16s,border-color .16s}.cursor:after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;background:white;transform:translate(-50%,-50%)}.cursor.active{width:46px;height:46px;border-color:var(--gold);box-shadow:0 0 28px rgba(255,204,91,.45)}
.hud{position:fixed;inset:0;z-index:4;pointer-events:none;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column}.topbar{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start}.brand,.profile,.mission,.stats,.relic-dock{backdrop-filter:blur(17px);background:linear-gradient(135deg,rgba(8,10,29,.8),rgba(23,13,51,.5));border:1px solid rgba(190,180,255,.2);box-shadow:0 16px 55px rgba(0,0,0,.28),inset 0 0 30px rgba(100,73,255,.05)}.brand{justify-self:start;padding:12px 17px;border-radius:7px 22px 7px 22px}.brand span,.profile small,.stats small{display:block;font-size:10px;letter-spacing:.23em;color:#9daed8}.brand strong{display:block;font:600 clamp(14px,1.8vw,18px) Cinzel;margin-top:3px;letter-spacing:.07em}.profile{justify-self:end;display:flex;gap:10px;align-items:center;padding:8px 13px;border-radius:20px 7px 20px 7px}.profile>b{display:grid;place-items:center;width:35px;height:35px;color:var(--gold);font-size:21px;border-radius:50%;background:rgba(255,213,131,.08);border:1px solid rgba(255,220,150,.25)}.profile strong{display:block;font:600 13px Cinzel;margin-top:2px}.progress{display:flex;gap:8px;padding:9px 12px;border-radius:30px;background:rgba(5,6,20,.72);border:1px solid rgba(255,255,255,.12)}.progress i{width:9px;height:9px;border-radius:50%;background:#30334c;transition:.4s}.progress i.active{background:var(--cyan);box-shadow:0 0 15px var(--cyan)}.progress i.done{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.stats{position:absolute;left:16px;top:90px;padding:11px 13px;border-radius:6px 18px 6px 18px;display:flex;gap:18px}.stats strong{font:600 14px Cinzel;display:block;margin-top:2px}.relic-dock{position:absolute;right:16px;top:90px;padding:9px;border-radius:18px 6px 18px 6px;display:flex;gap:6px}.relic{width:50px;height:43px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.1);color:#4d5069;background:rgba(0,0,0,.22);clip-path:polygon(50% 0,96% 22%,90% 80%,50% 100%,10% 80%,4% 22%);font-size:15px;transition:.5s}.relic small{font-size:7px;letter-spacing:.1em}.relic.found{color:#291804;background:linear-gradient(145deg,#fff3b7,#dda13e);filter:drop-shadow(0 0 12px #f7c75b)}.mission{width:min(600px,calc(100vw - 34px));align-self:center;margin-top:auto;text-align:center;padding:14px 22px 16px;border-radius:7px 28px 7px 7px}.realm{font-size:10px;letter-spacing:.3em;color:var(--cyan);text-transform:uppercase}.mission h2{font:600 clamp(18px,2.6vw,25px) Cinzel;margin:4px 0;color:#fff0cb}.mission p{margin:0;color:#bcc7e5;font-size:14px;line-height:1.45}.mission .whisper{margin-top:5px;color:#8eeefa;font-size:12px;font-style:italic;min-height:17px}.actions{position:absolute;right:16px;bottom:16px;display:flex;gap:7px;pointer-events:auto}button{font-family:inherit}.ghost{cursor:none;color:#a9b6d9;border:1px solid rgba(255,255,255,.15);background:rgba(7,8,24,.68);padding:9px 11px;border-radius:5px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(12px)}.ghost:hover{color:white;border-color:rgba(143,237,255,.45)}
.screen{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 50% 30%,rgba(61,38,131,.35),rgba(1,2,10,.9) 72%);transition:.65s}.screen.hidden,.modal.hidden{opacity:0;visibility:hidden;pointer-events:none;transform:scale(1.025)}.panel{width:min(820px,100%);text-align:center;transition:.5s}.crest{width:88px;height:88px;margin:0 auto 20px;border-radius:50%;border:1px solid #ffe7a0;display:grid;place-items:center;font:40px Cinzel;background:radial-gradient(circle,#8df7ff 0 5%,#4f35a7 12%,#08091d 53%,#d29a3d 55% 57%,transparent 59%);box-shadow:0 0 75px rgba(100,102,255,.65);animation:float 3s ease-in-out infinite}.kicker{text-transform:uppercase;letter-spacing:.38em;color:var(--cyan);font-size:11px;margin-bottom:13px}.screen h1{font:700 clamp(36px,7.3vw,76px)/1 Cinzel;margin:0;background:linear-gradient(#fff,#f5d183 62%,#a86b2d);-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 7px 18px #000)}.screen h1 em{font-style:normal}.lede{font-size:clamp(15px,1.8vw,18px);line-height:1.6;max-width:670px;margin:19px auto;color:#c7d0ec}.identity{display:flex;justify-content:center;gap:14px;align-items:end;margin:20px auto;width:min(600px,100%)}.identity label{flex:1;text-align:left}.identity label span,legend{font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#9daed8}.identity input{width:100%;margin-top:7px;padding:13px 15px;color:white;background:rgba(5,7,24,.75);border:1px solid rgba(144,230,255,.28);outline:0;font:500 15px Cinzel;border-radius:4px}.identity input:focus{border-color:var(--cyan);box-shadow:0 0 20px rgba(80,220,255,.14)}fieldset{border:0;margin:0;padding:0;text-align:left;white-space:nowrap}.sigil{cursor:none;width:42px;height:42px;margin:7px 4px 0 0;color:#a5abca;background:#090b23;border:1px solid rgba(255,255,255,.16);border-radius:50%;font-size:18px}.sigil.chosen{color:#1b1023;background:var(--gold);box-shadow:0 0 17px rgba(255,211,114,.35)}.primary{cursor:none;color:#170f1b;border:0;padding:15px 28px;margin-top:6px;background:linear-gradient(135deg,#fff2b8,#dc9d38);font:700 12px Cinzel;letter-spacing:.12em;text-transform:uppercase;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);box-shadow:0 14px 45px rgba(235,169,60,.25);transition:.25s}.primary:hover{transform:translateY(-3px);filter:brightness(1.1)}.best{font-size:11px;color:#8e99bd;min-height:14px;margin:13px 0 0}
.treasure-panel{width:min(1020px,100%)}.treasure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:25px}.treasure{cursor:none;min-height:230px;padding:25px 18px;color:white;background:linear-gradient(150deg,rgba(30,20,65,.83),rgba(5,7,24,.88));border:1px solid rgba(205,191,255,.25);border-radius:7px 38px 7px 7px;transition:.3s}.treasure:hover{transform:translateY(-8px);border-color:var(--gold);box-shadow:0 20px 65px rgba(126,73,255,.3)}.treasure b{display:block;font:50px Cinzel;color:var(--gold);margin-bottom:14px}.treasure strong{display:block;font:600 17px Cinzel;color:#fff2ca}.treasure span{display:block;color:#aeb9d8;line-height:1.5;margin-top:10px}.achievement-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}.badge{padding:7px 10px;border:1px solid rgba(255,219,129,.28);background:rgba(255,206,94,.07);color:#ffe6a5;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-radius:20px}.run-summary{color:#95a4cb;font-size:12px;letter-spacing:.08em}.modal{position:fixed;inset:0;z-index:14;display:grid;place-items:center;padding:20px;background:rgba(1,2,10,.55);transition:.3s}.lore-card{width:min(470px,100%);padding:29px;position:relative;background:linear-gradient(145deg,rgba(16,14,39,.96),rgba(7,8,22,.97));border:1px solid rgba(255,219,133,.35);box-shadow:0 0 80px rgba(85,55,185,.4);border-radius:6px 34px 6px 6px}.lore-card button{position:absolute;right:12px;top:9px;color:#aeb5d1;background:none;border:0;font-size:26px;cursor:none}.lore-card small{letter-spacing:.25em;color:var(--cyan)}.lore-card h3{font:600 25px Cinzel;color:var(--gold);margin:10px 0}.lore-card p{color:#c4cce6;line-height:1.65;margin:0}.toast{position:fixed;z-index:15;left:50%;top:19%;transform:translate(-50%,-20px);display:flex;gap:15px;align-items:center;width:min(470px,calc(100vw - 30px));padding:16px 19px;background:rgba(7,7,23,.92);border:1px solid rgba(255,222,145,.4);backdrop-filter:blur(16px);box-shadow:0 20px 60px rgba(0,0,0,.4);opacity:0;visibility:hidden;transition:.35s}.toast.show{opacity:1;visibility:visible;transform:translate(-50%,0)}.toast>b{font:30px Cinzel;color:var(--gold)}.toast h3{font:600 16px Cinzel;color:#ffe5a6;margin:0 0 3px}.toast p{color:#aeb8d7;font-size:12px;margin:0}@keyframes float{50%{transform:translateY(-7px) rotate(5deg)}}
@media(max-width:700px){.topbar{grid-template-columns:1fr auto}.progress{order:3;grid-column:1/-1;justify-self:center}.brand{padding:9px 11px}.profile{padding:6px 9px}.brand strong{font-size:12px}.stats{top:112px;padding:8px;gap:10px}.relic-dock{top:112px}.relic{width:42px;height:38px}.mission{padding:11px 14px 13px;margin-bottom:42px}.mission p{font-size:12px}.actions{left:50%;right:auto;transform:translateX(-50%);bottom:10px;white-space:nowrap}.identity{display:block}.identity fieldset{margin-top:12px;text-align:center}.treasure-grid{grid-template-columns:1fr;max-height:57vh;overflow:auto}.treasure{min-height:150px}.cursor{display:none}body{cursor:auto}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.world{transform:none}}
body{cursor:default}.cursor{display:none!important}canvas{cursor:crosshair}button,.ghost,.sigil,.primary,.treasure,.lore-card button{cursor:pointer}