/* /player-count — players online now, peaks, history and the estimate across
   platforms (js/player-count.js). Built on the site's panels, KPI strip and
   chart cards; this sheet adds the two hero cards, the platform split, the
   month table's bars and the method notes. */

.pcn-page { --pc: var(--acc); --ps: #3d8bff; --xb: #35c46a; display: grid; gap: 20px; }

/* Banner: the live pill on the right. */
.pcn-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pcn-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); font: 700 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.pcn-pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); animation: pulse-dot 2s ease-in-out infinite; }
.pcn-pill.is-stale { background: var(--s3); color: var(--ink-3); }
.pcn-pill.is-stale i { animation: none; }
.pcn-when { color: var(--ink-3); font-size: 13px; }
.pcn-when b { color: var(--ink-2); font-weight: 600; }

/* The two hero cards. */
.pcn-hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pcn-now, .pcn-est { position: relative; display: grid; align-content: start; gap: 10px; padding: 22px 24px; border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--line-2); }
.pcn-now { background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 60%), var(--s1); }
.pcn-est { background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--ps) 18%, transparent), transparent 60%), var(--s1); }
.pcn-k { display: flex; align-items: center; gap: 8px; font: 700 11.5px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.pcn-k .i { font-size: 16px; color: var(--ps); }
.pcn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 22%, transparent); animation: pulse-dot 2s ease-in-out infinite; }
.pcn-tag { margin-left: auto; padding: 4px 8px; border-radius: 6px; background: var(--s3); color: var(--ink-3); font: 700 10.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; }
.pcn-big { font: 900 clamp(52px, 7vw, 84px)/.95 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); }
.pcn-big.is-est { color: var(--ink-2); }
.pcn-tilde { margin-right: 4px; color: var(--ink-3); font-weight: 700; }
.pcn-sub { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--ink-3); font-size: 13.5px; }
.pcn-sub b { color: var(--ink); }
.pcn-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-radius: var(--r); background: #00000033; }
.pcn-mini > div { padding: 10px 14px; }
.pcn-mini > div + div { border-left: 1px solid var(--line); }
.pcn-mini dt { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pcn-mini dd { margin-top: 3px; font: 850 22px/1.1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; }

/* Platform split: one bar in three, then the legend. */
.pcn-split { display: flex; height: 12px; margin-top: 6px; border-radius: 999px; overflow: hidden; background: var(--s3); gap: 2px; }
.pcn-split i { width: var(--w); transform-origin: left; animation: pcn-grow .9s var(--ease, ease) both; }
.pcn-split i.is-pc { background: var(--pc); }
.pcn-split i.is-ps { background: var(--ps); animation-delay: .12s; }
.pcn-split i.is-xb { background: var(--xb); animation-delay: .24s; }
@keyframes pcn-grow { from { transform: scaleX(0); } to { transform: none; } }
.pcn-legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
.pcn-legend li { --c: var(--pc); display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--r); background: color-mix(in srgb, var(--c) 12%, transparent); }
.pcn-legend li.is-ps { --c: var(--ps); }
.pcn-legend li.is-xb { --c: var(--xb); }
.pcn-legend b { font: 850 20px/1.1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; color: var(--ink); }
.pcn-legend span { font-size: 12.5px; font-weight: 600; color: var(--c); }
.pcn-legend em { font-style: normal; font: 600 10px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

.pcn-kpis { margin: 0; }
.pcn-page .cc-delta { white-space: nowrap; }

/* Two cards side by side. */
.pcn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pcn-kpis .kpi-v .up { color: var(--up); }
.pcn-kpis .kpi-v .down { color: var(--down); }

/* Players per day and month, and the milestones. */
.pcn-rows { display: grid; }
.pcn-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 18px; }
.pcn-row + .pcn-row { border-top: 1px solid var(--line); }
.pcn-row-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); }
.pcn-row-ic .i { font-size: 20px; }
.pcn-row-t { display: grid; gap: 2px; min-width: 0; }
.pcn-row-t b { font-weight: 700; }
.pcn-row-t small, .pcn-row-v small { color: var(--ink-3); font-size: 12px; }
.pcn-row-v { display: grid; justify-items: end; gap: 2px; font: 850 24px/1.05 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcn-row-v small { font-family: var(--f-ui, inherit); font-stretch: 100%; font-weight: 600; }
.pcn-miles { padding: 14px 18px 18px; background: #ffffff04; border-top: 1px solid var(--line); }
.pcn-miles-h { margin-bottom: 10px; font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pcn-miles ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pcn-miles li { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; }
.pcn-mile-d { font: 600 12px/1.3 var(--f-mono); color: var(--ink-3); }
.pcn-mile-t { display: grid; gap: 2px; }
.pcn-mile-t b { font: 850 18px/1.1 var(--f-display); font-stretch: 72%; }
.pcn-mile-t small { color: var(--ink-3); font-size: 12.5px; }

/* Which kind each number is: Live (measured), Estimate, Record (fixed figures). */
.pcn-badge { display: inline-flex; align-items: center; height: 17px; padding: 0 6px; margin-left: 8px; border-radius: 5px; vertical-align: 1px;
  background: color-mix(in srgb, var(--ps) 16%, transparent); color: var(--ps); font: 700 9.5px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pcn-badge.is-measured { background: color-mix(in srgb, var(--up) 16%, transparent); color: var(--up); }
.pcn-badge.is-record { background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.pcn-k .pcn-badge { margin-left: auto; }
.panel-h > .pcn-badge { margin-left: auto; }
.kpi-l .pcn-badge { margin-left: auto; }
.pcn-mini dt { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; }
.pcn-mini dt .pcn-badge { margin-left: 6px; height: 15px; font-size: 8.5px; }
.pcn-mini small { display: block; margin-top: 2px; color: var(--ink-3); font-size: 11.5px; }
.pcn-dot.is-off { background: var(--ink-4); box-shadow: none; animation: none; }

/* When people play: four boxes and where this hour sits in the day. */
.pcn-boxes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pcn-box { display: flex; align-items: center; gap: 12px; padding: 16px 18px; }
.pcn-box:nth-child(even) { border-left: 1px solid var(--line); }
.pcn-box:nth-child(n+3) { border-top: 1px solid var(--line); }
.pcn-box-ic { display: grid; place-items: center; width: 38px; height: 38px; flex-shrink: 0; border-radius: 10px; background: color-mix(in srgb, var(--acc) 14%, transparent); color: var(--acc); }
.pcn-box-ic .i { font-size: 19px; }
.pcn-box-t { display: grid; gap: 2px; min-width: 0; }
.pcn-box-t small { font: 600 10.5px/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pcn-box-t b { font: 850 24px/1.1 var(--f-display); font-stretch: 72%; font-variant-numeric: tabular-nums; }
.pcn-box-t em { font-style: normal; color: var(--ink-3); font-size: 12px; }
.pcn-meter { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: #ffffff04; }
.pcn-meter-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.pcn-meter-h span { font: 700 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.pcn-meter-h b { font: 850 18px/1 var(--f-display); font-stretch: 72%; text-transform: uppercase; }
.pcn-meter-bar { position: relative; height: 10px; border-radius: 999px; background: linear-gradient(90deg, color-mix(in srgb, var(--ps) 45%, var(--s3)), color-mix(in srgb, var(--acc) 70%, var(--s3))); }
.pcn-meter-bar i { position: absolute; top: 50%; left: var(--p); width: 18px; height: 18px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; box-shadow: 0 0 0 4px #00000066, 0 0 16px color-mix(in srgb, var(--acc) 60%, transparent); animation: pcn-pop .6s var(--ease, ease) both .2s; }
@keyframes pcn-pop { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } }
.pcn-meter-s { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ink-3); font-size: 11.5px; }

/* Measured and estimated. */
.pcn-method-b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pcn-method-b > div { padding: 16px 18px 18px; }
.pcn-method-b > div + div { border-left: 1px solid var(--line); }
.pcn-method h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 14px/1.2 var(--f-display); font-stretch: 112%; letter-spacing: .04em; text-transform: uppercase; }
.pcn-method h4 .pcn-badge { margin-left: 0; }
.pcn-method ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pcn-method li { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.pcn-method li b { color: var(--ink); }

@media (max-width: 980px) {
  .pcn-hero, .pcn-grid { grid-template-columns: minmax(0, 1fr); }
  .pcn-method-b { grid-template-columns: minmax(0, 1fr); }
  .pcn-method-b > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .pcn-now, .pcn-est { padding: 18px 16px; }
  .pcn-legend { grid-template-columns: minmax(0, 1fr); }
  .pcn-legend li { grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 10px; }
  .pcn-mini dd { font-size: 19px; }
  .pcn-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; }
  .pcn-row-ic { width: 34px; height: 34px; }
  .pcn-row-v { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .pcn-pill i, .pcn-dot, .pcn-split i, .pcn-meter-bar i { animation: none; } }