/* RYZO GunZ - electric blue theme (follows references/how i want weebsite look.png) */
:root{--acc:#1e7bff;--acc2:#3ee0ff;--cy:#3ee0ff;--bg:#050a17;--panel:#08142ccc;--panel2:#0b1a38;--line:#1d3a6e;--line2:#2d5cae;--txt:#e8f1ff;--dim:#8aa4c8;--ok:#27e07a;--vio:#7a8cff;
  --font:'Rajdhani','Segoe UI',sans-serif;--body:'Inter','Segoe UI',Roboto,sans-serif}
html{scroll-behavior:smooth}
body{background:#050a17;color:var(--txt);font:15px/1.6 var(--body);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;z-index:-2;background:linear-gradient(#050a1755 0,#050a1766 40%,#050a17b8 100%),radial-gradient(90% 70% at 50% 40%,transparent 55%,#050a1799)}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
a{color:var(--acc2)}
h1,h2,h3,.btn,button,nav a{font-family:var(--font)}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;background:linear-gradient(#030817f2,#030817cc);border-bottom:1px solid #1d3a6e88;backdrop-filter:blur(10px)}
header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#3ee0ff88,transparent)}
.bar{max-width:1240px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-size:0}.logo img{height:52px;filter:drop-shadow(0 0 12px #1e7bffaa);transition:.3s}.logo:hover img{filter:drop-shadow(0 0 22px #3ee0ffcc);transform:scale(1.06) rotate(-2deg)}
.logo b{display:none}
nav{justify-content:center;gap:2px}
nav a{font-size:14px;letter-spacing:2px;font-weight:600;color:#b9cdf0;padding:0 16px;border-bottom:2px solid transparent;transition:.2s}
nav a:hover,nav a.on{color:#fff;background:linear-gradient(#1e7bff00,#1e7bff22);border-color:var(--acc2);text-shadow:0 0 12px #3ee0ff}
.right a{font-family:var(--font);font-weight:600;letter-spacing:1px;color:#b9cdf0}
.play,.loginbtn{background:linear-gradient(#0c2a66,#08183a)!important;border:1px solid var(--acc)!important;color:#dff0ff!important;border-radius:3px;padding:10px 26px;font-size:14px;letter-spacing:2px;text-transform:uppercase;box-shadow:0 0 18px #1e7bff55,inset 0 0 12px #1e7bff33;animation:none}
.play:hover{box-shadow:0 0 28px #3ee0ffaa,inset 0 0 16px #3ee0ff44;text-decoration:none;color:#fff!important}
/* ---------- hero ---------- */
.hero2{position:relative;min-height:min(92vh,880px);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:hidden;border-bottom:1px solid #1d3a6e}
.hero2 .bgimg{position:absolute;left:0;right:0;top:0;height:78%;background:none;transform:translate3d(var(--px,0),var(--py,0),0) scale(1.05);transition:transform .25s ease-out}
.hero2:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050a1700 45%,#050a17aa 100%)}
.hero2 .in{position:relative;z-index:3;text-align:center;padding:26px 22px 0;width:100%;max-width:1240px}
#hfx{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;mix-blend-mode:screen}
.emblem{position:relative;width:min(560px,80vw);aspect-ratio:1;margin:0 auto}
.emblem canvas{position:absolute;inset:-9%;width:118%;height:118%}
.emblem img{position:relative;width:100%;height:100%;object-fit:contain;animation:lgfloat 6s ease-in-out infinite,lgglow 3.2s ease-in-out infinite;will-change:transform,filter}
.emblem .shine{position:absolute;inset:0;-webkit-mask:url(/static/logo-xl.png) center/contain no-repeat;mask:url(/static/logo-xl.png) center/contain no-repeat;background:linear-gradient(105deg,transparent 40%,#ffffffd0 50%,transparent 60%);background-size:280% 100%;animation:lgshine 5s ease-in-out infinite;mix-blend-mode:overlay;pointer-events:none}
@keyframes lgfloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.012)}}
@keyframes lgglow{0%,100%{filter:drop-shadow(0 0 18px #1e7bff88) drop-shadow(0 0 2px #3ee0ff)}50%{filter:drop-shadow(0 0 46px #2f9bffdd) drop-shadow(0 0 10px #7ff0ff)}}
@keyframes lgshine{0%{background-position:170% 0}55%,100%{background-position:-70% 0}}
.tag2{font:600 20px/1 var(--font);letter-spacing:9px;color:#dbe8ff;margin:-14px 0 26px;text-shadow:0 0 18px #1e7bff}.tag2 i{color:#3ee0ff;font-style:normal;margin:0 8px}
.cta2{display:grid;grid-template-columns:1fr 1fr;max-width:620px;margin:0 auto;border:1px solid #2d5cae;box-shadow:0 0 30px #1e7bff44}
.cta2 a{display:flex;align-items:center;justify-content:center;gap:12px;padding:19px 20px;font:700 17px var(--font);letter-spacing:2px;text-transform:uppercase;color:#fff;text-decoration:none;position:relative;overflow:hidden;transition:.25s}
.cta2 a.dl{background:linear-gradient(180deg,#2a8dff,#0b57d6)}.cta2 a.rg{background:linear-gradient(180deg,#0a1a3c,#071129)}
.cta2 a:hover{filter:brightness(1.25)}.cta2 a.dl:after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff88,transparent);transform:skewX(-20deg);animation:sweep 3.4s infinite}
.cta2 svg{width:22px;height:22px}
.status{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,1fr);max-width:1000px;width:calc(100% - 44px);margin:34px auto 34px;background:linear-gradient(#0a1a3ccc,#06112ecc);border:1px solid #1d3a6e;backdrop-filter:blur(8px);box-shadow:0 0 40px #0b2a7a55}
.status>div{display:flex;align-items:center;gap:14px;padding:16px 22px;border-right:1px solid #1d3a6e}.status>div:last-child{border:0}
.status svg{width:34px;height:34px;color:var(--acc);flex:none;filter:drop-shadow(0 0 8px #1e7bff)}.status .dot3{width:32px;height:32px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#8dffb8,#0fbf55);box-shadow:0 0 18px #27e07acc;animation:pulse2 2s infinite}
.dot3.off{background:radial-gradient(circle at 35% 30%,#ff9a9a,#c02020);box-shadow:0 0 18px #ff4a4acc}
@keyframes pulse2{50%{box-shadow:0 0 30px #27e07a}}
.status small{display:block;color:var(--dim);font:600 11px var(--font);letter-spacing:2.5px;text-transform:uppercase}.status b{font:700 25px/1.1 var(--font);color:#fff;letter-spacing:1px}
@media(max-width:900px){.status{grid-template-columns:1fr 1fr}.cta2{grid-template-columns:1fr}}
/* ---------- sections ---------- */
main{max-width:1240px}
.sec{max-width:1240px;margin:0 auto;padding:54px 22px 6px}
.sec .kick,.lineup .kick{color:var(--acc2);font:700 13px var(--font);letter-spacing:5px;text-transform:uppercase}
.sec h2.big{border:0;padding:0;font:700 clamp(30px,4vw,50px)/1.05 var(--font);text-transform:uppercase;font-style:italic;margin:6px 0 8px;letter-spacing:1px;text-shadow:0 0 28px #1e7bff66}
.sec p.sub{color:var(--dim);max-width:640px;margin:0 0 26px;font-size:16px}
.frames{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:1240px;margin:0 auto;padding:0 22px}
.fcard{position:relative;display:block;aspect-ratio:222/162;overflow:hidden;border:1px solid #1d3a6e;background:#050a17;text-decoration:none;transition:.35s}
.fcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.fcard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050a1700 30%,#050a17f2)}
.fcard div{position:absolute;left:20px;bottom:16px;z-index:2;font:600 22px/1.05 var(--font);letter-spacing:1px;color:#fff;text-transform:uppercase}.fcard div b{display:block;color:var(--acc2);font-size:25px;text-shadow:0 0 16px #1e7bff}.fcard div span{display:block;font:600 11px var(--font);letter-spacing:2px;color:var(--dim);margin-top:6px}
.fcard:hover{border-color:var(--acc2);box-shadow:0 0 30px #1e7bff66;transform:translateY(-5px)}.fcard:hover img{transform:scale(1.09)}
@media(max-width:900px){.frames{grid-template-columns:1fr 1fr}}
.duo{display:grid;grid-template-columns:1.05fr 1fr;gap:20px;max-width:1240px;margin:34px auto 0;padding:0 22px}@media(max-width:940px){.duo{grid-template-columns:1fr}}
.box{background:linear-gradient(#08142ccc,#050d22d0);border:1px solid #1d3a6e;padding:22px 24px;position:relative;box-shadow:inset 0 0 40px #0b2a7a22}
.box:before{content:"";position:absolute;left:-1px;top:-1px;width:26px;height:26px;border-left:2px solid var(--acc2);border-top:2px solid var(--acc2)}.box:after{content:"";position:absolute;right:-1px;bottom:-1px;width:26px;height:26px;border-right:2px solid var(--acc2);border-bottom:2px solid var(--acc2)}
.bh{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.bh h2{margin:0;border:0;padding:0;font:700 22px var(--font);letter-spacing:2px;color:var(--acc2);text-transform:uppercase}.bh a{font:600 12px var(--font);letter-spacing:2px;text-transform:uppercase}
.nitem{display:grid;grid-template-columns:112px 1fr;gap:18px;padding:14px 0;border-top:1px solid #1d3a6e66}.nitem img{width:112px;height:100px;object-fit:cover;border:1px solid #1d3a6e}
.nitem .tg{display:inline-block;background:#0d4bd0;color:#fff;font:700 11px var(--font);letter-spacing:1.5px;padding:2px 9px;margin-right:10px}.nitem .d{color:var(--dim);font:600 12px var(--font);letter-spacing:1px}.nitem h3{margin:6px 0 4px;font:700 20px var(--font);color:#fff}.nitem p{margin:0;color:#a9bfe0;font-size:14px}
.rtabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px}.rtabs button{background:#08163a;border:1px solid #1d3a6e;color:#8aa4c8;padding:9px;font:700 13px var(--font);letter-spacing:2px;text-transform:uppercase;border-radius:0;box-shadow:none}.rtabs button.on{background:linear-gradient(#1e7bff,#0b57d6);color:#fff;border-color:#3ee0ff}
.rk2 table{width:100%}.rk2 th{color:var(--dim);font:600 12px var(--font);letter-spacing:2px;padding:7px 6px}.rk2 td{padding:8px 6px;border-bottom:1px solid #1d3a6e55}.rk2 tr:hover td{background:#1e7bff11}
.medal{display:inline-flex;width:26px;height:26px;border-radius:50%;align-items:center;justify-content:center;font:700 13px var(--font);color:#111}.m1{background:radial-gradient(circle at 35% 30%,#ffe9a0,#c9922a)}.m2{background:radial-gradient(circle at 35% 30%,#f2f6ff,#8b99b4)}.m3{background:radial-gradient(circle at 35% 30%,#ffc59a,#b0642c)}
.legend{position:relative;margin:54px 0 0;height:310px;overflow:hidden;border-block:1px solid #1d3a6e;display:flex;align-items:center}
.legend:before{content:"";position:absolute;inset:0;background:url(/static/banner.jpg) center/cover;transform:scale(1.06)}.legend:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#050a17cc,transparent 60%,#050a17aa)}
.legend .in{position:relative;z-index:2;max-width:1240px;margin:auto;width:100%;padding:0 22px;display:flex;justify-content:space-between;align-items:center}
.legend h2{border:0;padding:0;margin:0;font:700 clamp(50px,8vw,104px)/.82 var(--font);font-style:italic;text-transform:uppercase;transform:rotate(-4deg);color:#c7d6ee;text-shadow:0 0 30px #1e7bff88}.legend h2 b{display:block;color:transparent;background:linear-gradient(90deg,#2a8dff,#3ee0ff);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 22px #1e7bff)}
.legend .rt{font:600 15px/2.1 var(--font);letter-spacing:7px;color:#dbe8ff;text-align:right;text-transform:uppercase}@media(max-width:800px){.legend .rt{display:none}}
.maps{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;max-width:1240px;margin:22px auto 0;padding:0 22px}
.maps a{position:relative;display:block;aspect-ratio:16/11;overflow:hidden;border:1px solid #1d3a6e;color:#dbe8ff;text-decoration:none}.maps img{width:100%;height:100%;object-fit:cover;transition:.5s;filter:saturate(1.1)}
.maps span{position:absolute;left:0;right:0;bottom:0;padding:16px 4px 6px;text-align:center;background:linear-gradient(transparent,#050a17f0);font:600 12px var(--font);letter-spacing:2.5px;text-transform:uppercase}.maps a:hover{border-color:var(--acc2);box-shadow:0 0 22px #1e7bff77}.maps a:hover img{transform:scale(1.12)}
@media(max-width:900px){.maps{grid-template-columns:repeat(3,1fr)}}
/* footer */
footer{margin-top:60px;background:#030714;border-top:1px solid #1d3a6e;position:relative}footer:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#3ee0ff,transparent)}
footer .in{max-width:1240px;margin:auto;display:grid;grid-template-columns:1.2fr 2fr 1.2fr;gap:30px;align-items:center;padding:26px 22px}footer img{height:58px;filter:drop-shadow(0 0 10px #1e7bff88)}
footer .lk{display:flex;flex-wrap:wrap;gap:6px 22px;justify-content:center;font:600 12px var(--font);letter-spacing:2px;text-transform:uppercase}footer .lk a{color:#9fb7dc}footer .lk a:hover{color:#fff}
footer .soc{display:flex;gap:14px;justify-content:flex-end}footer .soc a{width:34px;height:34px;color:#9fb7dc;transition:.2s}footer .soc a:hover{color:#3ee0ff;transform:translateY(-3px)}footer .soc svg{width:100%;height:100%}
footer small{display:block;color:#5f7aa6;margin-top:6px;font-size:12px}
@media(max-width:820px){footer .in{grid-template-columns:1fr;text-align:center}footer .soc{justify-content:center}}
/* generic pieces re-colored */
.card,.feat,.pkc,.ft{background:linear-gradient(#08142ccc,#050d22d0);border:1px solid #1d3a6e;border-radius:0;box-shadow:inset 0 0 40px #0b2a7a22}
h2{font-family:var(--font);letter-spacing:3px;border-left:3px solid var(--acc2);color:#dff0ff}
.btn,button{background:linear-gradient(180deg,#2a8dff,#0b57d6);border-radius:2px;box-shadow:0 0 18px #1e7bff55;letter-spacing:2px;color:#fff}.btn.alt,.btn.ghost{background:#0a1a3c;border:1px solid #2d5cae;box-shadow:none}
input,select,textarea{background:#050d22;border:1px solid #1d3a6e;border-radius:2px}input:focus,select:focus{border-color:var(--acc2);box-shadow:0 0 14px #1e7bff55}
th{color:var(--dim);font-family:var(--font)}.stat4 b,.pkc .n,.fcard div b{color:var(--acc2)}
.pkc.best{border-color:var(--acc2);box-shadow:0 0 40px -8px var(--acc)}.pkc .rb{background:var(--acc)}
.tab2.on:after{background:linear-gradient(90deg,var(--acc),var(--acc2));box-shadow:0 0 14px var(--acc)}
.tile{background:linear-gradient(180deg,#0b1a38,#050d22);border:1px solid #1d3a6e;border-radius:0}.tile:hover{border-color:var(--g,var(--acc2));box-shadow:0 22px 50px #000c,0 0 40px -8px var(--g,var(--acc2))}
.tile .cap span{color:var(--acc2)}.badge{color:#031022}
.r-c{--g:#7f95b8}.r-r{--g:#2f9bff}.r-e{--g:#8a6cff}.r-l{--g:#3ee0ff}
.tile.spinning .pic img{opacity:0}
.mbox{border-radius:0;background:linear-gradient(160deg,#0b1a38,#050a17);border:1px solid #2d5cae;box-shadow:0 0 60px #1e7bff44}
.viewer{background:radial-gradient(circle at 50% 55%,var(--g,#1e7bff)44,transparent 62%),linear-gradient(#0a1a3c,#040914)!important}
.info .price b,.ic .meta b{color:var(--acc2)}.tabs a.on,.chip.on{background:var(--acc);border-color:var(--acc)}
.shophead:before{background:radial-gradient(600px 240px at 50% 0,#1e7bff44,transparent 70%)}
.gal .g{border-color:#1d3a6e;border-radius:0}.lineup{background:linear-gradient(90deg,#050a17ee 0,#050a1799 40%,#050a1722 100%),url(/static/lineup.jpg) center bottom/cover;border-color:#1d3a6e}.lineup h2.big{font-family:var(--font)}
.marq{display:none}
.rv{opacity:0;transform:translateY(30px);transition:opacity .8s,transform .8s}.rv.in{opacity:1;transform:none}
.mapgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.mapc{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border:1px solid #1d3a6e;border-radius:6px;background:#050a17}
.mapc img{width:100%;height:100%;object-fit:cover;transition:transform .6s}.mapc:hover img{transform:scale(1.08)}.mapc:hover{border-color:var(--acc2);box-shadow:0 0 26px #1e7bff77}
.mapc span{position:absolute;left:0;right:0;bottom:0;padding:22px 12px 9px;background:linear-gradient(transparent,#050a17f2);font:700 14px var(--font);letter-spacing:2px;text-transform:uppercase;color:#fff}

/* ---------- animated wallpaper (references/wallpaper bg for website.png): slow camera drift, breathing moon, flickering fires, drifting mist, rare lightning ---------- */
.wp{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#050a17;pointer-events:none}
.wp i{position:absolute;display:block}
.wp .wpi{inset:-5%;background:url(/static/wallpaper.jpg) 50% 40%/cover no-repeat;animation:wpkb 52s ease-in-out infinite alternate;will-change:transform}
@keyframes wpkb{from{transform:scale(1.02) translate3d(-1.4%,.6%,0)}to{transform:scale(1.12) translate3d(1.6%,-1.4%,0)}}
.wp .moon{left:calc(72% - 20vw);top:calc(11% - 20vw);width:40vw;height:40vw;border-radius:50%;background:radial-gradient(circle,#b4d6ff88 0,#3f86ff33 38%,transparent 68%);mix-blend-mode:screen;animation:wpmoon 7s ease-in-out infinite alternate}
@keyframes wpmoon{from{opacity:.35;transform:scale(.94)}to{opacity:.95;transform:scale(1.06)}}
.wp .fire{border-radius:50%;background:radial-gradient(circle,#ff9a3c99 0,#ff5a1a33 40%,transparent 70%);mix-blend-mode:screen;filter:blur(6px)}
.wp .f1{left:-6%;top:12%;width:26vw;height:26vw;animation:wpfl 2.3s steps(1,end) infinite}
.wp .f2{right:-4%;bottom:-6%;width:34vw;height:30vw;animation:wpfl 3.1s steps(1,end) infinite .7s}
.wp .f3{left:38%;bottom:6%;width:30vw;height:16vw;animation:wpfl 2.7s steps(1,end) infinite 1.3s}
@keyframes wpfl{0%{opacity:.3}12%{opacity:.7}27%{opacity:.4}41%{opacity:.85}58%{opacity:.35}73%{opacity:.65}88%{opacity:.45}100%{opacity:.3}}
.wp .mist{left:-30%;width:160%;height:38%;background:radial-gradient(ellipse 30% 50% at 25% 50%,#8fb6ff2a,transparent 70%),radial-gradient(ellipse 28% 45% at 70% 55%,#7aa0ff22,transparent 70%);filter:blur(24px);animation:wpmist 70s linear infinite}
.wp .m1{top:34%}.wp .m2{top:62%;animation-duration:95s;animation-direction:reverse;opacity:.8}
@keyframes wpmist{from{transform:translate3d(-8%,0,0)}to{transform:translate3d(8%,0,0)}}
.wp .flash{inset:0;background:radial-gradient(60% 50% at 70% 10%,#cfe4ff,#5f9dff55 50%,transparent 75%);mix-blend-mode:screen;opacity:0;animation:wpflash 17s linear infinite}
@keyframes wpflash{0%,90%,100%{opacity:0}91%{opacity:.5}92%{opacity:.05}93%{opacity:.4}96%{opacity:0}}
@media (prefers-reduced-motion:reduce){.wp *{animation:none!important}}
@media(max-width:820px){.wp .wpi{animation-duration:80s}.wp .mist{display:none}}