/* Ядро «Матч РПГ» под телефон. Вертикаль — как в записи MysteryMatch: сверху
   стороны боя, поле во всю ширину, снизу действия. Горизонталь и большой
   экран — те же блоки тремя колонками. Размер поля считает ekran.js по месту,
   которое осталось, — CSS только раскладывает блоки. */
:root {
  --fon: #08061a; --tekst: #f1ecff; --tusk: #a59fcf;
  --st: env(safe-area-inset-top, 0px); --sr: env(safe-area-inset-right, 0px);
  --sb: env(safe-area-inset-bottom, 0px); --sl: env(safe-area-inset-left, 0px);
  --lico: clamp(64px, 17vh, 160px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  color: var(--tekst); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
body {
  background:
    radial-gradient(110% 55% at 50% -5%, #34155f 0%, transparent 62%),
    radial-gradient(90% 45% at 50% 105%, #0b3346 0%, transparent 60%),
    var(--fon);
}
button, a { font: inherit; color: inherit; }

#igra {
  position: fixed; inset: 0; display: grid; gap: 8px;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  padding: calc(var(--st) + 8px) calc(var(--sr) + 8px) calc(var(--sb) + 8px) calc(var(--sl) + 8px);
}

/* ---------- верх: меню, герой, враг ---------- */
/* как в Puzzle Quest: слева герой, справа враг — одинаковыми карточками */
#verh { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.kruglaya {
  width: 44px; height: 44px; border-radius: 14px; border: 1px solid #ffffff22;
  background: #160f30cc; font-size: 20px; line-height: 1; cursor: pointer; align-self: start;
}
#geroy, #vrag {
  position: relative; display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 6px; border-radius: 16px; background: linear-gradient(180deg, #1a1236e6, #0f0b24e6);
  border: 1px solid #ffffff14; box-shadow: 0 8px 24px #0008;
}
/* карточки стоят столбиком: лицо сверху, имя и HP под ним во всю ширину —
   иначе на 375 точках имя врага обрезалось до «Ж…» */
#geroy, #vrag { flex-direction: column; align-items: stretch; text-align: center; }
#vrag .lico-ramka.bolshaya { margin: 0 auto; }
#geroy .lico-ramka { width: var(--lico); margin: 0 auto; border-color: #3dff8f55; }
/* приём врага и подписи заклинаний видны только там, где есть место (горизонталь) */
.priyom, .z-tekst { display: none; }
.lico-ramka {
  position: relative; flex: none; aspect-ratio: 1; overflow: hidden; border-radius: 16px;
  background: radial-gradient(circle at 50% 35%, #3a1d66, #0b0820 75%); border: 2px solid #ff3d6455;
}
.lico-ramka.bolshaya { width: var(--lico); }
.lico-ramka img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; display: block; }
#vrag_led {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s; pointer-events: none;
  background: linear-gradient(160deg, #bff3ffaa, #3fb8ff55 50%, #c8f7ff99); mix-blend-mode: screen;
}
#vrag.skovan #vrag_led { opacity: 1; }
.info { min-width: 0; flex: 1; display: grid; gap: 5px; }
.info b { font-size: clamp(11px, 3.3vw, 15px); letter-spacing: .1em; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.polosa { position: relative; height: 16px; border-radius: 9px; background: #00000080; border: 1px solid #ffffff1c; overflow: hidden; }
.polosa i, .polosa u { position: absolute; inset: 0 auto 0 0; width: 100%; }
.polosa u { background: #ffffffaa; transition: width .7s .28s ease-out; }
.polosa i { background: linear-gradient(90deg, #17c56a, #8dffbf); transition: width .38s cubic-bezier(.2, .8, .2, 1); }
.hp-vrag i { background: linear-gradient(90deg, #ff2453, #ff9a62); }
/* уровень-цель без врага: полоса — набрано воды, кружок — ходы */
#vrag.cel .hp-vrag i { background: linear-gradient(90deg, #2d7dff, #9fd8ff); }
#vrag.cel .lico-ramka { border-color: #3aa0ff88; }
#vrag.cel #udar { border-color: #3aa0ff; background: #0b2a3a; box-shadow: 0 0 14px #3aa0ff66; }
#vrag.cel .priyom { border-color: #3aa0ff66; background: #0b2a3a; }
#vrag.cel .dlya-vraga, #vrag:not(.cel) .dlya-celi { display: none; }
.polosa span { position: relative; z-index: 1; display: block; font-size: 11px; font-weight: 800; line-height: 15px; text-align: center; text-shadow: 0 1px 2px #000; }
#udar {
  position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: #2a0b18; border: 2px solid #ff3d64; box-shadow: 0 0 14px #ff3d6466;
}
#udar span { position: absolute; top: 2px; font-size: 10px; opacity: .8; }
#udar b { font-size: 17px; font-weight: 900; margin-top: 6px; }
#udar.skoro { animation: skoro .7s ease-in-out infinite; background: #5a0c22; }
#vrag.skovan #udar { border-color: #6fdcff; background: #082a3a; box-shadow: 0 0 14px #6fdcff88; }
@keyframes skoro { 50% { transform: scale(1.15); box-shadow: 0 0 22px #ff3d64; } }

.bolno { animation: bolno .34s ease-out; }
@keyframes bolno {
  0% { transform: translate(0); filter: brightness(2.2) saturate(.4); }
  20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -2px); }
  60% { transform: translate(-3px, 1px); } 100% { transform: translate(0); filter: none; }
}
.ataka .lico-ramka { animation: ataka .42s cubic-bezier(.3, 1.6, .4, 1); }
@keyframes ataka { 40% { transform: scale(1.22) translateY(14px); box-shadow: 0 0 30px #ff3d64; } }
.pal { filter: grayscale(1) brightness(.6); transition: filter .6s; }
.razbit .lico-ramka img { animation: razbit .9s ease-in forwards; }
@keyframes razbit { 0% { filter: brightness(3); } 100% { filter: brightness(2) blur(6px); opacity: 0; transform: scale(1.3); } }
.lechitsya { animation: lechitsya .7s ease-out; }
@keyframes lechitsya { 0% { box-shadow: 0 0 0 0 #3dff8f; } 50% { box-shadow: 0 0 26px 4px #3dff8faa; } }

/* ---------- сцена-диорама: герой и враг дерутся сверху (yadro/scena.js) ---------- */
#scena { height: clamp(128px, 20vh, 200px); min-height: 0; }
#scena_holst { display: block; width: 100%; height: 100%; border-radius: 16px; }
/* в вертикали сцена заменяет большие портреты: под ней остаются имя и полоса здоровья */
#geroy .lico-ramka, #vrag .lico-ramka { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; padding: 0; border: 0; }
#vrag #udar { top: -6px; }

/* ---------- поле ---------- */
#arena { position: relative; min-height: 0; display: grid; place-items: center; }
#pole { display: block; touch-action: none; border-radius: 18px; }
#nadpisi { position: absolute; inset: 0; pointer-events: none; display: grid; place-items: center; overflow: visible; }
.slovo {
  position: absolute; white-space: nowrap; font: 900 clamp(30px, 10vw, 60px)/1 system-ui, sans-serif; letter-spacing: .03em;
  background: linear-gradient(#fffbe0, #ffc04a 55%, #ff5a36); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #4a1200) drop-shadow(0 0 16px #ff8a2a99);
  animation: slovo 1s cubic-bezier(.2, 1.4, .3, 1) forwards;
}
.kaskad-metka {
  position: absolute; top: 4%; font: 900 clamp(16px, 5vw, 26px)/1 system-ui, sans-serif; color: #fff;
  text-shadow: 0 0 12px #6ff0ff, 0 2px 0 #10324a; animation: metka .8s ease-out forwards;
}
@keyframes slovo {
  0% { transform: scale(.25) rotate(-8deg); opacity: 0; } 22% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  70% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.04) translateY(-24px); opacity: 0; }
}
@keyframes metka { 0% { transform: scale(.6); opacity: 0; } 20% { transform: scale(1.2); opacity: 1; } 100% { transform: translateY(-16px); opacity: 0; } }
.chislo {
  position: fixed; z-index: 40; pointer-events: none; font: 900 clamp(22px, 7vw, 38px)/1 system-ui, sans-serif;
  color: #fff; text-shadow: 0 0 10px currentColor, 0 2px 0 #000; animation: chislo 1s ease-out forwards; transform: translate(-50%, -50%);
}
.chislo.uron { color: #ffd7dd; text-shadow: 0 0 14px #ff2d55, 0 2px 0 #4a0010; }
.chislo.lech { color: #d8ffe9; text-shadow: 0 0 14px #2dff88, 0 2px 0 #003a1a; }
@keyframes chislo { 0% { opacity: 0; margin-top: 8px; } 15% { opacity: 1; margin-top: -6px; } 100% { opacity: 0; margin-top: -54px; } }

/* ---------- заклинания ---------- */
#niz { display: grid; gap: 6px; min-height: 0; }
#zakl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* на уровне-цели заклинаний нет: display: grid перебивал атрибут hidden — кадр показал полосу */
#zakl[hidden] { display: none; }
#sovet {
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .03em; color: #fff3c4;
  padding: 7px 10px; border-radius: 12px; background: #2a1d0acc; border: 1px solid #ffd56b55; animation: poyavlenie .3s ease-out;
}
#sovet[hidden] { display: none; }
/* арена с модификаторами (у ворот): строка над заклинаниями, холодная — синяя */
#arena_stroka {
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .03em; color: #d8f1ff;
  padding: 7px 10px; border-radius: 12px; background: #0b2a3acc; border: 1px solid #3aa0ff66; animation: poyavlenie .3s ease-out;
}
#arena_stroka[hidden] { display: none; }
#igra.arena-holod { background:
    radial-gradient(110% 55% at 50% -5%, #163a66 0%, transparent 62%),
    radial-gradient(90% 45% at 50% 105%, #0b3346 0%, transparent 60%), var(--fon); }
.z {
  --c: #fff; --fill: 0;
  position: relative; min-height: 82px; padding: 6px 2px 5px; border-radius: 16px; overflow: hidden; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); background: #120d29;
  display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; gap: 2px;
  transition: transform .12s;
}
.z .zhizha {
  position: absolute; inset: auto 0 0 0; height: calc(var(--fill) * 100%);
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 70%, transparent), color-mix(in srgb, var(--c) 18%, transparent));
  transition: height .35s ease-out;
}
.z img { position: relative; width: min(54px, 74%); aspect-ratio: 1; object-fit: contain; filter: grayscale(.55) brightness(.75); transition: filter .2s, transform .2s; }
.z small { position: relative; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-shadow: 0 1px 2px #000; white-space: nowrap; }
.z.gotovo { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 18px color-mix(in srgb, var(--c) 70%, transparent); animation: zhdyot 1.1s ease-in-out infinite; }
.z.gotovo img { filter: drop-shadow(0 0 8px var(--c)); transform: scale(1.08); }
.z.pulse { animation: pulse .26s ease-out; }
.z:active { transform: scale(.95); }
@keyframes zhdyot { 50% { transform: translateY(-3px); } }
@keyframes pulse { 40% { transform: scale(1.08); } }

/* ---------- слои поверх ---------- */
#effekty { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 30; }
#vspyshka { position: fixed; inset: 0; pointer-events: none; z-index: 31; opacity: 0; background: radial-gradient(circle at 50% 40%, transparent 30%, #ff1a3c88 100%); transition: opacity .35s ease-out; }
#vspyshka.na { opacity: 1; transition: none; }

#okno, #menyu {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(var(--st) + 16px) 16px calc(var(--sb) + 16px);
  background: #05031099; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#okno[hidden], #menyu[hidden] { display: none; }
#okno_karta, #menyu_karta {
  width: min(440px, 100%); max-height: 100%; overflow: auto; border-radius: 22px; padding: 18px 18px 16px;
  background: linear-gradient(180deg, #1d1440, #0d0a21); border: 1px solid #ffffff22; box-shadow: 0 20px 60px #000c;
  display: grid; gap: 12px; text-align: center; animation: poyavlenie .28s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes poyavlenie { from { transform: translateY(18px) scale(.96); opacity: 0; } }
/* кнопки окна видны всегда: текст прокручивается внутри, а не уносит их за край */
#okno_karta { grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; }
#okno_tekst { min-height: 0; overflow: auto; overscroll-behavior: contain; }
#okno_lico { height: clamp(90px, 26vh, 250px); width: 100%; object-fit: contain; filter: drop-shadow(0 12px 22px #000c); }
#okno_lico[hidden] { display: none; }
#okno_zag { margin: 0; font: 900 clamp(22px, 7vw, 30px)/1.05 system-ui, sans-serif; letter-spacing: .06em; }
#okno_tekst { display: grid; gap: 10px; text-align: left; font: 17px/1.45 Georgia, "Times New Roman", serif; color: #efe6d6; }
#okno_tekst p { margin: 0; }
#okno_tekst p.nashe { font: 600 13px/1.4 system-ui, sans-serif; color: var(--tusk); }
#okno_tekst .itog { text-align: center; font: 700 15px/1.4 system-ui, sans-serif; color: var(--tusk); }
#okno_knopki { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; }
.k, .m {
  min-height: 52px; border-radius: 14px; border: 0; cursor: pointer; font-weight: 900; font-size: 15px; letter-spacing: .08em;
  background: linear-gradient(180deg, #ffd56b, #f39a2b); color: #2a1300; box-shadow: 0 4px 0 #8a4a07, 0 10px 22px #0008;
  display: grid; place-items: center; text-decoration: none; padding: 0 12px;
}
.k.vtor, .m.tihaya { background: #ffffff10; color: var(--tekst); box-shadow: inset 0 0 0 1px #ffffff2a; }
.k:active, .m:active { transform: translateY(2px); }
#menyu_karta .m { width: 100%; }
.m.sprosil { background: linear-gradient(180deg, #ff6b7f, #c92446); color: #fff; box-shadow: 0 4px 0 #6a0a1e; }

/* ---------- карта мира: вертикальная тропа, как карта MysteryMatch ---------- */
#karta {
  position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: auto minmax(0, 1fr);
  padding: calc(var(--st) + 8px) calc(var(--sr) + 8px) calc(var(--sb) + 8px) calc(var(--sl) + 8px);
  background:
    radial-gradient(60% 35% at 30% 75%, #1d4a3a88, transparent 70%),
    radial-gradient(55% 30% at 75% 30%, #3b1f5e99, transparent 70%),
    radial-gradient(80% 50% at 50% 0%, #0f2346, transparent 70%),
    linear-gradient(180deg, #0a0c22, #0b1a1c 60%, #090812);
}
#karta[hidden] { display: none; }
#karta_verh { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
#cel {
  min-width: 0; padding: 6px 12px; border-radius: 14px; background: #1b1238e6; border: 1px solid #ffd56b55;
  display: grid; text-align: center; box-shadow: 0 8px 24px #0008;
}
#cel small { font-size: 10px; letter-spacing: .14em; color: #ffd56b; font-weight: 900; }
#cel b { font-size: clamp(13px, 3.8vw, 16px); line-height: 1.2; }
#sumka { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 14px; background: #160f30cc; border: 1px solid #ffffff22; display: grid; grid-auto-flow: column; align-items: center; gap: 4px; font-size: 18px; }
#sumka b { font-size: 14px; }
#karta_mesto { position: relative; min-height: 0; display: grid; place-items: center; }
#karta_pole { position: relative; height: 100%; width: min(100%, calc((100vh - 90px) * 0.66)); }
#karta_tropa { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#tropa_ten { fill: none; stroke: #00000080; stroke-width: 3.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-width: 16px; }
#tropa_put { fill: none; stroke: #d9c48a; stroke-width: 5px; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px #ffd56b88); }
.uzel {
  --r: clamp(52px, 9.5vh, 72px);
  position: absolute; transform: translate(-50%, -50%); width: calc(var(--r) + 40px); display: grid; justify-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--tekst); z-index: 2;
}
.uzel i {
  width: var(--r); height: var(--r); border-radius: 50%; display: grid; place-items: center; font-style: normal;
  font-size: calc(var(--r) * 0.46); background: radial-gradient(circle at 50% 35%, #33306a, #120f2b 75%);
  border: 3px solid #8c86c7; box-shadow: 0 10px 22px #000a, inset 0 0 18px #ffffff10; position: relative;
}
.uzel b { font-size: 11px; letter-spacing: .1em; font-weight: 900; padding: 3px 8px; border-radius: 9px; background: #0d0a21dd; border: 1px solid #ffffff22; white-space: nowrap; }
.uzel.zakryt { cursor: default; }
.uzel.zakryt i { filter: grayscale(1) brightness(.5); border-color: #3a3658; }
.uzel.zakryt i::after { content: '🔒'; position: absolute; right: -4px; bottom: -4px; font-size: 16px; }
.uzel.proyden i { border-color: #3dff8f; }
.uzel.proyden i::after { content: '✓'; position: absolute; right: -4px; top: -4px; width: 22px; height: 22px; border-radius: 50%; background: #17c56a; color: #032; font-size: 14px; font-weight: 900; display: grid; place-items: center; }
.uzel.sled i { border-color: #ffd56b; animation: sled 1.1s ease-in-out infinite; }
@keyframes sled { 50% { box-shadow: 0 0 0 8px #ffd56b33, 0 0 26px #ffd56b99; transform: scale(1.06); } }
#geroy_fishka {
  position: absolute; z-index: 3; width: clamp(40px, 7vh, 54px); aspect-ratio: 1; transform: translate(-50%, -110%);
  border-radius: 50%; overflow: hidden; border: 3px solid #3dff8f; background: #120f2b; box-shadow: 0 8px 18px #000c;
  pointer-events: none;
}
#geroy_fishka img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
#geroy_fishka.idyot { animation: shagi .32s ease-in-out infinite; }
@keyframes shagi { 50% { margin-top: -5px; } }
#zelye {
  justify-self: center; min-height: 44px; min-width: 64px; padding: 0 12px; border-radius: 12px; cursor: pointer;
  border: 1px solid #3dff8f88; background: linear-gradient(180deg, #1b4a32, #0e2a1d); color: #d8ffe9; font-size: 16px; font-weight: 900;
}
#zelye[hidden] { display: none; }
#okno_avatar { justify-self: center; width: clamp(90px, 18vh, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: clamp(48px, 10vh, 84px); background: radial-gradient(circle at 50% 35%, #3a2a5e, #120f2b 75%); border: 3px solid #ffd56b88; box-shadow: 0 12px 28px #000c; }
#okno_avatar[hidden] { display: none; }
#okno_karta .nagrada { text-align: center; font: 800 15px/1.3 system-ui, sans-serif; color: #ffd56b; }

/* ---------- горизонталь и большой экран: как в Puzzle Quest (PASS 41) ----------
   Слово Сергея 03.10: «только как в пазл-квесте — слева игрок, его магия, справа
   враг». Слева герой во весь рост и под ним его заклинания списком, в центре
   поле, справа враг во весь рост и его удар. */
@media (min-aspect-ratio: 5/4) {
  #igra { grid-template-columns: minmax(180px, 23%) minmax(0, 1fr) minmax(180px, 23%); grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; }
  #verh, #niz { display: contents; }
  #geroy { grid-column: 1; grid-row: 1; }
  #zakl { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(44px, 1fr); align-content: start; min-height: 0; gap: 6px; }
  #menyu_knopka { grid-column: 1; grid-row: 3; align-self: end; }
  #scena { grid-column: 2; grid-row: 1; align-self: start; height: min(24vh, 220px); }
  #arena { grid-column: 2; grid-row: 1 / -1; margin-top: calc(min(24vh, 220px) + 10px); }
  /* на большом экране портреты по бокам остаются во весь рост — сцена не вместо них, а над полем */
  #geroy .lico-ramka, #vrag .lico-ramka { position: relative; width: var(--lico); height: auto; overflow: hidden; opacity: 1; pointer-events: auto; border: 2px solid #ff3d6455; }
  #vrag { grid-column: 3; grid-row: 1; }
  #sovet { grid-column: 3; grid-row: 2; align-self: start; font-size: 12px; }
  #arena_stroka { grid-column: 3; grid-row: 2; align-self: start; font-size: 12px; }
  #geroy, #vrag { padding: 10px; gap: 8px; }
  #geroy .lico-ramka, #vrag .lico-ramka.bolshaya { width: min(100%, calc(38vh * 0.75)); aspect-ratio: 3 / 4; }
  .lico-ramka img { object-position: 50% 30%; }
  .info b { font-size: 15px; }
  .priyom {
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 12px;
    font-size: 12px; font-weight: 800; letter-spacing: .06em; background: #2a0b18; border: 1px solid #ff3d6466;
  }
  .priyom b { font-size: 15px; color: #ffb3c1; }
  /* заклинание строкой: иконка, имя и что делает, мана заливает слева направо */
  /* min-height: 0 — у вертикали плитка 82 точки, и в списке плитки налезали друг на друга */
  .z { min-height: 0; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-content: center; text-align: left; column-gap: 10px; padding: 6px 10px; max-height: 92px; }
  .z img { grid-row: 1 / 3; width: 44px; }
  .z .z-tekst { display: grid; gap: 1px; min-width: 0; position: relative; }
  .z .z-tekst b { font-size: 12px; letter-spacing: .05em; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .z .z-tekst em { font-size: 11px; font-style: normal; color: #d7d1f5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .z small { grid-column: 2; font-size: 12px; }
  .z .zhizha { inset: 0 auto 0 0; height: auto; width: calc(var(--fill) * 100%); transition: width .35s ease-out;
    background: linear-gradient(to right, color-mix(in srgb, var(--c) 55%, transparent), color-mix(in srgb, var(--c) 14%, transparent)); }
}
/* низкая горизонталь (телефон боком): портреты меньше, заклинания плитками 3×2; сцены нет — места мало */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  #scena { display: none; }
  #arena { margin-top: 0; }
  #igra { grid-template-columns: minmax(170px, 24%) minmax(0, 1fr) minmax(150px, 21%); gap: 8px; }
  #geroy, #vrag { padding: 6px; gap: 4px; }
  #geroy .lico-ramka, #vrag .lico-ramka.bolshaya { width: min(100%, calc(30vh * 0.75)); }
  #zakl { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 48px; align-content: start; }
  .z { min-height: 48px; max-height: 48px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; text-align: center; padding: 3px 2px; gap: 0; }
  .priyom .kazhdye { display: none; }
  .z img { grid-row: auto; width: auto; height: 100%; max-height: 28px; min-height: 0; }
  .z .z-tekst { display: none; }
  .z small { grid-column: auto; font-size: 10px; }
  .z .zhizha { inset: auto 0 0 0; width: auto; height: calc(var(--fill) * 100%); }
  .priyom { padding: 4px 6px; font-size: 10px; }
  .priyom b { font-size: 13px; }
  .info b { font-size: 12px; }
}
/* низкая горизонталь телефона: портрет слева, текст и кнопки справа */
@media (min-aspect-ratio: 5/4) and (max-height: 560px) {
  #okno_karta { width: min(760px, 100%); grid-template-columns: 30% minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 16px; text-align: left; }
  #okno_lico { grid-column: 1; grid-row: 1 / span 3; height: 100%; max-height: 100%; }
  #okno_zag, #okno_tekst, #okno_knopki { grid-column: 2; }
  #okno_zag { text-align: left; }
  #okno_tekst { font-size: 15px; }
  #okno_lico[hidden] + #okno_zag, #okno_lico[hidden] ~ #okno_tekst, #okno_lico[hidden] ~ #okno_knopki { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .z.gotovo, #udar.skoro { animation: none; }
}