.rowgo-title-row,
.rowgo-title-go {
	font-weight: 900;
}

.rowgo-title-row {
	color: #4f9d69;
}

.rowgo-title-go {
	color: #d8b33f;
}

.game-panel {
	align-items: stretch;
	justify-items: stretch;
	min-height: 0;
	text-align: left;
}

.rowgo-mount,
.rowgo-game {
	width: 100%;
}

.rowgo-game {
	display: grid;
	gap: 14px;
	justify-items: center;
}

.rowgo-board-wrap {
	width: min(100%, 420px);
	margin-inline: auto;
}

.rowgo-board {
	--rowgo-size: 5;
	display: grid;
	gap: 8px;
	width: 100%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}

.rowgo-row {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--rowgo-size), minmax(0, 1fr));
	gap: 8px;
}

.rowgo-row.solved {
	animation: rowgo-row-pop .32s ease;
}

.rowgo-tile {
	aspect-ratio: 1;
	min-width: 0;
	min-height: 0;
	border: 2px solid #565d66;
	border-radius: 7px;
	display: grid;
	place-items: center;
	padding: 0;
	background: var(--panel-2);
	color: var(--ink);
	font-size: clamp(1.35rem, 9vw, 2.25rem);
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1;
	transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.rowgo-tile.green {
	background: #538d4e;
	border-color: #538d4e;
	color: #fff;
}

.rowgo-tile.yellow {
	background: #b59f3b;
	border-color: #b59f3b;
	color: #fff;
}

.rowgo-tile.blue {
	background: #2563eb;
	border-color: #2563eb;
	color: #fff;
}

.rowgo-tile.grey {
	background: #3a3a3c;
	border-color: #3a3a3c;
	color: #fff;
}

.rowgo-tile.selected,
.rowgo-tile.drop-target {
	/*
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .2);
	*/
}

.rowgo-tile.drag-source {
	opacity: .45;
}

.rowgo-tile:disabled {
	cursor: default;
}

.rowgo-letter {
	display: block;
	transform: translateY(-1px);
}

.rowgo-meta {
	width: min(100%, 420px);
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
}

.rowgo-swaps,
.rowgo-status {
	border: 1px solid var(--line);
	background: var(--panel-2);
	border-radius: 8px;
	min-height: 42px;
	display: inline-grid;
	align-items: center;
}

.rowgo-swaps {
	grid-auto-flow: column;
	gap: 7px;
	padding: 0 12px;
	font-weight: 900;
}

.rowgo-status {
	padding: 0 12px;
	color: var(--muted);
	font-weight: 750;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.rowgo-reset {
	border-radius: 8px;
	white-space: nowrap;
}

.rowgo-message {
	min-height: 24px;
	color: var(--muted);
	text-align: center;
	font-weight: 750;
}

.rowgo-empty {
	display: grid;
	gap: 8px;
	justify-items: center;
	padding: 28px 14px;
	text-align: center;
}

.rowgo-drag-ghost {
	position: fixed;
	z-index: 40;
	width: 56px;
	height: 56px;
	margin: -28px 0 0 -28px;
	border: 2px solid currentColor;
	border-radius: 7px;
	display: grid;
	place-items: center;
	pointer-events: none;
	font-size: 1.8rem;
	font-weight: 900;
	line-height: 1;
	box-shadow: 0 16px 32px rgba(0, 0, 0, .28);
	transform: scale(1.04);
}

.rowgo-drag-ghost.green {
	background: #538d4e;
	color: #fff;
	border-color: #538d4e;
}

.rowgo-drag-ghost.yellow {
	background: #b59f3b;
	color: #fff;
	border-color: #b59f3b;
}

.rowgo-drag-ghost.blue {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

.rowgo-drag-ghost.grey {
	background: #3a3a3c;
	color: #fff;
	border-color: #3a3a3c;
}

@keyframes rowgo-row-pop {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.025);
	}
	100% {
		transform: scale(1);
	}
}

@media (max-width: 560px) {
	.rowgo-board,
	.rowgo-row {
		gap: 6px;
	}

	.rowgo-meta {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.rowgo-reset {
		grid-column: 1 / -1;
		justify-self: stretch;
	}
}