/* @group RESETS */

/* Eric Meyer reset.css v2.0 -- & -- normalize.css v7.0.0 --- resets group v1.7 */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, picture, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}

*, *:before, *:after {box-sizing: border-box;}

html {font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section {display: block;}
audio, canvas, progress, video {display: inline-block;}
audio:not([controls]) {display: none; height: 0;}
summary {display: list-item;}

[hidden], template {display: none;}

a {background-color: transparent;}
a:active, a:hover {outline-width: 0;}

abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
strong {font-weight: bolder;}
em, dfn {font-style: italic;}
mark {background: #ff0; color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}

img, picture {border-style: none;}
svg:not(:root) {overflow: hidden;}

ol, ul {list-style: none;}

hr {height: 0; box-sizing: content-box; overflow: visible;}
pre {white-space: pre-wrap !important;}
pre, blockquote {page-break-inside: avoid;}
code, kbd, pre, samp {font-family: monospace, monospace; font-size: 1em;}

button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;} /* remove color inheritance if working on white-on-black-background */
button, input {overflow: visible;}
button, select {text-transform: none;}
button, html [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none; padding: 0;}
input {line-height: normal;}
[type="checkbox"], [type="radio"] {padding: 0;}
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}
[type="search"] {-webkit-appearance: textfield;}
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button {-webkit-appearance: button; font: inherit;}
progress {display: inline-block; vertical-align: baseline;}
textarea {overflow: auto;}

table {border-collapse: collapse; border-spacing: 0;}
td, th {padding: 0;}

/* Personal, opinionated & h5bp defaults */

a[href] {cursor: pointer;}

a[role="button"] {
	-webkit-user-select: none;
	        user-select: none;
}

[role="button"], label, select, button, [type="button"], [type="checkbox"], [type="file"], [type="image"], [type="radio"], [type="reset"], [type="submit"] {cursor: pointer;} /* purely opninionated https://github.com/necolas/normalize.css/issues/371#issuecomment-60072171 - https://github.com/necolas/normalize.css/pull/563 - https://datagif.slack.com/archives/ui-ux/p1479143093000007 */
[disabled] {cursor: default;}

img, picture, svg {display: inline-block; max-width: 100%; height: auto;}
:focus {outline: 0 none;}
textarea {resize: vertical;}
audio, canvas, img, picture, svg, progress, video {vertical-align: middle;}

:lang(fr) {quotes: "\00ab\00a0" "\00a0\bb" "\201c" "\201d";} /* « … “…” … » */
:lang(en) {quotes: "\201c" "\201d" "\2018" "\2019";} /* “ … ‘…’ … ” */
q::before, blockquote > p::before {content: open-quote;}
q::after, blockquote > p::after {content: close-quote;}

/* @end RESETS */

:root {
	--bg-color: #efeded; /* #ffcca2 #f2eeed #f4f1f1 #f5f2f0 #f0f0e6 #e0dccc #f1ebe6 #efeded */
	--bg-color-transparent: rgba(238, 236, 236, 0); /* to prevent a webkit bug with linear gradiant */
	--text-color: #595552; /* #595552 */
	--button-text-color: var(--text-color);
	--button-bg-color: #f7de94; /* #f0dea8 #f7de94 */
	--button-disabled-bg-color: #e1dccb;
	--border-focus: #333;
	--alt-color: #c60f6e; /* #f21758 #bf229f #c60f6e */
	--bg-focus: rgba(255, 255, 255, 0.8);
	--rgb-ld: 0;
}

/* try bgcolor #f7f6f3 */

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #201f1f;
		--bg-color-transparent: rgba(32, 31, 31, 0);
		--text-color: #dfd3ca;
		--button-text-color: #595552;
		--button-bg-color: #f7de94; /* #f0dea8 #f7de94 */
		--button-disabled-bg-color: #e1dccb;
		--border-focus: #e8e1db;
		--alt-color: #f2505f;
		--bg-focus: rgba(70, 49, 49, 0.6);
		--rgb-ld: 255;
	}
}

html, body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

html {
	font: 1.375em/1.4 BioRhyme, sans-serif;
	color: var(--text-color);
}

body {
	background-color: var(--bg-color);
}

::-moz-selection {background-color: rgba(198, 15, 110, 0.3); text-shadow: none}
     ::selection {background-color: rgba(198, 15, 110, 0.3); text-shadow: none}

/* Screens */

body {
	position: relative;
	z-index: 0; /* https://stackoverflow.com/a/60071395/1113376 */
}

.main_screen {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	transform: scale(1);
	transition: opacity .2s ease;
	transition-property: opacity, transform;
}

	.main_screen:not(.--current) {
		pointer-events: none;
		opacity: 0;
	}
	
	.main_screen.--current {
		transition-delay: 100ms;
	}
	
	.splash:not(.--current),
	.lobby:not(.--current)  {transform: scale(1.05);}
	.splash.--back_first:not(.--current),
	.lobby.--back_first:not(.--current),
	.round:not(.--current)  {transform: scale(0.95);}
	
	.screen_container,
	.round-screen {
		position: relative;
	}
	
	.screen_container {
		margin: auto;
		width: 100%;
		min-height: 100%;
		max-width: 640px;
		overflow: hidden;
		padding: 20px;
	}
	
	.round-screen.--dummy {
		position: absolute;
		top: 20px;
		left: 20px;
		width: calc(100% - 40px);
	}

/* Headings and text */

.screen_title {
	font-size: 7vw;
	line-height: 1;
	color: var(--alt-color);
	margin-bottom: 30px;
}

	.screen_title.--welcome {
		font-size: 12vw;
		margin-bottom: 30px;
	}
	
	@media (min-width: 500px) {
		.screen_title {font-size: 35px;} /* min-width * (font-size / 100) */
		.screen_title.--welcome {font-size: 60px;}
	}

.label {
	font-size: 0.8em;
	margin-bottom: 5px;
}

.question, .answer,
input[type="text"], textarea {
	font: 1.4rem/1.1 Caveat, sans-serif;
}

.question,
.answer {
	word-break: break-word;
	hyphens: auto;
}

.question {
	font-size: 1.8em;
	margin-bottom: 20px;
}

/* Fields & labels */

input, button, textarea {
	-webkit-appearance: none; /* removes the inner box shadow of inputs and stuff */
	   -moz-appearance: none;
	        appearance: none;
}

input[type="text"], textarea {
	display: block;
	font: 1.4rem/1.1 Caveat, sans-serif;
	width: 100%;
	padding: 8px 15px 10px;
	margin-bottom: 20px;
	background-color: transparent;
	border: 3px solid;
	border-radius: 5px;
	transition: border-color 100ms, background-color 100ms;
}

.nested-label {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin-left: 14px;
	padding: 0 6px;
	background: linear-gradient(var(--bg-color) 4px, var(--bg-color-transparent) 5px) 0 19px/100% 5px repeat-x;
	text-shadow: 0 1px 3px var(--bg-color), 0 1px 3px var(--bg-color), 0 1px 3px var(--bg-color);
}

	.nested-label + input, .nested-label + textarea {
		margin-top: -11px;
	}
	
	textarea {
		min-height: calc(2.2em + 27px); /* 2 lines height + padding + borders + 3 (magic number preventing second line to jump) */
	}
	
	input[type="text"]:focus, textarea:focus {
		border-color: var(--border-focus);
		background-color: var(--bg-focus);
	}
	
	textarea[disabled] {
		opacity: 1;
		color: inherit;
		-webkit-text-fill-color: inherit;
	}
	
	input[type="text"]::placeholder,
	textarea::placeholder {
		opacity: 0.5;
	}

.segmented-button-radio {
	display: flex;
	position: relative;
	width: 100%;
	padding: 2px;
	border: 3px solid;
	border-radius: 5px;
	margin-bottom: 20px;
	-webkit-user-select: none;
	        user-select: none;
}

	.segmented-button-radio > input {
		opacity: 0;
		width: 0;
	}
	
	.segmented-button-radio label {
		flex: 1;
		padding: 6px 3px;
		border-radius: 2px;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
		.segmented-button-radio > input:checked + label {
			color: var(--bg-color);
			background-color: var(--text-color);
		}

.field_helper {
	font-size: 0.65rem;
	margin-bottom: 10px;
}

	.field_helper p {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	
	.field_helper-switch {
		display: inline-block;
		opacity: 0;
		width: 0;
		height: 0;
	}
	
	.field_helper-switch:not(:checked) ~ .field_helper {
		display: none;
	}
	
	.field_helper-reveal {
		display: inline-block;
		color: var(--bg-color);
		background-color: var(--text-color);
		width: 1.4em;
		height: 1.4em;
		border-radius: 1em;
		overflow: hidden;
		vertical-align: bottom;
		white-space: nowrap;
		-webkit-user-select: none;
		        user-select: none;
	}
	
		.field_helper-reveal::before,
		.field_helper-reveal::after {
			display: inline-block;
			width: 100%;
			text-align: center;
			line-height: 1;
		}
		
		.field_helper-reveal::before {
			content: "?";
			font-size: 0.8rem;
			transition: margin 150ms;
		}
		
		.field_helper-reveal::after {
			content: "×";
			font-size: 0.9rem;
		}
		
		.field_helper-switch:checked ~ .field_helper-reveal::before {
			margin-left: -100%;
		}

/* Buttons */

button,
input[type="submit"] {
	display: block;
	width: 100%;
	padding: 10px 10px 13px;
	min-height: calc(1.6em + 20px);
	margin-bottom: 30px;
	color: var(--button-text-color);
	line-height: inherit;
	background-color: var(--button-bg-color);
	border: none;
	border-top: 0 solid var(--bg-color);
	border-radius: 5px;
	box-shadow: inset 0 -3px 0 0px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

	input[type="submit"] {
		margin-top: 20px;
	}
	
	button:not([disabled]):active,
	input[type="submit"]:not([disabled]):active {
		border-top-width: 2px;
		padding-bottom: 11px;
		box-shadow: inset 0 -1px 0 0px rgba(0, 0, 0, 0.18);
	}
	
	button[disabled],
	input[type="submit"][disabled] {
		cursor: not-allowed;
		background-color: var(--button-disabled-bg-color);
	}
	
	button.selected {
		color: #fff;
		background-color: var(--alt-color);
	}
	
	input[type="submit"].validated {
		
	}

.sent_message {
	display: none;
	font-size: 0.8em;
	text-align: center;
}

.share_rounds_button {
	position: absolute;
	top: 16px;
	right: 10px;
	width: auto;
	height: auto;
	min-height: 0;
	background-color: transparent;
}

	.share_rounds_button::before {content: "📩"}
	
	.share_rounds_button,
	.share_rounds_button:not([disabled]):active {
		border: 0 none;
		padding: 2px 10px 2px;
		box-shadow: none;
	}

/* User status */

.user_status.--waiting::after,
.user_status.--done::after {
	content: "";
	display: inline-block;
}

	.user_status.--waiting::after {
		width: 4px;
		height: 4px;
		border-radius: 100%;
		margin-left: 4px;
		margin-right: 16px; /* total size */
		background-color: currentColor;
		box-shadow: 7px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3), 14px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3);
		animation: user_status_waiting_animation 0.6s infinite step-start;
	}
	
	@keyframes user_status_waiting_animation {
		0% {
			background-color: currentColor;
			box-shadow: 7px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3), 14px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3);
		}
		33% {
			background-color: rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3);
			box-shadow: 7px 0 0 0 currentColor, 14px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3);
		}
		66% {
			background-color: rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3);
			box-shadow: 7px 0 0 0 rgba(var(--rgb-ld), var(--rgb-ld), var(--rgb-ld), 0.3), 14px 0 0 0 currentColor;
		}
	}
	
	.user_status.--done::after {
		width: 6px;
		height: 12px;
		color: var(--alt-color);
		border: 2px solid;
		border-left: 0 none;
		border-top: 0 none;
		transform: rotate(45deg);
		margin-left: 7px;
		margin-right: 11px; /* to be same size as .--waiting */
	}


/* Scoreboard */

.scoreboard {
	position: relative;
	margin-bottom: 50px;
	transition: height .4s ease;
}

	.scoreboard-player {
		display: flex;
		position: absolute;
		width: 100%;
		height: 1.4em;
		transition: top .4s ease;
	}
	
		.scoreboard-player:not(:last-child) {
			margin-bottom: 4px;
		}
		
		.scoreboard-username,
		.scoreboard-player_score {
			display: block;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		
		.scoreboard-username {
			padding-right: 5px;
		}
		
		.scoreboard-sep {
			flex-grow: 1;
			height: 1em;
			border-bottom: 2px dotted;
		}
		
		.scoreboard-riddler_count {
			flex-shrink: 0;
			font-size: 0.7em;
			line-height: 1;
			height: 1em;
			padding-left: 6px;
			margin-top: calc(1.1rem - 1em);
		}
		
			.scoreboard-riddler_count:not(:empty) {
				padding-right: 10px;
				border-right: 2px solid rgba(0,0,0,0.2);
				margin-right: 10px;
			}
		
		.scoreboard-player_score {
			flex-shrink: 0;
			text-align: right;
		}

/* Answers list */

.answers_list {
	margin-top: 10px;
	margin-bottom: 30px;
}

	.answers_list > li {
		min-height: 1.6em;
		margin-bottom: 20px;
		clear: right;
		overflow: hidden; /* clearfix */
	}
	
	.answer_num {
		display: inline-block;
		color: var(--bg-color);
		background-color: var(--alt-color);
		border-radius: 1em;
		min-width: 1.5em;
		height: 1.5em;
		text-align: center;
		padding: 0 8px;
		vertical-align: 2px;
		margin-bottom: -1px;
	}
	
	.answers_list-answer_num {
		margin-bottom: 2px; /* prevents cutting edge */
	}
	
	.answers_list-username {
		display: block;
		float: right;
		font-size: 0.65em;
		margin-left: 20px;
		margin-top: 10px;
	}

/* Answer select */

.answer_select {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 25px;
	margin-top: 10px;
	margin-bottom: 20px;
}

	@media (min-width: 400px) {
		.answer_select {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	
	.answer_select > li {
		
	}
	
	.answer_select_button {
		margin-bottom: 0;
	}

/* Points recap */

.recap {
	list-style: disc;
	margin-bottom: 30px;
	padding-left: 1em;
}

	.recap-entry {
		margin-bottom: 15px;
	}
	
	.recap-action {
		
	}
	
	.recap-answer {
		font-size: 1.2em;
	}
	
	.recap-action + .recap-result {
		margin-top: 5px;
	}
	
	.recap-result {
		font-size: 0.9em;
		margin-bottom: 4px;
	}
	
		/*.recap-result::before {
			content: "→ ";
		}*/