/* Game overlay reminding to select a player */
.game-overlay-wrapper {
	display: inline-flex;
	position: relative;
}
.game-overlay {
	font-size: 1.25em;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	backdrop-filter: blur(5px);
	color: white;
	text-wrap: balance;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	inset: 0;
	opacity: 1;
	transition: opacity 0.5s;
}
.game-overlay__title {
	color: inherit;
	font-size: 1.5em;
}
.game-overlay__button {
	font-size: inherit;
	font-weight: bold;
	background-color: #8300e9;
  	color: white;
	border: none;
	border-radius: 0.5em;
	padding: 0.5em 1.5em;
	margin-top: 1em;
}

/* Scores sidebar */
.c-score {
	background-color: #ffcf3d;
    padding: 1em;
	margin-bottom: 3em;
	box-shadow: 0px 0px 11px 0px rgba(133,133,133,1);
	border-radius: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.5em;
}
.c-score__title {
    font-size: 2em;
	padding-bottom: 0;
	text-align: center;
	color: inherit;
}

.c-score__needs-migrate-message {
	text-align: center;
}
.c-score__needs-migrate-message button {
  	margin-top: 0.75em;
}

/* "Qui joue ?" text */
.c-score__form-intro {
	display: block;
	text-align: center;
	margin-bottom: 0.5em;
}

/* Players list */
.c-score__players {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	text-align: center;
}
/* Players list in recapitulative page: add border and padding */
.c-scores-overview .c-score__players {
	padding: 1em;
	background: #f0f0f0;
	border-radius: 0.5em;
	margin-bottom: 1.5em;
}
.c-score__players--has-search {
	/* Display only the 2 most recently used players on a single line */
	flex-wrap: nowrap;
	/* Put the search form at the bottom */
	position: relative;
}

/* Player item (with color, initial and name) */
.c-score__player {
	display: flex;
	flex-shrink: 0;
	--color: black;
	border: 2px solid color-mix(in srgb, var(--color) 40%, transparent);
	padding: 0.25em 0.5em;
	border-radius: 0.5em;
	align-items: center;
}
.c-score__player, .c-score__player:hover {
	/* Force the text color to be black, even when the player is hovered */
	/* (players are often links) */
	color: black;
}
.c-score__players--has-search .c-score__player {
	padding: 0.25em;
	flex-shrink: 1;
	/* Make the elements start with the same size, so that they shrink equally */
	flex-basis: 9999px;
	/* Disable the default minimum width calculation */
	/* https://leonardofaria.net/2020/07/18/using-flexbox-and-text-ellipsis-together */
	min-width: 0;
}
/* Don't shrink the "more players" icon */
/* Note: we need .c-score__players for specificity */
.c-score__players .c-score__player--more-players-icon {
	flex-shrink: 0;
	flex-basis: unset;
}
.c-score__players .c-score__player:focus,
.c-score__players .c-score__player.c-score__player--selected {
	background-color: color-mix(in srgb, var(--color) 10%, transparent);
	border-color: var(--color);
}
.c-score__players .c-score__player:hover {
	background-color: color-mix(in srgb, var(--color) 40%, transparent);
	border-color: var(--color);
}
.c-score__player--initial {
	padding: 0.25em;
	border-radius: 50%;
	margin-right: 0.3em;
	background-color: color-mix(in srgb, var(--color) 20%, transparent);
	color: var(--color);
	font-weight: bold;
	flex-shrink: 0;
	width: 1.5em;
	height: 1.5em;
	line-height: 1;
	text-align: center;
}
.c-score__player--name {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: inherit;
}
.c-score__player--new {
	border-style: dotted !important;
	border-color: var(--color) !important;
}
.c-score__player--new .c-score__player--initial {
	background: none;
}
.c-score__player--more {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 0.25em;
	padding-top: 0;
	border-radius: 0.25em;
  	background-color: #ffcf3d;
  	box-shadow: 0 0 1em black;
  	clip-path: polygon(-1em 0%, calc(100% + 1em) 0%, calc(100% + 1em) calc(100% + 1em), -1em calc(100% + 1em));
	box-sizing: content-box;
	display: none;
	max-height: 10em;
  	overflow-y: scroll;
	/* Display over the ad just below */
	z-index: 3;
}
.c-score__player--more.c-score__player--open {
	display: block;
}
.c-score__player--more input {
	width: 100%;
	margin: 0 -0.25em;
	position: sticky;
	top: 0;
}
.c-score__player--more .c-score__player.hidden {
	display: none;
}

.c-score__player-name-input {
	padding: 0.25em 0.5em;
    border-radius: 0.25em;
	width: 100%;
}

.c-score__info {
	text-align: center;
}

.c-score__player--name {
	font-weight: bold;
}

.c-score__player-info-first-line {
	display: flex;
	align-items: center;
	gap: 0.5em;
}
.c-score__player-greeting {
	display: flex;
	align-items: center;
	white-space: nowrap;
	min-width: 0;
  	overflow: hidden;
}
.c-score__player-greeting .c-score__player--name {
	margin-left: 0.25em;
}
.c-score__player-info-first-line a.icon-change-user {
	margin-left: auto;
}

.c-score .button {
	display: block;
	text-align: center;
	width: 100%;
	padding: 0.25em 0.5em;
	background-color: #8300e9;
	border: none;
	color: white;
	border-radius: 0.25em;
	font-weight: bold;
}
.c-score a.small-link {
	display: block;
	text-align: center;
	font-size: 0.8em;
	color: unset;
}
.c-score a.small-link:hover {
	text-decoration: underline;
}


.c-score h3 {
    font-size: 1.5em;
	margin-top: 10px;
	text-align: center;
	color: inherit;
}

.c-score__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0;
}

.c-score__history .c-score__item a {
	font-weight: bold;
	color: #5b5b5b;
    display: flex;
	align-items: center;
}

.c-score__history .c-score__item {
	padding: 0 5px;
}

.c-score__history .c-score__item:not(:last-child) {
	border-bottom: 2px dotted #fff;
}

.c-score__success,
.c-score__item--surprise {
	background-color: #5fc053;
}

.c-score__success a,
.c-score__item--surprise a {
	color: #fff;
}

.c-score__success a {
	color: #fff;
    width: 100%;
}

.c-score__item .icon-star {
	width: 1.5em;
	height: 1.5em;
	margin-left: auto;
	color: #ffd43b;
	opacity: 0;
}
.c-score__success .icon-star {
	opacity: 1;
}

.c-score__word .c-score__list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 10px;
}

.c-score__word .c-score__item {
	flex: 0 0 calc(50% - 10px);
}

.c-score__word img {
	vertical-align: middle;
}

/* Scores overview */
.c-scores-overview--loading {
	pointer-events: none;
	position: relative;
}
.c-scores-overview--loading::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 3;
}
.c-scores-overview--loading::after {
	content: "Chargement...";
	color: white;
	z-index: 3;
	position: absolute;
	left: 50%;
	top: 1em;
	font-size: 2em;
	transform: translateX(-50%);
}

h2 .icon-edit, h2 .icon-delete {
	font-size: 1.5rem;
	vertical-align: middle;
}
.icon-change-user, .icon-edit, .icon-delete, .icon-more, .icon-star, .icon-game, .icon-chart {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}
/*
Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free
Copyright 2026 Fonticons, Inc.
Compressed with https://svgomg.net/
*/
.icon-edit {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M535.6 85.7c-21.9-21.9-57.3-21.9-79.2 0L432 110.1l97.9 97.9 24.4-24.4c21.9-21.9 21.9-57.3 0-79.2zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L496 241.9 398.1 144zM160 128c-53 0-96 43-96 96v256c0 53 43 96 96 96h256c53 0 96-43 96-96v-96c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32z"/></svg>');
}
.icon-delete, .scores-table .delete-progress {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M232.7 69.9L224 96L128 96C110.3 96 96 110.3 96 128C96 145.7 110.3 160 128 160L512 160C529.7 160 544 145.7 544 128C544 110.3 529.7 96 512 96L416 96L407.3 69.9C402.9 56.8 390.7 48 376.9 48L263.1 48C249.3 48 237.1 56.8 232.7 69.9zM512 208L128 208L149.1 531.1C150.7 556.4 171.7 576 197 576L443 576C468.3 576 489.3 556.4 490.9 531.1L512 208z"/></svg>');
}
.icon-change-user {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 192c0-61.9 50.1-112 112-112s112 50.1 112 112-50.1 112-112 112S96 253.9 96 192M32 528c0-97.2 78.8-176 176-176s176 78.8 176 176v6c0 23.2-18.8 42-42 42H74c-23.2 0-42-18.8-42-42zm432-400c53 0 96 43 96 96s-43 96-96 96-96-43-96-96 43-96 96-96m0 240c79.5 0 144 64.5 144 144v22.4c0 23-18.6 41.6-41.6 41.6H421.6c6.6-12.5 10.4-26.8 10.4-42v-6c0-51.5-17.4-98.9-46.5-136.7 22.6-14.7 49.6-23.3 78.5-23.3"/></svg>');
}
.icon-more {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320 64C178.6 64 64 178.6 64 320s114.6 256 256 256 256-114.6 256-256S461.4 64 320 64M199 305c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l87 87 87-87c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9L337 409c-9.4 9.4-24.6 9.4-33.9 0z"/></svg>');
}
.icon-star {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M341.5 45.1c-4.1-8-12.4-13.1-21.4-13.1s-17.3 5.1-21.4 13.1l-73.6 144.2-159.9 25.4c-8.9 1.4-16.3 7.7-19.1 16.3s-.5 18 5.8 24.4l114.4 114.5-25.2 159.9c-1.4 8.9 2.3 17.9 9.6 23.2s16.9 6.1 25 2l144.4-73.4L464.4 555c8 4.1 17.7 3.3 25-2s11-14.2 9.6-23.2l-25.3-159.9 114.4-114.5c6.4-6.4 8.6-15.8 5.8-24.4s-10.1-14.9-19.1-16.3L415 189.3z"/></svg>');
}
.icon-game {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M448 128c106 0 192 86 192 192s-86 192-192 192H192C86 512 0 426 0 320s86-192 192-192zM192 240c-13.3 0-24 10.7-24 24v32h-32c-13.3 0-24 10.7-24 24s10.7 24 24 24h32v32c0 13.3 10.7 24 24 24s24-10.7 24-24v-32h32c13.3 0 24-10.7 24-24s-10.7-24-24-24h-32v-32c0-13.3-10.7-24-24-24m240 96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32m64-96c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32"/></svg>');
}
.icon-chart {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M96 96c17.7 0 32 14.3 32 32v336c0 8.8 7.2 16 16 16h400c17.7 0 32 14.3 32 32s-14.3 32-32 32H144c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32m112 192c17.7 0 32 14.3 32 32v64c0 17.7-14.3 32-32 32s-32-14.3-32-32v-64c0-17.7 14.3-32 32-32m144-64v160c0 17.7-14.3 32-32 32s-32-14.3-32-32V224c0-17.7 14.3-32 32-32s32 14.3 32 32m80 32c17.7 0 32 14.3 32 32v96c0 17.7-14.3 32-32 32s-32-14.3-32-32v-96c0-17.7 14.3-32 32-32m144-96v224c0 17.7-14.3 32-32 32s-32-14.3-32-32V160c0-17.7 14.3-32 32-32s32 14.3 32 32"/></svg>');
}

.c-score__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: stretch;
	justify-content: center;
	gap: 1em;
	margin: 2em 0;
	color: #ffcf3d;
}

@media only screen and (max-width: 981px) {
	.c-score__cards {
		grid-template-columns: unset;
		grid-template-rows: repeat(3, 1fr);
	}
}

.c-score__card {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 1em;
	border: 2px solid currentColor;
	border-radius: 0.5em;
	text-align: center;
	background-color: currentColor;
}

.c-score__card > div {
  	color: #424242;
	/* Display above the waves */
	position: relative;
	z-index: 3;
}
.c-score__card--icon {
	font-size: 1.5em;
}
.c-score__card--title {
	font-size: 2em;
	font-weight: bold;
}

.scores-table-container {
	overflow-x: auto;
	margin-top: 2em;
}
.scores-table-container h3, .scores-table-container h4 {
	padding: 0.25em 0.5em;
	border-radius: 0.25em;
}
.scores-table-container h3 {
	background-color: var(--color);
	color: white;
}
.scores-table-container h4 {
	background-color: color-mix(in srgb, var(--color) 50%, transparent);
	margin-top: 0.5em;
	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
}
.scores-table th {
	text-align: center;
}
.scores-table tr:nth-child(2n) {
	background-color: #eee;
}
.scores-table td {
	position: relative;
}
.scores-table td:not(:first-child) {
	text-align: center;
}
.scores-table .level-to-do, .scores-table .level-done,
.scores-table .surprise-locked, .scores-table .surprise-unlocked, .scores-table .delete-progress {
	background-color: currentColor;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 1.5em;
}
/*
Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com
License - https://fontawesome.com/license/free
Copyright 2026 Fonticons, Inc.
Compressed with https://svgomg.net/
*/
.scores-table .level-to-do {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M320.1 32c9 0 17.3 5.1 21.4 13.1L415 189.3l159.9 25.4c8.9 1.4 16.3 7.7 19.1 16.3s.5 18-5.8 24.4L473.7 369.9 499 529.8c1.4 8.9-2.3 17.9-9.6 23.2s-17 6.1-25 2l-144.3-73.4L175.8 555c-8 4.1-17.7 3.3-25-2s-11-14.2-9.6-23.2l25.2-159.9L52 255.4c-6.4-6.4-8.6-15.8-5.8-24.4s10.1-14.9 19.1-16.3l159.9-25.4 73.6-144.2c4.1-8 12.4-13.1 21.4-13.1zm0 76.8L262.3 222c-3.5 6.8-10 11.6-17.6 12.8l-125.5 20 89.8 89.9c5.4 5.4 7.9 13.1 6.7 20.7l-19.8 125.5 113.3-57.6c6.8-3.5 14.9-3.5 21.8 0l113.3 57.6-19.8-125.5c-1.2-7.6 1.3-15.3 6.7-20.7l89.8-89.9-125.5-20c-7.6-1.2-14.1-6-17.6-12.8z"/></svg>');
	opacity: 0.5;
}
.scores-table .level-done {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path stroke="%23424242" d="M341.5 45.1c-4.1-8-12.4-13.1-21.4-13.1s-17.3 5.1-21.4 13.1l-73.6 144.2-159.9 25.4c-8.9 1.4-16.3 7.7-19.1 16.3s-.5 18 5.8 24.4l114.4 114.5-25.2 159.9c-1.4 8.9 2.3 17.9 9.6 23.2s16.9 6.1 25 2l144.4-73.4L464.4 555c8 4.1 17.7 3.3 25-2s11-14.2 9.6-23.2l-25.3-159.9 114.4-114.5c6.4-6.4 8.6-15.8 5.8-24.4s-10.1-14.9-19.1-16.3L415 189.3z"/></svg>');
	color: #ffd43b;
}
.scores-table .surprise-locked {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M256 160v64h128v-64c0-35.3-28.7-64-64-64s-64 28.7-64 64m-64 64v-64c0-70.7 57.3-128 128-128s128 57.3 128 128v64c35.3 0 64 28.7 64 64v224c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V288c0-35.3 28.7-64 64-64"/></svg>');
	opacity: 0.5;
}
.scores-table .surprise-unlocked {
	mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M385.5 132.8c7.6-12.9 21.4-20.8 36.3-20.8h2.2c22.1 0 40 17.9 40 40s-17.9 40-40 40h-73.3zm-131 0 34.8 59.2H216c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8m89.6-24.3-24.1 41-24.1-41C279.7 80.9 250.1 64 218.2 64H216c-48.6 0-88 39.4-88 88 0 14.4 3.5 28 9.6 40H96c-17.7 0-32 14.3-32 32v32c0 17.7 14.3 32 32 32h448c17.7 0 32-14.3 32-32v-32c0-17.7-14.3-32-32-32h-41.6c6.1-12 9.6-25.6 9.6-40 0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4zM544 336H344v208h136c35.3 0 64-28.7 64-64zm-248 0H96v144c0 35.3 28.7 64 64 64h136z"/></svg>');
	color: #ffd43b;
}
.scores-table .level-to-do a, .scores-table .level-done a,
.scores-table .surprise-locked a, .scores-table .surprise-unlocked a, .scores-table .delete-progress a {
	opacity: 0;
}

.section-name {
	text-align: left !important;
}

/* Increase the clickable area of links inside cells */
td > a:only-child {
	display: block;
	box-sizing: content-box;
	width: 100%;
	margin: -6px -24px;
	padding: 6px 24px;
}

.waves-container {
	background: none;
	position: relative;
	overflow: hidden;
	/* We need an opaque color */
	--fill-color: currentColor;
	--level: 0%;
}

.waves-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: calc(var(--level, 50%) - 1.25em);
	background-color: var(--fill-color);
	transition: height 0.15s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 1;
}

.waves-container svg {
	position: absolute;
	bottom: calc(var(--level, 50%) - 1.25em);
	left: 0;
	/* Span twice the width of the container for seamless scroll */
	width: 200%;
	height: 2.5em;
	z-index: 2;
	transition: bottom 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide liquid completely at exactly 0% */
.waves-container.empty::after,
.waves-container.empty svg {
	display: none;
}

.waves-container .parallax > use {
	animation: move-forever linear infinite;
}

.waves-container .parallax > use:nth-child(1) {
	animation-delay: -2s;
	animation-duration: 4s;
	fill: rgba(37, 99, 235, 0.3);
	fill: color-mix(in srgb, var(--fill-color) 30%, transparent);
}

.waves-container .parallax > use:nth-child(2) {
	animation-delay: -3s;
	animation-duration: 6s;
	fill: rgba(37, 99, 235, 0.5);
	fill: color-mix(in srgb, var(--fill-color) 50%, transparent);
}

.waves-container .parallax > use:nth-child(3) {
	animation-delay: -4s;
	animation-duration: 8s;
	fill: rgba(37, 99, 235, 0.7);
	fill: color-mix(in srgb, var(--fill-color) 70%, transparent);
}

.waves-container .parallax > use:nth-child(4) {
	animation-delay: -5s;
	animation-duration: 10s;
	fill: #2563eb;
	fill: var(--fill-color);
}

/* Percentage-based translation ensures seamless loop at any width */
@keyframes move-forever {
	0% {
		transform: translate3d(-50%, 0, 0);
	}
	100% {
		transform: translate3d(0%, 0, 0);
	}
}