/* TCG herna — veřejné stránky.
   Jen to, co v custom.css ani v bootstrapu není. Vzhled komponent se řídí
   design systémem "XZone Design System (web)"; barvy jsou stejné jako ve zbytku webu. */

/* --- Perex -------------------------------------------------------------
   Popisný text má na všech stránkách herny jednu velikost, 15/25 px: perex herny a hry,
   úvod rozcestníku, perexy sekcí i texty výhod. Doplňkové poznámky (doprava, legenda,
   „přidat do kalendáře") jsou o stupeň menší, 12,5 px. */
.tcg-herna .tcg-perex {
	font-size: 15px;
	line-height: 25px;
}
/* Texty výhod jsou sdílené s /xzone-klub (custom.css, 15/18 px) — tady se mění jen
   řádkování, aby odstavec pod ikonou nebyl hustší než perex nad ním. */
.tcg-herna .vyhody-text {
	font-size: 15px;
	line-height: 25px;
}
/* Nadpis výhody je v custom.css 25 px — stejně jako nadpis sekce, se kterým se pak přetahuje.
   Tady je o stupeň pod nadpisem sekce i pod podnadpisem věrnostní karty. */
.tcg-herna .vyhoda-title {
	font-size: 18px;
	line-height: 24px;
}

/* --- Štítky ------------------------------------------------------------
   Vzor převzatý ze .stickers (custom.css:4319), ale s vlastními barvami —
   tam jsou natvrdo navázané na herní platformy. */
.tcg-tag {
	display: inline-block;
	margin: 0 6px 6px 0;
	padding: 2px 9px;
	border: 1px solid;
	border-radius: 5px;
	font-size: 11px;
	line-height: 18px;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}
/* Hra s vyplněnou barvou pozadí i písma si je nese inline z databáze (tcgWebStylStitkuHry);
   tahle pravidla jsou podoba pro hru, která je nastavené nemá. */
.tcg-tag-hra {
	background: #ffffff;
	border-color: #ff6b1a;
	color: #ff6b1a;
}
/* Štítek hry bývá i odkazem na stránku hry — nesmí kvůli tomu zmodrat ani se podtrhnout. */
a.tcg-tag-hra,
a.tcg-tag-hra:visited {
	color: #ff6b1a;
	text-decoration: none;
}
/* Stav se ukazuje podtržením, ne přebarvením: inline barvy hry přebijí každé pravidlo
   odsud, takže na barevném štítku by převrácení barev nebylo vidět vůbec. */
a.tcg-tag-hra:hover,
a.tcg-tag-hra:focus {
	text-decoration: underline;
}
/* Placené vstupné je outline — plná oranžová se na kartě termínu pere s tlačítkem. */
.tcg-tag-vstupenka,
.tcg-tag-startovne {
	background: #ffffff;
	border-color: #f36422;
	color: #f36422;
}
.tcg-tag-obsazeno {
	background: #fa6b6b;
	border-color: #fa6b6b;
	color: #ffffff;
}
.tcg-tag-probehlo {
	background: #eeeeee;
	border-color: #d5d5d5;
	color: #777777;
}

/* --- Dlaždice hry ------------------------------------------------------
   Staví na .product-item; doplňuje jen zarovnání loga a řádek s termíny. */
.tcg-hra-dlazdice img {
	max-height: 120px;
	margin: 0 auto 10px;
	display: block;
}
.tcg-hra-dlazdice .tcg-hra-meta {
	margin: 0;
	color: #777777;
	font-size: 12px;
	line-height: 20px;
	letter-spacing: 0;
}

/* --- Karta termínu -----------------------------------------------------
   Ve frontendu pro ni není vzor (žádná .event/.termin/.date-box třída),
   proto vlastní komponenta. Datum vlevo je kotva, podle které hráč hledá. */
.tcg-termin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 10px;
	margin-bottom: 10px;
	padding: 14px 16px;
	border: 1px solid #d5d5d5;
	background: #ffffff;
}
/* Nejbližší termín nahoře kalendáře herny a hry. Třídu dává výpis jen v aktuálním měsíci — po
   přelistování dál by první karta nebyla nejbližší. Jen barva rámečku, šířka zůstává jako u ostatních. */
.tcg-terminy-nejblizsi > .tcg-termin:first-child {
	border-color: #f36422;
}
.tcg-termin-datum {
	flex-shrink: 0;
	width: 70px;
	margin-right: 16px;
	padding: 7px 0;
	background: #434343;
	color: #ffffff;
	text-align: center;
}
.tcg-termin-datum .den {
	display: block;
	font-size: 22px;
	line-height: 24px;
	font-weight: 700;
	letter-spacing: 0;
}
.tcg-termin-datum .mesic {
	display: block;
	font-size: 11px;
	line-height: 16px;
	text-transform: uppercase;
}
.tcg-termin-datum .tyden {
	display: block;
	color: #c8ced6;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0;
}
/* Tělo si drží minimální šířku; jakmile se na řádek nevejde i cena s tlačítkem,
   flex-wrap je pošle o řádek níž — a margin-left: auto je tam nechá vpravo.
   Základ je schválně velký: v úzkém sloupci (postranní panel, mobil) se tak tlačítko
   zalomí vždycky a text i štítky dostanou celou šířku. */
.tcg-termin-telo {
	flex: 1 1 300px;
	min-width: 0;
}
.tcg-termin-telo .nadpis {
	margin: 0 0 2px;
	font-size: 16px;
	line-height: 22px;
}
.tcg-termin-telo .nazev {
	color: #1b2839;
	font-size: 16px;
	line-height: 22px;
	text-transform: uppercase;
}
/* Město je první, co hráč na kartě přečte — barvou a tučností se odděluje od názvu akce,
   oddělovací tečka drží stejný tvar jako řádek s časem pod ním. */
.tcg-termin-telo .mesto {
	color: #f36422;
	font-weight: 700;
	text-transform: uppercase;
}
.tcg-termin-telo .mesto::after {
	content: " \00B7 ";
	color: #9aa3ad;
	font-weight: 400;
}
.tcg-termin-telo .meta {
	margin: 0;
	color: #777777;
	font-size: 12.5px;
	line-height: 20px;
	letter-spacing: 0;
}
/* Štítky vedle sebe za každou cenu — v úzkém sloupci se radši zkrátí název hry,
   než aby se poskládaly pod sebe a karta povyrostla. */
.tcg-termin-telo .tagy {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	margin: 6px 0 0;
	line-height: 1;
	min-width: 0;
}
.tcg-termin-telo .tagy .tcg-tag {
	margin: 0 6px 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
}
.tcg-termin-telo .tagy .tcg-tag:first-child {
	flex: 0 0 auto; /* štítek vstupu se nezkracuje, nese cenovou informaci */
}
.tcg-termin-telo .tagy .tcg-tag-hra {
	flex: 0 1 auto;
	min-width: 0;
}
.tcg-termin-akce {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	margin-left: auto;
	padding-left: 16px;
	text-align: right;
}
.tcg-termin-akce .cena {
	margin-right: 12px;
	color: #f36422;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	letter-spacing: 0;
}
/* Registrace a odhlášení odcházejí z karty formulářem; ten nesmí do řádku přinést
   vlastní odsazení, jinak tlačítko odskočí od ceny. */
.tcg-termin-akce form {
	margin: 0;
}
.tcg-termin.probehla {
	opacity: 0.6;
}

/* Otevírací doba je HTML blok z karty prodejny (víc řádků), takže vlastní blok,
   ne odstavec s ikonou — ta ji odsouvala na samostatný řádek. */
.tcg-oteviraci-doba {
	color: #555555;
	font-size: 13px;
	line-height: 22px;
}
.tcg-oteviraci-doba b,
.tcg-oteviraci-doba strong {
	color: #1b2839;
	font-weight: 600;
}

/* Kontaktní pruh herny — čtyři sloupce místo postranního panelu. */
.tcg-kontakt {
	font-size: 13px;
	line-height: 22px;
}
.tcg-kontakt .popisek {
	display: block;
	margin-bottom: 4px;
	color: #9aa3ad;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-termin.probehla .tcg-termin-datum {
	background: #9aa3ad;
}

/* --- Lišta her a přepínač pohledu --------------------------------------
   Záložky .nav-tabs se nepoužívají: přepíná je jQuery přes vlastní .selected,
   kdežto filtr hry musí jít poslat odkazem a zaindexovat, tedy GETem. */
/* Hry jsou pilulky, ne záložky: názvy her jsou dlouhé („Magic: The Gathering“)
   a pět záložek se nad kalendář nevešlo — odjížděly vodorovně mimo obrazovku.
   Pilulky se zalomí do druhého řádku, protože nevisí na společné spodní lince. */
.tcg-hry-lista {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.tcg-hry-lista a {
	margin: 0 6px 6px 0;
	padding: 7px 16px;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	background: #ffffff;
	color: #3a3a3a;
	font-size: 13px;
	letter-spacing: 0;
	white-space: nowrap;
}
.tcg-hry-lista a:hover {
	border-color: #f36422;
	color: #f36422;
}
.tcg-hry-lista a.aktivni {
	border-color: #f36422;
	background: #f36422;
	color: #ffffff;
	font-weight: 600;
}
/* Tečka nese barvu hry — tutéž, jakou má její termín v měsíční mřížce. Barvu sází
   šablona inline z databáze, tady zbývá jen tvar; na otevřené pilulce je bílá. */
.tcg-hry-lista .tecka {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 50%;
	background: #ffffff;
	vertical-align: baseline;
}
.tcg-kalendar-lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.tcg-mesic {
	display: flex;
	align-items: center;
}
.tcg-mesic strong {
	min-width: 150px;
	color: #1b2839;
	font-size: 14px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}
.tcg-mesic a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid #d5d5d5;
	color: #3a3a3a;
}
.tcg-pohled a {
	padding: 8px 15px;
	border: 1px solid #d5d5d5;
	border-left: none;
	color: #3a3a3a;
	font-size: 12.5px;
	letter-spacing: 0;
}
.tcg-pohled a:first-child {
	border-left: 1px solid #d5d5d5;
}
.tcg-pohled a.aktivni {
	background: #1b2839;
	color: #ffffff;
}

/* --- Měsíční mřížka ----------------------------------------------------
   Stojí na bootstrapí .table.table-bordered v .table-responsive, stejně jako
   ji kreslí administrace; tady se doplňuje jen výška buňky a pruh akce. */
.tcg-mrizka {
	table-layout: fixed;
	margin-bottom: 6px;
}
.tcg-mrizka th {
	background: #f5f5f5;
	color: #1b2839;
	font-size: 11px;
	letter-spacing: 1px;
	text-align: center;
	text-transform: uppercase;
}
.tcg-mrizka td {
	height: 96px;
	padding: 6px;
	vertical-align: top;
	background: #ffffff;
}
.tcg-mrizka .cislo {
	display: block;
	color: #9aa3ad;
	font-size: 12px;
	letter-spacing: 0;
	text-align: right;
}
/* Dnešek se v mřížce hledá jako první — orámování a barva čísla, ne jiné pozadí.
   Rámeček jde přes inset stín: v tabulce se slitými okraji by border sousední buňky
   překreslila a orámování by zůstalo jen na dvou stranách. */
.tcg-mrizka td.dnes {
	box-shadow: inset 0 0 0 1px #f36422;
}
.tcg-mrizka td.dnes .cislo {
	color: #f36422;
	font-weight: 700;
}
.tcg-mrizka .akce {
	display: block;
	overflow: hidden;
	margin-top: 4px;
	padding: 3px 5px;
	color: #ffffff;
	font-size: 11.5px;
	line-height: 16px;
	letter-spacing: 0;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tcg-mrizka .akce.probehla {
	color: #555555;
}
.tcg-legenda {
	color: #777777;
	font-size: 12.5px;
	letter-spacing: 0;
}

/* --- Organizátor/ka hry ----------------------------------------------- */
.tcg-organizator .hra {
	display: block;
	color: #777777;
	font-size: 12.5px;
	letter-spacing: 0;
}
.tcg-organizator .jmeno {
	display: block;
	color: #1b2839;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-pod-fotkou {
	color: #777777;
	font-size: 12.5px;
	letter-spacing: 0;
}

/* --- Úvod stránky hry --------------------------------------------------
   Nadpis je stejný jako na zbytku webu (.heading-part), tady zbývá jen řádek
   s hernou. Logo stojí v postranním sloupci nad organizátorem/kou. */
.tcg-hra-kde {
	display: block;
	margin-bottom: 8px;
	color: #777777;
	font-size: 12.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-hra-logo {
	max-height: 160px;
}

/* --- Pravidelný rozvrh ------------------------------------------------- */
.tcg-rozvrh th {
	background: #f5f5f5;
	color: #1b2839;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-rozvrh td {
	letter-spacing: 0;
}
.tcg-rozvrh td.den {
	color: #1b2839;
	font-size: 12.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* --- Komunita ---------------------------------------------------------- */
.tcg-komunita a {
	display: block;
	margin-bottom: 8px;
	padding: 10px 12px;
	border: 1px solid #d5d5d5;
	color: #3a3a3a;
	font-size: 13px;
	letter-spacing: 0;
}
.tcg-komunita a:hover {
	border-color: #f36422;
	color: #f36422;
}
.tcg-komunita i {
	margin-right: 8px;
	color: #f36422;
}

/* --- Detail události --------------------------------------------------- */
.tcg-udalost-hlavicka {
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
}
.tcg-udalost-hlavicka .popis {
	flex: 1;
	min-width: 260px;
}
.tcg-udalost-hlavicka h1 {
	margin-bottom: 6px;
	font-size: 28px;
	line-height: 34px;
}
.tcg-udalost-hlavicka .meta {
	color: #777777;
	font-size: 13px;
	line-height: 22px;
	letter-spacing: 0;
}
.tcg-udalost-hlavicka .tcg-termin-datum {
	width: 86px;
	padding: 10px 0;
}
.tcg-udalost-hlavicka .tcg-termin-datum .den {
	font-size: 30px;
	line-height: 32px;
}

.tcg-panel-akce.cta {
	border-top: 4px solid #f36422;
}
.tcg-panel-akce.prihlasen {
	border-top: 4px solid #059226;
}
.tcg-panel-akce.zruseno {
	border-top: 4px solid #fa6b6b;
}
.tcg-cena {
	display: block;
	color: #f36422;
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: 0;
}
.tcg-cena.zdarma {
	color: #059226;
	font-size: 20px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Obsazenost — barva pruhu se láme na polovině a na plné kapacitě */
.tcg-kapacita {
	margin-top: 10px;
}
.tcg-kapacita .pruh {
	overflow: hidden;
	height: 8px;
	background: #eeeeee;
}
.tcg-kapacita .pruh i {
	display: block;
	height: 100%;
	background: #059226;
}
.tcg-kapacita .pruh.skoro i {
	background: #f36422;
}
.tcg-kapacita .pruh.plno i {
	background: #fa6b6b;
}
.tcg-kapacita .popisek {
	display: block;
	margin-top: 4px;
	color: #777777;
	font-size: 12px;
	letter-spacing: 0;
}

.tcg-fakta {
	margin: 0;
}
.tcg-fakta dt {
	float: left;
	clear: left;
	max-width: 45%;
	padding: 6px 0;
	color: #777777;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
}
.tcg-fakta dd {
	margin: 0;
	padding: 6px 0;
	border-bottom: 1px solid #f1f1f1;
	color: #1b2839;
	font-size: 13px;
	letter-spacing: 0;
	text-align: right;
}
.tcg-fakta dd:last-child {
	border-bottom: none;
}

/* --- Prázdný stav ------------------------------------------------------ */
.tcg-prazdno {
	padding: 34px 20px;
	border: 1px dashed #c8ccd0;
	background: #fafafa;
	text-align: center;
	color: #777777;
}
.tcg-prazdno strong {
	display: block;
	margin-bottom: 6px;
	color: #1b2839;
	text-transform: uppercase;
}

/* --- Mobil ------------------------------------------------------------- */
@media (max-width: 767px) {
	.tcg-herna .tcg-perex {
		font-size: 14px;
		line-height: 24px;
	}
	.tcg-herna .btn {
		display: block;
		width: 100%;
		margin: 0 0 8px 0;
		text-align: center;
	}
	.tcg-herna .btn.ml-2 {
		margin-left: 0 !important;
	}
	.tcg-termin {
		flex-wrap: wrap;
	}
	.tcg-termin-datum {
		width: 58px;
		margin-right: 12px;
	}
	.tcg-termin-datum .den {
		font-size: 19px;
		line-height: 21px;
	}
	.tcg-termin-akce {
		padding-left: 0;
	}
	.tcg-termin-akce .cena {
		margin: 0 12px 0 0;
	}
	/* Tlačítko drží šířku podle obsahu, ať zůstane vpravo u ceny — .tcg-herna .btn
	   ho na mobilu jinak roztáhne přes celý řádek. */
	.tcg-termin-akce .btn,
	.tcg-termin-akce form {
		flex: 0 0 auto;
		width: auto;
		margin: 0;
	}
	/* Zalomení řeší základní styl; na mobilu se pilulky jen zdrobní, ať se do řádku
	   vejdou dvě a lišta nenaroste na čtyři řádky. */
	.tcg-hry-lista a {
		padding: 6px 13px;
		font-size: 12.5px;
	}
	.tcg-mesic {
		width: 100%;
		justify-content: space-between;
	}
	.tcg-mesic strong {
		flex: 1;
	}
	.tcg-organizator {
		padding: 20px;
	}
	.tcg-udalost-hlavicka h1 {
		font-size: 23px;
		line-height: 29px;
	}
	.tcg-udalost-hlavicka .tcg-termin-datum {
		width: 64px;
		padding: 7px 0;
	}
	.tcg-udalost-hlavicka .tcg-termin-datum .den {
		font-size: 22px;
		line-height: 24px;
	}
}
/* Pořadí sloupců na mobilu řeší .order-1-sm/.order-2-sm z responsive.css:1733 —
   na detailu akce jde panel s cenou a tlačítkem nad popis, podle něj se hráč
   rozhoduje. Lepicí lišta u spodní hrany se schválně nedělá: web má fixní
   hlavičku a druhý plovoucí pruh by ukrojil obsah z obou stran. */

/* =======================================================================
   ROZCESTNÍK — nová podoba /tcg-herna
   Sekce jdou v pořadí schváleného musteru
   (docs/design/tcg-herna-rozcestnik/screens/tcg-01-desktop-odhlaseny.html).
   ======================================================================= */

/* --- 1. Hero -----------------------------------------------------------
   Černý pruh je .vyhody-banner z /xzone-klub; tady stojí obsah v jednom
   sloupci na střed a rozcestí na herny jsou jen tlačítka pod sebou. */
/* Nahoře se neodsazuje — mezeru drží drobečky (.breadcrumbs mají pt-40 pb-40). */
.tcg-hero {
	padding: 0 0 44px;
}
.tcg-hero img {
	width: 100%;
	max-width: 300px;
}
/* Je to H1 stránky, ale vypadá jako nadřádek nad logem. Zapsané přes rodiče, protože
   blog.css (načítá se kvůli kartám článků) má na `.banner h1` bílý nadpis 35 px
   na střed a samotná třída by na něj nestačila. */
.tcg-hero .tcg-hero-kicker {
	margin: 0 0 12px;
	color: #f36422;
	font-size: 12px;
	line-height: 18px;
	font-weight: 400;
	letter-spacing: 4px;
	text-transform: uppercase;
}
.tcg-hero .vyhody-banner-text {
	max-width: 640px;
	margin-right: auto;
	margin-left: auto;
	color: #c8ced6;
	font-size: 15px;
	line-height: 25px;
}
/* Čísla pod popisem — na mobilu se zalomí do sloupce, jinak stojí v řadě. */
.tcg-hero-fakta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	color: #9aa3ad;
	font-size: 12px;
	letter-spacing: 0;
}
.tcg-hero-fakta > div {
	margin: 0 14px 6px 0;
}
/* Poslední bod nesmí táhnout řádek doleva — bez tohohle je celá řada o 14 px mimo střed. */
.tcg-hero-fakta > div:last-child {
	margin-right: 0;
}
/* Oddělovač je součástí bodu, ne vlastní prvek — při zalomení řádku tak odejde
   dolů s ním a nezůstane viset sám. */
.tcg-hero-fakta > div:not(:last-child)::after {
	content: "\00B7";
	margin-left: 14px;
	color: #f36422;
}
.tcg-hero-fakta b {
	color: #ffffff;
	font-weight: 500;
}
/* Rozcestí na herny — tlačítka vedle sebe na střed, obě jsou si rovná.
   Na úzkém displeji se zalomí pod sebe a roztáhnou na celou šířku. */
.tcg-hero-odkazy {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: 28px;
}
.tcg-hero-odkazy .btn {
	margin: 0 8px 10px;
}
@media (max-width: 575px) {
	.tcg-hero-odkazy .btn {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}
}

/* --- Pruh sekce --------------------------------------------------------
   Sekce se na rozcestníku střídají barvou pozadí přes celou šířku okna,
   proto .container-fluid a odsazení tady, ne utilitami u každého nadpisu. */
/* Jen svisle — boční padding patří .container-fluid a bez něj přeteče záporný
   okraj .row o 15 px, takže se stránka dá posunout doprava do prázdna. */
.tcg-sekce {
	padding-top: 10px;
	padding-bottom: 20px;
}
/* Hlavička sloupce s termíny — město a adresa herny nad jejími kartami. Oranžová
   linka pod ní odděluje hlavičku od karet, které mají vlastní rámeček. */
/* Rozvržení řeší bootstrapí utility v šabloně, tady zbývá jen linka a typografie. */
.tcg-sloupec-hlavicka {
	border-bottom: 2px solid #f36422;
}
.tcg-sloupec-hlavicka .mesto {
	color: #1b2839;
	font-size: 21px;
	letter-spacing: 2px;
	text-transform: uppercase;
}
.tcg-sloupec-hlavicka .adresa {
	color: #777777;
	font-size: 12px;
	letter-spacing: 0;
}

/* --- Věrnostní karta ---------------------------------------------------
   Mřížka 4×4 na desktopu, na mobilu 2 sloupce — šestnáct políček v řadě
   po čtyřech je na telefonu nečitelných. */
.tcg-karta-nadpis {
	color: #1b2839;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-karta-podnadpis {
	margin-bottom: 22px;
	color: #777777;
	font-size: 12.5px;
	letter-spacing: 0;
}
/* Štítek aktivního hráče před stavovou větou — zelený jako razítka, je to totéž sdělení:
   hotová věc, ne výzva. */
.tcg-karta-stav {
	display: inline-block;
	margin-right: 6px;
	padding: 2px 8px;
	border-radius: 2px;
	background: #28a745;
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}
/* Pruh zaplnění — mřížka sama neřekne, jak daleko hráč je, dokud si políčka nespočítá. */
.tcg-karta-pruh {
	height: 6px;
	margin-bottom: 22px;
	border-radius: 3px;
	background: #ececec;
	overflow: hidden;
}
.tcg-karta-pruh i {
	display: block;
	height: 100%;
	background: #28a745;
}
.tcg-karta-mrizka {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.tcg-karta-mrizka .policko {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 112px;
	padding: 12px;
	border: 1px solid #d5d5d5;
	background: #ffffff;
	text-align: center;
}
.tcg-karta-mrizka .cislo {
	position: absolute;
	top: 6px;
	left: 9px;
	color: #b5b5b5;
	font-size: 10px;
	letter-spacing: 0;
}
/* Prázdné políčko nese značku Xzone, políčko s odměnou její ikonu. Obsah kroužku
   centruje flex; ikona i písmeno musí mít nulový vlastní řádek, jinak je font
   posune pod střed. */
.tcg-karta-mrizka .razitko {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 2px dashed #c8ccd0;
	border-radius: 50%;
	color: #f36422;
}
.tcg-karta-mrizka .razitko i,
.tcg-karta-mrizka .razitko .znacka {
	display: block;
	/* .white-block dává ikonám odsazení zprava (custom.css:4529), které by je
	   v kroužku posunulo o půlku doleva */
	margin: 0;
	font-size: 15px;
	line-height: 1;
}
/* Značka Xzone — kroužek kolem ní dělá „O", písmeno je „X" jako v logu. */
.tcg-karta-mrizka .znacka {
	color: #c8ccd0;
	font-weight: 900;
	letter-spacing: 0;
}
.tcg-karta-mrizka .popis {
	color: #777777;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0;
}
/* Políčko s odměnou se odlišuje plným kroužkem — rámeček i pozadí zůstávají jako
   u ostatních, ať mřížka drží klidnou mříž. */
.tcg-karta-mrizka .odmena .razitko {
	border: 2px solid #f36422;
}
.tcg-karta-mrizka .odmena .popis {
	color: #1b2839;
	font-weight: 500;
}
/* Získané razítko — zelená jako u potvrzovací hlášky: hotová věc, ne akce k udělání.
   Oranžová je na webu barva výzvy, a celá karta by v ní křičela. */
.tcg-karta-mrizka .orazitkovane {
	border-color: #c3e6cb;
	background: #f2faf5;
}
.tcg-karta-mrizka .orazitkovane .razitko {
	border: 2px solid #28a745;
	background: #28a745;
	color: #ffffff;
}
/* Orazítkované políčko nese datum návštěvy, ne popis odměny — ať se dvě různé věci
   nečtou stejně, je tmavší než popisek prázdného. */
.tcg-karta-mrizka .orazitkovane .popis {
	color: #1b2839;
}
/* Štítek v rohu: co se s odměnou stalo, nebo že tohle políčko je další na řadě.
   Sedí proti číslu políčka, aby si nepřekážely. */
.tcg-karta-mrizka .stav {
	position: absolute;
	top: 6px;
	right: 9px;
	color: #b5b5b5;
	font-size: 10px;
	letter-spacing: 0;
	text-transform: uppercase;
}
/* Odměna čeká na vyzvednutí — jediný stav, kvůli kterému má hráč něco udělat
   (ozvat se obsluze), takže je jako jediný barevný. */
.tcg-karta-mrizka .k-vyzvednuti {
	border-color: #f36422;
	background: #fff6f1;
}
.tcg-karta-mrizka .k-vyzvednuti .stav {
	color: #f36422;
	font-weight: 700;
}
/* Vyřízená odměna — zelené pozadí i razítko si drží, vybledne jen štítek: hráč už
   pro ni nic udělat nemusí. */
.tcg-karta-mrizka .vyrizena .stav {
	color: #9aa2ab;
}
/* Ukázka pro odhlášeného: karta zůstane čitelná pod závojem, výzva leží přes ni. */
/* Rozvržení a odsazení řeší bootstrapí utility v šabloně; tady zbývá jen překryv
   mřížky a závoj, na který utilita není. */
.tcg-karta-vyzva {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	gap: 14px;
	background: rgba(255, 255, 255, 0.74);
}
.tcg-karta-vyzva strong {
	color: #1b2839;
	font-size: 15px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.tcg-karta-vyzva span {
	max-width: 420px;
	color: #777777;
	font-size: 13px;
	line-height: 21px;
	letter-spacing: 0;
}
/* --- Časté dotazy ------------------------------------------------------
   Globální .accordion .card-header má odsazení jen svisle (custom.css:3911), takže
   otázka i znaménko sedí na hraně karty. Blog to řeší uvnitř .article šedým pozadím
   a odsazením; sem se šedá netahá — sekce na ní stojí a bílé karty by v ní zmizely. */
#accordion_tcg_faq .card-header {
	padding-right: 40px;
	padding-left: 20px;
}
#accordion_tcg_faq .card-body {
	padding: 10px 20px 20px;
}

/* Loga her nikam nevedou, takže nesmí při najetí blednout jako odkazy značek na homepage. */
.tcg-sekce .brand .item img:hover {
	opacity: 1;
}
/* Kolotoč zboží na detailu akce stojí ve sloupci stejné šířky jako obsah stránky, ale modul
   si nese vlastní .container: pod 1200 px by přidal druhé odsazení a od 1770 px má pevnou
   šířku 1740 px (responsive.css), kterou by ze sloupce přetekl. */
.tcg-zbozi .container {
	width: auto;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* Kupónové karty přebírá modulesVyhody() z klubu, kde jdou do tří sloupců až od
   1500 px (col-xxl, responsive.css:20). Na rozcestníku stojí v užším sloupci a muster
   je chce po třech, tak se zlom posouvá na 992 px. */
@media (min-width: 992px) {
	.tcg-slevy > [class*="col-"] {
		flex: 0 0 33.333333%;
		max-width: 33.333333%;
	}
}
.tcg-sekce-perex {
	max-width: 760px;
	margin: 0 auto 34px;
	color: #3a3a3a;
	font-size: 15px;
	line-height: 25px;
	letter-spacing: 0;
}

@media (max-width: 767px) {
	/* Nahoře se neodsazuje ani na mobilu — mezeru drží drobečky (viz níž). */
	.tcg-hero {
		padding: 0 0 28px;
	}
	/* Sdílené drobečky mají 40 px nad i pod sebou; na úzkém displeji je to půl
	   obrazovky prázdna, než začne obsah. */
	.tcg-hero .breadcrumbs {
		padding-top: 18px;
		padding-bottom: 18px;
	}
	.tcg-hero img {
		max-width: 240px;
	}
	.tcg-karta-mrizka {
		grid-template-columns: repeat(2, 1fr);
	}
}