/* game.css — оформление игры: тёмно-синий, золото, изумруд, бордо; орнамент «ҡуштырнаҡ» */
:root {
  --navy: #0b1640; --blue: #1d3a8a; --blueM: #2c55b4; --gold: #e8b43a; --goldL: #ffd977;
  --em: #1e8a5a; --red: #c0282d; --bordo: #7c1427; --white: #fbf6ea; --cream: #efe1bf;
  --sans: "Noto Sans", "Segoe UI", Arial, sans-serif;
  --serif: "Noto Serif", "Segoe UI", Georgia, serif;
  --orn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24' viewBox='0 0 40 24'%3E%3Cpath d='M20 24L20 11.9L20.5 9.8L20.4 7.6L19.8 5.6L18.7 3.9L17.2 2.5L15.5 1.6L13.7 1.2L11.9 1.2L10.3 1.7L8.8 2.6L7.7 3.8L6.9 5.1L6.6 6.6L6.6 8L6.9 9.4L7.6 10.5L8.5 11.4L9.6 12L10.7 12.3L11.8 12.3L12.8 12L13.6 11.5L14.3 10.8L14.6 10L14.8 9.2L14.8 8.5L14.5 7.8L14.1 7.3L13.7 7L13.2 6.8M20 11.9L19.5 9.8L19.6 7.6L20.2 5.6L21.3 3.9L22.8 2.5L24.5 1.6L26.3 1.2L28.1 1.2L29.7 1.7L31.2 2.6L32.3 3.8L33.1 5.1L33.4 6.6L33.4 8L33.1 9.4L32.4 10.5L31.5 11.4L30.4 12L29.3 12.3L28.2 12.3L27.2 12L26.4 11.5L25.7 10.8L25.4 10L25.2 9.2L25.2 8.5L25.5 7.8L25.9 7.3L26.3 7L26.8 6.8' fill='none' stroke='%23e8b43a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ornBig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='90' viewBox='0 0 100 90'%3E%3Cpath d='M50 81L50 42.5L51.6 35.7L51.2 28.8L49.2 22.5L45.8 17L41.2 12.7L35.8 9.8L30.1 8.4L24.3 8.6L19 10.1L14.4 12.9L10.8 16.6L8.4 20.9L7.2 25.6L7.3 30.2L8.4 34.4L10.6 38.1L13.5 40.9L16.8 42.8L20.4 43.7L23.9 43.6L27 42.7L29.7 41.1L31.7 38.9L33 36.5L33.5 34L33.3 31.6L32.6 29.5L31.4 27.9L29.9 26.8L28.3 26.2M50 42.5L48.4 35.7L48.8 28.8L50.8 22.5L54.2 17L58.8 12.7L64.2 9.8L69.9 8.4L75.7 8.6L81 10.1L85.6 12.9L89.2 16.6L91.6 20.9L92.8 25.6L92.7 30.2L91.6 34.4L89.4 38.1L86.5 40.9L83.2 42.8L79.6 43.7L76.1 43.6L73 42.7L70.3 41.1L68.3 38.9L67 36.5L66.5 34L66.7 31.6L67.4 29.5L68.6 27.9L70.1 26.8L71.7 26.2M44 81L50 87L56 81L50 75Z' fill='none' stroke='%23e8b43a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #05091c; color: var(--white);
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none; -webkit-text-size-adjust: 100%;
  font-family: var(--sans);
}
#app {
  position: fixed; inset: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: radial-gradient(ellipse at center, #13245a 0%, #05091c 75%);
}
.hidden { display: none !important; }

/* ---------- сцена ---------- */
.stage {
  position: absolute; overflow: hidden; background: #0b1640; font-size: 16px; line-height: 1.35;
  box-shadow: 0 0 0 1px rgba(232, 180, 58, .25), 0 0 60px rgba(0, 0, 0, .6);
}
.stage .cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.fade { position: absolute; inset: 0; background: #05091c; opacity: 0; visibility: hidden; pointer-events: none; z-index: 60; }
.fps { position: absolute; right: .4em; bottom: .3em; font: 700 .8em monospace; color: #9ff0ff; z-index: 70; pointer-events: none; }
.loading { position: absolute; inset: 0; z-index: 80; background: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; }
.loading .spin { width: 3em; height: 3em; border-radius: 50%; border: .3em solid rgba(232, 180, 58, .25); border-top-color: var(--gold); animation: spin 1s linear infinite; }
.loading .ltxt { font: 600 1.2em var(--serif); color: var(--goldL); }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; padding: .6em .9em; }
.hud-left { display: flex; align-items: center; gap: .7em; flex-wrap: wrap; }
.hearts { display: flex; gap: .1em; background: rgba(11, 22, 64, .55); padding: .05em .5em; border-radius: 1em; border: .08em solid rgba(232, 180, 58, .5); }
.heart { color: #ff4d5a; font-size: 1.6em; line-height: 1.2; text-shadow: 0 .06em 0 var(--bordo), 0 0 .3em rgba(255, 80, 90, .45); transition: color .2s; display: inline-block; }
.heart.off { color: rgba(255, 255, 255, .16); text-shadow: none; }
.heart.lost { animation: heartLost .5s ease; }
.heart.gain { animation: heartGain .6s ease; }
.hud-pill { display: flex; align-items: center; gap: .35em; background: rgba(11, 22, 64, .55); padding: .25em .7em; border-radius: 1em; border: .08em solid rgba(232, 180, 58, .5); font-weight: 600; }
.hud-pill .ico svg { width: 1.3em; height: 1.3em; display: block; }
.hud-pill .lbl { font-size: .85em; color: var(--cream); }
.hud-pill .num { font-size: 1.1em; color: #bff4ff; min-width: 2.2em; }
.hud-pill.pulse { animation: pulse .4s ease; }
.hud-feath .num { color: var(--goldL); }
.hud-chap { font: 600 1.02em var(--serif); color: var(--goldL); background: rgba(11, 22, 64, .55); padding: .25em 1.1em; border-radius: 1em; border: .08em solid rgba(232, 180, 58, .5); white-space: nowrap; }
.pbtn {
  pointer-events: auto; cursor: pointer; width: max(2.5em, 40px); height: max(2.5em, 40px); border-radius: 50%;
  border: .12em solid var(--gold); background: rgba(11, 22, 64, .7); color: var(--goldL); font-size: 1.05em;
  display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--sans);
}
.pbtn:hover { background: var(--bordo); }
/* сенсорные кнопки — не меньше 64px (спецификация), ⏸ тоже */
html.touch .pbtn { width: max(2.6em, 64px); height: max(2.6em, 64px); font-size: max(1.05em, 22px); }
.hud-prog { position: absolute; top: 3.3em; left: 50%; transform: translateX(-50%); width: 40%; text-align: center; }
.plbl { font: 600 .9em var(--serif); color: var(--cream); margin-bottom: .2em; text-shadow: 0 1px 2px #000; }
.pbar { position: relative; height: .7em; border-radius: .5em; background: rgba(11, 22, 64, .7); border: .1em solid var(--gold); }
.pfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: .5em; background: linear-gradient(90deg, #5fd0ff, #fff6c8); }
.pmark { position: absolute; top: 50%; width: 1.1em; height: 1.1em; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; border: .15em solid var(--gold); box-shadow: 0 0 .4em #fff; }
.pcp { position: absolute; left: 50%; top: -.35em; width: .3em; height: 1.4em; background: rgba(255, 255, 255, .5); border-radius: .2em; }
.pcp.on { background: var(--red); box-shadow: 0 0 .4em var(--goldL); }
/* по центру без transform: анимация fadeUp (transform: none) сдвигала полосу вправо */
.hud-boss { position: absolute; left: 27%; bottom: 1.1em; width: 46%; text-align: center; animation: fadeUp .5s ease both; }
.bname { font: 700 1.1em var(--serif); color: var(--goldL); text-shadow: 0 .08em 0 var(--bordo), 0 0 .5em #000; margin-bottom: .2em; }
.bbar { position: relative; height: .95em; border: .12em solid var(--gold); border-radius: .6em; background: rgba(10, 10, 30, .8); overflow: hidden; }
.bfill, .blag { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.blag { background: var(--goldL); transition: width .7s .25s ease; }
.bfill { background: linear-gradient(90deg, #8a1420, #e0303a 60%, #ff7a3a); transition: width .12s; }

/* ---------- подсказка ---------- */
.hint {
  position: absolute; top: 3.6em; left: 50%; z-index: 12; max-width: 70%; text-align: center; pointer-events: none;
  transform: translate(-50%, -160%); opacity: 0; transition: transform .35s cubic-bezier(.2, 1.4, .4, 1), opacity .3s;
  background: linear-gradient(180deg, rgba(124, 20, 39, .96), rgba(90, 12, 28, .96)); color: var(--white);
  border: .12em solid var(--gold); border-radius: .6em; padding: .55em 1.3em .5em; font-size: 1.12em; font-weight: 600;
  box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .45);
}
.hint::before { content: ''; position: absolute; left: 50%; top: -.75em; width: 2.6em; height: 1.4em; transform: translateX(-50%); background: var(--orn) center / contain no-repeat; }
.hint.on { transform: translate(-50%, 0); opacity: 1; }
.stage.fly .hint { top: 6.6em; }   /* орнамент подсказки не задевает полосу прогресса */
.stage.modal .hint { opacity: 0; }

/* ---------- экраны и панели ---------- */
.layer { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: auto; animation: scrIn .35s ease both; }
.scr.dim { background: rgba(5, 9, 28, .62); }
.panel {
  position: relative; max-width: 78%; max-height: 90%; overflow: auto; text-align: center;
  padding: 1.9em 2.2em 1.7em; border-radius: .8em; border: .14em solid var(--gold);
  background: linear-gradient(180deg, rgba(26, 50, 120, .97), rgba(10, 22, 64, .98));
  box-shadow: 0 0 0 .3em rgba(11, 22, 64, .92), 0 0 0 .42em rgba(232, 180, 58, .55), 0 1em 3em rgba(0, 0, 0, .55);
  animation: panelIn .4s cubic-bezier(.2, 1.3, .4, 1) both; scrollbar-width: thin;
}
.panel::before, .panel::after { content: ''; position: absolute; left: 1.2em; right: 1.2em; height: 1em; background: var(--orn) center / auto 100% repeat-x; opacity: .85; pointer-events: none; }
.panel::before { top: .35em; }
.panel::after { bottom: .35em; transform: scaleY(-1); }
.panel.wide { max-width: 88%; }
.ttl { margin: .1em 0 .5em; font: 700 1.9em/1.15 var(--serif); color: var(--goldL); text-shadow: 0 .06em 0 var(--bordo), 0 0 .5em rgba(255, 200, 80, .35); }
.txt { font-size: 1.15em; line-height: 1.5; margin: .2em auto .4em; max-width: 30em; }

/* кнопки */
.btns { display: flex; flex-direction: column; align-items: stretch; gap: .5em; margin-top: 1em; }
.btns.row { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.btn {
  position: relative; display: flex; align-items: center; justify-content: center; gap: .5em; min-height: 2.5em;
  font: 600 1.15em/1.2 var(--sans); color: var(--white); cursor: pointer; padding: .5em 1.3em;
  background: linear-gradient(180deg, #2c55b4, #1a3478); border: .1em solid var(--gold); border-radius: .55em;
  box-shadow: inset 0 .1em 0 rgba(255, 255, 255, .15), 0 .2em 0 rgba(0, 0, 0, .35);
  transition: transform .12s, background .12s, box-shadow .12s; outline: none;
}
.btn.sel { background: linear-gradient(180deg, #d63c3c, #7c1427); transform: scale(1.04); box-shadow: 0 0 .9em rgba(255, 217, 119, .55), inset 0 .1em 0 rgba(255, 255, 255, .2); }
.btn.small { font-size: 1em; padding: .38em 1em; min-height: 2.2em; }
.btn.dis { opacity: .45; filter: grayscale(.7); cursor: default; transform: none; box-shadow: none; }
.btn .bico svg { width: 1.2em; height: 1.2em; display: block; }
.btn .bnum { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--gold); color: var(--navy); font-weight: 700; font-size: .85em; }
.btn.right { background: linear-gradient(180deg, #2fa36a, #0f5a3a) !important; box-shadow: 0 0 1em rgba(120, 255, 170, .5); }
.btn.wrong { background: linear-gradient(180deg, #6a2a2a, #3a1010) !important; animation: shake .35s; }
.bsub { font-size: .72em; color: var(--goldL); opacity: .9; }
.bbest { display: flex; align-items: center; gap: .25em; font-size: .78em; color: #bff4ff; }
.bbest svg { width: 1em; height: 1em; display: block; }

/* меню */
.scr.menu { align-items: flex-start; padding-left: 4%; }
.menu-panel { max-width: 46%; background: linear-gradient(180deg, rgba(11, 22, 64, .82), rgba(11, 22, 64, .9)); }
.title-wrap { margin-bottom: .2em; }
.title-orn { width: 5em; height: 3.6em; margin: 0 auto .1em; background: var(--ornBig) center / contain no-repeat; filter: drop-shadow(0 0 .4em rgba(255, 200, 80, .5)); }
.title-main { margin: 0; font: 700 3.3em/1.05 var(--serif); color: var(--goldL); text-shadow: 0 .06em 0 var(--bordo), 0 0 .6em rgba(255, 200, 80, .45); }
.title-sub { font: 600 1.55em/1.2 var(--serif); color: var(--white); margin-top: .1em; }
.title-based { font-size: .92em; color: var(--cream); opacity: .85; margin-top: .4em; }
.scr.menu .btns { margin-top: .6em; gap: .4em; }
/* меню целиком помещается в экран: иначе «Сайтҡа ҡайтыу» уходила под прокрутку */
.menu-panel { max-height: 96%; }
.scr.menu .title-orn { height: 2.4em; }

/* главы */
.chapters .btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65em; }
.chapters .btn.chap { flex-direction: column; gap: .15em; min-height: 4.4em; padding: .5em .8em; }
.chapters .btn.chap .bsub { order: -1; }
.chapters .btn.back { grid-column: 1 / -1; justify-self: center; min-width: 10em; }
.chapters .btn.locked .bico { color: var(--goldL); }

/* как играть */
.cols { display: flex; gap: 1.2em; text-align: left; }
.col { flex: 1; background: rgba(255, 255, 255, .05); border: .08em solid rgba(232, 180, 58, .35); border-radius: .6em; padding: .6em .9em; opacity: .8; }
.col.on { opacity: 1; border-color: var(--gold); }
.col-ico { font-size: 1.8em; color: var(--goldL); text-align: center; }
.col ul, .tips { margin: .3em 0 0; padding-left: 1.2em; font-size: 1em; line-height: 1.45; }
.col li, .tips li { margin: .2em 0; }
.tips { text-align: left; margin-top: .8em; color: var(--cream); list-style: none; padding-left: 0; }
.tips li::before { content: '✦ '; color: var(--gold); }
/* «Нисек уйнарға» без прокрутки: плотнее списки, советы в две колонки */
.scr.howto .panel { max-height: 96%; padding-top: 1.5em; padding-bottom: 1.3em; }
.scr.howto .col ul, .scr.howto .tips { font-size: .92em; line-height: 1.35; }
.scr.howto .tips { columns: 2; column-gap: 1.6em; }
.scr.howto .tips li { break-inside: avoid; }

/* карточка главы */
.scr.card { cursor: pointer; }
.card-box { text-align: center; animation: cardIn .9s cubic-bezier(.2, 1.2, .4, 1) both; }
.card-num { font: 600 1.5em var(--serif); color: var(--goldL); letter-spacing: .14em; text-transform: uppercase; }
.card-name { font: 700 3.6em/1.1 var(--serif); color: var(--white); text-shadow: 0 .06em 0 var(--bordo), 0 0 .6em rgba(255, 200, 80, .45); margin: .15em 0; }
.card-orn { width: 9em; height: 2.6em; margin: .5em auto; background: var(--ornBig) center / contain no-repeat; }
.tap { font-size: 1em; color: var(--cream); animation: blink 1.6s ease-in-out infinite; }

/* загадки */
.rprog { font: 600 .95em var(--serif); color: var(--goldL); margin-bottom: .4em; }
.rq { display: flex; align-items: center; justify-content: center; gap: .6em; font-size: 1.35em; line-height: 1.45; max-width: 30em; margin: 0 auto; }
.rq-ico { flex: none; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--bordo); border: .1em solid var(--gold); color: var(--goldL); font: 700 1em/1.7em var(--serif); }
.fb { min-height: 1.6em; font-size: 1.15em; font-weight: 600; margin-top: .5em; }
.fb.ok { color: #8cf5b4; animation: pop .4s ease; }
.fb.bad { color: #ffa898; animation: shake .35s; }
.riddle .btn.opt, .choice .btn.opt { min-width: 11em; }

/* итоги */
.res-chap { font: 600 1.25em var(--serif); color: var(--white); margin-bottom: .6em; }
.res-rows { display: flex; flex-direction: column; gap: .4em; min-width: 18em; }
.res-row { display: flex; align-items: center; gap: .6em; background: rgba(255, 255, 255, .06); border-radius: .5em; padding: .4em .8em; font-size: 1.15em; animation: fadeUp .5s ease both; }
.res-row:nth-child(2) { animation-delay: .15s; } .res-row:nth-child(3) { animation-delay: .3s; }
.res-row .ico { width: 1.4em; } .res-row .ico svg { width: 1.3em; height: 1.3em; display: block; }
.res-row .lbl { flex: 1; text-align: left; color: var(--cream); }
.res-row .val { font-weight: 700; color: var(--goldL); }
.res-row.best .val { color: #bff4ff; }
.newbest { margin-top: .7em; font: 700 1.3em var(--serif); color: var(--goldL); animation: pop .6s .5s ease both, glow 1.5s 1s ease-in-out infinite; }

/* факт */
.fact .panel { max-width: 62%; background: linear-gradient(180deg, rgba(20, 90, 60, .96), rgba(8, 40, 30, .98)); }
.fact-orn { width: 6em; height: 2em; margin: -.2em auto .4em; background: var(--ornBig) center / contain no-repeat; }
.fact-txt { font-size: 1.35em; line-height: 1.55; margin: .2em 0 .3em; }

/* предмет и выбор */
.scr.item { justify-content: flex-end; padding-bottom: 6%; }
.scr.choice { justify-content: flex-end; padding-bottom: 5%; }

/* титры */
.scr.credits { gap: 1em; }
.cred-box { text-align: center; }
.cred-end { font: 700 4em/1 var(--serif); color: var(--goldL); text-shadow: 0 .06em 0 var(--bordo), 0 0 .7em rgba(255, 200, 80, .5); animation: cardIn 1.2s ease both; }
.cred-line { font-size: 1.2em; margin: .35em 0; color: var(--white); animation: fadeUp .8s ease both; }
.cred-line:nth-child(3) { animation-delay: .4s; } .cred-line:nth-child(4) { animation-delay: .8s; } .cred-line:nth-child(5) { animation-delay: 1.2s; }
.cred-line:nth-child(6) { animation-delay: 1.6s; } .cred-line:nth-child(7) { animation-delay: 2s; } .cred-line:nth-child(8) { animation-delay: 2.4s; }
.scr.credits > .btn { display: inline-flex; }
.scr.credits .btn { margin: 0 .3em; }

/* ---------- диалоги ---------- */
.dlg { position: absolute; inset: 0; z-index: 30; cursor: pointer; }
.dlg-box {
  position: absolute; left: 4%; right: 4%; bottom: 4%; min-height: 25%; display: flex; align-items: flex-start; gap: 1.2em;
  padding: 1.15em 1.5em 1.1em; border-radius: .8em; border: .14em solid var(--gold);
  background: linear-gradient(180deg, rgba(18, 36, 92, .95), rgba(8, 18, 52, .96));
  box-shadow: 0 0 0 .28em rgba(11, 22, 64, .85), 0 0 0 .38em rgba(232, 180, 58, .5), 0 1em 2.4em rgba(0, 0, 0, .55);
}
.dlg-box::before { content: ''; position: absolute; left: 1.2em; right: 1.2em; top: .3em; height: .85em; background: var(--orn) center / auto 100% repeat-x; opacity: .6; }
.dlg-box.pop { animation: dlgPop .25s ease; }
.dlg-port { flex: none; width: 7.4em; height: 7.4em; margin-top: -2.6em; border-radius: 50%; overflow: hidden; border: .2em solid var(--gold); box-shadow: 0 0 0 .22em var(--bordo), 0 .4em 1em rgba(0, 0, 0, .5); background: var(--navy); }
.dlg-port canvas { width: 100%; height: 100%; display: block; }
.dlg-body { flex: 1; min-width: 0; padding-top: .3em; }
.dlg-name { font: 700 1.25em var(--serif); color: var(--goldL); margin-bottom: .2em; }
.dlg-text { font-size: 1.32em; line-height: 1.5; }
.dlg-text .h { visibility: hidden; }
.dlg-box.narr { justify-content: center; }
.dlg-box.narr .dlg-text { font-style: italic; text-align: center; font-size: 1.36em; }
.dlg-more { position: absolute; right: 1em; bottom: .45em; color: var(--goldL); font-size: 1em; opacity: 0; }
.dlg-more.on { opacity: 1; animation: bob 1s ease-in-out infinite; }
.dlg-skip { position: absolute; top: 3.5%; right: 2.5%; z-index: 2; background: rgba(11, 22, 64, .75); }
html.touch .dlg-skip { min-height: 48px; min-width: 64px; }
/* диалог на уровне — окно вверху, под строкой HUD (сердца и счётчики видны), мир на земле открыт */
.dlg.top .dlg-box {
  top: calc(1.1em + max(2.5em, 40px)); bottom: auto; min-height: 0; align-items: center; gap: 1em;
  padding: .85em 1.4em .8em;
}
html.touch .dlg.top .dlg-box { top: calc(1.1em + max(2.6em, 64px)); }
.dlg.top .dlg-port { width: 5.6em; height: 5.6em; margin-top: 0; }
.dlg.top .dlg-body { padding-top: 0; }
.dlg.top .dlg-text { font-size: 1.24em; line-height: 1.45; }
.dlg.top .dlg-box.narr .dlg-text { font-size: 1.28em; }
.dlg.top .dlg-more { bottom: .3em; }

/* ---------- сенсорные кнопки ---------- */
/* только div-оверлей: у <html> на сенсорных устройствах тоже класс touch, и голый .touch скрывал всю страницу */
div.touch { position: fixed; inset: 0; pointer-events: none; z-index: 40; display: none; }
div.touch.show { display: block; }
.tbtn {
  position: absolute; display: none; align-items: center; justify-content: center; pointer-events: auto;
  width: 76px; height: 76px; border-radius: 50%; font-size: 30px; line-height: 1; color: rgba(255, 255, 255, .9);
  background: radial-gradient(circle at 40% 35%, rgba(60, 100, 200, .45), rgba(11, 22, 64, .45));
  border: 2px solid rgba(232, 180, 58, .7); box-shadow: 0 2px 10px rgba(0, 0, 0, .35); touch-action: none;
}
.tbtn.on { background: radial-gradient(circle, rgba(232, 180, 58, .7), rgba(124, 20, 39, .55)); transform: scale(.94); }
.touch.m-plat .tleft, .touch.m-plat .tright, .touch.m-plat .tatk, .touch.m-plat .bp { display: flex; }
.touch.m-fly .tleft, .touch.m-fly .tright, .touch.m-fly .tatk, .touch.m-fly .bf { display: flex; }
.tleft { left: calc(env(safe-area-inset-left) + 16px); bottom: calc(env(safe-area-inset-bottom) + 18px); }
.tright { left: calc(env(safe-area-inset-left) + 108px); bottom: calc(env(safe-area-inset-bottom) + 18px); }
.tjump { right: calc(env(safe-area-inset-right) + 18px); bottom: calc(env(safe-area-inset-bottom) + 18px); width: 88px; height: 88px; font-size: 34px; }
.tatk { right: calc(env(safe-area-inset-right) + 118px); bottom: calc(env(safe-area-inset-bottom) + 30px); }
.touch.m-fly .tleft { bottom: calc(env(safe-area-inset-bottom) + 70px); }
.touch.m-fly .tright { left: calc(env(safe-area-inset-left) + 140px); bottom: calc(env(safe-area-inset-bottom) + 70px); }
.tup { left: calc(env(safe-area-inset-left) + 78px); bottom: calc(env(safe-area-inset-bottom) + 132px); }
.tdown { left: calc(env(safe-area-inset-left) + 78px); bottom: calc(env(safe-area-inset-bottom) + 8px); }
.touch.m-fly .tatk { right: calc(env(safe-area-inset-right) + 24px); bottom: calc(env(safe-area-inset-bottom) + 36px); width: 92px; height: 92px; font-size: 36px; }
@media (max-height: 380px) {
  .tbtn { width: 66px; height: 66px; font-size: 26px; }
  .tjump { width: 76px; height: 76px; }
  .tright { left: calc(env(safe-area-inset-left) + 94px); }
  .tatk { right: calc(env(safe-area-inset-right) + 104px); }
  .touch.m-fly .tright { left: calc(env(safe-area-inset-left) + 124px); }
  .tup, .tdown { left: calc(env(safe-area-inset-left) + 70px); }
  .tup { bottom: calc(env(safe-area-inset-bottom) + 122px); }
}

/* ---------- поверните телефон ---------- */
.rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; background: radial-gradient(ellipse at center, #1d3a8a, #05091c); }
.rotate.on { display: flex; }
.rico { width: 96px; height: 96px; animation: rot 2.2s ease-in-out infinite; }
.rico svg { width: 100%; height: 100%; }
.rtxt { font: 600 20px/1.4 var(--serif); color: var(--goldL); max-width: 320px; }

/* ---------- анимации ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes panelIn { from { opacity: 0; transform: scale(.88) translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes cardIn { from { opacity: 0; transform: scale(.8); letter-spacing: .3em; } to { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(.6em); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(.25em); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes glow { 0%, 100% { text-shadow: 0 0 .3em rgba(255, 220, 120, .4); } 50% { text-shadow: 0 0 1em rgba(255, 220, 120, .9); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-.3em); } 75% { transform: translateX(.3em); } }
@keyframes pulse { 0% { transform: scale(1); } 40% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes heartLost { 0% { transform: scale(1.4); color: #fff; } 100% { transform: scale(1); } }
@keyframes heartGain { 0% { transform: scale(.4); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes dlgPop { from { transform: translateY(.3em); opacity: .7; } to { transform: none; opacity: 1; } }
@keyframes rot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce) {
  .scr, .panel, .card-box, .res-row, .cred-line, .cred-end { animation: none !important; }
}