@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@500;700;800&display=swap');
:root{--bg:#06060d;--panel:rgba(15,15,29,.78);--line:rgba(173,137,255,.18);--text:#f4f0ff;--muted:#8f8aa5;--gold:#d7a84d;--violet:#8964ff;--cyan:#64d7ff;--green:#65e6b2}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 75% 15%,#191239 0,#080811 38%,#040409 100%);color:var(--text);font-family:Inter,system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 80%,rgba(92,55,255,.08),transparent 30%),radial-gradient(circle at 90% 70%,rgba(47,176,255,.05),transparent 25%);z-index:-1}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(#fff 1px,transparent 1px);background-size:73px 73px;animation:starDrift 30s linear infinite}
.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);position:sticky;top:0;z-index:50;background:rgba(5,5,12,.78);backdrop-filter:blur(16px)}
.brand{display:flex;gap:12px;align-items:center}.brand-mark{font-size:25px;color:var(--gold);text-shadow:0 0 18px #b47bff;animation:brandPulse 3s ease-in-out infinite}.brand b,.brand small{display:block}.brand b{font:700 14px Orbitron;letter-spacing:2px}.brand small{font-size:8px;color:var(--muted);letter-spacing:2px;margin-top:3px}
.wallet-btn,.primary,.secondary{position:relative;z-index:20;pointer-events:auto;border:1px solid var(--line);background:#151125;color:#fff;padding:12px 18px;border-radius:8px;font:700 11px Orbitron;letter-spacing:1px;cursor:pointer;transition:.2s transform,.2s border-color,.2s box-shadow,.2s opacity}
.wallet-btn:hover,.secondary:hover{border-color:#8b6bff;box-shadow:0 0 22px rgba(137,100,255,.16)}.wallet-btn:active,.primary:active,.secondary:active{transform:scale(.97)}button:disabled{opacity:.55;cursor:wait}
.game-shell{max-width:1200px;margin:auto;padding:48px 24px 25px;position:relative;z-index:1}
.panel{background:linear-gradient(145deg,rgba(23,20,42,.9),rgba(9,9,19,.82));border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 80px rgba(0,0,0,.3)}
.hero{min-height:510px;display:grid;grid-template-columns:1.05fr .95fr;overflow:hidden;position:relative}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 35%,rgba(141,101,255,.04) 50%,transparent 65%);transform:translateX(-100%);animation:scan 8s ease-in-out infinite}
.hero-copy{padding:64px 8%;position:relative;z-index:2}.eyebrow{font:700 9px Orbitron;letter-spacing:2px;color:var(--gold);margin:0 0 18px}.hero h1{font:800 clamp(42px,6vw,74px) Orbitron;line-height:1.02;margin:0;letter-spacing:-2px}.hero h1 span{background:linear-gradient(90deg,#fff,#a987ff,#64d7ff);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{color:var(--muted);line-height:1.7;max-width:510px;margin:24px 0 28px}
.actions{display:flex;gap:10px;position:relative;z-index:10}.actions button{position:relative;z-index:11;pointer-events:auto}.primary{background:linear-gradient(100deg,#6b46ef,#8d5eff);box-shadow:0 0 35px rgba(116,76,255,.25);border:0}.primary:hover{box-shadow:0 0 45px rgba(116,76,255,.45);transform:translateY(-1px)}
.status{font-size:11px;color:#aaa2bd;margin-top:18px;min-height:16px}.status.live{color:var(--cyan)}.status.good{color:var(--green)}.status.warn{color:#e5c36c}
.live-strip{display:flex;gap:10px;align-items:center;margin-top:22px;font:700 8px Orbitron;letter-spacing:1.4px;color:#77718d}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green);animation:livePulse 1.2s infinite}.signal{margin-left:auto;color:#77718d}
.relic-wrap{position:relative;display:grid;place-items:center;min-height:420px;background:radial-gradient(circle,rgba(112,70,255,.17),transparent 58%);pointer-events:none}
.relic{width:190px;height:190px;transform:rotate(45deg);position:relative;background:linear-gradient(135deg,#0c0b15,#31204d 45%,#0c0b12);border:2px solid #b989ff;box-shadow:0 0 35px rgba(137,100,255,.55),inset 0 0 35px #07050e;transition:transform .5s,box-shadow .5s}.relic.awaken{animation:coreAwaken .9s ease-out}.relic:before{content:'';position:absolute;inset:22px;border:1px solid #d8b45d;background:radial-gradient(circle,#6b3dff,#171126 55%,#08070e);box-shadow:0 0 30px #6845ff}.relic-core{position:absolute;z-index:2;inset:0;display:grid;place-items:center;transform:rotate(-45deg);font-size:55px;color:#e5ccff;text-shadow:0 0 22px #8c58ff;animation:coreBreath 2.6s ease-in-out infinite}.relic-shard{position:absolute;width:8px;height:32px;background:#c5eaff;box-shadow:0 0 18px #63caff;animation:shardFloat 3s ease-in-out infinite}.s1{top:-50px;left:90px;transform:rotate(20deg)}.s2{right:-45px;top:95px;transform:rotate(80deg);animation-delay:.7s}.s3{bottom:-42px;left:55px;transform:rotate(-30deg);animation-delay:1.3s}.orb-ring{position:absolute;border:1px solid rgba(143,105,255,.35);border-radius:50%}.ring-a{width:350px;height:350px;animation:spin 18s linear infinite}.ring-b{width:285px;height:285px;border-style:dashed;animation:spin 12s linear reverse infinite}.relic-label{position:absolute;bottom:45px;font:700 11px Orbitron;letter-spacing:3px;color:#bbb1d5}.relic-label i{color:var(--gold);font-style:normal}
.stats{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;margin:16px 0}.stat{padding:22px;position:relative;overflow:hidden}.stat:after{content:'';position:absolute;right:-35px;top:-35px;width:100px;height:100px;border-radius:50%;background:rgba(126,86,255,.08);filter:blur(15px)}.stat span,.stat small{display:block;font:700 9px Orbitron;letter-spacing:1.5px;color:var(--muted)}.stat strong{display:block;font:700 30px Orbitron;margin:11px 0}.bar{height:4px;background:#252032;border-radius:5px;overflow:hidden}.bar i{display:block;width:0;height:100%;background:linear-gradient(90deg,#7651ff,#62d9ff);transition:width .5s}.level-line{display:flex;justify-content:space-between;margin-top:9px;font-size:9px;color:#77718d}.level-line b{color:#b7a9d8}
.inventory{padding:28px;margin-top:16px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}.section-head h2{font:700 25px Orbitron;margin:0}.address{font:10px monospace;color:#7f7894}.items{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.item{min-height:100px;border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;grid-template-columns:46px 1fr auto;align-items:center;background:rgba(255,255,255,.018);transition:.25s transform,.25s border-color,.25s background}.item:hover{transform:translateY(-3px);border-color:rgba(137,100,255,.42);background:rgba(137,100,255,.045)}.item-icon{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#221a39;color:#c6b4ff;font-size:21px}.item-icon.gold{color:#e3bb65}.item-icon.silver{color:#bfc9d6}.item b,.item span{display:block}.item b{font-size:13px}.item span{font-size:9px;color:var(--muted);margin-top:5px}.item>strong{font:700 16px Orbitron}.legendary{border-color:rgba(214,168,77,.28)}
.activity{margin-top:16px;padding:24px}.activity-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.activity h3{margin:0;font:700 15px Orbitron}.activity-tag{font:700 8px Orbitron;letter-spacing:1px;color:var(--green)}.feed{display:flex;flex-direction:column;gap:8px;max-height:190px;overflow:auto}.event{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(173,137,255,.1);background:rgba(255,255,255,.018);border-radius:8px;font-size:10px;color:#9d96ae;animation:eventIn .35s ease-out}.event b{color:#cfc5e5;font-weight:600}.event time{margin-left:auto;color:#625d70;font:8px Orbitron;white-space:nowrap}.event-dot{width:6px;height:6px;border-radius:50%;background:#8964ff;box-shadow:0 0 10px #8964ff;flex:none}
footer{display:flex;justify-content:space-between;padding:25px 4px;color:#5f5a6e;font:8px Orbitron;letter-spacing:1px}footer a{color:#8d78c9;text-decoration:none}
.flash{animation:panelFlash .6s ease-out}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes starDrift{to{background-position:73px 73px}}@keyframes brandPulse{50%{text-shadow:0 0 28px #b47bff}}@keyframes livePulse{50%{opacity:.35;transform:scale(.65)}}@keyframes coreBreath{50%{text-shadow:0 0 36px #a56cff;transform:rotate(-45deg) scale(1.06)}}@keyframes shardFloat{50%{translate:0 -8px}}@keyframes coreAwaken{0%{transform:rotate(45deg) scale(1)}35%{transform:rotate(45deg) scale(1.13);box-shadow:0 0 85px rgba(137,100,255,.95),inset 0 0 50px #07050e}100%{transform:rotate(45deg) scale(1)}}@keyframes scan{50%{transform:translateX(100%)}}@keyframes eventIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@keyframes panelFlash{50%{border-color:rgba(137,100,255,.7);box-shadow:0 0 45px rgba(137,100,255,.18)}}
@media(max-width:800px){.hero{grid-template-columns:1fr}.hero-copy{padding:42px 28px}.relic-wrap{min-height:360px}.stats,.items{grid-template-columns:1fr}.section-head{display:block}.address{display:block;margin-top:12px;word-break:break-all}.topbar{padding:0 18px}.brand small{display:none}.wallet-btn{padding:11px 13px;font-size:9px}.game-shell{padding:22px 12px}.hero h1{font-size:42px}.lead{font-size:14px}.actions button{flex:1}.relic{width:165px;height:165px}.ring-a{width:300px;height:300px}.ring-b{width:245px;height:245px}.relic-label{bottom:24px}.activity{padding:18px}.event time{display:none}footer{gap:10px;flex-direction:column}}