@charset "UTF-8";
:root {
	--card: #F4E3C9;
	--blue: #0C098E;
	--blue-text: #0d75bd;
	--red: #B52719;
	--neutral: #CFC0B0;
	--assasin: black;
}

h2 { margin-bottom:0; }
.blue-text { color:var(--blue-text); }
.red-text { color:var(--red); }

/* weboldal címe */
h1 { margin-bottom:0; }
.blue h1 #playerNameColorAndRole { color:var(--blue-text); }
.red h1 #playerNameColorAndRole { color:var(--red); }
.isCurrentPlayer #playerNameColorAndRole { text-decoration:underline; }
h1.red-won { background-color:var(--red); color:white; }
h1.blue-won { background-color:var(--blue); color:white; }
h1.game-ended #playerNameColorAndRole { color:inherit; }

/* játék kiválasztása */
#choosinggamediv { display:none; }
body[data-gamestatus="choosing game"] #choosinggamediv { display:block; }
.game { cursor:pointer; background:#eee; padding:1ex; }

/* játékos választás */
#choosingplayerdiv { display:none; }
body[data-gamestatus="choosing player"] #choosingplayerdiv { display:block; }
.playername { cursor:pointer; background:#eee; padding:1ex; }

/* a játék fut */
#playrunningdiv { display:none; }
body[data-gamestatus="running"] #playrunningdiv { display:block; }
body[data-gamestatus="finished"] #playrunningdiv { display:block; }

/* pálya */
#playground { font-family:sans-serif; min-width:500px; border-collapse:separate; border-spacing:10px; }
#playground.blocked { background-color:gray; }
#playground td { background-color:var(--card); border:5px solid transparent; text-align:center; width:18%; padding-top:1em; padding-bottom:1em; border-radius:5px; }
/* mindenkinek */
#playground td.found { transition: background-color 3000ms ease-out; }
#playground td.blue.found { border-color:var(--blue); background:var(--blue); color:var(--blue); }
#playground td.red.found { border-color:var(--red); background:var(--red); color:var(--red); }
#playground td.neutral.found { border-color:var(--neutral); background:var(--neutral); color:var(--neutral); }
#playground td.assasin.found { border-color:var(--assasin); background:var(--assasin); color:var(--assasin); }
/* csapatvezéreknek */
.leader #playground td.blue { border-color:var(--blue); }
.leader #playground td.red { border-color:var(--red); border-style:dashed; }
.leader #playground td.neutral { border-color:var(--neutral); }
.leader #playground td.assasin { border-color:var(--assasin); background:var(--assasin); color:white; }

@keyframes tored {
	/*from { background-color: red; }*/
	to { background-color: var(--red); }
}
@keyframes toblue {
	/*from { background-color: red; }*/
	to { background-color: var(--blue); }
}

/* új kulcsszó megadása */
#newcluediv { display:none; }
#sendclue { display:none; }
.leader #newcluediv { display:block; }
.leader.isCurrentPlayer #sendclue { display:block; }

/* Aktuális kulcsszó */
#currentcluediv { display:none; }
.spy.isCurrentPlayer #currentcluediv { display:block; }

/* Játékosok */
.players { margin-top:0; }
.currentPlayer { font-weight:bold; font-style:italic; }
.minicard { display:inline-block; width:13px; height:10px; border-radius:3px; margin:0 4px 0 4px; }
.minicard.red { background:var(--red); }
.minicard.blue { background:var(--blue); }
#card_count_red, #card_count_blue { font-weight:normal; font-size:large; cursor:help; }

/* Korábbi kulcsszavak */
#prevclues .prevclue { margin:0; }
.prevclue .blue { color:var(--blue-text); }
.prevclue .red { color:var(--red); }

/* verzió */
.ver { display:block; margin-top:1em; }

/* játék vége */
body[data-gamestatus="finished"] #playrunningdiv #newcluediv { display:none; }
body[data-gamestatus="finished"] #playrunningdiv #currentcluediv { display:none; }
body[data-gamestatus="finished"] #playrunningdiv #playground td.found { color:white; }
body[data-gamestatus="finished"] #playrunningdiv #playground td.red { border-color:var(--red); border-style:dashed; }
body[data-gamestatus="finished"] #playrunningdiv #playground td.blue { border-color:var(--blue); }
body[data-gamestatus="finished"] #playrunningdiv #playground td.assasin { border-color:var(--assasin); }
body[data-gamestatus="finished"] #playrunningdiv #playground td.assasin.found { color:white; }

/* csak egereseknek */
@media (hover: hover) {
	.game:hover { background:silver; }
	.playername:hover { background:silver; }
}

/* éjszakai mód */
@media (prefers-color-scheme: dark) {
	body { background:black; color:white; }
	a { color:blue; }
	.playername { background:#272727; }
	#playground td { color:#555; }
	.leader #playground td.assasin { border-color:#666; color:#aaa; }
}

/* mobil verzió */
@media only screen and (max-width: 600px) {
	#playerNameColorAndRole { display:block; }
}