/* Free FACEIT tools (/faceit-elo-calculator, /faceit-games-to-next-level, /premier-vs-faceit), 31 Oct 2026.
   On top of app.css: the same nav, footer, buttons and tokens as the landing and the cups pages. */
.tool-top{padding:56px 0 8px}
.tool-top .upper{color:var(--mint)}
.tool-top h1{margin-top:14px;font-size:44px;font-weight:700;line-height:1.08;letter-spacing:-.02em;color:#fff;text-wrap:balance;max-width:820px}
.tool-top .mk-lede{max-width:720px}
.tool-body{padding:28px 0 24px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start}
.tool-main{min-width:0;max-width:820px}
.tool-main h2{margin:44px 0 12px;font-size:24px;font-weight:700;letter-spacing:-.01em;color:#fff;scroll-margin-top:80px}
.tool-main p{color:var(--text-2);font-size:15.5px;line-height:1.65;margin:0 0 14px;text-wrap:pretty}
.tool-main a{text-decoration:underline;text-underline-offset:2px}
.tool-main a.steam-btn{text-decoration:none}
.tool-answer{background:var(--mint-08);border:1px solid var(--mint-30);border-radius:var(--r-md);padding:16px 18px;color:var(--text)!important;font-size:16px!important}
.tool-answer b{color:#fff}

/* the calculator card */
.tool-card{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:22px}
.tool-form{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:end}
.tool-form .field{grid-column:span 3}
.tool-form .field.third{grid-column:span 2}
#eloForm .field{grid-column:span 4}
.tool-form input,.tool-form select{width:100%;height:46px;font-size:16px;font-variant-numeric:tabular-nums}
.tool-form .hint{font-size:12px;color:var(--muted);margin-top:2px}
.tool-card > .tool-note{margin-top:12px}
.tool-out{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.tool-out[hidden]{display:none}
.tool-big{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.tool-big .lvlicon{width:48px;height:48px}
.tool-big .v{font-family:var(--f-head);font-size:34px;font-weight:700;color:#fff;letter-spacing:-.02em;line-height:1}
.tool-big .s{color:var(--text-2);font-size:15px}
.tool-bar{margin:16px 0 6px;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.tool-bar i{display:block;height:100%;background:var(--mint);border-radius:5px}
.tool-bar-x{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.tool-facts{margin:16px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.tool-facts li{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.tool-facts small{display:block;font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}
.tool-facts b{display:block;margin-top:6px;font-family:var(--f-head);font-size:22px;color:#fff;font-variant-numeric:tabular-nums}
.tool-facts span{display:block;margin-top:2px;font-size:12.5px;color:var(--muted)}
.tool-math{margin:16px 0 0;padding:14px 16px;background:var(--bg-deep);border:1px solid var(--line);border-radius:var(--r-md);font-size:14px;line-height:1.75;color:var(--text-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.tool-math b{color:#fff}
.tool-note{margin:14px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.tool-note.warn{color:var(--warn)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:16px 0 8px;border:1px solid var(--line-2);border-radius:var(--r-md)}
.tool-tbl{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.tool-tbl caption{text-align:left;padding:12px 14px;font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line)}
.tool-tbl th,.tool-tbl td{padding:10px 14px;text-align:right;white-space:nowrap;border-top:1px solid var(--line)}
.tool-tbl thead th{background:var(--surface);font-family:var(--f-head);font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;border-top:0;white-space:normal;vertical-align:bottom;line-height:1.35}
.tool-tbl th:first-child,.tool-tbl td:first-child{text-align:left}
.tool-tbl tbody th{background:none;font-family:var(--f-body);font-size:14px;font-weight:500;color:var(--text);text-transform:none;letter-spacing:0}
.tool-tbl .hl{color:#fff;font-weight:600}
.tool-tbl tr.on td,.tool-tbl tr.on th{background:var(--mint-08)}
.tool-tbl .lv{display:inline-flex;align-items:center;gap:8px}
.tool-points,.tool-steps{margin:8px 0 14px;padding-left:20px;color:var(--text-2);font-size:15px;line-height:1.65}
.tool-points li,.tool-steps li{margin-bottom:8px}
.tool-points b,.tool-steps b{color:var(--text)}
.tool-src{margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.tool-src ul{margin:8px 0 0;padding-left:18px}
.tool-src li{margin-bottom:6px}

/* the side column: sign-in and the other tools */
.tool-side{position:sticky;top:86px;display:flex;flex-direction:column;gap:14px}
.tool-cta{background:linear-gradient(180deg,var(--mint-08),transparent 70%),var(--card);border:1px solid var(--mint-30);border-radius:16px;padding:22px}
.tool-cta h2{font-size:20px;line-height:1.25;color:#fff;font-weight:700;margin:0}
.tool-cta p{margin:10px 0 18px;color:var(--text-2);font-size:14px;line-height:1.55}
.tool-cta .steam-btn{width:100%;justify-content:center}
.tool-cta .micro{margin:14px 0 0;font-size:12.5px;color:var(--muted)}
.tool-more{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px}
.tool-more .upper{display:block;margin-bottom:8px}
.tool-more a{display:block;padding:9px 0;border-top:1px solid var(--line);color:var(--text);font-family:var(--f-head);font-weight:500;font-size:14px}
.tool-more a:first-of-type{border-top:0}
.tool-more a:hover{color:var(--mint)}
.tool-more a[aria-current]{color:var(--mint)}

/* Premier vs FACEIT chart: HTML bars, so the text stays readable at every width */
.pvf-fig{margin:18px 0 6px}
.pvf-chart{background:var(--card);border:1px solid var(--line-2);border-radius:16px;padding:16px 18px 10px}
.pvf-row,.pvf-axis{display:grid;grid-template-columns:92px minmax(0,1fr) 58px;gap:12px;align-items:center;height:32px}
.pvf-lab{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-size:13px;font-weight:500;color:var(--text-2);white-space:nowrap}
.pvf-lab .lvlicon{width:20px;height:20px}
.pvf-track{position:relative;height:100%;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 6))}
.pvf-track i{position:absolute;top:50%;height:12px;margin-top:-6px;border-radius:6px;background:var(--mint-30)}
.pvf-track b{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px var(--card)}
.pvf-val{font-family:var(--f-head);font-weight:600;font-size:13px;color:#fff;text-align:right;font-variant-numeric:tabular-nums}
.pvf-axis{height:22px}
.pvf-ticks{position:relative;height:100%}
.pvf-ticks i{position:absolute;top:4px;transform:translateX(-50%);font-style:normal;font-size:11.5px;color:var(--muted)}
.pvf-ticks i:first-child{transform:none}
.pvf-ticks i:last-child{transform:translateX(-100%)}
.pvf-fig figcaption{margin-top:8px;font-size:12.5px;color:var(--muted)}

@media (max-width:1060px){
  .tool-body{grid-template-columns:minmax(0,1fr)}
  .tool-side{position:static}
}
@media (max-width:600px){
  .tool-top{padding-top:32px}
  .tool-top h1{font-size:32px}
  .tool-main h2{font-size:21px;margin-top:36px}
  .tool-card{padding:18px 16px}
  .tool-form{gap:12px 10px}
  #eloForm .field{grid-column:1 / -1}
  .tool-form .field > span{font-size:10.5px;letter-spacing:.8px}
  .tool-big .v{font-size:28px}
  .tool-tbl th,.tool-tbl td{padding:9px 10px;font-size:13.5px}
  .pvf-chart{padding:12px 12px 8px}
  .pvf-row,.pvf-axis{grid-template-columns:74px minmax(0,1fr) 46px;gap:8px}
  .pvf-lab{font-size:12px;gap:6px}
  .pvf-lab .lvlicon{width:18px;height:18px}
  .pvf-val{font-size:12px}
  .pvf-ticks i{font-size:10.5px}
  .pvf-ticks i:nth-child(even){display:none}
}
.tool-q{margin:22px 0 6px;font-size:16px;font-weight:600;color:#fff}
.tool-cta-inline{display:none;margin:28px 0 8px}
@media (max-width:1060px){
  .tool-cta-inline{display:block}
  .tool-side .tool-cta{display:none}
}