* {
	box-sizing:border-box;
	margin:0px;
	padding:0px;
}

body {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	margin:40px auto;
	color:#222;
	font-size:16px;
	font-family:sans-serif;
	background-color:#fffffa;
}




@keyframes fade-in {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes fade-out {
	0% { opacity:1; visibility:visible; }
	100% { opacity:0; visibility:hidden; }
}
@keyframes scale-in {
	0% { transform:scale(.9); }
	100% { transform:scale(1); }
}
@keyframes scale-out {
	0% { transform:scale(1); }
	100% { transform:scale(.7); }
}

@keyframes jump {
	0% { transform:translateY(0px); }
	10% { transform:translateY(5px); }
	40% { transform:translateY(-15px); }
	90% { transform:translateY(2px); }
	100% { transform:translateY(0px); }
}


h1,h2,h3,h4,h5,h6 {
	margin:0px;
	font-weight:600;
}

h1.beggo {
	display:flex;
	justify-content:space-between;
	width:100%;
	margin-bottom:30px;
	color:#fff;
	text-align:center;
	font-size:270px;
	line-height:200px;
	/*opacity:.05;*/
	user-select:none;
	text-shadow:0px 6px 30px rgba(97,109,96,.5), 0px 3px 10px rgba(97,109,96,.3);
}

h1.beggo.jump {

}
h1.beggo.jump span {
	animation:jump 700ms ease-in-out 1 alternate both;
}
h1.beggo.jump span:nth-child(1) {
	animation-delay:0ms;
}
h1.beggo.jump span:nth-child(2) {
	animation-delay:50ms;
}
h1.beggo.jump span:nth-child(3) {
	animation-delay:100ms;
}
h1.beggo.jump span:nth-child(4) {
	animation-delay:150ms;
}
h1.beggo.jump span:nth-child(5) {
	animation-delay:200ms;
}

.loader {
	display:none;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	background-color:rgba(255,255,255,.6);
	backdrop-filter:blur(6px);
	z-index:20;
}
.loader.on {
	display:flex;
	animation:fade-in 100ms linear 1 alternate both;
}
body:not("[data-init='1']") .loader {
	animation:none;
	display:flex;
}
.loader.out {
	animation:fade-out 250ms linear 1 alternate both;
}
.loader span {
	display:flex;
	justify-content:center;
	align-items:center;
	width:200px;
	height:60px;
	padding:10px;
	font-size:18px;
	letter-spacing:0.4em;
	color:#bbb;
	background-color:#faf7d4;
	border:1px solid #ccc;
	border-radius:3px;
}
.loader.on span {
	transform:translateY(0px);
}
.loader.out span {
	transform:translateY(100px);
	transition:transform 250ms ease-in;
}


.wrap {
	width:1550px;
	margin:0px auto;
}



.form .fields {
	display:flex;
	flex-direction:column;
	gap:5px;
}
.form .fields .field {
	display:flex;
	line-height:20px;
}
.form .fields .field label {
	width:120px;
	font-size:16px;
	line-height:32px;
	padding-right:10px;
}
.form .fields .field input,
.form .fields .field select {
	width:180px;
	box-sizing:border-box;
	height:32px;
	font-size:16px;
	padding:5px 10px;
}
.form .fields .field select {
	padding-left:7px;
}
.form .fields .field input[type="checkbox"] {
	width:20px;
	height:20px;
}

.form .fields .field-group {
	display:flex;
	flex-direction:column;
	padding:10px 0px;
}
.form .fields .field-group > label {
	font-weight:600;
	margin-bottom:10px;
}
.form .fields .field-group .field {
	
}
.form .fields .field-group .field label {
	font-size:15px;
	line-height:24px;
}
.form .fields .field-group .field input {
	font-size:15px;
}

.commands {
	display:flex;
	gap:10px;
}
.commands .buttons {
	display:flex;
	gap:10px;
}
button,
.btn {
	display:flex;
	justify-content:center;
	align-items:center;
	width:120px;
	height:40px;
	font-size:16px;
	/*text-transform:uppercase;*/
	background-color:#eee;
	border:1px solid #ccc;
	border-radius:3px;
	color:#444;
	cursor:pointer;
}
button:hover,
button:focus,
.btn:hover,
.btn:focus {
	background-color:#bbb;
	color:#fff;
}
.btn-2 {
	background-color:#fff6de;
}
.btn-2:hover,
.btn-2:focus {
	background-color:#f7b973;
}
.btn-3 {
	background-color:#e7f9e9;
}
.btn-3:hover,
.btn-3:focus {
	background-color:#79cf86;
}


.btn-min {
	height:30px;
	font-size:14px;
}











.dashboard {
	position:relative;
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	width:100%;
	height:fit-content;
	max-height:40px;
	padding:0px 20px 20px 20px;
	border:1px solid #ccc;
	overflow:hidden;
	z-index:1;
	transition:max-height 250ms ease-in-out;
}
.dashboard.on {
	max-height:800px;
	overflow:auto;
}

.dashboard > h4 {
	width:100%;
	margin:0px;
	padding-left:40px;
	font-size:20px;
	line-height:40px;
	letter-spacing:0.1em;
	color:#aaa;
	cursor:pointer;
}

.dashboard .exp {
	position:absolute;
	top:0px;
	left:0px;
	display:flex;
	justify-content:center;
	align-items:center;
	width:40px;
	height:40px;
	background-color:#eee;
	border-right:1px solid #ccc;
	border-bottom:1px solid #ccc;
	cursor:pointer;
}
.dashboard h4:hover + .exp,
.dashboard .exp:hover {
	background-color:#79cf86;
	color:#fff;
}
.dashboard .exp:before {
	content:'+';
}
.dashboard.on .exp:before {
	content:'-';
}

.dashboard .commands .buttons {
	width:120px;
	flex-direction:column;
}
.dashboard .commands .buttons button {
	font-size:14px;
}
.dashboard .commands .buttons button[name='btn-clear'] {
	margin-top:auto;
}

.dashboard .console {
	display:flex;
	flex-direction:column;
	gap:5px;
	width:600px;
	height:400px;
	max-height:400px;
	padding:10px;
	font-size:14px;
	border:1px solid #ccc;
	background-color:#fff;
	overflow:auto;
	box-shadow:inset 0px 2px 4px rgba(0,0,0,.1);
}
.dashboard .console .msg {
	width:100%;
	border-bottom:1px solid #eee;
}
.dashboard .console .json {
	display:inline-block;
	margin-bottom:5px;
	padding:5px;
	font-size:13px;
	font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	letter-spacing:.02em;
	line-height:18px;
	background-color:#fafae9;
}








section.page {
	display:none;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	width:1550px;
	height:fit-content;
	min-height:600px;
	padding:40px 0px;
}
section.page.in {
	position:absolute;
	animation:fade-in 500ms linear 1 alternate both;
}
section.page.on {
	display:flex;
}
section.page.out {
	position:absolute;
	animation:fade-out 500ms linear 1 alternate both;
}


dialog.modal {
	display:none;
	justify-content:center;
	align-items:center;
	position:fixed;
	top:0px;
	left:0px;
	width:100vw;
	height:100vh;
	padding:30px;
	z-index:10;
	border:none;
	background-color:rgba(0,0,0,.1);
	backdrop-filter:blur(6px);
}
dialog.modal.on {
	display:flex;
	animation:fade-in 250ms linear 1 alternate both;
}
dialog.modal.out {
	animation:fade-out 220ms linear 1 alternate both;
}

dialog.modal .panel {
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
	gap:20px;
	min-width:680px;
	min-height:280px;
	padding:40px;
	background-color:#fff;
	box-shadow:0px 10px 20px rgba(0,0,0,.2);
	border-radius:5px;
}
dialog.modal.on .panel {
	animation:scale-in 250ms cubic-bezier(0.25,0.7,0.3,1.15) 1 alternate both;
}
dialog.modal.out .panel {
	animation:scale-out 250ms cubic-bezier(0.65,0,0.35,1) 1 alternate both;
}


dialog.modal .panel .title {
	width:100%;
	text-align:center;
}

dialog.modal .panel .game {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	gap:10px;
	width:300px;
	height:200px;
	padding:10px;
	border:1px solid #ccc;
	border-radius:3px;
}

dialog.modal .panel .form {

}

dialog.modal .panel .commands {
	margin-top:30px;
}



aside.sub {
	display:none;
}
aside.sub.on {
	display:block;
}



.game {
	background-color:#fff;
}

.game .name {
	font-weight:600;
	font-size:20px;
}
.game .phase {
	font-style:italic;
	color:#aaa;
}
.game .info {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:15px;
	width:100%;
	font-size:12px;
}

.game .info > span:before {
	width:20px;
	height:20px;
	display:inline-block;
	padding-right:1px;
}
.game .age {

}
.game .age:before {
	content:'⏱';
}
.game .players {
	
}
.game .players:before {
	content:'👤';
}
.game .spectators {
	
}
.game .spectators:before {
	content:'👁';
}


section.lobbies {
	
}
section.lobbies .games {
	display:flex;
	justify-content:center;
	align-items:flex-start;
	flex-wrap:wrap;
	gap:20px;
	margin:20px 0px;
}
section.lobbies .games .game {
	display:flex;
	justify-content:flex-start;
	align-items:center;
	flex-direction:column;
	gap:10px;
	position:relative;
	width:200px;
	height:150px;
	padding:10px;
	border:1px solid #ccc;
	border-radius:3px;
	cursor:pointer;
	user-select:none;
}
section.lobbies .games .game:hover {
	outline:5px solid #e7f9e9;
	outline-offset:8px;
}
section.lobbies .games .game[data-current] {
	border:2px solid #79cf86;
}
section.lobbies .games .game[data-current]:before {
	content:'Current game';
	display:flex;
	align-items:center;
	position:absolute;
	top:-22px;
	left:-20px;
	height:20px;
	padding:2px 5px;
	color:#fff;
	font-size:14px;
	text-transform:uppercase;
	background-color:#79cf86;
	border:1px solid #ccc;
	border-radius:2px;
}

section.lobbies .games .game .name {
	cursor:pointer;
}
section.lobbies .games .game:hover .name {
	
}
section.lobbies .games .game:hover .btn {
	color:#fff;
	background-color:#79cf86;
}
section.lobbies .games .game.new-game {
	justify-content:center;
}



section.play .game-info {
	display:flex;
	gap:20px;
	flex-wrap:wrap;
	margin:40px auto;
	padding:20px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:10px;
}
section.play .commands {

}

.bonuses {
	display:flex;
	gap:20px;
	flex-wrap:wrap;
	margin:40px auto;
	padding:20px;
	background-color:#fff;
	border:1px solid #ccc;
	border-radius:10px;
}

.bonuses .bonus {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:120px;
	padding:10px 10px 40px 10px;
	border:1px solid #ccc;
	border-radius:10px;
	background-color:#777;
}
.bonuses .bonus label {
	position:relative;
	color:#fff;
	font-size:20px;
	font-weight:600;
	text-transform:uppercase;
	z-index:1;
	user-select:none;
}
.bonuses .bonus .indicators {
	position:absolute;
	left:0px;
	bottom:10px;
	width:100%;
	display:flex;
	box-sizing:border-box;
	justify-content:center;
	align-items:center;
	gap:2px;
	z-index:0;
}
.bonuses .bonus .ind {
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:16px;
	height:16px;
	border-radius:8px;
	outline:1px solid #fff;
	outline-offset:-2px;
	/*background-color:#bbb;*/
	opacity:.6;
}
.bonuses .bonus .ind:before {
	color:#fff;
	font-size:16px;
}
.bonuses .bonus .ind.on {
	opacity:1;
	/*background-color:#fff;*/
	outline-offset:-8px;
}
.bonuses .bonus .ind.on:before {
	content:'✷';/*✸*/
}


.bonuses .bonus[data-id="first"] {
	background-color:#0f47bf;
}
.bonuses .bonus[data-id="beggo"] {
	background-color:#2ce574;
}

.bonuses .bonus.cat-bonus {
	width:120px;
}
.bonuses .bonus.cat-bonus .ind:before {
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	color:#777;
	font-size:12px;
	font-weight:600;
}
.bonuses .bonus.cat-bonus[data-id="noises"] {
	background-color:#ff8b00;
}
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:before {
	color:#ff8b00;;
}
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:nth-child(1):before { content:'S'; }
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:nth-child(2):before { content:'M'; }
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:nth-child(3):before { content:'A'; }
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:nth-child(4):before { content:'C'; }
.bonuses .bonus.cat-bonus[data-id="noises"] .ind.on:nth-child(5):before { content:'K'; }

.bonuses .bonus.cat-bonus[data-id="bitching"] {
	background-color:#ff6f9f;
}
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:before {
	color:#ff6f9f;;
}
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:nth-child(1):before { content:'V'; }
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:nth-child(2):before { content:'I'; }
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:nth-child(3):before { content:'B'; }
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:nth-child(4):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="bitching"] .ind.on:nth-child(5):before { content:'S'; }

.bonuses .bonus.cat-bonus[data-id="wisdom"] {
	background-color:#bad391;
}
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:before {
	color:#bad391;;
}
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:nth-child(1):before { content:'I'; }
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:nth-child(2):before { content:'D'; }
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:nth-child(3):before { content:'I'; }
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:nth-child(4):before { content:'O'; }
.bonuses .bonus.cat-bonus[data-id="wisdom"] .ind.on:nth-child(5):before { content:'T'; }

.bonuses .bonus.cat-bonus[data-id="decrees"] {
	background-color:#99a6d5;
}
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:before {
	color:#99a6d5;;
}
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:nth-child(1):before { content:'R'; }
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:nth-child(2):before { content:'O'; }
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:nth-child(3):before { content:'Y'; }
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:nth-child(4):before { content:'A'; }
.bonuses .bonus.cat-bonus[data-id="decrees"] .ind.on:nth-child(5):before { content:'L'; }

.bonuses .bonus.cat-bonus[data-id="stream"] {
	background-color:#f7dd36;
}
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:before {
	color:#f7dd36;;
}
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:nth-child(1):before { content:'D'; }
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:nth-child(2):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:nth-child(3):before { content:'N'; }
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:nth-child(4):before { content:'T'; }
.bonuses .bonus.cat-bonus[data-id="stream"] .ind.on:nth-child(5):before { content:'S'; }

.bonuses .bonus.cat-bonus[data-id="begs"] {
	background-color:#5ac35a;
}
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:before {
	color:#5ac35a;;
}
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:nth-child(1):before { content:'G'; }
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:nth-child(2):before { content:'R'; }
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:nth-child(3):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:nth-child(4):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="begs"] .ind.on:nth-child(5):before { content:'D'; }

.bonuses .bonus.cat-bonus[data-id="copes"] {
	background-color:#76a5af;
}
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:before {
	color:#76a5af;;
}
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:nth-child(1):before { content:'H'; }
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:nth-child(2):before { content:'A'; }
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:nth-child(3):before { content:'P'; }
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:nth-child(4):before { content:'P'; }
.bonuses .bonus.cat-bonus[data-id="copes"] .ind.on:nth-child(5):before { content:'Y'; }

.bonuses .bonus.cat-bonus[data-id="life"] {
	background-color:#4cc2e9;
}
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:before {
	color:#4cc2e9;;
}
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:nth-child(1):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:nth-child(2):before { content:'L'; }
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:nth-child(3):before { content:'D'; }
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:nth-child(4):before { content:'E'; }
.bonuses .bonus.cat-bonus[data-id="life"] .ind.on:nth-child(5):before { content:'R'; }

.bonuses .bonus.cat-bonus[data-id="actions"] {
	background-color:#ff5545;
}
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:before {
	color:#ff5545;;
}
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:nth-child(1):before { content:'C'; }
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:nth-child(2):before { content:'L'; }
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:nth-child(3):before { content:'O'; }
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:nth-child(4):before { content:'W'; }
.bonuses .bonus.cat-bonus[data-id="actions"] .ind.on:nth-child(5):before { content:'N'; }

.bonuses .bonus.cat-bonus[data-id="marathon"] {
	background-color:#8f468d;
}
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:before {
	color:#8f468d;;
}
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:nth-child(1):before { content:'D'; }
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:nth-child(2):before { content:'R'; }
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:nth-child(3):before { content:'U'; }
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:nth-child(4):before { content:'N'; }
.bonuses .bonus.cat-bonus[data-id="marathon"] .ind.on:nth-child(5):before { content:'K'; }

.bonuses .bonus.cat-bonus[data-id="slop"] {
	background-color:#875e12;
}
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:before {
	color:#875e12;;
}
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:nth-child(1):before { content:'T'; }
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:nth-child(2):before { content:'A'; }
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:nth-child(3):before { content:'N'; }
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:nth-child(4):before { content:'G'; }
.bonuses .bonus.cat-bonus[data-id="slop"] .ind.on:nth-child(5):before { content:'Y'; }


.game-cards {
	display:flex;
	gap:20px;
}

.focus-card {
	display:inline-flex;
}

.other-cards {
	display:inline-flex;
	gap:10px;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-content:flex-start;
}


.card {
	display:grid;
	width:fit-content;
	height:fit-content;
	grid:auto-flow / repeat(5, 150px);
	gap:5px;
	padding:10px;
	background-color:#eee;
	border-radius:10px;
}

.card .info {
	display:flex;
	justify-content:space-between;
	grid-column-start:1;
	grid-column-end:6;
	padding-top:5px;
	padding-bottom:5px;
	font-size:18px;
}
.card .info .name {
	position:relative;
	padding-left:25px;
	padding-right:5px;
	color:#6d6d6f;
	font-weight:600;
	overflow:hidden;
	text-overflow:ellipsis;
}
.card .info .name:before {
	content:'👤';
	position:absolute;
	left:0px;
	display:flex;
	justify-content:center;
	align-items:center;
	width:20px;
	height:100%;
}
.card .info .score {
	color:#2f8c3d;
	white-space:nowrap;
}
.card .info .score:before {
	content:'✦';
	padding-right:1px;
	font-size:125%;
	line-height:80%;
}

.card .cell {
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	width:150px;
	height:150px;
	cursor:pointer;
	z-index:1;
}
.card .cell:hover {
	z-index:2;
}

.card .cell.claimed {
	
}
.card .cell.claimed:before {
	content:'ⓧ';
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	font-size:120px;
	color:#2ce574;
	text-shadow:0px 3px 5px rgba(0,0,0,.3);
	z-index:2;
	
}
.card .cell.claimed .tile {
	opacity:.5;
}
.card .cell.claimed:hover .tile {
	transform:scale(1);
}

.other-cards .card .cell {
	cursor:default;
}

.card .cell .tile {
	position:absolute;
	box-sizing:border-box;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	padding:15px;
	text-align:center;
	border-radius:4px;
	box-shadow:0px 6px 12px rgba(0,0,0,0);
	transform:scale(1);
	transition:transform 150ms ease-in-out, box-shadow 200ms ease-in-out;
}
.card .cell:hover .tile {
	transform:scale(1.12);
	box-shadow:0px 6px 12px rgba(0,0,0,.2);
}
.card .cell .tile:before {
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	background-color:#fff;
	box-shadow:inset 0px 2px 1px rgba(255,255,255,.6), inset 0px -1px 2px rgba(0,0,0,.3);
	border-radius:4px;
	opacity:.6;
	z-index:-2;
	transition:opacity 200ms ease-out;
}
.card .cell:hover .tile:before {
	opacity:1;
}
.card .cell .tile:after {
	content:'';
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	width:100%;
	height:100%;
	color:#fff;
	font-size:120px;
	text-align:center;
	opacity:.2;
	z-index:-1;
}


.card .cell .tile label {
	color:#fff;
	font-size:18px;
	font-weight:600;
	letter-spacing:.03em;
	line-height:1.2em;
	cursor:pointer;
	user-select:none;
}
.card .cell .tile label:before,
.card .cell .tile label:after {
	position:absolute;
	width:16px;
	text-align:center;
	display:inline-block;
	opacity:.5;
	font-size:1.5rem;
	line-height:1rem;
}
.card .cell .tile label:before {
	content:'“';
	margin-left:-16px;
}
.card .cell .tile label:after {
	content:'”';
}



.card .cell[data-cat="noises"] .tile:before {
	background-color:#ff8b00;
}
.card .cell[data-cat="noises"] .tile:after {
	content:'N';
}
.card .cell[data-cat="noises"] .tile label:before {
	content:'*';
}
.card .cell[data-cat="noises"] .tile label:after {
	content:'*';
}
.card .cell[data-cat="bitching"] .tile:before {
	background-color:#ff6f9f;
}
.card .cell[data-cat="bitching"] .tile:after {
	content:'B';
}
.card .cell[data-cat="wisdom"] .tile:before {
	background-color:#bad391;
}
.card .cell[data-cat="wisdom"] .tile:after {
	content:'W';
}
.card .cell[data-cat="decrees"] .tile:before {
	background-color:#99a6d5;
}
.card .cell[data-cat="decrees"] .tile:after {
	content:'D';
}
.card .cell[data-cat="stream"] .tile:before {
	background-color:#f7dd36;
}
.card .cell[data-cat="stream"] .tile:after {
	content:'S';
}
.card .cell[data-cat="begs"] .tile:before {
	background-color:#5ac35a;
}
.card .cell[data-cat="begs"] .tile:after {
	content:'B';
}
.card .cell[data-cat="copes"] .tile:before {
	background-color:#76a5af;
}
.card .cell[data-cat="copes"] .tile:after {
	content:'C';
}
.card .cell[data-cat="life"] .tile:before {
	background-color:#4cc2e9;
}
.card .cell[data-cat="life"] .tile:after {
	content:'L';
}
.card .cell[data-cat="actions"] .tile:before {
	background-color:#ff5545;
}
.card .cell[data-cat="actions"] .tile:after {
	content:'A';
}
.card .cell[data-cat="actions"] .tile label:before {
	content:none;
}
.card .cell[data-cat="actions"] .tile label:after {
	content:none;
}
.card .cell[data-cat="marathon"] .tile:before {
	background-color:#8f468d;
}
.card .cell[data-cat="marathon"] .tile:after {
	content:'M';
}
.card .cell[data-cat="slop"] .tile:before {
	background-color:#875e12;
}
.card .cell[data-cat="slop"] .tile:after {
	content:'S';
}



.card[data-format="small"] {
	grid:auto-flow / repeat(5, 40px);
	border-radius:5px;
}
.card[data-format="small"] .info {
	padding:0px;
	font-size:15px;
}
.card[data-format="small"] .info .name {
	padding-left:23px;
}
.card[data-format="small"] .info .name:before {
	
}
.card[data-format="small"] .cell {
	width:40px;
	height:40px;
}
.card[data-format="small"] .cell:hover {
	transform:scale(1.2);
}
.card[data-format="small"] .cell .tile {
	box-shadow:0px 1px 3px rgba(0,0,0,0);
}
.card[data-format="small"] .cell:hover .tile {
	box-shadow:0px 1px 3px rgba(0,0,0,.1);
}
.card[data-format="small"] .cell .tile:after {
	font-size:30px;
}
.card[data-format="small"] .cell .tile label {
	position:absolute;
	width:fit-content;
	min-width:80px;
	padding:5px 15px;
	color:#222;
	font-size:15px;
	font-weight:normal;
	letter-spacing:.01em;
	line-height:1.1em;
	background-color:rgba(255,255,255,.8);
	border-radius:3px;
	box-shadow:0px 3px 6px rgba(0,0,0,.2);
	pointer-events:none;
	cursor:default;
	visibility:hidden;
}
.card[data-format="small"] .cell .tile label:before,
.card[data-format="small"] .cell .tile label:after {
	width:auto;
	font-size:unset;
	line-height:unset;
}
.card[data-format="small"] .cell .tile label:before {
	margin-left:-8px;
}
.card[data-format="small"] .cell .tile label:after {
	margin-left:-20px;
	padding-left:23px;
}
.card[data-format="small"] .cell:hover .tile label {
	visibility:visible;
}