@font-face {
	font-family: Futura;
	src: url(font/futura.ttf) format("truetype");
}

@font-face {
	font-family: TCCEB;
	src: url(font/tcceb.ttf) format("truetype");
}

html {
	width: 100%;
	height: 100%;
	min-height: calc(650px + 2rem);
	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
body {
	font-family: Futura,Helvetica,Arial,sans-serif;
	background-color: #D6D6D6;
	background-color: black;
	color: white;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

@media print {
	html, body { height: auto; }
}

#mat {
	width: 100%;
	height: 100%;
	border-collapse: separate;
	border-spacing: 1rem;
	display: none;
}
#mat td {
	padding: 0;
	vertical-align: middle;
}
td#board {
	width: calc(100vh - 2rem);
	min-width: 500px;
	height: calc(100vh - 2rem);
	min-height: 500px;
	text-align: center;
	vertical-align: top;
	border-radius: 1rem;
}
.board__zone {
	width: calc(100vh - 2rem);
	min-width: 500px;
	height: calc(100vh - 2rem);
	min-height: 500px;
	position: relative;
}
.board__circle {
	width: 91%;
	height: 91%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: white url(i/elements.jpg) no-repeat center;
	background-size: cover;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
}
.board__center {
	width: 27.5%;
	height: 27.5%;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: transparent url(i/logo.png) no-repeat center;
	background-size: cover;
	position: absolute;
	border-radius: 50%;
	overflow: hidden;
}
.board__circle video {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
}
.board__circle img {
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	border-radius: 50%;
	box-sizing: border-box;
	display: none;
}
.cfg--disable-video .board__circle video {
	display: none;
}
.cfg--disable-video .board__circle img {
	display: block;
}
.board__img,.board__emotions {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 1rem;
}
#clock {
	height: 4rem;
	border-radius: 1rem;
	background: #404040 ;
	position: relative;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}
#clock__zone {
	margin-top: 0.5rem;
	display: inline-block;
	padding-left: 1.5em;
	font-family: tcceb;
	font-size: 1.5rem;
	background: transparent url(i/clock.svg) no-repeat left center;
	background-size: auto 1em;
}
#players {
	min-width: 300px;
	height: 11rem;
	border-radius: 1rem;
	background: #404040;
	position: relative;
	overflow: hidden;
}
#players__zone {
	position: absolute;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	bottom: 0.5rem;
	text-align: center;
	overflow: hidden;
}
#players__area{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8rem;
	overflow: hidden;
}
#players__content {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	max-width: 100%;
	white-space: nowrap;
}
#players__scrollbar {
	position: absolute;
	top: 8rem;
	left: 0; right: 0;
	height: 1rem;
	border-radius: 0.5rem;
	background: black;
	overflow: hidden;
}
#players__scrollhandle {
	position: absolute;
	top: 0;
	left: 0;
	width: 12.5%;
	height: 1rem;
	background: #eeeeee;
	border-radius: 0.5rem;
	cursor: pointer;
}
.player {
	display: inline-block;
	position: relative;
	box-sizing: border-box;
	width: 6rem;
	margin-right: 0.5rem;
	cursor: pointer;
	overflow: hidden;
	vertical-align: top;
	background: rgba(255,255,255,0.2);
	border-radius: 0.5rem;
	z-index: 2; /* Rollover players & quest tips when a card is drawn */
}
.player * {
	pointer-events: none; /* Allow mouseover events on .player (only) */
}
.player__quest_tip {
	display: none;
	position: absolute;
	width: 20vh;
	height: auto;
	text-align: center;
	transform: translate(-50%,calc(-100% - 1rem));
	background: #CCCCCC;
	color: black;
	box-sizing: border-box;
	border-radius: 1rem;
	padding: 0.5rem;
	transition: left 0.2s;
}
.player__quest_tip:after {
	position: absolute;
	bottom: -1rem;
	left: calc(50% - 1rem);
	content: ' ';
	width: 0; height: 0;
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1rem solid #CCCCCC;
}

@keyframes help__add_pawn {
	0% { opacity: 0; }
	5% { opacity: 1; }
	90% { transform: translate(-150px,-100px); }
	100% { opacity: 0; }
}
.help__add_pawn {
	position: absolute;
	opacity: 0;
	transform: none;
	animation: 1.5s ease-out 6 both running help__add_pawn;
}


#players__params {
	position: absolute;
	right: 0.5rem;
	bottom: 0.5rem;
	width: 3rem;
	height: 3rem;
}
.menu {
	height: 3rem;
}
.menu__egg { fill: white; }
.menu__cradle { fill: #999999; fill-opacity: 0.4; }
.menu__handle { fill: none; stroke: #B3B3B3; stroke-width: 5; stroke-linecap: round; }
.menu:hover {
	cursor: pointer;
}
.menu:hover .menu__egg {
	fill: yellow;
}
#config {
	display: none;
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.5rem;
	right: 0.5rem;
	border-radius: 0.50rem;
	background: #A0A0A0;
	color: black;
	font-size: 1rem;
	padding: 0.5rem 1rem;
	z-index: 4;
}
#config .close {
	cursor: pointer;
	width: 2rem;
	height: 2rem;
	position: absolute;
	top: 0;
	right: 0;
	background: transparent url(i/close.png) no-repeat top right;
	background-size: 2rem;
}
.config__tab {
	position: absolute;
	top: 2rem; left: 0; right: 0; bottom: 0;
}
.tab__name {
	font-size: 1.25rem;
	font-weight: bold;
	width: 22%;
	overflow: hidden;
	height: 2rem;
	display: inline-block;
	position: absolute;
	top: -2rem;
	padding: 0.25rem 0.5rem;
	border: solid white 1px;
	border-bottom: none;
	border-radius: 0.5rem 0.5rem 0 0;
	text-align: center;
	box-sizing: border-box;
	cursor: pointer;
	background: white;
}
.tab__1 {
	left: 0;
}
.tab__2 {
	left: 22%;
}
.tab__3 {
	left: 44%;
}
.tab__4 {
	left: 66%;
}
.tab__content {
	position: absolute;
	top: 0; bottom: 0;
	left: 0; right: 0;
	background: white;
	border-radius: 0 0.5rem 0.5rem 0.5rem;
	overflow: auto;
}
#parameters .tab__content {
	padding: 0 1rem;
	font-size: 1.5rem;
}
.parameter__option {
	position: relative;
	width: 100%;
	min-height: 3rem;
	margin: 1rem 0;
	padding: 1rem;
	box-sizing: border-box;
	border-radius: 1rem;
	background: rgba(0,0,0,0.1);
}
.parameter__label {
	position: relative;
	width: calc( 100% - 12rem );
}
.parameter__switch {
	border-radius: 1rem;
	width: 10rem;
	height: 2rem;
	overflow: hidden;
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
	background: #A0A0A0;
}
.switch__option {
	position: absolute;
	top: 0;
	left: 5rem;
	border-radius: 1rem;
	box-sizing: border-box;
	font-size: 1rem;
	text-transform: uppercase;
	width: 5rem;
	height: 2rem;
	color: white;
	text-align: center;
	padding: 0.5rem 0;
}
.switch__option:first-child { left: 0; }
.switch__on {
}
.switch__off {
}
.parameter--true .switch__on { background-color: #009000; }
.parameter--false .switch__off { background-color: #900000; }
.parameter--true .switch__off { cursor: pointer; }
.parameter--false .switch__on { cursor: pointer; }
.tab--inactive .tab__name {
	background: black;
	color: white;
	border: solid white 1px;
	border-bottom: none;
}
.tab--inactive {
	height: 0;
}
.tab--inactive .tab__content {
	height: 0;
	overflow: hidden;
}

.tab__content {
	background: white url(i/waves-light.svg) repeat top left;
	background-size: 25vh auto;
}
#about__content {
	font-size: 1.25rem;
	display: inline-block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	padding: 2rem;
	min-width: 600px;
}
#about__content div {
	margin: 0.5rem 0;
}

#players__form--submit {
	border: none;
	border-radius: 0.5rem;
	padding: 0.25rem 1rem;
	width: 4rem;
	text-align: center;
	margin: 0.5rem auto;
	display: block;
	background: #1e7025;
	color: white;
	font-weight: bold;
}
#players__form--submit:hover {
	cursor: pointer;
	background: #5ab061;
	color: #013605;
}
#players__form {
	width: 100%;
	font-size: 1.5rem;
}
#players__col_quest {
	
}
.name__row {
	margin: 0.5rem 0;
	padding: 0 0.5rem 0 5.5rem;
	position: relative;
}
.name__fields {
	background: #f0f0f0;
	border-radius: 0.5rem;
	padding: 0.5rem;
}
.name__row--moving {
	background: #404040;
}
.name__row--moving .name__fields {
	background: #aaaaaa;
}
.name__color {
	cursor: row-resize;
	position: absolute;
	left: 0.5rem;
	top: 50%;
	width: 3em;
	height: 3em;
	text-align: center;
	border-radius: 50%;
	transform: translateY(-50%);
}
.name__value {
	box-sizing: border-box;
	border: none;
	border-radius: 0.5em;
	padding: 0.25em 0.5em;
	background: #cccccc;
	width: 100%;
	max-width: 20em;
	font-size: 100%;
	margin-bottom: 0.5rem;
}
.name__quest {
	box-sizing: border-box;
	border: none;
	border-radius: 0.5em;
	padding: 0.25em 0.5em;
	background: #cccccc;
	width: 100%;
	font-size: 100%;
}





.player--active {
	background: rgba(255,255,255,0.4);
}
.player--disabled {
	opacity: 0.4;
}
.player__icon {
	padding: 10%;
	overflow: hidden;
}
.player__nameholder {
	height: 1.2rem;
	padding: 0.1rem 0.25rem;
	background: rgba(255,255,255,0.1);
	color: white;
	text-align: center;
}
.player--active .player__nameholder {
	color: black;
	background: white;
}
.player__name {
	display: inline-block;
	white-space: nowrap;
	overflow: visible;
}
.player__badge:empty { display: none; }
.player__badge {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 1rem;
	height: 1rem;
	font-size: 0.75rem;
	border: solid white 1px;
	border-radius: 50%;
	background: #851D1D;
	color: white;
	text-align: center;
	line-height: 1rem;
}

#quest {
	min-width: 300px;
	height: 20%;
	margin: 1rem;
	border-radius: 1rem;
	background: #404040;
	overflow: hidden;
	text-align: center;
	position: relative;
}
#quest > div {
	min-height: 4em;
}
#players__quest {
	font-size: 1.5rem;
	position: absolute;
	width: 100%;
	padding: 0 0.5rem;
	box-sizing: border-box;
	top: 50%;
	transform: translatey(-50%);
	overflow: hidden;
}
#quest__zone {
	width: 100%;
	position: absolute;
	top: 0;
	transition: top ease-in-out 3s 2s;
}


#decks {
	min-width: 300px;
	height: 50%;
	min-height: 200px;
	margin: 1rem;
	border-radius: 1rem;
	background: #404040;
	overflow: hidden;
	text-align: center;
	position: relative;
}

#decks__zone {
	display: inline-block;
	margin: 0.5rem;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
/*
.deck__question,.deck__oracle {
	box-sizing: border-box;
	margin: 1%;
	width: 40%;
	max-height: 30%;
	border-radius: 0.75rem;
	cursor: pointer;
	position: relative;
	background: #E9E9E9;
	background-repeat: no-repeat;
	background-position: center 30%;
	background-size: auto 45%;
	position: relative;
}
*/
div.deck__card {
	display: inline-block;
	position: relative;
	width: 40%;
	margin: 1%;
	background: #E9E9E9 url(i/waves-light.svg) repeat center;
	background-size: 100% auto;
	border-radius: 0.75rem;
	font-size: calc(0.25rem + 1vw + 0.5vh);
}
div.deck__sizer {
	padding-bottom: 62%;
	max-height: 30%;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
	font-family: Futura;
	background-repeat: no-repeat;
	background-position: center 30%;
	background-size: auto 45%;
}
div#deck__transform.deck__card { width: 45%; background-color: white; }
#deck__desire div.deck__sizer { color: #90B24B; background-image: url('i/desire.svg'); }
#deck__strengthen div.deck__sizer { color: #6A93B8; background-image: url('i/strengthen.svg'); }
#deck__challenge div.deck__sizer { color: #D06831; background-image: url('i/challenge.svg'); }
#deck__realize div.deck__sizer { color: #7EA8A4; background-image: url('i/realize.svg'); }
#deck__transform div.deck__sizer {
	padding-bottom: 57.4%;
	color: #5D2483;
	background-image: url('i/transform.svg');
}
.deck__label {
	position: absolute;
	left: 0; right: 0;
	bottom: 10%;
	text-align: center;
}

.deck--mandatory:after {
	content: ' ';
	display: block;
	width: 20%;
	height: 4rem;
	position: absolute;
	top: 0;
	left: 0;
	background: url(i/replay.png) no-repeat top left;
	background-size: 100% auto;
	cursor: pointer;
}
.deck__oracle {
	width: 50% !important;
	max-height: 36% !important;
}

.deck__question div, .deck__oracle div {
	width: 100%;
	padding-bottom: 62%;
	text-align: center;
	font-size: 1.5rem;
}

.deck--inactive {
	opacity: 0.5;
}


#templates { display: none; }



.pawn__contour {stroke:black;stroke-width:7}
.meeple__contour {stroke:black;stroke-width:40}
.pawn__shadow {fill: #000000}
.pawn__bright_shadow {fill: #101010}
.pawn__color {fill: #151515}
.pawn__bright_color {fill: #202020}

/* blue */
.player-0 .pawn__shadow {fill:#0088b3}
.player-0 .pawn__bright_shadow {fill:#009dc9}
.player-0 .pawn__color, .meeple-0 .pawn__color, .chip-0 .pawn__color {fill:#17afe9}
.player-0 .pawn__bright_color {fill:#00b7ff}
.meeple-0:hover path, .chip-0:hover circle {fill: #0088B3}
.name__row[data-pid='0'] .name__color {background:#17AFE9}
/* yellow */
.player-1 .pawn__shadow {fill:#B2A500}
.player-1 .pawn__bright_shadow {fill:#C8B400}
.player-1 .pawn__color, .meeple-1 .pawn__color, .chip-1 .pawn__color {fill:#E9E016}
.player-1 .pawn__bright_color {fill:#FFF700}
.meeple-1:hover path, .chip-1:hover circle {fill: #B2A500}
.name__row[data-pid='1'] .name__color {background:#E9E016}
/* green */
.player-2 .pawn__shadow {fill:#14B300}
.player-2 .pawn__bright_shadow {fill:#1AC900}
.player-2 .pawn__color, .meeple-2 .pawn__color, .chip-2 .pawn__color {fill:#27E917}
.player-2 .pawn__bright_color {fill:#11FF00}
.meeple-2:hover path, .chip-2:hover circle {fill: #14B300}
.name__row[data-pid='2'] .name__color {background:#27E917}
/* red */
.player-3 .pawn__shadow {fill:#B32E00}
.player-3 .pawn__bright_shadow {fill:#C92F00}
.player-3 .pawn__color, .meeple-3 .pawn__color, .chip-3 .pawn__color {fill:#E95517}
.player-3 .pawn__bright_color {fill:#FF4C00}
.meeple-3:hover path, .chip-3:hover circle {fill: #B32E00}
.name__row[data-pid='3'] .name__color {background:#E95517}
/* cyan */
.player-4 .pawn__shadow {fill:#00B390}
.player-4 .pawn__bright_shadow {fill:#00C99E}
.player-4 .pawn__color, .meeple-4 .pawn__color, .chip-4 .pawn__color {fill:#17E9C8}
.player-4 .pawn__bright_color {fill:#00FFD8}
.meeple-4:hover path, .chip-4:hover circle {fill: #00B390}
.name__row[data-pid='4'] .name__color {background:#17E9C8}
/* pink */
.player-5 .pawn__shadow {fill:#B30079}
.player-5 .pawn__bright_shadow {fill:#C9008C}
.player-5 .pawn__color, .meeple-5 .pawn__color, .chip-5 .pawn__color {fill:#E9179D}
.player-5 .pawn__bright_color {fill:#FF00A1}
.meeple-5:hover path, .chip-5:hover circle {fill: #B30079}
.name__row[data-pid='5'] .name__color {background:#E9179D}
/* gold/orange */
.player-6 .pawn__shadow {fill:#A38C0C}
.player-6 .pawn__bright_shadow {fill:#B8A01A}
.player-6 .pawn__color, .meeple-6 .pawn__color, .chip-6 .pawn__color {fill:#CCB533}
.player-6 .pawn__bright_color {fill:#DBC963}
.meeple-6:hover path, .chip-6:hover circle {fill: #A38C0C}
.name__row[data-pid='6'] .name__color {background:#CCB533}
/* gray */
.player-7 .pawn__shadow {fill:#515151}
.player-7 .pawn__bright_shadow {fill:#626262}
.player-7 .pawn__color, .meeple-7 .pawn__color, .chip-7 .pawn__color {fill:#8C8C8C}
.player-7 .pawn__bright_color {fill:#B9B9B9}
.meeple-7:hover path, .chip-7:hover circle {fill: #515151}
.name__row[data-pid='7'] .name__color {background:#8C8C8C}

.player__drag {
	position: absolute;
	width: 4%;
	height: auto;
	opacity: 0.4;
	z-index: 3;
}
.pawn {
	position: absolute;
	width: 4%;
	height: 4%;

	/* Prevent excess of height compared to svg pawn
	 * (number would be slightly off-set downwards) */
	line-height: 0;

	cursor: pointer;
	opacity: 0.4;
}
.pawn--active {
	opacity: 1 !important;
}
.pawn--active:hover {
	opacity: 0.4 !important;
}
.pawn__ref {
	position: absolute;
	top: 50%; left: 0;
	transform: translateY(-50%);
	text-align: center;
	width: 100%;
	height: 1em;
	color: black;
	line-height: 1em;
}
.meeple .pawn__ref { display: none; }
.droppable {
	opacity: 1;
}

#cards {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 1;
	overflow: hidden; /* Avoid strange glitches causing overflow, probably due to transforms */
}
.card {
	position: absolute;
	font-size: calc(0.25rem + 1vw + 0.5vh);
}
.card__reload {
	position: absolute;
	width: 3rem;
	height: 3rem;
	top: 1rem;
	left: 1rem;
	background: url(i/reload.png) no-repeat center;
	background-size: 3.5rem;
}
.card__resize {
	position: absolute;
	width: 3rem;
	height: 3rem;
	top: 1rem;
	right: 5rem;
	background: url(i/enlarge.png) no-repeat center;
	background-size: 3.5rem;
}
.card--large .card__resize {
	background-image: url(i/reduce.png);
}
.card__close {
	position: absolute;
	width: 3rem;
	height: 3rem;
	top: 1rem;
	right: 1rem;
	background: url(i/close.png) no-repeat center;
	background-size: 3.5rem;
}
.card__reload:hover, .card__close:hover {
	background-color: #404040;
	border-radius: 1.5rem;
}
.card--hidden {
	visibility: hidden;
}
.card--flipped {
	font-size: 6vh !important;
	width: 80vh !important;
	height: 49.6vh !important;
	max-height: 100% !important;
	transform: translate(-50%, -50%);
	perspective: 1000px;
	cursor: pointer;
	transition: top 1s, left 1s, width 1s, height 1s, border-radius 1s, font-size 1s;
}
.card--flipped.card--large {
	width: 120vh !important;
	height: 74.4vh !important;
	top: 50% !important;
	left: 50% !important;
	font-size: 10vh !important;
	transition: top 1s, left 1s, width 1s, height 1s, border-radius 1s, font-size 1s;
}
#card__transform.card--flipped {
}
#card__transform.card--discarded,
.card--discarded {
	cursor: normal;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	transition: top 1s 0.25s, left 1s 0.25s, width 1s 0.25s, height 1s 0.25s, border-radius 1s 0.25s !important, font-size 1s 0.25s;
}
#card__transform.card--discarded .card__front,
#card__transform.card--discarded .card__back,
.card--discarded .card__front,
.card--discarded .card__back {
}
.card__content {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.8s 1s;
	transform-style: preserve-3d;
}
.card__front, .card__back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
	border-radius: 5%/8%;
	overflow: hidden;
}
.card__front {
	background: #E9E9E9 url(i/waves-light.svg) repeat center;
	background-size: 100% auto;
}
.card__sizer {
	position absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center 30%;
	background-size: auto 45%;
}
.card__back {
	font-size: 83.33%;
}
.card__label {
	position: absolute;
	text-align: center;
	left: 0; right: 0;
	bottom: 20%;
}
#card__desire .card__sizer { color: #90B24B; background-image: url('i/desire.svg'); }
#card__strengthen .card__sizer { color: #6A93B8; background-image: url('i/strengthen.svg'); }
#card__challenge .card__sizer { color: #D06831; background-image: url('i/challenge.svg'); }
#card__realize .card__sizer { color: #7EA8A4; background-image: url('i/realize.svg'); }
#card__transform .card__sizer { color: #5D2483; background-image: url('i/transform.svg'); }
#card__transform .card__front { background-color: white; }

.card__back {
	background: white;
	box-sizing: border-box;
	padding: 1rem;
	color: black;
	transform: translateZ(-1px) rotateY(180deg);
}
.card--flipped .card__content {
	transform: rotateY(180deg);
}
.card--discarded .card__content {
	transform: rotateY(0);
	transition: transform 0.5s 0s !important;
}
.card .question, .card .oracle {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: 100%;
	padding: 10%;
}
.card .question {
}
.card .oracle {
	font-size: 45%;
}
.card__desire { color: #115324; }
.card__challenge { color: #8f140b; }
.card__strengthen { color: #1d486b; }
.card__realize { color: #1a5a68; }

.card__transform .oracle { color: #3d1d5d; }
.card__transform .name { font-weight: bold; margin-bottom: 1rem; }
.card__transform .txt { font-weight: normal; margin-bottom: 1rem; }
.card__transform .q { opacity: 0.7; }

.card__timer {
	font-family: TCCEB;
	font-size: 2rem;
	color: #404040;
	text-align: left;
	position: absolute;
	left: 2rem;
	bottom: 0.5rem;
	padding: 0.5rem 0.5rem 0.5rem 2.5rem;
	background: transparent url(i/hourglass.svg) no-repeat 0.5rem center;
	background-size: auto 1em;
	transform-origin: bottom left;
	transition: background-color 0.5s, color 0.5s, transform 0.5s;
}
.card__timer:hover {
	transform-origin: bottom left;
	transform: scale(2);
	transition: transform 0.5s;
}

.card__timer--running {
	background-color: #404040;
	color: white;
	border-radius: 0.5rem;
}

.feedbacks {
}
.feedback {
	width: 3rem;
	height: 3rem;
	position: absolute;
	bottom: 1rem;
	font-size: 0;
	transition: transform 0.5s, top 0.5s, bottom 0.5s, left 0.5s, right 0.5s, width 0.5s, height 0.5s, font-size 0.5s, opacity 0.5s;
	text-align: center;
}
.feedback__badge {
	display: block;
	position: absolute;
	top: -0.5rem;
	right: -0.5rem;
	width: 1rem;
	height: 1rem;
	font-size: 0.75rem;
	border: solid white 1px;
	background: #851D1D;
	color: white;
	text-align: center;
	line-height: 1rem;
}
.feedback__tip {
	display: none;
	position: absolute;
	width: 10vh;
	height: auto;
	text-align: center;
	transform: translate(calc(-50% + 1.5rem),calc(-100% - 1.25rem));
	background: #CCCCCC;
	color: black;
	box-sizing: border-box;
	border-radius: 1rem;
	padding: 0.5rem;
	font-size: 1rem;
}
.feedback__tip:after {
	position: absolute;
	bottom: -0.95rem;
	left: calc(50% - 1rem);
	content: ' ';
	width: 0; height: 0;
	border-left: 1rem solid transparent;
	border-right: 1rem solid transparent;
	border-top: 1rem solid #CCCCCC;
}
.feedback:hover .feedback__tip {
	display: block;
}
.feedback__badge:empty { display: none; }
.feedback__name {
	position: absolute;
	width: 100%;
	top: -20%;
	transform: translateY(-50%);
}
.feedback--current {
	transition: opacity 0.4s;
	opacity: 0.3;
}
.feedback--large {
	font-size: 2rem;
	top: 50%;
	bottom: 50%;
	left: 50%;
	right: 50%;
	width: 60%;
	height: 60%;
	opacity: 0.25;
	transform: translate(-50%,-50%);
	transition: transform 0.5s, bottom 0.5s, right 0.5s, width 0.5s, height 0.5s, font-size 0.5s, opacity 2s 2s;
}
.feedback--large .feedback__badge { display: none; }
.feedback__heart {
	right: 10rem;
	background: transparent url(i/heart.svg) no-repeat center;
	background-size: contain;
}
.feedback__action {
	right: 6rem;
	background: transparent url(i/action.svg) no-repeat center;
	background-size: contain;
}
.feedback__mirror {
	right: 2rem;
	background: transparent url(i/mirror.svg) no-repeat center;
	background-size: contain;
}
.card__transform .feedback__mirror {
	display:none;
}


.backlog__entry {
	margin: 1rem;
	page-break-inside: avoid;
	border-radius: 0 1rem 1rem 1rem;
	box-sizing: border-box;
	border-style: solid;
	border-width: 1px;
	overflow: hidden;
}
.backlog__board {
	margin: 1rem auto;
	width: 500px;
	height: 500px;
	page-break-inside: avoid;
}
.backlog__board_zone {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.backlog__board .pawn {
	font-size: 1vw;
}
.backlog__connections {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.backlog__connections path {
	fill: none;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.backlog__ts {
	padding-right: 1rem;
}
.backlog__player {
	color: white;
	text-align: left;
	padding: 0.5rem 1rem;
	margin: 0;
	overflow: hidden;
}

/* blue */
.connection-0 {stroke:#0088B3}
/* yellow */
.connection-1 {stroke:#B2A500}
/* green */
.connection-2 {stroke:#14B300}
/* red */
.connection-3 {stroke:#B32E00}
/* cyan */
.connection-4 {stroke:#00B390}
/* pink */
.connection-5 {stroke:#B30079}
/* gold/orange */
.connection-6 {stroke:#A38C0C}
/* gray */
.connection-7 {stroke:#515151}

/* blue */
.backlog--e0 {border-color:#0088B3}
/* yellow */
.backlog--e1 {border-color:#B2A500}
/* green */
.backlog--e2 {border-color:#14B300}
/* red */
.backlog--e3 {border-color:#B32E00}
/* cyan */
.backlog--e4 {border-color:#00B390}
/* pink */
.backlog--e5 {border-color:#B30079}
/* gold/orange */
.backlog--e6 {border-color:#A38C0C}
/* gray */
.backlog--e7 {border-color:#515151}

/* blue */
.backlog--p0 {background:#0088B3}
/* yellow */
.backlog--p1 {background:#B2A500}
/* green */
.backlog--p2 {background:#14B300}
/* red */
.backlog--p3 {background:#B32E00}
/* cyan */
.backlog--p4 {background:#00B390}
/* pink */
.backlog--p5 {background:#B30079}
/* gold/orange */
.backlog--p6 {background:#A38C0C}
/* gray */
.backlog--p7 {background:#515151}

/* blue */
.backlog--c0 {background:#93e1ff}
/* yellow */
.backlog--c1 {background:#fffed7}
/* green */
.backlog--c2 {background:#d9ffd5}
/* red */
.backlog--c3 {background:#ffddcd}
/* cyan */
.backlog--c4 {background:#affff0}
/* pink */
.backlog--c5 {background:#ffc9ec}
/* gold/orange */
.backlog--c6 {background:#f8f5e0}
/* gray */
.backlog--c7 {background:#e7e7e7}



.backlog__card {
	padding: 0.5rem;
	text-align: center;
	font-size: 1.2rem;
	margin: 0;
}

.backlog__quest {
	padding: 0.5rem 1rem;
	text-align: left;
	font-size: 1.2rem;
	font-weight: bold;
}

.backlog__desire { color: #115324; }
.backlog__challenge { color: #8f140b; }
.backlog__strengthen { color: #1d486b; }
.backlog__realize { color: #1a5a68; }

.backlog__transform .oracle { color: #3d1d5d; }
.backlog__transform .name { font-weight: bold; margin-bottom: 1rem; }
.backlog__transform .txt { font-weight: normal; margin-bottom: 1rem; }
.backlog__transform .q { opacity: 0.7; }

.backlog__emotion {
	font-weight: bold;
}
.backlog__feedbacks {
	float: right;
}
.backlog__feedbacks span {
	padding-left: 0.5rem;
}


.backlog__body {
	background: white;
	color: black;
}
.backlog__title {
	margin: 1rem;
	font-size: 200%;
}

#backlog__content {
	position: absolute;
	top: 0; bottom: 2.5rem;
	left: 0; right: 0;
	overflow: auto;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.backlog__buttons {
	height: 2.5rem;
	box-sizing: border-box;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	text-align: center;
}
.backlog__button {
	border: none;
	border-radius: 0.5rem;
	padding: 0.25rem 1rem;
	text-align: center;
	margin: 0.5rem;
	display: inline-block;
	background: #1E7025;
	color: white;
	font-weight: bold;
}
.backlog__button:hover {
	cursor: pointer;
	background: #5AB061;
	color: #013605;
}


/*
 * Clipboard styles will be added to copied backlog html source
 * They should target MS Word (in terms of capabilities)
 */

#clipboard * {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 12pt;
}
#clipboard .backlog__entry {
	background: white;
	padding: 6pt;
}
#clipboard .backlog__player {
	font-weight: bold;
	color: white;
	padding: 6pt;
}
#clipboard .backlog__quest {
	font-weight: bold;
	padding: 6pt;
}
#clipboard .type {
	font-weight: bold;
	font-size: 14pt;
}
#clipboard .name {
	font-weight: bold;
	font-size: 14pt;
}
#clipboard .txt {
}
#clipboard .q {
	color: #4d2d7d;
}
#clipboard .question {
}
#clipboard .backlog__feedbacks {
}

/* blue */
#clipboard .backlog--p0 {background:#0088B3}
/* yellow */
#clipboard .backlog--p1 {background:#B2A500}
/* green */
#clipboard .backlog--p2 {background:#14B300}
/* red */
#clipboard .backlog--p3 {background:#B32E00}
/* cyan */
#clipboard .backlog--p4 {background:#00B390}
/* pink */
#clipboard .backlog--p5 {background:#B30079}
/* gold/orange */
#clipboard .backlog--p6 {background:#A38C0C}
/* gray */
#clipboard .backlog--p7 {background:#515151}

/* blue */
#clipboard .backlog--c0 {background:#93e1ff}
/* yellow */
#clipboard .backlog--c1 {background:#fffed7}
/* green */
#clipboard .backlog--c2 {background:#d9ffd5}
/* red */
#clipboard .backlog--c3 {background:#ffddcd}
/* cyan */
#clipboard .backlog--c4 {background:#affff0}
/* pink */
#clipboard .backlog--c5 {background:#ffc9ec}
/* gold/orange */
#clipboard .backlog--c6 {background:#f8f5e0}
/* gray */
#clipboard .backlog--c7 {background:#e7e7e7}





/* Splash screen */
#splash {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: radial-gradient(circle, rgba(255,255,255,1) 0%, #404040 100%);
	background: #404040 url(i/waves.svg) repeat left;
	background-size: auto 50%;
	overflow: hidden;
}
#splash__logo {
	position: absolute;
	left: 0; top: 0; bottom: 0; right: 0;
	display: none;
}
.logo__name, .logo__video, .logo__bg, .logo__img {
	position: absolute;
	left: 50%;
	top: 46%;
	transform: translate(-50%,-50%);
	box-sizing: border-box;
	width: 56vh;
	height: 80vh;
}
.logo__img {
	border-radius: 52% 48% 51% 49% / 59% 62% 38% 41%;
	border: solid #404040 0.25vh;
	opacity: 0.4;
	display: none;
}
.logo__video {
	border-radius: 52% 48% 51% 49% / 59% 62% 38% 41%;
	border: solid #404040 0.25vh;
	opacity: 0.4;
}
.cfg--disable-video .logo__video { display: none; }
.cfg--disable-video .logo__img { display: block; }
.logo__bg {
	border-radius: 52% 48% 51% 49% / 59% 62% 38% 41%;
	background: white;
}
.logo__mask { fill: transparent; }
.logo__purple { fill: #563D57; }
.logo__age { fill: white; }
.logo__quest { fill: rgba(0,0,0,0.4); }
.logo__cradle {
	position: absolute;
	left: 49%;
	bottom: 7%;
	transform: translateX(-50%);
	box-sizing: border-box;
	width: auto;
	height: 70%;
	fill: rgba(255,255,255,0.2);
}
#splash__version {
	position: absolute;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	font-size: 0.8rem;
	color: white;
	display: none;
}
#splash__form {
	display: none;
	position: absolute;
	text-align: center;
	left: 50%;
	top: 70%;
	width: 50vh;
	transform: translate(-50%,-50%);
	color: black;
	font-size: calc(0.5rem + 1vh);
}
.splash--input {
	margin: 0 auto;
	width: 30vh;
	position: relative;
	text-align: center;
}
.splash__field {
	display: inline-block;
	background: rgba(255,255,255,0.3);
	color: black;
	border: none;
	border-bottom: solid #563D57 calc(0.1rem + 0.2vh);
	width: 25vh;
	margin: 0.5rem;
	padding: 0.25em;
	font-size: 100%;
	transition: padding 0.5s;
}
.splash__field.splash--error {
	color: #AA4444;
}
@keyframes blink { to { opacity: 0.5; background-color: white; } }
.splash__field.splash--flash {
	animation: 0.1s linear 10 alternate blink;
}
.splash__button:hover {
	cursor: pointer;
	padding: 0.25em 2vh;
	transition: padding 0.5s;
}
#splash__form label {
	pointer-events: none;
	color: white;
	position: absolute;
	left: 2.5vh;
	top: -1vh;
	font-size: 75%;
}
input:-internal-autofill-selected,
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 9999s ease-out;
}

.splash__button {
	display: inline-block;
	background: transparent;
	color: black;
	border: none;
	border-bottom: solid #563D57 calc(0.1rem + 0.2vh);
	margin: 0.5rem;
	padding: 0.25em 0;
	transition: padding 0.5s;
}
.splash__button_disabled {
	color: white;
	border-bottom: solid white calc(0.1rem + 0.2vh);
	opacity: 0.5;
}


.emotions__fil1 {fill:#942F34}
.emotions__fil2 {fill:#25672E}
.emotions__fil3 {fill:#4E6969}
.emotions__fil4 {fill:#32566F}
.emotions__nofill {fill:none}
.board__emotions text {
	font-weight:normal;
	font-size:525px;
	font-family:'TCCEB';
	pointer-events: none;
}
.emotions__bounds {
	fill: transparent;
}
.emotions__bounds:hover {
	fill: #FFFFFF;
	fill-opacity: 0.25;
	cursor: pointer;
}
.emotions__bounds:hover + text, .board__emotions text:hover {
	cursor: pointer;
	fill: black;
}
.emotions--overlay > .emotions__bounds {
	fill: #FFFFFF;
	fill-opacity: 0.40;
}