/* ============================================================
   ЕДИНАЯ БОКОВАЯ НАВИГАЦИЯ steamcard.fun (inc/nav.php)
   Категории — как прежние боковые кнопки (продолжение шапки).
   Подпункты — свободные пилюли: скруглены с обеих сторон
   и с отступом от кромки панели.
   ============================================================ */
.sc-nav{position:absolute; z-index:60;}
.sc-left{left:-44px;}
.sc-right{right:-44px;}

/* ── кнопка-категория: примыкает к панели, как текущие кнопки ── */
.sc-nav-cat{
  display:flex; align-items:center; height:44px; width:44px; overflow:hidden;
  background:rgba(18,18,30,0.96); border:1px solid var(--sc-acc-b, rgba(168,85,247,0.38));
  font-family:'Jura','Exo 2',sans-serif; font-size:0.82rem; font-weight:700;
  color:#e8e8f2; white-space:nowrap; cursor:default;
  transition:all .4s cubic-bezier(.25,.8,.25,1);
}
.sc-left  .sc-nav-cat{border-right:none; border-radius:12px 0 0 12px; flex-direction:row-reverse;}
.sc-right .sc-nav-cat{border-left:none;  border-radius:0 12px 12px 0;}
.sc-nav-ico{width:44px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex-shrink:0;}
.sc-nav-cat .sc-nav-lbl{opacity:0; transition:opacity .3s;}

.sc-nav:hover .sc-nav-cat{border-color:var(--sc-acc,#a855f7); box-shadow:0 0 14px var(--sc-acc-g, rgba(168,85,247,0.42));}
.sc-left:hover  .sc-nav-cat{width:200px; margin-left:-156px;}
.sc-right:hover .sc-nav-cat{width:200px; margin-right:-156px;}
.sc-nav:hover .sc-nav-cat .sc-nav-lbl{opacity:1; transition-delay:.08s;}

/* ── колонка подпунктов: свободные пилюли с отступом от шапки ── */
.sc-nav-sub{
  position:absolute; top:44px; padding-top:9px;       /* паддинг перекрывает зазор для hover */
  display:flex; flex-direction:column; gap:6px;
  opacity:0; pointer-events:none;
  transition:opacity .2s ease .15s;                    /* задержка закрытия прощает соскок мыши */
}
.sc-left  .sc-nav-sub{right:6px;  align-items:flex-end;}   /* 6px отступ от кромки панели */
.sc-right .sc-nav-sub{left:6px;   align-items:flex-start;}
.sc-nav:hover .sc-nav-sub{opacity:1; pointer-events:auto; transition-delay:0s;}

.sc-nav-sub a{
  display:flex; align-items:center; height:40px; width:192px; overflow:hidden;
  background:rgba(18,18,30,0.96); border:1px solid rgba(255,255,255,0.18);
  border-radius:11px;                                  /* скругление с обеих сторон */
  font-family:'Jura','Exo 2',sans-serif; font-size:0.8rem; font-weight:700;
  color:#e8e8f2; text-decoration:none; white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,0.45);
  transform:translateY(-8px); opacity:0;
  transition:transform .28s cubic-bezier(.25,.8,.25,1), opacity .28s,
             border-color .18s, box-shadow .18s, background .18s;
}
.sc-nav-sub .sc-nav-ico{width:40px; font-size:1.1rem;}
.sc-nav:hover .sc-nav-sub a{transform:none; opacity:1;}
/* каскад появления сверху вниз */
.sc-nav:hover .sc-nav-sub a:nth-child(1){transition-delay:.04s;}
.sc-nav:hover .sc-nav-sub a:nth-child(2){transition-delay:.09s;}
.sc-nav:hover .sc-nav-sub a:nth-child(3){transition-delay:.14s;}
.sc-nav:hover .sc-nav-sub a:nth-child(4){transition-delay:.19s;}
.sc-nav:hover .sc-nav-sub a:nth-child(5){transition-delay:.24s;}
.sc-nav:hover .sc-nav-sub a:nth-child(6){transition-delay:.29s;}

.sc-nav-sub a:hover{
  border-color:var(--sc-acc,#00f0ff); color:#fff;
  background:var(--sc-acc-bg, rgba(0,240,255,0.07));
  box-shadow:0 0 14px var(--sc-acc-g, rgba(0,240,255,0.35)), 0 4px 14px rgba(0,0,0,0.45);
}

/* на мобильных боковая навигация скрыта (как и раньше) */
@media (max-width:860px){ .sc-nav{display:none;} }