/* Wykresy formy — wspólne tło i lżejsza hierarchia istniejących paneli. */
.player-page #tab-graphs.pg-module{
  isolation:isolate;overflow:hidden;
  border:1px solid #6c4054;border-radius:16px;
  background:
    linear-gradient(180deg,#080d1778,#080d178e 53%,#080d1792),
    url('assets/wykresy_formy_tlo_glowne_1920x1080.webp') center top/cover no-repeat,
    #080d17;
  box-shadow:inset 0 1px #ffffff12,0 22px 48px #0007;
}
.player-page #tab-graphs .pg-module-heading{
  align-items:flex-end;margin:0 0 18px;padding:0;border:0;
}
.player-page #tab-graphs .pg-display-title{
  margin:0;font-size:clamp(36px,4vw,57px);font-weight:950;
  font-style:italic;line-height:1.02;letter-spacing:-1.7px;
}
.player-page.has-player-selected #tab-graphs .pg-display-title em,
.player-page #tab-graphs .pg-display-title em{color:#ff4658}

/* Cztery równorzędne KPI; barwa wyniku pozostaje zależna od znaczenia zmiany. */
.player-page #tab-graphs .pg-graph-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.player-page #tab-graphs .pg-graph-kpi{
  display:grid;grid-template-columns:46px minmax(0,1fr) 62px 46px;
  align-items:center;column-gap:7px;min-height:91px;padding:12px 13px;
  border:1px solid color-mix(in srgb,var(--tone) 38%,#344253);
  border-radius:14px;
  background:
    radial-gradient(ellipse at 90% 120%,color-mix(in srgb,var(--tone) 19%,transparent),transparent 65%),
    linear-gradient(145deg,#17202bdc,#0a111cdf);
  box-shadow:inset 0 -2px color-mix(in srgb,var(--tone) 35%,transparent),0 10px 22px #0004;
}
.player-page #tab-graphs .pg-graph-kpi-icon{
  flex:0 0 46px;width:46px;height:46px;
  background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--tone) 24%,#10202b),#101924);
  box-shadow:inset 0 1px color-mix(in srgb,var(--tone) 21%,transparent),0 0 18px color-mix(in srgb,var(--tone) 15%,transparent);
}
.player-page #tab-graphs .pg-graph-kpi-icon svg{width:29px;height:29px}
.player-page #tab-graphs .pg-graph-kpi>div small{color:#e1e8f1;font-size:10px}
.player-page #tab-graphs .pg-graph-kpi>div strong{font-size:clamp(27px,2.4vw,35px);font-weight:950;letter-spacing:-.8px}
.player-page #tab-graphs .pg-graph-kpi-delta{align-self:center;font-size:13px;line-height:1.1}
.player-page #tab-graphs .pg-graph-kpi-delta small{font-size:8px;color:#bbc8d8}
.player-page #tab-graphs .pg-kpi-spark{width:46px;height:42px}

/* Przełączniki graczy używają kolorów z konfiguracji rosteru. */
.player-page #tab-graphs .graph-comparison{
  display:flex;align-items:center;gap:14px;margin:8px 0 13px;padding:0;
  background:none;border:0;box-shadow:none;
}
.player-page #tab-graphs .graph-comparison-players{
  display:flex;flex-wrap:wrap;gap:6px;overflow:visible;
}
.player-page #tab-graphs .graph-player-button{
  min-height:30px;padding:5px 10px;border:1px solid #aab7ca35;
  border-radius:8px;background:#111925cc;color:#c6d0df;font-size:10px;
  transition:background .16s,border-color .16s,box-shadow .16s;
}
.player-page #tab-graphs .graph-player-button::before{width:8px;height:8px;background:var(--graph-player-color)}
.player-page #tab-graphs .graph-player-button:hover{
  border-color:var(--graph-player-color);background:color-mix(in srgb,var(--graph-player-color) 12%,#111925);
}
.player-page #tab-graphs .graph-player-button.is-selected{
  border-color:var(--graph-player-color);background:color-mix(in srgb,var(--graph-player-color) 19%,#111925);
  box-shadow:inset 0 -2px var(--graph-player-color),0 0 12px color-mix(in srgb,var(--graph-player-color) 25%,transparent);
}

/* Główny wykres i trend mają jeden rytm siatki oraz równe wysokości. */
.player-page #tab-graphs .pg-form-dashboard{gap:14px}
.player-page #tab-graphs .pg-form-dashboard>.graph-card{
  position:relative;min-width:0;padding:16px;border:1px solid #a6bad02a;
  border-radius:14px;background:linear-gradient(150deg,#101925bc,#0a111bd1);
  box-shadow:inset 0 1px #ffffff0e,0 8px 23px #0003;
}
.player-page #tab-graphs .pg-form-dashboard>.graph-card::before{
  left:13px;right:58%;height:2px;background:linear-gradient(90deg,#ff4658b8,transparent);
}
.player-page #tab-graphs .pg-form-main,
.player-page #tab-graphs .pg-form-trend{height:374px;min-height:374px}
.player-page #tab-graphs .pg-form-main{grid-column:span 8}
.player-page #tab-graphs .pg-form-dashboard>.pg-form-trend{
  grid-column:span 4;
  background:
    linear-gradient(90deg,#080e18ec 0%,#080e18b8 55%,#080e1870 100%),
    url('assets/wykresy_formy_trend_formy_960x560.webp') right top/cover no-repeat,
    #0b111d;
}
.player-page #tab-graphs .pg-form-trend::after{content:none;display:none}
.player-page #tab-graphs .pg-form-trend .pg-mini-heading h4{
  font-size:15px;font-style:italic;font-weight:950;
}
.player-page #tab-graphs .pg-form-metric-switch{flex-wrap:wrap;overflow:visible;gap:6px;padding:0 0 7px}
.player-page #tab-graphs .pg-form-metric-switch button{
  min-height:31px;padding:6px 10px;border-color:#74829866;border-radius:8px;
  background:#101925cf;color:#d4deeb;font-size:10px;
}
.player-page #tab-graphs .pg-form-metric-switch button.is-active{
  border-color:#ff8a2a;background:linear-gradient(135deg,#f4762133,#44200fc9);
  box-shadow:inset 0 -2px #ff8a2a,0 0 12px #f4762140;
}
.player-page #tab-graphs .pg-form-metric-switch button.is-active small{color:#ffbd77}
.player-page #tab-graphs .pg-trend-value strong{font-size:clamp(39px,3.7vw,53px);font-style:italic}
.player-page #tab-graphs .pg-trend-main>small{font-size:11px;color:#d2dce9}
.player-page #tab-graphs .pg-trend-rows{gap:6px}
.player-page #tab-graphs .pg-trend-rows>div{
  min-height:0;padding:8px 10px;border:0;border-bottom:1px solid #c0ced32b;
  border-radius:8px;background:#101a27bf;box-shadow:inset 0 1px #ffffff0c;
}
.player-page #tab-graphs .pg-trend-rows>div:last-child{border-bottom:0}
.player-page #tab-graphs .pg-trend-rows p{font-size:12px}
.player-page #tab-graphs .pg-trend-rows>div>strong{font-size:17px}

/* Dolne grupy są lżejsze od dwóch głównych powierzchni. */
.player-page #tab-graphs .pg-form-dashboard>.pg-form-activity,
.player-page #tab-graphs .pg-form-dashboard>.pg-form-periods{height:255px;min-height:255px}
.player-page #tab-graphs .pg-form-dashboard>.pg-form-maps,
.player-page #tab-graphs .pg-form-dashboard>.pg-form-last{height:190px;min-height:190px}
.player-page #tab-graphs .pg-form-dashboard>.pg-form-activity,
.player-page #tab-graphs .pg-form-dashboard>.pg-form-periods,
.player-page #tab-graphs .pg-form-dashboard>.pg-form-maps,
.player-page #tab-graphs .pg-form-dashboard>.pg-form-last{
  border-color:#9badc524;background:linear-gradient(145deg,#101a25ad,#0a111bbe);
  box-shadow:inset 0 1px #ffffff09;
}
.player-page #tab-graphs .pg-form-dashboard .pg-data-heading h4,
.player-page #tab-graphs .pg-form-dashboard .pg-mini-heading h4{font-style:italic;font-weight:950}
.player-page #tab-graphs .pg-heatmap-months,.player-page #tab-graphs .pg-heatmap-row{gap:5px}
.player-page #tab-graphs .pg-heatmap-row>span{border-radius:5px}
.player-page #tab-graphs .pg-heat-legend{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:4px;padding-top:7px;border-top:1px solid #ffffff1b;
}
.player-page #tab-graphs .pg-heat-legend>span{
  display:inline-flex;align-items:center;gap:4px;min-width:0;white-space:nowrap;
}
.player-page #tab-graphs .pg-heat-legend i{flex:none;width:8px;height:8px}
.player-page #tab-graphs .pg-heat-legend b{font-size:10px}
.player-page #tab-graphs .pg-heat-legend small{font-size:8px}
.player-page #tab-graphs .pg-activity-copy strong{font-size:24px}
.player-page #tab-graphs .pg-period-bars{gap:5px}
.player-page #tab-graphs .pg-period-bars>span{width:min(36%,45px);border-radius:5px 5px 0 0}
.player-page #tab-graphs .pg-period-bars b{font-size:12px}
.player-page #tab-graphs .pg-period-group>strong{font-size:12px}
.player-page #tab-graphs .pg-map-form-item{
  border-color:#98aec133;border-radius:10px;background:linear-gradient(135deg,#162435bd,#101926cc);
}
.player-page #tab-graphs .pg-map-form-item img{border-radius:7px}
.player-page #tab-graphs .pg-map-form-item b{font-size:clamp(21px,2vw,29px)}
.player-page #tab-graphs .pg-last-bar i{width:84%;max-width:42px;border-radius:5px 5px 0 0}
.player-page #tab-graphs .pg-last-summary{border-color:#3fdd8a55;background:linear-gradient(145deg,#0c261e,#0d1925)}

@media(max-width:1200px){
  .player-page #tab-graphs .pg-graph-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:1050px){
  .player-page #tab-graphs .pg-form-main,.player-page #tab-graphs .pg-form-trend,
  .player-page #tab-graphs .pg-form-activity,.player-page #tab-graphs .pg-form-periods,
  .player-page #tab-graphs .pg-form-maps,.player-page #tab-graphs .pg-form-last{grid-column:1/-1}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-trend{grid-column:1/-1}
  .player-page #tab-graphs .pg-form-trend{min-height:315px;height:315px}
  .player-page #tab-graphs .pg-form-activity,.player-page #tab-graphs .pg-form-periods{min-height:260px;height:260px}
  .player-page #tab-graphs .pg-form-maps,.player-page #tab-graphs .pg-form-last{min-height:205px;height:205px}
}
@media(min-width:851px) and (max-width:1050px){
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-activity{height:auto;min-height:300px}
  .player-page #tab-graphs .pg-form-activity .pg-heatmap{align-content:start}
  .player-page #tab-graphs .pg-form-activity .pg-heatmap-row>span{aspect-ratio:1.8}
}
@media(max-width:850px){
  .player-page #tab-graphs .pg-module-heading{align-items:flex-start}
}
@media(max-width:600px){
  .player-page #tab-graphs.pg-module{
    background:
      linear-gradient(180deg,#080d177c,#080d178c 55%,#080d179e),
      url('assets/wykresy_formy_tlo_glowne_1920x1080.webp') 56% top/auto 100% no-repeat,
      #080d17;
  }
  .player-page #tab-graphs .pg-display-title{font-size:clamp(30px,8vw,43px)}
  .player-page #tab-graphs .pg-graph-kpis{grid-template-columns:1fr;gap:8px}
  .player-page #tab-graphs .pg-graph-kpi{grid-template-columns:45px minmax(0,1fr) auto 48px;min-height:77px;padding:9px 11px}
  .player-page #tab-graphs .pg-graph-kpi-icon{grid-column:auto;grid-row:auto;flex-basis:45px;width:45px;height:45px}
  .player-page #tab-graphs .pg-graph-kpi>div{grid-column:auto;grid-row:auto}
  .player-page #tab-graphs .pg-graph-kpi-delta{grid-column:auto;grid-row:auto;justify-self:end}
  .player-page #tab-graphs .pg-kpi-spark{grid-column:auto;grid-row:auto;width:48px;height:33px}
  .player-page #tab-graphs .graph-comparison{align-items:flex-start;flex-direction:column;gap:6px}
  .player-page #tab-graphs .graph-comparison-players{flex-wrap:wrap;overflow:visible}
  .player-page #tab-graphs .pg-form-main{height:330px;min-height:330px}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-trend{height:300px;min-height:300px;background-position:center,right top;background-size:auto,auto 100%}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-activity{height:auto;min-height:280px}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-periods{height:auto;min-height:250px}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-maps{height:auto;min-height:0}
  .player-page #tab-graphs .pg-form-dashboard>.pg-form-last{height:205px;min-height:205px}
  .player-page #tab-graphs .pg-form-metric-switch{flex-wrap:wrap;overflow:visible}
  .player-page #tab-graphs .pg-form-metric-switch button{min-height:28px;padding:5px 7px;font-size:9px}
  .player-page #tab-graphs .pg-heat-legend{flex-wrap:wrap;justify-content:flex-start;gap:5px 12px}
  .player-page #tab-graphs .pg-heatmap-months,.player-page #tab-graphs .pg-heatmap-row{gap:2px}
  .player-page #tab-graphs .pg-period-heading .pg-period-legend{justify-content:flex-start}
  .player-page #tab-graphs .pg-form-periods #graphPeriodCompare{margin-top:20px}
  .player-page #tab-graphs .pg-period-bars>span{width:min(43%,42px)}
}