@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@600;700&display=swap');
body{background:radial-gradient(900px 500px at 15% -10%,rgba(79,209,255,.16),transparent 60%),radial-gradient(700px 400px at 100% 0,rgba(232,196,106,.08),transparent 60%),linear-gradient(rgba(79,209,255,.035) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(79,209,255,.035) 1px,transparent 1px) 0 0/28px 28px,var(--bg);background-attachment:fixed}
h1,h2,h3,.logo,nav a,.btn{font-family:'Chakra Petch',system-ui,sans-serif}
header{position:sticky;top:0;z-index:10;backdrop-filter:blur(8px);background:linear-gradient(180deg,rgba(26,32,43,.92),rgba(12,15,21,.85));box-shadow:0 1px 0 rgba(79,209,255,.35),0 8px 24px rgba(0,0,0,.4)}
.logo{font-size:20px;background:linear-gradient(90deg,#fff,var(--ac) 60%,var(--gold));-webkit-background-clip:text;background-clip:text}
nav a{transition:background .2s,color .2s,transform .2s}nav a:hover{transform:translateY(-1px)}nav a.on{box-shadow:0 0 14px rgba(79,209,255,.6)}
main>h1:first-child{font-size:clamp(40px,7vw,76px);line-height:1;margin:28px 0 6px;background:linear-gradient(100deg,#fff 10%,var(--ac) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 22px rgba(79,209,255,.35))}
main>h1:first-child+.m{color:var(--gold)!important;font-weight:700}
h2{font-size:24px;margin-top:34px;border-left:0;padding-left:16px;position:relative}h2:before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:5px;background:linear-gradient(var(--ac),var(--gold));box-shadow:0 0 10px var(--ac)}
.tile{position:relative;transition:transform .25s ease,box-shadow .25s,border-color .25s;will-change:transform;--tc:var(--edge)}
.tile:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.16),transparent 60%)}
.tile:hover{transform:translateY(-6px);border-color:var(--tc);box-shadow:0 14px 30px rgba(0,0,0,.5)}.tile:hover:after{opacity:1}
.tile[data-grade=S]{--tc:var(--gold);background:linear-gradient(160deg,#2a2615,#0d1118 55%)}.tile[data-grade=A]{--tc:#7cf;background:linear-gradient(160deg,#16283a,#0d1118 55%)}.tile[data-grade=B]{--tc:#8f8;background:linear-gradient(160deg,#16281a,#0d1118 55%)}
.tile[data-grade=S],.tile[data-grade=A],.tile[data-grade=B]{border-top:3px solid var(--tc)}
.tile.top:before{content:attr(data-rank);align-self:flex-start;font:700 15px 'Chakra Petch',sans-serif;color:#000;padding:4px 10px;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);box-shadow:0 0 16px rgba(0,0,0,.6)}
.top1:before{background:linear-gradient(135deg,#fff3c4,var(--gold),#a8822e)}.top2:before{background:linear-gradient(135deg,#fff,#c9d3df,#7d8a9c)}.top3:before{background:linear-gradient(135deg,#ffd2a1,#cd8a4a,#7a4a20)}
.tile.top1{box-shadow:0 0 0 1px rgba(232,196,106,.5),0 0 26px rgba(232,196,106,.25)}
.g{border-radius:3px}.gS{background:rgba(232,196,106,.12);text-shadow:0 0 8px rgba(232,196,106,.6)}.gA{background:rgba(119,204,255,.1)}.gB{background:rgba(136,255,136,.08)}
.btn{transition:filter .2s,transform .2s,box-shadow .2s}.btn:hover{filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 0 16px rgba(79,209,255,.55)}
.cards img{transition:transform .3s;box-shadow:0 12px 30px rgba(0,0,0,.5)}.cards img:hover{transform:scale(1.02)}
.panel{border-left:3px solid var(--ac);background:linear-gradient(160deg,#151b25,var(--pan))}
.flt input:focus,.flt select:focus{outline:2px solid var(--ac);outline-offset:1px}a:focus-visible,.btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:600px){header{position:static}.grid{grid-template-columns:repeat(2,1fr);gap:10px}.tile.top:before{font-size:13px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.tile:hover,.btn:hover,nav a:hover,.cards img:hover{transform:none!important}}