/* Kmakus · Claridad, accesibilidad y navegación */
[hidden] { display: none !important; }
@media (min-width: 761px) {
  .site-nav.desktop-nav { flex-wrap: wrap; overflow: visible; height: auto; }
  .site-nav.desktop-nav > a, .site-nav.desktop-nav > button, .site-nav .nav-inline-form { flex: 0 0 auto; white-space: nowrap; word-break: normal; }
  .site-nav.desktop-nav > button { min-width: 112px; width: auto; }
  .site-nav-spacer { display:none; }
}
.ranking-rules { margin: 0 0 18px; color: #bec8d8; }
.ranking-rules summary { cursor:pointer; color:#d4edab; padding:10px 0; }
.ranking-rules p { line-height:1.6; }
#showMoreMatches { display:block; margin:20px auto 0; }
#matchResultCount { margin-bottom:12px; }
.form-g { background:rgba(99,210,142,.16); color:#9af1bc; }
.form-p { background:rgba(242,130,142,.13); color:#ffacb7; }
.clear-stats { color:#edf3fa; max-width:1040px; margin:0 auto; padding:8px; }
.clear-stats p { line-height:1.6; }
.cs-header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.cs-header h2 { font-size:clamp(24px,3vw,36px); margin:8px 0; letter-spacing:-.7px; }
.cs-eyebrow { font-size:11px; letter-spacing:2px; color:#c1eb85; font-weight:800; margin:0; }
.cs-muted, .cs-header p.cs-muted { color:#b0bdd0; }
.cs-header p.cs-muted { margin:0; font-size:13px; }
.cs-overview { display:grid; grid-template-columns:1fr 1.4fr; gap:16px; margin-bottom:28px; }
.cs-position, .cs-points { border:1px solid #354251; border-radius:20px; padding:25px; min-width:0; }
.cs-position { background:linear-gradient(130deg,#26362a,#152420); }
.cs-points { background:#151f30; }
.cs-position>span, .cs-points>span { font-size:14px; color:#c3cdd8; }
.cs-position>strong, .cs-points>strong { display:block; font-size:52px; line-height:1.1; letter-spacing:-2px; margin:16px 0; }
.cs-position strong small, .cs-points strong small { font-size:16px; letter-spacing:0; font-weight:500; color:#b7c8be; }
.cs-position p, .cs-points p { color:#b7c4d4; font-size:12px; margin:14px 0 0; }
.cs-points-breakdown { display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:14px; color:#c2cede; }
.cs-points-breakdown b { color:#eef8ff; }
.cs-section { margin:0 0 26px; padding:22px; border:1px solid #2d3a4f; border-radius:18px; background:#111b2a; }
.cs-section-head { display:flex; justify-content:space-between; align-items:baseline; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.cs-section-head h3 { margin:0; font-size:19px; }
.cs-section-head>span { color:#adbdcf; font-size:12px; }
.cs-result-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.cs-result { border-radius:12px; padding:16px; background:#1b2738; border-bottom:3px solid #65768b; }
.cs-result strong { display:block; font-size:32px; }
.cs-result span { font-size:13px; }
.cs-result.cs-win { border-color:#91d8a3; color:#b8f1c7; }
.cs-result.cs-draw { border-color:#dac185; color:#ebd8ae; }
.cs-result.cs-loss { border-color:#e4939d; color:#f4bcc4; }
.cs-winrate { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:24px; }
.cs-winrate span { display:block; font-size:13px; color:#afbdd0; margin-top:6px; }
.cs-winrate progress { width:34%; height:10px; border:0; border-radius:20px; background:#2b3748; accent-color:#b8e98b; }
.cs-winrate progress::-webkit-progress-bar { background:#2b3748;border-radius:20px; }
.cs-winrate progress::-webkit-progress-value { background:#b8e98b;border-radius:20px; }
.cs-streak { font-size:13px;color:#c7d5e4; margin:0 0 10px; }
.cs-match { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:17px 0; border-bottom:1px solid #293548; }
.cs-match:last-child { border-bottom:0; padding-bottom:0; }
.cs-match p { margin:9px 0 0;font-size:14px; }
.cs-outcome { display:inline-block;font-size:11px;font-weight:700;border-radius:6px;padding:4px 8px; }
.cs-outcome.cs-win { background:#273e34;color:#b6ecc9; }
.cs-outcome.cs-loss { background:#3c2a37;color:#f3b6c1; }
.cs-outcome.cs-draw { background:#38382d;color:#ebd8ae; }
.cs-date { color:#a8b7cb;font-size:11px;margin-left:10px; }
.cs-score { flex:0 0 auto;text-align:center; }
.cs-score strong { font-size:24px;white-space:nowrap; }
.cs-score small { display:block;font-size:11px;color:#a8b7cb; }
.cs-details { border:1px solid #2d3a4f;border-radius:14px;margin:12px 0;background:#111b2a; }
.cs-details>summary { cursor:pointer;padding:19px 20px;font-weight:650;line-height:1.4; }
.cs-details>summary::marker { color:#b8e98b; }
.cs-detail-content { padding:0 20px 20px;font-size:14px; }
.cs-detail-row { display:flex;gap:16px;justify-content:space-between;align-items:center;padding:15px 0;border-top:1px solid #293548; }
.cs-detail-row small { display:block;color:#adbdcf;font-size:12px;margin-top:5px; }
.cs-detail-row>span { text-align:right; }
.clear-stats summary:focus-visible, .clear-stats a:focus-visible, button:focus-visible { outline:2px solid #c7f192;outline-offset:4px; }
@media(max-width:760px) {
  .clear-stats { padding:0; }
  .cs-header { display:block;margin-bottom:20px; }
  .cs-header>a { margin-top:14px; }
  .cs-overview { grid-template-columns:1fr; gap:12px;margin-bottom:20px; }
  .cs-position,.cs-points { padding:20px; }
  .cs-position>strong,.cs-points>strong { font-size:44px;margin:10px 0; }
  .cs-section { padding:17px; }
  .cs-section-head { gap:6px; }
  .cs-section-head>span { display:block;width:100%; }
  .cs-result-grid { gap:8px; }
  .cs-result { padding:12px 8px; }
  .cs-result strong { font-size:27px; }
  .cs-result span { font-size:11px; }
  .cs-winrate { display:block; }
  .cs-winrate progress { width:100%;margin-top:16px; }
  .cs-date { display:block;margin:7px 0 0; }
  .cs-match p { font-size:12px; }
  .cs-details>summary { padding:17px;font-size:14px; }
  .cs-detail-content { padding:0 17px 17px; }
  .cs-detail-row { align-items:flex-start;flex-wrap:wrap; }
  .cs-detail-row>span { text-align:left; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }

/* Keep the ranking metric readable in narrow pair podium cards. */
.pairs-podium-stats { display:flex; flex-wrap:wrap; gap:6px; }
.pairs-podium-stats > strong { flex-basis:100%; }
.pairs-podium-item { min-width:0; }
.pairs-podium-name { overflow-wrap:anywhere; }
.pairs-mobile-card .mobile-rank-pos { flex-shrink:0; }
@media (max-width:600px) {
  .pairs-podium-item { flex-basis:100%; }
}
.summary-action { display:block; margin-top:12px; color:var(--accent,#b8ff3b); text-decoration:underline; }
.summary-grid { align-items:start; }
.summary-detail { margin-top:12px; font-size:.85rem; }
.summary-detail summary { cursor:pointer; color:#b8ff3b; }
.summary-detail ol { padding-left:20px; }
.summary-detail li { margin:12px 0; line-height:1.5; overflow-wrap:anywhere; }
.evolution-controls { display:flex; flex-wrap:wrap; gap:16px; }
.evolution-controls[hidden] { display:none; }
.evolution-controls label { flex:1; min-width:160px; }
.evolution-controls select { display:block; width:100%; margin-top:6px; }
#evolutionPlot svg { display:block; width:100%; height:auto; }
#evolutionSummary span { display:inline-block; margin:8px 18px 8px 0; }
#evolutionValues summary { cursor:pointer; margin:12px 0; }
@media(max-width:600px) { .evolution-controls label { flex-basis:100%; } }