/**
 * Production UI layer — shared identity and fluid game boards.
 * Loaded last so first-party games behave consistently from 320px upward.
 */

.snmg-game-page .snmg-shell,
.snmg-is-game .snmg-shell {
	min-width: 0;
}

.snmg-game {
	isolation: isolate;
	max-width: 100%;
	overflow: clip;
}

.snmg-game__intro {
	align-items: center;
	gap: clamp(22px, 4vw, 48px);
}

.snmg-game__identity {
	align-items: center;
	display: flex;
	gap: clamp(16px, 2.2vw, 24px);
	min-width: 0;
}

.snmg-game__identity > div {
	min-width: 0;
}

.snmg-game__icon {
	align-items: center;
	background: color-mix(in srgb, var(--game-accent) 12%, var(--snmg-surface));
	border: 1px solid color-mix(in srgb, var(--game-accent) 24%, var(--snmg-line));
	border-radius: 22px;
	box-shadow: 0 12px 30px color-mix(in srgb, var(--game-accent) 13%, transparent);
	color: var(--game-accent);
	display: flex;
	flex: 0 0 clamp(68px, 7vw, 86px);
	height: clamp(68px, 7vw, 86px);
	justify-content: center;
}

.snmg-game__icon svg {
	height: 46%;
	width: 46%;
}

.snmg-game__intro h1 {
	overflow-wrap: anywhere;
}

.snmg-mode-switch {
	flex: 0 0 auto;
}

.snmg-mode-switch button {
	min-height: 42px;
	white-space: nowrap;
}

.snmg-game__stage {
	min-width: 0;
	overflow: hidden;
	overflow: clip;
	width: 100%;
}

.snmg-play {
	max-width: 1040px;
	min-width: 0;
}

.snmg-play__top,
.snmg-play__bar,
.snmg-play > form,
.snmg-play > div,
.snmg-play > section {
	min-width: 0;
}

.snmg-play__bar {
	gap: 10px;
}

.snmg-play__bar > span:not(.snmg-play__game-icon) {
	min-width: 0;
	overflow-wrap: anywhere;
}

.snmg-play__game-icon,
.snmg-rules__icon,
.snmg-related__icon {
	align-items: center;
	background: color-mix(in srgb, var(--game-accent) 11%, var(--snmg-surface));
	border: 1px solid color-mix(in srgb, var(--game-accent) 22%, var(--snmg-line));
	border-radius: 10px;
	color: var(--game-accent);
	display: inline-flex;
	flex: 0 0 34px;
	height: 34px;
	justify-content: center;
}

.snmg-play__game-icon svg,
.snmg-rules__icon svg,
.snmg-related__icon svg {
	height: 19px;
	width: 19px;
}

.snmg-play__bar .snmg-timer {
	margin-left: auto;
	white-space: nowrap;
}

.snmg-rules__intro {
	grid-template-columns: minmax(190px, .46fr) minmax(0, 1fr);
}

.snmg-rules__title {
	align-items: center;
	display: flex;
	gap: 11px;
	min-width: 0;
}

.snmg-rules__title h3 {
	overflow-wrap: anywhere;
}

.snmg-rules__intro > p {
	min-width: 0;
}

/* Woordle: the row owns the available width, including seven-letter words. */
.snmg-wordle {
	max-width: min(100%, 520px);
	min-width: 0;
	width: 100%;
}

.snmg-wordle-board {
	gap: clamp(4px, 1.1vw, 7px);
	width: 100%;
}

.snmg-wordle-row {
	display: grid;
	gap: clamp(3px, 1vw, 7px);
	grid-template-columns: repeat(var(--word-length, 6), minmax(0, 1fr));
	min-width: 0;
	width: 100%;
}

.snmg-wordle-tile {
	font-size: clamp(16px, 4.8vw, 27px);
	min-width: 0;
	width: auto;
}

.snmg-wordle-form {
	min-width: 0;
	width: 100%;
}

.snmg-wordle-form input {
	min-height: 48px;
	overflow: hidden;
}

.snmg-wordle-form button {
	min-height: 48px;
	white-space: nowrap;
}

/* Osmosmerka: the board can grow on desktop and always shrinks inside mobile. */
.snmg-wordsearch {
	align-items: start;
	gap: clamp(16px, 2.5vw, 28px);
	grid-template-columns: minmax(0, 1fr) minmax(170px, 220px);
	margin-inline: auto;
	max-width: 980px;
	min-width: 0;
	width: 100%;
}

.snmg-wordsearch-board {
	min-width: 0;
}

.snmg-wordsearch-grid {
	max-width: min(640px, 100%);
	min-width: 0;
	width: 100%;
}

.snmg-wordsearch-grid button {
	font-size: clamp(9px, 1.45vw, 18px);
	line-height: 1;
	overflow: hidden;
	text-overflow: clip;
}

.snmg-wordsearch-grid[data-size="16"] button {
	font-size: clamp(8px, 1.25vw, 15px);
}

.snmg-wordsearch-grid button.is-selecting {
	box-shadow: inset 0 0 0 2px var(--game-accent);
}

.snmg-word-list {
	min-width: 0;
	overflow: hidden;
}

.snmg-word-list h3,
.snmg-word-list li {
	overflow-wrap: anywhere;
}

.snmg-word-list > div > p {
	color: var(--snmg-muted);
	font-size: 12px;
	margin: 0 0 15px;
}

/* Other boards use the same hard boundary and touch dimensions. */
.snmg-sudoku,
.snmg-puzzle,
.snmg-memory,
.snmg-network,
.snmg-word-grid {
	max-width: 100%;
	min-width: 0;
}

.snmg-sudoku input {
	min-height: 0;
	padding: 0;
}

.snmg-puzzle {
	aspect-ratio: 1;
	overflow: hidden;
}

.snmg-puzzle-piece {
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.snmg-memory-wrap,
.snmg-network-wrap,
.snmg-word-grid-layout {
	min-width: 0;
	width: 100%;
}

.snmg-memory button,
.snmg-network-tile {
	min-height: 0;
	min-width: 0;
}

.snmg-memory[data-pairs="15"] {
	gap: clamp(4px, 1vw, 8px);
}

.snmg-memory[data-pairs="15"] .snmg-memory__front b {
	font-size: clamp(22px, 4.3vw, 39px);
}

.snmg-result__points {
	align-items: center;
	background: color-mix(in srgb, var(--game-accent) 9%, var(--snmg-surface));
	border: 1px solid color-mix(in srgb, var(--game-accent) 24%, var(--snmg-line));
	border-radius: 16px;
	display: grid;
	gap: 3px 12px;
	grid-template-columns: 1fr auto;
	margin: -13px 0 24px;
	padding: 14px 16px;
	text-align: left;
}

.snmg-result__points > span {
	color: var(--snmg-muted);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.snmg-result__points > strong {
	color: var(--game-accent);
	font-size: 24px;
	grid-row: 1 / span 2;
}

.snmg-result__points > small {
	color: var(--snmg-muted);
	font-size: 11px;
	line-height: 1.45;
}

.snmg-profile-stats {
	grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
}

.snmg-quiz-question,
.snmg-quiz-options,
.snmg-quiz-options label,
.snmg-quiz-options label span {
	min-width: 0;
}

.snmg-quiz-question h3,
.snmg-quiz-options label span,
.snmg-quiz-review h3,
.snmg-quiz-review strong,
.snmg-quiz-review small {
	overflow-wrap: anywhere;
}

.snmg-quiz-options label {
	min-height: 48px;
}

.snmg-related a {
	grid-template-columns: auto minmax(0, 1fr);
}

.snmg-related a > strong,
.snmg-related a > span,
.snmg-related a > b {
	grid-column: 2;
}

.snmg-related__icon {
	grid-row: 1 / span 3;
}

.snmg-today-icon svg,
.snmg-package-card__role svg,
.snmg-featured-game__visual svg {
	display: block;
	height: 54%;
	width: 54%;
}

.snmg-package-card__role b {
	align-items: center;
	display: flex;
	justify-content: center;
}

.snmg-featured-game__visual > span {
	align-items: center;
	display: flex;
	justify-content: center;
}

.snmg-game-card h2,
.snmg-game-card h3,
.snmg-game-card p,
.snmg-today-game h3,
.snmg-today-game p,
.snmg-package-card h3,
.snmg-package-card p {
	overflow-wrap: anywhere;
}

.snmg-game-card > a,
.snmg-today-game,
.snmg-package-card {
	min-width: 0;
}

.snmg-history-game {
	align-items: center;
	display: inline-flex;
	font-weight: 750;
	gap: 8px;
	min-width: 0;
}

.snmg-history-game i {
	align-items: center;
	background: var(--snmg-soft);
	border: 1px solid var(--snmg-line);
	border-radius: 8px;
	color: var(--snmg-red, #e30613);
	display: inline-flex;
	flex: 0 0 30px;
	height: 30px;
	justify-content: center;
}

.snmg-history-game svg {
	height: 16px;
	width: 16px;
}

.snmg-history-game > span {
	overflow-wrap: anywhere;
}

.snmg-profile-panel,
.snmg-profile-grid,
.snmg-history {
	min-width: 0;
}

@media (max-width: 900px) {
	.snmg-wordsearch {
		grid-template-columns: minmax(0, 1fr) minmax(150px, 190px);
	}
}

@media (max-width: 720px) {
	.snmg-game {
		border-radius: 22px;
	}

	.snmg-game__intro {
		gap: 20px;
	}

	.snmg-game__identity {
		align-items: flex-start;
	}

	.snmg-game__icon {
		border-radius: 16px;
		flex-basis: 62px;
		height: 62px;
	}

	.snmg-game__intro h1 {
		font-size: clamp(38px, 12vw, 55px);
	}

	.snmg-mode-switch {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.snmg-mode-switch button {
		min-width: 0;
		padding-inline: 10px;
		white-space: normal;
	}

	.snmg-game__stage {
		min-height: 440px;
	}

	.snmg-rules__intro {
		grid-template-columns: 1fr;
	}

	.snmg-wordsearch {
		grid-template-columns: 1fr;
	}

	.snmg-wordsearch-grid {
		margin-inline: auto;
	}

	.snmg-word-list {
		padding: 16px;
	}

	.snmg-word-list ul {
		display: grid;
		gap: 7px 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.snmg-word-list li {
		font-size: 12px;
	}
}

@media (max-width: 520px) {
	.snmg-game-page,
	.snmg-is-game .snmg-game-page {
		padding-top: 12px;
	}

	.snmg-game__intro {
		padding: 22px 16px;
	}

	.snmg-game__identity {
		gap: 12px;
	}

	.snmg-game__icon {
		border-radius: 14px;
		flex-basis: 50px;
		height: 50px;
	}

	.snmg-game__intro h1 {
		font-size: clamp(34px, 11vw, 47px);
		letter-spacing: -.055em;
		margin: 7px 0;
	}

	.snmg-game__intro p {
		font-size: 13px;
		line-height: 1.45;
	}

	.snmg-game__stage {
		min-height: 400px;
		padding: 22px 10px 26px;
	}

	.snmg-game__footer {
		gap: 12px;
		padding-inline: 16px;
	}

	.snmg-play__bar {
		align-items: center;
		flex-wrap: wrap;
	}

	.snmg-play__game-icon {
		flex-basis: 30px;
		height: 30px;
	}

	.snmg-play__bar > span:not(.snmg-play__game-icon) {
		font-size: 10px;
	}

	.snmg-play-rules > summary {
		min-height: 44px;
	}

	.snmg-wordle-board {
		margin-bottom: 16px;
	}

	.snmg-wordle-row {
		gap: 3px;
	}

	.snmg-wordle-tile {
		border-radius: 5px;
		border-width: 1.5px;
		font-size: clamp(15px, 5.4vw, 22px);
	}

	.snmg-wordle-form {
		display: grid;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.snmg-wordle-form input {
		font-size: 16px;
		padding-inline: 14px;
	}

	.snmg-wordle-form button {
		padding-inline: 15px;
	}

	.snmg-wordsearch-help {
		font-size: 11px;
		line-height: 1.45;
	}

	.snmg-wordsearch-grid button {
		font-size: clamp(8px, 3vw, 13px);
	}

	.snmg-wordsearch-grid[data-size="16"] button {
		font-size: clamp(7px, 2.45vw, 11px);
	}

	.snmg-word-list ul {
		gap: 6px 10px;
	}

	.snmg-quiz-question {
		border-radius: 14px;
		padding: 16px;
	}

	.snmg-quiz-question h3 {
		font-size: 16px;
	}

	.snmg-quiz-options {
		grid-template-columns: 1fr;
	}

	.snmg-sudoku[data-size="9"] input {
		font-size: clamp(15px, 5vw, 21px);
	}

	.snmg-sudoku[data-size="4"] input {
		font-size: clamp(24px, 9vw, 31px);
	}

	.snmg-memory__front small {
		font-size: 8px;
	}

	.snmg-related a {
		padding: 12px;
	}

	.snmg-history thead {
		display: none;
	}

	.snmg-history,
	.snmg-history tbody,
	.snmg-history tr,
	.snmg-history td {
		display: block;
		width: 100%;
	}

	.snmg-history tr {
		background: var(--snmg-soft);
		border: 1px solid var(--snmg-line);
		border-radius: 14px;
		display: grid;
		gap: 10px 14px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-bottom: 9px;
		padding: 12px;
	}

	.snmg-history td {
		border: 0;
		min-width: 0;
		padding: 0;
	}

	.snmg-history td:first-child {
		grid-column: 1 / -1;
	}

	.snmg-history td::before {
		color: var(--snmg-muted);
		display: block;
		font-size: 8px;
		font-weight: 850;
		letter-spacing: .07em;
		margin-bottom: 3px;
		text-transform: uppercase;
	}

	.snmg-history td:nth-child(1)::before { content: "Igra"; }
	.snmg-history td:nth-child(2)::before { content: "Ishod"; }
	.snmg-history td:nth-child(3)::before { content: "Poeni"; }
	.snmg-history td:nth-child(4)::before { content: "Datum"; }
	.snmg-history td[colspan]::before { content: none; }
}

@media (max-width: 360px) {
	.snmg-game__stage {
		padding-inline: 8px;
	}

	.snmg-wordle-form {
		grid-template-columns: 1fr;
	}

	.snmg-wordle-form button {
		width: 100%;
	}

	.snmg-word-list ul {
		grid-template-columns: 1fr;
	}

	.snmg-wordsearch-grid button,
	.snmg-wordsearch-grid[data-size="16"] button {
		font-size: 7px;
	}
}

@media (pointer: coarse) {
	.snmg-mode-switch button,
	.snmg-submit,
	.snmg-wordle-form button,
	.snmg-quiz-options label,
	.snmg-archive-item,
	.snmg-related a {
		min-height: 44px;
	}
}