:root{--bg:#0D0A1F;--panel:#171234;--panel2:#1E1840;--line:rgba(123,92,255,.30);
--cyan:#29E6FF;--pink:#FF3DAE;--yellow:#FFD23F;--violet:#8E72FF;--mint:#41FFC4;--orange:#FF9F45;
--tx:#EDEBFF;--mut:#8E89B8;}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{background:var(--bg);color:var(--tx);font-family:'Zen Kaku Gothic New',sans-serif;line-height:1.7;
background-image:
 radial-gradient(ellipse 120% 60% at 50% -10%,rgba(142,114,255,.14),transparent 60%),
 repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);}
.dot{font-family:'DotGothic16',monospace}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:980px;margin:0 auto;padding:0 16px}
header{border-bottom:1px solid var(--line);background:rgba(13,10,31,.85);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10}
.hrow{display:flex;align-items:center;gap:14px;padding:12px 0;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;color:var(--tx)}
.logo:hover{text-decoration:none}
.logo-mark{width:42px;height:42px;border:2px solid var(--pink);border-radius:10px;
 display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:18px;
 box-shadow:0 0 12px rgba(255,61,174,.55),inset 0 0 10px rgba(255,61,174,.30);text-shadow:0 0 8px var(--pink)}
.logo-tx .t1{font-size:.62rem;letter-spacing:.3em;color:var(--mut)}
.logo-tx .t2{font-size:1.2rem;line-height:1.25;color:var(--tx);text-shadow:0 0 10px rgba(142,114,255,.8)}
.hnav{margin-left:auto;display:flex;gap:16px;font-size:.85rem}
.hnav a{color:var(--mut)}
.hnav a:hover{color:var(--cyan);text-decoration:none;text-shadow:0 0 8px var(--cyan)}
.hero{padding:56px 0 30px;text-align:center}
.hero h1{font-size:clamp(1.6rem,5vw,2.7rem);line-height:1.4;color:var(--cyan);
 text-shadow:0 0 6px rgba(41,230,255,.9),0 0 24px rgba(41,230,255,.45),0 0 60px rgba(41,230,255,.25)}
.hero .accent{color:var(--pink);text-shadow:0 0 6px rgba(255,61,174,.9),0 0 24px rgba(255,61,174,.5),0 0 60px rgba(255,61,174,.3);animation:flick 7s infinite}
@keyframes flick{0%,93%,95.5%,100%{opacity:1}94%,95%{opacity:.35}}
.hero p{margin:14px auto 0;color:var(--mut);max-width:42em}
.press{margin-top:18px;font-size:.85rem;color:var(--yellow);letter-spacing:.2em;text-shadow:0 0 10px rgba(255,210,63,.7);animation:blinkp 1.2s steps(2) infinite}
@keyframes blinkp{50%{opacity:.25}}
.badges{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap;justify-content:center}
.badge{font-size:.76rem;border:1px solid var(--line);background:var(--panel);padding:4px 12px;border-radius:999px;color:var(--mut)}
.badge.gold{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 10px rgba(255,210,63,.35)}
.catnav{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:30px 0 8px}
.cart{display:block;background:var(--panel);border:1px solid var(--neon,var(--line));border-radius:12px;
 padding:0 14px 12px;color:var(--tx);overflow:hidden;transition:transform .12s,box-shadow .12s;
 box-shadow:0 0 0 rgba(0,0,0,0)}
.cart:before{content:"";display:block;height:7px;margin:0 -14px 10px;
 background:linear-gradient(90deg,transparent,var(--neon,var(--violet)),transparent);opacity:.9;
 box-shadow:0 0 14px var(--neon,var(--violet))}
.cart:hover{transform:translateY(-3px);box-shadow:0 0 22px -4px var(--neon,var(--violet));text-decoration:none}
.cart .cn{font-size:.95rem;color:var(--neon,var(--tx));text-shadow:0 0 8px var(--neon,transparent)}
.cart .cc{font-size:.72rem;color:var(--mut)}
section.cat{margin:40px 0}
.cat h2,.cat .h2{display:inline-block;font-size:1.1rem;color:var(--neon,var(--tx));
 text-shadow:0 0 8px var(--neon,transparent),0 0 26px var(--neon,transparent);letter-spacing:.08em}
.cat h2:after,.cat .h2:after{content:"";display:block;height:2px;margin-top:4px;
 background:linear-gradient(90deg,var(--neon,var(--violet)),transparent);box-shadow:0 0 10px var(--neon,var(--violet))}
.cat .cdesc{margin:10px 0 14px;font-size:.86rem;color:var(--mut)}
.slist{display:flex;flex-direction:column;gap:10px}
.srow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;flex-wrap:wrap;transition:border-color .15s,box-shadow .15s}
.srow:hover{border-color:var(--neon,var(--violet));box-shadow:0 0 16px -6px var(--neon,var(--violet))}
.play{flex:0 0 auto;width:44px;height:44px;border:2px solid var(--neon,var(--cyan));border-radius:50%;
 background:transparent;color:var(--neon,var(--cyan));font-size:15px;cursor:pointer;
 display:flex;align-items:center;justify-content:center;text-shadow:0 0 8px var(--neon,var(--cyan));
 box-shadow:0 0 10px -2px var(--neon,var(--cyan)),inset 0 0 8px -4px var(--neon,var(--cyan));transition:background .12s,color .12s}
.play:hover{background:var(--neon,var(--cyan));color:var(--bg);text-shadow:none}
.srow.playing .play{background:var(--neon,var(--cyan));color:var(--bg);text-shadow:none;box-shadow:0 0 18px var(--neon,var(--cyan))}
.sinfo{flex:1 1 160px;min-width:140px}
.sname{font-size:1rem}
.sname a{color:var(--tx)}
.sname a:hover{color:var(--neon,var(--cyan))}
.sdesc{font-size:.76rem;color:var(--mut);line-height:1.5}
.wave{flex:0 0 auto;display:flex;align-items:flex-end;gap:2px;height:34px}
.wave i{display:block;width:4px;border-radius:1px;background:linear-gradient(180deg,var(--pink),var(--neon,var(--cyan)));opacity:.55;transition:opacity .15s}
.srow:hover .wave i{opacity:.85}
.srow.playing .wave i{opacity:1;animation:eq .55s ease-in-out infinite alternate;filter:drop-shadow(0 0 4px var(--neon,var(--cyan)))}
.wave i:nth-child(odd){animation-delay:.18s}
.wave i:nth-child(3n){animation-delay:.32s}
@keyframes eq{from{transform:scaleY(.55)}to{transform:scaleY(1.06)}}
.smeta{flex:0 0 auto;font-size:.72rem;color:var(--mut);min-width:44px;text-align:right}
.dls{flex:0 0 auto;display:flex;gap:8px}
.dl{font-size:.74rem;border:1px solid var(--line);border-radius:8px;background:transparent;padding:4px 12px;color:var(--mut)}
.dl:hover{border-color:var(--neon,var(--cyan));color:var(--neon,var(--cyan));text-decoration:none;box-shadow:0 0 10px -3px var(--neon,var(--cyan))}
footer{margin-top:70px;border-top:1px solid var(--line);background:rgba(23,18,52,.6);padding:26px 0 38px;font-size:.82rem;color:var(--mut)}
footer .links{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:10px}
footer .links a{color:var(--mut)}
footer .links a:hover{color:var(--cyan)}
.crumb{font-size:.76rem;color:var(--mut);margin:18px 0 6px}
.crumb a{color:var(--mut)}
.page h1{font-size:1.5rem;margin:6px 0 14px;color:var(--tx);text-shadow:0 0 14px rgba(142,114,255,.6)}
.page .body{max-width:46em}
.page .body h2{font-size:1.05rem;margin:26px 0 8px;color:var(--violet);text-shadow:0 0 10px rgba(142,114,255,.5)}
.page .body p,.page .body li{font-size:.92rem;color:#CDC9EE}
.page .body b{color:var(--yellow)}
.page .body ul{padding-left:1.4em;margin:8px 0}
.bigplayer{margin:14px 0 18px}
.licbox{border:1px solid rgba(255,210,63,.45);border-radius:12px;background:var(--panel);padding:14px 16px;margin:22px 0;font-size:.86rem;color:#CDC9EE;box-shadow:0 0 18px -8px var(--yellow)}
.licbox b{color:var(--yellow)}
.rel{margin-top:36px}
.ad{margin:24px 0}
.more{display:block;text-align:center;padding:12px;border:1px dashed var(--neon,var(--line));border-radius:12px;color:var(--neon,var(--cyan));font-size:.85rem}
.more:hover{text-decoration:none;box-shadow:0 0 16px -6px var(--neon,var(--cyan))}
.c-system{--neon:var(--cyan)} .c-game{--neon:var(--yellow)} .c-battle{--neon:var(--pink)}
.c-jingle{--neon:var(--mint)} .c-alert{--neon:var(--orange)} .c-fx{--neon:var(--violet)}
@media(max-width:560px){.wave{display:none}.smeta{display:none}.hero{padding:38px 0 22px}}
@media(prefers-reduced-motion:reduce){.hero .accent,.press,.srow.playing .wave i{animation:none}}