/* ═══════════════════════════════════════════════════════════
   ЛИЛА — НЕБО. Все стили в одном файле.
   Небо рисует sky.js. Здесь — цвета текста, стекла и всего остального.
   Две тональности: светлое небо (тёмный текст) и вечернее (светлый текст).
   Цвета меняются в самом начале — в двух блоках ниже.
   ═══════════════════════════════════════════════════════════ */
:root {
  --type-speed: 28ms;                 /* скорость печати (меняется в app.js) */
  --hand: 'Caveat', 'Segoe Print', cursive;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --gold-bright: #F5D98A;             /* золото знака — одинаковое везде */
  /* для рабочих страниц (кабинет, живая сессия) — они на вечернем небе */
  --gold: #C9A96A; --gold-light: #FFF1C9; --text: #EDE6D6; --text-dim: rgba(237, 230, 214, .72);
}
/* светлое небо */
body {
  --ink: #1E3250;                     /* обычный текст */
  --ink-dim: rgba(30, 50, 80, .66);   /* тихий текст */
  --voice: #22426C;                   /* голос проводника (рукописный) */
  --title: #172E50;                   /* заголовки */
  --accent: #A86F24;                  /* золото: номер клетки, подсветка */
  --accent-soft: rgba(168, 111, 36, .75);
  --halo-lo: rgba(255, 255, 255, .55);/* сияние вокруг букв */
  --halo-hi: rgba(255, 255, 255, .95);
  --glass-bg: rgba(255, 255, 255, .26);
  --glass-bd: rgba(255, 255, 255, .88);
  --glass-ink: #1C3A62;
  --glass-main: rgba(255, 238, 208, .44);
  --glass-glow: rgba(255, 255, 255, .75);
  --pane-bg: rgba(255, 255, 255, .34);
  --pane-bd: rgba(255, 255, 255, .72);
  --shade: rgba(40, 70, 110, .18);
  --line: rgba(30, 60, 100, .13);
  --snake: #2F8A76;
  --arrowc: #C08528;
  --chip-on: rgba(255, 255, 255, .62);
  --scrim: rgba(255, 255, 255, .0);
}
/* вечернее и ночное небо */
body[data-tone="dark"] {
  --ink: #EEF0F8;
  --ink-dim: rgba(238, 240, 248, .7);
  --voice: #FFE6AE;
  --title: #FFF3DA;
  --accent: #F5D98A;
  --accent-soft: rgba(245, 217, 138, .75);
  --halo-lo: rgba(255, 214, 140, .25);
  --halo-hi: rgba(255, 214, 140, .7);
  --glass-bg: rgba(20, 26, 66, .28);
  --glass-bd: rgba(255, 226, 160, .55);
  --glass-ink: #FFE6AE;
  --glass-main: rgba(233, 199, 123, .22);
  --glass-glow: rgba(245, 217, 138, .4);
  --pane-bg: rgba(14, 20, 52, .36);
  --pane-bd: rgba(255, 255, 255, .16);
  --shade: rgba(0, 0, 0, .35);
  --line: rgba(245, 217, 138, .12);
  --snake: #9EE0C6;
  --arrowc: #F5D98A;
  --chip-on: rgba(245, 217, 138, .28);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #A9CDEA; color: var(--ink); font-family: var(--font); -webkit-tap-highlight-color: transparent; }
body { --font: var(--hand); }
body.font-book { --font: var(--serif); }
body { overflow: hidden; transition: color 1.2s; }
button, input { font-family: inherit; }
a { color: var(--accent); }

/* ═══ Живое небо (рисует sky.js) ═══ */
.sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.sk-frame { position: absolute; inset: 0; transition: opacity 2.4s ease; }
.sk-sun { position: absolute; inset: 0; animation: skSun 4.8s ease-in-out infinite; }
@keyframes skSun { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }      /* солнце дышит в такт знаку */
.sk-stars { position: absolute; left: 0; top: 0; width: 100%; }
.sk-tw { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; box-shadow: 0 0 8px 1px #fff; animation: skTw 5s ease-in-out infinite; }
@keyframes skTw { 0%, 100% { opacity: .15; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.2); } }
.sk-rays { position: absolute; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.26) 0deg 2.5deg, rgba(255,255,255,0) 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 10%, transparent 34%); mask: radial-gradient(circle, #000 0, rgba(0,0,0,.55) 10%, transparent 34%);
  animation: skRays 200s linear infinite; }
@keyframes skRays { to { transform: translate(-50%, -50%) rotate(360deg); } }
.sk-clouds { position: absolute; inset: 0; }
.sk-clouds.rise { animation: skRise 6.5s cubic-bezier(.25,.1,.25,1) both; }
.sk-clouds.fall { animation: skFall 6.5s cubic-bezier(.25,.1,.25,1) both; }
@keyframes skRise { from { transform: translateY(-45%); } to { transform: translateY(6%); } }
@keyframes skFall { from { transform: translateY(45%); } to { transform: translateY(-6%); } }
.sk-cl { position: absolute; left: -30px; right: -30px; overflow: hidden; transform: translateX(calc(var(--tx, 0px) * var(--d, 1))); transition: transform 1.4s ease-out; }
.sk-run { position: absolute; left: 0; top: 0; height: 100%; display: flex; animation: skRun 200s linear infinite; will-change: transform; }
.sk-run canvas { display: block; flex: none; }
@keyframes skRun { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--tw))); } }
.sk-water { position: absolute; left: 0; right: 0; bottom: 0; overflow: hidden; }
.sk-water::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(110,125,175,.22)); }
.sk-flip { position: absolute; left: 0; right: 0; top: 0; transform: scaleY(-1); opacity: .7; }
.sk-haze { position: absolute; left: 0; right: 0; top: 0; height: 100%; z-index: 1; }
.sk-glint { position: absolute; z-index: 2; width: 46%; height: 10px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255,255,255,.45), rgba(255,255,255,0) 70%); filter: blur(2px); opacity: 0; animation: skGlint 14s ease-in-out infinite; }
@keyframes skGlint { 0%, 100% { opacity: 0; transform: translateX(-14px) scaleX(.8); } 45% { opacity: .9; } 55% { opacity: .7; transform: translateX(16px) scaleX(1.1); } }
.sk-meteor { position: absolute; width: 120px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255,255,255,0), #fff); transform: rotate(28deg) translateX(0); opacity: 0; animation: skMeteor 16s linear infinite; }
@keyframes skMeteor { 0%, 92% { opacity: 0; transform: rotate(28deg) translateX(0); } 93% { opacity: 1; } 97% { opacity: 0; transform: rotate(28deg) translateX(260px); } 100% { opacity: 0; } }
.sk-mote { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 10px 2px rgba(255,240,200,.9); animation: skMote 9s linear infinite; opacity: 0; }
@keyframes skMote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(24px, -100vh); opacity: 0; } }
.sk-flock { position: absolute; left: -170px; width: 170px; height: 60px; color: rgba(28, 44, 70, .5); animation: skFly 28s linear forwards; }
.sk-flock.back { left: auto; right: -170px; animation-name: skFlyB; }
@keyframes skFly { to { transform: translate(calc(100vw + 340px), -50px); } }
@keyframes skFlyB { to { transform: translate(calc(-100vw - 340px), -40px); } }
.sk-bird { position: absolute; width: 22px; height: 10px; }
.sk-bird svg { width: 100%; height: 100%; display: block; animation: skFlap .8s ease-in-out infinite; }
@keyframes skFlap { 50% { transform: scaleY(-.45); } }
.sky.still *, .sky.still { animation: none !important; }

/* ─── Символ: три твоих слоя ─── */
.sym { position: relative; flex-shrink: 0; }
.sym img { position: absolute; inset: 0; width: 100%; height: 100%; }
.sym .ro { animation: pro 4.8s ease-in-out infinite; }
.sym .ri { animation: pri 4.8s ease-in-out infinite; }
.sym .dt { animation: pdt 4.8s ease-in-out infinite; }
@keyframes pro { 0%, 100% { transform: scale(1); filter: drop-shadow(0 2px 6px rgba(120,90,40,.25)); } 50% { transform: scale(1.04); filter: drop-shadow(0 0 24px rgba(255,236,190,.9)); } }
@keyframes pri { 0%, 100% { transform: scale(1); } 50% { transform: scale(.93); } }
@keyframes pdt { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(255,230,160,.5)); } 50% { transform: scale(1.35); filter: drop-shadow(0 0 16px rgba(255,236,180,1)); } }
.thinking .sym .dt { animation-duration: 1.2s; }
.thinking .sym .ro, .thinking .sym .ri { animation-duration: 1.6s; }

/* ─── Каркас страницы ─── */
.app { position: relative; z-index: 2; height: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; padding: max(22px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.top .grow { flex-grow: 1; }
.cellhead { display: flex; align-items: center; gap: 12px; }
.cellnum { font-family: var(--font); font-size: 52px; line-height: .9; color: var(--accent); text-shadow: 0 0 18px var(--halo-hi); }
.cellname { font-family: var(--font); font-size: 24px; color: var(--title); text-shadow: 0 0 12px var(--halo-lo); }
.cellsub { font-size: 19px; color: var(--accent); text-shadow: 0 0 10px var(--halo-lo); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
.chip { font-size: 17px; padding: 2px 10px; border-radius: 14px; border: 1px solid var(--pane-bd); color: var(--ink-dim); background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: all .6s; }
.chip.on { background: var(--chip-on); border-color: var(--glass-bd); color: var(--title); box-shadow: 0 0 16px var(--glass-glow); }
.chip.done { color: var(--accent); }

.stage { flex-grow: 1; overflow-y: auto; padding: 18px 2px 12px; scrollbar-width: none; display: flex; flex-direction: column; gap: 16px; }
.stage::-webkit-scrollbar { display: none; }
.foot { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }

/* ─── Голос проводника: печатается и дышит ─── */
.sattva { font-size: 30px; line-height: 1.18; color: var(--voice); white-space: pre-line; animation: glow 5s ease-in-out infinite, float 7s ease-in-out infinite; cursor: pointer; }
.sattva.small { font-size: 26px; }
@keyframes glow { 0%, 100% { text-shadow: 0 0 8px var(--halo-lo), 0 0 2px var(--halo-lo); } 50% { text-shadow: 0 0 20px var(--halo-hi), 0 0 3px var(--halo-hi); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.caret { display: inline-block; width: 2px; height: .9em; margin-left: 2px; background: var(--accent); vertical-align: -.1em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ─── Тексты клетки ─── */
.sectitle { font-family: var(--font); font-size: 30px; color: var(--title); text-shadow: 0 0 16px var(--halo-hi); margin: 6px 0 0; }
.body { font-size: 24px; line-height: 1.32; color: var(--ink); white-space: pre-line; text-shadow: 0 0 10px var(--halo-lo), 0 0 2px var(--halo-lo); animation: float 10s ease-in-out infinite; }
.appear { animation: appear 1.2s ease both; }
@keyframes appear { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ─── Жидкое стекло ─── */
.glass { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid var(--glass-bd); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(0,0,0,.08), 0 10px 28px var(--shade); color: var(--glass-ink); transition: transform .3s, box-shadow .3s, background .3s; cursor: pointer; }
.glass:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 26px var(--glass-glow), 0 12px 32px var(--shade); }
.glass:active { transform: scale(.98); }
.btn { min-height: 56px; padding: 8px 22px; border-radius: 28px; font-size: 26px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.btn.main { background: var(--glass-main); font-weight: 600; }
.btn.soft { font-size: 23px; min-height: 50px; }
.pane { background: var(--pane-bg); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid var(--pane-bd); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 20px var(--shade); }

/* ─── Поле ввода ─── */
.inputbar { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 20px; border-radius: 30px; }
.inputbar input { flex-grow: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font-size: 24px; padding: 6px 0; }
.inputbar input::placeholder { color: var(--ink-dim); }
.send { width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; }

/* ─── Ключи ─── */
.key { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 16px; border-radius: 20px; width: 100%; cursor: pointer; color: var(--ink); transition: all .35s; }
.key .old { font-size: 19px; color: var(--ink-dim); text-decoration: line-through; text-decoration-color: var(--ink-dim); }
.key .new { font-size: 23px; line-height: 1.2; color: var(--voice); }
.key:hover { border-color: var(--glass-bd); box-shadow: 0 0 22px var(--glass-glow); transform: scale(1.01); }

/* ─── Утверждение ─── */
.svetbox { position: relative; display: flex; align-items: center; justify-content: center; min-height: 330px; }
.svetbox .sym { position: absolute; width: 320px; height: 315px; opacity: .6; }
.svetbox .sym .ro { animation: breathO 8s ease-in-out infinite; }
.svetbox .sym .ri { animation: breathI 8s ease-in-out infinite; }
.svetbox .sym .dt { animation: breathD 8s ease-in-out infinite; }
@keyframes breathO { 0%, 100% { transform: scale(.86); } 50% { transform: scale(1.06); } }
@keyframes breathI { 0%, 100% { transform: scale(1.04); } 50% { transform: scale(.88); } }
@keyframes breathD { 0%, 100% { transform: scale(.8); } 50% { transform: scale(1.6); filter: drop-shadow(0 0 20px #F5D98A); } }
.big { position: relative; text-align: center; font-size: 38px; line-height: 1.12; color: var(--title); padding: 0 6px; animation: glowA 8s ease-in-out infinite, floatA 8s ease-in-out infinite; }
@keyframes glowA { 0%, 100% { text-shadow: 0 0 10px var(--halo-lo), 0 0 2px var(--halo-lo); } 50% { text-shadow: 0 0 30px var(--halo-hi), 0 0 4px var(--halo-hi); } }
@keyframes floatA { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-6px); } }
.breath { display: flex; justify-content: center; gap: 28px; font-size: 24px; color: var(--accent); }
.breath span { animation: cue 8s ease-in-out infinite; }
.breath span + span { animation-delay: -4s; }
@keyframes cue { 0%, 45% { opacity: 1; } 50%, 95% { opacity: .3; } 100% { opacity: 1; } }

/* ─── Карточки ─── */
.card { padding: 12px 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 2px; }
.card .lbl { font-size: 18px; color: var(--ink-dim); }
.card .txt { font-size: 24px; line-height: 1.2; color: var(--voice); white-space: pre-line; }

/* ─── Стрела / змея ─── */
.trans-title { text-align: center; font-family: var(--font); font-size: 44px; color: var(--title); text-shadow: 0 0 26px var(--halo-hi); margin: 10px 0 0; }
.trans-move { text-align: center; font-family: var(--font); font-size: 26px; color: var(--accent); text-shadow: 0 0 12px var(--halo-hi); }

/* ─── Вход ─── */
.hero { flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--font); font-weight: 400; font-size: 54px; letter-spacing: .14em; color: var(--title); text-shadow: 0 0 24px var(--halo-hi); }
.row { display: flex; gap: 12px; }
.row .grow { flex-grow: 1; }

/* ─── проводник думает ─── */
.dots { display: flex; gap: 7px; align-items: center; font-size: 22px; color: var(--ink-dim); }
.dots i { width: 7px; height: 7px; border-radius: 4px; background: var(--accent); animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }

/* ─── Окно (Манифест) ─── */
.modal { position: fixed; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; padding: 22px; background: rgba(40, 70, 120, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.modal.open { display: flex; }
.modal .inner { max-width: 480px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 26px 24px; border-radius: 26px; display: flex; flex-direction: column; gap: 16px; }
.small-link { background: none; border: 0; color: var(--ink-dim); font-size: 21px; cursor: pointer; padding: 8px 0; }
.hidden { display: none !important; }

/* ═══ Манифест: светлое облачное стекло ═══ */
.modal .inner.light { position: relative; overflow-y: auto; border: 1px solid rgba(255,255,255,.9); padding: 0; gap: 0; background: rgba(250, 252, 255, .66); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: 0 20px 60px rgba(40,70,110,.25); }
.light { --ink: #1E3250; --ink-dim: rgba(30,50,80,.66); --glass-bg: rgba(255,255,255,.4); --glass-bd: rgba(255,255,255,.95); --glass-ink: #1C3A62; }
.light .content { position: relative; padding: 30px 22px 10px; display: flex; flex-direction: column; gap: 18px; color: #1E3250; }
.mf-title { text-align: center; font-family: var(--serif); font-size: 40px; letter-spacing: .12em; color: #172E50; margin: 0; }
.mf-sub { text-align: center; font-size: 22px; color: #A86F24; margin-top: -8px; }
.mf-part { padding: 16px 18px; border-radius: 22px; background: rgba(255,255,255,.58); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(255,255,255,.95); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 6px 18px rgba(40,70,110,.10); }
.mf-part h2 { margin: 0 0 6px; font-family: var(--font); font-weight: 500; font-size: 26px; color: #172E50; display: flex; gap: 10px; align-items: center; }
.mf-part h2 .ico { font-size: 24px; }
.mf-part p { margin: 6px 0; font-size: 22px; line-height: 1.3; }
.mf-part ul { margin: 6px 0; padding-left: 0; list-style: none; }
.mf-part li { font-size: 21px; line-height: 1.3; margin: 4px 0; padding-left: 26px; position: relative; }
.mf-part li::before { content: "✦"; position: absolute; left: 4px; color: #C08528; font-size: 15px; top: 4px; }
.mf-quote { text-align: center; font-size: 27px; line-height: 1.2; color: #22426C; font-weight: 600; padding: 6px 10px; }
.mf-sign { text-align: center; font-family: var(--font); font-size: 23px; font-weight: 600; color: #172E50; }
.mf-close { position: sticky; bottom: 0; padding: 12px 24px 18px; background: linear-gradient(rgba(250,252,255,0), rgba(250,252,255,.92) 40%); }

/* ═══ Кнопка звука ═══ */
.sound { position: fixed; z-index: 5; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 48px; height: 48px; border-radius: 24px; display: flex; align-items: center; justify-content: center; padding: 0; }
.sound .on { display: none; } .sound.active .on { display: block; } .sound.active .off { display: none; }
.sound.active { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px var(--glass-glow); }
.sound.speaking .on { animation: pulseS 1.6s ease-in-out infinite; }
@keyframes pulseS { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.top { padding-right: 60px; gap: 8px; }

/* ═══ Тихие кнопки в игре: проводник и поддержка ═══ */
.mini-ic { width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .8; text-decoration: none; }
.mini-ic:hover { opacity: 1; }
.hero-wrap .small-link { white-space: nowrap; }

/* ═══ Вход в три шага: символ → имя → приветствие ═══ */
.st { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.st.hidden { display: none !important; }
.tap { background: none; border: 0; padding: 0; cursor: pointer; animation: tapBreath 4.8s ease-in-out infinite; }
@keyframes tapBreath { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(255,240,200,.4)); } 50% { transform: scale(1.06); filter: drop-shadow(0 0 40px rgba(255,246,220,1)); } }
.hint { font-size: 22px; color: var(--ink-dim); letter-spacing: .3em; animation: hint 4.8s ease-in-out infinite; }
@keyframes hint { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.name { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 64px; letter-spacing: .22em; color: var(--title); display: flex; }
.name span { display: inline-block; opacity: 0; filter: blur(14px); transform: translateY(18px) scale(1.3); animation: letter 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
.name span:nth-child(2) { animation-delay: .18s; } .name span:nth-child(3) { animation-delay: .36s; } .name span:nth-child(4) { animation-delay: .54s; }
.name span:nth-child(5) { animation-delay: .72s; } .name span:nth-child(6) { animation-delay: .9s; }
@keyframes letter { 60% { opacity: 1; filter: blur(0); text-shadow: 0 0 46px #fff; } to { opacity: 1; filter: blur(0); transform: none; text-shadow: 0 0 22px var(--halo-hi); } }
.name-sub { font-size: 30px; color: var(--accent); opacity: 0; animation: appear 1.4s ease 1.1s forwards; text-shadow: 0 0 12px var(--halo-hi); }
.st3 { justify-content: space-between; padding: 70px 4px 10px; }
.st3 .hero { flex-grow: 1; justify-content: center; gap: 26px; }
.welcome-btns { display: flex; flex-direction: column; gap: 12px; width: 100%; opacity: 0; transition: opacity 1.2s ease; }
.welcome-btns.show { opacity: 1; }
.welcome-btns .small-link { align-self: center; font-size: 19px; }
/* переход между шагами — как пролёт сквозь облако */
.curtain { position: fixed; inset: 0; z-index: 8; background: radial-gradient(ellipse at 50% 50%, #FFFFFF 20%, #EEF4FB 60%, #DCE8F5); opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.curtain.on { opacity: 1; pointer-events: auto; }

/* ─── вход: Яндекс ID / VK ID / без регистрации ─── */
.login-box { display: flex; flex-direction: column; gap: 12px; }
.login-note { margin: 2px 6px 0; text-align: center; font-size: 19px; line-height: 1.25; color: var(--ink-dim); }
.links-row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.links-row:empty { display: none; }
.welcome-btns .privacy { font-size: 16px; opacity: .75; text-decoration: none; }
a.small-link { text-decoration: none; }
.welcome-msg { text-align: center; font-size: 20px; color: #B4472E; }

/* ─── шапка клетки не сжимается и не наезжает на разделы ─── */
.top, .chips { flex-shrink: 0; }
.top { align-items: flex-start; }
.cellsub { font-size: 16px; line-height: 1.1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cellname { line-height: 1.05; }
.chips { padding-right: 52px; }

/* ─── выбор: оба варианта яркие, «пропустить» — тихий ─── */
.btn.ghost { background: transparent; border-color: var(--pane-bd); color: var(--ink-dim); font-size: 21px; min-height: 44px; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ─── настройка текста: размер и шрифт ─── */
.aa { position: fixed; z-index: 5; top: calc(max(16px, env(safe-area-inset-top)) + 58px); right: 20px; width: 40px; height: 40px; border-radius: 20px; display: flex; align-items: center; justify-content: center; padding: 0; font-family: var(--serif); font-size: 19px; }
.aa-panel { position: fixed; z-index: 6; top: calc(max(16px, env(safe-area-inset-top)) + 106px); right: 16px; padding: 14px; border-radius: 22px; display: none; flex-direction: column; gap: 10px; width: 300px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.aa-panel.pane { background: rgba(255,255,255,.62); }
body[data-tone="dark"] .aa-panel.pane { background: rgba(14,20,52,.7); }
.aa-panel.open { display: flex; }
.aa-panel .lbl { font-size: 17px; color: var(--ink-dim); }
.aa-panel .row { display: flex; gap: 6px; }
.aa-panel .row button { flex: 1; min-height: 40px; border-radius: 16px; font-size: 16px; padding: 2px 4px; min-width: 0; }
.aa-panel .row button.on { background: var(--glass-main); box-shadow: 0 0 14px var(--glass-glow); }
.cellhead { min-width: 0; flex: 1 1 auto; }
.cellhead > div:last-child { min-width: 0; }
.cellname { overflow-wrap: normal; hyphens: auto; -webkit-hyphens: auto; }

/* ═══════════════════════════════════════════════════════════
   ПОЛЕ ЛИЛЫ, КУБИК, КРУГ ИГРОКОВ
   ═══════════════════════════════════════════════════════════ */
.lila-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 64px; letter-spacing: .3em; padding-left: .3em; color: var(--title); text-shadow: 0 0 30px var(--halo-hi); }

/* поле 9 × 8: клетка 1 внизу слева, ряды змейкой */
.board-wrap { position: relative; width: 100%; aspect-ratio: 9 / 8; margin-top: 8px; flex-shrink: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--pane-bd); background: var(--pane-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 26px var(--shade); }
.board-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(8, 1fr); }
.bc { position: relative; border: 0; margin: 0; padding: 0; background: transparent; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--ink-dim); font-family: var(--serif); font-size: clamp(10px, 2.6vw, 14px); cursor: pointer; }
.bc span { position: absolute; left: 4px; top: 2px; }
.bc.arrow { background: rgba(255,214,140,.22); color: var(--arrowc); }
.bc.snake { background: rgba(80,170,150,.13); color: var(--snake); }
.bc.exit { background: radial-gradient(circle, rgba(255,236,180,.85), rgba(255,226,150,.25) 75%); color: #8A5A14; box-shadow: inset 0 0 16px rgba(255,220,140,.8); }
.bc.here { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 18px rgba(255,214,140,.6); }
.board-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ln-snake { fill: none; stroke: var(--snake); stroke-opacity: .6; stroke-width: 7; stroke-linecap: round; }
.snake-head { fill: var(--snake); }
.ln-arrow { stroke: var(--arrowc); stroke-opacity: .85; stroke-width: 5; stroke-dasharray: 2 10; stroke-linecap: round; }
.ah-tip { fill: var(--arrowc); }
.tok { position: absolute; width: 5.2%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); transition: left .2s ease, top .2s ease; box-shadow: 0 0 12px currentColor, 0 2px 6px rgba(0,0,0,.35), inset 0 -2px 3px rgba(0,0,0,.25); pointer-events: none; z-index: 2; }
.tok.me { width: 6.6%; animation: tokPulse 1.6s ease-in-out infinite; z-index: 3; }
.tok.out { opacity: .45; }
@keyframes tokPulse { 0%, 100% { box-shadow: 0 0 8px rgba(255,241,201,.7), 0 2px 6px rgba(0,0,0,.35); } 50% { box-shadow: 0 0 22px rgba(255,241,201,1), 0 2px 6px rgba(0,0,0,.35); } }
.board-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin-top: 8px; font-size: 18px; color: var(--ink-dim); }
.board-legend span { display: inline-flex; align-items: center; gap: 6px; }
.board-legend span.me { color: var(--title); }
.board-legend i { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
#stage .board-wrap { margin-top: 0; }

/* кубик */
.scene { width: 96px; height: 96px; perspective: 520px; cursor: pointer; margin: 6px 0; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; border-radius: 18px; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14px; background: radial-gradient(circle at 30% 25%, #FFFDF6, #F1E3C2 70%, #D9BC80); box-shadow: inset 0 0 14px rgba(120,90,30,.35); border: 1px solid rgba(120,90,30,.3); }
.face i { display: block; }
.face i.p { width: 72%; height: 72%; margin: auto; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34507A, #142640); box-shadow: inset 0 1px 1px rgba(255,255,255,.3); }
.fc1 { transform: translateZ(48px); } .fc6 { transform: rotateY(180deg) translateZ(48px); }
.fc3 { transform: rotateY(90deg) translateZ(48px); } .fc4 { transform: rotateY(-90deg) translateZ(48px); }
.fc5 { transform: rotateX(90deg) translateZ(48px); } .fc2 { transform: rotateX(-90deg) translateZ(48px); }
.dice-main { align-self: center; width: 120px; height: 120px; filter: drop-shadow(0 16px 18px rgba(30,60,100,.25)); }
.dice-main .face { border-radius: 22px; padding: 18px; }
.dice-main .fc1 { transform: translateZ(60px); } .dice-main .fc6 { transform: rotateY(180deg) translateZ(60px); }
.dice-main .fc3 { transform: rotateY(90deg) translateZ(60px); } .dice-main .fc4 { transform: rotateY(-90deg) translateZ(60px); }
.dice-main .fc5 { transform: rotateX(90deg) translateZ(60px); } .dice-main .fc2 { transform: rotateX(-90deg) translateZ(60px); }
#stage .scene.dice-main { margin: 18px 0 22px; }
.scene.throw { animation: toss 1.35s cubic-bezier(.3,.6,.4,1); }
@keyframes toss { 0% { transform: translateY(0) scale(1); } 30% { transform: translateY(-46px) scale(1.12); } 60% { transform: translateY(0) scale(1); } 75% { transform: translateY(-10px); } 100% { transform: none; } }

/* Рефлексия: знак пульсирует с сердцем, под ним еле видно «нажми» */
.lila .stage > * { flex-shrink: 0; }
.lila .chips { margin-top: 8px; }
.reflect-sym { align-self: center; background: none; border: 0; padding: 4px 0 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.reflect-sym .sym { width: 96px; height: 94px; }
.reflect-sym .press { font-size: 15px; letter-spacing: .4em; color: var(--ink-dim); text-transform: uppercase; animation: hint 3.6s ease-in-out infinite; }
.note-sm { margin: 0 4px; font-size: 18px; color: var(--ink-dim); }

/* передай телефон, звук, выбор числа */
.pass-sym { align-self: center; width: 200px; height: 197px; margin: 30px 0 10px; }
.snd-panel { top: calc(max(16px, env(safe-area-inset-top)) + 58px); }
.snd-panel input[type=range] { width: 100%; accent-color: #C08528; height: 28px; }
.num-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.btn.num { min-height: 52px; padding: 0; font-family: var(--font); font-size: 28px; border-radius: 18px; }

/* ═══ Главная: три пути ═══ */
.st3 { justify-content: flex-start; gap: 16px; padding: 64px 2px 12px; align-items: stretch; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand span { font-family: var(--serif); font-size: 24px; letter-spacing: .26em; color: var(--title); text-shadow: 0 0 14px var(--halo-hi); }
.st3 .sattva { margin: 14px 0 0; min-height: 76px; text-align: left; }
.st3 .welcome-btns { flex-grow: 1; }
.paths { display: flex; flex-direction: column; gap: 12px; }
.path { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 14px 20px; border-radius: 26px; font-family: inherit; width: 100%; }
.path b { font-size: 28px; font-weight: 600; line-height: 1.1; }
.path span { font-size: 19px; line-height: 1.2; opacity: .85; }
.path.main { background: var(--glass-main); }
.live-link { margin-top: auto; text-align: center; font-size: 21px; text-decoration: none; color: var(--accent); text-shadow: 0 0 10px var(--halo-hi); padding: 6px 0 0; }
.st3 .links-row { margin-top: 2px; }
/* вход в выбранный путь */
.st4 { justify-content: space-between; padding: 54px 4px 10px; }
.st4 .hero { gap: 18px; }
.back-link { align-self: flex-start; font-size: 20px; padding: 4px 0; }
.path-title { margin: 0; font-family: var(--font); font-weight: 500; font-size: 40px; letter-spacing: .06em; color: var(--title); text-shadow: 0 0 20px var(--halo-hi); }
.path-text { margin: 0; font-size: 25px; line-height: 1.25; color: var(--voice); white-space: pre-line; text-shadow: 0 0 10px var(--halo-lo), 0 0 2px var(--halo-lo); animation: appear 1.2s ease both; }
#enterBtns { opacity: 1; }

/* ═══ Размер текста: увеличивается весь экран целиком, а не отдельные строки ═══ */
body.fs-1 #stage, body.fs-1 #foot, body.fs-1 .chips, body.fs-1 .st3 > *, body.fs-1 .st4 > *, body.fs-1 .page, body.fs-1 .modal .inner { zoom: 1.12; }
body.fs-2 #stage, body.fs-2 #foot, body.fs-2 .chips, body.fs-2 .st3 > *, body.fs-2 .st4 > *, body.fs-2 .page, body.fs-2 .modal .inner { zoom: 1.25; }
/* в книжном шрифте буквы крупнее — чуть плотнее строки */
body.font-book .sattva, body.font-book .body, body.font-book .path-text { line-height: 1.28; }
body.font-book .sattva { font-size: 27px; } body.font-book .body { font-size: 22px; }
/* касание: без синего квадрата и рамки */
button, a, .sym { -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }
.tap:focus-visible { outline: none; }
/* вход: ничего не наезжает друг на друга; если не помещается — экран прокручивается */
.st3, .st4 { overflow-y: auto; scrollbar-width: none; }
.st3::-webkit-scrollbar, .st4::-webkit-scrollbar { display: none; }
.st3 > *, .st4 > *, .st4 .hero > * { flex-shrink: 0; }
.st3 .sattva { font-size: 28px; }
.st4 .hero { flex-grow: 1; padding: 10px 0; }
/* текст клетки мягко уходит под шапку, а не наезжает на неё */
.stage { -webkit-mask-image: linear-gradient(transparent 0, #000 16px, #000 calc(100% - 10px), transparent); mask-image: linear-gradient(transparent 0, #000 16px, #000 calc(100% - 10px), transparent); }

/* ═══ Презентация «Что такое Лила» (show.js) ═══ */
.ls { position: relative; width: 100%; aspect-ratio: 4 / 5.4; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 34px rgba(40,70,110,.25); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.ls-bars { position: absolute; z-index: 3; left: 12px; right: 12px; top: 10px; display: flex; gap: 4px; }
.ls-bars i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); overflow: hidden; }
.ls-bars b { display: block; height: 100%; width: 0; background: #fff; }
.ls-sound { position: absolute; z-index: 3; right: 10px; top: 20px; width: 34px; height: 34px; border-radius: 17px; border: 1px solid rgba(255,255,255,.7); background: rgba(255,255,255,.22); color: #fff; font-size: 13px; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ls-stage { position: absolute; inset: 0; cursor: pointer; }
.ls-slide { position: absolute; inset: 0; display: flex; flex-direction: column; animation: lsIn .9s ease both; color: #1E3250; }
.ls-slide.dark { color: #FFF3DA; }
@keyframes lsIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.ls-art { position: relative; flex: 1 1 52%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ls-text { flex: 0 0 auto; padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 6px; }
.ls-text h3 { margin: 0; font-family: var(--font); font-weight: 600; font-size: 30px; line-height: 1.05; text-shadow: 0 0 14px rgba(255,255,255,.7); animation: lsUp .9s .15s ease both; }
.ls-slide.dark .ls-text h3 { text-shadow: 0 0 18px rgba(255,214,140,.5); color: #F5D98A; }
.ls-text p { margin: 0; font-size: 20px; line-height: 1.25; white-space: pre-line; text-shadow: 0 0 10px rgba(255,255,255,.6); animation: lsUp .9s .45s ease both; }
.ls-slide.dark .ls-text p { text-shadow: 0 1px 6px rgba(0,0,0,.4); }
body.font-book .ls-text p { font-size: 18px; }
@keyframes lsUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ls-cta { margin-top: 8px; animation: lsUp .9s 1.2s ease both; }
/* иллюстрации */
.ls-sym { width: 130px; height: 128px; }
.ls-orbit { position: absolute; width: 210px; height: 210px; animation: lsSpin 14s linear infinite; }
.ls-orbit i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #FFF6D8; box-shadow: 0 0 12px 3px rgba(255,236,190,.9); }
.ls-orbit i:nth-child(1) { left: 50%; top: 0; } .ls-orbit i:nth-child(2) { left: 6%; top: 70%; } .ls-orbit i:nth-child(3) { right: 6%; top: 70%; }
@keyframes lsSpin { to { transform: rotate(360deg); } }
.ls-stars { position: absolute; inset: 0; }
.ls-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff; animation: skTw 4s ease-in-out infinite; }
.ls-skt { position: relative; font-size: 86px; color: #F5D98A; text-shadow: 0 0 30px rgba(255,214,140,.6); animation: lsUp 1.4s ease both; font-family: 'Noto Sans Devanagari', serif; }
.ls-skt-sub { position: absolute; bottom: 14%; font-family: var(--serif); font-size: 20px; letter-spacing: .2em; color: rgba(255,243,218,.75); animation: lsUp 1.4s .6s ease both; }
.ls-board { display: grid; grid-template-columns: repeat(9, 1fr); width: 82%; aspect-ratio: 9 / 8; gap: 3px; }
.ls-board i { position: relative; border-radius: 4px; background: rgba(255,255,255,.35); border: 1px solid rgba(255,255,255,.7); opacity: 0; animation: lsCell .5s ease forwards; }
.ls-board i b { position: absolute; left: 2px; top: 0; font-size: 8px; font-family: var(--serif); font-weight: 400; color: #4A5E7A; }
.ls-board i.ex { background: radial-gradient(circle, #FFE7B0, rgba(255,226,150,.4)); box-shadow: 0 0 12px rgba(255,214,140,.9); }
@keyframes lsCell { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.ls-jumps { width: 86%; height: 86%; overflow: visible; }
.ls-jumps path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ls-arrow, .ls-arrowhead { stroke: #C08528; stroke-width: 7; stroke-dasharray: 220; stroke-dashoffset: 220; animation: lsDraw 1.6s .3s ease forwards; filter: drop-shadow(0 0 6px rgba(255,214,140,.8)); }
.ls-arrowhead { animation-delay: 1.6s; }
.ls-snake { stroke: #2F8A76; stroke-width: 8; stroke-dasharray: 260; stroke-dashoffset: 260; animation: lsDraw 2s 1.2s ease forwards; }
.ls-snakehead { fill: #2F8A76; opacity: 0; animation: lsFade .5s 1.2s ease forwards; }
.ls-jumps text { font-family: var(--font); font-size: 18px; fill: #1E3250; opacity: 0; animation: lsFade 1s 2.4s ease forwards; }
@keyframes lsDraw { to { stroke-dashoffset: 0; } }
@keyframes lsFade { to { opacity: 1; } }
.ls-bubble { padding: 18px 24px; border-radius: 26px 26px 26px 8px; background: rgba(255,255,255,.62); border: 1px solid #fff; box-shadow: 0 10px 26px rgba(40,70,110,.18); font-size: 26px; color: #22426C; animation: lsUp .8s ease both; }
.ls-type { display: inline-block; overflow: hidden; white-space: nowrap; border-right: 2px solid #A86F24; width: 0; animation: lsType 2.4s .6s steps(21) forwards, blink 1s steps(1) infinite; }
@keyframes lsType { to { width: 11.2em; } }
.ls-compass { position: absolute; right: 16%; top: 16%; font-size: 30px; color: #C08528; animation: lsSpin 8s linear infinite; }
.ls-die { width: 110px; height: 110px; border-radius: 22px; display: grid; grid-template: repeat(3, 1fr) / repeat(2, 1fr); padding: 16px 22px; gap: 6px 26px; background: radial-gradient(circle at 30% 25%, #FFFDF6, #F1E3C2 70%, #D9BC80); box-shadow: 0 18px 30px rgba(30,60,100,.3), inset 0 0 14px rgba(120,90,30,.3); animation: lsRoll 1.8s cubic-bezier(.2,.8,.3,1) both; }
.ls-die i { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34507A, #142640); opacity: 0; animation: lsFade .2s 1.6s forwards; }
@keyframes lsRoll { 0% { transform: translateY(-140px) rotate(-260deg) scale(.6); } 60% { transform: translateY(10px) rotate(20deg) scale(1.05); } 80% { transform: translateY(-8px) rotate(-6deg); } 100% { transform: none; } }
.ls-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 88%; }
.ls-chips span { padding: 6px 14px; border-radius: 18px; font-size: 20px; background: rgba(255,255,255,.55); border: 1px solid #fff; color: #1E3250; box-shadow: 0 0 16px rgba(255,255,255,.7); opacity: 0; animation: lsUp .7s ease forwards; }
.ls-keycard { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; width: 84%; border-radius: 22px; background: rgba(255,255,255,.55); border: 1px solid #fff; box-shadow: 0 10px 26px rgba(120,80,30,.18); }
.ls-keycard s { font-size: 20px; color: rgba(30,50,80,.55); animation: lsUp .8s .2s ease both; }
.ls-keycard b { font-weight: 400; font-size: 24px; color: #22426C; animation: lsGlow 2.6s 1.2s ease both; }
@keyframes lsGlow { 0% { opacity: 0; text-shadow: none; } 40% { opacity: 1; text-shadow: 0 0 22px rgba(255,214,140,1); } 100% { opacity: 1; text-shadow: 0 0 8px rgba(255,236,190,.6); } }
.ls-keyicon { position: absolute; right: 12%; top: 10%; font-size: 34px; animation: lsSwing 3s ease-in-out infinite; }
@keyframes lsSwing { 50% { transform: rotate(-16deg); } }
.ls-ripples { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; }
.ls-ripples i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); animation: lsRipple 3.6s ease-out infinite; opacity: 0; }
.ls-ripples i:nth-child(2) { animation-delay: 1.2s; } .ls-ripples i:nth-child(3) { animation-delay: 2.4s; }
@keyframes lsRipple { 0% { transform: scale(.35); opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }
.ls-paths { display: flex; flex-direction: column; gap: 10px; width: 88%; }
.ls-paths div { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 20px; background: rgba(255,255,255,.5); border: 1px solid #fff; box-shadow: 0 8px 20px rgba(40,70,110,.15); opacity: 0; animation: lsUp .8s ease forwards; }
.ls-paths b { font-size: 24px; color: #172E50; } .ls-paths span { font-size: 17px; line-height: 1.15; color: #2E4363; }
.a-paths .ls-art { flex-basis: 80%; }
.ls-gifts { display: flex; gap: 14px; }
.ls-gifts div { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 19px; color: #22426C; opacity: 0; animation: lsUp .8s ease forwards; }
.ls-gifts i { font-style: normal; width: 74px; height: 74px; border-radius: 37px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: rgba(255,255,255,.55); border: 1px solid #fff; box-shadow: 0 0 22px rgba(255,236,190,.9); color: #C08528; }
.a-go .ls-sym { width: 150px; height: 148px; }
.show-part { padding: 10px !important; }
.show-part h2 { padding: 4px 8px 8px; }
/* презентация масштабируется по своей ширине: на любом телефоне всё помещается */
.ls { container-type: inline-size; aspect-ratio: 3 / 4.6; }
.ls-art { flex: 1 1 auto; min-height: 0; }
.ls-text { padding: 3cqw 6cqw 6cqw; gap: 1.6cqw; }
.ls-text h3 { font-size: 8.4cqw; }
.ls-text p { font-size: 5.3cqw; line-height: 1.22; }
body.font-book .ls-text p { font-size: 4.8cqw; }
.ls-cta { min-height: 12cqw; font-size: 6.4cqw; }
.ls-sym { width: 38cqw; height: 37.4cqw; }
.ls-orbit { width: 62cqw; height: 62cqw; }
.ls-skt { font-size: 24cqw; }
.ls-skt-sub { font-size: 5cqw; bottom: 8%; }
.ls-board { width: auto; height: 86%; max-width: 86%; }
.ls-board i b { font-size: 2.2cqw; }
.ls-jumps text { font-size: 16px; }
.ls-bubble { font-size: 6cqw; padding: 4cqw 6cqw; max-width: 84%; }
.ls-type { animation: lsType 2.4s .6s steps(21) forwards, blink 1s steps(1) infinite; }
.ls-compass { font-size: 8cqw; right: 10%; top: 12%; }
.ls-die { width: 30cqw; height: 30cqw; padding: 4.5cqw 6cqw; gap: 1.6cqw 7cqw; border-radius: 6cqw; }
.ls-chips { gap: 2cqw; width: 90%; }
.ls-chips span { font-size: 5cqw; padding: 1.4cqw 3.8cqw; }
.ls-keycard { width: 86%; padding: 4cqw 5cqw; gap: 1.5cqw; }
.ls-keycard s { font-size: 5cqw; } .ls-keycard b { font-size: 6cqw; }
.ls-keyicon { font-size: 9cqw; top: 6%; right: 8%; }
.ls-ripples { width: 56cqw; height: 56cqw; }
.ls-ripples .ls-sym { width: 30cqw; height: 29.5cqw; }
.ls-paths { gap: 2.4cqw; width: 88%; }
.ls-paths div { padding: 2.6cqw 4.4cqw; border-radius: 5cqw; }
.ls-paths b { font-size: 6.2cqw; } .ls-paths span { font-size: 4.4cqw; }
.ls-gifts { gap: 4cqw; }
.ls-gifts div { font-size: 4.8cqw; gap: 1.6cqw; }
.ls-gifts i { width: 18cqw; height: 18cqw; border-radius: 9cqw; font-size: 8cqw; }
.a-go .ls-sym { width: 40cqw; height: 39.4cqw; }
.ls-bars { top: 2.6cqw; } .ls-sound { top: 5.4cqw; }
.ls-art { padding-top: 9cqw; box-sizing: border-box; }
@media (max-width: 480px) { .modal { padding: 10px; } .light .content { padding: 22px 12px 10px; } .show-part { margin: 0 -4px; } }
/* презентация на входе */
.st5 { justify-content: center; gap: 14px; padding: 58px 2px 14px; overflow-y: auto; scrollbar-width: none; }
.st5 > * { flex-shrink: 0; }
#introShow { width: min(100%, calc((100vh - 170px) * 3 / 4.6)); }
.skip-show { min-height: 46px; font-size: 21px; padding: 4px 26px; align-self: center; }
.st5 { padding-top: 112px; }
#introShow { width: min(100%, calc((100vh - 210px) * 3 / 4.6)); }
@media (min-height: 780px) { .st5 { padding-top: 70px; } #introShow { width: min(100%, calc((100vh - 170px) * 3 / 4.6)); } }