/*
 * Game Pulse look: brighter-shores (r12). The look contract is docs/pilot/game-pulse-r12-design.md: token values for
 * [data-game="brighter-shores"] and .is-game-brighter-shores, then the game's own ornaments, all scoped to this game.
 *
 * Brighter Shores, drawn by Game Pulse in CSS: a bright, friendly storybook. A sunny sky over the sea in the band (dusk
 * in the dark scheme), soft rounded panels with a white rim, chunky friendly headings, and a cheerful accent colour per
 * profession (the dot, the row edge and the chip of each one). The palette keeps the official site's sea #143140, sky
 * #51B0DE and sun #E1D752. No game art is used (Fen Research publishes no fan content policy); 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/brighter-shores/OFL.txt, latin subset, woff2, 33 KB):
 * - Fredoka (SemiBold 600) by the Fredoka Project Authors (Milena Brandao), from the npm package @fontsource/fredoka
 *   5.3.0: headings and the big numbers.
 * - Nunito (Regular 400) by the Nunito Project Authors (Vernon Adams), from the npm package @fontsource/nunito 5.3.0:
 *   body text.
 * The text stays on the site's centre line: nothing here pads or left-justifies a column.
 */

@font-face {
	font-family: "Fredoka";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/brighter-shores/fredoka-latin-600-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/brighter-shores/nunito-latin-400-normal.woff2") format("woff2");
}

/* Metric-close fallbacks while the faces load (no layout jump). */
@font-face {
	font-family: "GP Fredoka Fallback";
	src: local("Arial Rounded MT Bold"), local("Verdana"), local("Arial");
	size-adjust: 96%;
}

@font-face {
	font-family: "GP Nunito Fallback";
	src: local("Segoe UI"), local("Arial");
	size-adjust: 101%;
}

[data-game="brighter-shores"],
.is-game-brighter-shores {
	--gp-surface: light-dark(#FFFDF5, #12303F);
	--gp-surface-2: light-dark(#FFFFFF, #173A4B);
	--gp-surface-sunk: light-dark(#EEF7FB, #0D2430);
	--gp-ink: light-dark(#163847, #EEF5F2);
	--gp-ink-muted: light-dark(#44606B, #B3CBD1);
	--gp-ink-strong: light-dark(#0E2833, #FFFFFF);
	--gp-accent: light-dark(#17698F, #7CC9EC);
	--gp-accent-ink: light-dark(#FFFFFF, #0B1E27);
	--gp-accent-2: #E1D752;
	--gp-title-ink: light-dark(#143140, #F6F0BE);
	--gp-title-shadow: light-dark(0 2px 0 rgba(225, 215, 82, 0.55), 0 2px 0 rgba(0, 0, 0, 0.45));
	--gp-head-font: "Fredoka", "GP Fredoka Fallback", "Trebuchet MS", sans-serif;
	--gp-body-font: "Nunito", "GP Nunito Fallback", "Segoe UI", sans-serif;
	--gp-num-font: "Fredoka", "GP Fredoka Fallback", "Trebuchet MS", sans-serif;
	--gp-frame-border: 3px solid light-dark(#FFFFFF, #2A5266);
	--gp-frame-radius: 22px;
	--gp-frame-shadow: 0 0 0 1px light-dark(rgba(20, 49, 64, 0.1), rgba(0, 0, 0, 0.3)), 0 6px 0 light-dark(rgba(81, 176, 222, 0.18), rgba(0, 0, 0, 0.25)), 0 20px 34px -22px rgba(20, 49, 64, 0.55);
	--gp-frame-image: none;
	--gp-tab-bg: #143140;
	--gp-tab-ink: #D7ECF4;
	--gp-tab-active-bg: #E1D752;
	--gp-tab-active-ink: #143140;
	--gp-tab-shape: none;
	--gp-btn-bg: light-dark(#FFFFFF, #173A4B);
	--gp-btn-ink: light-dark(#143140, #EEF5F2);
	--gp-btn-border: light-dark(#9EC3CD, #2F6680);
	--gp-btn-hover-bg: light-dark(#E3F1F7, #1E4A5F);
	--gp-table-head-bg: light-dark(#E3F1F7, #1C4458);
	--gp-table-head-ink: light-dark(#143140, #F6F0BE);
	--gp-row-alt: light-dark(rgba(81, 176, 222, 0.06), rgba(255, 255, 255, 0.03));
	--gp-row-hover: light-dark(rgba(225, 215, 82, 0.2), rgba(225, 215, 82, 0.08));
	--gp-grid-line: light-dark(#D3E6EC, #2A5266);
	--gp-good: light-dark(#1F7A45, #7FD39B);
	--gp-bad: light-dark(#B03A2E, #F2A08F);
	--gp-warn: light-dark(#8A6D00, #E1D752);
	--gp-pop-bg: light-dark(#FFFFFF, #173A4B);
	--gp-pop-border: light-dark(#9EC3CD, #2F6680);
	--gp-pop-shadow: 0 18px 36px -16px rgba(20, 49, 64, 0.55);
	/* The band: a sunny sky over the sea by day, dusk at night; puffy clouds and a scalloped shore. */
	--gp-hero-bg:
		radial-gradient(circle at 86% 26%, light-dark(#FFF6B8, #F6E7A0) 0 2.2rem, light-dark(rgba(255, 236, 120, 0.55), rgba(246, 210, 120, 0.25)) 2.3rem, transparent 6rem),
		radial-gradient(60px 26px at 18% 32%, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12)) 60%, transparent 62%),
		radial-gradient(44px 22px at 22% 28%, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12)) 60%, transparent 62%),
		radial-gradient(70px 28px at 62% 22%, light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 60%, transparent 62%),
		radial-gradient(48px 22px at 67% 18%, light-dark(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.1)) 60%, transparent 62%),
		radial-gradient(18px 10px at 50% 100%, light-dark(#3FA1D2, #1C5068) 98%, transparent) 0 100% / 36px 14px repeat-x,
		linear-gradient(180deg, light-dark(#8FD3F4, #1B3A5C) 0%, light-dark(#C6EBFB, #3D5C7A) 62%, light-dark(#51B0DE, #1C5068) 62%, light-dark(#2E8FC0, #143140) 100%);
	--gp-hero-rule: #E1D752;
	--gp-hero-accent: light-dark(#17698F, #E1D752);
	--gp-hero-title: light-dark(#143140, #FFFFFF);
	--gp-hero-ink: light-dark(#163847, #E4F1F5);
	--gp-hero-pill: light-dark(rgba(20, 49, 64, 0.25), rgba(81, 176, 222, 0.65));
	--gp-tabs-bg: #143140;
	--gp-tabs-rule: #2A5266;
	--gp-tabs-ink: #D7ECF4;
	--gp-tabs-active: #E1D752;
	--gp-primary: light-dark(#17698F, #7CC9EC);
	--gp-on-primary: light-dark(#FFFFFF, #0B1E27);
	--gp-radius: 18px;
	--gp-radius-sm: 12px;
	--gp-panel-border: light-dark(#FFFFFF, #2A5266);
	--gp-panel-bg:
		radial-gradient(120% 80% at 100% 0%, light-dark(rgba(225, 215, 82, 0.14), rgba(225, 215, 82, 0.05)), transparent 55%),
		radial-gradient(110% 70% at 0% 100%, light-dark(rgba(81, 176, 222, 0.12), rgba(81, 176, 222, 0.07)), transparent 60%),
		light-dark(#FFFDF5, #12303F);
	--gp-panel-title: light-dark(#143140, #F6F0BE);
	--wp--preset--color--ink: light-dark(#163847, #EEF5F2);
	--wp--preset--color--muted: light-dark(#44606B, #B3CBD1);
}

/* On a phone the sun sits small in the corner, clear of the title. */
@media (max-width: 640px) {
	[data-game="brighter-shores"],
	.is-game-brighter-shores {
		--gp-hero-bg:
			radial-gradient(circle at calc(100% - 1.6rem) 1.5rem, light-dark(#FFF6B8, #F6E7A0) 0 1rem, light-dark(rgba(255, 236, 120, 0.55), rgba(246, 210, 120, 0.25)) 1.1rem, transparent 2.6rem),
			radial-gradient(40px 18px at 12% 18%, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12)) 60%, transparent 62%),
			radial-gradient(30px 15px at 17% 14%, light-dark(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.12)) 60%, transparent 62%),
			radial-gradient(18px 10px at 50% 100%, light-dark(#3FA1D2, #1C5068) 98%, transparent) 0 100% / 36px 14px repeat-x,
			linear-gradient(180deg, light-dark(#8FD3F4, #1B3A5C) 0%, light-dark(#C6EBFB, #3D5C7A) 45%, light-dark(#51B0DE, #1C5068) 45%, light-dark(#2E8FC0, #143140) 100%);
	}
}

/* Each profession's cheerful accent. */
.is-game-brighter-shores [data-profession="combat"] { --gp-bs-prof: #E0533D; }
.is-game-brighter-shores [data-profession="forager"] { --gp-bs-prof: #6DBE45; }
.is-game-brighter-shores [data-profession="fisher"] { --gp-bs-prof: #2F8FD8; }
.is-game-brighter-shores [data-profession="chef"] { --gp-bs-prof: #F2704E; }
.is-game-brighter-shores [data-profession="alchemist"] { --gp-bs-prof: #9B6BE0; }
.is-game-brighter-shores [data-profession="botanist"] { --gp-bs-prof: #2FB67C; }
.is-game-brighter-shores [data-profession="gatherer"] { --gp-bs-prof: #2FB67C; }
.is-game-brighter-shores [data-profession="woodcutter"] { --gp-bs-prof: #A8703A; }
.is-game-brighter-shores [data-profession="carpenter"] { --gp-bs-prof: #E0A43A; }
.is-game-brighter-shores [data-profession="miner"] { --gp-bs-prof: #6F8199; }
.is-game-brighter-shores [data-profession="bonewright"] { --gp-bs-prof: #CDB892; }
.is-game-brighter-shores [data-profession="blacksmith"] { --gp-bs-prof: #4F6D8F; }
.is-game-brighter-shores [data-profession="stonemason"] { --gp-bs-prof: #C9935B; }
.is-game-brighter-shores [data-profession="detective"] { --gp-bs-prof: #5964D6; }
.is-game-brighter-shores [data-profession="leatherworker"] { --gp-bs-prof: #B35E3A; }
.is-game-brighter-shores [data-profession="merchant"] { --gp-bs-prof: #E1C531; }
.is-game-brighter-shores [data-profession="builder"] { --gp-bs-prof: #F28C28; }
.is-game-brighter-shores [data-profession="armorer"] { --gp-bs-prof: #8FA3B8; }
.is-game-brighter-shores [data-profession="delver"] { --gp-bs-prof: #8D6E4E; }
.is-game-brighter-shores [data-profession="guard"],
.is-game-brighter-shores [data-profession="scout"],
.is-game-brighter-shores [data-profession="minefighter"],
.is-game-brighter-shores [data-profession="watchperson"] { --gp-bs-prof: #E0533D; }

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

.gp-hero.is-game-brighter-shores {
	color-scheme: inherit;
	padding-bottom: clamp(2rem, 4vw, 2.75rem);
	border-bottom: 0;
	box-shadow: inset 0 -6px 0 #E1D752;
}

.gp-hero.is-game-brighter-shores .gp-hero__title {
	font-family: var(--gp-head-font);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-shadow: light-dark(0 3px 0 rgba(255, 255, 255, 0.85), 0 3px 0 rgba(0, 0, 0, 0.45));
}

.gp-hero.is-game-brighter-shores .gp-hero__eyebrow {
	font-family: var(--gp-head-font);
	letter-spacing: 0.08em;
}

.gp-hero.is-game-brighter-shores .gp-hero__facts li {
	border-radius: 999px;
	background: light-dark(rgba(255, 255, 255, 0.75), rgba(20, 49, 64, 0.55));
	font-family: var(--gp-body-font);
	font-weight: 600;
}

.gp-hero.is-game-brighter-shores select,
.gp-hero.is-game-brighter-shores button {
	color-scheme: inherit;
	color: light-dark(#143140, #FFFFFF);
	background: light-dark(rgba(255, 255, 255, 0.85), rgba(20, 49, 64, 0.7));
	border-color: light-dark(rgba(20, 49, 64, 0.35), rgba(81, 176, 222, 0.6));
}

.gp-subnav.is-game-brighter-shores a {
	font-family: var(--gp-head-font);
	font-weight: 600;
	font-size: 1.02rem;
	border-bottom: 0;
	border-radius: 999px;
	margin-block: 0.35rem;
	padding: 0.4rem 1rem;
}

.gp-subnav.is-game-brighter-shores a[aria-current="page"] {
	color: var(--gp-tab-active-ink);
	background: var(--gp-tab-active-bg);
	box-shadow: 0 3px 0 #B5AB2E;
}

/* ---- panels: soft rounded pages of the storybook -------------------------------------------------------------- */

.is-game-brighter-shores .gp-section {
	font-family: var(--gp-body-font);
}

.is-game-brighter-shores .gp-section .gp-panel {
	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);
}

.is-game-brighter-shores .gp-panel__title {
	position: relative;
	padding-bottom: 0.55rem;
	font-family: var(--gp-head-font);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	line-height: 1.2;
	color: var(--gp-title-ink);
	text-shadow: var(--gp-title-shadow);
}

/* A little wave under each heading: sky, sea and a dot of sun. */
.is-game-brighter-shores .gp-panel__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 5.5rem;
	height: 8px;
	background:
		radial-gradient(circle at 4px 4px, #E1D752 3.5px, transparent 4px) right center / 8px 8px no-repeat,
		radial-gradient(8px 6px at 50% 0%, transparent 5px, #51B0DE 5.5px 7.5px, transparent 8px) 0 0 / 16px 8px repeat-x;
	-webkit-mask: linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 8px), #000 0);
	mask: linear-gradient(90deg, #000 calc(100% - 12px), transparent calc(100% - 12px) calc(100% - 8px), #000 0);
}

.is-game-brighter-shores .gp-section a {
	color: var(--gp-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--gp-accent) 35%, transparent);
}

.is-game-brighter-shores .gp-section a:hover {
	text-decoration-color: #E1D752;
}

.is-game-brighter-shores .gp-section :focus-visible {
	outline: 3px solid #E1D752;
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---- the "right now" strip: friendly tiles in sky, sun, mint and peach ---------------------------------------- */

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

.gp-bs .gp-kpi {
	display: grid;
	justify-items: center;
	align-content: start;
	gap: 0.15rem;
	padding: 0.9rem 0.9rem 0.8rem;
	border-radius: 18px;
	text-align: center;
	background: light-dark(#E6F4FB, #18445A);
	box-shadow: inset 0 -4px 0 light-dark(rgba(81, 176, 222, 0.35), rgba(0, 0, 0, 0.25));
}

.gp-bs .gp-kpi:nth-child(2) { background: light-dark(#FBF6D2, #3A3A1E); box-shadow: inset 0 -4px 0 light-dark(rgba(225, 215, 82, 0.6), rgba(0, 0, 0, 0.25)); }
.gp-bs .gp-kpi:nth-child(3) { background: light-dark(#E2F6EA, #173F33); box-shadow: inset 0 -4px 0 light-dark(rgba(47, 182, 124, 0.4), rgba(0, 0, 0, 0.25)); }
.gp-bs .gp-kpi:nth-child(4) { background: light-dark(#FDE9E1, #45291F); box-shadow: inset 0 -4px 0 light-dark(rgba(242, 112, 78, 0.4), rgba(0, 0, 0, 0.25)); }

.gp-bs .gp-kpi .gp-bs-icon {
	width: 2.4rem;
	height: 2.4rem;
	padding: 0.35rem;
	border-radius: 50%;
	background: light-dark(#FFFFFF, rgba(255, 255, 255, 0.12));
	box-shadow: 0 2px 0 rgba(20, 49, 64, 0.12);
}

.gp-bs .gp-kpi__value {
	font-family: var(--gp-num-font);
	font-weight: 600;
	font-size: clamp(1.7rem, 3.4vw, 2.3rem);
	line-height: 1.05;
	color: var(--gp-title-ink);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.gp-bs .gp-kpi__label {
	font-family: var(--gp-head-font);
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--gp-ink);
}

.gp-bs .gp-kpi__note {
	font-size: 0.85rem;
	color: var(--gp-ink-muted);
}

.gp-bs-delta {
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	background: light-dark(#FFFFFF, rgba(255, 255, 255, 0.1));
}

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

.gp-bs-spark {
	display: block;
	width: 100%;
	height: 1.7rem;
	margin-top: 0.3rem;
	overflow: visible;
}

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

/* ---- professions: a dot, a row edge and a chip in each one's colour ------------------------------------------- */

.gp-bs-prof {
	display: inline-block;
	flex: none;
	width: 0.75em;
	height: 0.75em;
	margin-right: 0.4em;
	border-radius: 50%;
	vertical-align: 0;
	background: var(--gp-bs-prof, #51B0DE);
	box-shadow: 0 0 0 2px light-dark(#FFFFFF, #12303F), 0 0 0 3px color-mix(in srgb, var(--gp-bs-prof, #51B0DE) 55%, transparent);
}

.gp-bs .gp-table tr[data-profession] > th {
	box-shadow: inset 4px 0 0 var(--gp-bs-prof, #51B0DE);
}

.gp-bs .gp-bs-chip--prof {
	color: var(--gp-ink);
	background: color-mix(in srgb, var(--gp-bs-prof, #51B0DE) 16%, light-dark(#FFFFFF, #173A4B));
	border-color: color-mix(in srgb, var(--gp-bs-prof, #51B0DE) 55%, transparent);
	font-size: 0.82rem;
	margin: 0.1rem 0;
}

.gp-bs-episode__profs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.3rem;
}

.gp-bs .gp-bs-episode {
	justify-items: center;
	text-align: center;
	border: 3px solid light-dark(#FFFFFF, #2A5266);
	border-top: 3px solid light-dark(#FFFFFF, #2A5266);
	border-radius: 20px;
	background:
		radial-gradient(120% 60% at 50% 0%, light-dark(rgba(81, 176, 222, 0.16), rgba(81, 176, 222, 0.08)), transparent 70%),
		light-dark(#FFFFFF, #173A4B);
	box-shadow: 0 4px 0 light-dark(rgba(81, 176, 222, 0.2), rgba(0, 0, 0, 0.25)), 0 14px 24px -18px rgba(20, 49, 64, 0.5);
}

.gp-bs .gp-bs-episode > .gp-bs-icon {
	width: 3rem;
	height: 3rem;
	padding: 0.45rem;
	border-radius: 50%;
	background: light-dark(#FBF6D2, #3A3A1E);
	box-shadow: 0 3px 0 light-dark(rgba(225, 215, 82, 0.6), rgba(0, 0, 0, 0.3));
}

.gp-bs .gp-bs-episode.is-future {
	border-style: dashed;
	border-color: light-dark(#9EC3CD, #2F6680);
}

.gp-bs .gp-bs-episode h3 {
	font-family: var(--gp-head-font);
	font-weight: 600;
	font-size: 1.12rem;
}

/* ---- tables: rounded, airy rows -------------------------------------------------------------------------------- */

.gp-bs .gp-table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 2px solid var(--gp-grid-line);
	border-radius: 16px;
	background: var(--gp-surface-2);
}

.gp-bs .gp-table thead th {
	background: var(--gp-table-head-bg);
	color: var(--gp-table-head-ink);
	font-family: var(--gp-head-font);
	font-weight: 600;
}

.gp-bs .gp-table th,
.gp-bs .gp-table td {
	border-bottom: 1px solid var(--gp-grid-line);
}

.gp-bs .gp-table tbody tr:last-child > * {
	border-bottom: 0;
}

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

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

.gp-bs .gp-table th[data-sort] {
	cursor: pointer;
}

.gp-bs .gp-table th[aria-sort="ascending"]::after { content: " \2191"; }
.gp-bs .gp-table th[aria-sort="descending"]::after { content: " \2193"; }

.gp-bs .gp-table tr.is-new > * {
	background: light-dark(#FBF6D2, rgba(225, 215, 82, 0.12));
}

/* On phones each row of a board becomes a small rounded card, read top to bottom on the centre line. */
@media (max-width: 640px) {
	.gp-bs .gp-board thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.gp-bs .gp-board,
	.gp-bs .gp-board tbody,
	.gp-bs .gp-board tr,
	.gp-bs .gp-board th,
	.gp-bs .gp-board td {
		display: block;
		width: auto;
	}

	.gp-bs .gp-board {
		border: 0;
		background: transparent;
	}

	.gp-bs .gp-board tr {
		margin: 0 0 0.6rem;
		padding: 0.45rem 0.5rem;
		border: 2px solid var(--gp-grid-line);
		border-radius: 16px;
		background: var(--gp-surface-2);
		text-align: center;
	}

	.gp-bs .gp-board tr[hidden] {
		display: none;
	}

	.gp-bs .gp-table.gp-board tbody tr:nth-child(n) > * {
		padding: 0.2rem 0.3rem;
		text-align: center;
		border-bottom: 0;
		background: transparent;
	}

	.gp-bs .gp-board tr[data-profession] > th {
		box-shadow: none;
	}

	.gp-bs .gp-board tr[data-profession] {
		border-top: 5px solid var(--gp-bs-prof, #51B0DE);
	}
}

/* ---- the folded day table, chips and filters ----------------------------------------------------------------- */

.gp-bs-fold summary {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.95rem;
	border: 2px solid var(--gp-btn-border);
	border-radius: 999px;
	background: var(--gp-btn-bg);
	color: var(--gp-btn-ink);
	font-family: var(--gp-head-font);
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.gp-bs-fold summary::-webkit-details-marker {
	display: none;
}

.gp-bs-fold summary::after {
	content: "+";
	font-size: 1.1rem;
	line-height: 1;
}

.gp-bs-fold[open] summary::after {
	content: "\2212";
}

.gp-bs-fold[open] summary {
	margin-bottom: 0.75rem;
}

.gp-bs .gp-bs-chip {
	border-radius: 999px;
	border-width: 2px;
	font-family: var(--gp-body-font);
}

.gp-bs .gp-bs-chip--patch {
	background: light-dark(#E2F6EA, #173F33);
	border-color: light-dark(#7FCFA2, #2F7D4F);
}

.gp-bs .gp-filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.6rem 1rem;
}

.gp-bs .gp-seg {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	padding: 0.25rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
}

.gp-bs .gp-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-height: 2.2rem;
	padding: 0.25rem 0.95rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--gp-btn-ink);
	font-family: var(--gp-head-font);
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
}

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

.gp-bs .gp-chip[aria-pressed="true"] {
	color: #143140;
	background: #E1D752;
	box-shadow: 0 3px 0 #B5AB2E;
}

.gp-bs .gp-chip__count {
	min-width: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: light-dark(rgba(20, 49, 64, 0.08), rgba(255, 255, 255, 0.14));
	font-size: 0.8rem;
}

.gp-bs .gp-search {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--gp-head-font);
	font-weight: 600;
}

.gp-bs .gp-search {
	max-width: 100%;
}

.gp-bs .gp-search input {
	min-height: 2.3rem;
	min-width: 0;
	width: min(16rem, 60vw);
	padding: 0.35rem 1rem;
	border: 2px solid var(--gp-btn-border);
	border-radius: 999px;
	background: var(--gp-surface-2);
	color: var(--gp-ink);
	font: inherit;
}

.gp-bs [hidden] {
	display: none !important;
}

.gp-bs-empty {
	text-align: center;
	color: var(--gp-ink-muted);
}

/* The nameplates of the record holders: a sunlit disc and a chunky name. */
.gp-plate--brighter-shores .gp-plate__name {
	font-family: var(--gp-head-font);
	font-weight: 600;
}

.is-game-brighter-shores .gp-sources-line,
.gp-bs .gp-bs-read {
	color: var(--gp-ink-muted);
}

@media (forced-colors: active) {
	.gp-bs-prof {
		forced-color-adjust: none;
	}

	.gp-bs .gp-chip[aria-pressed="true"] {
		forced-color-adjust: none;
		background: Highlight;
		color: HighlightText;
	}
}

/* w15 contrast: the current range is a filled button; the section's link colour made its text the colour of its own
   background. */
.is-game-brighter-shores .gp-section .gp-stat-chart__ranges a[aria-current="true"] {
	color: var(--gp-accent-ink);
	text-decoration: none;
}