/*
 * SmartEdu Hry — štýly hry Tajnička. Načítavajú sa len spolu s touto hrou.
 * Spoločné premenné a triedy (.se-hra, .je-spravna, .je-nespravna) sú v prehravac.css.
 */

.se-taj {
	display: grid;
	grid-template-columns: minmax( 0, auto ) minmax( 14rem, 1fr );
	gap: 1.5rem 2.5rem;
	align-items: start;
	max-width: 80rem;
	margin: 0 auto;
}

.se-taj-lava {
	min-width: 0;
}

.se-taj-mriezka {
	--se-bunka: clamp( 2.25rem, 6vw, 3.25rem );
	--se-medzera: 0.3rem;
	display: grid;
	gap: var( --se-medzera );
	overflow-x: auto;
	padding: 0.35rem;
}

.se-taj-riadok {
	display: flex;
	gap: var( --se-medzera );
	align-items: center;
	width: max-content;
	padding: 0.15rem 0.35rem 0.15rem 0;
	border-radius: 10px;
}

.se-taj-cislo {
	flex: none;
	width: 2em;
	color: var( --wp--preset--color--text-jemny, #475569 );
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.se-taj-riadok.je-aktivny .se-taj-cislo {
	color: var( --wp--preset--color--primarna, #1d4ed8 );
}

.se-taj-odsadenie {
	flex: none;
	width: calc( var( --se-posun, 0 ) * ( var( --se-bunka ) + var( --se-medzera ) ) );
}

/* .se-hra pred triedou: téma štýluje input[ type="text" ] silnejším selektorom (min. výška 44 px, odsadenie). */
.se-hra .se-taj-bunka {
	flex: none;
	width: var( --se-bunka );
	height: var( --se-bunka );
	min-height: 0;
	padding: 0;
	border: 2px solid var( --wp--preset--color--text, #0f172a );
	border-radius: 6px;
	background: var( --wp--preset--color--podklad, #fff );
	color: inherit;
	caret-color: var( --wp--preset--color--primarna, #1d4ed8 );
	font: inherit;
	font-size: calc( var( --se-bunka ) * 0.5 );
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}

/* Stĺpec tajničky: dvojitý rám a jemný podklad — nezávisí len od farby. */
.se-taj-bunka.je-tajnicka {
	border-width: 3px;
	background: var( --se-jemny );
	box-shadow: inset 0 0 0 3px var( --wp--preset--color--podklad, #fff ), inset 0 0 0 5px var( --wp--preset--color--primarna, #1d4ed8 );
}

.se-taj-bunka.je-nespravna {
	border-color: var( --se-chyba ) !important;
	background: color-mix( in srgb, var( --se-chyba ) 14%, var( --wp--preset--color--podklad, #fff ) );
	text-decoration: line-through;
}

.se-taj-bunka.je-ukazana {
	color: var( --wp--preset--color--primarna, #1d4ed8 );
}

.se-taj-znak {
	flex: none;
	width: 1.5em;
	color: var( --se-uspech );
	font-size: 1.4em;
	font-weight: 800;
}

.se-taj-riesenie {
	margin: 1rem 0 0;
	font-size: clamp( 1.5em, 3vw, 2.25em );
	font-weight: 800;
	letter-spacing: 0.08em;
}

.se-taj-riesenie:empty {
	display: none;
}

.se-taj-nadpis {
	margin: 0 0 0.5rem;
	font-weight: 700;
}

.se-taj-napovedy {
	margin: 0;
	padding-left: 1.75em;
}

.se-taj-napovedy li {
	margin: 0 0 0.35rem;
	padding: 0.3rem 0.6rem;
	border-radius: 8px;
	line-height: 1.4;
}

.se-taj-napovedy li.je-aktivny {
	outline: 2px solid var( --wp--preset--color--primarna, #1d4ed8 );
	background: var( --se-jemny );
	font-weight: 600;
}

.se-taj-akcie {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.5rem;
}

@media ( max-width: 56rem ) {
	.se-taj {
		grid-template-columns: 1fr;
	}

	/*
	 * Políčka sa zmenšia podľa počtu stĺpcov (--se-stlpcov z hra-tajnicka.js), aby sa mriežka
	 * zmestila na šírku mobilu. 4.6rem = číslo riadku, znak ✓, medzery a okraje mriežky.
	 */
	.se-taj-lava {
		container-type: inline-size;
	}

	.se-taj-mriezka {
		--se-medzera: 0.2rem;
		--se-bunka: clamp( 1.75rem, calc( ( 100cqi - 4.6rem ) / var( --se-stlpcov, 8 ) - 0.2rem ), 2.75rem );
	}

	.se-taj-cislo {
		width: 1.5rem;
	}

	.se-taj-znak {
		width: 1.5rem;
		font-size: 1.25rem;
	}
}

.se-hra.se-projektor .se-taj-mriezka {
	--se-bunka: clamp( 3rem, 4.5vw, 4.25rem );
}