/**
 * Prvky kolem her, které přibyly s účty hráčů: lišta nad hrou, pole na
 * úvodní obrazovce, závěrečná obrazovka s pořadím a oslavou, odznaky
 * a výherní kód.
 *
 * Soubor se přikládá do všech her, proto se opírá jen o proměnné, které
 * má každá hra ve svém stylu. Hodnota za čárkou je pojistka pro případ,
 * že se stejné komponenty použijí i jinde - nedefinovaná proměnná se totiž
 * neprojeví ničím, žádnou chybou, jen zmizelou vlastností.
 */

.hrac-uvod {
	margin: 0 0 12px;
	text-align: left;
}

.hrac-uvod__radek {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
}

.hrac-uvod .pole {
	width: 100%;
	margin-bottom: 8px;
}

.hrac-uvod__radek .pole { margin-bottom: 0; }

.hrac-uvod__pozn {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--seda, #7B7378);
}

/* ---- ceny na úvodní obrazovce ---- */

/*
 * Pruh stojí nad poli na jméno a nahradil popis hry. Ikony jsou kreslené
 * (js/vyhry.js) a berou barvu odsud, takže celý řádek drží švestkovou linku.
 */
.vyhry {
	margin: 0 0 14px;
	padding: 12px 10px 10px;
	background: var(--pozadi, #EFEAE5);
	border: 2px dashed var(--svestka, #440099);
}

.vyhry__popisek {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	color: var(--svestka, #440099);
}

/* Auto-fit s úzkým minimem: na širokém panelu jeden řádek, na telefonu
   se ceny přeskládají do dvou. Popisek pod ikonou je nutný — pilník od
   propisky by se podle siluety poznat nedal. */
.vyhry__seznam {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
	gap: 8px 4px;
}

.vyhry__kus {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	color: var(--svestka, #440099);
}

.vyhry__ikona {
	display: block;
	width: 26px;
	height: 26px;
}

.vyhry__ikona svg {
	display: block;
	width: 100%;
	height: 100%;
}

.vyhry__nazev {
	font-size: 9.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	color: var(--seda, #7B7378);
}

.hrac-uvod__chyba {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	color: #C1121F;
}

.hrac-uvod__odkaz {
	color: var(--svestka, #440099);
	font-weight: 700;
	white-space: nowrap;
}

.hrac-uvod--prihlaseny { text-align: center; }

.hrac-uvod__kdo {
	margin: 0 0 4px;
	font-size: 16px;
}

.hrac-uvod__rekord {
	margin: 0;
	font-size: 13px;
	color: var(--seda, #7B7378);
}

/* ------------------------------------------------------------ lišta hráče */

.lista-hrace {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	max-width: 520px;
	margin: 0 auto 10px;
	padding: 8px 14px;
	background: #FFFFFF;
	border: 2px solid var(--svestka, #440099);
	font-size: 13px;
	text-align: left;
}

/* Na rozcestníku je lišta širší než uvnitř hry, kde ji drží sloupec. */
.lista-obal {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 20px;
}

/* Do horní mezery mřížky (css/rozcestnik.css) sahají hlavy figur kandidátů,
   proto si lišta odsazení přidává sama - a jen když v ní vážně něco je. */
.lista-obal #lista-hrace:not(:empty) { padding-bottom: 26px; }

.lista-hrace--vyzva {
	text-decoration: none;
	color: inherit;
	border-style: dashed;
}

/* Nevyzvednutý kód je jediná věc na stránce, kterou hráč může promeškat -
   tak ať je vidět. Plná švestková plocha, ne jen orámování jako u výzvy. */
.lista-hrace--kody {
	text-decoration: none;
	background: var(--svestka, #440099);
	color: #FFFFFF;
	font-weight: 600;
}

.lista-hrace--kody .lista-hrace__akce {
	color: #FFFFFF;
	text-decoration: underline;
}

.lista-hrace__text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.lista-hrace__akce {
	flex: none;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--svestka, #440099);
	white-space: nowrap;
}

/* ------------------------------------------------------------ konec hry */

/*
 * Závěrečná obrazovka má jediný úkol: dostat z hráče e-mail, aby mu mohl
 * přijít kód na výhru. Všechno je proto stavěné tak, aby se výhra i pole
 * na adresu vešly na jednu obrazovku bez rolování - na malém telefonu
 * v překryvu nad hrou je to jen pár set pixelů.
 *
 * Rolování zůstává jako pojistka pro krajní případy (velké písmo v systému,
 * na výšku otočený mobil), ale běžně se k němu nemá dojít.
 */
.prekryv__panel {
	position: relative;
	max-height: 100%;
	overflow-y: auto;
}

/*
 * Pohár za umístění na bedně: velká ikona vykukující přes levý horní roh
 * panelu. Panel normálně ořezává obsah (overflow-y: auto kvůli rolování na
 * malých displejích), takže když je v něm pohár, ořez se vypne a rolování
 * v krajních případech převezme celý překryv. Prohlížeč bez :has() nechá
 * pohár uvnitř rohu - jen kosmetický rozdíl.
 */
.poradi__pohar {
	position: absolute;
	top: -16px;
	left: -18px;
	font-size: 42px;
	line-height: 1;
	transform: rotate(-12deg);
	pointer-events: none;
}

.prekryv:has(.poradi__pohar) { overflow-y: auto; }

.prekryv__panel:has(.poradi__pohar) {
	overflow-y: visible;
	max-height: none;
	margin: auto;
}

/*
 * Hlavička, kterou si vypisuje hra sama: verdikt, body, rekord. Zůstává,
 * ale sražená - v plné velikosti zabírala vršek obrazovky a výhru odtlačila
 * pod okraj. Míří na přímé odstavce panelu, takže platí ve všech hrách bez
 * ohledu na to, jak si které pojmenovaly své třídy.
 */
/*
 * Sražení hlavičky platí jen pro panel v překryvu nad hrací plochou, kde je
 * výšky málo. Kajak má výsledek na vlastní stránce a tam se nikam vejít
 * nemusí, proto je v selektorech `.prekryv__panel` - jinak by se zmenšil
 * i jemu, bez důvodu.
 */
.prekryv__panel.konec-kompakt { padding: 24px 20px; }

.prekryv__panel.konec-kompakt .prekryv__verdikt {
	margin: 0 0 1px;
	font-size: clamp(16px, 3.6vw, 20px);
	line-height: 1.2;
}

.prekryv__panel.konec-kompakt > p {
	margin: 0 0 5px;
	font-size: 11.5px;
	line-height: 1.4;
}

.prekryv__panel.konec-kompakt > p strong { font-size: 20px; }

.prekryv__panel.konec-kompakt .prekryv__rekord {
	margin: 0 0 4px;
	font-size: 10.5px;
}

.prekryv__panel.konec-kompakt .prekryv__rekord strong { font-size: inherit; }

/* Ponor si nad výsledek kreslí srovnání s milníky, taky se musí srazit. */
.prekryv__panel.konec-kompakt .srovnani { margin: 0 0 4px; transform: scale(.85); transform-origin: top center; }

/*
 * Když je co vyhrát, z hlavičky zbyde verdikt a hlavní číslo. Podrobnosti
 * pod nimi - kolik gólů padlo po nahrávce, jaký byl rekord - se tady sice
 * hezky čtou, ale odsouvají pole na adresu pod okraj obrazovky, a tam
 * hráč o výhru přijde. Skóre má hráč nad hrou v ukazateli a podrobnosti
 * uvidí po odeslání, až obrazovka nic nechce.
 *
 * Míří to na třetí a další odstavec panelu: první dva jsou ve všech hrách
 * verdikt a hlavní číslo, zbytek je doplněk.
 */
.prekryv__panel.konec-kompakt--vyhra > p:nth-of-type(n+3),
.prekryv__panel.konec-kompakt--vyhra .srovnani { display: none; }

/*
 * Formulář ubírá z výšky nejvíc, takže u nepřihlášeného výherce se stahuje
 * i to ostatní. Přihlášený má místa dost - jemu stačí odkývnout odeslání.
 */
/*
 * Koncová obrazovka si bere místo i z okraje kolem panelu - je to levnější
 * než ubírat z mezer mezi informacemi, které mají dýchat. Formulář je na tom
 * nejhůř, ten dostane ještě o kousek víc.
 *
 * :has() neumí prohlížeč z roku 2020, ale tam se prostě jen roluje jako dřív.
 */
.prekryv:has(.konec-kompakt) { padding: 12px; }
.prekryv:has(.konec-kompakt--formular) { padding: 10px; }

.prekryv__panel.konec-kompakt--formular { padding: 24px 16px; }

/* Rekord má hráč v ukazateli nad hrou, tady bere řádek polím na adresu. */
.konec-kompakt--formular .prekryv__rekord { display: none; }
.prekryv__panel.konec-kompakt--formular > p { margin: 0 0 2px; font-size: 14px; line-height: 1.3; }
.prekryv__panel.konec-kompakt--formular .prekryv__verdikt { font-size: clamp(19px, 4.2vw, 24px); }
.prekryv__panel.konec-kompakt--formular > p strong { font-size: 24px; }
.konec-kompakt--formular .oslava { height: 74px; }
.konec-kompakt--formular .poradi { margin: 0; font-size: 16px; }
.konec-kompakt--formular .poradi__uvod { font-size: 15px; }
.konec-kompakt--formular .poradi-blok { margin-bottom: 8px; }
.konec-kompakt--formular .poradi__misto { font-size: 30px; }
.konec-kompakt--formular .poradi__misto--bedna { font-size: 36px; }
.konec-kompakt--formular .odmena { padding: 7px 12px; margin-bottom: 6px; }
.konec-kompakt--formular .odmena__ikona { width: 30px; height: 30px; font-size: 24px; }
.konec-kompakt--formular .prekryv__akce { margin-top: 4px; padding-top: 5px; }

.konec-nacitani,
.konec-chyba {
	margin: 10px 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--seda, #7B7378);
}

.konec-chyba { color: #C1121F; }
.konec-chyba__pozn { margin: 0; font-size: 12px; color: var(--seda, #7B7378); }

/*
 * Pořadí a stupně vítězů vedle sebe: text vlevo, schodiště s panáčkem vpravo.
 * Pod sebou zabíraly dvakrát tolik výšky a schodiště přes celou šířku působilo
 * jako hlavní věc na obrazovce, i když tou je výhra pod ním.
 */
.poradi-blok { margin: 4px 0 16px; }

.poradi-blok--stupne {
	display: flex;
	align-items: center;
	gap: 10px;
}

.poradi-blok--stupne .poradi-blok__text {
	flex: 1;
	min-width: 0;
	text-align: left;
}

.poradi-blok--stupne .poradi,
.poradi-blok--stupne .konec-drobne { text-align: left; }

/* Konfety se schodištěm potěší, ale místo patří výhře. */
.oslava {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 112px;
	margin: 2px auto 4px;
}

.poradi-blok--stupne .oslava {
	flex: none;
	width: 46%;
	max-width: 168px;
	margin: 0;
}

/* U formuláře je výšky nejmíň, tam platí jeho těsnější 74px (výš v souboru) -
   :not() tu hlídá kaskádu, jinak by pozdější pravidlo vyhrálo vždycky. */
.konec-kompakt--vyhra:not(.konec-kompakt--formular) .oslava { height: 104px; }

.poradi {
	margin: 0 0 2px;
	font-size: 13px;
	line-height: 1.25;
	text-align: center;
}

.poradi__uvod {
	display: block;
	font-size: 11px;
	color: var(--seda, #7B7378);
}

.poradi strong { white-space: nowrap; }

.poradi__misto {
	font-size: 21px;
	color: var(--svestka, #440099);
}

.poradi__misto--bedna {
	font-size: 25px;
	color: var(--blankyt, #4CC9F0);
	-webkit-text-stroke: 1px var(--svestka, #440099);
}

.konec-drobne {
	margin: 0 0 8px;
	font-size: 11.5px;
	line-height: 1.35;
	text-align: center;
	color: var(--seda, #7B7378);
}

.konec-drobne--rekord {
	font-weight: 800;
	color: var(--svestka, #440099);
}

/* ------------------------------------------------------------ výhra */

/*
 * Kvůli výhře má hráč vypsat adresu, tak ať je vidět dřív než formulář pod ní.
 * Drží ji papírové pozadí z brand palety a švestkový rám; plná barevná plocha
 * přebíjela i tlačítko pod sebou, na které se má kliknout.
 *
 * Jmenuje se `odmena`, ne `vyhra`: třídu `vyhra` už používá kajak jako
 * modifikátor svého verdiktu (.vysledek__verdikt.vyhra) a globální komponenta
 * stejného jména mu verdikt přestrojila za tenhle rámeček.
 */
.odmena {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	padding: 14px 16px;
	background: #EFEAE5;
	border: 2px solid var(--svestka, #440099);
	color: var(--cerna, #1A1420);
	text-align: left;
}

.odmena__ikona {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	font-size: 30px;
	line-height: 1;
	color: var(--svestka, #440099);
}

.odmena__ikona svg {
	width: 100%;
	height: 100%;
}

.odmena__text { min-width: 0; }

.odmena__popisek {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--seda, #7B7378);
}

.odmena__cena {
	display: block;
	font-size: clamp(16px, 4.4vw, 21px);
	font-weight: 900;
	line-height: 1.15;
	color: var(--svestka, #440099);
}

/* ------------------------------------------------------------ odznaky */

/*
 * Na konci hry stačí, že odznak přibyl - ikona a jméno na jednom řádku.
 * Co znamená, si hráč přečte v účtu, kde je na popisky místo.
 */
.odznaky-radek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 13px 0 0;
	font-size: 11px;
	line-height: 1.3;
}

.odznaky-radek__popisek {
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--svestka, #440099);
}

.odznaky-radek__kus {
	padding: 5px 9px;
	background: var(--pozadi, #EFEAE5);
	font-weight: 600;
}

/* Plný seznam s popisky zůstává pro účet a rozcestník. */
.odznaky-nove {
	margin: 0 0 14px;
	padding: 12px 14px;
	background: var(--pozadi, #EFEAE5);
	text-align: left;
}

.odznaky-nove__nadpis {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--svestka, #440099);
}

.odznaky-nove__seznam {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.odznak {
	display: flex;
	align-items: center;
	gap: 10px;
}

.odznak__ikona {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	background: #FFFFFF;
	border: 2px solid var(--svestka, #440099);
	font-size: 18px;
	line-height: 1;
}

.odznak__text {
	display: block;
	font-size: 12px;
	line-height: 1.4;
}

.odznak__text strong { display: block; font-size: 13px; }
.odznak__text span { color: var(--seda, #7B7378); }

.odznak--chybi { opacity: .42; }
.odznak--chybi .odznak__ikona { border-color: #C9C2CB; filter: grayscale(1); }

/* ------------------------------------------------------------ kontakt */

.kontakt {
	margin: 4px 0 16px;
	padding: 14px 0 0;
	border-top: 2px solid #EFE9F0;
	text-align: left;
}

/*
 * Formulář stojí rovnou pod výhrou, takže ho nemá co oddělovat - barevný
 * blok nad ním je předěl sám o sobě.
 */
.kontakt--vyzva {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.kontakt__slib {
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.5;
}

.kontakt__vyzva {
	margin: 0 0 6px;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.35;
}

.kontakt__pozn {
	margin: 0 0 10px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--seda, #7B7378);
}

.kontakt__radek {
	display: flex;
	gap: 6px;
	margin-bottom: 6px;
}

.kontakt .pole { width: 100%; margin-bottom: 6px; }
.kontakt__radek .pole { margin-bottom: 0; }

/* Na jednu obrazovku se pole musí vejít i s tlačítkem a souhlasem. */
.kontakt--vyzva .pole {
	padding: 8px 11px;
	font-size: 13px;
}

.kontakt--vyzva .tlacitko--hlavni {
	width: 100%;
	margin-top: 1px;
	padding: 11px 16px;
}

.kontakt__souhlas {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 1px 0 5px;
	font-size: 10.5px;
	line-height: 1.33;
	color: var(--seda, #7B7378);
	cursor: pointer;
}

.kontakt__souhlas input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--svestka, #440099);
}

/* Prázdné místo si drží jen tolik, aby text hlášky obrazovkou neposunul. */
.kontakt__stav {
	margin: 6px 0 0;
	min-height: 0;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--svestka, #440099);
}

.kontakt__stav:empty { margin: 0; }

.kontakt__stav--chyba { color: #C1121F; }

/* ------------------------------------------------------------ ovládání */

/*
 * Hrát znovu a sdílení. Obojí patří ke hře, ne k výhře - hru si hráč pustí
 * kdykoliv, ale adresu vypíše jenom teď, takže tahle tlačítka stojí až pod
 * formulářem a potichu. Dřív to byly dva plné pruhy přes celou šířku a nad
 * polem na e-mail měly navrch.
 */
.prekryv__akce,
.vysledek__akce {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid #EFE9F0;
}

/* S formulářem platí jeho ještě těsnější rozestupy (výš v souboru). */
.konec-kompakt--vyhra:not(.konec-kompakt--formular) .prekryv__akce {
	margin-top: 8px;
	padding-top: 8px;
}

.prekryv__akce .tlacitko,
.vysledek__akce .tlacitko {
	width: auto;
	padding: 9px 14px;
	font-size: 11.5px;
}

/*
 * „Hrát znovu“ zůstává první, ale jen obtažené - dvě plná tlačítka vedle
 * sebe by si přebírala pozornost s odesláním adresy.
 */
.prekryv__akce .tlacitko--hlavni,
.vysledek__akce .tlacitko--hlavni {
	background: #FFFFFF;
	color: var(--svestka, #440099);
	box-shadow: inset 0 0 0 2px var(--svestka, #440099);
}

.prekryv__akce .tlacitko--hlavni:hover,
.vysledek__akce .tlacitko--hlavni:hover {
	background: var(--svestka, #440099);
	color: #FFFFFF;
}

/*
 * Zahrát znovu i sdílení jsou doplňky, na obrazovce jim stačí značka.
 * Obě přesně čtvercové: tlačítko oříznuté na šířku svého písmene F
 * vypadalo vedle kulatého kolečka jako omyl v sazbě.
 */
.tlacitko--ikona {
	display: inline-grid;
	place-items: center;
	flex: none;
	width: 42px;
	height: 42px;
	aspect-ratio: 1;
	padding: 0;
}

/* Rozměr musí přebít `width: auto` z pravidla pro tlačítka v pruhu. */
.prekryv__akce .tlacitko--ikona,
.vysledek__akce .tlacitko--ikona {
	width: 42px;
	height: 42px;
	padding: 0;
}

.tlacitko--ikona svg {
	display: block;
	width: 19px;
	height: 19px;
}

/*
 * Druhý krok stojí samostatně: oslava skončila, teď se vyplňuje. Skrývá se
 * proto všechno, co k panelu přidala samotná hra - verdikt, body i tlačítka
 * „hrát znovu“ by od vyplňování jen odváděly.
 */
.skryto-krokem { display: none !important; }

/*
 * Odděluje ho vlastní plocha, ne jen čára pod výsledkem.
 */
.kontakt--samostatny {
	margin: 0;
	padding: 0;
	border-top: 0;
}

.kontakt__zpet {
	margin: 12px 0 0;
	text-align: center;
}

/* Vedlejší akce, která nemá soupeřit s hlavním tlačítkem. */
.odkaz-vedlejsi {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	color: var(--svestka, #440099);
	text-decoration: underline;
	cursor: pointer;
}

/* ------------------------------------------------------------ voucher */

.voucher {
	padding: 16px 12px;
	background: var(--pozadi, #EFEAE5);
	border: 2px dashed var(--svestka, #440099);
	text-align: center;
}

.voucher__popis {
	margin: 0 0 7px;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--seda, #7B7378);
}

/*
 * Kód se opisuje z displeje na výdejním místě, takže musí zůstat na jednom
 * řádku - přes dva se čte špatně a v úzkém panelu odtlačí zbytek pod okraj.
 * Proto se raději zmenší písmo, než aby se zalomil.
 */
.voucher__kod {
	margin: 0 0 10px;
	font-size: clamp(16px, 5vw, 23px);
	font-weight: 800;
	letter-spacing: .03em;
	white-space: nowrap;
	color: var(--svestka, #440099);
	font-variant-numeric: tabular-nums;
}

.voucher__pozn {
	margin: 0;
	font-size: 11.5px;
	line-height: 1.55;
	color: var(--seda, #7B7378);
}

/*
 * Motivace: o co se hraje dál a kolik na to chybí.
 *
 * Jediná věta, ale s číslem, které si hráč má odnést. Proto je o chlup
 * větší než poznámky kolem a čísla v ní jsou tučně. Gratulace k nejvyšší
 * výhře stojí nad kódem ve švestkové, aby bylo na první pohled jasné,
 * že výš už se nehraje.
 */
.motivace {
	margin: 10px 0;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
}

.motivace strong {
	color: var(--svestka, #440099);
}

.motivace--vrchol {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 800;
	color: var(--svestka, #440099);
}

.motivace__titul {
	display: block;
}

.motivace__ikona {
	display: block;
	font-size: 26px;
	line-height: 1.1;
}

/* ---- přehled kódů na /moje/ ---- */

/* Kódy jdou pod sebou jako lístky v peněžence, ne do mřížky. Jeden hráč
   jich má jednotky a vedle sebe by v prázdné stránce plavaly. */
.kody {
	display: grid;
	gap: 14px;
	max-width: 420px;
	margin: 0 0 24px;
}

/* Na téhle stránce je kód hlavní obsah, ne poznámka pod výhrou, tak smí být
   větší - pořád ale na jednom řádku, aby se dal opsat. */
.kody .voucher { padding: 20px 14px; }
.kody .voucher__kod { font-size: clamp(20px, 6vw, 28px); }
.kody .voucher__popis { font-size: 11.5px; }

/* Vyzvednutý, propadlý nebo zneplatněný kód ze seznamu nemizí - hráč má
   vidět, že cenu dostal, a nehledat, kam se kartička poděla. Jen zešedne,
   aby se nepletla s tou, se kterou má ještě někam přijít. */
.voucher--vyrizeny {
	background: #F6F4F2;
	border-color: #C9C2CC;
	opacity: .75;
}

.voucher--vyrizeny .voucher__kod {
	color: var(--seda, #7B7378);
	text-decoration: line-through;
}

/* ------------------------------------------------------------ žebříček */

/* Vlastní řádek hráče, ať se v seznamu najde. */
.zebricek__ja .zebricek__jmeno::after {
	content: ' • vy';
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--blankyt, #4CC9F0);
}

/* ------------------------------------------------------------ právní modal */

/*
 * Souhlasy odkazují na právní dokumenty; modal je ukáže bez odchodu ze
 * stránky. Otevírá ho js/pravni-modal.js, bez JS vede odkaz na /pravni/.
 */

.souhlas a,
.kontakt__souhlas a {
	color: var(--svestka, #440099);
	font-weight: 600;
}

.pravni-modal {
	width: min(680px, calc(100vw - 32px));
	max-height: min(82vh, 720px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: 14px;
	background: #fff;
	color: var(--cerna, #1A1420);
	font-family: Montserrat, system-ui, -apple-system, 'Segoe UI', sans-serif;
	box-shadow: 0 24px 60px rgba(26, 20, 32, .35);
}

.pravni-modal::backdrop {
	background: rgba(26, 20, 32, .55);
}

.pravni-modal__hlavicka {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	background: var(--svestka, #440099);
	color: #fff;
}

.pravni-modal__titulek {
	font-size: 15px;
	font-weight: 800;
	line-height: 1.3;
}

.pravni-modal__zavrit {
	appearance: none;
	flex: none;
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.pravni-modal__zavrit:hover { background: rgba(255, 255, 255, .3); }

.pravni-modal__obsah {
	padding: 18px 20px 24px;
	overflow-y: auto;
	max-height: calc(min(82vh, 720px) - 60px);
	font-size: 13px;
	line-height: 1.6;
}

.pravni-modal__obsah h2 { font-size: 15px; margin: 20px 0 6px; }
.pravni-modal__obsah h2:first-child { margin-top: 0; }
.pravni-modal__obsah p, .pravni-modal__obsah li { margin: 6px 0; }
.pravni-modal__obsah a { color: var(--svestka, #440099); }

/* Obsah dokumentů se přebírá i do modalu, styly míst k doplnění musí být tady. */
.pravni-modal__obsah .doplnit { background: #ffe9a8; padding: 0 4px; font-weight: 700; }
.pravni-modal__obsah .navrh-upozorneni {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-left: 4px solid #C1121F;
	background: #fdf3f4;
	font-weight: 700;
	color: #C1121F;
}

/* ------------------------------------------------------------ úzký telefon */

/*
 * Hrací plocha má pevný poměr stran, takže na úzkém telefonu je i nízká
 * a panel v ní má jen pár set pixelů. Vzdušné mezery výš jsou stavěné na
 * plochu, kde je místa dost; tady se přiměřeně stáhnou, ať se koncová
 * obrazovka pořád vejde bez rolování.
 */
@media (max-width: 430px) {
	.prekryv__panel.konec-kompakt { padding: 16px 14px; }
	.prekryv__panel.konec-kompakt > p { margin: 0 0 3px; }

	.poradi-blok { margin: 2px 0 10px; }
	.konec-kompakt--vyhra .oslava { height: 88px; }

	.odmena { margin-bottom: 10px; padding: 10px 12px; }

	.voucher { padding: 12px 10px; }
	.voucher__popis { margin-bottom: 5px; }
	.voucher__kod { margin-bottom: 7px; }

	.odznaky-radek { margin-top: 9px; gap: 5px 7px; }
	.odznaky-radek__kus { padding: 4px 7px; }

	.prekryv__akce { margin-top: 10px; padding-top: 9px; }
}