/* ---------- Layout / breakout ---------- */
.scs1api-wrap{ width:100%; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial; }
.scs1api-breakout{ width:100vw !important; max-width:100vw !important; margin-left:50% !important; transform:translateX(-50%) !important; display:flex; justify-content:center; }
.scs1api-shell{
  width:min(var(--scs1api-max, 1650px), 100vw - 2rem) !important;
  margin:24px auto !important; padding:0; border-radius:14px;
  background:#000; color:#fff; overflow:hidden; box-shadow:0 0 36px rgba(255,0,170,.35);
  border:1px solid #2a0038;
}

/* ---------- Header ---------- */
.scs1api-header{ padding:12px 18px; border-bottom:1px solid #2a0038; background:#000; }
.scs1api-title{ display:none !important; }
.scs1api-title-main{ display:none !important; }
.scs1api-title-sub{
  display:inline-block; margin-top:0;
  font-size:1.05rem; text-transform:uppercase; letter-spacing:.22em;
  color:#ff2fb2; font-weight:900; padding:.45rem .9rem;
  border-radius:.5rem; background:#fff;
}
.scs1api-tools{ margin-top:12px; display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- Role filter buttons ---------- */
.role-filters{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-top:6px;
}
.rf-btn{
  --icon-size: 22px;
  --chip-w: 74px;
  --chip-pad-y: .28rem;
  --chip-fs: .74rem;
  --chip-top: #5c2060;
  --chip-bot: #321238;
  --act-top:  #ff34b9;
  --act-bot:  #8c1989;
  position:relative;
  background:transparent; border:0; padding:0; width:var(--chip-w);
  display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;
}
.rf-btn::after{
  content:""; position:absolute; top:2px; left:50%; transform:translateX(-50%);
  width:60px; height:18px;
  background:radial-gradient(ellipse at center, rgba(255,51,184,.55), rgba(255,51,184,0) 65%);
  filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.rf-btn.active::after{ opacity:1; }
.rf-icon{
  width:var(--icon-size); height:var(--icon-size);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  filter:saturate(.55) brightness(.9);
  transition:filter .15s, transform .15s, opacity .15s; opacity:.95; z-index:2;
}
.rf-label{
  display:inline-block; width:var(--chip-w); text-align:center;
  padding:var(--chip-pad-y) .55rem; border-radius:3px;
  font-weight:900; letter-spacing:.08em; text-transform:uppercase; font-size:var(--chip-fs);
  color:#fff; position:relative; border:1px solid #3e1142; box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, var(--chip-top) 0%, var(--chip-bot) 100%),
    url('assets/chip-texture.png');
  background-size: cover, cover;
  background-blend-mode: multiply, normal;
}
.rf-btn.active .rf-label{
  border-color:#ff9fe5; color:#160015; text-shadow:0 1px 0 rgba(255,255,255,.35);
  background:
    linear-gradient(180deg, var(--act-top) 0%, var(--act-bot) 100%),
    url('assets/chip-texture.png');
  background-size: cover, cover;
  background-blend-mode: multiply, normal;
}
.rf-btn.active .rf-icon{ filter:none; opacity:1; transform:translateY(-1px); }
.rf-btn:hover .rf-icon{ filter:saturate(.9) brightness(1); opacity:1; }
.rf-btn:focus-visible .rf-label{ outline:2px solid #ff89dc; outline-offset:2px; }

/* icon mapping */
.rf-btn[data-role="All"]     .rf-icon{ background-image:url('assets/ALL.png'); }
.rf-btn[data-role="Top"]     .rf-icon{ background-image:url('assets/TOP.png'); }
.rf-btn[data-role="Jungle"]  .rf-icon{ background-image:url('assets/JNG.png'); }
.rf-btn[data-role="Mid"]     .rf-icon{ background-image:url('assets/MID.png'); }
.rf-btn[data-role="Bot"]     .rf-icon{ background-image:url('assets/BOT.png'); }
.rf-btn[data-role="Support"] .rf-icon{ background-image:url('assets/SUPP.png'); }

/* ---------- Season switcher ---------- */
.season-switch{ display:flex; gap:.35rem; background:#0c0c0c; padding:.25rem; border-radius:999px; border:1px solid #2a2a30; }
.season-btn{
  background:transparent; color:#fff; border:0; font-weight:800; font-size:.78rem; padding:.35rem .65rem; border-radius:999px; cursor:pointer; letter-spacing:.08em;
}
.season-btn:hover{ color:#ff9bdd; }
.season-btn.active{ background:#ff2fb2; color:#140015; }

/* ---------- Rows + search ---------- */
.toolbar-right{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:12px; }
.rows-label{ color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.16em; }
.scs1api-length{
  padding:.38rem .55rem; border-radius:.5rem; border:1px solid #2a2a30;
  background:#0c0c0c; color:#fff; cursor:pointer;
}
.scs1api-search-wrap{
  position:relative; display:flex; align-items:center;
}
.scs1api-search{
  padding:.5rem .8rem; padding-right:2.1rem;
  border-radius:999px; border:1px solid #ff2fb2; background:#ff2fb2; color:#fff; font-weight:800; min-width:260px;
}
.scs1api-search::-webkit-search-cancel-button{
  -webkit-appearance:none;
  appearance:none;
}
.scs1api-search::-ms-clear{
  display:none;
  width:0;
  height:0;
}
.scs1api-search-clear{
  position:absolute; right:.5rem; top:50%; transform:translateY(-50%);
  border:0; background:transparent; color:#000; font-size:1.2rem; line-height:1;
  cursor:pointer; font-weight:800;
  padding:0;
}
.scs1api-search-clear:hover{ color:#280026; }

/* ---------- Table ---------- */
.scs1api-table-scroll{ overflow-x:auto; margin-top:10px; }
.scs1api-table{ width:100%; color:#ffe9ff; background:#0a0010; }
.scs1api-table td,
.scs1api-table th{
  white-space:nowrap; padding:.62rem .7rem; font-variant-numeric:tabular-nums;
  font-size:.82rem; font-weight:700; letter-spacing:normal; text-transform:none;
}
.scs1api-table thead th{
  position:sticky; top:0; background:#ffffff; color:#ff2fb2; border-bottom:2px solid #ff2fb2;
  text-align:left;
}
.scs1api-table tbody tr:nth-child(odd){ background:#25002f; }
.scs1api-table tbody tr:nth-child(even){ background:#1b0020; }
.scs1api-table tbody tr:hover{ background:#3a0048; }
.scs1api-table img{ display:inline-block; border-radius:6px; }

/* sensible min-widths */
.scs1api-table th:nth-child(1){min-width:220px}
.scs1api-table th:nth-child(2){min-width:70px}
.scs1api-table th:last-child{min-width:170px}

/* ---------- DataTables custom sorting chevrons ---------- */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled{
  background-image:none !important; position:relative;
}
.scs1api-table.dataTable thead th{ padding-right:.9rem; box-sizing:border-box; }

/* Unsorted: both arrows muted */
.scs1api-table.dataTable thead th.sorting::after,
.scs1api-table.dataTable thead th.sorting::before{
  content:""; position:absolute; right:.35rem; width:0; height:0; opacity:.48; transition:opacity .12s ease, transform .12s ease;
}
.scs1api-table.dataTable thead th.sorting::after{
  top:calc(50% - 5px); border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid #ffb5ea;
}
.scs1api-table.dataTable thead th.sorting::before{
  top:calc(50% + 5px); border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #ffb5ea;
}

/* Sorted ASC: only up arrow */
.scs1api-table.dataTable thead th.sorting_asc::after{
  content:""; position:absolute; right:.45rem; top:calc(50% - 5px);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:6px solid #ff2fb2; opacity:1; transform:translateY(-1px) scale(1.06);
}
.scs1api-table.dataTable thead th.sorting_asc::before{ content:none; }

/* Sorted DESC: only down arrow */
.scs1api-table.dataTable thead th.sorting_desc::before{
  content:""; position:absolute; right:.45rem; top:calc(50% + 5px);
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid #ff2fb2; opacity:1; transform:translateY(1px) scale(1.06);
}
.scs1api-table.dataTable thead th.sorting_desc::after{ content:none; }
.scs1api-table.dataTable thead th.sorting_asc,
.scs1api-table.dataTable thead th.sorting_desc{ color:#ff39c2; }

/* no chevrons for last column */
.scs1api-table.dataTable thead th:last-child.sorting::after,
.scs1api-table.dataTable thead th:last-child.sorting::before,
.scs1api-table.dataTable thead th:last-child.sorting_asc::after,
.scs1api-table.dataTable thead th:last-child.sorting_desc::before{ content:none; }

/* white placeholder text */
.scs1api-search::placeholder{ color:#ffffff; opacity:1; }
.scs1api-search::-webkit-input-placeholder{ color:#ffffff; }
.scs1api-search:-ms-input-placeholder{ color:#ffffff; }
.scs1api-search::-ms-input-placeholder{ color:#ffffff; }

/* DataTables tweaks */
.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{ display:none !important; }
.dataTables_wrapper .dataTables_info{ margin:.5rem 0; color:#ffdefc; font-size:.76rem; }
.dataTables_wrapper .dataTables_paginate{ margin:.35rem 0 .75rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  background:#0c0c0c !important; color:#ffd7ff !important; border:1px solid #2a2a30 !important; border-radius:999px !important;
  padding:.25rem .55rem !important; margin:0 .08rem !important; font-size:.74rem !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:#ff2fb2 !important; color:#160015 !important; border-color:#ffffff !important;
}

/* Footer */
.scs1api-source{ padding:10px 16px 14px; color:#ffdefc; font-size:.78rem; border-top:1px solid #2a0038; background:#000; }

/* Responsive */
@media (max-width:768px){
  .scs1api-title-main{ display:none !important; }
  .scs1api-title-sub{ font-size:1rem; }
  .toolbar-right{ width:100%; }
  .scs1api-search{ flex:1 1 auto; min-width:0; }
}