/*
 * SmartEdu Hry — bočné panely hry (napríklad Náhodný žiak v kvíze).
 *
 * Panel je rámec: tlačidlo v hlavičke, stĺpec vpravo s hlavičkou a krížikom a miesto
 * na obsah, ktorý postaví iný plugin. Na stránke hry a na celej obrazovke je panel
 * stĺpec vedľa hry (od 1000 px šírky); na užšej obrazovke a v hre vloženej do
 * obsahu je to prekrytie sprava a hra sa nezužuje. Načítava sa len tam, kde panel je.
 */

/* --- Tlačidlo v hlavičke -------------------------------------------------- */

/* Zatvorený panel je modrý obrys; otvorený berie plné tmavé z .se-hra-tlacidlo[aria-expanded]. */
.se-hra-tlacidlo--panel {
	display: inline-flex;
	gap: 0.5em;
	align-items: center;
	color: var( --wp--preset--color--primarna, #1d4ed8 );
}

/* Okrem plnej farby aj bodka — stav nie je len farba. */
.se-hra-tlacidlo--panel[aria-expanded="true"]::before {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	border-radius: 50%;
	background: var( --wp--preset--color--akcent, #06b6d4 );
}

/* --- Rozloženie: hra vľavo, panel vpravo -------------------------------- */

.se-hra-telo {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
}

/* Hlavná časť: pruh Odpovedá nad hracou plochou. Pruh je mimo plochy, takže hry
   si veľkosti vyrátajú z toho, čo ostane, a nič nepreteká. */
.se-hra-hlavny {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	min-width: 0;
}

/* Javisko (prehravac.css): telo hry dostane celý zvyšok výšky, panel s ním. */
@media ( min-width: 48rem ) and ( min-height: 32rem ) {
	.se-hra--cela .se-hra-telo,
	.se-hra--cela-obrazovka .se-hra-telo {
		flex: 1;
		min-height: 0;
	}

	.se-hra--cela .se-hra-hlavny,
	.se-hra--cela-obrazovka .se-hra-hlavny {
		min-height: 0;
	}
}

/* --- Pruh Odpovedá: kto práve odpovedá (vyžrebovaný v paneli Náhodný žiak) -- */

.se-hra-pruh {
	display: flex;
	flex: none;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	align-items: center;
	margin: 0 0 0.75rem;
	padding: 0.5rem 1rem;
	border: 2px solid var( --wp--preset--color--primarna, #1d4ed8 );
	border-radius: 12px;
	background: color-mix( in srgb, var( --wp--preset--color--primarna, #1d4ed8 ) 8%, var( --wp--preset--color--podklad, #fff ) );
}

.se-hra-pruh[hidden] {
	display: none;
}

.se-hra-pruh-stitok {
	color: var( --wp--preset--color--primarna, #1d4ed8 );
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.se-hra-pruh-meno {
	font-size: 1.6em;
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/* Kým sa koleso točí, je v pruhu text namiesto mena — tlmený, aby sa nečítal ako výsledok. */
.se-hra-pruh.je-tocenie .se-hra-pruh-meno {
	color: var( --wp--preset--color--text-jemny, #475569 );
	font-size: 1.2em;
	font-weight: 600;
}

.se-hra-pruh-trieda {
	color: var( --wp--preset--color--text-jemny, #475569 );
}

.se-hra-pruh-iny {
	margin-left: auto;
	background: var( --wp--preset--color--podklad, #fff );
	color: var( --wp--preset--color--primarna, #1d4ed8 );
}

.se-hra-pruh-iny[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --- Panel: prekrytie sprava (základ) ----------------------------------- */

.se-hra-bocny {
	/* Podklad panela je jemnejší než jemný podklad hry, aby na ňom vynikli polia a políčka obsahu. */
	--se-panel: color-mix( in srgb, var( --se-jemny ) 50%, var( --wp--preset--color--podklad, #fff ) );
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0 );
	right: 0;
	bottom: 0;
	z-index: 100;
	box-sizing: border-box;
	width: min( 430px, 100vw );
	overflow: hidden;
	background: var( --se-panel );
	box-shadow: -12px 0 32px -16px rgba( 15, 23, 42, 0.35 );
	visibility: hidden;
	transform: translateX( 100% );
	transition: transform 0.2s ease, visibility 0s linear 0.2s;
}

.se-hra-bocny.je-otvoreny {
	visibility: visible;
	transform: none;
	transition: transform 0.2s ease;
}

.se-hra-bocny-vnutro {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
	border-left: 1px solid var( --se-okraj );
}

.se-hra-bocny-hlavicka {
	display: flex;
	flex: none;
	gap: 0.75rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 1.25rem 0.25rem;
}

.se-hra-bocny-nadpis {
	margin: 0;
	font-size: 1.2em;
	line-height: 1.2;
}

.se-hra-bocny-nadpis:focus:not( :focus-visible ) {
	outline: none;
}

.se-hra-bocny-zavriet {
	flex: none;
	border-color: transparent;
	font-size: 1.5em;
	line-height: 1;
}

/* Dvojitá trieda: obsah panela (napr. okno nástroja) má vlastné odsadenie, rámec ho prebije. */
.se-hra-bocny .se-hra-bocny-telo {
	position: relative;
	flex: 1;
	padding: 0 1.25rem 1.25rem;
}

/* --- Panel: stĺpec vedľa hry (stránka hry a celá obrazovka od 1000 px) --- */

@media ( min-width: 62.5rem ) {
	.se-hra--cela .se-hra-bocny,
	.se-hra--cela-obrazovka .se-hra-bocny {
		position: sticky;
		top: 0;
		z-index: auto;
		flex: none;
		align-self: flex-start;
		width: 0;
		max-height: 100vh;
		max-height: 100dvh;
		box-shadow: none;
		transform: none;
		transition: width 0.2s ease, visibility 0s linear 0.2s;
	}

	.se-hra--cela .se-hra-bocny.je-otvoreny,
	.se-hra--cela-obrazovka .se-hra-bocny.je-otvoreny {
		width: 430px;
		transition: width 0.2s ease;
	}

	/* Obsah má pevnú šírku — pri otváraní sa nepreskupuje, panel ho len odkrýva. */
	.se-hra--cela .se-hra-bocny-vnutro,
	.se-hra--cela-obrazovka .se-hra-bocny-vnutro {
		width: 430px;
		height: auto;
	}
}

/* Javisko: panel vyplní výšku hry a posúva sa vo vnútri. */
@media ( min-width: 62.5rem ) and ( min-height: 32rem ) {
	.se-hra--cela .se-hra-bocny,
	.se-hra--cela-obrazovka .se-hra-bocny {
		position: static;
		align-self: stretch;
		max-height: none;
	}

	.se-hra--cela .se-hra-bocny-vnutro,
	.se-hra--cela-obrazovka .se-hra-bocny-vnutro {
		height: 100%;
	}
}