/* Team split page (/team-split/). Builds on /style.css (Hextech tokens, .panel, .badge, .share-btn). */
.lead-split { color: var(--fg-2); font-size: 15.5px; line-height: 1.6; max-width: 78ch; margin: 0 0 20px; }
.lead-split code { font-family: var(--mono); font-size: 13px; color: var(--magic-100); background: rgba(1,10,19,.9); border: 1px solid rgba(70,55,20,.8); padding: 1px 7px; }
.top-nav .nav-link.split-on { color: var(--gold-100); }
.top-nav .nav-link.split-on::after { transform: scaleX(1); }

/* ---- form ---- */
.split-form { display: grid; gap: 14px; max-width: 980px; }
.split-paste { padding: 4px; }
.split-paste textarea {
  display: block; width: 100%; min-height: 220px; resize: vertical; padding: 12px 14px; border: 0; outline: none;
  background: transparent; color: var(--gold-100); font: 500 14px/1.6 var(--mono);
}
.split-paste textarea::placeholder { color: #8d897e; }
.split-paste:focus-within { border-color: var(--gold-300); box-shadow: 0 0 0 1px rgba(200,170,110,.35), 0 0 14px rgba(200,170,110,.2), inset 0 0 26px rgba(1,10,19,.85); }
.split-check { display: flex; gap: 10px; align-items: flex-start; max-width: 78ch; cursor: pointer; font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.split-check input { width: 17px; height: 17px; margin-top: 2px; flex: none; accent-color: var(--magic-300); }
.split-check b { color: var(--gold-100); font-weight: 600; }
.split-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.split-field { display: grid; gap: 6px; }
.split-field > span { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-200); }
.split-field select { min-width: 190px; }
.split-size { flex: none; width: 92px; min-width: 0; font-family: var(--mono); }
.split-go {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 9px 22px; cursor: pointer;
  font: 700 12px/1 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--magic-100);
  background: linear-gradient(180deg, rgba(10,200,185,.22), rgba(0,90,130,.35)); border: 1px solid var(--magic-300);
  box-shadow: inset 0 0 14px rgba(10,200,185,.25), 0 0 12px rgba(10,200,185,.25); transition: box-shadow .2s, filter .2s;
}
.split-go:hover { color: #fff; box-shadow: inset 0 0 18px rgba(10,200,185,.4), 0 0 18px rgba(10,200,185,.45); }
.split-go:disabled { opacity: .45; cursor: default; box-shadow: none; }
.split-count { font-family: var(--font-display); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-2); align-self: center; }
.split-count b { color: var(--gold-200); font-family: var(--mono); letter-spacing: 0; font-size: 14px; }
.split-msg { margin: 0; font-size: 14px; } .split-msg.err { color: var(--blood-300); }
.spin { width: 15px; height: 15px; display: inline-block; border: 2px solid rgba(205,250,250,.3); border-top-color: var(--magic-100); border-radius: 50%; animation: hex-spin .8s linear infinite; }
.split-recent { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.split-recent a { color: var(--gold-100); text-decoration: underline; text-decoration-color: var(--gold-600); text-underline-offset: 3px; }
.split-recent a:hover { color: var(--magic-300); }
.split-how { margin-top: 26px; max-width: 80ch; color: var(--fg-2); font-size: 14px; line-height: 1.6; }
.split-how summary { cursor: pointer; color: var(--gold-200); font-weight: 600; }

/* ---- job ---- */
.split-progress { padding: 16px 18px; margin: 18px 0; display: grid; gap: 10px; }
.sp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sp-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--magic-300); }
.sp-top .num { color: var(--gold-200); font-size: 13px; }
.sp-track { height: 8px; background: rgba(30,35,40,.9); border: 1px solid rgba(70,55,20,.8); overflow: hidden; }
.sp-track i { display: block; height: 100%; background: linear-gradient(to right, var(--magic-500), var(--magic-300) 60%, var(--magic-100)); box-shadow: 0 0 10px rgba(10,200,185,.7); transition: width .4s ease; }
.sp-prio { margin: 0; font-size: 13px; color: var(--magic-100); }
.sp-close { margin: 0; font-size: 14px; color: var(--fg-2); } .sp-close b { color: var(--gold-100); }
.sp-link, .split-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-link code, .split-share code { flex: 1 1 260px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 8px 10px; font: 500 12.5px var(--mono); color: var(--magic-100); background: rgba(1,10,19,.9); border: 1px solid rgba(70,55,20,.8); }
.split-share { justify-content: center; max-width: 760px; margin: 0 auto 22px; }
.split-alert { margin: 16px 0; padding: 12px 16px; border: 1px solid rgba(232,64,87,.55); background: rgba(150,34,46,.14); color: var(--gold-100); font-size: 14px; }
.split-alert b { color: var(--blood-300); }
.split-alert ul { margin: 6px 0 0; padding-left: 20px; }
.split-alert .split-go { margin-top: 10px; }
.split-actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- result ---- */
.split-banner { display: flex; align-items: center; gap: 16px; margin: 30px 0 8px; }
.split-banner .line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, var(--gold-300), transparent); }
.split-banner h2 { margin: 0; font-size: 22px; letter-spacing: .2em; color: var(--gold-100); text-shadow: 0 0 16px rgba(200,170,110,.55); }
.split-banner h2::before, .split-banner h2::after { display: none; }
.split-sum { text-align: center; color: var(--fg-2); font-size: 14px; margin: 0 0 14px; }
.split-sum b { color: var(--gold-100); font-size: 16px; } .split-sum .sep { color: var(--gold-600); margin: 0 8px; }
.split-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.sp-team { padding: 14px 14px 10px; }
.sp-team header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sp-team h3 { margin: 0; font: 700 13px var(--font-display); letter-spacing: .18em; text-transform: uppercase; color: var(--magic-300); text-shadow: 0 0 10px rgba(10,200,185,.5); }
.sp-total { color: var(--gold-100); font-size: 15px; text-shadow: 0 0 8px rgba(200,170,110,.5); }
.sp-bar { height: 4px; margin: 8px 0 6px; background: rgba(30,35,40,.9); overflow: hidden; }
.sp-bar i { display: block; height: 100%; background: linear-gradient(to right, var(--gold-600), var(--gold-300), var(--gold-100)); }
.sp-team ul, .sp-bench ul { list-style: none; margin: 0; padding: 0; }
.sp-row + .sp-row { border-top: 1px solid rgba(30,35,40,.95); }
.sp-row > a, .sp-row > div { display: flex; align-items: center; gap: 10px; padding: 8px 2px; color: inherit; }
.sp-row > a:hover .sp-nm { color: var(--magic-300); text-decoration-color: var(--magic-300); }
.sp-ava { position: relative; flex: none; width: 34px; height: 34px; }
.sp-ava img { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--gold-600); box-shadow: 0 0 6px rgba(200,170,110,.35); }
.sp-ava i { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); padding: 0 3px; font: 600 9px/1.3 var(--mono); font-style: normal; color: var(--gold-200); background: var(--abyss-950); border: 1px solid var(--gold-600); }
.sp-crest { width: 26px; height: 26px; flex: none; }
.sp-crest.none { width: 13px; height: 13px; margin: 0 6px; rotate: 45deg; background: var(--steel-300); }
.sp-who { min-width: 0; flex: 1; display: grid; gap: 4px; justify-items: start; }
.sp-nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--gold-100); text-decoration: underline; text-decoration-color: rgba(120,90,40,.7); text-underline-offset: 2px; }
.sp-tier { padding: 2px 12px; font-size: 9.5px; }
.sp-est { color: var(--magic-300); text-transform: none; letter-spacing: 0; }
.sp-elo { flex: none; font-size: 13px; color: var(--fg-2); }
.sp-reserve { margin-top: 4px; padding-top: 6px; border-top: 1px dashed var(--gold-700); opacity: .9; }
.sp-reserve p, .sp-bench h3 { margin: 0; font: 700 9.5px var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--fg-2); }
.sp-bench { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--gold-700); background: rgba(1,10,19,.6); }
.t-iron { --tier-color: #8c7f79; } .t-bronze { --tier-color: #b97452; } .t-silver { --tier-color: #9fb0bd; }
.t-gold { --tier-color: #d6a64a; } .t-platinum { --tier-color: #4fa89b; } .t-emerald { --tier-color: #2dbd78; }
.t-diamond { --tier-color: #7a8cf0; } .t-master { --tier-color: var(--tier-master); } .t-grandmaster { --tier-color: var(--tier-grandmaster); }
.t-challenger { --tier-color: var(--tier-challenger); } .t-unranked { --tier-color: var(--steel-100); }
.sp-row .sp-crest.none { background: var(--tier-color); }

/* ---- "match found" popup ---- */
.sp-mf { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(1,10,19,.78); animation: sp-fade .25s ease both; }
.sp-mf.leaving { animation: sp-fade .38s ease reverse both; }
.sp-mf-panel { position: relative; width: min(420px, 100%); padding: 34px 26px 26px; text-align: center; overflow: hidden; animation: sp-pop .45s cubic-bezier(.16,1,.3,1) both; }
.sp-mf-rings { position: absolute; left: 50%; top: 38%; width: 0; height: 0; pointer-events: none; }
.sp-mf-rings span { position: absolute; left: -110px; top: -110px; width: 220px; height: 220px; border: 1px solid rgba(10,200,185,.45); border-radius: 50%; animation: sp-ring 2.4s ease-out infinite; }
.sp-mf-rings span:nth-child(2) { animation-delay: .8s; } .sp-mf-rings span:nth-child(3) { animation-delay: 1.6s; }
.sp-mf-title { position: relative; margin: 4px 0 8px; font-size: 26px; }
.sp-mf-sub { position: relative; margin: 0 0 22px; color: var(--fg-2); }
.sp-mf-accept { position: relative; min-width: 200px; padding: 12px 24px; cursor: pointer; font: 700 13px var(--font-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--abyss-950); background: linear-gradient(180deg, var(--gold-100), var(--gold-300)); border: 1px solid var(--gold-100); box-shadow: 0 0 18px rgba(200,170,110,.5); }
.sp-mf-accept[data-ok] { filter: grayscale(.6) brightness(.7); cursor: default; }
@keyframes sp-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes sp-pop { from { opacity: 0; transform: scale(.92) } to { opacity: 1; transform: none } }
@keyframes sp-ring { from { transform: scale(.4); opacity: .9 } to { transform: scale(1.6); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .sp-mf-rings span, .sp-mf, .sp-mf-panel { animation: none !important } }

@media (max-width: 560px) {
  .split-teams { grid-template-columns: 1fr; }
  .split-go { width: 100%; }
  .split-field select { min-width: 0; max-width: 100%; }
  .split-banner h2 { font-size: 17px; }
}