/**
 * Jetons visuels Papi Jumper.
 * Préfixe .pj- : ces règles ne s’appliquent qu’aux futurs écrans du thème.
 */

:root {
	--pj-blue: #0030f8;
	--pj-red: #f81828;
	--pj-ink: #080810;
	--pj-white: #ffffff;
	--pj-paper: #f3f5f8;
	--pj-muted: #5c6370;
	--pj-line: #e6e8ef;
	--pj-font-display: "Arial Narrow", Impact, sans-serif;
	--pj-font-script: "Segoe Script", "Brush Script MT", cursive;
	--pj-font-body: inherit;
	--pj-radius-card: 16px;
	--pj-radius-button: 999px;
	--pj-nav-height: 64px;
	--pj-player-height: 90px;
	--pj-safe-bottom: env(safe-area-inset-bottom, 0px);
	--pj-space: 16px;
}

.pj-display {
	font-family: var(--pj-font-display);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--pj-ink);
}

.pj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 0 22px;
	border: 0;
	border-radius: var(--pj-radius-button);
	background: var(--pj-red);
	color: var(--pj-white);
	font-family: var(--pj-font-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.pj-card {
	background: var(--pj-paper);
	border-radius: var(--pj-radius-card);
	color: var(--pj-ink);
	padding: var(--pj-space);
}

.pj-sticker {
	display: inline-block;
	font-family: var(--pj-font-script);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--pj-red);
}

.pj-sticker--blue {
	color: var(--pj-blue);
}

.pj-nav {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	height: calc(var(--pj-nav-height) + var(--pj-safe-bottom));
	padding-bottom: var(--pj-safe-bottom);
	background: var(--pj-white);
	border-top: 1px solid var(--pj-line);
	color: var(--pj-muted);
}

.pj-nav__item--live {
	color: var(--pj-red);
}

.pj-player {
	display: flex;
	align-items: center;
	height: var(--pj-player-height);
	padding: 0 12px;
	background: var(--pj-ink);
	color: var(--pj-white);
}

.pj-screen--music {
	background: var(--pj-ink);
	color: var(--pj-white);
}