/* Jucători: indexul (.pj) și fișa jucătorului (.pl). Folosește tokenii din site.css și blocurile tp-* din tips.css. */
.pl, .pj { display: grid; gap: 22px; min-width: 0; }
.pl > *, .pj > * { min-width: 0; }
.pl h1, .pl h2, .pl h3, .pj h1, .pj h2, .pj h3 { margin: 0; letter-spacing: -.01em; }

/* poza: 4:5, sau inițialele pe culoarea numelui */
.pl-ph { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 18px; background: #1B2C42; }
.pl-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-ph.is-none { display: grid; place-items: center; background: var(--c, #1B2C42); }
.pl-ph.is-none b { color: rgba(255, 255, 255, .92); font: 800 clamp(22px, 4vw, 44px) var(--f-num); letter-spacing: .02em; }
.pl-ph.is-sm { width: 44px; flex: 0 0 44px; border-radius: 10px; }
.pl-ph.is-sm.is-none b { font-size: 14px; }

/* antet */
.pl-hero {
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); grid-template-areas: "ph id" "ph kpi"; gap: 22px 30px;
  padding: 26px 28px; border-radius: 28px; color: #E6EDF3; overflow: hidden;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M400 0v400'/%3E%3Ccircle cx='400' cy='200' r='80'/%3E%3Cpath d='M0 100h110v200H0M800 100h-110v200h110'/%3E%3C/svg%3E") right center / auto 140% no-repeat;
}
.pl-hero.is-plain { grid-template-columns: 150px minmax(0, 1fr); }
.pl-photo { grid-area: ph; position: relative; align-self: start; }
.pl-photo .pl-ph { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.pl-no { position: absolute; left: 12px; top: 12px; min-width: 44px; height: 44px; padding: 0 8px; display: grid; place-items: center; border-radius: 12px; background: var(--lime); color: var(--navy); font: 800 22px/1 var(--f-num); }
.pl-credit { margin: 8px 2px 0; color: #6F8399; font-size: 11px; line-height: 1.35; }
.pl-credit a { color: inherit; }
.pl-credit a:hover { color: #C9D4DF; }
.pl-id { grid-area: id; min-width: 0; }
.pl-id .crumbs { margin-bottom: 14px; color: #8EA0B4; }
.pl-id .crumbs a { color: #C9D4DF; }
.pl-club { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; color: #C9D4DF; font-weight: 700; font-size: 14px; }
.pl-club a { color: #fff; }
.pl-club a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-club .crest.is-logo { background: #fff; }
.pl-dot::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 8px 3px 2px; border-radius: 50%; background: #5C7088; }
.pl-hero h1 { color: #fff; font: 800 clamp(34px, 4.6vw, 58px)/1 var(--f-num); letter-spacing: -.02em; }
.pl-pos { margin: 10px 0 0; color: var(--lime); font-weight: 700; font-size: 15px; }
.pl-deck { margin: 14px 0 0; max-width: 64ch; color: #B4C2CF; font-size: 15px; line-height: 1.55; }
.pl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px 22px; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pl-facts div { display: grid; gap: 1px; min-width: 0; }
.pl-facts dt { color: #8EA0B4; font-weight: 600; font-size: 12px; }
.pl-facts dd { margin: 0; color: #fff; font: 700 17px/1.25 var(--f-num); }
.pl-facts small { color: #8EA0B4; font-size: 12px; }
.pl-kpi { grid-area: kpi; align-self: end; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; margin: 0; border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, .1); }
.pl-kpi > div { display: grid; gap: 2px; padding: 14px 16px; background: #13233A; }
.pl-kpi dt { color: #8EA0B4; font-weight: 600; font-size: 12px; }
.pl-kpi dd { margin: 0; color: #fff; font: 800 30px/1.1 var(--f-num); }
.pl-kpi small { color: #9DAEC0; font-weight: 600; font-size: 12px; }
.pl-kpi .is-main { background: var(--lime); }
.pl-kpi .is-main dt, .pl-kpi .is-main small { color: #3C4A2A; }
.pl-kpi .is-main dd { color: var(--navy); }

/* coloane */
.pl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.pl-main, .pl-side { display: grid; gap: 18px; min-width: 0; }

/* forma */
.pl-chart-w { margin: 2px -4px 0; }
.pl-chart { display: block; width: 100%; height: auto; overflow: visible; }
.pl-chart .g { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.pl-chart .base { stroke: var(--line-2); stroke-width: 1.5; }
.pl-chart .gl { fill: var(--mute); font: 600 10px var(--f-ui); }
.pl-chart .b.is-w { fill: #22B84A; }
.pl-chart .b.is-d { fill: #A9B6C3; }
.pl-chart .b.is-l { fill: #E2574C; }
.pl-chart .v { fill: var(--ink); font: 800 13px var(--f-num); text-anchor: middle; }
.pl-chart .d { fill: var(--ink-2); font: 700 11px var(--f-num); text-anchor: middle; }
.pl-chart .o { fill: var(--mute); font: 500 10px var(--f-ui); text-anchor: middle; }
.pl-chart .na { fill: var(--mute); font: 600 10px var(--f-ui); text-anchor: middle; }
.pl-legend { display: flex; gap: 14px; color: var(--mute); font-size: 12px; font-weight: 600; }
.pl-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; vertical-align: -1px; }
.pl-legend .is-w::before { background: #22B84A; }
.pl-legend .is-d::before { background: #A9B6C3; }
.pl-legend .is-l::before { background: #E2574C; }
.pl-games { display: grid; margin-top: 4px; }
.pl-game { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 46px; gap: 12px; align-items: center; padding: 10px 2px; border-top: 1px solid var(--line); }
.pl-res { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--soft); color: var(--mute); font: 800 13px var(--f-num); }
.pl-game.is-w .pl-res { background: #DDF3E2; color: #146C35; }
.pl-game.is-l .pl-res { background: #FBE3DF; color: #A8261A; }
.pl-g-m { min-width: 0; }
.pl-g-m b { display: block; color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-g-m b i { font-style: normal; margin: 0 4px; color: var(--ink); font: 800 14px var(--f-num); }
.pl-g-m .is-his { color: var(--ink); font-weight: 800; }
.pl-g-m small { display: block; color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-g-min { display: grid; text-align: right; color: var(--ink-2); font-weight: 600; font-size: 13px; white-space: nowrap; }
.pl-g-min small { color: var(--mute); font-size: 12px; font-weight: 500; }
.pl-rt { display: grid; place-items: center; height: 30px; border-radius: 9px; background: var(--soft); color: var(--ink); font: 800 14px var(--f-num); }
.pl-rt.is-hi { background: #22B84A; color: #fff; }
.pl-rt.is-lo { background: #FBE3DF; color: #A8261A; }
.pl-rt.is-none { color: var(--mute); }

/* cariera */
.pl-car { display: grid; margin: 0; padding: 0; list-style: none; }
.pl-car li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 150px 74px; gap: 12px; align-items: center; padding: 10px 10px; border-top: 1px solid var(--line); }
.pl-car li:first-child { border-top: 0; }
.pl-car li.is-now { border-radius: 14px; background: var(--lime-soft); border-top-color: transparent; }
.pl-car li.is-now + li { border-top-color: transparent; }
.pl-car-y { color: var(--mute); font: 700 13px var(--f-num); white-space: nowrap; }
.pl-car-t { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-car-t b { min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-car-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pl-car-t em { flex: 0 0 auto; padding: 1px 8px; border-radius: 7px; background: var(--navy); color: var(--lime); font: 800 11px/18px var(--f-num); font-style: normal; }
.pl-car-n { position: relative; display: block; padding-bottom: 7px; color: var(--mute); font-size: 12px; }
.pl-car-n b, .pl-car-g b { color: var(--ink); font: 800 15px var(--f-num); }
.pl-car-n i { position: absolute; left: 0; bottom: 0; height: 4px; border-radius: 2px; background: var(--green); }
.pl-car-n.is-none { padding: 0; }
.pl-car-g { color: var(--mute); font-size: 12px; text-align: right; white-space: nowrap; }
.pl-nat { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.pl-nat p { display: flex; align-items: center; gap: 10px; margin: 0; flex-wrap: wrap; }
.pl-nat p > span:not(.crest) { flex: 1; min-width: 160px; color: var(--ink-2); }
.pl-nat p > span b { color: var(--ink); }
.pl-nat strong { font: 800 18px var(--f-num); }
.pl-nat strong small { margin-right: 6px; color: var(--mute); font: 600 12px var(--f-ui); }
.pl-nat .pl-youth { display: block; color: var(--mute); font-size: 13px; line-height: 1.5; }

/* biografie */
.pl-bio p { margin: 0; max-width: 72ch; color: var(--ink-2); font-size: 15px; line-height: 1.65; }

/* știri */
.pl-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pl-new { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 18px; background: var(--panel); box-shadow: var(--sh); }
.pl-new img { flex: 0 0 auto; width: 112px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--soft); }
.pl-new span { display: grid; gap: 3px; min-width: 0; }
.pl-new small { color: var(--mute); font-size: 12px; font-weight: 600; }
.pl-new b { font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pl-new:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* în meciurile noastre */
.pl-ours { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-ours span { display: grid; min-width: 92px; padding: 10px 14px; border-radius: 14px; background: var(--soft); }
.pl-ours b { font: 800 20px var(--f-num); }
.pl-ours small { color: var(--mute); font-size: 12px; font-weight: 600; }
.pl-team { display: grid; grid-template-columns: 24px minmax(0, 1fr) 70px 70px 120px; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line); }
.pl-team b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-team span { font: 800 14px var(--f-num); text-align: right; }
.pl-team span small, .pl-team-d { color: var(--mute); font: 500 12px var(--f-ui); }
.pl-team-d { text-align: right; }

/* coloana din dreapta */
.pl-next-m { display: grid; gap: 10px; padding: 12px 0 2px; border-top: 1px solid var(--line); }
.pl-next .tp-head + .pl-next-m { border-top: 0; padding-top: 0; }
.pl-next-m > small { color: var(--mute); font-weight: 600; font-size: 12px; }
.pl-next-t { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.pl-next-t > span { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.pl-next-t b { font-weight: 700; font-size: 13px; line-height: 1.25; }
.pl-next-t i { color: var(--mute); font-style: normal; font-weight: 800; }
.pl-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pl-odds span { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--soft); font: 800 14px var(--f-num); }
.pl-odds small { color: var(--mute); font: 700 12px var(--f-ui); }
.pl-go { display: inline-flex; align-items: center; gap: 4px; color: var(--green-3); font-weight: 700; font-size: 13px; }
.pl-go svg { width: 14px; height: 14px; }
.pl-next-m:hover .pl-go { text-decoration: underline; text-underline-offset: 3px; }
.pl-buzz-n { margin: 0; color: var(--ink-2); font-size: 13px; }
.pl-buzz-n b { display: block; color: var(--ink); font: 800 30px/1.1 var(--f-num); }
.pl-buzz-n em, .pj-pct { display: inline-block; padding: 1px 7px; border-radius: 7px; font: 800 12px/18px var(--f-num); font-style: normal; }
.is-up { background: #DDF3E2; color: #146C35; }
.is-down { background: #FBE3DF; color: #A8261A; }
.pl-spark { display: block; width: 100%; height: 70px; }
.pl-spark polyline { fill: none; stroke: var(--green-2); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pl-spark polygon { fill: var(--lime-soft); }
.pl-soc { display: grid; gap: 6px; }
.pl-soc-r { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 14px; }
.pl-soc-r:hover { background: var(--soft); }
.pl-soc-i { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--navy); color: #fff; font: 800 13px var(--f-num); }
.pl-soc-r.is-instagram .pl-soc-i { background: #D62976; }
.pl-soc-r.is-youtube .pl-soc-i { background: #E62117; }
.pl-soc-r.is-facebook .pl-soc-i { background: #1877F2; font-size: 18px; }
.pl-soc-r span:not(.pl-soc-i) { display: grid; min-width: 0; }
.pl-soc-r span b { font-weight: 700; }
.pl-soc-r span small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-soc-r strong { display: grid; text-align: right; font: 800 16px var(--f-num); }
.pl-soc-r strong small { color: var(--mute); font: 500 11px var(--f-ui); }
.pl-aw { display: grid; margin: 0; padding: 0; list-style: none; }
.pl-aw li { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.pl-aw li:first-child { border-top: 0; }
.pl-aw li span { display: grid; min-width: 0; font-weight: 600; line-height: 1.3; }
.pl-aw li small { color: var(--mute); font: 600 12px var(--f-num); }
.pl-aw li b { flex: 0 0 auto; padding: 2px 8px; border-radius: 8px; background: var(--lime-soft); color: var(--green-3); font: 800 13px var(--f-num); }
.pl-more summary { padding: 8px 0 0; color: var(--green-3); font-weight: 700; font-size: 13px; cursor: pointer; }
.pl-more .pl-aw li:first-child { border-top: 1px solid var(--line); }
.pl-mini { display: grid; gap: 4px; }
.pl-mini a { display: flex; align-items: center; gap: 12px; padding: 6px; margin: 0 -6px; border-radius: 14px; }
.pl-mini a:hover { background: var(--soft); }
.pl-mini a > span:not(.pl-ph) { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pj-avg { margin-left: auto; font: 800 20px var(--f-num); }
.pl-mini b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-mini small { color: var(--mute); font-size: 12px; }

/* ===== indexul /jucatori ===== */
.pj-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 26px; align-items: end; padding: 26px 28px; border-radius: 28px; color: #E6EDF3;
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 400' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'%3E%3Cpath d='M400 0v400'/%3E%3Ccircle cx='400' cy='200' r='80'/%3E%3Cpath d='M0 100h110v200H0M800 100h-110v200h110'/%3E%3C/svg%3E") right center / auto 140% no-repeat;
}
.pj-hero .crumbs { margin-bottom: 10px; color: #8EA0B4; }
.pj-hero .crumbs a { color: #C9D4DF; }
.pj-hero h1 { color: #fff; font: 800 clamp(32px, 4vw, 48px)/1.02 var(--f-num); }
.pj-hero .deck { margin: 12px 0 0; max-width: 60ch; color: #B4C2CF; font-size: 15px; line-height: 1.55; }
.pj-find { display: flex; gap: 8px; margin-top: 18px; max-width: 520px; }
.pj-find input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: 600 15px var(--f-ui); }
.pj-find input:focus { outline: 3px solid var(--lime); outline-offset: 1px; }
.pj-find button { height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--lime); color: var(--navy); font: 800 14px var(--f-ui); cursor: pointer; }
.pj-faces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pj-faces a { position: relative; display: block; }
.pj-faces .pl-ph { border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); }
.pj-faces b { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 7px; border-radius: 8px; background: rgba(14, 26, 43, .86); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-faces a:hover b { background: var(--lime); color: var(--navy); }

.pj-az { display: flex; flex-wrap: wrap; gap: 4px; }
.pj-az a { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 8px; border-radius: 10px; background: var(--panel); box-shadow: var(--sh); font: 800 14px var(--f-num); }
.pj-az a:hover { background: var(--navy); color: #fff; }
.pj-az a.is-on { background: var(--navy); color: var(--lime); }

/* în trend */
.pj-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.pj-tc { display: grid; gap: 8px; padding: 10px; border-radius: 20px; background: var(--panel); box-shadow: var(--sh); }
.pj-tc .pl-ph { border-radius: 14px; }
.pj-tc-n { display: grid; gap: 1px; padding: 0 2px; min-width: 0; }
.pj-tc-n b { font: 800 15px/1.2 var(--f-num); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-tc-n small { display: flex; align-items: center; gap: 6px; color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; }
.pj-tc-v { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px; }
.pj-tc-v span { color: var(--ink-2); font: 700 12px var(--f-num); }
.pj-tc .pl-spark { height: 34px; }
.pj-tc:hover .pj-tc-n b { text-decoration: underline; text-underline-offset: 3px; }
.pj-pct { flex: 0 0 auto; }

/* cei mai căutați: clasament cu bare */
.pj-rank { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.pj-rank li { border-top: 1px solid var(--line); }
.pj-rank li:first-child { border-top: 0; }
.pj-rank a { display: grid; grid-template-columns: 22px 44px minmax(0, 1fr) minmax(90px, 34%) 64px; gap: 12px; align-items: center; padding: 8px 2px; }
.pj-rank a::before { counter-increment: r; content: counter(r); color: var(--mute); font: 800 14px var(--f-num); text-align: right; }
.pj-rank a > span:not(.pl-ph) { display: grid; min-width: 0; }
.pj-rank b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-rank small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.pj-bar i { display: block; height: 100%; border-radius: 4px; background: var(--green); }
.pj-rank strong { text-align: right; font: 800 14px var(--f-num); }
.pj-rank a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* cartonașele vedetelor */
.pj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pj-card { display: grid; gap: 8px; padding: 8px 8px 12px; border-radius: 20px; background: var(--panel); box-shadow: var(--sh); height: 100%; }
.pj-card .pl-ph { border-radius: 14px; }
.pj-card-n { display: grid; gap: 2px; padding: 0 4px; min-width: 0; }
.pj-card-n b { font: 800 15px/1.2 var(--f-num); }
.pj-card-n small { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--ink-2); font-size: 12px; font-weight: 600; }
.pj-card-n small span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-card-n em { color: var(--mute); font-size: 12px; font-style: normal; }
.pj-card:hover .pj-card-n b { text-decoration: underline; text-underline-offset: 3px; }

/* în formă */
.pj-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pj-fc { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 18px; background: var(--panel); box-shadow: var(--sh); }
.pj-fc > span:not(.pl-ph) { display: grid; gap: 4px; min-width: 0; }
.pj-fc b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-dots { display: flex; gap: 3px; }
.pj-dots i { width: 18px; height: 6px; border-radius: 3px; background: #A9B6C3; }
.pj-dots i.is-w { background: #22B84A; }
.pj-dots i.is-l { background: #E2574C; }
.pj-fc strong { display: grid; text-align: right; font: 800 22px/1 var(--f-num); }
.pj-fc strong small { color: var(--mute); font: 600 11px var(--f-ui); }

/* listele pe litere */
.pj-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pj-li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--panel); box-shadow: var(--sh); min-width: 0; }
.pj-li span { display: grid; min-width: 0; }
.pj-li b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-li small { color: var(--mute); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pj-li:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pj-pages { display: flex; gap: 8px; }

/* dark mode */
html[data-theme="dark"] .pl-hero, html[data-theme="dark"] .pj-hero { background-color: #0C1622; box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="dark"] .pl-game.is-w .pl-res, html[data-theme="dark"] .is-up { background: #183A23; color: #7EDB8E; }
html[data-theme="dark"] .pl-game.is-l .pl-res, html[data-theme="dark"] .pl-rt.is-lo, html[data-theme="dark"] .is-down { background: #3E1C18; color: #FF8D80; }
html[data-theme="dark"] .pl-car-t em { background: var(--lime); color: var(--navy); }
html[data-theme="dark"] .pl-soc-i { background: #2B3B33; }
html[data-theme="dark"] .pj-az a:hover, html[data-theme="dark"] .pj-az a.is-on { background: var(--lime); color: var(--navy); }
html[data-theme="dark"] .pl-chart .b.is-d, html[data-theme="dark"] .pl-legend .is-d::before, html[data-theme="dark"] .pj-dots i { background: #5E6E66; fill: #5E6E66; }
html[data-theme="dark"] .pj-dots i.is-w { background: #22B84A; }
html[data-theme="dark"] .pj-dots i.is-l { background: #E2574C; }
html[data-theme="dark"] .pl-car li.is-now { background: #1F2D1A; }

@media (max-width: 1100px) {
  .pl-cols, .pj-hero { grid-template-columns: minmax(0, 1fr); }
  .pl-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
}
@media (max-width: 720px) {
  .pl, .pj { gap: 16px; }
  .pl-hero { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "ph id" "kpi kpi"; gap: 16px; padding: 18px 16px; border-radius: 22px; }
  .pl-hero.is-plain { grid-template-columns: 84px minmax(0, 1fr); }
  .pl-id .crumbs { margin-bottom: 8px; }
  .pl-no { left: 6px; top: 6px; min-width: 30px; height: 30px; border-radius: 9px; font-size: 15px; }
  .pl-credit { font-size: 10px; }
  .pl-ph { border-radius: 14px; }
  .pl-hero h1 { font-size: 30px; }
  .pl-deck { display: none; }
  .pl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; padding-top: 12px; }
  .pl-facts dd { font-size: 15px; }
  .pl-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-kpi dd { font-size: 24px; }
  .pl-game { grid-template-columns: 26px minmax(0, 1fr) 42px; }
  .pl-g-min { display: none; }
  .pl-car li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 6px; }
  .pl-car-y { grid-column: 1 / -1; }
  .pl-car-n { text-align: left; }
  .pl-car-g { grid-column: 2; grid-row: 2; }
  .pl-car-t { grid-column: 1; }
  .pl-car-n { grid-column: 1 / -1; }
  .pl-news { grid-template-columns: minmax(0, 1fr); }
  .pl-team { grid-template-columns: 24px minmax(0, 1fr) 56px 64px; }
  .pl-team-d { display: none; }
  .pj-hero { padding: 20px 16px; border-radius: 22px; gap: 18px; }
  .pj-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pj-faces b { display: none; }
  .pj-trend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pj-rank a { grid-template-columns: 18px 40px minmax(0, 1fr) 58px; }
  .pj-bar { display: none; }
}