/* Connections: the grid, its tiles and solved groups, shared by the player
   page, the host page and the TV board. The four category colors are the
   original game's, easiest first. */

:root {
	--c-yellow: #f9df6d;
	--c-green: #a0c35a;
	--c-blue: #b0c4ef;
	--c-purple: #ba81c5;
	--tile: #fbfaf6;
}

.c-yellow { --cat: var(--c-yellow); }
.c-green { --cat: var(--c-green); }
.c-blue { --cat: var(--c-blue); }
.c-purple { --cat: var(--c-purple); }

/* ---------- Logo ---------- */

.conn-logo {
	display: flex;
	align-items: center;
	gap: 0.28em;
	margin-bottom: 30px;
	font-size: clamp(40px, 11vw, 72px);
}

/* Four tiles, one per color, like a group falling into place */
.conn-logo-mark {
	display: grid;
	grid-template-columns: repeat(2, 0.42em);
	gap: 0.07em;
}

.conn-logo-mark span {
	height: 0.42em;
	border: 2px solid var(--ink);
	border-radius: 0.08em;
	background: var(--cat);
	box-shadow: 2px 2px 0 var(--ink);
	animation: mark-in 0.6s calc(var(--i) * 80ms) var(--ease-spring) both;
}

@keyframes mark-in {
	from {
		opacity: 0;
		transform: translate(var(--from, 0.2em), -0.3em) rotate(20deg);
	}
}

/* ---------- Room code ---------- */

.code-tile {
	display: inline-grid;
	place-items: center;
	width: 0.9em;
	height: 1.05em;
	border: 3px solid var(--ink);
	border-radius: 0.12em;
	background: var(--cat, var(--surface));
	box-shadow: 4px 4px 0 var(--ink);
	font-size: 0.8em;
	animation: code-drop 0.6s calc(var(--i) * 70ms) var(--ease-spring) both;
}

@keyframes code-drop {
	from {
		opacity: 0;
		transform: translateY(-40px) rotate(12deg);
	}
}

/* ---------- Grid ---------- */

.grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.tile {
	display: grid;
	place-items: center;
	min-width: 0;
	min-height: 68px;
	padding: 6px 4px;
	border: var(--border);
	border-radius: 10px;
	background: var(--tile);
	color: var(--ink);
	font: inherit;
	font-weight: 800;
	font-size: min(17px, 4.6vw);
	font-stretch: 85%;
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: uppercase;
	overflow-wrap: anywhere;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition:
		background-color 0.12s,
		color 0.12s,
		transform 0.2s var(--ease-spring);
}

.tile.is-long { font-size: min(14px, 3.7vw); }
.tile.is-xlong { font-size: min(12px, 3.1vw); }

button.tile {
	cursor: pointer;
}

button.tile:not(:disabled):active {
	transform: scale(0.94);
}

.tile.is-picked {
	background: var(--ink);
	color: #fff;
}

.grid.is-locked .tile:not(.is-picked) {
	opacity: 0.6;
}

.tile:disabled {
	cursor: default;
}

/* A found group spans the row, in its color */
.solved {
	grid-column: 1 / -1;
	display: grid;
	place-content: center;
	min-height: 68px;
	padding: 8px 12px;
	border: var(--border);
	border-radius: 10px;
	background: var(--cat);
	box-shadow: 3px 3px 0 var(--ink);
	text-align: center;
}

.solved.is-new {
	animation: solved-in 0.5s var(--ease-spring);
}

@keyframes solved-in {
	from {
		transform: scale(0.85);
		opacity: 0;
	}
}

.solved-name {
	font-weight: 800;
	font-size: 17px;
	font-stretch: 85%;
	line-height: 1.15;
	text-transform: uppercase;
}

.solved-words {
	font-weight: 600;
	font-size: 15px;
	line-height: 1.25;
	text-transform: uppercase;
}

@media (min-width: 600px) {
	.grid {
		gap: 10px;
	}

	.tile,
	.solved {
		min-height: 84px;
	}

	.tile { font-size: 20px; }
	.tile.is-long { font-size: 17px; }
	.tile.is-xlong { font-size: 14px; }
}