/* ===========================================================
   ZONA KARANTINA — CSO theme  (/cso/*)
   Подключается ПОСЛЕ /assets/site.css и перекрашивает общий
   каркас сайта в стиль Counter-Strike Online:
   сталь, тёмно-синий, срезанные углы, синий акцент.

   Цвет несёт смысл:
     --blue  — интерфейс и действия
     --ice   — опыт и уровень (XP / LVL)
     --gold  — только деньги ($)
     --danger— нарушения и запреты
   =========================================================== */

:root{
  --bg-0:#070c16;
  --bg-1:#0b1424;
  --bg-2:#0f1b2e;
  --bg-3:#1a2a44;
  --line:rgba(150,190,255,.09);
  --line-2:rgba(150,190,255,.18);

  /* site.css красит акцент через --red: подменяем на синий CSO */
  --red:#2e8bff;
  --red-deep:#1257c9;
  --red-glow:rgba(46,139,255,.34);

  --blue:#2e8bff;
  --blue-deep:#1257c9;
  --blue-glow:rgba(46,139,255,.34);
  --ice:#8fd3ff;
  --gold:#ffb627;
  --danger:#ff3b4e;

  --bone:#e8eef8;
  --ash:#8a99b4;
  --muted:#55627c;

  --steel:linear-gradient(180deg,#ffffff 0%,#d6e6ff 38%,#7fa6dd 52%,#c4dafc 70%,#f2f7ff 100%);
  --cut:12px;
  --hex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%238fb8ff' stroke-opacity='.08'/%3E%3C/svg%3E");
}

body{
  font-family:'Exo 2',system-ui,sans-serif;
  background:var(--bg-0);
  color:var(--bone);
}
body::before{display:none}          /* без плёночного шума ZM */
::selection{background:var(--blue);color:#fff}
:focus-visible{outline-color:var(--ice)}

/* ---------- срезанные углы ---------- */
.cut{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}

/* Панель со срезанными углами и рамкой по всему контуру (включая срезы) */
.plate{
  --c:16px;
  --pb:var(--line-2);
  --pf:linear-gradient(180deg,var(--bg-2),var(--bg-1));
  position:relative;isolation:isolate;
}
.plate::before,.plate::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.plate::before{
  inset:0;background:var(--pb);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
}
.plate::after{
  inset:1px;background:var(--pf);
  clip-path:polygon(calc(var(--c) - .6px) 0,100% 0,100% calc(100% - var(--c) + .6px),calc(100% - var(--c) + .6px) 100%,0 100%,0 calc(var(--c) - .6px));
}

/* Клавиша способности: [G], [E], [ПКМ] */
.keycap{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 8px;
  font:700 13px/1 'JetBrains Mono',monospace;color:#fff;
  background:linear-gradient(180deg,#2a3b58,#16233a);
  border:1px solid rgba(150,190,255,.35);
  border-bottom-width:3px;border-radius:5px;
  box-shadow:0 2px 0 rgba(0,0,0,.4);
}

/* ---------- ШАПКА ---------- */
.top-bar{background:linear-gradient(180deg,rgba(7,12,22,.95),rgba(7,12,22,.62))}
.top-bar.scrolled{background:rgba(7,12,22,.96)}
.top-bar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(46,139,255,.55),transparent);
  opacity:0;transition:opacity .3s;
}
.top-bar.scrolled::after{opacity:1}
.logo-mark{filter:drop-shadow(0 0 10px rgba(46,139,255,.5))}
.logo-text small{color:var(--ice)}
.nav a{font-family:'Exo 2',sans-serif;font-weight:700;font-size:13.5px}
.nav a.active{color:var(--ice)}
.nav a.active::after{background:var(--blue);box-shadow:0 0 10px var(--blue)}
.ip-pill{border-radius:0;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.ip-pill:hover{background:rgba(46,139,255,.08)}
.btn-mini{
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  background:linear-gradient(180deg,#3d97ff,#1257c9);
}
@media (max-width:1100px){
  .nav.open{background:rgba(7,12,22,.98)}
  .nav.open a.active{background:rgba(46,139,255,.1)}
}

/* ---------- КНОПКИ ---------- */
.btn{
  border-radius:0;
  font-family:'Exo 2',sans-serif;font-weight:800;font-style:italic;
  font-size:15px;letter-spacing:.06em;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.btn-red{
  background:linear-gradient(180deg,#4aa0ff 0%,#2e8bff 45%,#1257c9 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.28);
}
.btn-red:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.28);filter:brightness(1.1)}
.btn-tg{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.28)}
.btn-tg:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), inset 0 -3px 0 rgba(0,0,0,.28);filter:brightness(1.1)}
.btn-ghost{background:rgba(143,184,255,.06);border:none;box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-ghost:hover{background:rgba(143,184,255,.12);box-shadow:inset 0 0 0 1px var(--ice)}

/* ---------- ЗАГОЛОВКИ ---------- */
/* Наклонный стальной шрифт — как логотипы CSO */
.steel{
  background:var(--steel);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.page-header{
  background:
    radial-gradient(900px 500px at 82% 20%, rgba(46,139,255,.16), transparent 65%),
    radial-gradient(600px 400px at 10% 100%, rgba(143,211,255,.06), transparent 60%),
    var(--bg-0);
}
.page-header::before{
  background-image:var(--hex);background-size:56px 100px;
}
.page-header h1{
  font-style:italic;
  background:var(--steel);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 24px rgba(46,139,255,.25));
}
.page-header .section-tag{color:var(--ice);font-family:'Exo 2',sans-serif;font-weight:600;letter-spacing:.08em;text-transform:none;font-size:14px}
.page-header .section-tag::before{background:var(--blue)}
.section-title{font-style:italic}

/* ---------- ФУТЕР ---------- */
footer{background:#04070d}
.footer-inner h5{color:var(--ice)}

/* ---------- TOAST / STICKY ---------- */
.toast{background:linear-gradient(180deg,#3d97ff,#1257c9);border-radius:0;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.sticky-cta{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);background:linear-gradient(180deg,#3d97ff,#1257c9);font-family:'Exo 2',sans-serif;font-weight:800;font-style:italic}

/* =========================================================
   ПРАВИЛА (/cso/rules) — запреты остаются красными
   ========================================================= */
.rules-block,.rules-toc,.rules-intro{border-radius:0;clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.rules-toc{clip-path:none;border-radius:4px}
.rules-block-num{border-radius:0}
.rules-block.danger::before{background:linear-gradient(90deg,var(--danger),transparent)}
.rules-block.danger .rules-block-num{color:#ff8b96;border-color:rgba(255,59,78,.35);background:rgba(255,59,78,.08)}
.rules-sub.danger{border-left-color:var(--danger);background:rgba(255,59,78,.06)}
.rules-sub.danger .rules-sub-num{color:#ff8b96;background:rgba(255,59,78,.12)}
.rules-sub.danger p strong{color:#ff8b96}
.rules-severe{border-color:var(--danger);background:rgba(255,59,78,.06)}
.rules-severe h4,.rules-severe li::before,.rules-severe li b{color:#ff8b96}
.rules-items li .danger-tag{border-bottom-color:var(--danger);background:rgba(255,59,78,.15)}
.penalty-stage:nth-child(4) .ps-num{color:#ff6b78}
.penalty-stage:nth-child(5) .ps-num{color:var(--danger)}
.rule-callout.deny{background:rgba(255,59,78,.06);border-color:rgba(255,59,78,.3)}
.rules-items li b{background:rgba(46,139,255,.12)}
.toc-section li a.active{color:var(--ice);border-color:var(--ice)}
.chapter-divider span{color:var(--ice);border-color:rgba(143,211,255,.3);background:rgba(143,211,255,.06);border-radius:0}

/* =========================================================
   Общие мелочи
   ========================================================= */
code{font-family:'JetBrains Mono',monospace}
.money{color:var(--gold)}
.xp{color:var(--ice)}

@media (max-width:760px){
  .btn{font-size:14px}
}