/* Игровой движок uchimsa.ru — оформление. Пастельная палитра, цвета берутся из темы сайта. */
.igra {
	--i-akc: var(--akc, #16a3bf);
	--i-akc-t: var(--akc-temn, #0b7d96);
	--i-svet: var(--akc-svet, #d8f0f6);
	--i-tyomn: var(--tyomn, #15263a);
	--i-sery: var(--sery, #66788b);
	--i-ramka: var(--ramka, #dbe8f0);
	--i-fon: #f6fbfd;
	--i-ok: #3f9d6a;
	--i-ok-fon: #e3f4ea;
	--i-err: #c9605d;
	--i-err-fon: #fbe9e8;
	background: var(--i-fon);
	border: 1px solid var(--i-ramka);
	border-radius: 18px;
	padding: 20px;
	margin: 0 0 28px;
	color: var(--i-tyomn);
	font-family: var(--osn, 'Golos Text', 'Segoe UI', Arial, sans-serif);
	max-width: 760px;
}
.igra * { box-sizing: border-box; }
.igra-verh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.igra-geroy { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
.igra-geroy svg { width: 46px; height: 46px; flex: 0 0 46px; }
.igra-geroy b { display: block; font-family: var(--zag, 'Manrope', sans-serif); font-size: 1.05em; }
.igra-geroy span { color: var(--i-sery); font-size: .88em; }
.igra-uroven { color: var(--i-sery); font-size: .9em; white-space: nowrap; }
.igra-tochki { display: flex; gap: 5px; margin: 0 0 14px; }
.igra-tochki i { flex: 1; height: 6px; border-radius: 3px; background: var(--i-ramka); }
.igra-tochki i.ok { background: var(--i-ok); }
.igra-tochki i.err { background: #e8b4b2; }
.igra-tochki i.sey { background: var(--i-akc); }
.igra-zadanie { font-size: 1.12em; font-weight: 600; margin: 0 0 6px; line-height: 1.4; }
.igra-podskazka { color: var(--i-sery); font-size: .92em; margin: 0 0 14px; }
.igra-scena {
	background: #fff;
	border: 1px solid var(--i-ramka);
	border-radius: 14px;
	padding: 14px;
	min-height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.igra-ryad { display: flex; align-items: flex-end; justify-content: center; gap: 8px; flex-wrap: wrap; width: 100%; }
.igra-ryad.vert { flex-direction: column-reverse; align-items: center; gap: 0; }
.igra-ryad.vert .igra-predmet { padding: 1px 4px; }
.igra-ryad-s-nachalom .igra-ryad { width: auto; flex: 0 1 auto; }
.igra-krysha { width: 0; height: 0; border-left: 86px solid transparent; border-right: 86px solid transparent; border-bottom: 26px solid #d9b48f; margin-bottom: 2px; }
.igra-kuchka { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 420px; }
.igra-predmet {
	background: none;
	border: 2px solid transparent;
	border-radius: 12px;
	padding: 4px;
	cursor: pointer;
	position: relative;
	line-height: 0;
	transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.igra-predmet:hover { transform: translateY(-2px); border-color: var(--i-svet); }
.igra-predmet svg { width: 52px; height: 52px; display: block; }
.igra-predmet.otmechen { background: var(--i-svet); }
.igra-predmet .nomer {
	position: absolute; top: -6px; right: -6px;
	min-width: 22px; height: 22px; padding: 0 5px;
	border-radius: 11px; background: var(--i-akc-t); color: #fff;
	font: 700 12px/22px var(--zag, sans-serif); text-align: center;
}
.igra-predmet.verno { border-color: var(--i-ok); background: var(--i-ok-fon); }
.igra-predmet.neverno { border-color: var(--i-err); background: var(--i-err-fon); }
.igra-etazh svg { width: 150px; height: 40px; }
.igra-start {
	font: 600 .85em var(--zag, sans-serif); color: var(--i-akc-t);
	background: var(--i-svet); border-radius: 8px; padding: 3px 9px; white-space: nowrap;
}
.igra-ryad-s-nachalom { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: center; }
.igra-ryad-s-nachalom.vert { flex-direction: column; gap: 4px; }
.igra-otvety { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; justify-content: center; }
.igra-otvety button {
	min-width: 64px; min-height: 52px; padding: 0 16px;
	border-radius: 12px; border: 2px solid var(--i-ramka); background: #fff;
	font: 700 1.3em var(--zag, sans-serif); color: var(--i-tyomn); cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}
.igra-otvety button:hover { border-color: var(--i-akc); }
.igra-otvety button.verno { border-color: var(--i-ok); background: var(--i-ok-fon); }
.igra-otvety button.neverno { border-color: var(--i-err); background: var(--i-err-fon); }
.igra-otvety.tekst button { font-size: 1em; font-weight: 600; min-width: 0; text-align: left; flex: 1 1 100%; }
.igra-itog-uroka {
	margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: .97em; line-height: 1.5; display: none;
}
.igra-itog-uroka.ok { display: block; background: var(--i-ok-fon); }
.igra-itog-uroka.err { display: block; background: var(--i-err-fon); }
.igra-dalee {
	display: none; margin: 14px auto 0; background: var(--i-akc-t); color: #fff; border: 0;
	border-radius: 12px; padding: 13px 30px; font: 700 1em var(--zag, sans-serif); cursor: pointer;
}
.igra-dalee.vidna { display: block; }
.igra-dalee:hover { filter: brightness(.94); }
.igra-final { text-align: center; padding: 10px 0; }
.igra-final h3 { margin: 0 0 6px; font-size: 1.4em; }
.igra-final p { margin: 0 0 14px; color: var(--i-sery); }
.igra-zvyozdy { display: flex; gap: 6px; justify-content: center; margin: 10px 0 16px; flex-wrap: wrap; }
.igra-zvyozdy svg { width: 28px; height: 28px; }
.igra-sbros { background: none; border: 0; color: var(--i-akc-t); text-decoration: underline; cursor: pointer; font-size: .95em; }
.igra-sch { font-size: .88em; color: var(--i-sery); text-align: center; margin-top: 8px; min-height: 1.3em; }
.igra-polki { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 440px; }
.igra-polka .igra-predmet svg { width: 60px; height: 60px; }
.igra-polka { display: flex; justify-content: space-around; gap: 6px; padding: 0 8px 4px; border-bottom: 7px solid #d9bf9c; border-radius: 0 0 4px 4px; }
.igra-pary { display: grid; gap: 6px 4px; width: 100%; max-width: 560px; }
.igra-para { display: flex; align-items: center; justify-content: center; border-radius: 10px; min-height: 44px; transition: background .2s ease; }
.igra-para svg { width: 100%; max-width: 50px; height: auto; }
.igra-para.s-paroy { background: var(--i-ok-fon); }
.igra-para.lishniy { background: #fdf0d9; box-shadow: inset 0 0 0 2px #efc77a; }
.igra-otvety.tekst-ryad button { font-size: 1em; font-weight: 600; min-width: 0; flex: 1 1 140px; }
.igra-razmer { display: flex; gap: 8px; width: 100%; }
.igra-razmer.gor { flex-direction: column; align-items: flex-start; max-width: 340px; }
.igra-razmer.vert { flex-direction: row; align-items: flex-end; justify-content: center; }
.igra-razmer .igra-predmet svg { max-width: 100%; }
.igra-razmer.gor .igra-predmet { padding: 6px 4px; }
.igra-vesy { width: 100%; max-width: 380px; height: auto; display: block; }
.igra-gruz { cursor: pointer; outline: none; }
.igra-gruz > rect:first-child { stroke: transparent; stroke-width: 2; transition: fill .15s ease; }
.igra-gruz:hover > rect:first-child, .igra-gruz:focus-visible > rect:first-child { fill: #eaf6fb; stroke: #d8f0f6; }
.igra-gruz.verno > rect:first-child { fill: #e3f4ea; stroke: #3f9d6a; }
.igra-gruz.neverno > rect:first-child { fill: #fbe9e8; stroke: #c9605d; }
.igra-figura svg { width: 64px; height: 64px; }
.igra-gruppy { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; width: 100%; }
.igra-gruppa { line-height: normal; border: 2px solid var(--i-ramka); background: #fff; padding: 8px; }
.igra-gruppa-vnutri { display: grid; grid-template-columns: repeat(4, 30px); gap: 4px; justify-content: center; min-height: 64px; align-content: center; }
.igra-gruppa-vnutri svg { width: 30px; height: 30px; }
.igra-lenta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.igra-kartochka { width: 56px; height: 64px; border-radius: 12px; background: var(--i-svet); color: var(--i-akc-t); display: flex; align-items: center; justify-content: center; font: 800 28px var(--zag, sans-serif); }
.igra-kartochka.dyrka { background: #fff; border: 2px dashed var(--i-akc); color: var(--i-sery); }
.igra-kartochka.zapolnena { background: var(--i-ok-fon); border: 2px solid var(--i-ok); color: var(--i-ok); }
.igra-sostav { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; }
.igra-sostav-chast { display: grid; grid-template-columns: repeat(3, 40px); gap: 4px; min-width: 136px; min-height: 96px; padding: 8px; border-radius: 14px; background: var(--i-fon); border: 2px solid var(--i-ramka); align-content: center; justify-content: center; }
.igra-sostav-chast svg { width: 40px; height: 40px; }
.igra-sostav-chast.zakryto { display: flex; align-items: center; justify-content: center; background: #e9d4b4; border-color: #d9bf9c; color: #8a6a4a; font: 800 36px var(--zag, sans-serif); }
.igra-sostav-chast.otkryto { border-color: var(--i-ok); background: var(--i-ok-fon); }
.igra-sostav-plus { font: 800 28px var(--zag, sans-serif); color: var(--i-sery); }
.igra-domik { display: flex; flex-direction: column; align-items: center; }
.igra-domik-krysha { width: 190px; height: 70px; background: #f2b8a2; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font: 800 30px var(--zag, sans-serif); color: #7a3e2e; }
.igra-domik-okna { display: flex; gap: 0; width: 160px; background: #fbf3e4; border: 2px solid #e3cfae; border-top: 0; }
.igra-domik-okno { flex: 1; height: 72px; display: flex; align-items: center; justify-content: center; font: 800 30px var(--zag, sans-serif); color: var(--i-akc-t); }
.igra-domik-okno + .igra-domik-okno { border-left: 2px solid #e3cfae; }
.igra-domik-okno.dyrka { color: var(--i-sery); background: #fff; }
.igra-domik-okno.otkryto { background: var(--i-ok-fon); color: var(--i-ok); }
.igra-znak { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
.igra-znak-storona { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; }
.igra-znak-kuchka { display: grid; grid-template-columns: repeat(3, 34px); gap: 4px; justify-content: center; min-height: 80px; align-content: center; }
.igra-znak-kuchka svg { width: 34px; height: 34px; }
.igra-znak-chislo { font: 800 26px var(--zag, sans-serif); color: var(--i-akc-t); }
.igra-znak-chislo.bolshoe { font-size: 52px; }
.igra-znak-okno { width: 64px; height: 64px; flex: 0 0 64px; border: 2px dashed var(--i-akc); border-radius: 14px; display: flex; align-items: center; justify-content: center; font: 700 40px Arial, sans-serif; color: var(--i-sery); }
.igra-otvety.znaki button { font: 700 34px/1 Arial, sans-serif; min-width: 72px; }
.igra-znak-okno.otkryto { border-style: solid; border-color: var(--i-ok); background: var(--i-ok-fon); color: var(--i-ok); }
.igra-uzor { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.igra-uzor-el { width: 46px; height: 46px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.igra-uzor-el svg { width: 44px; height: 44px; }
.igra-uzor-el.dyrka { border: 2px dashed var(--i-akc); color: var(--i-sery); font: 800 24px var(--zag, sans-serif); }
.igra-uzor-el.otkryto { background: var(--i-ok-fon); box-shadow: inset 0 0 0 2px var(--i-ok); }
.igra-otvety button.igra-uzor-knopka { padding: 4px; min-width: 72px; min-height: 72px; display: flex; align-items: center; justify-content: center; }
.igra-uzor-knopka svg { width: 56px; height: 56px; }
.igra-geom { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.igra-geom-knopka { border: 2px solid var(--i-ramka); background: #fff; }
.igra-geom-knopka svg { width: 100%; max-width: 120px; height: auto; margin: 0 auto; }
.igra-storony { width: 100%; max-width: 360px; height: auto; display: block; }
.igra-lineyka { width: 100%; max-width: 520px; height: auto; display: block; }
.igra-primer-scena { flex-direction: column; gap: 14px; }
.igra-primer-kartinka { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.igra-primer-gruppa { display: grid; grid-template-columns: repeat(5, 34px); gap: 3px; padding: 6px; border-radius: 12px; background: var(--i-fon); }
.igra-primer-gruppa.dobavleno { background: #fdf0d9; }
.igra-primer-gruppa.shirokaya { grid-template-columns: repeat(5, 38px); }
.igra-primer-gruppa svg { width: 34px; height: 34px; display: block; }
.igra-primer-el { position: relative; display: block; }
.igra-primer-el.ubran svg { opacity: .35; }
.igra-primer-el.ubran::after { content: ''; position: absolute; left: 3px; right: 3px; top: 50%; height: 3px; background: #e45f5c; transform: rotate(-35deg); border-radius: 2px; }
.igra-primer { display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 38px var(--zag, sans-serif); color: var(--i-tyomn); flex-wrap: wrap; }
.igra-primer-znak { color: var(--i-akc-t); }
.igra-primer-okno { min-width: 60px; height: 60px; padding: 0 8px; border: 2px dashed var(--i-akc); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: var(--i-sery); }
.igra-primer-okno.otkryto { border-style: solid; border-color: var(--i-ok); background: var(--i-ok-fon); color: var(--i-ok); }
.igra-primer-dano { font-size: 26px; color: var(--i-sery); background: var(--i-svet); border-radius: 12px; padding: 4px 16px; }
.igra-zadacha { flex-direction: column; gap: 10px; align-items: stretch; }
.igra-zadacha-shag { font: 700 .95em var(--zag, sans-serif); color: var(--i-akc-t); text-align: center; }
.igra-zadacha .igra-otvety { margin-top: 0; }
.igra-zadacha .igra-primer:empty { display: none; }
.igra-palochki { width: 100%; max-width: 420px; height: auto; display: block; }
.igra-tablica-obertka { overflow-x: auto; max-width: 100%; }
.igra-tablica { border-collapse: collapse; font-size: 1em; }
.igra-tablica th, .igra-tablica td { border: 1px solid var(--i-ramka); padding: 8px 12px; text-align: center; }
.igra-tablica th { background: var(--i-svet); color: var(--i-akc-t); font-family: var(--zag, sans-serif); }
.igra-tablica td { font: 700 1.15em var(--zag, sans-serif); background: #fff; }
.igra-tablica td.najdeno { background: var(--i-ok-fon); color: var(--i-ok); box-shadow: inset 0 0 0 2px var(--i-ok); }
.igra-shagi-gotovo { margin: 0; padding-left: 24px; min-height: 0; color: var(--i-ok); font-weight: 600; }
.igra-shagi-gotovo:empty { display: none; }
.igra-otvety.tekst button:disabled { opacity: .55; cursor: default; }
.igra-moneta svg { width: 54px; height: 54px; display: block; }
@media (max-width: 520px) {
	.igra { padding: 14px; border-radius: 14px; }
	.igra-predmet svg { width: 42px; height: 42px; }
	.igra-etazh svg { width: 120px; height: 34px; }
	.igra-krysha { border-left-width: 70px; border-right-width: 70px; }
	.igra-ryad-s-nachalom:not(.vert) { flex-direction: column; }
	.igra-ryad-s-nachalom:not(.vert) .igra-ryad { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .igra * { transition: none !important; } }
.igra-krupno { font: 800 clamp(26px, 6vw, 40px)/1.25 var(--zag, sans-serif); color: var(--i-tyomn); text-align: center; letter-spacing: .02em; }
/* русский язык: буквы, схемы, корзины */
.igra-stolbik { flex-direction: column; gap: 10px; }
.igra-bukvy { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; align-items: center; }
.igra-bukvy .probel { width: 18px; }
.igra-bukvy .znak { font: 800 32px var(--zag, sans-serif); color: var(--i-sery); }
.igra-bukva {
	min-width: 50px; height: 60px; padding: 0 6px; border-radius: 12px; border: 2px solid var(--i-ramka); background: #fff;
	font: 800 32px/1 var(--zag, sans-serif); color: var(--i-tyomn); cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.igra-bukva:hover { border-color: var(--i-akc); }
.igra-bukva.verno { border-color: var(--i-ok); background: var(--i-ok-fon); color: var(--i-ok); }
.igra-bukva.neverno { border-color: var(--i-err); background: var(--i-err-fon); }
.igra-bukva:disabled { cursor: default; }
.igra-shema { display: inline-flex; gap: 4px; vertical-align: middle; }
.igra-shema i, .igra-legenda i { display: inline-block; width: 26px; height: 26px; border-radius: 5px; border: 2px solid #8fa1b3; }
.igra-legenda i { width: 16px; height: 16px; margin-right: 6px; vertical-align: -3px; }
.z-gl { background: #f2a39c; } .z-tv { background: #8fb8e0; } .z-my { background: #a9d79a; }
.igra-legenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: .88em; color: var(--i-sery); }
.igra-otvety button.igra-shema-knopka { padding: 8px 14px; }
.igra-okno { display: inline-block; min-width: .9em; padding: 0 .12em; margin: 0 .04em; border-bottom: 4px solid var(--i-akc); color: var(--i-akc-t); }
.igra-okno.zapolneno { color: var(--i-ok); border-color: var(--i-ok); }
.igra-korziny { align-items: flex-start; }
.igra-korzina { flex: 1 1 140px; display: flex; flex-direction: column; gap: 6px; max-width: 260px; }
.igra-korzina button { width: 100%; font-size: 1.05em; }
.igra-korzina ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.igra-korzina li { background: var(--i-ok-fon); border-radius: 8px; padding: 2px 9px; font-size: .92em; }
.igra-sobrano { min-height: 1.3em; }
@media (max-width: 480px) { .igra-bukva { min-width: 40px; height: 52px; font-size: 26px; } .igra-shema i { width: 20px; height: 20px; } }
.igra-schyot { font-size: .88em; color: var(--i-sery); text-align: center; min-height: 1.3em; }
.igra-sobrano-tekst { font-size: 1.05em; line-height: 1.6; text-align: left; width: 100%; min-height: 1.6em; }
.igra-shema.krupnaya i { width: 40px; height: 40px; border-radius: 7px; }
.igra-kartinka { width: 100%; max-width: 360px; height: auto; }
.igra-otvety button.igra-var-svg { padding: 6px 10px; line-height: 0; }
.igra-var-svg svg { width: 64px; height: 64px; }
.igra-krupno.dlinnyy { font-size: clamp(17px, 3.6vw, 22px); font-weight: 700; line-height: 1.45; letter-spacing: 0; }
.igra-okno.pusto { display: none; }