/* ===== Písmo (přibalené Baloo 2 – variabilní, licence OFL) =====
 * Žádné stahování z Google Fonts: plnohodnotný offline a žádný požadavek třetí straně. */
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("pisma/baloo2-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Baloo 2";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("pisma/baloo2-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===== Základ ===== */

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: "Baloo 2", "Ubuntu", sans-serif;
	color: #3a3a3a;
	min-height: 100%;
}

/* mobil: žádné šedé čtverečky při tapnutí, žádný výběr textu na hracích prvcích */
* { -webkit-tap-highlight-color: transparent; }
.maskot, .kosik, .den, .pocasi-karta, .bublina, .kosik-pocet,
.nastaveni-blok button, .napoveda-akce, .p-volba, #testpanel button {
	-webkit-user-select: none;
	user-select: none;
	touch-action: manipulation;
}

/* témata podle maskota */
body[data-maskot="ovecka"] {
	--pozadi: linear-gradient(180deg, #dff0fb 0%, #eef7e6 45%, #dcefcc 100%);
	--akcent: #ff9900;
	--akcent-svetly: #ffe3b3;
	--karta: #ffffff;
}
body[data-maskot="myska"] {
	--pozadi: linear-gradient(180deg, #fdf3dc 0%, #fdf6e8 45%, #f7e6c4 100%);
	--akcent: #f0a000;
	--akcent-svetly: #ffe9b8;
	--karta: #fffdf8;
}
body[data-maskot="kocka"] {
	--pozadi: linear-gradient(180deg, #fdeade 0%, #fdf1e6 45%, #f8ddc6 100%);
	--akcent: #ef8c1f;
	--akcent-svetly: #ffe2c4;
	--karta: #fffdf9;
}
body[data-maskot="pes"] {
	--pozadi: linear-gradient(180deg, #e3eef9 0%, #edf4fa 45%, #d7e7f4 100%);
	--akcent: #ef9a3c;
	--akcent-svetly: #ffe4c2;
	--karta: #fdfeff;
}
body[data-maskot="mravenecnik"] {
	--pozadi: linear-gradient(180deg, #f3ead9 0%, #f7f1e4 45%, #e9dcc3 100%);
	--akcent: #d98a2b;
	--akcent-svetly: #f5e2bd;
	--karta: #fffef9;
}
body[data-maskot="jezek"] {
	--pozadi: linear-gradient(180deg, #e9f2dc 0%, #f0f6e7 45%, #dcead0 100%);
	--akcent: #e0952f;
	--akcent-svetly: #f6e4c0;
	--karta: #fdfff8;
}
body[data-maskot="prasatko"] {
	--pozadi: linear-gradient(180deg, #fde8ef 0%, #fdf0f4 45%, #f8d9e5 100%);
	--akcent: #e8739c;
	--akcent-svetly: #fbd6e2;
	--karta: #fffafc;
}
body[data-maskot="papousek"] {
	--pozadi: linear-gradient(180deg, #e3f2dc 0%, #edf7e7 45%, #d4ecc9 100%);
	--akcent: #ef9a3c;
	--akcent-svetly: #ffe4c2;
	--karta: #fbfff8;
}
body[data-maskot="kralicek"] {
	--pozadi: linear-gradient(180deg, #eaf3dc 0%, #f5f7ea 45%, #e6ddcb 100%);
	--akcent: #e8823f;
	--akcent-svetly: #ffdfc2;
	--karta: #fffdf9;
}
body[data-maskot="gepard"] {
	--pozadi: linear-gradient(180deg, #fdeecb 0%, #fdf5e0 45%, #f4dfae 100%);
	--akcent: #d9992b;
	--akcent-svetly: #f7e3b4;
	--karta: #fffdf6;
}

body {
	background: var(--pozadi, #f0f0f0);
	background-attachment: fixed;
	display: flex;
	justify-content: center;
	padding: 16px 10px 40px;
}
/* stálá šířka obsahu – karta nemění velikost podle obsahu (např. záložky nastavení) */
#app {
	width: 100%;
	max-width: 460px;
}

/* ===== Karta ===== */

.karta {
	background: var(--karta);
	border-radius: 24px;
	box-shadow: 0 10px 30px rgba(60, 80, 40, 0.15);
	padding: 24px 20px 28px;
	max-width: 460px;
	width: 100%;
	text-align: center;
}

header h1 {
	font-size: 26px;
	font-weight: 700;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.skola {
	margin: 0 0 3px;
	font-size: 15px;
	opacity: 0.6;
}
.dnes-je {
	margin: 7px 0 0;
	font-size: 14px;
	color: rgba(51, 51, 51, 0.6);
}
/* počasí u maskota – volná ikona s teplotou (bez rámečku) */
.pocasi-karta {
	font-family: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	line-height: 1.2;
	transition: transform 0.15s;
}
.pocasi-karta .ik { width: 46px; height: 46px; display: block; }
.pocasi-karta .st { font-size: 14px; font-weight: 700; color: #3a3a3a; }
.pocasi-karta:hover { transform: scale(1.08); }

/* ===== Banner nejbližších prázdnin ===== */

.banner {
	margin: 16px auto 0;
	display: inline-block;
	background: var(--akcent-svetly);
	border-radius: 999px;
	padding: 6px 18px;
	font-weight: 600;
	font-size: 15px;
}

/* ===== Čísla ===== */

.cisla { margin-top: 18px; }
.cisla p, .postup p {
	margin: 0 0 6px;
	font-size: 15px;
	opacity: 0.75;
}
.cislo {
	display: inline-block;
	margin: 0 12px;
}
.cislo strong {
	display: block;
	font-size: 34px;
	line-height: 1.1;
	font-weight: 700;
}
.cislo.velke strong {
	font-size: 52px;
	color: var(--akcent);
}
.cislo span { font-size: 14px; opacity: 0.7; }

/* ===== Progress ===== */

.postup { margin-top: 20px; }
.progress {
	width: 230px;
	height: 30px;
	border-radius: 999px;
	border: 2px solid #3a3a3a;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: #fff;
}
.progress > div {
	background: var(--akcent);
	position: absolute;
	inset: 3px auto 3px 3px;
	border-radius: 999px;
	min-width: 6px;
	transition: width 0.8s ease;
}
.progress > span {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
}

/* ===== Maskot a bublina ===== */

.maskot-blok { margin-top: 22px; }
.bublina {
	position: relative;
	display: inline-block;
	background: #f4f4f4;
	border: 1.5px solid #3a3a3a;
	border-radius: 16px;
	padding: 10px 16px;
	font-size: 15px;
	max-width: 320px;
	margin-bottom: 14px;
}
.bublina::before {
	content: "";
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
	border: 9px solid transparent;
	border-top-color: #3a3a3a;
	border-bottom: none;
}
.bublina::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-top-color: #f4f4f4;
	border-bottom: none;
}
/* rosnička – věta + hodinový pás v bublině (šipky i tažení prstem) */
.ros-text { margin: 0 0 8px; }
.ros-pas {
	border-top: 1.5px solid #dcdcdc;
	padding-top: 8px;
	display: flex;
	align-items: center;
	gap: 5px;
}
.ros-sloupce {
	display: flex;
	gap: 6px;
	flex: 1;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	touch-action: pan-x;
	scrollbar-width: none;
}
.ros-sloupce::-webkit-scrollbar { display: none; }
.ros-sl {
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	flex: 0 0 34px;
}
.ros-sl .c { font-size: 11px; color: #888; white-space: nowrap; }
/* přelom půlnoci – oddělovací linka a zvýrazněný štítek „zítra“ */
.ros-sl.novy-den { border-left: 1.5px solid #c9c9c9; padding-left: 7px; flex-basis: 41px; }
.ros-sl.novy-den .c { color: var(--akcent); font-weight: 700; }
.ros-sl img { width: 21px; height: 21px; }
.ros-sl .t { font-size: 12.5px; font-weight: 700; }
.ros-sipka {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid #3a3a3a;
	background: #fff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
	font-family: inherit;
	padding: 0;
	color: #3a3a3a;
}
.ros-sipka:disabled { opacity: 0.3; cursor: default; }

.maskot img, .maskot svg {
	width: 100%;
	max-width: 170px;
	height: auto;
	display: block;
	margin: 0 auto;
}
/* vysoké doplňky (bambule silvestrovské a vánoční čepice) smí vykouknout nad plátno SVG */
.maskot > svg { overflow: visible; }

/* nehybné vrstvy (stín, deštník, vajíčka) – leží na zemi a s maskotem nelétají */
.maskot .vrstva {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.maskot .vrstva.predni { z-index: 2; }
.maskot > svg { position: relative; z-index: 1; }
.maskot .stin ellipse { transform-box: fill-box; transform-origin: center; }

/* ===== Baterie energie maskota ===== */

.energie {
	position: relative;
	box-sizing: border-box;
	width: 52px;
	height: 17px;
	margin: 7px auto 0;
	background: #f4f4f4;
	border: 2px solid #000;
	border-radius: 5px;
}
/* pól baterie – samostatný obrys; jeho levá linka leží PŘESNĚ na pravé lince
 * těla (right:-6px = překryv o šířku obrysu), jinak by vznikla dvojitá čára.
 * (box-sizing explicitně: globální reset * na ::after nedosáhne) */
.energie::after {
	content: '';
	position: absolute;
	box-sizing: border-box;
	right: -6px;
	top: 50%;
	transform: translateY(-50%);
	width: 6px;
	height: 9px;
	background: #f4f4f4;
	border: 2px solid #000;
	border-radius: 0 3px 3px 0;
}
.e-drah {
	position: absolute;
	inset: 0;
	border-radius: 2px;
	overflow: hidden;
}
.e-vypln {
	position: absolute;
	inset: 0;
	transform-origin: left center;
	transition: transform 0.5s, background 0.5s;
}
.e-vlnka {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 22px;
	left: -26px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
	display: none;
}
.e-blesk {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -54%);
	font-size: 14px;
	line-height: 1;
	text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
	display: none;
	z-index: 2;
}
.energie.nabiji .e-vlnka { display: block; animation: putovani 1.6s linear infinite; }
.energie.nabiji .e-blesk { display: block; animation: pulzik 1.2s ease-in-out infinite; }
@keyframes putovani {
	0% { left: -26px; }
	100% { left: 52px; }
}
@keyframes pulzik {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* ===== Kalendář (mřížka dnů) ===== */

.kalendar {
	position: relative;
	margin: 18px auto 0;
	max-width: 244px;
}
.mrizka-hlavicka, .mrizka {
	display: grid;
	grid-template-columns: 22px repeat(7, 1fr);
	gap: 2px;
	justify-items: center;
}
.tyden {
	font-size: 10px;
	font-weight: 600;
	opacity: 0.35;
	justify-self: end;
	align-self: center;
	padding-right: 3px;
}
.mrizka-hlavicka span {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.55;
	padding-bottom: 2px;
}
.den {
	border: none;
	background: none;
	padding: 2px;
	margin: 0;
	cursor: pointer;
	line-height: 0;
	border-radius: 8px;
}
.den img { width: 20px; height: 20px; }
.den:not(.prazdny):hover { background: var(--akcent-svetly); }
.den.dnesni {
	background: var(--akcent-svetly);
	box-shadow: 0 0 0 2px var(--akcent);
}
.den.prazdny { cursor: default; }

.popisek {
	position: absolute;
	z-index: 5;
	background: #3a3a3a;
	color: #fff;
	border-radius: 10px;
	padding: 7px 12px;
	font-size: 13px;
	line-height: 1.35;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* ===== Patička ===== */

footer { margin-top: 22px; }
footer p { font-size: 14px; opacity: 0.8; margin: 0 0 10px; }
.legenda span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 8px;
	font-size: 13px;
	opacity: 0.8;
}
.legenda img { width: 16px; height: 16px; }

/* ===== Oslava na konci roku ===== */

.oslava h1 { font-size: 32px; }
.oslava .maskot img, .oslava .maskot svg { max-width: 220px; }

/* ===== Maskot + košík ===== */

.maskot-radek {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
}
.maskot {
	position: relative;
	width: 170px;
	cursor: pointer;
	/* pohupování vypnuto na zkoušku – případný návrat:
	animation: houpani 4s ease-in-out infinite; */
}
.vedle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	margin-bottom: 8px;
}
.kosik {
	position: relative;
	width: 64px;
	cursor: pointer;
}
.kosik img { width: 100%; display: block; }
.kosik-pocet {
	position: absolute;
	top: -4px;
	right: -6px;
	background: var(--akcent);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	min-width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 999px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* ===== Animace maskota ===== */

@keyframes houpani {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-4px); }
}
.maskot svg .oko {
	transform-box: fill-box;
	transform-origin: center;
	animation: mrknuti 5s infinite;
}
@keyframes mrknuti {
	0%, 93%, 100% { transform: scaleY(1); }
	95%, 97% { transform: scaleY(0.08); }
}

/* jemné dýchání celého těla */
.maskot > svg { animation: dychani 4.5s ease-in-out infinite; }
@keyframes dychani {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.012); }
}

/* ouška – každé švihne ve vlastním rytmu */
.maskot svg .ucho-l, .maskot svg .ucho-p,
.maskot svg .fousky-l, .maskot svg .fousky-p,
.maskot svg .cumacek, .maskot svg .ocasek {
	transform-box: fill-box;
}
.maskot svg .ucho-l { animation: usko-l 7s infinite; }
.maskot svg .ucho-p { animation: usko-p 9s infinite; }
body[data-maskot="ovecka"] .maskot svg .ucho-l { transform-origin: 92% 50%; }
body[data-maskot="ovecka"] .maskot svg .ucho-p { transform-origin: 8% 50%; }
body[data-maskot="myska"] .maskot svg .ucho-l,
body[data-maskot="myska"] .maskot svg .ucho-p,
body[data-maskot="kocka"] .maskot svg .ucho-l,
body[data-maskot="kocka"] .maskot svg .ucho-p,
body[data-maskot="mravenecnik"] .maskot svg .ucho-l,
body[data-maskot="mravenecnik"] .maskot svg .ucho-p,
body[data-maskot="prasatko"] .maskot svg .ucho-l,
body[data-maskot="prasatko"] .maskot svg .ucho-p,
body[data-maskot="gepard"] .maskot svg .ucho-l,
body[data-maskot="gepard"] .maskot svg .ucho-p { transform-origin: 50% 88%; }
/* králíček – dlouhé uši se kývou od kořene u hlavy */
body[data-maskot="kralicek"] .maskot svg .ucho-l,
body[data-maskot="kralicek"] .maskot svg .ucho-p { transform-origin: 50% 94%; }

/* papoušek – chocholka švihá, křidélka a ocasní pera mají vlastní kotvy */
.maskot svg .chocholka {
	transform-box: fill-box;
	transform-origin: 50% 95%;
	animation: usko-l 8s infinite;
}
.maskot svg .kridlo-l, .maskot svg .kridlo-p { transform-box: fill-box; }
body[data-maskot="papousek"] .maskot svg .ocasek { transform-origin: 15% 25%; }
body[data-maskot="pes"] .maskot svg .ucho-l,
body[data-maskot="pes"] .maskot svg .ucho-p { transform-origin: 50% 12%; }
body[data-maskot="mravenecnik"] .maskot svg .ocasek { transform-origin: 88% 40%; }
@keyframes usko-l {
	0%, 88%, 100% { transform: rotate(0); }
	92% { transform: rotate(-12deg); }
	96% { transform: rotate(5deg); }
}
@keyframes usko-p {
	0%, 88%, 100% { transform: rotate(0); }
	92% { transform: rotate(12deg); }
	96% { transform: rotate(-5deg); }
}

/* fousky a čumáček – zavětření */
.maskot svg .fousky-l { transform-origin: 100% 50%; animation: fousani-l 8s infinite; }
.maskot svg .fousky-p { transform-origin: 0% 50%; animation: fousani-p 8s infinite; }
.maskot svg .cumacek { transform-origin: center; animation: cichani 8s infinite; }
@keyframes fousani-l {
	0%, 90%, 100% { transform: rotate(0); }
	93% { transform: rotate(4deg); }
	96% { transform: rotate(-3deg); }
}
@keyframes fousani-p {
	0%, 90%, 100% { transform: rotate(0); }
	93% { transform: rotate(-4deg); }
	96% { transform: rotate(3deg); }
}
@keyframes cichani {
	0%, 90%, 100% { transform: scale(1); }
	93% { transform: scale(1.18); }
	96% { transform: scale(1.06); }
}

/* ocásek – občasné zavlnění */
.maskot svg .ocasek { transform-origin: 0% 100%; animation: mrskani 11s infinite; }
@keyframes mrskani {
	0%, 86%, 100% { transform: rotate(0); }
	90% { transform: rotate(9deg); }
	94% { transform: rotate(-5deg); }
	97% { transform: rotate(3deg); }
}

/* večerní podřimování – přivřené oči, pomalejší dech, žádné švihání */
.maskot.spinka svg .oko { animation: none; transform: scaleY(0.22); }
.maskot.spinka svg .ucho-l, .maskot.spinka svg .ucho-p,
.maskot.spinka svg .fousky-l, .maskot.spinka svg .fousky-p,
.maskot.spinka svg .cumacek, .maskot.spinka svg .ocasek { animation: none; }
.maskot.spinka > svg { animation: dychani 6s ease-in-out infinite; }
.zzz {
	position: absolute;
	top: 12%;
	right: 8%;
	font-size: 19px;
	pointer-events: none;
	z-index: 3;
	animation: stoupani 2.5s ease-out forwards;
}
@keyframes stoupani {
	0% { transform: translateY(0) scale(0.6); opacity: 0; }
	25% { opacity: 0.9; }
	100% { transform: translateY(-45px) scale(1.2); opacity: 0; }
}
.maskot.zvyka > svg { animation: zvykani 0.4s ease-in-out; }
@keyframes zvykani {
	0% { transform: scale(1); }
	30% { transform: scale(1.06, 0.9); }
	65% { transform: scale(0.95, 1.06); }
	100% { transform: scale(1); }
}
.maskot.zvyka svg .pusa {
	transform-box: fill-box;
	transform-origin: center;
	animation: pusinka 0.4s ease-in-out;
}
@keyframes pusinka {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.5); }
}
.maskot.poskok > svg { animation: poskok 0.45s ease-in-out 2; }
@keyframes poskok {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}
.maskot.vrti > svg { animation: vrteni 0.7s ease-in-out; }

/* zamávání = pozdrav: naklonění s pohupem + švihající ouško (papoušek křidélko) */
.maskot.zamava > svg { animation: pozdrav 1.3s ease-in-out; }
@keyframes pozdrav {
	0%, 100% { transform: rotate(0) translateY(0); }
	20%, 60% { transform: rotate(-9deg) translateY(-6px); }
	40%, 80% { transform: rotate(-9deg) translateY(0); }
}
.maskot.zamava svg .ucho-p { animation: zamavani 1.3s ease-in-out; }
@keyframes zamavani {
	0%, 100% { transform: rotate(0); }
	25%, 65% { transform: rotate(18deg); }
	45%, 85% { transform: rotate(6deg); }
}
.maskot.zamava svg .kridlo-p { transform-origin: 50% 10%; animation: kridlo-tanec-p 0.65s ease-in-out 2; }

/* hladový maskot (2+ zameškané dny) – svěšená ouška, smutná pusa */
.maskot.hlad svg .ucho-l, .maskot.hlad svg .ucho-p,
.maskot.hlad svg .fousky-l, .maskot.hlad svg .fousky-p {
	animation: none;
	transition: transform 0.5s;
}
body[data-maskot="ovecka"] .maskot.hlad svg .ucho-l { transform: rotate(-28deg); }
body[data-maskot="ovecka"] .maskot.hlad svg .ucho-p { transform: rotate(28deg); }
body[data-maskot="myska"] .maskot.hlad svg .ucho-l { transform: translate(-14px, 26px) rotate(-30deg) scaleY(0.6); }
body[data-maskot="myska"] .maskot.hlad svg .ucho-p { transform: translate(14px, 26px) rotate(30deg) scaleY(0.6); }
body[data-maskot="kocka"] .maskot.hlad svg .ucho-l { transform: rotate(-30deg); }
body[data-maskot="kocka"] .maskot.hlad svg .ucho-p { transform: rotate(30deg); }
body[data-maskot="pes"] .maskot.hlad svg .ucho-l { transform: translate(-4px, 14px) rotate(6deg); }
body[data-maskot="pes"] .maskot.hlad svg .ucho-p { transform: translate(4px, 14px) rotate(-6deg); }
body[data-maskot="mravenecnik"] .maskot.hlad svg .ucho-l { transform: rotate(-32deg); }
body[data-maskot="mravenecnik"] .maskot.hlad svg .ucho-p { transform: rotate(32deg); }
body[data-maskot="prasatko"] .maskot.hlad svg .ucho-l { transform: rotate(-26deg) translateY(8px); }
body[data-maskot="prasatko"] .maskot.hlad svg .ucho-p { transform: rotate(26deg) translateY(8px); }
body[data-maskot="kralicek"] .maskot.hlad svg .ucho-l { transform: rotate(-78deg); }
body[data-maskot="kralicek"] .maskot.hlad svg .ucho-p { transform: rotate(78deg); }
body[data-maskot="gepard"] .maskot.hlad svg .ucho-l { transform: translate(-3px, 11px) scaleY(0.8); }
body[data-maskot="gepard"] .maskot.hlad svg .ucho-p { transform: translate(3px, 11px) scaleY(0.8); }
.maskot.hlad svg .chocholka { animation: none; transform: scaleY(0.5); transition: transform 0.5s; }
.maskot.hlad svg .kridlo-l { transform: rotate(-18deg); transform-origin: 50% 10%; transition: transform 0.5s; }
.maskot.hlad svg .kridlo-p { transform: rotate(18deg); transform-origin: 50% 10%; transition: transform 0.5s; }
body[data-maskot="myska"] .maskot.hlad svg .fousky-l,
body[data-maskot="kocka"] .maskot.hlad svg .fousky-l { transform: rotate(14deg); }
body[data-maskot="myska"] .maskot.hlad svg .fousky-p,
body[data-maskot="kocka"] .maskot.hlad svg .fousky-p { transform: rotate(-14deg); }
body[data-maskot="ovecka"] .maskot.hlad svg .pusa,
body[data-maskot="kocka"] .maskot.hlad svg .pusa,
body[data-maskot="pes"] .maskot.hlad svg .pusa,
body[data-maskot="prasatko"] .maskot.hlad svg .pusa,
body[data-maskot="kralicek"] .maskot.hlad svg .pusa,
body[data-maskot="gepard"] .maskot.hlad svg .pusa,
body[data-maskot="jezek"] .maskot.hlad svg .pusa {
	transform-box: fill-box;
	transform-origin: center;
	transform: scaleY(-1);
	transition: transform 0.5s;
}
@keyframes vrteni {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-5deg); }
	75% { transform: rotate(5deg); }
}

/* radostné triky po pohlazení */
.maskot.tanec > svg { animation: tanec 0.55s ease-in-out 4; }
@keyframes tanec {
	0%, 100% { transform: translateY(0) rotate(0); }
	25% { transform: translateY(-8px) rotate(-6deg); }
	75% { transform: translateY(-8px) rotate(6deg); }
}
/* velký trik: taneček → dvě otočky → poskoky → velký závěrečný výskok */
.maskot.velkytrik > svg { animation: velkytrik 3.3s ease-in-out; }
@keyframes velkytrik {
	0%, 100% { transform: none; }
	5% { transform: translateY(-9px) rotate(-7deg); }
	10% { transform: translateY(0) rotate(0); }
	15% { transform: translateY(-9px) rotate(7deg); }
	20% { transform: translateY(0) rotate(0); }
	27% { transform: scaleX(-1) translateY(-4px); }
	34% { transform: scaleX(1) translateY(0); }
	41% { transform: scaleX(-1) translateY(-4px); }
	48% { transform: scaleX(1) translateY(0); }
	56% { transform: translateY(-11px) rotate(-7deg); }
	63% { transform: translateY(0) rotate(7deg); }
	70% { transform: translateY(-11px) rotate(-7deg); }
	77% { transform: translateY(0) rotate(0); }
	84% { transform: translateY(6px) scale(1.08, 0.88); }
	91% { transform: translateY(-36px) scale(0.94, 1.1); }
	97% { transform: translateY(2px) scale(1.05, 0.92); }
}
.maskot.otocka > svg { animation: otocka 1.1s ease-in-out; }
@keyframes otocka {
	0%, 100% { transform: scaleX(1); }
	35%, 65% { transform: scaleX(-1); }
}
.maskot.vyskok > svg { animation: vyskok 0.9s cubic-bezier(0.3, 1.3, 0.6, 1); }
@keyframes vyskok {
	0%, 100% { transform: translateY(0) scale(1); }
	15% { transform: translateY(4px) scale(1.08, 0.88); }
	50% { transform: translateY(-30px) scale(0.94, 1.08); }
	85% { transform: translateY(2px) scale(1.05, 0.92); }
}

/* stín se při skocích krčí a bledne (maskot je „ve vzduchu“) */
.maskot.poskok .stin ellipse { animation: stin-krceni 0.45s ease-in-out 2; }
.maskot.tanec .stin ellipse { animation: stin-krceni 0.55s ease-in-out 4; }
.maskot.velkytrik .stin ellipse { animation: stin-krceni 0.55s ease-in-out 6; }
.maskot.vyskok .stin ellipse { animation: stin-krceni 0.9s ease-in-out; }
.maskot.zamava .stin ellipse { animation: stin-krceni 1.3s ease-in-out; }
@keyframes stin-krceni {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(0.72); opacity: 0.55; }
}
/* k tanci se přidá ocásek, chocholka a křidélka */
.maskot.tanec svg .ocasek, .maskot.velkytrik svg .ocasek { animation: svih-tanec 0.55s ease-in-out infinite; }
.maskot.tanec svg .chocholka, .maskot.velkytrik svg .chocholka { animation: svih-tanec 0.55s ease-in-out infinite; }
@keyframes svih-tanec {
	0%, 100% { transform: rotate(-8deg); }
	50% { transform: rotate(12deg); }
}
.maskot.tanec svg .kridlo-l, .maskot.velkytrik svg .kridlo-l { transform-origin: 50% 10%; animation: kridlo-tanec-l 0.55s ease-in-out infinite; }
.maskot.tanec svg .kridlo-p, .maskot.velkytrik svg .kridlo-p { transform-origin: 50% 10%; animation: kridlo-tanec-p 0.55s ease-in-out infinite; }
@keyframes kridlo-tanec-l {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-24deg); }
}
@keyframes kridlo-tanec-p {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(24deg); }
}

/* únava (7.–8. ťuknutí) – pomalé klimbnutí na stranu */
.maskot.klimba > svg { animation: klimba 1.6s ease-in-out; }
@keyframes klimba {
	0%, 100% { transform: rotate(0) translateY(0); }
	40% { transform: rotate(7deg) translateY(3px); }
	60% { transform: rotate(6deg) translateY(3px); }
}

/* notičky při tanci */
.nota {
	position: absolute;
	top: 6%;
	font-size: 19px;
	color: #4a90d9;
	pointer-events: none;
	z-index: 3;
	animation: leti 1.4s ease-out forwards;
}
.srdce {
	position: absolute;
	top: 30%;
	font-size: 20px;
	color: #e2799a;
	pointer-events: none;
	z-index: 3;
	animation: leti 1s ease-out forwards;
}
@keyframes leti {
	0% { transform: translateY(0) scale(0.7); opacity: 1; }
	100% { transform: translateY(-65px) scale(1.4); opacity: 0; }
}

/* letící jídlo (do košíku i k puse) – svislý pohyb přestřelí nahoru = oblouček */
.letici {
	position: fixed;
	z-index: 60;
	pointer-events: none;
	transition: left 0.6s linear, top 0.6s cubic-bezier(0.3, 1.7, 0.6, 1), transform 0.6s ease-in;
}

/* dnešní porce se pohupuje, utržená pobledne */
.den.dnesni img { animation: pulz 1.5s ease-in-out infinite; }
@keyframes pulz {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.25); }
}
.den.utrzena img { opacity: 0.25; animation: none; }

/* ===== Sezónní částice ===== */

#castice {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	overflow: hidden;
}
#castice span {
	position: absolute;
	top: -30px;
	opacity: 0.55;
	animation: padani linear infinite;
}
@keyframes padani {
	0% { transform: translateY(0) translateX(0) rotate(0deg); }
	25% { transform: translateY(28vh) translateX(18px) rotate(90deg); }
	50% { transform: translateY(55vh) translateX(-14px) rotate(200deg); }
	75% { transform: translateY(82vh) translateX(14px) rotate(280deg); }
	100% { transform: translateY(110vh) translateX(-8px) rotate(360deg); }
}
/* déšť: úzké kreslené kapky, pád rovně dolů bez rotace, všechny jedním směrem */
#castice span.kapka {
	width: 3px;
	height: 14px;
	border-radius: 999px;
	background: #4a90d9;
	opacity: 0.5;
	animation: kapani linear infinite;
}
@keyframes kapani {
	0% { transform: translateY(0); }
	100% { transform: translateY(110vh); }
}

/* ===== Vzácná návštěva (motýl / beruška / ptáček) ===== */

.navsteva {
	position: fixed;
	width: 38px;
	z-index: 70;
	pointer-events: none;
	transition: left 2.6s ease-in-out, top 2.6s cubic-bezier(0.4, 1.5, 0.6, 1);
	animation: poletovani 0.9s ease-in-out infinite;
}
.navsteva.sedi { animation: pohupovani-navstevy 2.4s ease-in-out infinite; }
@keyframes poletovani {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-8px) rotate(4deg); }
}
@keyframes pohupovani-navstevy {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-2px); }
}

/* ===== Konfety ===== */

.konfety {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 80;
	overflow: hidden;
}
.konfety span {
	position: absolute;
	top: -14px;
	width: 8px;
	height: 13px;
	border-radius: 2px;
	opacity: 0.9;
	animation: konfeta linear forwards;
}
@keyframes konfeta {
	25% { transform: translate(14px, 26vh) rotate(160deg); }
	50% { transform: translate(-10px, 52vh) rotate(320deg); }
	75% { transform: translate(12px, 78vh) rotate(480deg); }
	100% { transform: translate(-6px, 108vh) rotate(640deg); opacity: 0.8; }
}

/* ===== Fokus pro ovládání klávesnicí ===== */

.den:focus-visible, .p-volba:focus-visible, #nastaveni:focus-visible,
.maskot:focus-visible, .kosik:focus-visible {
	outline: 2px solid var(--akcent);
	outline-offset: 2px;
	border-radius: 10px;
}
/* po tapnutí prstem se rámeček nezobrazuje (jen při ovládání klávesnicí) */
.den:focus:not(:focus-visible), .p-volba:focus:not(:focus-visible), #nastaveni:focus:not(:focus-visible),
.maskot:focus:not(:focus-visible), .kosik:focus:not(:focus-visible) {
	outline: none;
}

/* ===== Testovací panel (?test321) ===== */

#testpanel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: rgba(40, 40, 40, 0.92);
	color: #fff;
	padding: 6px 8px;
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	gap: 5px;
	align-items: center;
	font-size: 12px;
}
#testpanel strong { flex: 0 0 auto; }
#testpanel button {
	font-family: inherit;
	font-size: 12px;
	border: none;
	border-radius: 8px;
	padding: 5px 9px;
	cursor: pointer;
	background: #ffb84d;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ===== Omezený pohyb =====
 * Jen zklidnění velkých dekorací – drobné oživení maskota (mrkání, ouška)
 * necháváme, jinak by na počítačích s vypnutými efekty Windows byl maskot mrtvý. */

@media (prefers-reduced-motion: reduce) {
	#castice { display: none; }
	.konfety { display: none; }
	.letici { transition-duration: 0.01s; }
	.den.dnesni img { animation: none; }
	.energie.nabiji .e-vlnka { display: none; }
	.energie.nabiji .e-blesk { animation: none; }
}

/* ===== Nastavení (⚙ dole pod legendou) ===== */

.nastaveni-blok {
	margin-top: 18px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.nastaveni-blok button {
	border: none;
	background: none;
	font-family: inherit;
	font-size: 14px;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	padding: 4px 10px;
	border-radius: 10px;
}
.nastaveni-blok button:hover { opacity: 1; background: var(--akcent-svetly); }

/* ===== Nápověda ===== */

#napoveda-overlay, #novinky-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 90;
	overflow: auto;
	padding: 24px 10px;
}
/* okno „Co je nového?“ – užší, s odrážkami */
.novinky-karta { max-width: 360px; margin-top: 8vh; }
.novinky-seznam {
	text-align: left;
	margin: 14px 0 4px;
	padding: 0 0 0 4px;
	list-style: none;
}
.novinky-seznam li {
	margin: 0 0 12px;
	line-height: 1.45;
}
.napoveda-karta {
	position: relative;
	max-width: 430px;
	margin: 0 auto;
	background: var(--karta, #fff);
	border-radius: 22px;
	padding: 22px 22px 16px;
	text-align: left;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.napoveda-karta h1 { font-size: 22px; margin: 0 0 6px; padding: 0; text-transform: none; }
.napoveda-karta h2 { font-size: 16px; margin: 16px 0 4px; font-weight: 700; }
.napoveda-karta p { font-size: 14px; margin: 6px 0; line-height: 1.45; }
#napoveda-zavrit {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 20px;
	cursor: pointer;
	opacity: 0.6;
}
#napoveda-zavrit:hover { opacity: 1; }
.napoveda-akce {
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	background: var(--akcent);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 10px 16px;
	cursor: pointer;
}

/* ===== Nastavení – záložky Kamarád | Škola ===== */
.n-zaly {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin: 4px 0 16px;
}
.n-zal {
	font-family: inherit;
	font-size: 15px;
	padding: 8px 18px;
	border-radius: 999px;
	border: 2px solid transparent;
	background: #f1f1f1;
	color: inherit;
	cursor: pointer;
}
.n-zal.aktivni {
	background: var(--akcent-svetly);
	border-color: var(--akcent);
	font-weight: 700;
}
.n-ok-radek { margin: 20px 0 4px; text-align: center; }
#n-ok { min-width: 150px; font-size: 16px; }
.napoveda-karta .men { font-size: 12.5px; opacity: 0.65; word-break: break-all; }
.napoveda-pata {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin-top: 16px;
	padding-top: 10px;
	font-size: 12.5px;
	opacity: 0.7;
	text-align: center;
	line-height: 1.5;
}

/* ===== Úvodní průvodce ===== */

.pruvodce h1 { font-size: 28px; text-transform: none; }
.pruvodce > p { font-size: 16px; opacity: 0.8; }
.p-seznam {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 20px;
}
.p-volba {
	font-family: inherit;
	color: inherit;
	font-size: 17px;
	font-weight: 600;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 16px;
	padding: 14px;
	cursor: pointer;
	transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.p-volba:hover { border-color: var(--akcent); transform: translateY(-2px); }
.p-volba.vybrana { border-color: var(--akcent); background: var(--akcent-svetly); }
.p-maskoti {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-top: 20px;
}
.p-maskot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.p-maskot .maskot.mini { width: 110px; cursor: pointer; }
.p-pozn { font-size: 13px; opacity: 0.65; font-weight: 400; }
.p-zpet {
	margin-top: 18px;
	background: none;
	border: none;
	font-family: inherit;
	font-size: 14px;
	opacity: 0.6;
	cursor: pointer;
}
.p-zpet:hover { opacity: 1; }