@font-face{font-family:Vazirmatn;src:url(/static/vazirmatn.woff2) format('woff2');font-weight:100 900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#07070a;--fg:#f4f4f6;--mut:#8b8b98;--line:#1d1d26;
  --card:#0e0e14;--card2:#13131b;
  --acc:#ff2d55;--acc2:#7b5cff;--ok:#2ee6a8;
  --r:16px;--shadow:0 18px 50px rgba(0,0,0,.55);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);font-family:Vazirmatn,Tahoma,system-ui,sans-serif;
  direction:rtl;line-height:1.85;font-size:15px;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 85% -10%,rgba(255,45,85,.18),transparent 60%),
    radial-gradient(50vw 50vw at 10% 0%,rgba(123,92,255,.16),transparent 60%),
    radial-gradient(70vw 40vw at 50% 100%,rgba(123,92,255,.07),transparent 70%);
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:40;backdrop-filter:blur(14px);
  background:rgba(7,7,10,.78);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:20px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:.2px}
.logo img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--acc)}
nav{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
nav a{color:var(--mut);white-space:nowrap;font-size:14px;padding:7px 13px;border-radius:999px;transition:.18s}
nav a:hover{color:#fff;background:rgba(255,255,255,.07)}
.hdr-act{display:flex;gap:8px;align-items:center}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:0;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14px;cursor:pointer;
  font-family:inherit;color:#fff;background:linear-gradient(135deg,var(--acc),var(--acc2));
  box-shadow:0 8px 24px rgba(255,45,85,.25);transition:transform .16s,box-shadow .16s,filter .16s}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,45,85,.35)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:rgba(255,255,255,.06);box-shadow:none;border:1px solid var(--line)}
.btn.ghost:hover{background:rgba(255,255,255,.12)}
.btn.sm{padding:7px 14px;font-size:13px}
.btn.dang{background:linear-gradient(135deg,#ff2d55,#b3162f)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}

/* ---------- live strip ---------- */
.live-bar{display:block;margin:0;background:linear-gradient(90deg,rgba(255,45,85,.22),rgba(123,92,255,.18));
  border-bottom:1px solid rgba(255,45,85,.35)}
.live-bar .wrap{display:flex;align-items:center;gap:12px;padding:14px 18px;flex-wrap:wrap}
.live-bar b{font-size:15px}
.live-bar .t{color:var(--mut);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46vw}
.live-bar .go{margin-inline-start:auto;font-size:13px;font-weight:700;padding:7px 16px;border-radius:999px;
  background:var(--acc);box-shadow:0 8px 22px rgba(255,45,85,.35)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 0 rgba(255,45,85,.7);
  animation:pulse 1.6s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(255,45,85,0)}100%{box-shadow:0 0 0 0 rgba(255,45,85,0)}}

/* ---------- hero ---------- */
.hero{position:relative;margin:22px 0 10px;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}
.hero .cover{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.35;filter:saturate(1.1)}
.hero .veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(7,7,10,.35),rgba(7,7,10,.92)),
             radial-gradient(60% 90% at 80% 0%,rgba(255,45,85,.3),transparent 60%)}
.hero .in{position:relative;padding:20px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero .ava{width:86px;height:86px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--acc),0 14px 40px rgba(255,45,85,.35)}
.hero h1{font-size:25px;line-height:1.4;margin:0}
.hero .bio{color:var(--mut);font-size:13.5px;max-width:560px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut);
  border:1px solid var(--line);background:rgba(255,255,255,.04);padding:5px 12px;border-radius:999px}
.chip b{color:#fff;font-size:13px}
.chip.live{border-color:rgba(255,45,85,.5);color:#fff;background:rgba(255,45,85,.16)}
.hero .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
@media(max-width:620px){
  .hero .in{padding:22px 16px;gap:16px}
  .hero h1{font-size:22px}
  .hero .ava{width:74px;height:74px}
}

/* ---------- sections ---------- */
h2{font-size:20px;margin:38px 0 16px;display:flex;align-items:center;gap:12px}
h2::before{content:"";width:4px;height:20px;border-radius:4px;
  background:linear-gradient(180deg,var(--acc),var(--acc2))}
h2 .more{margin-inline-start:auto;font-size:12.5px;color:var(--mut);font-weight:500;
  border:1px solid var(--line);padding:5px 13px;border-radius:999px;transition:.18s}
h2 .more:hover{color:#fff;border-color:#3a3a49;background:rgba(255,255,255,.05)}
h1{font-size:26px;margin:26px 0 8px}
p.sub{color:var(--mut);font-size:14px}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}
.card:hover{transform:translateY(-4px);border-color:#31313f;box-shadow:var(--shadow)}
.card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--card2)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.card:hover .thumb img{transform:scale(1.06)}
.card .thumb::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(7,7,10,.75))}
.play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;z-index:2;
  background:rgba(255,45,85,.92);display:grid;place-items:center;opacity:0;transform:scale(.8);
  transition:.22s;box-shadow:0 10px 30px rgba(255,45,85,.45)}
.play::before{content:"";border-style:solid;border-width:9px 14px 9px 0;
  border-color:transparent #fff transparent transparent;margin-inline-end:3px}
.card:hover .play{opacity:1;transform:scale(1)}
.badge{position:absolute;z-index:2;bottom:9px;font-size:11.5px;padding:3px 9px;border-radius:999px;
  background:rgba(7,7,10,.78);border:1px solid var(--line);backdrop-filter:blur(4px)}
.badge.dur{inset-inline-start:9px}
.badge.plat{inset-inline-end:9px;border-color:rgba(255,45,85,.45);color:#fff}
.card .b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.card .t{font-size:14px;font-weight:600;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .m{color:var(--mut);font-size:12px;margin-top:auto;display:flex;gap:8px;align-items:center}
.tag{display:inline-block;border:1px solid var(--line);color:var(--mut);font-size:11.5px;
  padding:2px 10px;border-radius:999px}
.tag.on{border-color:rgba(255,45,85,.5);color:#fff;background:rgba(255,45,85,.18)}
.tag.done{border-color:rgba(255,255,255,.12)}
.price{font-weight:800;font-size:16px;color:#fff}
.price small{color:var(--mut);font-weight:500;font-size:12px}

/* ---------- boxes, forms, tables ---------- */
.box{border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card2));
  border-radius:var(--r);padding:20px;margin:18px 0}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
label{display:block;font-size:13px;color:var(--mut);margin:12px 0 5px}
input,select,textarea{width:100%;background:#0a0a10;border:1px solid var(--line);color:#fff;
  padding:11px 13px;font-family:inherit;font-size:14px;border-radius:12px;transition:.16s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(255,45,85,.15)}
textarea{min-height:100px;resize:vertical}
input[type=file]{padding:9px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{border-bottom:1px solid var(--line);padding:11px 9px;text-align:right;white-space:nowrap}
th{color:var(--mut);font-weight:600}
tr:hover td{background:rgba(255,255,255,.02)}
.scroll{overflow-x:auto;border-radius:var(--r)}
.err{border:1px solid rgba(255,45,85,.5);background:rgba(255,45,85,.1);color:#ffbac4;
  padding:12px 14px;border-radius:12px;margin:14px 0;font-size:14px}
.ok{border:1px solid rgba(46,230,168,.4);background:rgba(46,230,168,.08);color:#9cf2d6;
  padding:12px 14px;border-radius:12px;margin:14px 0;font-size:14px}
.empty{color:var(--mut);padding:34px 16px;text-align:center;border:1px dashed var(--line);
  border-radius:var(--r);background:rgba(255,255,255,.015)}
video{width:100%;background:#000;border:1px solid var(--line);border-radius:var(--r)}
.split{display:grid;gap:22px;grid-template-columns:2fr 1fr;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr}}
.winner{display:flex;gap:10px;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--line);padding:11px 0}
.winner:last-child{border-bottom:0}
.winner .n{font-weight:700}
.stat{border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card2));
  border-radius:var(--r);padding:16px}
.stat b{display:block;font-size:24px;line-height:1.6}
.stat span{color:var(--mut);font-size:12px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:60px;padding:28px 0 40px;color:var(--mut);font-size:13px}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
footer .socials{margin-inline-start:auto;display:flex;gap:8px}
footer .socials a{border:1px solid var(--line);padding:6px 14px;border-radius:999px;font-size:12.5px;transition:.18s}
footer .socials a:hover{color:#fff;border-color:var(--acc);background:rgba(255,45,85,.12)}

.admin .btn{border-radius:12px}
.fade{animation:fade .45s ease both}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- shorts ---------- */
.grid.shorts{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
.grid.shorts .thumb{aspect-ratio:9/16}
.grid.shorts .thumb img{object-position:center}
.grid.shorts .t{-webkit-line-clamp:3;font-size:13.5px}
.badge.short{inset-inline-end:9px;border-color:rgba(255,45,85,.55);background:rgba(255,45,85,.8)}
@media(max-width:520px){.grid.shorts{grid-template-columns:repeat(2,1fr);gap:12px}}

.orsep{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:12.5px;margin:16px 0 12px}
.orsep::before,.orsep::after{content:"";flex:1;height:1px;background:var(--line)}
.grid.done .card{opacity:.72}
.grid.done .card:hover{opacity:1}

.box.sponsor{border-color:rgba(123,92,255,.45);
  background:linear-gradient(180deg,rgba(123,92,255,.12),var(--card2))}
.box.sponsor .btn{margin-top:10px}

/* ---------- social icons ---------- */
.socials-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.soc{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#d7d7e0;
  transition:transform .16s,background .16s,color .16s,border-color .16s}
.soc svg{width:20px;height:20px}
.soc:hover{transform:translateY(-3px);color:#fff}
.soc.ap:hover{background:#c0392b;border-color:#c0392b}
.soc.yt:hover{background:#ff0033;border-color:#ff0033}
.soc.kk:hover{background:#53fc18;border-color:#53fc18;color:#062b00}
.soc.tg:hover{background:#229ed9;border-color:#229ed9}
.soc.ig:hover{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888);border-color:#dc2743}
.hero .socials-row{position:absolute;inset-inline-end:24px;bottom:16px}  /* RTL: inline-end is the left edge */
.hero .in{padding-bottom:20px}
@media(max-width:620px){
  .hero .socials-row{position:static;margin-top:14px}
  .hero .in{padding-bottom:22px}
}
footer .socials-row{margin-inline-start:auto}

.countdown{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;
  border:1px solid rgba(255,45,85,.45);border-radius:var(--r);padding:12px 16px;
  background:linear-gradient(90deg,rgba(255,45,85,.14),rgba(123,92,255,.10))}
.cd-label{color:var(--mut);font-size:13px}
.cd-time{font-weight:800;font-size:18px;margin-inline-start:auto}

/* ---------- jalali date+time picker ---------- */
.jdt{position:relative}
.jdt-bar{display:flex;gap:8px;align-items:center}
.jdt-text{cursor:pointer}
.jdt-pop{position:absolute;z-index:50;top:calc(100% + 6px);inset-inline-start:0;width:290px;
  background:#0b0b12;border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.jdt-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.jdt-head button{background:transparent;border:1px solid var(--line);color:#fff;border-radius:9px;
  width:30px;height:30px;cursor:pointer;font-size:16px;line-height:1}
.jdt-head button:hover{border-color:var(--acc)}
.jdt-head span{font-weight:700;font-size:14px}
.jdt-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jdt-w{color:var(--mut);font-size:11px;text-align:center;padding:4px 0}
.jdt-day{background:transparent;border:1px solid transparent;color:#e6e6ee;border-radius:9px;
  height:32px;cursor:pointer;font-family:inherit;font-size:13px}
.jdt-day:hover{background:rgba(255,255,255,.08)}
.jdt-day.today{border-color:var(--line)}
.jdt-day.on{background:linear-gradient(135deg,var(--acc),var(--acc2));color:#fff;font-weight:700}
.jdt-time{display:flex;align-items:center;gap:6px;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.jdt-time select{width:auto;padding:6px 8px;border-radius:9px}
.jdt-time .btn{margin-inline-start:auto}

/* ---------- per-platform live bar ---------- */
.lb-icon{display:inline-flex}
.lb-icon svg{width:22px;height:22px}
.live-bar.lb-kick{background:linear-gradient(90deg,rgba(83,252,24,.22),rgba(83,252,24,.08));
  border-bottom-color:rgba(83,252,24,.45)}
.live-bar.lb-kick .dot{background:#53fc18;box-shadow:0 0 0 0 rgba(83,252,24,.7);animation:pulse-kick 1.6s infinite}
.live-bar.lb-kick .lb-icon{color:#53fc18}
.live-bar.lb-kick .go{background:#53fc18;color:#06230a;box-shadow:0 8px 22px rgba(83,252,24,.35)}
@keyframes pulse-kick{70%{box-shadow:0 0 0 12px rgba(83,252,24,0)}100%{box-shadow:0 0 0 0 rgba(83,252,24,0)}}
.live-bar.lb-aparat{background:linear-gradient(90deg,rgba(255,45,85,.24),rgba(192,57,43,.12));
  border-bottom-color:rgba(255,45,85,.5)}
.live-bar.lb-aparat .lb-icon{color:#ff2d55}
.live-bar.lb-youtube{background:linear-gradient(90deg,rgba(255,0,51,.22),rgba(255,45,85,.10));
  border-bottom-color:rgba(255,0,51,.45)}
.live-bar.lb-youtube .lb-icon{color:#ff0033}

.chip.live.lb-kick{border-color:rgba(83,252,24,.55);background:rgba(83,252,24,.16)}
.chip.live.lb-kick .dot{background:#53fc18;animation:pulse-kick 1.6s infinite}
.chip.live.lb-youtube{border-color:rgba(255,0,51,.55);background:rgba(255,0,51,.16)}

/* ---------- auth pages ---------- */
.auth{min-height:calc(100vh - 260px);display:grid;place-items:center;padding:28px 0}
.auth-card{width:100%;max-width:400px;text-align:center;padding:30px 26px 26px;border-radius:20px;
  border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--card2));
  box-shadow:var(--shadow);position:relative}
.auth-card::before{content:"";position:absolute;inset:-1px;border-radius:21px;padding:1px;z-index:-1;
  background:linear-gradient(135deg,rgba(255,45,85,.6),rgba(123,92,255,.5),transparent 70%)}
.auth-ava{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto 12px;
  box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--acc)}
.auth-card h1{font-size:22px;margin:0}
.auth-card .sub{margin-bottom:6px}
.auth-card label{text-align:start}
.auth-card form{text-align:start}
.btn.block{width:100%;margin-top:16px}
.auth-note{color:var(--mut);font-size:12.5px;line-height:1.9;margin-top:14px;
  border:1px dashed var(--line);border-radius:12px;padding:10px 12px;text-align:start}
.auth-alt{color:var(--mut);font-size:13px;margin-top:16px}
.auth-alt a{color:#fff;text-decoration:underline}

/* ---------- clan ---------- */
.tag.ok-tag{border-color:rgba(46,230,168,.5);color:#9cf2d6;background:rgba(46,230,168,.12)}
.tag.bad-tag{border-color:rgba(255,45,85,.5);color:#ffbac4;background:rgba(255,45,85,.12)}
.clan-list{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin-top:16px}
.clan-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(255,255,255,.03)}
.clan-item .sub{font-size:12.5px}

/* ---------- video player ---------- */
.vp{position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  border:1px solid var(--line);box-shadow:var(--shadow);outline:none}
.vp video{display:block;width:100%;background:#000;border:0;border-radius:0}
.vp.idle{cursor:none}
.vp.idle .vp-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vp-center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.vp-big{pointer-events:auto;width:74px;height:74px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,45,85,.92);box-shadow:0 14px 40px rgba(255,45,85,.45);
  transition:transform .18s,opacity .18s;display:grid;place-items:center}
.vp-big::before{content:"";border-style:solid;border-width:13px 0 13px 20px;
  border-color:transparent transparent transparent #fff;margin-inline-start:4px}
.vp-big:hover{transform:scale(1.07)}
.vp.playing .vp-big{opacity:0;transform:scale(.8)}
.vp-bar{position:absolute;inset-inline:0;bottom:0;padding:26px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.82));
  transition:opacity .25s,transform .25s}
.vp-seek{position:relative;height:5px;border-radius:99px;background:rgba(255,255,255,.22);
  cursor:pointer;touch-action:none}
.vp-seek::before{content:"";position:absolute;inset:-9px 0;display:block}
.vp-buf{position:absolute;inset-block:0;inset-inline-start:0;background:rgba(255,255,255,.3);border-radius:99px}
.vp-played{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px;
  background:linear-gradient(90deg,var(--acc),var(--acc2))}
.vp-knob{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;
  transform:translate(50%,-50%);box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.vp:hover .vp-knob,.vp-seek:active .vp-knob{opacity:1}
.vp-row{display:flex;align-items:center;gap:8px;margin-top:10px;color:#fff}
.vp-btn{width:34px;height:34px;border-radius:10px;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.1);display:grid;place-items:center;font-family:inherit;font-size:11px;
  transition:background .15s}
.vp-btn:hover{background:rgba(255,255,255,.2)}
.vp-play::before{content:"";border-style:solid;border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff;margin-inline-start:2px}
.vp.playing .vp-play::before{border-width:0;width:10px;height:12px;
  border-inline:3px solid #fff;box-sizing:border-box;margin:0}
.vp-back,.vp-fwd{font-weight:700;position:relative}
.vp-back::after{content:"↺";position:absolute;inset:0;display:grid;place-items:center;opacity:.35;font-size:20px}
.vp-fwd::after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;opacity:.35;font-size:20px}
.vp-mute::before{content:"🔊";font-size:15px}
.vp.muted .vp-mute::before{content:"🔇"}
.vp-full::before{content:"⛶";font-size:16px}
.vp-vol{width:82px;height:4px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.25);
  appearance:none;-webkit-appearance:none;cursor:pointer}
.vp-vol::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff}
.vp-vol::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#fff}
.vp-time{font-size:12.5px;color:#d8d8e2;margin-inline-start:auto;white-space:nowrap}
.vp-time b{color:#fff;font-weight:700}
.vp-rate{width:auto;padding:5px 8px;font-size:12px;border-radius:9px;background:rgba(255,255,255,.1);
  border:0;color:#fff}
.vp-rate option{background:#12121a}
@media(max-width:560px){
  .vp-vol{display:none}
  .vp-big{width:58px;height:58px}
  .vp-bar{padding:22px 10px 10px}
}

/* ---------- clan cards ---------- */
.grid.clans{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.clan-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;
  background:linear-gradient(180deg,var(--card),var(--card2));display:flex;flex-direction:column;gap:12px;
  transition:transform .2s,border-color .2s,box-shadow .2s}
.clan-card:hover{transform:translateY(-3px);border-color:#31313f;box-shadow:var(--shadow)}
.clan-top{display:flex;align-items:center;gap:14px}
.clan-logo{width:64px;height:64px;object-fit:contain;border-radius:14px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);padding:4px}
.clan-logo.ph{display:block}
.clan-name{font-weight:800;font-size:17px;line-height:1.6}
.clan-stats{display:flex;gap:8px;flex-wrap:wrap}
.clan-descr{color:var(--mut);font-size:13px;line-height:1.9;white-space:pre-wrap;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.clan-card .btn{margin-top:auto}
.apply-box{border-color:rgba(255,45,85,.4)}

/* ---------- game picker + bigger clan logo ---------- */
/* narrow portrait cards, sized around the square game icon */
.grid.games{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-start}
.game-card{width:208px;display:flex;flex-direction:column;border:1px solid var(--line);
  border-radius:18px;overflow:hidden;background:linear-gradient(180deg,var(--card),var(--card2));
  transition:transform .2s,border-color .2s,box-shadow .2s}
.game-card:hover{transform:translateY(-4px);border-color:var(--acc);box-shadow:var(--shadow)}
.game-art{position:relative;aspect-ratio:1/1;background:
  radial-gradient(70% 90% at 30% 20%,rgba(255,45,85,.3),transparent 70%),
  radial-gradient(60% 80% at 80% 80%,rgba(123,92,255,.3),transparent 70%),#0b0b12;
  display:grid;place-items:center;overflow:hidden}
.game-art img{width:132px;height:132px;object-fit:cover;border-radius:26px;transition:transform .35s;
  box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
.game-card:hover .game-art img{transform:scale(1.05)}
.game-ph{font-size:17px;font-weight:800;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6)}
.game-body{padding:12px 14px 2px;text-align:center}
.game-name{font-size:15.5px;font-weight:800}
.game-body .sub{font-size:12px}
.game-go{margin:10px 14px 14px;padding:7px 0;text-align:center;border-radius:999px;font-size:12.5px;
  font-weight:700;background:rgba(255,255,255,.07);border:1px solid var(--line)}
.game-card:hover .game-go{background:linear-gradient(135deg,var(--acc),var(--acc2));border-color:transparent}
@media(max-width:520px){
  .grid.games{gap:12px}
  .game-card{width:calc(50% - 6px)}
  .game-art img{width:96px;height:96px;border-radius:20px}
}

.clan-card{align-items:center;text-align:center}
.clan-card .clan-logo{width:120px;height:120px;border-radius:24px;padding:10px;margin:0 auto}
.clan-card .clan-name{font-size:19px}
.clan-card .clan-stats{justify-content:center}
.clan-card .clan-descr{text-align:start;width:100%}