/* ==========================================================================
   Typer — świeży wygląd (MR-20261020-TYPERFRESH). Prośba właściciela: „typer - tutaj oczekuję od Ciebie poprawy
   w kolorach, a także chcę żebyś zaproponował świeży układ kart do typowania i ogólnie świeży układ paneli i całego
   ustawienia”.
   Warstwa na motyw „w stylu Składu” (typer-mr-theme.css) - tylko ciemny motyw portalu i tylko z klasą html.tp-fresh
   (przełącznik „Wygląd: nowy / klasyczny” w nagłówku, typer-menu.js; domyślnie nowy, wybór w pamięci przeglądarki).
   - kolory: głęboka czerń z granatową poświatą zamiast jaskrawego granatu, panele grafitowe z delikatną ramką,
     akcja - niebiesko-fioletowy gradient (mniej jaskrawy niż cyjan), punkty i miejsca - złoto Realu, zieleń wygranej;
   - karta meczu na liście: „bilet” - termin w odcinku z przerywaną linią, herby na krążkach, przyciski jako pigułki,
     zapisany typ - złoty pasek i znacznik;
   - karta typowania: pasek z rozgrywkami i czasem, herby na poświacie, przyciski wyboru jak segmenty;
   - panele, zakładki i rankingi: zaokrąglone karty, aktywna zakładka jako pigułka, podium w kolorach medali.
   Komponenty z przedrostkiem html.tp-fresh.tp-fresh.tp-fresh - wyżej niż reguły motywu „Skład” z .game-shell / :is().
   ========================================================================== */

html.tp-fresh:not([data-mr-theme="light"]) {
  --f-bg: #121214;
  --f-s1: #1b1c1f;
  --f-s2: #212226;
  --f-s3: #2a2b30;
  --f-line: rgba(255, 255, 255, .07);
  --f-line2: rgba(255, 255, 255, .13);
  --f-txt: #f3f5f9;
  --f-mut: #9a9ca3;
  --f-acc: #e5202d;
  --f-acc2: #b3141f;
  --f-grad: linear-gradient(135deg, #e5202d 0%, #c41723 100%);
  --f-acc-soft: rgba(229, 32, 45, .13);
  --f-gold: #f5c451;
  --f-gold-soft: rgba(245, 196, 81, .12);
  --f-green: #34d399;
  --f-red: #f43f5e;
  /* zmienne motywu Typera - te same nazwy, nowe kolory */
  --k-bg: var(--f-bg); --k-s1: var(--f-s1); --k-s2: var(--f-s2); --k-s3: var(--f-s3);
  --k-line: var(--f-line); --k-line2: var(--f-line2); --k-txt: var(--f-txt); --k-mut: var(--f-mut);
  --k-acc: #ff4b55; --k-acc-hi: #ff9aa0; --k-acc-ink: #fff; --k-acc-soft: var(--f-acc-soft); --k-acc-line: rgba(255, 75, 85, .45);
  --bg: var(--f-bg); --bg2: #18191c; --card: var(--f-s1); --line: var(--f-line); --text: var(--f-txt); --muted: var(--f-mut);
  --accent: var(--f-acc); --link: #ff9aa0; --green: var(--f-green); --surface-hover: var(--f-s3); --surface-selected: var(--f-acc-soft);
  --radius: 16px;
  --tp-scroll-track: var(--f-bg); --tp-scroll-thumb: #34353a; --tp-scroll-thumb-hover: #45464c;
  background: var(--f-bg);
}
html.tp-fresh:not([data-mr-theme="light"]) body,
html.tp-fresh:not([data-mr-theme="light"]) body.tp-ux-v4 {
  --tp-panel: var(--f-s1); --tp-line: var(--f-line); --tp-muted: var(--f-mut); --tp-blue: var(--f-acc);
  background:
    radial-gradient(900px 420px at 12% -10%, rgba(229, 32, 45, .1), transparent 70%),
    radial-gradient(700px 380px at 92% -8%, rgba(255, 255, 255, .04), transparent 70%),
    var(--f-bg) fixed;
}
html.tp-fresh:not([data-mr-theme="light"]) ::-webkit-scrollbar-thumb { background: #34353a; border-color: var(--f-bg); }

/* ---------------------------------------------------------------- nagłówek i zakładki */
/* tylko komputer: na telefonie zakładki to dolna belka (position: fixed w .game-sidebar) - rozmycie tła panelu
   (backdrop-filter) robiło z panelu 0×0 punkt odniesienia belki i belka znikała nad ekranem; belka na telefonie
   zostaje jak w klasycznym wyglądzie (prośba właściciela, 20.10.2026) */
@media (min-width: 800px) {
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar { background: rgba(24, 24, 27, .94); border-color: var(--f-line); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab { border-radius: 9999px; transition: background .15s, color .15s; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab:hover { background: rgba(255, 255, 255, .05); }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active { background: rgba(229, 32, 45, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 75, 85, .35); }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active::after { display: none; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active .tab-icon { color: #ff9aa0; }
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .screen-head { border: 1px solid var(--f-line); border-radius: 20px; background: linear-gradient(180deg, rgba(36, 37, 41, .95), rgba(27, 28, 31, .95)); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.tp-notify-btn, .rank-pill, .mrc-pill-btn) { border-color: var(--f-line2); background: rgba(255, 255, 255, .04); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.tp-notify-btn, .rank-pill, .mrc-pill-btn):hover { background: rgba(255, 255, 255, .08); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .rank-pill.pts b { color: var(--f-gold); }

/* ---------------------------------------------------------------- panele */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.welcome, .wel, .tp-onboard, .command-rail, .view-heading, .mrc-panel, .ar4-hero, .ar4-summary > div, .ar-rank-panel, .ar-panel, .tp-eng-card, .profile-inline, .rules-card) {
  border-color: var(--f-line);
  background: linear-gradient(180deg, var(--f-s2), var(--f-s1));
  border-radius: 18px;
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .view-heading { padding: 16px 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .view-heading h2 { letter-spacing: -.01em; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .view-heading-icon { border-radius: 14px; background: var(--f-grad); color: #fff; box-shadow: 0 6px 18px rgba(229, 32, 45, .35); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .command-link { border-radius: 14px; }
/* motyw „Skład” wymusza tło aktywnej pozycji (!important) - tutaj też */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .command-link.active { border-color: rgba(255, 75, 85, .35) !important; background: rgba(229, 32, 45, .12) !important; }
/* filtry rozgrywek nad listą meczów - pigułki */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .inline-competition-filter .command-link { border-color: var(--f-line2); background: rgba(255, 255, 255, .03); color: #c8d0dc; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .inline-competition-filter .command-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .inline-competition-filter .command-link.active { border-color: transparent !important; background: var(--f-grad) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(229, 32, 45, .3); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .inline-competition-filter .command-link.active :is(b, span, small) { color: #fff !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .inline-competition-filter .command-link.active i { color: #fff; }

/* ---------------------------------------------------------------- przyciski */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.bm-btn:not(.ar-challenge):not(.edit), .ar-btn.primary, .tp-eng-primary, .submit, .wel-btn, .mrl-btn.is-main, .mrgn button) {
  border: 0; border-radius: 9999px; background: var(--f-grad); color: #fff; box-shadow: 0 6px 18px rgba(229, 32, 45, .28);
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.bm-btn:not(.ar-challenge):not(.edit), .ar-btn.primary, .tp-eng-primary, .submit, .wel-btn, .mrl-btn.is-main, .mrgn button):hover { background: var(--f-grad); filter: brightness(1.1); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .submit.saved { background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 6px 18px rgba(34, 197, 94, .28); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-btn { border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-btn.ar-challenge { border-color: rgba(255, 90, 99, .45); color: #ff9aa0; border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-btn.edit { border-color: rgba(245, 196, 81, .45); color: var(--f-gold); border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .ar-btn { border-radius: 9999px; }

/* ---------------------------------------------------------------- karta meczu na liście („bilet”) */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm {
  position: relative; overflow: hidden; border: 1px solid var(--f-line); border-radius: 18px;
  background: linear-gradient(180deg, #1e1f23, #18191c); box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm:hover { transform: translateY(-1px); border-color: var(--f-line2); background: linear-gradient(180deg, #25262a, #1c1d20); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm.has-bet { border-color: rgba(245, 196, 81, .28); box-shadow: inset 3px 0 0 var(--f-gold), 0 8px 22px rgba(0, 0, 0, .32); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-main { padding: 14px 16px 14px 0; grid-template-columns: 96px minmax(0, 1fr) auto; }
/* odcinek z terminem - przerywana linia jak w bilecie */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when {
  position: relative; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  margin: -14px 0; padding: 14px 6px; border: 0; border-right: 1px dashed rgba(255, 255, 255, .12); border-radius: 0; background: rgba(255, 255, 255, .02);
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::before, html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::after {
  content: ""; position: absolute; right: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--f-bg);
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::before { top: -7px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::after { bottom: -7px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when span { color: var(--f-mut); font-size: 11px; letter-spacing: .08em; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when b { color: #fff; font-size: 19px; line-height: 1.1; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when small { margin-top: 3px; padding: 2px 9px; border-radius: 9999px; background: var(--f-gold-soft); color: var(--f-gold); font-size: 12.5px; font-weight: 800; }
/* herby na krążkach */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-club img {
  width: 40px; height: 40px; padding: 5px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-name { font-size: 16.5px; letter-spacing: -.005em; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-vs { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; border-color: var(--f-line2); background: var(--f-s3); color: var(--f-mut); font-size: 10px; letter-spacing: .04em; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-actions { flex-direction: column; gap: 6px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-actions .bm-btn { min-width: 112px; justify-content: center; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-saved { color: var(--f-gold); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-prediction { border-color: rgba(245, 196, 81, .35); background: var(--f-gold-soft); border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.bm-lock, .bm-sc) { border-color: var(--f-line2); background: var(--f-s3); border-radius: 9999px; }
/* nagłówki dni / rozgrywek nad listą */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mb-gtitle { color: #c8d0dc; letter-spacing: .02em; }
@media (max-width: 640px) {
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-main { padding: 0 14px 14px; grid-template-columns: minmax(0, 1fr); }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when {
    flex-direction: row; justify-content: flex-start; gap: 8px; margin: 0 -14px; padding: 9px 14px; border-right: 0; border-bottom: 1px dashed rgba(255, 255, 255, .12);
  }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::before, html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::after { top: auto; bottom: -7px; right: auto; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::before { left: -7px; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when::after { right: -7px; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-when small { margin: 0 0 0 auto; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-actions { flex-direction: row; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm .bm-actions .bm-btn { min-width: 0; }
}

/* ---------------------------------------------------------------- karta typowania (rozwinięty mecz) */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .match.mcard { border: 1px solid var(--f-line2); border-radius: 22px; background: linear-gradient(180deg, #1e1f23, #17181b); box-shadow: 0 16px 40px rgba(0, 0, 0, .45); overflow: hidden; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-top { border-bottom: 1px solid var(--f-line); background: rgba(255, 255, 255, .02); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-top .cb { border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-deadline b { color: var(--f-gold); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-hero {
  background:
    radial-gradient(260px 160px at 22% 50%, rgba(229, 32, 45, .12), transparent 70%),
    radial-gradient(260px 160px at 78% 50%, rgba(255, 255, 255, .05), transparent 70%);
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-crest { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55)); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-name { color: #fff; font-family: var(--k-head); letter-spacing: -.005em; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-vs { color: var(--f-mut); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.match-odds, .match-h2h) { border-color: var(--f-line); border-radius: 14px; background: rgba(255, 255, 255, .02); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mcard-col { border-color: var(--f-line); border-radius: 18px; background: rgba(255, 255, 255, .02); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mcard-col-head { border-color: var(--f-line); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-head-icon { border-radius: 12px; background: var(--f-grad); color: #fff; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mc-head-badge { border-color: rgba(245, 196, 81, .35); background: var(--f-gold-soft); color: var(--f-gold); border-radius: 9999px; }
/* wynik: stepper i pola */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .numwrap input,
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .statbox input { border-color: var(--f-line2); border-radius: 12px; background: #141416; color: #fff; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .numwrap input:focus,
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .statbox input:focus { border-color: var(--f-acc); box-shadow: 0 0 0 3px rgba(229, 32, 45, .2); outline: none; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .numwrap .sb { border-color: var(--f-line2); border-radius: 10px; background: var(--f-s3); color: #fff; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .numwrap .sb:hover { background: #3a3b40; }
/* wybory (1X2, tak/nie, powyżej/poniżej) - segmenty */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .opts .opt { border-color: var(--f-line2); border-radius: 12px; background: rgba(255, 255, 255, .03); transition: background .12s, border-color .12s, color .12s, box-shadow .12s; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .opts .opt:hover { background: rgba(255, 255, 255, .07); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .opts .opt.sel { border-color: transparent; background: var(--f-grad); color: #fff; box-shadow: 0 6px 16px rgba(229, 32, 45, .28); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .mlabel .pts { border-radius: 9999px; background: var(--f-gold-soft); color: var(--f-gold); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .scorer-chip { border-radius: 9999px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .scorer-chip.sel { background: var(--f-grad); border-color: transparent; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bankerbtn { border-color: rgba(245, 196, 81, .5); border-radius: 14px; color: var(--f-gold); background: var(--f-gold-soft); }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .tp-save-area .submit { min-height: 48px; font-size: 15.5px; letter-spacing: .01em; }

/* ---------------------------------------------------------------- rankingi */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.rank-grid-row, .mrc-rank-row, .ar-rank-row) { border-color: var(--f-line); border-radius: 14px; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.rank-grid-row, .mrc-rank-row, .ar-rank-row):hover { background: rgba(255, 255, 255, .04); }
/* punkty i monety w rankingach - złote (coins.css wymusza kolor przez !important) */
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena, #view-coins, body) :is(.rk-total, .mrc-money-value b, .ar-rank-points b) { color: var(--f-gold) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.rk-podium-1, .ar-rank-row.p1) .rk-podium-badge { background: linear-gradient(135deg, #ffe08a, #d4a017); color: #3a2a00; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.rk-podium-2, .ar-rank-row.p2) .rk-podium-badge { background: linear-gradient(135deg, #f1f5f9, #94a3b8); color: #1e293b; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.rk-podium-3, .ar-rank-row.p3) .rk-podium-badge { background: linear-gradient(135deg, #f0b27a, #a0522d); color: #2b1408; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .rank-mode-btn.on { background: var(--f-grad) !important; color: #fff; border-color: transparent !important; }

/* ---------------------------------------------------------------- grafit z czerwienią (MR-20261021-TYPERRED)
   prośba właściciela z 21.10.2026: „zmień wygląd typera na ciemny szary z elementami czerwonego. coś jak strona
   betclic, ale zamiast jasnego stylu chcę ciemny szary”; paleta wyżej (zmienne --f-*): grafitowe tło i panele,
   czerwony akcent (przyciski, aktywne zakładki, wybory w typowaniu), złoto zostaje dla punktów i medali.
   Komputer: aktywna zakładka - czerwone podkreślenie bez tła, czerwona linia pod paskiem zakładek (jak belka Betclic). */
@media (min-width: 800px) {
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar { border-bottom: 2px solid #e5202d; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active { background: transparent; box-shadow: none; color: #fff; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active::after { display: block; height: 3px; border-radius: 3px 3px 0 0; background: #e5202d; }
  html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.active .tab-icon { color: #ff4b55; }
}
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm:hover { border-color: rgba(229, 32, 45, .35); }

/* ---------------------------------------------------------------- odchudzony ranking (MR-20261021-TYPERRED)
   prośba właściciela: „ranking też odchudzić, aby było mniej rang wyświetlanych… rangi niech będą widoczne tylko
   w profilach i inne pierdoły. zostaw tylko ramkę w koło avatara, tło też usuń” - w rankingach (punkty, Zarobasy, 1v1):
   bez rang, tytułów, ikon przy nicku i odznak, bez tła i paska wiersza (skórki), kolorowego nicku i efektów awatara;
   zostaje ramka wokół awatara, miejsce, punkty i forma. Profil gracza, karta gracza i sklep - bez zmian. */
/* coins.css (Kupon) maluje wiersze rankingu regułami z identyfikatorem i !important - tutaj dwa identyfikatory */
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rank-meta-line, .mrc-nick-badge, .mrc-nick-title, .ar-mini-badges, .tier-legend) { display: none !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rk-main, .rank-grid-row, .mrc-rank-row, .ar-rank-row) { background: transparent !important; box-shadow: none !important; border-left: 0 !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rk-main, .rank-grid-row, .mrc-rank-row, .ar-rank-row)::before,
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rk-main, .rank-grid-row, .mrc-rank-row, .ar-rank-row)::after { display: none !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rk-main, .rank-grid-row, .mrc-rank-row, .ar-rank-row):hover { background: rgba(255, 255, 255, .04) !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rk-main, .rank-grid-row, .mrc-rank-row, .ar-rank-row) { border-bottom: 1px solid var(--f-line) !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .mrc-nick { color: var(--f-txt) !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; animation: none !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .mrc-nick a { color: inherit !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .mrc-av { animation: none !important; filter: none !important; }

/* rozwinięty wiersz rankingu: bez złotego / srebrnego tła podium - grafit z czerwonym paskiem; wykres w czerwieni */
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .rk-detail { background: rgba(255, 255, 255, .025) !important; box-shadow: inset 3px 0 0 #e5202d !important; border-left: 0 !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .rk-detail::before,
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) .rk-detail::after { display: none !important; }
html.tp-fresh:not([data-mr-theme="light"]) svg.spark polyline:not([fill="none"]) { fill: rgba(229, 32, 45, .15) !important; }

/* niebieskie elementy wpisane na sztywno w innych arkuszach (karta gracza, Arena, przepustka, powiadomienia) - czerwień */
html.tp-fresh:not([data-mr-theme="light"]) .tp-profile-metrics-group.typer .tp-profile-metric { --metric: #e5202d !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-profile-metrics-group.typer .tp-profile-section-head h3 i { color: #ff4b55 !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(.tp-notify-btn:hover, .tp-notify-btn.has-new) { border-color: #e5202d !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(.tp-button.primary, .ar-btn.primary) { border-color: #e5202d !important; background: #e5202d !important; color: #fff !important; }
html.tp-fresh:not([data-mr-theme="light"]) .ar-btn.primary:hover { background: #c81a26 !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-segments > button.on { border-color: #e5202d !important; background: rgba(229, 32, 45, .14) !important; }
html.tp-fresh:not([data-mr-theme="light"]) .ar4-tab.active { border-bottom-color: #e5202d !important; }
html.tp-fresh:not([data-mr-theme="light"]) .ar4-tab.active i { color: #ff4b55 !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(.tp-eng-empty > i, .tp-pass-hero > div:first-child > span) { color: #ff4b55 !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-pass-level.unlocked { border-color: rgba(229, 32, 45, .5) !important; background: linear-gradient(180deg, rgba(229, 32, 45, .08), rgba(0, 0, 0, 0)), #1b1c1f !important; }
html.tp-fresh:not([data-mr-theme="light"]) .typed-match-toggle[aria-pressed="true"] { border-color: #e5202d !important; color: #ff9aa0 !important; background: rgba(229, 32, 45, .1) !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-crate-summary progress::-webkit-progress-value { background: #e5202d !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-crate-summary progress::-moz-progress-bar { background: #e5202d !important; }

/* Arena i odznaki: etykiety i ikony w kafelkach - czerwień i grafit zamiast błękitu; „Wyzwij” na liście meczów */
html.tp-fresh:not([data-mr-theme="light"]) .ar4-hero > div:first-child > span { color: #ff4b55 !important; }
html.tp-fresh:not([data-mr-theme="light"]) :is(.ar4-summary > div > i, .badge-overview > div > i) { border-color: rgba(229, 32, 45, .3) !important; background: rgba(229, 32, 45, .1) !important; color: #ff6b74 !important; }
html.tp-fresh:not([data-mr-theme="light"]) .ar4-guide > summary i { color: #ff6b74 !important; }
html.tp-fresh:not([data-mr-theme="light"]) .ar4-tag.mine { border-color: rgba(229, 32, 45, .45) !important; color: #ff9aa0 !important; background: rgba(229, 32, 45, .08) !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-mission-chip.goal { border-color: rgba(229, 32, 45, .4) !important; color: #ff9aa0 !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-btn.ar-challenge { border: 1px solid rgba(229, 32, 45, .45) !important; background: rgba(255, 255, 255, .04) !important; color: #ff9aa0 !important; box-shadow: none !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bm-btn.ar-challenge:hover { background: rgba(229, 32, 45, .12) !important; color: #fff !important; }

/* „Twoje typy” w profilu: nagłówki rozgrywek grafitowe zamiast czarnych */
html.tp-fresh:not([data-mr-theme="light"]) .mb-ghead { background: var(--f-s2) !important; border-color: var(--f-line) !important; }
html.tp-fresh:not([data-mr-theme="light"]) .mb-ghead:hover { background: var(--f-s3) !important; }

/* ---------------------------------------------------------------- poprawki grafitowego wyglądu (MR-20261021-TYPERRED2)
   prośby właściciela z 21.10.2026 (punkty 3-7): dolna belka (telefon) grafitowa zamiast granatowej, górna belka bez
   zaokrągleń u góry, tło pod „Zapisz typ”, jaśniejsze „Bonus meczu”, „Opcjonalne ryzyko” i „Pewniak”, terminarze
   i nagłówek tabeli rankingu bez czerni */
/* telefon: dolna belka zakładek (nav.tabs-wrap) - bez rozmycia tła (inaczej belka znika, typer-mobile-bar-fixed) */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .tabs-wrap { background: rgba(24, 24, 27, .97) !important; border-top-color: rgba(255, 255, 255, .08) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .game-sidebar .tab.tab-coins:not(.active) { background: transparent !important; }
/* górna belka (ikony, punkty, awatar) - bez zaokrągleń u góry */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .screen-head { border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; }
/* karta typowania: pasek „Zapisz typ” (przyklejony na dole) w kolorze karty, nie czarny */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .tp-save-area { background: linear-gradient(180deg, rgba(26, 27, 30, 0) 0, #1a1b1e 18px) !important; }
/* „Bonus meczu”, „Opcjonalne ryzyko” (czerwona kartka), „Pewniak” - grafit z kolorowym akcentem zamiast prawie czarnych */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bonusbox { background: linear-gradient(135deg, rgba(245, 196, 81, .16), rgba(245, 196, 81, .04) 60%), #26272b !important; border-color: rgba(245, 196, 81, .32) !important; border-left-color: #f5c451 !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .red-risk { background: linear-gradient(135deg, rgba(229, 32, 45, .2), rgba(229, 32, 45, .05) 60%), #26272b !important; border-color: rgba(229, 32, 45, .42) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bankerbtn { background: linear-gradient(135deg, rgba(245, 196, 81, .14), rgba(255, 255, 255, .02) 60%), #26272b !important; border-color: rgba(245, 196, 81, .42) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .bankerbtn-main i.fa-star { color: #f5c451 !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .tp-stat-heading b > i { color: #ff4b55 !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .tp-stat-heading > span { background: rgba(229, 32, 45, .14) !important; color: #ff9aa0 !important; border-color: rgba(229, 32, 45, .35) !important; }
/* terminarze (kolejki z wynikami i „Twój typ”), „Twoje typy” - grafit zamiast czerni */
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) :is(.fx, .fx-detail, .mb-item, .mb-rhead, .mb-gbody, .mb-rbody) { background: var(--f-s1) !important; border-color: var(--f-line) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .fx:hover { background: var(--f-s2) !important; }
html.tp-fresh.tp-fresh.tp-fresh:not([data-mr-theme="light"]) .roundhdr { background: var(--f-s2) !important; border-color: var(--f-line) !important; }
/* nagłówek tabeli rankingu (# Gracz Pkt) - jaśniejszy */
html.tp-fresh:not([data-mr-theme="light"]) :is(#view-ranking, #view-arena):is(#view-ranking, #view-arena) :is(.rank-grid-head, .mrc-rank-head, .ar-rank-head) { background: #2a2b30 !important; color: #c9ccd2 !important; border-color: var(--f-line) !important; }

/* karta gracza (engagement.js .tp-pc2) - czerwony akcent, grafitowe tło */
html.tp-fresh:not([data-mr-theme="light"]) .tp-pc2 { --pc-acc: #e5202d; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-pc2-top { background: radial-gradient(120% 110% at 0% 0%, color-mix(in srgb, var(--league-color) 18%, transparent), transparent 62%), linear-gradient(180deg, #232428, #1a1b1e) !important; }
html.tp-fresh:not([data-mr-theme="light"]) .tp-eng-dialog:has(.tp-pc2) { background: #1a1b1e; border-color: rgba(255, 255, 255, .1); }
html.tp-fresh:not([data-mr-theme="light"]) .tp-pc2 :is(.tp-profile-section, .tp-profile-metrics-group) { background: #212226 !important; border-color: rgba(255, 255, 255, .08) !important; }

/* ---------------------------------------------------------------- przełącznik wyglądu (typer-menu.js) */
.tp-look-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .13); border-radius: 9999px;
  background: rgba(255, 255, 255, .04); color: inherit; font: 700 12.5px/1 inherit; cursor: pointer; white-space: nowrap; }
.tp-look-btn:hover { background: rgba(255, 255, 255, .08); }
.tp-look-btn i { color: #f5c451; }
html[data-mr-theme="light"] .tp-look-btn { display: none; }
@media (max-width: 640px) { .tp-look-btn span { display: none; } .tp-look-btn { width: 34px; padding: 0; } }