/* ============ DUAT // دوات — underground central ============ */
:root{
  --void:#070608;
  --asphalt:#0b0a0e;
  --panel:#100e14;
  --panel2:#15131b;
  --line:#241f2e;
  --ash:#7d7689;
  --fog:#b6b0c2;
  --bone:#ece7f2;
  --siren:oklch(0.86 0.21 135);      /* acid green */
  --blood:oklch(0.66 0.25 18);       /* siren red */
  --magenta:oklch(0.68 0.27 350);    /* hot pink */
  --amber:oklch(0.80 0.16 75);       /* streetlight */
  --cyan:oklch(0.84 0.13 205);       /* ghost cyan */
  --gold:oklch(0.82 0.14 90);        /* pharaonic gold */
  --shadow:0 18px 50px -20px rgba(0,0,0,.9);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--void);
  color:var(--bone);
  font-family:'Archivo',system-ui,sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--magenta);color:#000}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#08070a}
::-webkit-scrollbar-thumb{background:var(--line);border:2px solid #08070a}
::-webkit-scrollbar-thumb:hover{background:var(--siren)}

.anton{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.mono{font-family:'Space Mono',monospace}
.kufi{font-family:'Reem Kufi',sans-serif}
.ar{direction:rtl;unicode-bidi:isolate}

/* ---------- rain + vignette layers ---------- */
#rain{position:fixed;inset:0;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,transparent 40%,rgba(0,0,0,.65) 100%);}
.scan{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.4) 2px 3px)}

/* ---------- app frame ---------- */
#root{position:relative;z-index:3;height:100%}
.app{display:grid;grid-template-columns:248px 1fr 318px;grid-template-rows:auto 1fr auto;
  grid-template-areas:"top top top" "nav main side" "player player player";
  height:100vh;}

/* ---------- top bar / ticker ---------- */
.top{grid-area:top;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0c0a10,#08070b);}
.topbar{display:flex;align-items:center;gap:18px;padding:10px 18px}
.brand{display:flex;align-items:center;gap:12px;cursor:pointer}
/* ---- WM logo: 3 masked RGB channels, permanently split ---- */
.ditmark{position:relative;width:32px;height:35px;flex:none}
.dm{position:absolute;inset:0;-webkit-mask:url("assets/dit-mark.png") center/contain no-repeat;mask:url("assets/dit-mark.png") center/contain no-repeat}
.dm-g{background:var(--bone);z-index:3;animation:dmTear 1.7s steps(1,end) infinite}
.dm-c{background:var(--cyan);z-index:1;mix-blend-mode:screen;animation:dmC .9s steps(2,end) infinite}
.dm-m{background:var(--magenta);z-index:2;mix-blend-mode:screen;animation:dmM 1.1s steps(2,end) infinite}
@keyframes dmC{0%{transform:translate(-2.5px,0)}33%{transform:translate(-3.5px,1px)}66%{transform:translate(-1.5px,-1px)}100%{transform:translate(-3px,1.5px)}}
@keyframes dmM{0%{transform:translate(2.5px,0)}33%{transform:translate(3.5px,-1px)}66%{transform:translate(1.5px,1px)}100%{transform:translate(3px,-1.5px)}}
@keyframes dmTear{0%,18%{clip-path:inset(0)}19%{clip-path:inset(12% 0 58% 0);transform:translate(2px,0)}21%{clip-path:inset(0);transform:none}48%{clip-path:inset(0)}49%{clip-path:inset(66% 0 8% 0);transform:translate(-3px,0)}51%{clip-path:inset(0);transform:none}78%{clip-path:inset(0)}79%{clip-path:inset(40% 0 38% 0);transform:translate(2px,0)}81%{clip-path:inset(0);transform:none}}
.brand.hot .dm-c{animation-duration:.14s}
.brand.hot .dm-m{animation-duration:.16s}
.brand.hot .dm-g{animation-duration:.2s;background:var(--siren)}
.brand.hot .ditmark{filter:drop-shadow(0 0 10px var(--magenta))}

/* ---- wordmark: permanent RGB-split + tearing ---- */
.wordwrap{position:relative;line-height:1}
.brand .word{font-size:30px;color:var(--bone);position:relative;display:inline-block;letter-spacing:.01em;text-shadow:2px 0 color-mix(in oklch,var(--magenta),transparent 25%),-2px 0 color-mix(in oklch,var(--cyan),transparent 25%)}
.brand .word::before,.brand .word::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;height:100%}
.brand .word::before{color:var(--magenta);z-index:-1;animation:wm 1.3s steps(2,end) infinite;mix-blend-mode:screen}
.brand .word::after{color:var(--cyan);z-index:-1;animation:wc 1.05s steps(2,end) infinite;mix-blend-mode:screen}
@keyframes wm{0%{transform:translate(2.5px,0);clip-path:inset(0 0 58% 0)}50%{transform:translate(3px,1px);clip-path:inset(46% 0 8% 0)}100%{transform:translate(2px,-1px);clip-path:inset(20% 0 38% 0)}}
@keyframes wc{0%{transform:translate(-2.5px,0);clip-path:inset(50% 0 0 0)}50%{transform:translate(-3px,-1px);clip-path:inset(10% 0 60% 0)}100%{transform:translate(-2px,1px);clip-path:inset(34% 0 22% 0)}}
.brand .word{animation:wbase 2.7s steps(1,end) infinite}
@keyframes wbase{0%,92%,100%{transform:translate(0) skewX(0)}93%{transform:translate(-2px,0) skewX(-8deg)}95%{transform:translate(2px,0) skewX(6deg)}97%{transform:translate(-1px,0) skewX(0)}}
.brand.hot .word{animation:wbaseHot .12s steps(2,end) infinite;color:#fff;text-shadow:4px 0 var(--magenta),-4px 0 var(--cyan),0 0 8px var(--blood)}
.brand.hot .word::before{animation-duration:.13s}
.brand.hot .word::after{animation-duration:.1s}
@keyframes wbaseHot{0%{transform:translate(-3px,1px) skewX(-12deg)}50%{transform:translate(3px,-1px) skewX(10deg)}100%{transform:translate(-1px,0) skewX(-4deg)}}
.wordar{position:absolute;left:0;top:100%;font-family:'Reem Kufi';font-size:11px;color:var(--ash);letter-spacing:.3em}
.brand.hot .wordar{color:var(--siren)}

.search{flex:1;max-width:420px;display:flex;align-items:center;gap:8px;background:#08070b;border:1px solid var(--line);padding:8px 12px;color:var(--ash)}
.search input{background:none;border:none;outline:none;color:var(--bone);font-family:'Space Mono';font-size:12px;width:100%}
.search input::placeholder{color:#544d61}
.topbtn{font-family:'Space Mono';font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--void);background:var(--siren);border:none;padding:9px 14px;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%)}
.topbtn:hover{background:var(--bone)}
.icobtn{position:relative;color:var(--fog);background:#0a0810;border:1px solid var(--line);width:38px;height:38px;display:grid;place-items:center;cursor:pointer;font-size:15px}
.icobtn:hover{color:var(--siren);border-color:var(--siren)}
.icobtn .dot{position:absolute;top:-5px;right:-5px;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:9px;min-width:16px;height:16px;display:grid;place-items:center;border-radius:9px;padding:0 3px}

.ticker{display:flex;align-items:center;gap:0;border-top:1px solid var(--line);background:#06050a;overflow:hidden;height:30px}
.ticker .tag{flex:none;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:10px;letter-spacing:.18em;padding:0 12px;height:100%;display:flex;align-items:center;text-transform:uppercase;z-index:2}
.ticker .track{display:flex;gap:38px;white-space:nowrap;animation:tick 38s linear infinite;font-family:'Space Mono';font-size:11px;color:var(--ash);padding-left:38px}
.ticker .track b{color:var(--siren)}
.ticker .track .hot{color:var(--magenta)}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{grid-area:nav;border-right:1px solid var(--line);background:linear-gradient(180deg,#0a090d,#070609);overflow-y:auto;padding:14px 0}
.navsec{padding:0 14px;margin-bottom:6px}
.navsec h4{font-family:'Space Mono';font-size:9px;letter-spacing:.28em;color:#4f4860;text-transform:uppercase;margin:16px 8px 8px}
.navitem{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;color:var(--fog);border-left:3px solid transparent;position:relative;transition:.12s}
.navitem .ic{font-size:16px;width:22px;text-align:center}
.navitem .lbl{font-family:'Anton';font-size:17px;letter-spacing:.02em}
.navitem .ja{font-family:'Reem Kufi';font-size:11px;color:#574f66;margin-left:auto}
.navitem:hover{background:#100d16;color:var(--bone)}
.navitem.on{background:linear-gradient(90deg,#16101f,transparent);border-left-color:var(--siren);color:var(--bone)}
.navitem.on .ic{color:var(--siren)}
.navitem .badge{font-family:'Space Mono';font-size:9px;background:var(--magenta);color:#000;padding:1px 5px;margin-left:auto}

.me{margin:10px 14px;padding:12px;background:var(--panel);border:1px solid var(--line);display:flex;gap:10px;align-items:center;cursor:pointer;transition:border-color .15s}
.me:hover{border-color:var(--siren)}
.me .av{width:42px;height:42px;flex:none}
.me .nm{font-family:'Anton';font-size:15px}
.me .hd{font-family:'Space Mono';font-size:10px;color:var(--ash)}
.me .lvl{font-family:'Space Mono';font-size:9px;color:var(--siren)}

/* ---------- main ---------- */
.main{grid-area:main;overflow-y:auto;overflow-x:hidden;min-width:0;scroll-behavior:smooth}
.main-inner{padding:18px 22px 60px;max-width:760px;margin:0 auto}
.phead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.phead h1{font-family:'Anton';font-size:42px;line-height:.85}
.phead .sub{font-family:'Space Mono';font-size:11px;color:var(--ash);margin-top:6px;letter-spacing:.06em}
.phead .arname{font-family:'Reem Kufi';font-size:20px;color:var(--siren)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:'Space Mono';font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--ash);background:#0a0810;border:1px solid var(--line);padding:6px 11px;cursor:pointer}
.chip:hover{color:var(--bone);border-color:var(--ash)}
.chip.on{background:var(--bone);color:#000;border-color:var(--bone)}

/* ---------- composer ---------- */
.composer{background:var(--panel);border:1px solid var(--line);padding:14px;margin-bottom:20px;position:relative;overflow:hidden}
.composer::before{content:'';position:absolute;left:0;top:0;width:4px;height:100%;background:linear-gradient(var(--siren),var(--magenta))}
.composer textarea{width:100%;background:#08070b;border:1px solid var(--line);color:var(--bone);font-family:'Archivo';font-size:14px;padding:11px;resize:none;outline:none;min-height:54px}
.composer textarea:focus{border-color:var(--siren)}
.composer .row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.composer .kinds{display:flex;gap:6px;flex-wrap:wrap}
.kbtn{font-family:'Space Mono';font-size:10px;color:var(--fog);background:#0a0810;border:1px solid var(--line);padding:6px 9px;cursor:pointer;display:flex;gap:5px;align-items:center}
.kbtn:hover{color:var(--siren);border-color:var(--siren)}

/* ---------- post / card ---------- */
.card{background:var(--panel);border:1px solid var(--line);margin-bottom:16px;position:relative;animation:rise .4s ease both}
@keyframes rise{from{transform:translateY(10px)}to{transform:none}}
.card .head{display:flex;align-items:center;gap:10px;padding:13px 14px 11px}
.av{flex:none;border-radius:0;position:relative;display:grid;place-items:center;font-family:'Anton';color:#000;overflow:hidden}
.av .ring{position:absolute;inset:-2px;border:2px solid transparent}
.who{display:flex;flex-direction:column;line-height:1.15}
.who .nm{font-family:'Anton';font-size:16px;display:flex;align-items:center;gap:6px}
.who .nm .verif{color:var(--cyan);font-size:12px}
.who .meta{font-family:'Space Mono';font-size:10px;color:var(--ash)}
.roletag{font-family:'Space Mono';font-size:9px;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border:1px solid currentColor}
.r-rap{color:var(--magenta)}.r-prod{color:var(--siren)}.r-fan{color:var(--cyan)}.r-label{color:var(--gold)}
.card .more{margin-left:auto;color:var(--ash);cursor:pointer;font-size:18px;letter-spacing:1px}
.card .body{padding:0 14px 12px;font-size:14.5px;line-height:1.5;color:var(--fog)}
.card .body .h{color:var(--siren)}
.card .body .mn{color:var(--magenta)}

/* media block inside card */
.media{margin:0 14px 12px;border:1px solid var(--line);background:#07060a;position:relative;overflow:hidden}
.ph{position:relative;background:
   repeating-linear-gradient(45deg,var(--panel) 0 12px,var(--asphalt) 12px 24px);
   display:grid;place-items:center;color:#4f4860;font-family:'Space Mono';font-size:10px;letter-spacing:.1em;text-align:center}
.ph .lab{padding:5px 9px;border:1px dashed #3a3447;background:#0009}

/* beat player block */
.beat{padding:13px 14px;display:flex;flex-direction:column;gap:10px}
.beat .top{display:flex;align-items:center;gap:12px}
.beat .play{flex:none;width:46px;height:46px;border-radius:50%;background:var(--siren);color:#000;border:none;display:grid;place-items:center;font-size:18px;cursor:pointer;box-shadow:0 0 22px -4px var(--siren)}
.beat .play:hover{transform:scale(1.06)}
.beat .play.playing{background:var(--magenta);box-shadow:0 0 22px -4px var(--magenta)}
.beat .ti{font-family:'Anton';font-size:18px}
.beat .sub{font-family:'Space Mono';font-size:10px;color:var(--ash)}
.beat .stats{margin-left:auto;text-align:right;font-family:'Space Mono';font-size:10px;color:var(--ash)}
.wave{display:flex;align-items:flex-end;gap:2px;height:44px;width:100%;cursor:pointer}
.wave .bar{flex:1;background:#2c2638;min-width:2px;transition:.1s}
.wave .bar.fill{background:var(--siren)}
.wave.playing .bar.fill{background:var(--magenta)}

/* kit / vst card */
.kit{display:flex;flex-direction:column}
.kit .cover{aspect-ratio:16/9}
.kit .info{padding:13px 14px;display:flex;align-items:center;gap:12px}
.kit .price{margin-left:auto;font-family:'Anton';font-size:22px;color:var(--siren)}
.kit .price.free{color:var(--cyan)}
.dl{font-family:'Space Mono';font-size:11px;text-transform:uppercase;letter-spacing:.1em;background:var(--siren);color:#000;border:none;padding:9px 14px;cursor:pointer}
.dl:hover{background:var(--bone)}

/* footer actions */
.acts{display:flex;align-items:center;gap:4px;padding:6px 8px 12px;border-top:1px solid #1a1622;margin-top:2px}
.act{display:flex;align-items:center;gap:7px;font-family:'Space Mono';font-size:11px;color:var(--ash);background:none;border:none;padding:8px 12px;cursor:pointer}
.act:hover{color:var(--bone);background:#140f1c}
.act.liked{color:var(--magenta)}
.act .ic{font-size:14px}
.act.boost.on{color:var(--siren)}

/* ---------- sides / battle ---------- */
.battle{border:1px solid var(--line);background:#0a080e;margin-bottom:16px;position:relative;overflow:hidden}
.battle .vs-head{display:flex;align-items:center;justify-content:center;gap:0;position:relative}
.battle .side{flex:1;min-width:0;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;position:relative;transition:.18s;text-align:center}
.compactb{overflow:hidden}
.battle .side.A{background:linear-gradient(135deg,color-mix(in oklch,var(--magenta),#000 78%),transparent)}
.battle .side.B{background:linear-gradient(225deg,color-mix(in oklch,var(--siren),#000 80%),transparent)}
.battle .side:hover{filter:brightness(1.3)}
.battle .side.picked{box-shadow:inset 0 0 0 2px currentColor}
.battle .side.A.picked{color:var(--magenta)}.battle .side.B.picked{color:var(--siren)}
.battle .side .nm{font-family:'Anton';font-size:22px;color:var(--bone);max-width:100%}
.battle .side .pct{font-family:'Anton';font-size:30px}
.battle .side.A .pct{color:var(--magenta)}.battle .side.B .pct{color:var(--siren)}
.battle .vs{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'Anton';font-size:30px;color:#000;background:var(--bone);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;z-index:3;box-shadow:0 0 0 4px #0a080e}
.battle .barpair{display:flex;height:8px}
.battle .barpair .a{background:var(--magenta)}.battle .barpair .b{background:var(--siren)}
.battle .foot{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-family:'Space Mono';font-size:10px;color:var(--ash);border-top:1px solid var(--line)}

/* ---------- arena / competition ---------- */
.arena{border:1px solid var(--line);background:var(--panel);margin-bottom:16px}
.arena .banner{aspect-ratio:21/7;position:relative}
.arena .banner .ribbon{position:absolute;top:12px;left:12px;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:10px;letter-spacing:.15em;padding:4px 9px;text-transform:uppercase}
.arena .banner .live{position:absolute;top:12px;right:12px;background:#000a;color:var(--siren);font-family:'Space Mono';font-size:10px;padding:4px 9px;display:flex;gap:6px;align-items:center}
.arena .banner .live .pulse{width:7px;height:7px;border-radius:50%;background:var(--blood);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.2}}
.arena .ab{padding:14px}
.arena .ti{font-family:'Anton';font-size:26px}
.arena .desc{font-family:'Space Mono';font-size:11px;color:var(--ash);margin:6px 0 12px;line-height:1.5}
.arena .prize{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:12px}
.arena .prize div{font-family:'Space Mono';font-size:10px;color:var(--ash)}
.arena .prize b{display:block;font-family:'Anton';font-size:20px;color:var(--gold)}
.arena .entry{display:flex;align-items:center;gap:10px}
.bigbtn{font-family:'Anton';font-size:16px;letter-spacing:.04em;background:var(--siren);color:#000;border:none;padding:12px 22px;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 72%,94% 100%,0 100%)}
.bigbtn:hover{background:var(--magenta)}
.bigbtn.ghost{background:transparent;color:var(--bone);border:1px solid var(--line);clip-path:none}
.bigbtn.ghost:hover{border-color:var(--siren);color:var(--siren);background:transparent}

/* ---------- visual novel ---------- */
.vn{border:1px solid var(--line);background:var(--panel);margin-bottom:16px;display:grid;grid-template-columns:170px 1fr}
.vn .cover{position:relative}
.vn .cover .ep{position:absolute;bottom:0;left:0;right:0;background:#000c;font-family:'Space Mono';font-size:10px;color:var(--cyan);padding:5px 8px}
.vn .vb{padding:14px}
.vn .ti{font-family:'Anton';font-size:22px}
.vn .by{font-family:'Space Mono';font-size:10px;color:var(--ash);margin-bottom:8px}
.vn .blurb{font-size:13px;color:var(--fog);line-height:1.5;margin-bottom:12px}
.vn .tags{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- games ---------- */
.games-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.game{border:1px solid var(--line);background:var(--panel);overflow:hidden}
.game .cover{aspect-ratio:4/3;position:relative}
.game .cover .plays{position:absolute;bottom:8px;left:8px;background:#000b;font-family:'Space Mono';font-size:10px;color:var(--siren);padding:3px 7px}
.game .gb{padding:12px}
.game .ti{font-family:'Anton';font-size:18px}
.game .by{font-family:'Space Mono';font-size:10px;color:var(--ash)}

/* ---------- right rail ---------- */
.side{grid-area:side;border-left:1px solid var(--line);background:linear-gradient(180deg,#0a090d,#070609);overflow-y:auto;overflow-x:hidden;min-width:0;padding:16px 14px 40px}
/* compact battle for the right rail */
.compactb .side{padding:14px 6px}
.compactb .side .nm{font-size:15px;line-height:1}
.compactb .vs{width:42px;height:42px;font-size:22px}
.compactb .side .pct{font-size:22px}
.rsec{margin-bottom:24px}
.rsec h3{font-family:'Anton';font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:12px;letter-spacing:.02em}
.rsec h3 .dotgreen{width:8px;height:8px;background:var(--siren);border-radius:50%;box-shadow:0 0 10px var(--siren)}
.rsec h3 .ar{font-family:'Reem Kufi';font-size:12px;color:var(--ash);margin-left:auto;font-weight:400}

.live-row{display:flex;align-items:center;gap:10px;padding:9px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;cursor:pointer}
.live-row:hover{border-color:var(--siren)}
.live-row .av{width:36px;height:36px}
.live-row .nm{font-family:'Anton';font-size:14px}
.live-row .what{font-family:'Space Mono';font-size:9px;color:var(--ash)}
.live-row .listeners{margin-left:auto;font-family:'Space Mono';font-size:10px;color:var(--siren);text-align:right}
.live-row .listeners .lv{color:var(--blood);font-size:8px;letter-spacing:.1em}

.trend{padding:8px 0;border-bottom:1px solid #15121b;cursor:pointer}
.trend:hover .t{color:var(--siren)}
.trend .k{font-family:'Space Mono';font-size:9px;color:#4f4860;letter-spacing:.12em}
.trend .t{font-family:'Anton';font-size:16px;color:var(--bone)}
.trend .n{font-family:'Space Mono';font-size:10px;color:var(--ash)}

.miniwho{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);background:var(--panel);margin-bottom:8px}
.miniwho .av{width:34px;height:34px}
.miniwho .nm{font-family:'Anton';font-size:13px;line-height:1}
.miniwho .h{font-family:'Space Mono';font-size:9px;color:var(--ash)}
.followbtn{margin-left:auto;font-family:'Space Mono';font-size:9px;text-transform:uppercase;letter-spacing:.08em;background:none;border:1px solid var(--line);color:var(--fog);padding:5px 9px;cursor:pointer}
.followbtn:hover{border-color:var(--siren);color:var(--siren)}
.followbtn.on{background:var(--siren);color:#000;border-color:var(--siren)}

/* ---------- player bar ---------- */
.player{grid-area:player;border-top:1px solid var(--line);background:linear-gradient(180deg,#0d0b12,#08070b);display:flex;align-items:center;gap:16px;padding:0 16px;height:74px}
.player .nowav{width:46px;height:46px;flex:none}
.player .nowinfo{min-width:150px}
.player .nowinfo .t{font-family:'Anton';font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.player .nowinfo .a{font-family:'Space Mono';font-size:10px;color:var(--ash)}
.player .controls{display:flex;align-items:center;gap:14px;color:var(--fog)}
.player .controls .pp{width:40px;height:40px;border-radius:50%;background:var(--bone);color:#000;border:none;display:grid;place-items:center;font-size:16px;cursor:pointer}
.player .controls .pp:hover{background:var(--siren)}
.player .controls span{cursor:pointer;font-size:16px}
.player .controls span:hover{color:var(--bone)}
.player .seek{flex:1;display:flex;align-items:center;gap:10px}
.player .seek .bar{flex:1;height:4px;background:#241f2e;position:relative;cursor:pointer}
.player .seek .bar .f{position:absolute;left:0;top:0;height:100%;background:var(--siren)}
.player .seek .bar .f::after{content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;border-radius:50%;background:var(--bone)}
.player .seek .ti{font-family:'Space Mono';font-size:10px;color:var(--ash);min-width:38px}
.player .vol{display:flex;align-items:center;gap:8px;color:var(--fog);min-width:120px}
.player .vol .bar{width:70px;height:4px;background:#241f2e;position:relative}
.player .vol .bar .f{position:absolute;left:0;top:0;height:100%;background:var(--fog)}

/* ---------- toast ---------- */
.toasts{position:fixed;bottom:90px;right:18px;z-index:50;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel2);border:1px solid var(--siren);border-left-width:4px;padding:11px 16px;font-family:'Space Mono';font-size:11px;color:var(--bone);box-shadow:var(--shadow);animation:toastin .25s ease both;max-width:300px}
.toast .ti{color:var(--siren);font-size:9px;letter-spacing:.15em;text-transform:uppercase;margin-bottom:3px}
@keyframes toastin{from{transform:translateX(30px)}to{transform:none}}

/* hieroglyph divider */
.hdiv{font-family:'Reem Kufi';color:#2a2535;font-size:13px;text-align:center;letter-spacing:.5em;padding:10px 0}

/* ---------- composer: type selector + genre + start-a-side ---------- */
.typesel{display:flex;gap:8px;margin-bottom:10px}
.tbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font-family:'Space Mono';font-size:12px;letter-spacing:.08em;color:var(--fog);background:#08070b;border:1px solid var(--line);padding:10px;cursor:pointer}
.tbtn span{font-size:14px}
.tbtn:hover{border-color:var(--ash);color:var(--bone)}
.tbtn.on{background:var(--siren);color:#000;border-color:var(--siren)}
.imgdrop{margin-top:10px;border:1px dashed #3a3447;background:#07060a;color:#6a6378;font-family:'Space Mono';font-size:11px;padding:14px;text-align:center}
.genrepick{margin-top:12px}
.gplabel{font-family:'Space Mono';font-size:10px;letter-spacing:.14em;color:var(--ash);text-transform:uppercase;margin-bottom:8px}
.gplabel span{color:#56506280;text-transform:none;letter-spacing:0}
.gpchips{display:flex;flex-wrap:wrap;gap:6px}
.gpchip{font-family:'Space Mono';font-size:10px;color:var(--fog);background:#0a0810;border:1px solid var(--line);padding:6px 10px;cursor:pointer}
.gpchip:hover{border-color:var(--cyan);color:var(--cyan)}
.gpchip.on{background:var(--cyan);color:#000;border-color:var(--cyan)}
.kbtn.on{color:#000;background:var(--magenta);border-color:var(--magenta)}
.sideform{margin-top:12px;border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.sflabel{font-family:'Space Mono';font-size:10px;letter-spacing:.1em;color:var(--magenta);text-transform:uppercase}
.sfin{background:#08070b;border:1px solid var(--line);color:var(--bone);font-family:'Space Mono';font-size:12px;padding:9px 11px;outline:none;width:100%}
.sfin:focus{border-color:var(--siren)}
.sfin.a:focus{border-color:var(--magenta)}
.sfrow{display:flex;align-items:center;gap:10px}
.sfrow .sfin{flex:1}
.sfvs{font-family:'Anton';font-size:18px;color:var(--bone)}

/* kind tags + genre row on beat/stem cards */
.kindtag{font-family:'Space Mono';font-size:8px;letter-spacing:.12em;padding:2px 6px;border:1px solid currentColor;display:inline-block;margin-bottom:4px}
.kindtag.beatt{color:var(--siren)}.kindtag.stem{color:var(--cyan)}
.genrow{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.genrechip{font-family:'Space Mono';font-size:10px;letter-spacing:.06em;color:var(--cyan);border:1px solid color-mix(in oklch,var(--cyan),transparent 60%);padding:4px 9px;cursor:pointer}
.genrechip:hover{background:var(--cyan);color:#000}
.genhint{font-family:'Space Mono';font-size:9px;color:#56506299}
.empty{padding:40px;text-align:center;color:var(--ash);font-size:12px;border:1px dashed var(--line)}

/* nav sub-items */
.navitem.subnav .lbl{font-family:'Space Mono';font-size:12px;text-transform:none;letter-spacing:0}
.navitem.subnav{border-left-color:transparent}
.navitem.admin{margin-top:4px}
.navitem.admin .lbl{color:var(--amber)}

/* broadcast banners under the ticker */
.banner{display:flex;align-items:center;gap:10px;font-family:'Space Mono';font-size:11px;padding:7px 18px;border-top:1px solid var(--line);letter-spacing:.04em}
.banner .bic{font-size:13px}
.banner.ann{background:color-mix(in oklch,var(--magenta),#000 80%);color:var(--magenta)}
.banner.sub{background:color-mix(in oklch,var(--gold),#000 84%);color:var(--gold)}

/* player focus selector */
.player .focus{display:flex;align-items:center;gap:8px;flex:none}
.player .focus .flabel{font-family:'Space Mono';font-size:9px;letter-spacing:.16em;color:var(--ash)}
.player .fsel{background:#08070b;border:1px solid var(--line);color:var(--siren);font-family:'Space Mono';font-size:11px;padding:7px 9px;outline:none;cursor:pointer;max-width:150px}
.player .fsel:hover{border-color:var(--siren)}
.player>.wave{flex:none;width:130px}
.player .nowinfo.empty{min-width:0;color:var(--ash);font-size:11px}
.icobtn.admin{color:var(--amber)}
.icobtn.admin:hover{color:var(--bone);border-color:var(--amber)}

/* ---------- admin console ---------- */
.adminwrap{position:fixed;inset:0;z-index:60}
.adminback{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px)}
.adminpanel{position:absolute;top:0;right:0;bottom:0;width:380px;max-width:92vw;background:linear-gradient(180deg,#0e0c13,#08070b);border-left:2px solid var(--amber);box-shadow:-20px 0 60px -20px #000;overflow-y:auto;animation:slidein .25s ease both}
@keyframes slidein{from{transform:translateX(40px)}to{transform:none}}
.ahead{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}
.atitle{font-family:'Anton';font-size:19px;color:var(--amber);white-space:nowrap}
.asub{font-size:10px;color:var(--ash);margin-top:2px}
.aclose{background:none;border:1px solid var(--line);color:var(--fog);width:32px;height:32px;cursor:pointer;font-size:14px}
.aclose:hover{border-color:var(--blood);color:var(--blood)}
.asec{padding:16px 18px;border-bottom:1px solid #15121b}
.asec h5{font-family:'Space Mono';font-size:10px;letter-spacing:.2em;color:var(--ash);text-transform:uppercase;margin-bottom:12px}
.seasongrid{display:flex;flex-direction:column;gap:8px}
.seasonopt{display:flex;align-items:center;gap:12px;text-align:left;background:#0a0810;border:1px solid var(--line);padding:12px;cursor:pointer;color:var(--fog)}
.seasonopt:hover{border-color:var(--fog)}
.seasonopt.on{border-color:var(--amber);background:linear-gradient(90deg,color-mix(in oklch,var(--amber),#000 82%),transparent)}
.seasonopt .sicon{font-size:22px;width:30px;text-align:center}
.seasonopt .sname{font-size:16px;color:var(--bone)}
.seasonopt .sdesc{font-size:9px;color:var(--ash)}
.atoggle{display:flex;align-items:center;gap:10px;font-family:'Space Mono';font-size:11px;color:var(--fog);cursor:pointer;margin-top:10px}
.atoggle input{width:16px;height:16px;accent-color:var(--siren);cursor:pointer}
.afoot{padding:14px 18px;font-size:9px;color:#56506299;letter-spacing:.1em}

/* season tints (subtle — base rain look preserved) */
body[data-season="winter"] .vignette{background:radial-gradient(120% 90% at 50% 0%,rgba(130,160,210,.06) 0%,transparent 36%,rgba(2,4,12,.72) 100%)}
body[data-season="spring"] .vignette{background:radial-gradient(120% 90% at 50% 0%,rgba(255,180,205,.05) 0%,transparent 42%,rgba(10,2,8,.6) 100%)}

/* ====== FULL SEASON RESKINS — every token shifts ====== */
body{transition:background-color .6s ease}
.top,.nav,.side,.player,.card,.composer,.battle,.arena,.vn,.game,.kit,.modal,.adminpanel,.walletcard,.ph,.av,.chip,.bigbtn,.matchcard,.minibeat,.live-row,.miniwho,.trend,.subtab,.gpchip,.tbtn,.convrow,.bubble,.notif,.kindtag,.genrechip,.roletag,.followbtn,.dl,.topbtn,.icobtn,.search,.me,.navitem{
  transition:background-color .55s ease,border-color .55s ease,color .55s ease,box-shadow .55s ease,fill .55s ease}

/* SPRING — rain gone, blossom world. warm plum dark + PINK primary, peach/mint accents */
body[data-season="spring"]{
  --void:oklch(0.165 0.045 350); --asphalt:oklch(0.185 0.05 350);
  --panel:oklch(0.215 0.055 350); --panel2:oklch(0.255 0.06 348); --line:oklch(0.36 0.06 350);
  --ash:oklch(0.66 0.07 350); --fog:oklch(0.84 0.05 350); --bone:oklch(0.98 0.02 350);
  --siren:oklch(0.82 0.16 350); --magenta:oklch(0.70 0.21 18); --blood:oklch(0.66 0.22 28);
  --cyan:oklch(0.86 0.14 160); --amber:oklch(0.86 0.16 68); --gold:oklch(0.87 0.16 92);
}
body[data-season="spring"]{background:oklch(0.165 0.045 350)}
body[data-season="spring"] .grain{opacity:.04}

/* WINTER — frozen world. deep navy dark + ICE-CYAN primary, frost-blue/white accents */
body[data-season="winter"]{
  --void:oklch(0.15 0.04 245); --asphalt:oklch(0.17 0.045 245);
  --panel:oklch(0.20 0.05 242); --panel2:oklch(0.245 0.055 240); --line:oklch(0.34 0.06 240);
  --ash:oklch(0.64 0.06 235); --fog:oklch(0.85 0.05 225); --bone:oklch(0.99 0.012 220);
  --siren:oklch(0.90 0.14 205); --magenta:oklch(0.82 0.13 255); --blood:oklch(0.68 0.20 15);
  --cyan:oklch(0.93 0.09 208); --amber:oklch(0.88 0.09 220); --gold:oklch(0.89 0.10 215);
}
body[data-season="winter"]{background:oklch(0.15 0.04 245)}

/* responsive collapse */
@media(max-width:1180px){.app{grid-template-columns:72px 1fr 290px}.navitem .lbl,.navsec h4,.navitem .ja,.me .nm,.me .hd,.me .lvl{display:none}.navitem{justify-content:center}.me{justify-content:center}}
@media(max-width:900px){.app{grid-template-columns:72px 1fr;grid-template-areas:"top top" "nav main" "player player"}.side{display:none}}
@media(max-width:620px){.app{grid-template-columns:1fr;grid-template-areas:"top" "main" "player"}.nav{display:none}}

/* ============ MODAL / DEEP PAGES ============ */
.modalwrap{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:30px}
.modalback{position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)}
.modal{position:relative;width:560px;max-width:94vw;max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,#100e15,#0a0810);border:1px solid var(--line);border-top:3px solid var(--siren);box-shadow:0 30px 80px -20px #000;animation:rise .3s ease both}
.modal.wide{width:720px}
.mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0d0b12;z-index:5}
.mtitle{font-size:24px;line-height:1.05;white-space:nowrap}
.mar{font-size:12px;color:var(--ash);margin-top:4px}
.mbody{padding:18px}
.msec{margin-top:20px}
.msec h5{font-family:'Space Mono';font-size:10px;letter-spacing:.2em;color:var(--ash);text-transform:uppercase;margin-bottom:10px;border-bottom:1px solid #15121b;padding-bottom:7px}

/* profile */
.avclick,.mwclick{cursor:pointer;display:flex;align-items:center;gap:9px}
.profbanner{margin:-18px -18px 0}
.profrow{display:flex;gap:16px;align-items:flex-start;margin-top:-30px;position:relative;z-index:2}
.profrow .av{border:3px solid #0d0b12}
.profmeta{flex:1;padding-top:34px}
.profname{font-size:24px}
.profname .verif{color:var(--cyan)}
.profhd{font-size:11px;color:var(--ash);margin:6px 0 8px;display:flex;align-items:center;gap:8px}
.profbio{font-size:13px;color:var(--fog);line-height:1.5;max-width:90%}
.profacts{display:flex;gap:8px;padding-top:34px}
.followbtn.big{padding:10px 18px;font-size:11px}
.iconghost{background:#0a0810;border:1px solid var(--line);color:var(--fog);width:40px;cursor:pointer;font-size:15px}
.iconghost:hover{border-color:var(--siren);color:var(--siren)}
.profstats{display:flex;gap:0;margin-top:18px;border:1px solid var(--line)}
.pstat{flex:1;padding:14px;text-align:center;border-right:1px solid var(--line);font-family:'Space Mono';font-size:9px;letter-spacing:.14em;color:var(--ash)}
.pstat:last-child{border-right:none}
.pstat b{display:block;font-family:'Anton';font-size:24px;color:var(--bone);letter-spacing:0;margin-bottom:2px}
.minibeat{display:flex;align-items:center;gap:12px;padding:10px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;cursor:pointer}
.minibeat:hover{border-color:var(--siren)}
.mbplay{flex:none;width:34px;height:34px;border-radius:50%;background:var(--siren);color:#000;display:grid;place-items:center;font-size:13px}
.minibeat>div{flex:1;min-width:0}
.mbt{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbs{font-size:10px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbplays{margin-left:auto;font-size:10px;color:var(--ash);white-space:nowrap;flex:none;padding-left:8px}

/* kit detail */
.kitmeta{display:flex;align-items:center;gap:14px;margin-top:14px}
.kmleft{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.kmleft .anton{white-space:nowrap}
.kmprice{font-size:26px;color:var(--siren);flex:none}
.kmprice.free{color:var(--cyan)}
.dl.big{padding:12px 20px;font-size:12px;flex:none}
.samplelist{display:flex;flex-direction:column;gap:4px}
.samplerow{display:flex;align-items:center;gap:12px;padding:9px 10px;background:#0a0810;border:1px solid var(--line);cursor:pointer}
.samplerow:hover{border-color:var(--cyan)}
.srplay{flex:none;width:26px;height:26px;border-radius:50%;background:#15131b;color:var(--siren);display:grid;place-items:center;font-size:10px}
.srname{flex:none;width:130px;font-size:11px;color:var(--fog)}
.samplerow .wave{height:22px}

/* bracket */
.bracketmeta{font-size:11px;color:var(--ash);margin-bottom:16px;letter-spacing:.04em}
.bracket{display:flex;gap:14px;align-items:stretch;overflow-x:auto;padding-bottom:8px}
.bcol{flex:1;min-width:170px;display:flex;flex-direction:column;justify-content:space-around;gap:12px}
.bcol h6{font-family:'Space Mono';font-size:9px;letter-spacing:.2em;color:var(--ash);text-transform:uppercase;text-align:center;margin-bottom:4px}
.matchcard{border:1px solid var(--line);background:#0a0810;position:relative}
.matchcard.live{border-color:var(--blood);box-shadow:0 0 18px -6px var(--blood)}
.mteam{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-family:'Anton';font-size:14px;color:var(--ash);border-bottom:1px solid #15121b}
.mteam:last-child{border-bottom:none}
.mteam.win{color:var(--siren)}
.mscore{font-family:'Space Mono';font-size:13px}
.matchlive{position:absolute;top:-9px;left:50%;transform:translateX(-50%);background:var(--blood);color:#fff;font-family:'Space Mono';font-size:8px;letter-spacing:.1em;padding:2px 7px;white-space:nowrap}
.trophy{text-align:center;font-size:34px;color:var(--gold);margin-top:8px}
.trophy .mono{font-size:12px;color:var(--gold)}
.mfoot{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}

/* VN reader (fullscreen) */
.vnreader{position:fixed;inset:0;z-index:75;background:#000}
.vnstage{position:absolute;inset:0}
.vnstage .ph{position:absolute;inset:0}
.vnclose{position:absolute;top:16px;right:16px;z-index:6;background:#000a;border:1px solid var(--line);color:var(--bone);width:38px;height:38px;cursor:pointer;font-size:15px}
.vnclose:hover{border-color:var(--blood);color:var(--blood)}
.vnsound{position:absolute;top:18px;left:18px;z-index:6;background:#000a;border:1px solid var(--line);color:var(--cyan);font-size:10px;padding:6px 11px}
.vndialog{position:absolute;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(180deg,transparent,#040306 30%);padding:60px 8vw 40px}
.vnwho{font-size:24px;color:var(--siren);margin-bottom:8px}
.vntext{font-size:18px;line-height:1.6;color:var(--bone);max-width:760px;text-wrap:pretty;margin-bottom:20px;min-height:80px}
.vnchoices{display:flex;flex-direction:column;gap:8px;max-width:560px}
.vnchoice{text-align:left;background:#0d0b12cc;border:1px solid var(--line);border-left:3px solid var(--magenta);color:var(--bone);font-family:'Archivo';font-size:15px;padding:12px 16px;cursor:pointer;transition:.12s}
.vnchoice:hover{background:var(--magenta);color:#000;border-left-color:#000;transform:translateX(4px)}

/* games */
.gamebox{display:flex;flex-direction:column;align-items:center;gap:12px}
.gametop{display:flex;gap:20px;justify-content:center}
.gscore{font-size:11px;color:var(--ash);letter-spacing:.1em}
.gscore b{color:var(--siren);font-size:14px}
.gstage{position:relative}
.gcanvas{display:block;border:1px solid var(--line);background:#07060a}
.goverlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(7,6,10,.9)}
.dpad{display:grid;grid-template-areas:". u ." "l . r" ". d .";gap:5px}
.dpad button{width:42px;height:42px;background:#15131b;border:1px solid var(--line);color:var(--siren);font-size:15px;cursor:pointer}
.dpad button:active{background:var(--siren);color:#000}
.huntgrid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:300px}
.huntcell{aspect-ratio:1;background:#0a0810;border:1px solid var(--line);font-size:26px;cursor:pointer;display:grid;place-items:center;transition:.08s}
.huntcell.up.sample{background:radial-gradient(circle,color-mix(in oklch,var(--siren),#000 55%),#0a0810);border-color:var(--siren);color:var(--siren)}
.huntcell.up.bomb{background:radial-gradient(circle,color-mix(in oklch,var(--blood),#000 50%),#0a0810);border-color:var(--blood);color:var(--blood)}
.huntover{padding:20px}

/* ============ PAGES: library / wallet / messages / upload ============ */
.subtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.subtab{font-family:'Space Mono';font-size:10px;letter-spacing:.1em;color:var(--ash);background:#0a0810;border:1px solid var(--line);padding:8px 13px;cursor:pointer}
.subtab:hover{color:var(--bone);border-color:var(--ash)}
.subtab.on{background:var(--bone);color:#000;border-color:var(--bone)}
.libgrid{display:flex;flex-direction:column;gap:8px}
.libempty{padding:50px 20px;text-align:center;border:1px dashed var(--line);background:#08070b}
.navitem.uploadnav .lbl{color:var(--siren)}
.navitem.uploadnav .ic{color:var(--siren)}

/* wallet */
.walletcard{border:1px solid var(--line);border-top:3px solid var(--gold);background:linear-gradient(135deg,#13110a,#0a0810);padding:24px}
.wlabel{font-size:10px;letter-spacing:.2em;color:var(--ash)}
.wbal{font-size:52px;color:var(--gold);line-height:1;margin:8px 0 18px;display:flex;align-items:baseline;gap:14px}
.wusd{font-size:13px;color:var(--ash)}
.wactions{display:flex;gap:10px;flex-wrap:wrap}
.txn{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid #15121b}
.txamt{font-size:14px;min-width:80px}
.txwhat{flex:1;font-size:13px;color:var(--fog)}
.txdate{font-size:10px;color:var(--ash)}

/* messages */
.messenger{display:grid;grid-template-columns:230px 1fr;border:1px solid var(--line);height:calc(100vh - 350px);min-height:400px;max-height:560px;overflow:hidden}
.convlist{border-right:1px solid var(--line);overflow-y:auto;background:#08070b}
.convrow{display:flex;align-items:center;gap:10px;padding:12px;cursor:pointer;border-bottom:1px solid #120f18;border-left:3px solid transparent}
.convrow:hover{background:#100d16}
.convrow.on{background:#15101f;border-left-color:var(--siren)}
.convmeta{flex:1;min-width:0}
.convname{font-size:14px;line-height:1;white-space:nowrap}
.convname .verif{color:var(--cyan)}
.convlast{font-size:10px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}
.convtime{font-size:9px;color:#56506299;align-self:flex-start}
.thread{display:flex;flex-direction:column;min-width:0}
.threadhead{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#0c0a10}
.threadhead .anton{white-space:nowrap}
.bubbles{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:repeating-linear-gradient(135deg,#0a080e 0 18px,#08070b 18px 36px)}
.bubble{max-width:74%;padding:9px 13px;font-size:13.5px;line-height:1.45;position:relative}
.bubble .btext{display:block}
.bubble .btime{font-family:'Space Mono';font-size:8px;opacity:.6;display:block;text-align:right;margin-top:3px}
.bubble.them{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);color:var(--bone)}
.bubble.me{align-self:flex-end;background:var(--siren);color:#000}
.msgbar{display:flex;align-items:center;gap:8px;padding:10px;border-top:1px solid var(--line);background:#0c0a10}
.msgattach{background:#15131b;border:1px solid var(--line);color:var(--siren);width:38px;height:38px;cursor:pointer;font-size:15px;flex:none}
.msgbar input{flex:1;background:#08070b;border:1px solid var(--line);color:var(--bone);font-family:'Archivo';font-size:13px;padding:10px 12px;outline:none}
.msgbar input:focus{border-color:var(--siren)}
.msgsend{background:var(--siren);color:#000;border:none;font-family:'Space Mono';font-size:11px;letter-spacing:.1em;padding:10px 16px;cursor:pointer;flex:none}
.msgsend:hover{background:var(--bone)}

/* upload */
.uploaddrop{border:2px dashed #3a3447;background:#08070b;padding:70px 20px;text-align:center;cursor:pointer;transition:.15s}
.uploaddrop:hover{border-color:var(--siren);background:#0a0c0a}
.updicon{font-size:54px;color:var(--siren);line-height:1;margin-bottom:8px}
.uploadform{display:flex;flex-direction:column;gap:0}
.upfile{border:1px solid var(--line);background:var(--panel);padding:14px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.upfile .wave{width:100%;height:40px;margin-top:4px}
.upgrid{display:grid;grid-template-columns:1fr 90px 90px;gap:12px;margin-top:14px}
.upfield{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.upfield label{font-family:'Space Mono';font-size:9px;letter-spacing:.16em;color:var(--ash)}
.upfield.big{grid-column:auto}
.artdrop{border:1px dashed #3a3447;background:#08070b;color:#6a6378;font-family:'Space Mono';font-size:11px;padding:18px;text-align:center;cursor:pointer}
.artdrop:hover{border-color:var(--cyan);color:var(--cyan)}
.pricerow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pricepick{font-family:'Space Mono';font-size:10px;letter-spacing:.08em;color:var(--fog);background:#0a0810;border:1px solid var(--line);padding:10px 14px;cursor:pointer}
.pricepick.on{background:var(--siren);color:#000;border-color:var(--siren)}
.priceinput{display:flex;align-items:center;gap:4px;font-family:'Anton';font-size:18px;color:var(--siren)}
.uppublish{display:flex;gap:10px;margin-top:24px;flex-wrap:wrap}

/* ============ LIVE ROOM ============ */
.golivenav .lbl{color:var(--blood)}
.golivenav .ic{color:var(--blood);animation:pulse 1.2s infinite}
.liveroom{position:fixed;inset:0;z-index:78;background:#040306;display:grid;grid-template-columns:1fr 320px}
.livemain{display:flex;flex-direction:column;min-width:0;padding:18px;gap:14px}
.livetop{display:flex;align-items:center;gap:14px}
.onair{display:flex;align-items:center;gap:8px;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:12px;letter-spacing:.18em;padding:6px 12px}
.oadot{width:9px;height:9px;border-radius:50%;background:#fff;animation:pulse 1s infinite}
.livelisteners{margin-left:0;color:var(--siren);font-size:13px}
.livetop .vnclose{margin-left:auto}
.livestage{flex:1;position:relative;border:1px solid var(--line);background:radial-gradient(120% 100% at 50% 0%,#0e0c14,#050409);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.vizcanvas{position:absolute;left:0;right:0;bottom:0;width:100%;height:70%;opacity:.92}
.livehost{position:relative;display:flex;align-items:center;gap:16px;padding:24px;background:linear-gradient(0deg,#040306cc,transparent)}
.livehost .verif{color:var(--cyan)}
.livectrls{display:flex;gap:10px;flex-wrap:wrap}
.livectrls .bigbtn{white-space:nowrap;clip-path:none}
.bigbtn.endstream{background:var(--blood);color:#fff}
.bigbtn.muted{border-color:var(--blood);color:var(--blood)}
.livechat{border-left:1px solid var(--line);background:#0a080e;display:flex;flex-direction:column;min-width:0}
.lchead{padding:16px;border-bottom:1px solid var(--line);font-size:16px;letter-spacing:.04em}
.lcmsgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:9px}
.lcmsg{font-size:13px;line-height:1.4}
.lcname{font-family:'Anton';font-size:13px}
.lctext{color:var(--fog)}
.lcbar{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line)}
.lcbar input{flex:1;background:#08070b;border:1px solid var(--line);color:var(--bone);font-family:'Archivo';font-size:13px;padding:9px 11px;outline:none}
.lcbar input:focus{border-color:var(--siren)}
@media(max-width:760px){.liveroom{grid-template-columns:1fr;grid-template-rows:1fr 240px}.livechat{border-left:none;border-top:1px solid var(--line)}}

/* ============ NOTIFICATIONS ============ */
.notifwrap{position:relative}
.notifpanel{position:absolute;top:46px;right:-40px;width:340px;max-width:90vw;background:linear-gradient(180deg,#100e15,#0a0810);border:1px solid var(--line);border-top:3px solid var(--magenta);box-shadow:0 24px 60px -16px #000;z-index:80;animation:rise .2s ease both}
.nphead{display:flex;align-items:center;justify-content:space-between;padding:13px 15px;border-bottom:1px solid var(--line)}
.npclear{font-size:10px;color:var(--cyan);cursor:pointer;background:none;border:none}
.npclear:hover{color:var(--bone)}
.nplist{max-height:380px;overflow-y:auto}
.notif{display:flex;align-items:flex-start;gap:11px;padding:12px 14px;border-bottom:1px solid #15121b;cursor:pointer}
.notif:hover{background:#100d16}
.notif.unread{background:#15101f}
.navrel{position:relative;flex:none}
.nicon{position:absolute;bottom:-3px;right:-4px;background:var(--panel2);border:1px solid var(--line);width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:9px;color:var(--siren)}
.ntext{flex:1;font-size:12.5px;color:var(--fog);line-height:1.4}
.ntext b{color:var(--bone);font-family:'Anton';font-weight:400}
.ntime{font-size:9px;color:var(--ash);margin-top:3px}
.nudot{width:8px;height:8px;border-radius:50%;background:var(--magenta);flex:none;margin-top:5px}

/* ============ SEARCH ============ */
.searchwrap{position:relative;flex:1;max-width:420px}
.search{max-width:none}
.search.active{border-color:var(--siren)}
.searchx{cursor:pointer;color:var(--ash);font-size:11px}
.searchx:hover{color:var(--blood)}
.searchpanel{position:absolute;top:46px;left:0;right:0;background:linear-gradient(180deg,#100e15,#0a0810);border:1px solid var(--line);border-top:3px solid var(--siren);box-shadow:0 24px 60px -16px #000;z-index:80;max-height:440px;overflow-y:auto;animation:rise .18s ease both}
.sempty{padding:24px;text-align:center;color:var(--ash);font-size:12px}
.sgroup{padding:10px 0;border-bottom:1px solid #15121b}
.sgroup h6{font-family:'Space Mono';font-size:9px;letter-spacing:.2em;color:#4f4860;text-transform:uppercase;padding:4px 14px 8px}
.sresult{display:flex;align-items:center;gap:11px;padding:8px 14px;cursor:pointer}
.sresult:hover{background:#140f1c}
.sico{width:30px;height:30px;display:grid;place-items:center;background:#15131b;color:var(--siren);font-size:13px;flex:none}
.sname{font-size:14px}
.ssub{font-size:10px;color:var(--ash)}
.stags{display:flex;flex-wrap:wrap;gap:6px;padding:4px 14px 8px}

/* ============ GAMES HEADER + LEADERBOARDS ============ */
.gameshead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.gametabs{display:flex;gap:8px;margin-bottom:14px;justify-content:center}
.gametab{font-family:'Space Mono';font-size:11px;letter-spacing:.08em;color:var(--ash);background:#0a0810;border:1px solid var(--line);padding:8px 16px;cursor:pointer}
.gametab.on{background:var(--siren);color:#000;border-color:var(--siren)}
.lbcaption{font-size:11px;color:var(--ash);text-align:center;margin-bottom:14px;letter-spacing:.04em}
.lbtable{display:flex;flex-direction:column;gap:4px}
.lbrow{display:flex;align-items:center;gap:12px;padding:10px 12px;background:var(--panel);border:1px solid var(--line);cursor:pointer}
.lbrow:hover{border-color:var(--ash)}
.lbrow.top{background:linear-gradient(90deg,color-mix(in oklch,var(--gold),#000 86%),var(--panel))}
.lbrow.me{border-color:var(--siren);background:linear-gradient(90deg,color-mix(in oklch,var(--siren),#000 84%),var(--panel))}
.lbrank{font-size:20px;width:32px;text-align:center;color:var(--gold)}
.lbrow:not(.top) .lbrank{color:var(--ash);font-size:15px}
.lbname{flex:1;font-size:16px}
.lbyou{font-family:'Space Mono';font-size:10px;color:var(--siren)}
.lbscore{font-size:15px;color:var(--bone);font-weight:700}

/* ============ ADMIN CONSOLE ============ */
.adminconsole{padding-bottom:30px}
.acwarn{font-size:10px;letter-spacing:.12em;color:var(--blood);border:1px solid color-mix(in oklch,var(--blood),transparent 60%);background:color-mix(in oklch,var(--blood),#000 86%);padding:9px 13px;margin-bottom:16px}
.subcount{display:inline-block;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:9px;padding:1px 6px;margin-left:7px;border-radius:8px}
.acctrow{display:flex;align-items:center;gap:12px;padding:12px;background:var(--panel);border:1px solid var(--line);margin-bottom:8px;flex-wrap:wrap;position:relative}
.acctrow.pending{border-left:3px solid var(--amber)}
.acctrow.banned{opacity:.5;border-left:3px solid var(--blood)}
.acctmeta{flex:1;min-width:160px}
.acctname{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acctsub{font-size:10px;color:var(--ash);margin-top:3px}
.acctnote{font-size:11px;color:var(--fog);margin-top:5px;font-style:italic}
.rankbadge{font-family:'Space Mono';font-size:8px;letter-spacing:.1em;padding:2px 6px;border:1px solid currentColor}
.flagbadge{font-family:'Space Mono';font-size:9px;color:var(--blood)}
.acctacts{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.abtn{font-family:'Space Mono';font-size:10px;letter-spacing:.08em;padding:8px 12px;border:1px solid var(--line);background:#0a0810;color:var(--fog);cursor:pointer}
.abtn:hover{color:var(--bone)}
.abtn.sm{padding:6px 10px;font-size:9px}
.abtn.approve{background:var(--siren);color:#000;border-color:var(--siren)}
.abtn.approve:hover{background:var(--bone)}
.abtn.reject{border-color:var(--blood);color:var(--blood)}
.abtn.reject:hover{background:var(--blood);color:#fff}
.abtn.ghost:hover{border-color:var(--cyan);color:var(--cyan)}
.rankselect{font-family:'Space Mono';font-size:10px;background:#0a0810;border:1px solid var(--line);color:var(--bone);padding:7px 8px;cursor:pointer;outline:none}
.rankselect:hover{border-color:var(--siren)}
.accthistory{flex-basis:100%;border-top:1px dashed var(--line);margin-top:10px;padding-top:10px}
.histtitle{font-size:9px;letter-spacing:.2em;color:var(--ash);margin-bottom:6px}
.histline{font-size:11px;color:var(--fog);padding:2px 0}
.kitform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kitform .sfin{flex:1;min-width:160px}
.accentpick{display:flex;gap:6px}
.accdot{width:24px;height:24px;border:2px solid transparent;cursor:pointer}
.accdot.on{border-color:var(--bone)}
.manrow{display:flex;align-items:center;gap:11px;padding:9px 11px;background:var(--panel);border:1px solid var(--line);margin-bottom:6px}
.mansico{width:26px;text-align:center;font-size:14px;color:var(--siren)}
.manmeta{flex:1;min-width:0;font-size:13px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.manmeta .mono{color:var(--ash);font-size:10px}
.actlog{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid #15121b}
.actico{width:26px;text-align:center;font-size:14px}
.actsys{color:var(--amber);font-size:11px}
.actwho{font-size:13px}
.acttext{color:var(--fog);font-size:11px}

/* ============ LIVE: topbar button + rail spot ============ */
.golivebtn{display:flex;align-items:center;gap:8px;font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--blood);border:none;padding:9px 14px;cursor:pointer;clip-path:polygon(0 0,100% 0,100% 70%,92% 100%,0 100%)}
.golivebtn:hover{filter:brightness(1.15)}
.golivebtn .gldot{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1s infinite}
.golivebtn.onair{background:#000;color:var(--blood);box-shadow:inset 0 0 0 1px var(--blood)}
.golivebtn.onair .gldot{background:var(--blood)}

.livespot{border:1px solid var(--line);background:linear-gradient(160deg,color-mix(in oklch,var(--blood),#000 80%),var(--panel));cursor:pointer;overflow:hidden;transition:.15s}
.livespot:hover{border-color:var(--blood);box-shadow:0 0 22px -8px var(--blood)}
.livespot .lstag{display:flex;align-items:center;gap:7px;background:var(--blood);color:#fff;font-family:'Space Mono';font-size:10px;font-weight:700;letter-spacing:.18em;padding:5px 11px}
.livespot .lspulse{width:8px;height:8px;border-radius:50%;background:#fff;animation:pulse 1s infinite}
.livespot.me{background:linear-gradient(160deg,color-mix(in oklch,var(--siren),#000 80%),var(--panel))}
.livespot.me .lstag{background:var(--siren);color:#000}
.lsbody{display:flex;align-items:center;gap:11px;padding:13px 12px 10px}
.lsmeta{flex:1;min-width:0}
.lsname{font-size:17px;line-height:1}
.lsname .verif{color:var(--cyan)}
.lswhat{font-size:10px;color:var(--ash);margin-top:4px}
.lslisteners{font-family:'Space Mono';font-size:11px;color:var(--blood);white-space:nowrap}
.lsjoin{width:100%;border:none;border-top:1px solid var(--line);background:#0a080e;color:var(--bone);font-family:'Space Mono';font-size:11px;font-weight:700;letter-spacing:.1em;padding:11px;cursor:pointer}
.livespot:hover .lsjoin{background:var(--blood);color:#fff}
.livespot.me .lsjoin{color:var(--siren)}
.livespot.me:hover .lsjoin{background:var(--siren);color:#000}
.livespot.empty{background:var(--panel);cursor:default}
.livespot.empty:hover{border-color:var(--line);box-shadow:none}
.lsoff{padding:16px 12px;color:var(--ash);font-size:11px;text-align:center}
.lsjoin.alt{background:var(--blood);color:#fff;border-top:none}
.lsjoin.alt:hover{filter:brightness(1.15)}

/* ============ POINTS / COINS ECONOMY ============ */
.coinpill{display:flex;align-items:center;gap:6px;font-family:'Space Mono';font-size:12px;font-weight:700;color:var(--gold);background:#0a0810;border:1px solid color-mix(in oklch,var(--gold),transparent 55%);padding:8px 12px;cursor:pointer}
.coinpill:hover{border-color:var(--gold);box-shadow:0 0 14px -6px var(--gold)}
.coinico{color:var(--gold)}
.walletcards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:680px){.walletcards{grid-template-columns:1fr}}
.walletcard.coins{border-top-color:var(--gold);background:linear-gradient(135deg,#15110a,#0a0810)}
.coinbal{color:var(--gold)}
.earnrow{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid #15121b}
.earnico{width:26px;text-align:center;font-size:15px}
.earnwhat{flex:1;font-size:13px;color:var(--fog)}
.earnamt{font-size:12px;color:var(--gold)}
.ptsfield{display:flex;align-items:center;gap:6px;background:#08070b;border:1px solid color-mix(in oklch,var(--gold),transparent 55%);padding:0 10px}
.ptsfield .sfin{border:none;background:none;padding:11px 0}
.officialtag{font-family:'Space Mono';font-size:8px;letter-spacing:.1em;color:var(--gold)}
.price.coin,.kmprice.coin{color:var(--gold)}
.dl.coin{background:var(--gold);color:#000}
.dl.coin:hover{background:var(--bone)}

/* ============ DNA / REMIX TREES ============ */
.dnabar{display:flex;align-items:center;gap:8px;margin:0 14px 12px;padding:9px 11px;background:color-mix(in oklch,var(--magenta),#000 86%);border:1px solid color-mix(in oklch,var(--magenta),transparent 55%)}
.dnatag{font-family:'Space Mono';font-size:10px;letter-spacing:.12em;color:var(--magenta);flex:1}
.dnaremix{font-family:'Space Mono';font-size:10px;letter-spacing:.06em;color:var(--fog);background:#0a0810;border:1px solid var(--line);padding:7px 11px;cursor:pointer}
.dnaremix:hover{border-color:var(--magenta);color:var(--magenta)}
.dnaremix.primary{background:var(--magenta);color:#000;border-color:var(--magenta)}
.dnaintro{font-size:11px;color:var(--ash);line-height:1.7;border:1px dashed var(--line);padding:12px 14px;margin-bottom:18px;background:#0a0810}
.dnatree{border:1px solid var(--line);background:var(--panel);margin-bottom:18px}
.dnahead{display:flex;align-items:center;gap:13px;padding:14px;border-bottom:1px solid var(--line)}
.dnaglyph{font-size:26px}
.dnanodes{padding:12px 14px}
.dnanode{display:flex;align-items:center;gap:10px;padding:9px;background:#0a0810;border:1px solid var(--line);margin-bottom:7px;position:relative}
.dnanode.dead{opacity:.45;filter:grayscale(.6)}
.dnabranch{color:var(--magenta);font-size:14px;margin-right:-2px}
.dnameta{flex:1;min-width:0}
.dnatitle{font-size:15px}
.deadtag{font-family:'Space Mono';font-size:9px;color:var(--blood);letter-spacing:.1em}
.dnanote{font-size:10px;color:var(--ash);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dnavotes{display:flex;align-items:center;gap:5px}
.votebtn{font-family:'Space Mono';font-size:10px;background:#15131b;border:1px solid var(--line);color:var(--ash);padding:6px 8px;cursor:pointer}
.votebtn.up:hover,.votebtn.up.on{color:var(--siren);border-color:var(--siren)}
.votebtn.down:hover,.votebtn.down.on{color:var(--blood);border-color:var(--blood)}
.votebtn:disabled{opacity:.4;cursor:not-allowed}
.dnascore{font-size:13px;min-width:34px;text-align:center;font-weight:700}
.mutatebtn{font-family:'Space Mono';font-size:9px;letter-spacing:.06em;color:var(--magenta);background:none;border:1px solid color-mix(in oklch,var(--magenta),transparent 55%);padding:6px 9px;cursor:pointer}
.mutatebtn:hover{background:var(--magenta);color:#000}
.remixstems{font-size:11px;color:var(--cyan);border:1px dashed color-mix(in oklch,var(--cyan),transparent 55%);padding:10px;margin-bottom:14px;text-align:center}
.dnasteps{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
.dnastep{flex:1;min-width:180px;display:flex;align-items:center;gap:9px;font-family:'Space Mono';font-size:11px;color:var(--fog);background:#0a0810;border:1px solid var(--line);padding:11px 13px;line-height:1.4}
.dnastep b{color:var(--bone)}
.dnanum{flex:none;width:22px;height:22px;border-radius:50%;background:var(--magenta);color:#000;font-family:'Anton';display:grid;place-items:center;font-size:13px}

/* ============ COMMENTS ============ */
.cthread{border-top:1px solid #1a1622;padding:12px 14px;background:#08070b}
.crow{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px}
.cbody{font-size:13px;line-height:1.4;color:var(--fog);padding-top:3px}
.cname{font-size:12px;color:var(--bone);margin-right:5px}
.ctext{color:var(--fog)}
.cbar{display:flex;gap:8px;margin-top:4px}
.cbar input{flex:1;background:#0c0a10;border:1px solid var(--line);color:var(--bone);font-family:'Archivo';font-size:13px;padding:9px 11px;outline:none}
.cbar input:focus{border-color:var(--siren)}

/* rank perks */
.pricepick.locked{opacity:.7;border-style:dashed}
.wasprice{text-decoration:line-through;color:var(--ash);font-size:13px;margin-right:6px}
.legendoff{font-family:'Space Mono';font-size:9px;color:var(--gold);margin-left:6px}

/* ============ ACCOUNT FRAMES ============ */
.avframe{position:relative;display:inline-grid;place-items:center;flex:none}
.avframe .av{position:relative;z-index:3}
.avframe::before{content:'';position:absolute;z-index:2;border-radius:50%}
.avframe::after{content:'';position:absolute;z-index:1;border-radius:50%}
.ringmask{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,3px)),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw,3px)),#000 0)}

/* CASSETTE — segmented amber reel, slow counter-rotating ticks */
.frame-tape::before{inset:-6px;--rw:3px;padding:3px;background:repeating-conic-gradient(var(--amber) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);animation:spin 14s linear infinite}
.frame-tape::after{inset:-2px;border:1px solid color-mix(in oklch,var(--amber),transparent 50%);border-radius:50%}

/* GOLD LEAF — beveled double gold band + 4 sparkle studs */
.frame-gold::before{inset:-6px;padding:3px;background:conic-gradient(from 220deg,#fff6cf,#caa12a,#8a6d1b,#ffe9a8,#b8860b,#fff6cf);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);box-shadow:0 0 12px -3px var(--gold)}
.frame-gold::after{inset:-9px;border-radius:50%;background:
   radial-gradient(circle at 50% 0,#fff8 1.6px,transparent 2px),
   radial-gradient(circle at 50% 100%,#fff8 1.6px,transparent 2px),
   radial-gradient(circle at 0 50%,#fff8 1.6px,transparent 2px),
   radial-gradient(circle at 100% 50%,#fff8 1.6px,transparent 2px);animation:spin 8s linear infinite}

/* SIREN NEON — twin rotating dashed arcs + breathing glow */
.frame-neon::before{inset:-6px;--rw:2.5px;padding:2.5px;background:conic-gradient(from 0deg,var(--siren) 0 40%,transparent 40% 50%,var(--siren) 50% 90%,transparent 90%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 0);animation:spin 2.4s linear infinite;filter:drop-shadow(0 0 6px var(--siren))}
.frame-neon::after{inset:-6px;border:2px solid color-mix(in oklch,var(--siren),transparent 35%);border-radius:50%;box-shadow:0 0 16px -2px var(--siren);animation:neonpulse 1.4s ease-in-out infinite}
@keyframes neonpulse{50%{box-shadow:0 0 5px -2px var(--siren);opacity:.6}}

/* LIQUID CHROME — rotating chrome + bright sheen sweep */
.frame-chrome::before{inset:-7px;padding:3.5px;background:conic-gradient(from 0deg,#fff,#aeb6c2,#3a4150,#fff,#7d8694,#23272e,#dfe5ee,#fff);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);animation:spin 3.5s linear infinite}
.frame-chrome::after{inset:-7px;padding:3.5px;background:conic-gradient(from 0deg,transparent 0 70%,#ffffffcc 82%,transparent 88%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);animation:spin 1.6s linear infinite}

/* PHARAONIC — gold halo + orbiting hieroglyph beads */
.frame-pharaoh::before{inset:-7px;padding:3px;background:conic-gradient(from 0deg,#f5d97a,#b8860b,#fff0b8,#8a6d1b,#ffe9a8,#b8860b,#f5d97a);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 0);box-shadow:0 0 16px -3px var(--gold)}
.frame-pharaoh::after{inset:-12px;border-radius:50%;background:
   radial-gradient(circle at 50% 0,var(--gold) 2px,transparent 2.6px),
   radial-gradient(circle at 93% 25%,var(--gold) 1.6px,transparent 2.2px),
   radial-gradient(circle at 93% 75%,var(--gold) 1.6px,transparent 2.2px),
   radial-gradient(circle at 50% 100%,var(--gold) 2px,transparent 2.6px),
   radial-gradient(circle at 7% 75%,var(--gold) 1.6px,transparent 2.2px),
   radial-gradient(circle at 7% 25%,var(--gold) 1.6px,transparent 2.2px);animation:spin 11s linear infinite}

/* ===== THE FOUNDER — L5VAV mythic crown: triple chromatic + orbiting spark ===== */
.frame-l5vav{filter:drop-shadow(0 0 12px rgba(255,80,210,.5))}
.frame-l5vav .av{box-shadow:0 0 0 2px #000,0 0 0 3px #fff3}
.frame-l5vav::before{inset:-8px;padding:3.5px;
  background:conic-gradient(from 0deg,#ff2fd0,#7b5cff,#2ad7ff,#46ffa0,#fff36b,#ff7a3d,#ff2fd0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 0);
  animation:spin 2.8s linear infinite}
.frame-l5vav::after{inset:-14px;padding:1.5px;
  background:conic-gradient(from 180deg,transparent,#fff,transparent 22%,#2ad7ff,transparent 48%,#ff2fd0,transparent 72%,#fff36b,transparent 92%,#fff);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 1.5px),#000 0);
  animation:spin 5s linear infinite reverse}
.frame-l5vav{position:relative}
.frame-l5vav > .av::after{content:'✦';position:absolute;top:-12%;left:50%;font-size:11px;color:#fff;text-shadow:0 0 8px #2ad7ff,0 0 12px #ff2fd0;transform-origin:0 600%;animation:orbit 4s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ MERCH STORE ============ */
.merchhero{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px solid var(--line);background:linear-gradient(120deg,#15110a,var(--panel));padding:18px;margin-bottom:20px;flex-wrap:wrap}
.coinpill.big{font-size:18px;padding:12px 18px}
.framegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px}
@media(max-width:760px){.framegrid{grid-template-columns:1fr 1fr}}
.framecard{border:1px solid var(--line);background:var(--panel);padding:18px 14px 14px;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;position:relative;overflow:hidden;transition:.15s}
.framecard:hover{border-color:var(--ash)}
.framecard.tier-rare{border-top:2px solid var(--cyan)}
.framecard.tier-epic{border-top:2px solid var(--magenta)}
.framecard.founder{border:1px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from 0deg,#ff2fd0,#2ad7ff,#46ffa0,#fff36b,#ff2fd0) border-box;animation:none}
.framecard.founder:hover{box-shadow:0 0 30px -8px var(--magenta)}
.mythicband{position:absolute;top:0;left:0;right:0;font-family:'Space Mono';font-size:8px;letter-spacing:.2em;color:#000;background:linear-gradient(90deg,#ff2fd0,#2ad7ff,#46ffa0,#fff36b);padding:3px;font-weight:700}
.framepreview{margin:8px 0 4px;display:grid;place-items:center;min-height:84px}
.framename{font-size:17px}
.framecard.founder .framename{background:linear-gradient(90deg,#ff2fd0,#2ad7ff,#46ffa0);-webkit-background-clip:text;background-clip:text;color:transparent}
.framedesc{font-size:9px;color:var(--ash);min-height:24px;line-height:1.4}
.frameprice{font-size:20px;color:var(--gold)}
.framebtn{width:100%;font-family:'Space Mono';font-size:10px;letter-spacing:.06em;padding:10px;border:1px solid var(--line);background:#0a0810;color:var(--fog);cursor:pointer;margin-top:2px}
.framebtn.buy:hover{background:var(--gold);color:#000;border-color:var(--gold)}
.framebtn.equip{background:var(--siren);color:#000;border-color:var(--siren)}
.framebtn.on{background:#0a0810;color:var(--siren);border-color:var(--siren)}
.framebtn.locked{border-color:var(--magenta);color:var(--magenta)}
.framebtn.locked:hover{background:var(--magenta);color:#000}
.founderfeature{position:relative;display:flex;align-items:center;gap:22px;border:1px solid transparent;background:linear-gradient(#0c0a12,#0c0a12) padding-box,conic-gradient(from 0deg,#ff2fd0,#7b5cff,#2ad7ff,#46ffa0,#fff36b,#ff7a3d,#ff2fd0) border-box;padding:26px;overflow:hidden}
.ffglow{position:absolute;inset:0;background:radial-gradient(60% 120% at 18% 50%,rgba(255,47,208,.16),transparent 60%);pointer-events:none}
.ffmeta{flex:1;min-width:0;position:relative;z-index:2}
.founderfeature .verif{color:var(--cyan)}

/* ============ NETWORK ============ */
.netstats{display:flex;gap:0;border:1px solid var(--line);margin-bottom:18px}
.netstat{flex:1;padding:16px;text-align:center;border-right:1px solid var(--line);font-family:'Space Mono';font-size:9px;letter-spacing:.16em;color:var(--ash);cursor:pointer}
.netstat:last-child{border-right:none}
.netstat:hover{background:#100d16;color:var(--bone)}
.netstat b{display:block;font-family:'Anton';font-size:26px;color:var(--bone);letter-spacing:0;margin-bottom:3px}
.subcount.alt{background:var(--line);color:var(--fog)}
.netlist{display:flex;flex-direction:column;gap:8px}
.netrow{display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--panel);border:1px solid var(--line)}
.netrow .mwclick{flex:1;min-width:0;gap:13px}
.netmeta{min-width:0}
.netname{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.netname .verif{color:var(--cyan)}
.followsyou{font-family:'Space Mono';font-size:8px;letter-spacing:.08em;color:var(--cyan);border:1px solid color-mix(in oklch,var(--cyan),transparent 55%);padding:1px 5px}
.netsub{font-size:10px;color:var(--ash);margin-top:4px;display:flex;align-items:center;gap:7px}
.netrow .followbtn{flex:none}