/* ======================================== *\
	UI
\* ======================================== */

#ui {
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 16px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(0,0,0,0.8);
	backdrop-filter: blur(4px);
}
#ui>* {
	box-sizing: border-box;
	min-width: 320px;
	max-width: 480px;
	padding: 16px;
	border-radius: 4px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #ffffff;
	cursor: default;
}

/*	================ */
/*	UI > Formulaires */
/*	---------------- */

#ui>form>div {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#ui>form>div.controls {
	margin: 8px 0 0;
	flex-direction: row;
	justify-content: center;
}
#ui>form>div.controls>* {
	flex: 1 0 0;
}
#ui>form p {
	min-height: 40px;
	max-height: 160px;
	margin: 0;
	padding: 0 16px 0 64px;
	overflow: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: rgba(0,0,0,0.8);
}
#ui>form p::before {
	content: '!';
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	margin: -20px;
	border: solid 2px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	font-weight: bold;
	color: #0080ff;
}
#ui>form textarea {
	box-sizing: border-box;
	min-height: 64px;
	max-height: 192px;
	padding: 8px 12px;
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-radius: 3px;
	font-size: 15px;
	resize: vertical;
}
#ui input[type="submit"] {
	box-sizing: border-box;
	min-width: 64px;
	max-width: 128px;
	padding: 12px;
	border: solid 1px rgba(0,32,64,0.3);
	border-radius: 3px;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#ffffff, #e0e4e8);
	font-size: 14px;
	text-align: center;
	color: rgba(0,32,64,0.7);
	text-shadow: 0 1px #ffffff;
	user-select: none;
	cursor: pointer;
}

/*	====================== */
/*	UI > Boite de dialogue */
/*	---------------------- */

#ui #dialog_box input[name="response"] {
	display: none;
	background: #ffffff;
	border: solid 1px rgba(0,0,0,0.1);
}
#ui #dialog_box.prompt input[name="response"] {
	display: block;
}
#ui #dialog_box input[name="cancel"] {
	display: none;
}
#ui #dialog_box.confirm input[name="cancel"],
#ui #dialog_box.prompt input[name="cancel"] {
	display: flex;
}
#ui #dialog_box.prompt>textarea {
	display: block;
}
#ui #dialog_box.error p::before {
	color: #ff0040;
}
#ui #dialog_box.confirm p::before {
	color: #ffc000;
}
#ui #dialog_box.alert p::before {
	color: #ff8000;
}
#ui #dialog_box.success p::before {
	content: '✓';
	color: #60c000;
}

/*	=============== */
/*	UI > Chargement */
/*	--------------- */

#loading {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9;
	background: rgba(255,255,255,0.9);
}
#loading::before,
#loading::after {
	content: '';
	box-sizing: border-box;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	color: rgba(0,0,0,0.5);
}
#loading::before {
	width: 48px;
	height: 48px;
	margin: -24px;
	border: solid 8px;
	clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
	animation: linear rotate 0.5s infinite;
}
#loading::after {
	width: 24px;
	height: 24px;
	margin: -12px;
	background: rgba(0,0,0,0.5);
	animation: oscillate_scale_50 4s infinite;
}


/* ======================================== *\
	ANIMATIONS
\* ======================================== */

@keyframes fade_in {
	0%	{ opacity: 0; }
	100%	{ opacity: 1; }
}
@keyframes rotate {
	100%	{ transform: rotate(360deg); }
}
@keyframes oscillate_scale_50 {
	50%	{ transform: scale(0.5); }
	100%	{ transform: scale(1); }
}
@keyframes info_in {
	0%	{ transform: translate(0,16px); opacity: 0; }
	20%	{ transform: translate(0,-8px); opacity: 0.5; }
	40%	{ transform: translate(0,4px); opacity: 1; }
	60%	{ transform: translate(0,-2px); }
	80%	{ transform: translate(0,1px); }
	100%	{ transform: translate(0,0); }
}
@keyframes shake {
	0%	{ transform: scale(1); }
	25%	{ transform: scale(1.06); }
	50%	{ transform: scale(0.996); }
	75%	{ transform: scale(1.02); }
	100%	{ transform: scale(1); }
}
@keyframes shake_h {
	0%	{ transform: translate(-16px, 0); }
	20%	{ transform: translate(8px, 0); }
	40%	{ transform: translate(-4px, 0); }
	60%	{ transform: translate(2px, 0); }
	80%	{ transform: translate(-1px, 0); }
	100%	{ transform: translate(0, 0); }
}
@keyframes shake_v {
	0%	{ transform: translate(0, 16px); }
	20%	{ transform: translate(0, -8px); }
	40%	{ transform: translate(0, 4px); }
	60%	{ transform: translate(0, -2px); }
	80%	{ transform: translate(0, 1px); }
	100%	{ transform: translate(0, 0); }
}
@keyframes popup_in {
	0%	{ transform: perspective(400px) translate3D(0,-25px,-50px) rotateX(60deg); }
	20%	{ transform: perspective(400px) rotateX(-8deg); }
	40%	{ transform: perspective(400px) rotateX(4deg); }
	60%	{ transform: perspective(400px) rotateX(-2deg); }
	80%	{ transform: perspective(400px) rotateX(1deg); }
	100%	{ transform: perspective(400px); }
}

/*	================== */
/*	GÉNÉRAL > Sections */
/*	------------------ */

main {
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	display: flex;
	overflow: hidden;
}
main>section {
	box-sizing: border-box;
	min-width: 100%;
	max-width: 100%;
	height: 100vh;
	padding: 32px 16px;
	overflow: auto;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
main>section:first-child {
	transition: margin 0.3s;
}
main>section>* {
	max-width: 1280px;
}
main>section>h2 {
	width: 100%;
	margin: 0 0 16px;
	font-family: Chekharda;
	text-transform: uppercase;
	text-align: center;
	color: #6080c0;
	text-shadow:
		0 3px #ffffff,
		3px 3px #ffffff,
		3px 0 #ffffff,
		3px -3px #ffffff,
		0 -3px #ffffff,
		-3px -3px #ffffff,
		-3px 0 #ffffff,
		-3px 3px #ffffff,
		0 1px 8px rgba(48,64,128,0.5);
}
main>section>a {
	margin: 16px;
	padding: 4px 8px 4px 24px;
	border: 1px solid;
	border-radius: 3px;
	position: absolute;
	left: 0;
	background: rgba(248,248,248,0.9);
	font-size: 13px;
	text-decoration: none;
}
main>section>a.back {
	top: 0;
}
main>section>a.reload {
	top: 32px;
}
main>section>a:hover {
	background: #ffffff;
}
main>section>a::before {
	width: 24px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
main>section>a.back::before {
	content: '🠔';
}
main>section>a.reload::before {
	content: '⭮';
}

body.night main>section>a {
	background: rgba(48,56,64,0.9);
	color: #ffffff;
}
body.night main>section>a:hover {
	background: rgba(48,56,64,0.9) linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
}

/*	============================ */
/*	PAGES > Rejoindre une partie */
/*	---------------------------- */

#joingame>div {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}
#joingame>div>div {
	box-sizing: border-box;
	width: 256px;
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 4px;
	display: flex;
	flex-direction: column;
}
#joingame>div>div>h3 {
	margin: 0 0 8px;
	padding: 0 0 8px;
	border-bottom: dotted 1px rgba(0,0,0,0.5);
	text-align: center;
}
#joingame>div>div>form {
	padding: 0;
	border: none;
	flex: 1;
}
#joingame>div>div>form>ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
}
#joingame>div>div>form>p {
	text-align: center;
}
#joingame>div>div>form>ul>li {
	margin: 2px 0;
	padding: 2px 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	border-left: solid 8px #6080c0;
}
#joingame>div>div>form>fieldset {
	padding: 0;
	border: none;
}
#joingame>div>div>form>fieldset>input {
	box-sizing: border-box;
	width: 100%;
}
#joingame_code {
	height: 100%;
	font-family: monospace;
	font-size: 20px;
	letter-spacing: 8px;
	text-align: center;
}

body.night #joingame>div>div {
	border-color: rgba(255,255,255,0.1);
}
body.night #joingame>div>div>h3 {
	border-bottom: dotted 1px rgba(255,255,255,0.5);
}

/*	=============== */
/*	GÉNÉRAL > Bases */
/*	--------------- */

html {
	height: 100%;
}
body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font-family: sans-serif;
}
a {
	color: var(--blue);
}

/*	=============== */
/*	PAGES > Accueil */
/*	--------------- */

#welcome>h1 {
	width: 100%;
	height: 20vw;
	min-height: 48px;
	max-height: 112px;
	margin: 112px auto 16px;
	text-align: center;
	position: relative;
	font-size: 0;
	text-indent: -9999px;
}
#welcome>h1::before {
	content: '';
	width: 128px;
	height: 128px;
	margin: -64px;
	position: absolute;
	top: -48px;
	left: 50%;
	background: url('images/logo.svg');
}
#welcome>h1::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url('images/des.mots.cratie.fr.svg') no-repeat 50% / contain;
}
#welcome>ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	list-style: none;
	text-align: center;
}
#welcome>ul>li>a {
	box-sizing: border-box;
	width: 192px;
	height: 192px;
	padding: 128px 16px 8px;
	border-radius: 4px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: center;
	justify-content: center;
	background: var(--link) linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1));
	font-size: 15px;
	font-weight: bold;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
}
#welcome>ul>li>a:hover {
	background: var(--link);
	box-shadow: 0 0 4px rgba(0,128,255,0.2), 0 0 8px #ffffff;
	text-shadow: 0 0 1px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.5);
}
body.night #welcome>ul>li>a:hover {
	box-shadow: 0 0 4px rgba(0,128,255,0.2), 0 0 8px rgba(64,160,255,0.75);
}
#welcome>ul>li>a::before {
	content: '';
	width: 96px;
	height: 96px;
	margin: -48px;
	position: absolute;
	top: 72px;
	left: 50%;
	background: url('images/welcome.svg');
}
#welcome>ul>li:hover>a::before {
	background-position-y: -96px;
}
#welcome>ul>li.create>a::before {
	background-position-x: -96px;
}
#welcome>ul>li.resume>a::before {
	background-position-x: -192px;
}

/*	=============== */
/*	ENTÊTE > Profil */
/*	--------------- */

#profile {
	width: 80px;
	position: absolute;
	top: 16px;
	right: 8px;
	user-select: none;
}
#profile>*:not(img) {
	display: none !important;
}
#profile.opened>*,
#profile:hover>* {
	display: flex !important;
}

/*	--------------------- */
/*	ENTÊTE > Profil > Nom
/*	--------------------- */

#profile>.name {
	max-width: 100%;
	margin: 46px auto 6px;
	position: relative;
}
#profile>.name>strong {
	box-sizing: border-box;
	max-height: 36px;
	padding: 2px 8px;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
	background: #000000;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.1);
	font-size: 11px;
	text-align: center;
	color: #ffffff;
	z-index: 1;
	pointer-events: none;
}
#profile>.name>strong::after {
	content: '';
	width: 8px;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	background: linear-gradient(rgba(0,0,0,0), #000000);
}
#profile>.name>a {
	width: 100%;
	height: 100%;
	padding: 2px 16px;
	border: solid 1px var(--link);
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	top: -3px;
	right: -3px;
	display: none;
	background: rgba(0,128,255,0.05);
	text-indent: -999px;
}
#profile>.name:hover>a {
	display: block;
}
#profile>.name>a::after {
	content: '';
	width: 16px;
	height: 16px;
	margin: -8px;
	position: absolute;
	top: 50%;
	left: 16px;
	background: url('images/icons.svg') 100% 0 / 500%;
}
body.night #profile>.name>a {
	background: rgba(0,128,255,0.4);
}
body.night #profile>.name>a::after {
	color: #ffffff;
}

/*	------------------------ */
/*	ENTÊTE > Profil > Avatar
/*	------------------------ */

#profile>img {
	width: 40px;
	height: 40px;
	margin: -20px;
	overflow: hidden;
	border-radius: 50%;
	position: absolute;
	top: 20px;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 4px rgba(0,0,0,0.1);
	font-size: 11px;
}

/*	------------------------- */
/*	ENTÊTE > Profil > Boutons
/*	------------------------- */

#profile>div {
	width: max-content;
	max-width: 160px;
	display: flex;
	gap: 4px;
	position: absolute;
	right: 0;
	font-size: 11px;
}
#profile>div>ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	list-style: none;
}
#profile>div>ul>li>a {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 4px;
	border: solid 1px;
	border-radius: 3px;
	position: relative;
	display: block;
	background: rgba(248,248,248,0.9);
	text-decoration: none;
}
#profile>div>ul:not(:hover)>li:not(.select) {
	display:none;
}
#profile>div>ul>li.select {
	pointer-events: none;
	order: -1;
}
#profile>div>ul>li>a::before {
	width: 20px;
	height: 20px;
	margin: -10px;
	position: absolute;
	top: 50%;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}
#profile>div>ul>li>a.skin_day::before {
	content: '';
	background: url('images/icons.svg') 50% 0 / 500%;
}
#profile>div>ul>li>a.skin_night::before {
	content: '';
	background: url('images/icons.svg') 75% 0 / 500%;
}
#profile>div>ul>li>a.skin_day:hover::before,
#profile>div>ul>li>a.skin_night:hover::before {
	background-position-y: 100%;
}
#profile>div>ul>li>a.lang_en::before	{ content: 'en'; }
#profile>div>ul>li>a.lang_fr::before	{ content: 'fr'; }
#profile>div>ul>li>a:hover {
	border: none;
	background: var(--link);
	color: #ffffff;
}
#profile>div>ul>li>a>span {
	height: 20px;
	margin: -10px 5px 0 0;
	padding: 0 8px;
	border-radius: 3px;
	position: absolute;
	top: 50%;
	right: 100%;
	display: none;
	align-items: center;
	justify-content: center;
	background: var(--link);
	color: #ffffff;
	white-space: pre;
	pointer-events: none;
}
#profile>div>ul>li>a>span::after {
	content: '';
	width: 3px;
	height: 6px;
	position: absolute;
	margin: -3px 0;
	top: 50%;
	left: 100%;
	background: var(--link);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
#profile>div>ul>li>a:hover>span {
	display: flex;
}

body.night #profile>.name>a::after {
	background-position-y: 100%;
}
body.night #profile>div>ul>li>a {
	background: rgba(48,56,64,0.9);
	color: #ffffff;
}
body.night #profile>div>ul>li>a:hover {
	background: #0080ff;
}
body.night #profile>div>ul>li>a.skin_day::before,
body.night #profile>div>ul>li>a.skin_night::before,
body.night #profile>div>ul>li>a.skin_day:hover::before,
body.night #profile>div>ul>li>a.skin_night:hover::before {
	background-position-y: 100%;
}


/* ======================================= *\
	VARIABLES
\* ======================================= */

:root {
	--link:		#0080ff;
	--background:	#f8f8f8;
	--text:		#000000;
	--team_blue:	#0080ff;
	--team_red:	#ff4040;
	--lvl_easy:	#70c000;
	--lvl_medium:	#e08000;
	--lvl_hard:	#a00030;
}
body.night {
	--background:	#303840;
	--text:		#ffffff;
}/* 2025-09-23 */


/* ======================================== *\
	POLICES
\* ======================================== */

@font-face {
	font-family: 'Chekharda';
	src:	url('fonts/Chekharda.woff2') format('woff2'),
		url('fonts/Chekharda.otf') format('opentype');
	font-weight: 700;
}


/* ======================================= *\
	GÉNÉRAL
\* ======================================= */

*::selection {
	background: #6080c0;
	color: #ffffff;
	text-shadow: none;
}


/* ======================================== *\
	PIED DE PAGE
\* ======================================== */

footer {
	box-sizing: border-box;
	width: 100%;
	padding: 16px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #000000;
	font-size: 12px;
	text-align: center;
	color: rgba(255,255,255,0.75);
}


/* ======================================= *\
	ENTÊTE
\* ======================================= */

body>header {
	width: 100%;
	position: fixed;
	z-index: 3;
	display: flex;
	justify-content: center;
}

/*	============== */
/*	PAGES > Partie */
/*	-------------- */

#ingame>div {
	max-height: 80%;
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 6px;
	overflow: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

#ingame>div>* {
	box-sizing: border-box;
	max-width: 480px;
	padding: 8px;
	flex: 1 0 0;
}

/*	---------------------- */
/*	PAGES > Partie > Lobby */
/*	---------------------- */

#ingame .lobby {
	min-width: 256px;
	padding: 0;
	border: none;
	background: none;
}
#ingame .lobby>.resume {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
#ingame .lobby>.resume input {
	border-radius: 3px;
	background: none;
}
#ingame .lobby>.buttons {
	display: flex;
	gap: 8px;
}
#ingame .lobby>.buttons>input {
	border: solid 1px rgba(0,0,0,0.2);
	font-size: 16px;
	white-space: normal;
	text-shadow: 0 1px #ffffff;
}
#ingame .lobby>.buttons>input[name=join_team_a] {
	background: var(--background) linear-gradient(rgba(0,0,0,0), rgba(128,32,32,0.1));
	color: rgba(64,8,8,0.5);
}
#ingame .lobby>.buttons>input[name=join_team_a]:hover {
	background: var(--background) linear-gradient(rgba(128,32,32,0.1), rgba(0,0,0,0));
	color: var(--team_red);
}
#ingame .lobby>.buttons>input[name=join_team_b] {
	background: var(--background) linear-gradient(rgba(0,0,0,0), rgba(0,64,128,0.1));
	color: rgba(0,32,64,0.5);
}
#ingame .lobby>.buttons>input[name=join_team_b]:hover {
	background: var(--background) linear-gradient(rgba(0,64,128,0.1), rgba(0,0,0,0));
	color: var(--team_blue);
}
#ingame .lobby>.ready>a {
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	display: block;
	background: linear-gradient(#ffffff, #f0f0f0);
	text-align: center;
	color: #000000;
	cursor: pointer;
}
#ingame .lobby>.ready>a:hover {
	background: linear-gradient(#f0f0f0, #ffffff);
}
#ingame .lobby>.ready>a.locked {
	background: #f0f0f0;
	color: rgba(0,0,0,0.2);
	cursor: auto;
	user-select: none;
}
#ingame .lobby>.ready>a.ready::after {
	content: '✓';
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	margin: 0 0 0 6px;
	border: solid 2px;
	border-radius: 50%;
	font-weight: bold;
	display: inline-block;
	color: #80c000;
	line-height: 1;
}

/*	-------------------- */
/*	PAGES > Partie > Jeu */
/*	-------------------- */

#ingame .game {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*	---------------------------- */
/*	PAGES > Partie > Jeu > Tours */
/*	---------------------------- */

#ingame .turns {
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	font-size: 24px;
	text-align: center;
}

/*	---------------------------------- */
/*	PAGES > Partie > Jeu > Chronomètre */
/*	---------------------------------- */

#ingame .chrono {
	width: 112px;
	height: 112px;
	margin: 16px auto;
	border-radius: 50%;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#606060, #202020);
	font-size: 32px;
	font-family: monospace;
	color: #fff;
	text-shadow: 0 0 2px #fff, 0 0 8px #8080ff;
	user-select: none;
}
/*#ingame .chrono::before {
	content: '';
	box-sizing: border-box;
	width: 216px;
	height: 216px;
	margin: -108px;
	border: dotted 6px #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 50%;
}*/
#ingame .chrono>svg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
@media screen and (min-width: 800px) {
	#ingame .chrono {
		width: 192px;
		height: 192px;
		font-size: 64px;
	}
}

/*	---------------------- */
/*	PAGES > Partie > Carte */
/*	---------------------- */

#ingame .card {
	box-sizing: border-box;
	max-width: 192px;
	margin: 0;
	padding: 16px;
	position: relative;
	border-radius: 6px;
	position: relative;
	background: linear-gradient(#fff, #f8fafc);
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.05);
	list-style: none;
	user-select: none;
}
#ingame .card::before {
	content: '';
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	border: solid 5px rgba(0,0,0,0);
	border-radius: 10px;
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: inset 0 0 0 2px #a0a0a0;
	pointer-events: none;
}
#ingame .card.easy::before	{ box-shadow: inset 0 0 0 2px var(--lvl_easy); }
#ingame .card.medium::before	{ box-shadow: inset 0 0 0 2px var(--lvl_medium); }
#ingame .card.hard::before	{ box-shadow: inset 0 0 0 2px var(--lvl_hard); }

#ingame .card>.response {
	text-align: center;
}
#ingame .card>.response>span {
	display: block;
	font-size: 12px;
	color: rgba(0,0,0,0.75);
}
#ingame.actor .card>.response>span {
	display: none;
}
#ingame .card>.response>div {
	margin: 2px 0;
	padding: 8px;
	border-radius: 3px;
	background: #a0a0a0;
	font-size: 15px;
	letter-spacing: -1px;
	line-height: 1;
	color: #fff;
}
#ingame .card.easy>.response>div { background: var(--lvl_easy); }
#ingame .card.medium>.response>div { background: var(--lvl_medium); }
#ingame .card.hard>.response>div { background: var(--lvl_hard); }

#ingame .card>.level {
	margin: 8px 0;
	font-size: 16px;
	text-align: center;
	color: #a0a0a0;
}
#ingame.actor .card>.level {
	display: none;
}
#ingame .card.easy>.level	{ color: var(--lvl_easy); }
#ingame .card.medium>.level	{ color: var(--lvl_medium); }
#ingame .card.hard>.level	{ color: var(--lvl_hard); }

#ingame .card>.words {
	margin: 8px 0;
	padding: 4px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	font-size: 12px;
	text-align: center;
}
#ingame .card>.words>span {
	margin: 0 0 4px;
	display: block;
}
#ingame .card>.words>ul {
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	list-style: none;
}
#ingame .card>.words>ul>li {
	min-width: 48px;
	max-width: 48px;
	padding: 3px 0;
	border-radius: 3px;
	position: relative;
	flex: 1 0 0;
	background: rgba(0,0,0,0.8);
	color: #ffffff;
	user-select: none;
}
#ingame.actor .card>.words>ul>li {
	min-width: 80px;
	max-width: none;
}
#ingame .card>.response>ul>li {
	padding: 4px;
	border: solid 1px rgba(0,0,0,0.1);
	font-size: 18px;
	color: #000;
}
@media screen and (min-width: 800px) {
	#ingame .card>.response>div {
		font-size: 20px;
	}
}

/*	------------------------ */
/*	PAGES > Partie > Équipes */
/*	------------------------ */

#ingame .teams {
	max-width: 100%;
	padding: 0;
	display: flex;
	gap: 16px;
}
#ingame .teams>div {
	flex: 1 0 0;
}
#ingame .teams>div>h3 {
	margin: 0 0 8px;
	padding: 0 0 4px;
	border-bottom: dotted 1px rgba(0,0,0,0.5);
	font-size: 18px;
	text-align: center;
}
#ingame .teams>div>ul {
	max-height: 144px;
	margin: 0;
	padding: 8px 0;
	overflow: auto;
	list-style: none;
}
#ingame .teams>div>ul>li {
	margin: 0 0 4px;
	padding: 6px 20px 6px 32px;
	border-radius: 3px;
	position: relative;
	background: rgba(0,0,0,0.1);
	font-size: 13px;
	line-height: 1;
}
#ingame .teams>div>ul#team_a>li {
	background: rgba(255,64,64,0.1);
}
#ingame .teams>div>ul#team_a>li.me {
	background: var(--team_red);
	color: #ffffff;
}
#ingame .teams>div>ul#team_b>li {
	background: rgba(0,128,255,0.1);
}
#ingame .teams>div>ul#team_b>li.me {
	background: var(--team_blue);
	color: #ffffff;
}
#ingame .teams>div>ul>li.orator,
#ingame .teams>div>ul>li.arbiter {
	padding: 6px 32px;
	font-weight: bold;
}
#ingame .teams>div>ul>li.orator::before,
#ingame .teams>div>ul>li.arbiter::before {
	content: '';
	width: 16px;
	height: 16px;
	margin: -8px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 16px;
	background: #ffffff;
}
#ingame .teams>div>ul>li.orator::before {
	background: #ffffff url('images/icons.svg') 0 0 / 32px 16px;
}
#ingame .teams>div>ul>li.arbiter::before {
	background: #ffffff url('images/icons.svg') -16px 0 / 32px 16px;
}
#ingame .teams>div>ul>li.orator::after,
#ingame .teams>div>ul>li.arbiter::after {
	margin: 2px 0 0;
	padding: 2px 0 0;
	border-top: solid 1px;
	display: block;
	font-size: 9px;
	font-weight: normal;
	color: rgba(255,255,255,0.5);
}
#ingame .teams>div>ul>li.orator::after {
	content: '§Orateur';
}
#ingame .teams>div>ul>li.arbiter::after {
	content: '§Arbitre';
}
#ingame .teams>div>ul>li.ready::after {
	content: '✓';
	width: 14px;
	height: 14px;
	margin: -7px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	font-size: 12px;
	font-weight: bold;
}
#ingame .teams>div>ul#team_a>li.ready::after {
	color: var(--team_red);
}
#ingame .teams>div>ul#team_b>li.ready::after {
	color: var(--team_blue);
}
#ingame .teams>div>ul>li>img {
	width: 20px;
	height: 20px;
	margin: -10px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 16px;
	background: #ffffff;
	box-shadow: 0 0 2px rgba(0,0,0,0.1), 0 0 8px rgba(0,0,0,0.1);
	transition: 0.15s;
}
#ingame .teams>div>ul>li:hover>img {
	width: 40px;
	height: 40px;
	margin: -20px;
	z-index: 1;
}

@media screen and (min-width: 800px) {
	#ingame .teams {
		width: 128px;
		padding: 0 0 0 8px;
		border-left: dotted 1px;
		flex-direction: column;
	}
}

.copy {
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	margin: -14px;
	border: solid 1px;
	border-radius: 3px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	right: 18px;
	z-index: 1;
	background: rgba(255,255,255,0.25);
	font-size: 17px;
	text-align: center;
	text-indent: -999px;
	color: var(--link);
	cursor: pointer;
	user-select: none;
}
.copy:hover {
	background: rgba(0,128,255,0.25);
}
.copy::before {
	content: '📋';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-indent: 0px;
}

/*	--------------------- */
/*	PAGES > Partie > Skin */
/*	--------------------- */

body.night #ingame>div {
	border-color: rgba(255,255,255,0.1);
}
body.night #ingame .lobby>.buttons>input {
	border-color: rgba(255,255,255,0.1);
	color: rgba(255,255,255,0.75);
	text-shadow: 0 -2px #000000;
}
body.night #ingame .lobby>.buttons>input[name=join_team_a] {
	background: var(--background) linear-gradient(rgba(255,64,64,0.25), rgba(0,0,0,0.1));
}
body.night #ingame .lobby>.buttons>input[name=join_team_a]:hover {
	background: var(--background) linear-gradient(rgba(0,0,0,0.1), rgba(255,64,64,0.25));
	color: var(--team_red);
}
body.night #ingame .lobby>.buttons>input[name=join_team_b] {
	background: var(--background) linear-gradient(rgba(0,128,255,0.25), rgba(0,0,0,0.1));
}
body.night #ingame .lobby>.buttons>input[name=join_team_b]:hover {
	background: var(--background) linear-gradient(rgba(0,0,0,0.1), rgba(0,128,255,0.25));
	color: var(--team_blue);
}
body.night #ingame .lobby>.ready>a {
	border-color: rgba(255,255,255,0.2);
	background: linear-gradient(var(--background), rgba(0,0,0,0.35));
	color: rgba(255,255,255,0.75);
}
body.night #ingame .lobby>.ready>a:hover {
	background: linear-gradient(rgba(0,0,0,0.35), var(--background));
}
body.night #ingame .lobby>.ready>a.locked {
	background: var(--background) linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2));
	color: rgba(255,255,255,0.25);
}
body.night #ingame .lobby>.ready>a.ready::before {
	
}


/* ======================================== *\
	PAGES
\* ======================================== */

/*	===================== */
/*	GÉNÉRAL > Formulaires */
/*	--------------------- */

form {
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--background);
}
form>p {
	margin: 0 0 8px;
	font-size: 18px;
}
form>fieldset {
	margin: 0;
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.1);
	border-radius: 3px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
form>fieldset.closed {
	cursor: pointer;
}
form>fieldset.closed>*:not(legend) {
	display: none;
}
form>fieldset.closed::before {
	content: '';
	width: 20px;
	height: 20px;
	margin: -10px;
	border-radius: 50%;
	position: absolute;
	top: -6px;
	right: 20px;
	background: var(--background) linear-gradient(rgba(255,255,255,0.5), rgba(0,0,0,0));
	box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), inset 0 -2px 5px rgba(0,0,0,0.05), inset 0 2px 1px rgba(0,0,0,0.1), 0 0 0 3px var(--background);
}
form>fieldset.closed::after {
	content: '';
	box-sizing: border-box;
	width: 7px;
	height: 7px;
	margin: -3.5px;
	border-top: solid 2px;
	border-left: solid 2px;
	position: absolute;
	top: -7px;
	right: 20px;
	transform: rotate(225deg);
	transition: 0.1s;
	color: rgba(0,0,0,0.2);
}
form>fieldset:hover.closed::after {
	top: -5px;
	transform: rotate(45deg);
}
form>fieldset>legend {
	padding: 0 8px;
	font-size: 10px;
	text-transform: uppercase;
	color: rgba(0,0,0,0.25);
}
form .group {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
form .group>* {
	flex: 1 0 0;
}
form .group>a {
	width: 128px;
	padding: 16px;
	border-radius: 4px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--link) linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.1));
	text-align: center;
	color: #ffffff;
	cursor: pointer;
}
form .group>a.selected,
form .group>a.selected:hover {
	cursor: default;
	box-shadow: inset 0 0 32px #00c0ff, 0 0 8px rgba(64,192,255,0.8);
}
form .group>a:hover:not(.selected) {
	background: var(--link);
	text-shadow: 0 0 1px rgba(255,255,255,0.5), 0 0 4px rgba(255,255,255,0.5);
}
form .group>a>strong {
	font-size: 14px;
}
form .group>a>span {
	font-size: 11px;
	color: rgba(255,255,255,0.9);
}
form .field {
	min-width: 96px;
	margin: 4px 0 0;
	padding: 6px 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
}
form label {
	padding: 0 4px;
	font-size: 11px;
	line-height: 1;
	color: rgba(0,0,0,0.5);
}
form .field>label {
	position: absolute;
	top: -8px;
	left: 4px;
	z-index: 1;
	background: linear-gradient(var(--background) 8px, rgba(0,0,0,0));
}
form input {
	padding: 6px 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	outline: none;
	background: #ffffff;
	font-size: 15px;
}
form .field>input {
	border: none;
	margin: -6px -8px;
}
input[type="text"] {
	padding: 8px;
}
input[type="number"] {
	text-align: center;
}
input[type="submit"] {
	width: 100%;
	padding: 16px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	background: linear-gradient(#ffffff, #f0f0f0);
	cursor: pointer;
}
input[type="submit"]:hover {
	background: linear-gradient(#f0f0f0, #ffffff);
}
form select {
	padding: 8px;
	border: solid 1px rgba(0,0,0,0.2);
	border-radius: 3px;
	outline: none;
	background: linear-gradient(#ffffff, #f0f0f0);
	font-size: 13px;
	cursor: pointer;
}
form select:hover {
	background: linear-gradient(#f0f0f0, #ffffff);
}
form .field>select {
	margin: -6px -8px;
	border: none;
}

form input:focus,
form select:focus {
	box-shadow: 0 0 0 2px #6080c0, 0 0 0 3px rgba(96,128,192,0.5);
}

form .infos {
	margin: 6px 0 0;
	padding: 4px 8px;
	border-radius: 3px;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 2;
	display: none;
	background: rgba(0,0,0,0.8);
	font-size: 11px;
	color: rgba(255,255,255,0.8);
	pointer-events: none;
}
form *:hover>.infos {
	display: block;
	animation: info_in 0.2s;
}
form .infos::before {
	content: '';
	width: 8px;
	height: 4px;
	margin: 0 -4px;
	position: absolute;
	bottom: 100%;
	left: 50%;
	background: rgba(0,0,0,0.8);
	clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

/*	---------------------------- */
/*	GÉNÉRAL > Formulaires > Skin */
/*	---------------------------- */

body.night form {
	border-color: rgba(255,255,255,0.2);
}
body.night form>fieldset {
	border-color: rgba(255,255,255,0.1);
}
body.night form>fieldset.closed::after {
	color: rgba(255,255,255,0.5);
}
body.night form>fieldset>legend {
	color: rgba(255,255,255,0.4);
}
body.night form .field {
	border-color: rgba(255,255,255,0.2);
}
body.night form input {
	background: rgba(0,0,0,0.1);
	color: rgba(255,255,255,0.75);
}
body.night form label {
	color: rgba(255,255,255,0.5);
}
body.night form input {
	border-color: rgba(255,255,255,0.2);
}
body.night input[type="submit"],
body.night form select {
	border-color: rgba(255,255,255,0.2);
	background: var(--background) linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.35));
	color: rgba(255,255,255,0.75);
}
body.night input[type="submit"]:hover,
body.night form select:hover {
	background: var(--background) linear-gradient(rgba(0,0,0,0.35),rgba(0,0,0,0));
}
body.night form input:focus,
body.night form select:focus {
	box-shadow: 0 0 0 2px rgba(255,255,255,0.5), 0 0 0 3px rgba(255,255,255,0.5);
}
body.night form p {
	color: rgba(255,255,255,0.75);
}