/* /games/<slug> утсанд: dashboard Shop 2-р алхамын загвар (panel.css 194-268-аас хуулсан, тэнд засвал энд бас) */
@media (min-width:901px){.gm-m{display:none}}
@media (max-width:900px){.ghero,#plans,.gm-tiles{display:none!important}.gm-m{padding:12px 0 24px}}
.nv-shop{display:grid;gap:16px}
.nv-shop-hero{position:relative;min-height:150px;border-radius:22px;overflow:hidden;padding:18px;display:flex;flex-direction:column;justify-content:space-between;
  background-color:#101215;background-image:linear-gradient(90deg,rgba(5,7,10,.92) 0%,rgba(5,7,10,.55) 55%,rgba(5,7,10,.15)),var(--hero,none);background-size:cover;background-position:center 30%;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.08)}
.nv-shop-back{align-self:flex-start;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(11,13,16,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#F5F4FF;font:700 12px/1 Manrope,sans-serif;cursor:pointer}
.nv-shop-hero-tx small{font:800 10px/1 Manrope,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#C5C8CD}
.nv-shop-hero-tx h2{margin:6px 0 4px;font:900 clamp(22px,3.4vw,34px)/1.05 Montserrat,sans-serif;letter-spacing:-.02em}
.nv-shop-hero-tx p{margin:0;color:#BBBEC3;font-size:13px}
.nv-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.nv-seg button{display:grid;gap:3px;padding:12px 10px;border-radius:15px;border:0;background:transparent;color:#A9ACB1;cursor:pointer;text-align:center;transition:background .2s,color .2s,box-shadow .2s}
.nv-seg button b{font:800 15px/1 Montserrat,sans-serif;color:inherit}
.nv-seg button span{font-size:11px;opacity:.8}
.nv-seg button.on{background:linear-gradient(135deg,rgba(255,45,125,.22),rgba(123,125,128,.22));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 8px 24px -10px rgba(255,45,125,.6)}
.nv-shop-lbl{font:800 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7F8287;margin-bottom:-6px}
.nv-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.nv-chips::-webkit-scrollbar{display:none}
.nv-chips button{flex:0 0 auto;display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#D6D5EA;font:700 13px/1 Manrope,sans-serif;cursor:pointer}
.nv-chips button i{font-style:normal;font-size:10px;font-weight:800;padding:3px 6px;border-radius:999px;background:rgba(190,242,100,.14);color:#BEF264}
.nv-chips button.on{background:#F5F4FF;color:#0B0D10;border-color:#F5F4FF}
.nv-chips button.on i{background:#0B0D10;color:#BEF264}
.nv-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.nv-plans.hr{grid-template-columns:repeat(4,1fr)}
.nv-plan{position:relative;display:grid;gap:8px;align-content:start;text-align:left;padding:18px;border-radius:20px;cursor:pointer;color:#F5F4FF;font-family:Manrope,sans-serif;
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.nv-plan:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.2)}
.nv-plan.best{border-color:rgba(245,158,11,.35)}
.nv-plan.on{background:linear-gradient(160deg,rgba(255,45,125,.14),rgba(123,125,128,.12) 60%,rgba(34,211,238,.08));border-color:transparent;box-shadow:0 0 0 2px #FF2D7D,0 18px 40px -18px rgba(255,45,125,.7)}
.nv-plan.on::after{content:"";background:#FF2D7D url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/13px no-repeat;position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:#fff;font:900 12px/1 Manrope,sans-serif}
.nv-badge{position:absolute;top:-10px;left:16px;font:800 10px/1 Manrope,sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:5px 9px;border-radius:999px;background:linear-gradient(135deg,#F59E0B,#F97316);color:#140B00}
.nv-plan-n{display:flex;align-items:center;gap:8px;font:800 15px/1.2 Montserrat,sans-serif;padding-right:26px}
.nv-plan-n img{width:26px;height:26px}
.nv-ram{font:900 34px/1 Montserrat,sans-serif;letter-spacing:-.03em;background:linear-gradient(90deg,#FF2D7D,#A0A3A8);-webkit-background-clip:text;background-clip:text;color:transparent}
.nv-ram small{font-size:15px;margin-left:2px}
.nv-feat{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:12.5px;color:#BBBEC3}
.nv-feat li::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#22D3EE;margin-right:8px;vertical-align:middle}
.nv-price{font:900 22px/1 Montserrat,sans-serif;margin-top:4px}
.nv-price small{font:700 12px Manrope,sans-serif;color:#92959A;margin-left:3px}
.nv-sub{font-size:12px;color:#92959A}
.nv-sub s{opacity:.6;margin-left:4px}
.nv-off{font-style:normal;font-weight:800;color:#BEF264;margin-left:4px}
.nv-hr{text-align:center;justify-items:center;padding:22px 12px 18px}
.nv-hr-n{display:flex;align-items:baseline;gap:4px}
.nv-hr-n b{font:900 40px/1 Montserrat,sans-serif;letter-spacing:-.04em}
.nv-hr-n span{font-weight:700;color:#A9ACB1}
.nv-hr .nv-badge{left:50%;transform:translateX(-50%);white-space:nowrap}
.nv-spec{grid-column:1/-1;padding:16px 18px;border-radius:20px;background:rgba(34,211,238,.05);border:1px solid rgba(34,211,238,.16);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.nv-spec-t{font:800 13px/1 Montserrat,sans-serif}
.nv-spec-g{display:flex;gap:22px}
.nv-spec-g div{display:grid;gap:2px;text-align:center}
.nv-spec-g b{font:900 18px/1 Montserrat,sans-serif}
.nv-spec-g span{font-size:11px;color:#92959A}
.nv-shop-perks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:#A9ACB1}
.nv-shop-perks li::before{content:"";display:inline-block;width:14px;height:14px;vertical-align:-2px;margin-right:7px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23BEF264%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 /%3E%3C/svg%3E") center/contain no-repeat}
.nv-shop-bar{position:sticky;bottom:12px;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 20px;border-radius:22px;
  background:rgba(12,14,17,.78);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.nv-shop-bar-tx{display:grid;gap:3px;min-width:0}
.nv-shop-bar-tx small{font-size:12px;color:#A9ACB1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nv-shop-bar-tx b{font:900 22px/1 Montserrat,sans-serif}
.nv-shop-go{flex:0 0 auto;padding:14px 22px;border-radius:16px;border:0;cursor:pointer;color:#fff;font:800 14px/1 Manrope,sans-serif;background:linear-gradient(135deg,#FF2D7D,#FFB84D);box-shadow:0 10px 28px -10px rgba(255,45,125,.8)}
.nv-shop-go:active{transform:scale(.97)}
@media (max-width:900px){
  .nv-shop-bar{bottom:calc(88px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  .nv-plans.hr{grid-template-columns:1fr 1fr}
  .nv-plans{grid-template-columns:1fr 1fr;gap:10px}
  .nv-plan{padding:14px;border-radius:18px}
  .nv-ram{font-size:28px}
  .nv-price{font-size:19px}
  .nv-shop-hero{min-height:128px;border-radius:18px}
  .nv-spec-g{gap:16px}
  .nv-shop-go{padding:13px 16px}
  .nv-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .nv-chips button{justify-content:center;flex-wrap:wrap;gap:3px;padding:8px 4px;font-size:12px}
}
@media (max-width:380px){ .nv-plans:not(.hr){grid-template-columns:1fr} }
/* ===== /games/cs2 (desktop): хугацааны багц + Skinchanger — 2026 загвар ===== */
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false}
.cs-skb{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:20px;margin:0 0 22px;padding:26px 30px;border-radius:24px;overflow:hidden;color:inherit;text-decoration:none;isolation:isolate;
  background:radial-gradient(700px 300px at 85% 50%,rgba(255,45,125,.22),transparent 60%),radial-gradient(500px 260px at 10% 0,rgba(123,125,128,.2),transparent 60%),linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.1);transition:transform .3s,border-color .3s}
.cs-skb::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,#000 60%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 60%)}
.cs-skb:hover{transform:translateY(-3px);border-color:rgba(255,45,125,.5)}
.cs-eye{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:rgba(190,242,100,.12);border:1px solid rgba(190,242,100,.3);color:#D9F99D;font:800 11px Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.cs-eye .i,.cs-skb-go .i,.cs-feat .i,.cs-btn .i{width:16px;height:16px}
.cs-skb h3{margin:12px 0 8px;font:900 clamp(28px,3vw,40px)/1 Montserrat,sans-serif;letter-spacing:-.03em}
.cs-skb h3 em{font-style:normal;background:linear-gradient(100deg,#FF2D7D,#FF8A3D,#FFB84D);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:csShine 5s linear infinite}
@keyframes csShine{to{background-position:-200% 0}}
.cs-skb p{margin:0 0 16px;color:#C9C7DD;max-width:520px}.cs-skb code{background:rgba(255,255,255,.1);padding:1px 6px;border-radius:6px}
.cs-skb-go{display:inline-flex;align-items:center;gap:8px;font-weight:900;color:#FF6FA5}.cs-skb:hover .cs-skb-go .i{transform:translateX(4px)}.cs-skb-go .i{transition:transform .25s}
.cs-skb-im{position:relative;height:200px;display:flex;align-items:center;justify-content:center;padding-right:10px}
.cs-skb-im figure{position:relative;flex:0 0 26%;margin:0 0 0 -5%;transform:rotate(calc(-10deg + var(--i)*5deg)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*4px));animation:csFl 6s ease-in-out infinite;animation-delay:calc(var(--i)*-1.1s)}.cs-skb-im figure:first-child{margin-left:0}
.cs-skb-im figure::before{content:"";position:absolute;inset:5%;border-radius:50%;background:radial-gradient(circle,var(--rb,#FFB84D),transparent 65%);opacity:.4;filter:blur(22px)}
.cs-skb-im img{position:relative;width:100%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.6))}
.cs-skb-im figcaption{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;font:800 11px Manrope,sans-serif;color:#E8E6F5;opacity:0;transition:opacity .3s}.cs-skb:hover figcaption{opacity:.85}
@keyframes csFl{50%{transform:rotate(calc(-10deg + var(--i)*5deg + 2deg)) translateY(calc((var(--i) - 2)*(var(--i) - 2)*4px - 10px))}}
.cs-plans{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.cs-card{--mx:50%;--my:0%;position:relative;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:22px;color:inherit;text-decoration:none;isolation:isolate;overflow:hidden;
  background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,45,125,.12),transparent 45%),linear-gradient(165deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.cs-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--ang),transparent 0 70%,#FF2D7D 80%,#FFB84D 90%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s}
.cs-card:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.18);box-shadow:0 26px 60px -28px rgba(255,45,125,.65)}.cs-card:hover::before,.cs-card.feat::before{opacity:1;animation:csSpin 4s linear infinite}
@keyframes csSpin{to{--ang:360deg}}
.cs-card.feat{background:radial-gradient(420px circle at var(--mx) var(--my),rgba(255,45,125,.18),transparent 45%),linear-gradient(165deg,rgba(255,45,125,.12),rgba(123,125,128,.08));box-shadow:0 24px 60px -30px rgba(255,45,125,.7)}
.cs-tag{position:absolute;top:16px;right:16px;padding:5px 10px;border-radius:999px;font:900 10.5px Manrope,sans-serif;letter-spacing:.06em;text-transform:uppercase}
.cs-tag.hot{background:rgba(255,138,61,.16);color:#FFB27A;border:1px solid rgba(255,138,61,.35)}.cs-tag.best{background:linear-gradient(135deg,#FF2D7D,#FFB84D);color:#fff}.cs-tag.save{background:rgba(190,242,100,.15);color:#D9F99D;border:1px solid rgba(190,242,100,.35)}
.cs-dur{display:flex;align-items:baseline;gap:8px}.cs-dur b{font:900 64px/0.9 Montserrat,sans-serif;letter-spacing:-.05em;background:linear-gradient(180deg,#fff,#BABDC2);-webkit-background-clip:text;background-clip:text;color:transparent}.cs-dur span{font:800 18px Montserrat,sans-serif;color:#C9C7DD}
.cs-price{display:flex;align-items:center;gap:10px;margin-top:18px}.cs-price b{font:900 30px Montserrat,sans-serif;letter-spacing:-.02em}
.cs-price i{font-style:normal;font:900 12px Manrope,sans-serif;padding:4px 8px;border-radius:8px;background:#BEF264;color:#142000}
.cs-per{margin-top:2px;color:#9EA1A6;font-weight:700;font-size:13px}
.cs-feat{list-style:none;margin:18px 0 20px;padding:16px 0 0;border-top:1px solid rgba(255,255,255,.08);display:grid;gap:10px;font-size:13.5px;color:#D6D4E8}
.cs-feat li{display:flex;align-items:center;gap:10px}.cs-feat .i{color:#919499}
.cs-feat li.sk{color:#fff;font-weight:800}.cs-feat li.sk .i{color:#FF2D7D;filter:drop-shadow(0 0 6px rgba(255,45,125,.8))}
.cs-btn{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:14px;font-weight:900;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:.25s}
.cs-card:hover .cs-btn,.cs-card.feat .cs-btn{background:linear-gradient(135deg,#FF2D7D,#FFB84D);border-color:transparent;color:#fff;box-shadow:0 12px 30px -12px rgba(255,45,125,.9)}.cs-card:hover .cs-btn .i{transform:translateX(3px)}.cs-btn .i{transition:transform .25s}
.cs-card .i{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.r-covert,.r-ancient{--rb:#EB4B4B}.r-classified,.r-legendary{--rb:#FFB84D}.r-restricted,.r-mythical{--rb:#FFB84D}.r-contraband{--rb:#E4AE39}
@media (max-width:1100px){.cs-skb{grid-template-columns:1fr}.cs-skb-im{height:170px}}
@media (prefers-reduced-motion:reduce){.cs-skb-im figure,.cs-card::before,.cs-skb h3 em{animation:none!important}}
/* Үнэгүй нийтийн DM сервер banner */
.cs-free{display:flex;align-items:center;gap:14px;margin:0 0 16px;padding:14px 16px;border-radius:18px;background:linear-gradient(100deg,rgba(34,197,94,.14),rgba(190,242,100,.06) 50%,rgba(255,255,255,.02));border:1px solid rgba(34,197,94,.35)}
.cs-free-dot{flex:none;width:12px;height:12px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.7);animation:csPing 1.8s infinite}.cs-free.off .cs-free-dot{background:#F87171;animation:none}
@keyframes csPing{70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.cs-free-tx{display:grid;flex:1;min-width:0}.cs-free-tx b{font:900 16px Montserrat,sans-serif}.cs-free-tx small{color:#C9C7DD;font-size:12.5px}.cs-free-tx em{font-style:normal;color:#86EFAC;font-weight:800}
.cs-free code{padding:8px 12px;border-radius:10px;background:rgba(0,0,0,.3);font:700 13px ui-monospace,monospace;color:#E8E6F5;white-space:nowrap}
.cs-free-go{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:12px;font-weight:900;color:#0A1400;text-decoration:none;background:linear-gradient(135deg,#BEF264,#22C55E);box-shadow:0 10px 26px -12px rgba(132,204,22,.9);white-space:nowrap;transition:transform .2s}
.cs-free-go:hover{transform:translateY(-2px)}.cs-free-go .i{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2}
@media (max-width:900px){.cs-free{flex-wrap:wrap}.cs-free code{display:none}.cs-free-go{flex:1 1 100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.cs-free-dot{animation:none}}
