/*
 * Game Pulse look: pirates (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="pirates"] and .is-game-pirates, then the game's own ornaments, all scoped to this game.
 *
 * Puzzle Pirates, drawn by Game Pulse in CSS: parchment notices, rope borders, wood planks, sea blue and brass; the
 * oceans as pennants (each ocean its own colour); the pirate lookup as the in-game pirate info window, a parchment sheet
 * in a wooden frame with the blue group headings of the official pirate page. No game art is used here (Grey Havens
 * publishes no fan-art permission; the section's icons are Game Pulse's own), and the fan-site notices stay.
 *
 * Fonts (SIL Open Font License 1.1, licence text in assets/fonts/pirates/OFL.txt, latin subset, woff2, 69 KB together):
 * - Pirata One by Rodrigo Fuenzalida and Nicolas Massi, from the npm package @fontsource/pirata-one 5.3.0: titles.
 * - IM FELL English by Igino Marini, from the npm package @fontsource/im-fell-english 5.3.0: numbers and small heads.
 * Body text stays in the site's own stack for reading.
 */

@font-face {
	font-family: "Pirata One";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pirates/pirata-one-latin-400-normal.woff2") format("woff2");
}

@font-face {
	font-family: "IM FELL English";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/pirates/im-fell-english-latin-400-normal.woff2") format("woff2");
}

/* Metric-close fallbacks while the faces load (no layout jump). */
@font-face {
	font-family: "GP Pirata Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 88%;
	ascent-override: 98%;
}

@font-face {
	font-family: "GP Fell Fallback";
	src: local("Georgia"), local("Times New Roman");
	size-adjust: 96%;
}

[data-game="pirates"],
.is-game-pirates {
	/* Parchment by day, a lantern-lit deck at night. */
	--gp-surface: light-dark(#F3E7C9, #172331);
	--gp-surface-2: light-dark(#FBF4E1, #1D2C3C);
	--gp-surface-sunk: light-dark(#E8D9B2, #101A25);
	--gp-ink: light-dark(#2B1E12, #F0E4C6);
	--gp-ink-muted: light-dark(#5A4630, #C9B994);
	--gp-ink-strong: light-dark(#170F07, #FFF6DE);
	--gp-accent: light-dark(#17466F, #7FB7E6);
	--gp-accent-ink: light-dark(#FFFFFF, #0C1722);
	--gp-accent-2: light-dark(#8C6A1F, #E1BE6A);
	--gp-title-ink: light-dark(#123A62, #E8C977);
	--gp-title-shadow: light-dark(0 1px 0 rgba(255, 250, 235, 0.7), 0 1px 0 rgba(0, 0, 0, 0.7));
	--gp-head-font: "Pirata One", "GP Pirata Fallback", Georgia, serif;
	--gp-body-font: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--gp-num-font: "IM FELL English", "GP Fell Fallback", Georgia, serif;
	--gp-frame-border: 2px solid light-dark(#7A5230, #8C6B2F);
	--gp-frame-radius: 6px;
	--gp-frame-shadow: inset 0 0 0 3px light-dark(rgba(255, 250, 235, 0.55), rgba(255, 255, 255, 0.03)), 0 12px 26px -18px rgba(14, 8, 2, 0.7);
	--gp-frame-image: none;
	--gp-pp-wood:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px),
		repeating-linear-gradient(90deg, transparent 0 140px, rgba(0, 0, 0, 0.28) 140px 142px),
		linear-gradient(180deg, #8A5A2C, #6C4322 55%, #57351A);
	--gp-pp-wood-flat:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px),
		linear-gradient(180deg, #8A5A2C, #6C4322 55%, #57351A);
	--gp-pp-rope: repeating-linear-gradient(-55deg, #C79B5B 0 3px, #8A5A2B 3px 6px, #5E3B1B 6px 7px);
	--gp-pp-brass: linear-gradient(180deg, #E9CF86, #B8913C 55%, #8C6A1F);
	--gp-tab-bg: var(--gp-pp-wood);
	--gp-tab-ink: #F6E7C3;
	--gp-tab-active-bg: #F3E7C9;
	--gp-tab-active-ink: #2B1E12;
	--gp-tab-shape: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
	--gp-btn-bg: light-dark(#FBF4E1, #1D2C3C);
	--gp-btn-ink: light-dark(#2B1E12, #F0E4C6);
	--gp-btn-border: light-dark(#8E6A40, #8C6B2F);
	--gp-btn-hover-bg: light-dark(#F0DFB6, #273A4E);
	--gp-table-head-bg: var(--gp-pp-wood-flat);
	--gp-table-head-ink: #F7E8C6;
	--gp-row-alt: light-dark(rgba(122, 82, 48, 0.07), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(23, 70, 111, 0.09), rgba(127, 183, 230, 0.09));
	--gp-grid-line: light-dark(#D3BF94, #2F4256);
	--gp-good: light-dark(#21683A, #7AD69A);
	--gp-bad: light-dark(#9C2F1F, #FF9C88);
	--gp-warn: light-dark(#8A5A00, #F2C25C);
	--gp-pop-bg: light-dark(#FBF4E1, #1D2C3C);
	--gp-pop-border: light-dark(#7A5230, #8C6B2F);
	--gp-pop-shadow: 0 18px 40px -14px rgba(10, 6, 2, 0.6);
	/* The hero: night sea with rolling swells and a lantern glow, a rope along its foot. */
	--gp-hero-bg:
		radial-gradient(36rem 12rem at 85% -2rem, rgba(233, 207, 134, 0.28), transparent 70%),
		repeating-radial-gradient(ellipse 60px 14px at 30px 100%, transparent 0 9px, rgba(255, 255, 255, 0.07) 9px 10px, transparent 10px 14px),
		linear-gradient(180deg, #0A1C30 0%, #123553 70%, #17466F 100%);
	--gp-hero-rule: #C79B5B;
	--gp-hero-accent: #E9CF86;
	--gp-hero-title: #F7EBCD;
	--gp-hero-ink: #E9DFC6;
	--gp-hero-pill: rgba(233, 207, 134, 0.55);
	--gp-tabs-bg: var(--gp-pp-wood);
	--gp-tabs-rule: #3E2612;
	--gp-tabs-ink: #F6E7C3;
	--gp-tabs-active: #F2D27E;
	/* The tokens the existing section styles read. */
	--gp-primary: light-dark(#17466F, #7FB7E6);
	--gp-on-primary: light-dark(#FFFFFF, #0C1722);
	--wp--preset--color--primary: light-dark(#17466F, #7FB7E6);
	--wp--preset--color--on-primary: light-dark(#FFFFFF, #0C1722);
	--wp--preset--color--accent: light-dark(#8C6A1F, #E1BE6A);
	--wp--preset--color--ink: light-dark(#2B1E12, #F0E4C6);
	--wp--preset--color--muted: light-dark(#5A4630, #C9B994);
	--wp--preset--color--surface: light-dark(#F3E7C9, #172331);
	--wp--preset--color--surface-alt: light-dark(#EADCB8, #1D2C3C);
	--wp--preset--color--border: light-dark(#B99868, #3A5068);
	--gp-pp-sea: light-dark(#17466F, #7FB7E6);
	--gp-pp-sand: light-dark(#E6D3A3, #4A3E26);
	--gp-pp-parchment: light-dark(#F7EDD3, #172331);
	--gp-panel-border: light-dark(#A9875A, #3A5068);
	--gp-panel-bg:
		radial-gradient(120% 90% at 0% 0%, light-dark(rgba(255, 252, 240, 0.7), rgba(127, 183, 230, 0.06)), transparent 55%),
		radial-gradient(90% 70% at 100% 100%, light-dark(rgba(150, 105, 50, 0.12), rgba(0, 0, 0, 0.25)), transparent 60%),
		repeating-linear-gradient(97deg, light-dark(rgba(122, 82, 48, 0.035), rgba(255, 255, 255, 0.015)) 0 1px, transparent 1px 6px),
		light-dark(#F3E7C9, #172331);
	--gp-panel-alt-bg: light-dark(#FBF4E1, #1D2C3C);
	--gp-ink-chart: light-dark(#5A4630, #C9B994);
	--gp-grid: light-dark(#DCCAA2, #2A3C50);
	--gp-series-1: light-dark(#17466F, #7FB7E6);
	--gp-series-2: light-dark(#A2551B, #F2A65C);
	--gp-series-3: light-dark(#21683A, #7AD69A);
	--gp-series-4: light-dark(#6B3E8E, #CBA6F2);
	--gp-series-5: light-dark(#9C2F1F, #FF9C88);
	--gp-series-6: light-dark(#5E5A12, #E1D46A);
}

/* Each ocean's colour, for its pennant, card and rows. */
[data-game="pirates"] [data-ocean="emerald"],
.is-game-pirates [data-ocean="emerald"] { --gp-pp-ocean: #1F8A57; }
[data-game="pirates"] [data-ocean="meridian"],
.is-game-pirates [data-ocean="meridian"] { --gp-pp-ocean: #D08A1E; }
[data-game="pirates"] [data-ocean="cerulean"],
.is-game-pirates [data-ocean="cerulean"] { --gp-pp-ocean: #2F7FC1; }
[data-game="pirates"] [data-ocean="obsidian"],
.is-game-pirates [data-ocean="obsidian"] { --gp-pp-ocean: #3A3442; }
[data-game="pirates"] [data-ocean="opal"],
.is-game-pirates [data-ocean="opal"] { --gp-pp-ocean: #B9A2D9; }
[data-game="pirates"] [data-ocean="jade"],
.is-game-pirates [data-ocean="jade"] { --gp-pp-ocean: #3E9C82; }

/* ---- the band and the tabs ------------------------------------------------------------------------------------ */

.gp-hero.is-game-pirates {
	border-bottom: 7px solid transparent;
	border-image: var(--gp-pp-rope) 7;
}

.gp-hero.is-game-pirates .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 400;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 0 #06111D, 0 0 18px rgba(233, 207, 134, 0.25);
}

.gp-hero.is-game-pirates .gp-hero__facts li {
	border-radius: 3px;
	background: rgba(10, 28, 48, 0.55);
	font-family: var(--gp-num-font);
	font-size: 0.95rem;
}

.gp-subnav.is-game-pirates {
	background: var(--gp-pp-wood);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.35), 0 3px 8px -4px rgba(0, 0, 0, 0.5);
}

.gp-subnav.is-game-pirates a {
	font-family: var(--gp-num-font);
	font-size: 1.05rem;
	font-weight: 400;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.gp-subnav.is-game-pirates a[aria-current="page"] {
	color: var(--gp-tab-active-ink);
	text-shadow: none;
	background: linear-gradient(180deg, #FBF4E1, #F0E0B8);
	border-bottom-color: transparent;
	clip-path: var(--gp-tab-shape);
}

/* ---- panels: parchment notices pinned with brass, a rope under the heading ---------------------------------- */

.gp-pp .gp-panel,
.is-game-pirates .gp-section .gp-panel {
	position: relative;
	border: var(--gp-frame-border);
	border-radius: var(--gp-frame-radius);
	background: var(--gp-panel-bg);
	box-shadow: var(--gp-frame-shadow);
	color: var(--gp-ink);
}

.gp-pp .gp-panel::before,
.gp-pp .gp-panel::after {
	content: "";
	position: absolute;
	top: 7px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #F6E2A2, #B8913C 55%, #6E5214);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
	pointer-events: none;
}

.gp-pp .gp-panel::before { left: 7px; }
.gp-pp .gp-panel::after { right: 7px; }

.gp-pp .gp-panel > h3,
.gp-pp-board > h3,
.is-game-pirates .gp-panel__title {
	position: relative;
	padding-bottom: 0.45rem;
	margin-bottom: 0.75rem;
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 1.55rem;
	line-height: 1.15;
	letter-spacing: 0.01em;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

.gp-pp .gp-panel > h3::after,
.is-game-pirates .gp-panel__title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	border-radius: 2px;
	background: var(--gp-pp-rope);
	opacity: 0.85;
}

.gp-pp h4,
.gp-pp-kicker {
	font-family: var(--gp-num-font);
	font-weight: 400;
	letter-spacing: 0.02em;
	color: var(--gp-title-ink);
}

.gp-pp .gp-pp-icon {
	color: var(--gp-accent);
}

.gp-pp a {
	color: var(--gp-accent);
	text-decoration-color: color-mix(in srgb, var(--gp-accent) 45%, transparent);
	text-underline-offset: 2px;
}

.gp-pp a:hover {
	text-decoration-color: currentColor;
}

.gp-pp :focus-visible {
	outline: 3px solid var(--gp-accent-2);
	outline-offset: 2px;
}

/* ---- pennants: the ocean selector ----------------------------------------------------------------------------- */

.gp-pp-flag {
	display: inline-block;
	flex: none;
	width: 1.15em;
	height: 0.95em;
	margin-right: 0.4em;
	vertical-align: -0.12em;
	border-left: 2px solid light-dark(#5E3B1B, #C79B5B);
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 45%, rgba(0, 0, 0, 0.2)) left top / 100% 70% no-repeat,
		linear-gradient(var(--gp-pp-ocean, #17466F), var(--gp-pp-ocean, #17466F)) left top / 100% 70% no-repeat;
	clip-path: polygon(0 0, 100% 35%, 2px 70%, 2px 100%, 0 100%);
}

.gp-pp .gp-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1rem;
	padding: 0.65rem 0.8rem;
	border: 1px solid var(--gp-panel-border);
	border-radius: var(--gp-frame-radius);
	background:
		repeating-linear-gradient(97deg, light-dark(rgba(122, 82, 48, 0.04), rgba(255, 255, 255, 0.02)) 0 1px, transparent 1px 6px),
		var(--gp-surface-2);
}

.gp-pp .gp-seg {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.gp-pp .gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	min-height: 2.25rem;
	padding: 0.25rem 0.75rem 0.25rem 0.55rem;
	border: 1px solid var(--gp-btn-border);
	border-radius: 3px 10px 10px 3px;
	background: var(--gp-btn-bg);
	color: var(--gp-btn-ink);
	font: inherit;
	font-family: var(--gp-num-font);
	font-size: 1rem;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 0 light-dark(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.05)) inset, 0 1px 2px rgba(20, 12, 4, 0.25);
}

.gp-pp .gp-chip:hover {
	background: var(--gp-btn-hover-bg);
}

.gp-pp .gp-chip[aria-pressed="true"],
.gp-pp label.gp-chip:has(input:checked) {
	color: #FBEFD2;
	background: var(--gp-pp-wood);
	border-color: #3E2612;
	box-shadow: inset 0 0 0 1px rgba(233, 207, 134, 0.65), 0 2px 4px -1px rgba(0, 0, 0, 0.45);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}

.gp-pp .gp-chip[aria-pressed="true"] .gp-pp-icon,
.gp-pp label.gp-chip:has(input:checked) .gp-pp-icon {
	color: #F2D27E;
}

.gp-pp .gp-chip__count {
	margin-left: 0.35rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: light-dark(rgba(23, 70, 111, 0.12), rgba(127, 183, 230, 0.16));
	font-size: 0.82rem;
	font-family: var(--gp-body-font);
}

.gp-pp .gp-chip[aria-pressed="true"] .gp-chip__count {
	background: rgba(233, 207, 134, 0.3);
}

.gp-pp label.gp-chip:has(input:focus-visible) {
	outline: 3px solid var(--gp-accent-2);
	outline-offset: 2px;
}

.gp-pp .gp-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 1 1 14rem;
}

.gp-pp .gp-search input {
	width: 100%;
	min-height: 2.25rem;
	padding: 0.35rem 0.7rem 0.35rem 2rem;
	border: 1px solid var(--gp-btn-border);
	border-radius: 4px;
	background: var(--gp-surface-sunk);
	color: var(--gp-ink);
	font: inherit;
	box-shadow: inset 0 2px 3px rgba(40, 24, 8, 0.18);
}

/* A spyglass drawn in CSS: the lens and the tube. */
.gp-pp-filters .gp-search::before {
	content: "";
	position: absolute;
	left: 0.65rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	margin-top: -0.45rem;
	border: 2px solid var(--gp-ink-muted);
	border-radius: 50%;
	pointer-events: none;
}

.gp-pp-filters .gp-search::after {
	content: "";
	position: absolute;
	left: 1.2rem;
	top: 50%;
	width: 0.45rem;
	height: 2px;
	margin-top: 0.2rem;
	background: var(--gp-ink-muted);
	transform: rotate(45deg);
	pointer-events: none;
}

/* On phones the pennants scroll sideways in one row, like the tabs above them. */
@media (max-width: 640px) {
	.gp-pp .gp-filters .gp-seg {
		flex-wrap: nowrap;
		max-width: 100%;
		overflow-x: auto;
		padding-bottom: 0.25rem;
		scrollbar-width: thin;
	}

	.gp-pp .gp-filters .gp-chip {
		flex: none;
	}
}

.gp-pp-shown {
	margin: 0;
	font-size: 0.85rem;
	color: var(--gp-ink-muted);
}

/* ---- the "right now" strip: brass plates with rivets ---------------------------------------------------------- */

.gp-pp .gp-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-pp .gp-kpi {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.15rem;
	padding: 0.85rem 1rem 0.75rem;
	border: 2px solid light-dark(#9C7A2F, #8C6B2F);
	border-radius: 4px;
	background:
		radial-gradient(circle at 8px 8px, #E9CF86 0 2.5px, #6E5214 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 8px) 8px, #E9CF86 0 2.5px, #6E5214 3px, transparent 3.5px),
		radial-gradient(circle at 8px calc(100% - 8px), #E9CF86 0 2.5px, #6E5214 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 8px) calc(100% - 8px), #E9CF86 0 2.5px, #6E5214 3px, transparent 3.5px),
		linear-gradient(180deg, light-dark(#FFF8E6, #22344A), light-dark(#F1E2BC, #18283A));
	box-shadow: inset 0 0 0 2px light-dark(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.04)), 0 8px 18px -14px rgba(14, 8, 2, 0.8);
}

/* Numbers in the reading face, heavy, so a 1 never reads as an l (the title faces have old-style figures). */
.gp-pp .gp-kpi__value {
	font-family: var(--gp-body-font);
	font-weight: 800;
	letter-spacing: -0.01em;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.05;
	color: var(--gp-title-ink);
	font-variant-numeric: lining-nums tabular-nums;
}

.gp-pp .gp-kpi__value .gp-pp-countdown {
	font-family: inherit;
	font-weight: 400;
	color: inherit;
}

.gp-pp .gp-kpi__label {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--gp-ink-muted);
}

.gp-pp .gp-kpi__note {
	font-size: 0.88rem;
	color: var(--gp-ink);
}

.gp-pp-delta,
.gp-pp .gp-kpi__delta {
	font-size: 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.gp-pp-delta.is-up { color: var(--gp-good); }
.gp-pp-delta.is-down { color: var(--gp-bad); }
.gp-pp-delta.is-flat { color: var(--gp-ink-muted); }

.gp-pp-spark {
	display: block;
	width: 100%;
	height: 1.6rem;
	margin-top: 0.25rem;
	overflow: visible;
}

.gp-pp-spark polyline {
	fill: none;
	stroke: var(--gp-accent);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* ---- the battle board: postings on the notice board ---------------------------------------------------------- */

.gp-pp-battles {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gp-pp-battle {
	display: grid;
	grid-template-columns: 8.5rem minmax(0, 1fr) auto;
	grid-template-areas: "ocean island when" "ocean teams when";
	gap: 0.15rem 0.9rem;
	align-items: center;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--gp-grid-line);
	border-left: 5px solid var(--gp-pp-ocean, var(--gp-accent));
	border-radius: 3px;
	background: var(--gp-surface-2);
	box-shadow: 0 1px 0 light-dark(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.03)) inset;
}

.gp-pp-battle__ocean {
	grid-area: ocean;
	display: inline-flex;
	align-items: center;
	font-family: var(--gp-num-font);
	font-size: 1.05rem;
	white-space: nowrap;
}

.gp-pp-battle__island {
	grid-area: island;
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 1.3rem;
	color: var(--gp-title-ink);
}

.gp-pp-battle > .gp-pp-chip {
	grid-area: island;
	justify-self: end;
}

.gp-pp-battle__teams {
	grid-area: teams;
	font-size: 0.95rem;
}

.gp-pp-vs {
	font-family: var(--gp-num-font);
	font-style: italic;
	color: var(--gp-ink-muted);
}

.gp-pp-battle__when {
	grid-area: when;
	text-align: end;
	font-size: 0.88rem;
	max-width: 19rem;
}

.gp-pp-battle__when .gp-pp-countdown {
	display: block;
	font-family: var(--gp-body-font);
	font-size: 1.15rem;
	font-weight: 800;
	color: var(--gp-accent);
}

.gp-pp-live {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 700;
	color: var(--gp-bad);
}

.gp-pp-live::before {
	content: "";
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent);
	animation: gp-pp-lantern 1.6s ease-in-out infinite;
}

@keyframes gp-pp-lantern {
	50% { opacity: 0.45; }
}

.gp-pp-battle.is-underway {
	background: light-dark(#FFF1DC, #2A2A2E);
}

@media (max-width: 640px) {
	.gp-pp-battle {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "ocean when" "island island" "teams teams";
	}

	.gp-pp-battle__when {
		max-width: none;
	}
}

/* ---- ocean cards ---------------------------------------------------------------------------------------------- */

.gp-pp .gp-pp-ocean {
	border-top: 6px solid var(--gp-pp-ocean, var(--gp-accent));
}

.gp-pp-ocean__title {
	display: flex;
	align-items: center;
}

.gp-pp-ocean__title .gp-pp-flag {
	width: 1.5rem;
	height: 1.3rem;
}

.gp-pp-stats li {
	display: grid;
	grid-template-columns: 1.4rem minmax(0, 1fr);
	gap: 0 0.4rem;
	align-items: center;
}

.gp-pp-stats li .gp-pp-spark {
	grid-column: 2;
	height: 1.2rem;
}

.gp-pp-stat--people strong {
	font-family: var(--gp-body-font);
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--gp-title-ink);
}

.gp-pp-next.is-live {
	color: var(--gp-bad);
	font-weight: 700;
}

.gp-pp-ocean__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0.5rem 0 0;
	font-family: var(--gp-num-font);
	font-size: 1.02rem;
}

/* ---- fame leaders --------------------------------------------------------------------------------------------- */

.gp-pp-leaders__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	gap: 0.75rem;
}

.gp-pp-leaders__ocean {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gp-grid-line);
	border-top: 4px solid var(--gp-pp-ocean, var(--gp-accent));
	border-radius: 3px;
	background: var(--gp-surface-2);
}

.gp-pp-leaders__name {
	display: flex;
	align-items: center;
	margin: 0 0 0.35rem;
	font-size: 1.15rem;
}

.gp-pp-leaders__ocean > .gp-pp-leaders__list + .gp-pp-leaders__list {
	margin-top: 0.4rem;
}

.gp-pp-leaders__list h4 {
	margin: 0 0 0.2rem;
	font-size: 0.95rem;
	color: var(--gp-ink-muted);
}

.gp-pp-leaders__list ol {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.92rem;
}

.gp-pp-rank {
	display: inline-grid;
	place-items: center;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--gp-pp-brass);
	color: #2B1E12;
	font-family: var(--gp-num-font);
	font-size: 0.9rem;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25);
}

/* The nine fame levels: sand to deep sea, the top three in brass. */
.gp-pp .gp-pp-tier {
	border-radius: 2px 8px 8px 2px;
	font-size: 0.82rem;
	font-weight: 700;
	background: color-mix(in srgb, #17466F calc(var(--gp-pp-tier, 0) * 11%), light-dark(#EAD9AE, #4A3E26));
	color: light-dark(#2B1E12, #F0E4C6);
}

.gp-pp .gp-pp-tier--5,
.gp-pp .gp-pp-tier--6 { color: #FFFFFF; }

.gp-pp .gp-pp-tier--7,
.gp-pp .gp-pp-tier--8 {
	color: #2B1E12;
	background: var(--gp-pp-brass);
}

.gp-pp .gp-pp-chip {
	font-family: var(--gp-body-font);
	letter-spacing: 0;
	vertical-align: middle;
	border-radius: 2px 9px 9px 2px;
	background: light-dark(#E8D6A8, #34465A);
	color: var(--gp-ink);
	border: 1px solid light-dark(#C8AD78, #4A6078);
}

/* ---- tables: wood-plank heads, parchment rows ----------------------------------------------------------------- */

.gp-pp .gp-table {
	border: 1px solid var(--gp-grid-line);
	background: var(--gp-surface-2);
}

.gp-pp .gp-table thead th {
	position: sticky;
	top: 0;
	background: var(--gp-table-head-bg);
	color: var(--gp-table-head-ink);
	font-family: var(--gp-num-font);
	font-weight: 400;
	font-size: 1.02rem;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.55);
	border-bottom: 2px solid #3E2612;
}

.gp-pp .gp-table th,
.gp-pp .gp-table td {
	border-bottom-color: var(--gp-grid-line);
}

.gp-pp .gp-table tbody tr:nth-child(even) > * {
	background: var(--gp-row-alt);
}

.gp-pp .gp-table tbody tr:hover > * {
	background: var(--gp-row-hover);
}

.gp-pp .gp-table th[data-sort] {
	cursor: pointer;
	user-select: none;
}

.gp-pp .gp-table th[data-sort]::after {
	content: "";
	display: inline-block;
	margin-left: 0.4rem;
	border: 4px solid transparent;
	border-top-color: rgba(247, 232, 198, 0.55);
	vertical-align: 0.05em;
}

.gp-pp .gp-table th[aria-sort="ascending"]::after {
	border-top-color: transparent;
	border-bottom-color: #F2D27E;
	vertical-align: 0.3em;
}

.gp-pp .gp-table th[aria-sort="descending"]::after {
	border-top-color: #F2D27E;
}

.gp-pp .gp-table tr.is-underway > * {
	background: light-dark(#FFF1DC, #2A2A2E);
}

.gp-pp-status {
	font-family: var(--gp-num-font);
	font-size: 1rem;
	white-space: nowrap;
}

.gp-pp-status--underway { color: var(--gp-bad); }
.gp-pp-status--upcoming { color: var(--gp-accent); }
.gp-pp-status--recent { color: var(--gp-ink-muted); }

.gp-pp-blockades th[scope="row"] .gp-pp-battle__ocean {
	display: flex;
	font-size: 0.95rem;
}

.gp-pp-blockades th[scope="row"] strong {
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--gp-title-ink);
}

.gp-pp .gp-pp-countdown {
	color: var(--gp-accent);
}

.gp-pp .gp-pp-countdown.is-soon {
	color: var(--gp-bad);
}

.gp-pp-islands__sum .gp-pp-spark {
	display: inline-block;
	width: 7rem;
	height: 1.1rem;
	margin: 0 0 0 0.5rem;
	vertical-align: middle;
}

/* ---- the pirate lookup: the in-game pirate info window ------------------------------------------------------- */

.gp-pp .gp-pp-lookup .gp-search {
	display: grid;
	gap: 0.25rem;
}

.gp-pp .gp-pp-lookup .gp-search input {
	padding-left: 0.7rem;
	font-size: 1.1rem;
}

.gp-pp-lookup legend {
	margin-bottom: 0.35rem;
	font-family: var(--gp-num-font);
	font-size: 1.05rem;
	color: var(--gp-title-ink);
}

.gp-pp-lookup .gp-seg {
	margin-bottom: 0.75rem;
}

.gp-pp-lookup label.gp-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gp-pp-lookup button[type="submit"] {
	min-height: 2.4rem;
	padding: 0.4rem 1.2rem;
	border: 1px solid #3E2612;
	border-radius: 4px;
	background: var(--gp-pp-wood);
	color: #FBEFD2;
	font-family: var(--gp-head-font);
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: 0.03em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	box-shadow: inset 0 0 0 1px rgba(233, 207, 134, 0.6), 0 3px 6px -2px rgba(0, 0, 0, 0.5);
}

.gp-pp-lookup button[type="submit"]:hover {
	filter: brightness(1.1);
}

.gp-pp .gp-panel.gp-pp-card {
	padding: clamp(1rem, 2.5vw, 1.6rem);
	border: 12px solid transparent;
	border-radius: 2px;
	border-image: linear-gradient(135deg, #8A5A2C, #5A361A 30%, #7A4E26 55%, #4A2C14) 12;
	background:
		radial-gradient(130% 100% at 50% 0%, light-dark(rgba(255, 253, 244, 0.85), rgba(127, 183, 230, 0.05)), transparent 60%),
		repeating-linear-gradient(0deg, light-dark(rgba(122, 82, 48, 0.035), rgba(255, 255, 255, 0.015)) 0 1px, transparent 1px 4px),
		light-dark(#F1EAD0, #18242F);
	box-shadow: inset 0 0 0 1px light-dark(#B5AD85, #3A5068), 0 18px 34px -20px rgba(10, 6, 2, 0.75);
}

.gp-pp .gp-panel.gp-pp-card::before,
.gp-pp .gp-panel.gp-pp-card::after {
	top: -6px;
	width: 12px;
	height: 12px;
}

.gp-pp .gp-panel.gp-pp-card::before { left: -6px; }
.gp-pp .gp-panel.gp-pp-card::after { right: -6px; }

.gp-pp .gp-pp-card__name {
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: clamp(1.9rem, 3.4vw, 2.5rem);
	letter-spacing: 0.02em;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

/* Group headings in the blue of the official pirate page. */
.gp-pp-card .gp-pp-block h4 {
	justify-content: flex-start;
	font-family: var(--gp-body-font, inherit);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	color: light-dark(#0052B5, #8EC5FF);
	border-bottom: 1px solid light-dark(#B5AD85, #3A5068);
}

.gp-pp-card .gp-pp-block h4 .gp-pp-icon {
	color: inherit;
}

.gp-pp-card .gp-pp-standing {
	color: light-dark(#0B3F7A, #B7D8FF);
}

.gp-pp-card .gp-pp-bar {
	height: 5px;
	border-radius: 0;
	background: linear-gradient(90deg, light-dark(#0052B5, #6FB0F5) calc(var(--gp-pp-standing, 0) * 100%), light-dark(#DCD3B2, #26384B) 0);
	box-shadow: inset 0 0 0 1px light-dark(rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.05));
}

/* The portrait in a carved frame with brass corners. */
.gp-pp .gp-pp-frame {
	position: relative;
	padding: 6px;
	border: 10px solid transparent;
	border-radius: 2px;
	border-image: linear-gradient(160deg, #9A6634, #5A361A 40%, #8A5A2C 70%, #4A2C14) 10;
	background: light-dark(#E5DCB9, #0F1A24);
	box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.35), 0 10px 22px -14px rgba(10, 6, 2, 0.8);
}

.gp-pp .gp-pp-frame::before {
	content: "";
	position: absolute;
	inset: -10px;
	background:
		radial-gradient(circle at 5px 5px, #F6E2A2 0 2px, #8C6A1F 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 5px) 5px, #F6E2A2 0 2px, #8C6A1F 3px, transparent 3.5px),
		radial-gradient(circle at 5px calc(100% - 5px), #F6E2A2 0 2px, #8C6A1F 3px, transparent 3.5px),
		radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #F6E2A2 0 2px, #8C6A1F 3px, transparent 3.5px);
	pointer-events: none;
}

/* The trophy band, like the strip under the portrait on the official page. */
.gp-pp .gp-pp-trophies {
	padding: 4px;
	border-left: 1px solid light-dark(#B5AD85, #3A5068);
	border-right: 1px solid light-dark(#B5AD85, #3A5068);
	background: light-dark(#CDCDB4, #24323F);
}

.gp-pp .gp-pp-credit {
	border-top-color: light-dark(#B5AD85, #3A5068);
}

/* The lookup's states. */
.gp-pp-state {
	display: grid;
	justify-items: center;
	gap: 0.35rem;
	padding: 1.4rem 1rem;
	border: 2px dashed var(--gp-panel-border);
	border-radius: var(--gp-frame-radius);
	background: var(--gp-surface-2);
	text-align: center;
}

.gp-pp-state > .gp-pp-icon {
	width: 2.6rem;
	height: 2.6rem;
	margin: 0;
}

.gp-pp-state p {
	margin: 0;
}

.gp-pp-state__title {
	font-family: var(--gp-head-font);
	font-size: 1.6rem;
	color: var(--gp-title-ink);
}

.gp-pp-state--missing {
	border-color: var(--gp-warn);
}

.gp-pp-state--error {
	border-color: var(--gp-bad);
}

.gp-pp-state--searching > .gp-pp-icon {
	animation: gp-pp-wheel 2.4s linear infinite;
}

@keyframes gp-pp-wheel {
	to { transform: rotate(360deg); }
}

.gp-pp-state__oceans {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.35rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
}

.gp-pp-recent .gp-chip {
	font-size: 0.95rem;
	min-height: 2rem;
}

/* ---- the preview popover --------------------------------------------------------------------------------------- */

.gp-pop[data-game="pirates"],
.gp-pp .gp-pop {
	border: 2px solid var(--gp-pop-border);
	border-radius: 4px;
	background:
		repeating-linear-gradient(97deg, light-dark(rgba(122, 82, 48, 0.04), rgba(255, 255, 255, 0.02)) 0 1px, transparent 1px 6px),
		var(--gp-pop-bg);
	box-shadow: var(--gp-pop-shadow), inset 0 0 0 3px light-dark(rgba(255, 250, 235, 0.6), rgba(255, 255, 255, 0.03));
	color: var(--gp-ink);
}

.gp-pop[data-game="pirates"] a {
	color: var(--gp-accent);
	font-weight: 700;
}

.gp-pop[data-game="pirates"] .gp-pp-icon {
	color: var(--gp-accent);
}

.gp-pp-peek__name strong {
	font-family: var(--gp-head-font);
	font-weight: 400;
	font-size: 1.45rem;
	color: var(--gp-title-ink);
}

.gp-pp-peek__frame {
	padding: 4px;
	border: 6px solid transparent;
	border-image: linear-gradient(160deg, #9A6634, #5A361A 40%, #8A5A2C 70%, #4A2C14) 6;
	background: light-dark(#E5DCB9, #0F1A24);
}

.gp-pp-who {
	text-decoration-style: dotted;
}

/* ---- the sources line and the fan-site footing stay readable on parchment ------------------------------------- */

.gp-pp .gp-pp-sources,
.gp-pp .gp-pp-read,
.gp-pp .gp-pp-muted {
	color: var(--gp-ink-muted);
}

.gp-pp .gp-note {
	border-left: 4px solid var(--gp-accent-2);
	background: var(--gp-surface-2);
	color: var(--gp-ink);
}

@media (prefers-reduced-motion: reduce) {
	.gp-pp-live::before,
	.gp-pp-state--searching > .gp-pp-icon {
		animation: none;
	}
}

@media (forced-colors: active) {
	.gp-pp .gp-chip[aria-pressed="true"],
	.gp-pp label.gp-chip:has(input:checked) {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}

	.gp-pp-flag {
		forced-color-adjust: none;
	}
}