/*
 * Full Rankings page -- CLAUDE-CODE-PROMPT-Rankings.md's 2-level category
 * picker + TOP10/11-20/21+ layout. Structure (grids, paddings, breakpoints,
 * font sizes, border-radii) follows that doc's own numbers exactly; colors
 * and fonts are mapped onto this theme's own existing tokens instead of
 * the doc's own standalone Barlow/Barlow Condensed + palette, for visual
 * consistency with the rest of the site -- confirmed with the user before
 * building (full-rankings.php's own docblock has the other 3 confirmed
 * decisions: no movement arrows yet, plain-navigation category switching,
 * existing emoji flags instead of a 3-letter code placeholder).
 *
 * Font mapping follows this theme's own established "value = heading font
 * (Oswald), label/body = body font (IBM Plex Sans)" convention (already
 * used on the player profile's ranking-stats panel) rather than the doc's
 * one Barlow family for literally everything -- every "Barlow Condensed"
 * size below is var(--pc-font-heading), every plain "Barlow" is
 * var(--pc-font-body).
 *
 * Color mapping (checked against tokens.css, reused where close, kept
 * literal only for the couple of one-off admin-notice colors that already
 * existed on this page before this redesign):
 *   #e3e8ea page background      -> var(--pc-band-bg)          (#dfe4e7, ~identical)
 *   #0a2e3a base text            -> var(--pc-light-text)       (#0a2e3a, exact)
 *   #ffffff cards                -> var(--pc-light-surface)
 *   #dde3e5 / #d3dbde / #eaeff0  -> var(--pc-light-border)     (collapsed to one tier)
 *   #eef2f3 chip fill            -> var(--pc-light-bg)
 *   #4a626b / #6d838b / #78909a /
 *   #425c66 / #5d757e / #8a9ba1  -> var(--pc-light-text-muted) (collapsed to one tier)
 *   #ff4040 / #e02b2b brand red  -> var(--pc-red) / var(--pc-red-hover)
 *   rgba(10,46,58,x) shadows/overlay -> kept literal -- already var(--pc-dark-bg)'s own rgb
 */

.pc-rankings-section {
	background: var(--pc-band-bg);
}

/* ------------------------------------------------------- Legacy import */

/* System Admin only, and deliberately plainer than the public page around
   it -- this is a data-repair tool, not part of what a visitor reads.
   Carries the 32px top margin that used to sit on the "Update rankings"
   block above it, now that this is the first thing under the notice. */
.pc-rankings-import {
	margin-top: 32px;
	margin-bottom: var(--pc-space-md);
	padding: 16px 18px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 5px;
	font-family: var(--pc-font-body);
	font-size: 14px;
	color: var(--pc-light-text);
}

.pc-rankings-import-title {
	font-family: var(--pc-font-heading);
	font-size: 20px;
	margin: 0 0 12px;
}

.pc-rankings-import-form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.pc-rankings-import-label,
.pc-rankings-import-field label {
	font-weight: 600;
}

.pc-rankings-import-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
}

.pc-rankings-import-field input[type="text"] {
	font-family: var(--pc-font-body);
	font-size: 14px;
	padding: 7px 10px;
	border: 1px solid var(--pc-light-border);
	border-radius: 4px;
	max-width: 160px;
}

.pc-rankings-import-hint {
	font-size: 12px;
	color: var(--pc-light-text-muted);
}

.pc-rankings-import-summary {
	margin: 0;
	font-weight: 600;
}

/* An overwrite is destructive and irreversible, so it gets the red frame
   rather than sitting inline with the rest of the form. */
.pc-rankings-import-conflict {
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--pc-red);
	border-radius: 4px;
	background: rgba(255, 64, 64, 0.06);
}

.pc-rankings-import-details {
	width: 100%;
}

.pc-rankings-import-details summary {
	cursor: pointer;
	font-weight: 600;
	padding: 4px 0;
}

.pc-rankings-import-table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 8px;
	font-size: 13px;
}

.pc-rankings-import-table th,
.pc-rankings-import-table td {
	text-align: left;
	padding: 5px 8px;
	border-bottom: 1px solid var(--pc-light-border);
}

.pc-rankings-import-table th:last-child,
.pc-rankings-import-table td:last-child {
	text-align: right;
}

.pc-rankings-import-unmapped {
	font-size: 13px;
	color: var(--pc-light-text-muted);
}

.pc-rankings-import-unmapped ul {
	margin: 4px 0 0;
	padding-left: 18px;
}

.pc-rankings-import-cancel {
	margin-left: 12px;
	color: var(--pc-light-text-muted);
}

/* ----------------------------------------------------------- Ranking week */

/* Sits above the picker, right-aligned so it reads as a qualifier on the
   whole table rather than another category control. Wraps to the left on
   narrow screens instead of squeezing the select. */
.pc-rankings-week {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--pc-space-md);
	font-family: var(--pc-font-body);
}

.pc-rankings-week-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

.pc-rankings-week-select {
	font-family: var(--pc-font-body);
	font-size: 14px;
	color: var(--pc-light-text);
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 4px;
	padding: 7px 10px;
	min-width: 120px;
}

.pc-rankings-week-go {
	font-family: var(--pc-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--pc-light-text);
	background: var(--pc-light-bg);
	border: 1px solid var(--pc-light-border);
	border-radius: 4px;
	padding: 8px 14px;
	cursor: pointer;
}

.pc-rankings-week-go:hover {
	border-color: var(--pc-red);
	color: var(--pc-red);
}

/* Reads as a quieter qualifier on the H1, not a second heading. */
.pc-rankings-heading-week {
	font-weight: 400;
	opacity: 0.7;
}

.pc-notice {
	padding: 10px 14px;
	border-radius: 4px;
	margin-bottom: var(--pc-space-md);
	font-family: var(--pc-font-body);
}

.pc-notice-success {
	background: #eaf6ec;
	color: #1e4620;
	border: 1px solid #c3e6cb;
}

.pc-notice-error {
	background: #fdecea;
	color: #611a15;
	border: 1px solid #f5c6cb;
}

/* --------------------------------------------------- Desktop/mobile split */
/* Two parallel structures (not one reflowing one) -- the doc's own
   "3. DESKTOP" / "4. MOBIL" sections are different enough (a bottom sheet
   with no desktop equivalent, different grid column counts/orders, a
   different results-heading string) that trying to share one DOM tree
   between them would need more conditional CSS trickery than it's worth.
   Only one is ever visible at a time via this single 900px breakpoint --
   the same one this theme's own tabs/panels elsewhere already use. */
.pc-rankings-mobile {
	display: none;
}

@media (max-width: 899px) {
	.pc-rankings-desktop {
		display: none;
	}

	.pc-rankings-mobile {
		display: block;
	}
}

/* ================================================================ DESKTOP */

/* -------------------------------------------------------------- 3.1 Picker */

.pc-rankings-picker {
	margin-top: 32px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 10px;
	padding: 18px 20px;
}

.pc-rankings-group-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.pc-rankings-group-btn {
	font-family: var(--pc-font-heading);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 9px 20px;
	border-radius: 5px;
	background: var(--pc-light-bg);
	color: var(--pc-light-text-muted);
	text-decoration: none;
	transition: filter 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.pc-rankings-group-btn.is-active {
	background: var(--pc-red);
	color: #fff;
}

.pc-rankings-group-btn:not(.is-active):hover,
.pc-rankings-group-btn:not(.is-active):focus-visible {
	filter: brightness(1.14);
}

.pc-rankings-picker-divider {
	height: 1px;
	background: var(--pc-light-border);
	margin-bottom: 16px;
}

.pc-rankings-category-row {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

/* Same border-radius as the group buttons above -- deliberately "no
   pills", per the doc's own note. */
.pc-rankings-chip {
	font-family: var(--pc-font-body);
	font-size: 13px;
	font-weight: 600;
	padding: 8px 15px;
	border-radius: 5px;
	background: var(--pc-light-bg);
	color: var(--pc-light-text-muted);
	text-decoration: none;
	transition: filter 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.pc-rankings-chip.is-active {
	background: var(--pc-light-text);
	color: #fff;
}

.pc-rankings-chip:not(.is-active):hover,
.pc-rankings-chip:not(.is-active):focus-visible {
	filter: brightness(1.18);
}

/* ------------------------------------------------------ 3.2 Results header */

.pc-rankings-results-header {
	margin-top: 36px;
	margin-bottom: 18px;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
}

.pc-rankings-results-title {
	font-family: var(--pc-font-heading);
	font-size: 34px;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
	margin: 0;
	color: var(--pc-light-text);
}

.pc-rankings-updated {
	display: flex;
	align-items: baseline;
	gap: 10px;
	white-space: nowrap;
}

.pc-rankings-updated-label {
	font-family: var(--pc-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

.pc-rankings-updated-date {
	font-family: var(--pc-font-heading);
	font-size: 24px;
	font-weight: 600;
	color: var(--pc-light-text);
}

/* -------------------------------------------------- 3.3 TOP 10, 2 columns */

.pc-rankings-top10 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column; /* 1-5 left column, 6-10 right column */
	gap: 14px 24px;
}

.pc-rankings-card-top10 {
	display: grid;
	/* The movement slot is the second column. It holds ~34px of arrow + count,
	   so 44px is enough; it was 52px, and the extra was dead space sitting
	   between the rank number and the arrow.
	   Column gap 8px rather than 14px: the arrow, flag and name were asked to
	   sit closer to the rank number, and the rank number itself was asked to
	   stay exactly where it is -- so the space between the columns comes down
	   instead of the number moving. Measured on the live page, that takes the
	   number-to-arrow distance from 44.5px to 29.4px on a single digit, and
	   from 33.8px to 18.9px on "10". */
	grid-template-columns: 64px 44px 52px 1fr auto;
	column-gap: 8px;
	align-items: center;
	background: var(--pc-light-surface);
	border-left: 3px solid var(--pc-red);
	border-radius: 6px;
	padding: 12px 18px 12px 15px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pc-rankings-card-top10--linked {
	cursor: pointer;
}

.pc-rankings-card-top10--linked:hover,
.pc-rankings-card-top10--linked:focus-visible {
	box-shadow: 0 4px 14px rgba(10, 46, 58, 0.14);
	transform: translateX(3px);
}

/* Stays centred in its 64px cell. The rank number's position is fixed on
   purpose -- everything to its right was moved closer to it instead, in
   .pc-rankings-card-top10 above. */
.pc-rankings-card-top10-rank {
	font-family: var(--pc-font-heading);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--pc-light-text);
}

/* The ▲/▼ movement indicator this slot was always reserved for. Still
   renders as an empty box of the same width when there is no previous
   snapshot to compare against, so a category with only one week of history
   keeps exactly the layout it had before. */
.pc-rankings-card-top10-move {
	width: 52px; /* was 26px -- doubled with the indicator it holds, see below. */
}

.pc-rankings-card-top10-move,
.pc-rankings-card-1120-move,
.pc-rankings-card-top10-m-move,
.pc-rankings-card-1120-m-move,
.pc-rankings-overflow-move,
.pc-rankings-overflow-m-move {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	font-family: var(--pc-font-body);
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
}

/* Green up / red down carry the meaning, but never alone: every indicator
   also ships an arrow glyph and a screen-reader sentence, so the direction
   survives both colour blindness and a monochrome print. */
.pc-rankings-card-top10-move.is-up,
.pc-rankings-card-1120-move.is-up,
.pc-rankings-card-top10-m-move.is-up,
.pc-rankings-card-1120-m-move.is-up,
.pc-rankings-overflow-move.is-up,
.pc-rankings-overflow-m-move.is-up {
	color: #1a7f4b;
}

.pc-rankings-card-top10-move.is-down,
.pc-rankings-card-1120-move.is-down,
.pc-rankings-card-top10-m-move.is-down,
.pc-rankings-card-1120-m-move.is-down,
.pc-rankings-overflow-move.is-down,
.pc-rankings-overflow-m-move.is-down {
	color: var(--pc-red);
}

.pc-rankings-move-arrow {
	font-size: 9px;
}

/* TOP10 carries the movement bigger than the other blocks -- requested
   directly: +100% on desktop, +30% on mobile. Both the glyph and the number
   scale together, so the indicator keeps its proportions instead of turning
   into a large digit next to a small arrow. These have to sit AFTER the
   shared sizing block above: same specificity, so source order decides.
   The 11-20 grid and the 21+ list keep the original size on purpose -- the
   podium is where the movement is worth reading at a glance. */
/* The indicator hugs the rank number instead of floating mid-column.
   Measured on the live page: the 34px of arrow+count sat in a 52px cell, so
   9px of dead space opened on its left before the 14px grid gap even began. */
.pc-rankings-card-top10-move {
	justify-content: flex-start;
	gap: 4px;
	font-size: 22px; /* the step count -- 11px doubled */
}

.pc-rankings-card-top10-move .pc-rankings-move-arrow {
	font-size: 18px; /* 9px doubled */
}

.pc-rankings-card-top10-m-move {
	gap: 3px;
	font-size: 14px; /* 11px + 30% */
}

.pc-rankings-card-top10-m-move .pc-rankings-move-arrow {
	font-size: 12px; /* 9px + 30% */
}

/* The 21+ list on desktop -- flag and movement both +30%, requested
   directly. The mobile 21+ list (.pc-rankings-overflow-m-*) keeps its own
   sizes; only the desktop rows were asked for. */
.pc-rankings-overflow-move {
	gap: 3px;
	font-size: 14px; /* the step count -- 11px + 30% */
}

.pc-rankings-overflow-move .pc-rankings-move-arrow {
	font-size: 12px; /* 9px + 30% */
}

/* This list had no flag override of its own, so it was inheriting the 20px
   base -- not the 21px on .pc-rankings-overflow-nat, which sizes the cell,
   not the emoji inside it. */
.pc-rankings-overflow-nat .pc-rankings-flag {
	font-size: 26px; /* 20px + 30% */
}

/* No background/padding box around the flag anymore -- removed directly
   (reference screenshot) now that the flag itself is twice the size
   (below) and reads as its own element rather than needing a slot to sit
   in. Width stays 52px so the grid's own column (see .pc-rankings-card-
   top10's grid-template-columns) doesn't shift regardless. */
.pc-rankings-card-top10-nat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
}

.pc-rankings-flag {
	font-size: 20px;
	line-height: 1;
}

/* +100% -- reference screenshot. */
.pc-rankings-card-top10-nat .pc-rankings-flag {
	font-size: 40px;
}

.pc-rankings-card-top10-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-rankings-card-top10-first {
	font-family: var(--pc-font-body);
	font-size: 13px;
	color: var(--pc-light-text-muted);
	line-height: 1.2;
}

.pc-rankings-card-top10-last {
	font-family: var(--pc-font-body);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--pc-light-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-top10-points {
	font-family: var(--pc-font-heading);
	font-size: 24px;
	font-weight: 600;
	color: var(--pc-light-text);
}

/* --------------------------------------------------- 3.4 11-20, 5x2 grid */

.pc-rankings-1120 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column; /* 11/12 col 1, 13/14 col 2, ... */
	gap: 10px;
	margin-top: 22px;
}

/* 30px 22px 1fr, not the original 30px 1fr -- the movement column was added
   to this block when snapshots made arrows possible. */
/* Two columns, not three: the movement indicator sits UNDER the rank number
   rather than beside it, which hands the name its own 31px back (the 22px
   column plus its 9px gap) -- requested directly, because surnames were
   truncating here. The stack costs no height in practice: rank + arrow comes
   to ~35px against a two-line body of ~40px, so the body still sets the card
   height. Row gap is 2px, column gap stays 9px. */
.pc-rankings-card-1120 {
	display: grid;
	grid-template-columns: 30px 1fr;
	align-items: center;
	gap: 2px 9px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 5px;
	padding: 10px 12px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.pc-rankings-card-1120--linked {
	cursor: pointer;
}

.pc-rankings-card-1120--linked:hover,
.pc-rankings-card-1120--linked:focus-visible {
	border-color: #c2ced3;
	box-shadow: 0 3px 10px rgba(10, 46, 58, 0.12);
	transform: translateY(-2px);
}

/* Explicit placement, since the three children now occupy two columns:
   rank and movement stack in column 1, the body spans both rows of
   column 2. Without this the movement span would wrap onto its own row
   across the whole card. */
.pc-rankings-card-1120-rank {
	grid-area: 1 / 1;
	font-family: var(--pc-font-heading);
	font-size: 22px;
	font-weight: 700;
	color: var(--pc-light-text-muted);
	text-align: center;
}

.pc-rankings-card-1120-move {
	grid-area: 2 / 1;
}

.pc-rankings-card-1120-body {
	grid-area: 1 / 2 / span 2 / 3;
	min-width: 0;
}

/* Row 1: first name + points only now -- the flag moved down to row 2,
   next to the surname (reference screenshot), so this row no longer
   needs its own gap for a 3rd item. */
.pc-rankings-card-1120-row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.pc-rankings-card-1120-first {
	font-family: var(--pc-font-body);
	font-size: 12px;
	color: var(--pc-light-text-muted);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-1120-points {
	font-family: var(--pc-font-heading);
	font-size: 15px;
	font-weight: 600;
	color: var(--pc-light-text);
	white-space: nowrap;
}

/* Row 2: surname on the left, flag right-aligned -- moved here from row 1
   (reference screenshot), no longer its own background chip (bare flag
   now, same as TOP 10's own flag above). */
.pc-rankings-card-1120-row2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 2px;
}

.pc-rankings-card-1120-last {
	display: block;
	font-family: var(--pc-font-body);
	font-size: 14px;
	font-weight: 700;
	color: var(--pc-light-text);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-1120-nat {
	flex: 0 0 auto;
	line-height: 1;
}

/* +60% (14px -> 22.4px), desktop only -- requested directly. Mobile's own
   equivalent (.pc-rankings-card-1120-m-nat .pc-rankings-flag) is untouched. */
.pc-rankings-card-1120-nat .pc-rankings-flag {
	font-size: 22.4px;
}

/* --------------------------------------------- 3.5 View all + 21+ list */

.pc-rankings-viewall {
	display: block;
	margin: 28px auto 0;
	font-family: var(--pc-font-heading);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pc-light-text);
	background: var(--pc-light-surface);
	border: 1px solid #bcc7cb;
	border-radius: 6px;
	padding: 13px 34px;
	cursor: pointer;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.pc-rankings-viewall:hover,
.pc-rankings-viewall:focus-visible {
	border-color: var(--pc-red);
	color: var(--pc-red-hover);
}

.pc-rankings-overflow {
	margin-top: 26px;
	border-top: 1px solid var(--pc-light-border);
}

.pc-rankings-overflow-header {
	display: grid;
	/* Must stay identical to .pc-rankings-overflow-row below, or the column
	   labels stop lining up with the rows they head. */
	grid-template-columns: 70px 39px 60px 1fr 110px;
	gap: 14px;
	padding: 12px 18px;
	font-family: var(--pc-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

.pc-rankings-overflow-header-points {
	text-align: right;
}

.pc-rankings-overflow-row {
	display: grid;
	/* Movement column 39px (was 30px), so the +30% indicator still centres
	   without clipping. The 60px flag column already had slack for a 26px
	   emoji, so it stays put and only the name column gives ground. */
	grid-template-columns: 70px 39px 60px 1fr 110px;
	gap: 14px;
	align-items: center;
	padding: 13px 18px;
	background: var(--pc-light-surface);
	border-top: 1px solid var(--pc-light-border);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.18s ease;
}

.pc-rankings-overflow-row--linked {
	cursor: pointer;
}

.pc-rankings-overflow-row--linked:hover,
.pc-rankings-overflow-row--linked:focus-visible {
	background: #f5f8f9;
}

.pc-rankings-overflow-rank {
	font-family: var(--pc-font-heading);
	font-size: 22px;
	font-weight: 600;
	color: var(--pc-light-text-muted);
}

/* +50% (14px -> 21px), desktop only -- reference screenshot; the mobile
   equivalent (.pc-rankings-overflow-m-nat) is untouched. */
.pc-rankings-overflow-nat {
	font-family: var(--pc-font-heading);
	font-size: 21px;
	color: var(--pc-light-text-muted);
}

.pc-rankings-overflow-player {
	font-family: var(--pc-font-body);
	font-size: 16px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-overflow-first {
	color: var(--pc-light-text-muted);
}

.pc-rankings-overflow-last {
	font-weight: 700;
	color: var(--pc-light-text);
	margin-left: 0.3em;
}

.pc-rankings-overflow-points {
	font-family: var(--pc-font-heading);
	font-size: 20px;
	text-align: right;
	color: var(--pc-light-text);
}

/* ================================================================= MOBILE */

/* -------------------------------------------------------- 4.1 Picker (m) */

.pc-rankings-picker-m {
	margin-top: 14px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 8px;
	padding: 12px 0;
}

.pc-rankings-group-row-m {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 7px;
	padding: 0 12px;
}

.pc-rankings-group-btn-m {
	font-family: var(--pc-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	padding: 10px 0;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--pc-light-bg);
	color: var(--pc-light-text-muted);
	text-decoration: none;
}

.pc-rankings-group-btn-m.is-active {
	background: var(--pc-red);
	color: #fff;
}

.pc-rankings-picker-divider-m {
	height: 1px;
	background: var(--pc-light-border);
	margin: 12px 12px;
}

.pc-rankings-chip-row-m {
	display: flex;
	gap: 6px;
	padding: 0 12px;
}

.pc-rankings-chip-m {
	flex: 1;
	text-align: center;
	white-space: nowrap;
	font-family: var(--pc-font-body);
	font-size: 12px;
	font-weight: 600;
	padding: 7px 8px;
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	background: var(--pc-light-bg);
	color: var(--pc-light-text-muted);
	text-decoration: none;
}

.pc-rankings-chip-m.is-active {
	background: var(--pc-light-text);
	color: #fff;
}

.pc-rankings-selector-m {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 24px);
	margin: 0 12px;
	min-height: 44px;
	background: var(--pc-light-bg);
	border: 1px solid var(--pc-light-border);
	border-radius: 5px;
	padding: 11px 13px;
	font-family: var(--pc-font-body);
	cursor: pointer;
}

.pc-rankings-selector-m-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--pc-light-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-selector-m-arrow {
	font-size: 11px;
	color: var(--pc-light-text-muted);
	flex-shrink: 0;
	margin-left: 8px;
}

/* -------------------------------------------------- 4.2 Results header (m) */

.pc-rankings-results-header-m {
	padding-top: 20px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

.pc-rankings-results-title-m {
	font-family: var(--pc-font-heading);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.1;
	margin: 0;
	color: var(--pc-light-text);
}

.pc-rankings-results-header-m .pc-rankings-updated {
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;
}

.pc-rankings-results-header-m .pc-rankings-updated-label {
	font-size: 10px;
}

.pc-rankings-results-header-m .pc-rankings-updated-date {
	font-size: 17px;
}

/* -------------------------------------------------------- 4.3 TOP 10 (m) */

.pc-rankings-top10-m {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.pc-rankings-card-top10-m {
	display: grid;
	grid-template-columns: 34px 26px 34px 1fr auto;
	gap: 9px;
	align-items: center;
	background: var(--pc-light-surface);
	border-left: 3px solid var(--pc-red);
	border-radius: 6px;
	padding: 10px 14px 10px 11px;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.pc-rankings-card-top10-m--linked {
	cursor: pointer;
}

.pc-rankings-card-top10-m--linked:hover,
.pc-rankings-card-top10-m--linked:active {
	box-shadow: 0 4px 14px rgba(10, 46, 58, 0.14);
	transform: translateX(3px);
}

.pc-rankings-card-top10-m-rank {
	font-family: var(--pc-font-heading);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	color: var(--pc-light-text);
}

.pc-rankings-card-top10-m-move {
	width: 26px; /* was 20px -- +30% with the indicator inside it. */
}

.pc-rankings-card-top10-m-nat {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	padding: 4px 0;
	background: var(--pc-light-bg);
	border: 1px solid #e2e8ea;
	border-radius: 2px;
}

.pc-rankings-card-top10-m-nat .pc-rankings-flag {
	font-size: 16px;
}

.pc-rankings-card-top10-m-name {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pc-rankings-card-top10-m-first {
	font-family: var(--pc-font-body);
	font-size: 11px;
	color: var(--pc-light-text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-top10-m-last {
	font-family: var(--pc-font-body);
	font-size: 16px;
	font-weight: 700;
	color: var(--pc-light-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-top10-m-points {
	font-family: var(--pc-font-heading);
	font-size: 19px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--pc-light-text);
}

/* ------------------------------------------------------- 4.4 11-20 (m) */

.pc-rankings-1120-m {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(5, auto);
	grid-auto-flow: column; /* 11-15 left, 16-20 right */
	gap: 7px;
	margin-top: 14px;
}

.pc-rankings-card-1120-m {
	display: grid;
	grid-template-columns: 22px 20px 1fr;
	gap: 8px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 5px;
	padding: 8px 10px;
	text-decoration: none;
	color: inherit;
}

.pc-rankings-card-1120-m--linked {
	cursor: pointer;
}

.pc-rankings-card-1120-m-rank {
	font-family: var(--pc-font-heading);
	font-size: 18px;
	font-weight: 700;
	color: var(--pc-light-text-muted);
	text-align: center;
}

.pc-rankings-card-1120-m-body {
	min-width: 0;
}

/* Row 1: first name + points -- mirrors desktop's own .pc-rankings-card-
   1120-row1 now (full first name, not the "P." initial this used to
   shorten it to -- requested directly, "nech sa to zobrazuje ako na
   PC"). */
.pc-rankings-card-1120-m-row1 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}

.pc-rankings-card-1120-m-first {
	font-family: var(--pc-font-body);
	font-size: 11px;
	color: var(--pc-light-text-muted);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-1120-m-points {
	font-family: var(--pc-font-heading);
	font-size: 13px;
	font-weight: 600;
	color: var(--pc-light-text-muted);
	white-space: nowrap;
}

/* Row 2: surname + flag -- mirrors desktop's own .pc-rankings-card-1120-
   row2 (flag right-aligned next to the surname, no background chip). */
.pc-rankings-card-1120-m-row2 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-top: 1px;
}

.pc-rankings-card-1120-m-last {
	display: block;
	font-family: var(--pc-font-body);
	font-size: 12px;
	font-weight: 700;
	color: var(--pc-light-text);
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-card-1120-m-nat {
	flex: 0 0 auto;
	line-height: 1;
}

.pc-rankings-card-1120-m-nat .pc-rankings-flag {
	font-size: 12px;
}

/* --------------------------------------------- 4.5 View all + 21+ (m) */

.pc-rankings-viewall-m {
	display: block;
	width: 100%;
	margin-top: 16px;
	min-height: 44px;
	padding: 13px 0;
	text-align: center;
	font-family: var(--pc-font-heading);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--pc-light-text);
	background: var(--pc-light-surface);
	border: 1px solid #bcc7cb;
	border-radius: 6px;
	cursor: pointer;
}

.pc-rankings-overflow-m {
	margin-top: 16px;
	background: var(--pc-light-surface);
	border: 1px solid var(--pc-light-border);
	border-radius: 6px;
	overflow: hidden;
}

/* 30px 20px 44px 1fr auto -- the 20px is the movement column, added when this
   block finally got its own arrows. */
.pc-rankings-overflow-m-row {
	display: grid;
	grid-template-columns: 30px 20px 44px 1fr auto;
	gap: 8px;
	align-items: center;
	padding: 11px 12px;
	border-top: 1px solid var(--pc-light-border);
	text-decoration: none;
	color: inherit;
	min-height: 44px;
}

.pc-rankings-overflow-m-row:first-child {
	border-top: none;
}

.pc-rankings-overflow-m-rank {
	font-family: var(--pc-font-heading);
	font-size: 17px;
	font-weight: 600;
	color: var(--pc-light-text-muted);
}

.pc-rankings-overflow-m-nat {
	font-family: var(--pc-font-heading);
	font-size: 11px;
	color: var(--pc-light-text-muted);
	text-align: center;
}

.pc-rankings-overflow-m-player {
	font-family: var(--pc-font-body);
	font-size: 13px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pc-rankings-overflow-m-first {
	color: var(--pc-light-text-muted);
}

.pc-rankings-overflow-m-last {
	font-weight: 700;
	color: var(--pc-light-text);
	margin-left: 0.3em;
}

.pc-rankings-overflow-m-points {
	font-family: var(--pc-font-heading);
	font-size: 15px;
	color: var(--pc-light-text-muted);
}

/* ------------------------------------------------------------ Bottom sheet */

body.pc-rankings-sheet-open {
	overflow: hidden;
}

.pc-rankings-sheet-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 46, 58, 0.45);
	z-index: 100;
}

.pc-rankings-sheet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 101;
	background: var(--pc-light-surface);
	border-radius: 14px 14px 0 0;
	max-height: 78%;
}

/* :not([hidden]), not a bare .pc-rankings-sheet { display: flex } -- found in
   the browser, same known trap this codebase's own .pc-btn[hidden] rule
   already documents: the browser's default [hidden]{display:none} is the
   lowest-priority (user-agent) origin, so ANY same-or-higher-specificity
   author rule that sets `display` unconditionally beats it outright --
   toggling the hidden attribute had no visual effect at all, the sheet
   stayed open on page load. Scoping display:flex to :not([hidden]) here
   means there's no author `display` rule left to win when [hidden] is
   actually present, so its own display:none applies normally again. */
.pc-rankings-sheet:not([hidden]) {
	display: flex;
	flex-direction: column;
}

.pc-rankings-sheet-header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--pc-light-border);
}

.pc-rankings-sheet-title {
	font-family: var(--pc-font-heading);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pc-light-text);
}

.pc-rankings-sheet-close {
	font-size: 18px;
	line-height: 1;
	color: var(--pc-light-text-muted);
	background: none;
	border: none;
	padding: 8px;
	cursor: pointer;
}

.pc-rankings-sheet-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

.pc-rankings-sheet-section-label {
	margin: 0;
	padding: 12px 18px 6px;
	font-family: var(--pc-font-body);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--pc-light-text-muted);
}

.pc-rankings-sheet-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	min-height: 44px;
	text-decoration: none;
	color: inherit;
}

.pc-rankings-sheet-row.is-active {
	background: var(--pc-light-bg);
	font-weight: 700;
	color: var(--pc-light-text);
}

.pc-rankings-sheet-row-chip {
	flex: 0 0 auto;
	min-width: 56px;
	text-align: center;
	font-family: var(--pc-font-heading);
	font-size: 12px;
	font-weight: 600;
	background: var(--pc-light-bg);
	border-radius: 3px;
	padding: 4px 6px;
	color: var(--pc-light-text-muted);
}

.pc-rankings-sheet-row-name {
	font-family: var(--pc-font-body);
	font-size: 14px;
}

/* ================================================== Tablet, 600-899px */
/* Still "mobile" layout overall (picker/header/view-all/overflow) -- only
   the TOP10/11-20 grids get their own wider column counts here. */
@media (min-width: 600px) and (max-width: 899px) {
	.pc-rankings-1120-m {
		grid-template-columns: repeat(3, 1fr);
	}
}