/* leela.css — экран игры «Лила» в направлении «Полночный архив» (DESIGN.md).
 * Глубина делается тоном и волосяной рамкой 1 px: теней нет ни одной.
 * Золото — роль действия (кубик, отправка реплики), нигде больше.
 * Доска — экспонат: её собственный арт живёт в SVG и правится отдельно. */

.leela { max-width: var(--container); margin: 0 auto; padding: var(--space-4); }
.leela-body { min-height: 40vh; padding-bottom: 72px; }  /* место под фиксированную полоску-«пик» шторки */
.leela-err { color: var(--body); text-align: center; padding: var(--space-6); }

/* — экран ввода вопроса — */
.leela-intake { text-align: center; padding: var(--space-4) 0; }
.leela-intake h2 { color: var(--ink); font-family: var(--font-display); font-weight: 400; margin-bottom: var(--space-3); }
.leela-intake p { color: var(--body); margin-bottom: var(--space-5); line-height: 1.5; }
/* приветствие Ясны на intake: как её реплики в диалоге — слева, читаемо, дышит абзацами */
.leela-intake .intro { text-align: left; margin-bottom: var(--space-5); }
.leela-intake .intro .who { color: var(--body); font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: var(--fs-sm); display: block; margin-bottom: var(--space-2); }
.leela-intake .intro p { color: var(--ink); font-family: var(--font-voice); font-style: italic; font-size: var(--fs-base); line-height: 1.62; margin: 0 0 var(--space-3); }
.leela-intake .intro p:last-child { margin-bottom: 0; }
.leela-q {
    width: 100%; min-height: 90px; padding: var(--space-4);
    background: var(--case); color: var(--ink);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: var(--fs-base); resize: vertical; margin-bottom: var(--space-4);
}
.leela-q:focus { outline: none; border-color: var(--ink); }

/* — доска (векторный SVG на арт-подложке) — */
.leela-board {
    position: relative; aspect-ratio: 9 / 8; margin: var(--space-4) 0;
    border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--hair);
    background: var(--canvas) center/cover no-repeat;
    background-image: url('/assets/leela-board-bg.jpg?v=1');
    touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none;
}
.leela-board:active { cursor: grabbing; }
/* ровная тёмная вуаль поверх арта — приглушить его резьбу/декоративных змей, чтобы вектор читался */
.leela-board::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: rgba(0, 0, 0, 0.62);
}
.leela-svg { position: relative; display: block; width: 100%; height: 100%; }
/* декоративные слои не перехватывают тап — он проходит к клетке под ними */
.leela-svg .leela-arrows, .leela-svg .leela-snakes, .leela-svg .leela-token { pointer-events: none; }
/* след пройденного пути: клетки, где игрок уже стоял — видимая граница вместо волосяной */
.leela-svg .lc--visited rect { stroke: var(--border); }
.leela-svg .visited-dot { fill: var(--gold); opacity: 0.85; pointer-events: none; }

/* подсказка про зум (тап по клетке открывает поп-ап описания — .leela-cellinfo) */
.leela-zoomhint { text-align: center; color: var(--body); font-size: var(--fs-sm); line-height: 1.4; margin: -4px 0 var(--space-3); }

/* — поп-ап описания клетки (тап по клетке, модуль leela-cellinfo.js) — */
.leela-cellinfo { position: fixed; inset: 0; z-index: 1000; display: none; }
.leela-cellinfo.open { display: flex; align-items: center; justify-content: center; }
.leela-cellinfo__bg {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px);
    animation: modalFade 0.2s ease;
}
.leela-cellinfo__card {
    position: relative; z-index: 1;
    width: calc(100% - var(--space-6)); max-width: 420px; max-height: 76vh; overflow-y: auto;
    padding: var(--space-5);
    background: var(--case);
    border: 1px solid var(--hair); border-radius: var(--radius-sm);
    animation: modalPop 0.24s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.leela-cellinfo__close {
    position: absolute; top: var(--space-2); right: var(--space-2);
    width: 36px; height: 36px; border: none; background: none; cursor: pointer;
    color: var(--body); font-size: var(--fs-base); line-height: 36px; border-radius: var(--radius-pill);
}
.leela-cellinfo__kicker { color: var(--mark); font-size: var(--fs-xs); letter-spacing: 0.04em; }
.leela-cellinfo__name { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; line-height: 1.25; margin: 2px var(--space-5) var(--space-2) 0; }
/* поэтичный подзаголовок (essence) над развёрнутым описанием — голос Ясны */
.leela-cellinfo__sub { color: var(--body); font-family: var(--font-voice); font-size: var(--fs-sm); font-style: italic; line-height: 1.5; margin-bottom: var(--space-3); }
.leela-cellinfo__text { color: var(--ink); font-size: var(--fs-base); line-height: 1.62; }
.leela-cellinfo__line {
    margin-top: var(--space-3); font-size: var(--fs-base); line-height: 1.55;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
}
/* четыре вида пометок различаются текстом, а не краской: второго акцента в интерфейсе нет */
.leela-cellinfo__line--arrow { color: var(--body); background: transparent; border: 1px solid var(--hair); }
.leela-cellinfo__line--snake { color: var(--body); background: transparent; border: 1px solid var(--hair); }
.leela-cellinfo__line--chakra { color: var(--body); background: transparent; border: 1px solid var(--hair); }
.leela-cellinfo__line--goal { color: var(--body); background: transparent; border: 1px solid var(--hair); }

/* клетки */
.leela-svg .lc rect {
    fill: rgba(232, 192, 115, 0.045); stroke: var(--hair); stroke-width: 1;
}
.leela-svg .lc .num {
    fill: var(--gold); font-family: var(--font-body); font-size: 22px;
    font-weight: 600; opacity: 0.85;
}
/* имена клеток — скрыты на общем виде, проявляются при приближении (класс .zoomed) */
.leela-svg .lc .cname {
    fill: var(--gold); font-family: var(--font-body); font-size: 10px;
    font-weight: 500; opacity: 0; transition: opacity 0.18s ease; pointer-events: none;
}
.leela-svg.zoomed .lc .cname { opacity: 0.95; }
.leela-svg.zoomed .lc .num { opacity: 0.5; }
.leela-svg .lc--arrow rect { stroke: rgba(150, 210, 160, 0.55); }
.leela-svg .lc--snake rect { stroke: rgba(150, 130, 210, 0.55); }
.leela-svg .lc--chakra rect { fill: rgba(232, 192, 115, 0.09); }
.leela-svg .lc .med { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: 0.45; }
.leela-svg .lc--goal rect { fill: rgba(232, 192, 115, 0.22); stroke: var(--gold); stroke-width: 1; }
.leela-svg .lc .med--goal { stroke: var(--gold); stroke-width: 2; opacity: 0.9; }

/* стрелы (добродетели — вверх): тёплое золото */
.leela-svg .arw { stroke: rgba(240, 208, 130, 0.78); stroke-width: 3; stroke-linecap: round; }
.leela-svg .arw-head { fill: rgba(245, 214, 140, 0.9); }

/* змеи (пороки — вниз): холодный сине-фиолет */
.leela-svg .snk {
    fill: none; stroke: rgba(150, 128, 205, 0.72); stroke-width: 4;
    stroke-linecap: round; stroke-linejoin: round;
}
.leela-svg .snk-head { fill: rgba(176, 150, 224, 0.9); }

/* лотос-фишка */
.leela-svg .leela-lotus .pt { fill: var(--gold); stroke: rgba(120, 80, 20, 0.35); stroke-width: 0.6; }
.leela-svg .leela-lotus .disk { fill: var(--gold); }
.leela-svg .leela-lotus .fr .pt { fill: var(--gold); stroke: none; }
.leela-svg .leela-lotus .core { fill: var(--on-gold); }
.leela-svg .leela-lotus .glow { fill: rgba(232, 192, 115, 0.3); }
.leela-svg .leela-token { animation: tokenArrive 0.4s ease; transform-box: fill-box; }
.leela-svg .leela-token--arrow .glow { fill: rgba(150, 210, 160, 0.5); animation: glowRise 0.85s ease; }
.leela-svg .leela-token--snake .glow { fill: rgba(176, 150, 224, 0.55); animation: glowSoft 0.85s ease; }
@keyframes glowRise { 0% { opacity: 0.25; } 45% { opacity: 1; } 100% { opacity: 0.75; } }
@keyframes glowSoft { 0% { opacity: 0.15; } 100% { opacity: 0.6; } }

@keyframes tokenArrive {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .leela-die, .leela-die.rolling, .leela-die.land, .leela-die.is3d,
    .cube, .leela-die-shadow { animation: none !important; }
    .leela-modal__card, .leela-modal__bg { animation: none !important; }
    .leela-cellinfo__card, .leela-cellinfo__bg { animation: none !important; }
    .leela-svg .leela-token, .leela-svg .leela-token .glow, .leela-won { animation: none !important; }
    .leela-roll--invited { animation: none !important; }
    .leela-roll, .leela-ask input { transition: none !important; }
    .leela-sheet__panel, .leela-sheet__backdrop, .leela-sheet__peek { transition: none !important; }
    .leela-sheet__peek.has-new { animation: none !important; }
}

/* — карточка текущей клетки — */
.leela-field {
    text-align: center; padding: var(--space-4); margin-bottom: var(--space-4);
    background: var(--case); border: 1px solid var(--hair);
    border-radius: var(--radius-sm);
}
.leela-field .pos { color: var(--mark); font-size: var(--fs-sm); }
.leela-field .name { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; margin-top: 2px; }
.leela-field .trial { color: var(--body); font-size: var(--fs-sm); margin-top: var(--space-2); }

/* — лента диалога с Ясной (живёт внутри шторки, тянется на всю её высоту) — */
.leela-dialogue {
    flex: 1 1 auto; overflow-y: auto; padding: var(--space-4);
    -webkit-overflow-scrolling: touch;
}
.leela-msg { margin-bottom: var(--space-3); line-height: 1.65; font-size: var(--fs-base); }
/* Ясна говорит курсивом — интерфейс прямым (DESIGN.md §1) */
.leela-msg.yasna { color: var(--ink); font-family: var(--font-voice); font-style: italic; }
.leela-msg.yasna p { margin: 0.5em 0; }
.leela-msg.yasna p:first-of-type { margin-top: 0; }
.leela-msg.yasna p:last-child { margin-bottom: 0; }
.leela-msg.yasna .who { color: var(--body); font-family: var(--font-body); font-style: normal; font-weight: 500; font-size: var(--fs-sm); display: block; margin-bottom: 2px; }
.leela-msg.me { color: var(--body); text-align: right; }
.leela-msg.me .bubble {
    display: inline-block; padding: var(--space-2) var(--space-3);
    background: var(--case); border-radius: var(--radius-sm);
    text-align: left; max-width: 85%; white-space: pre-wrap;
}
.leela-msg.thinking { color: var(--body); font-family: var(--font-voice); font-style: italic; }

/* отбивка нового хода: тонкая линия по бокам + кружок с номером клетки и её названием */
.leela-turn-sep {
    display: flex; align-items: center; justify-content: center; gap: var(--space-2);
    margin: var(--space-5) 0 var(--space-4);
}
.leela-turn-sep::before, .leela-turn-sep::after {
    content: ''; flex: 1; height: 1px; background: var(--hair);
}
.leela-turn-sep__badge {
    flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--case); color: var(--body);
    border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: var(--fs-xs); font-weight: 500;
}
.leela-turn-sep__name { flex: 0 0 auto; color: var(--mark); font-size: var(--fs-sm); }

/* — управление (E6): кнопка броска ВСЕГДА видима и кликабельна — приглушение лишь визуальное — */
.leela-roll {
    width: 100%; margin-bottom: var(--space-4);
    transition: opacity 0.2s ease;
}
/* Ясна ведёт беседу — бросок отходит на второй план, но НЕ прячется и НЕ блокируется */
.leela-roll--dimmed { opacity: 0.6; }
.leela-roll--dimmed:hover, .leela-roll--dimmed:active { opacity: 1; }
/* Ясна позвала бросать дальше — кнопка возвращается яркой и коротко «дышит» прозрачностью */
.leela-roll--invited { animation: rollInvite 2.2s ease-in-out 2; }
@keyframes rollInvite {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.62; }
}

/* — всплывающий попап кубика — */
.leela-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.leela-modal.open { display: flex; align-items: center; justify-content: center; }
.leela-modal__bg {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(3px);
    animation: modalFade 0.2s ease;
}
.leela-modal__card {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    perspective: 720px; -webkit-perspective: 720px;
    animation: modalPop 0.28s cubic-bezier(0.34, 1.4, 0.6, 1);
}

/* — сцена куба: обёртка (держит контакт-подложку на «столе») + сам куб — */
.leela-die-wrap {
    position: relative; display: flex; align-items: center; justify-content: center;
    perspective: 720px; -webkit-perspective: 720px;   /* объём доходит до куба (обёртка не должна плющить 3D-контекст) */
}
.leela-die-shadow {
    position: absolute; left: 50%; bottom: -6px; width: 90px; height: 22px;
    transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.55), transparent 70%);
    filter: blur(6px); z-index: 0;
    animation: dieShadowBreath 3s ease-in-out infinite;
}
.leela-modal__card.die-impact .leela-die-shadow { animation: shadowThud 0.34s ease; }

/* — кубик-сцена (живёт в попапе) — */
.leela-die {
    position: relative; z-index: 1;
    width: 108px; height: 108px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-tile); cursor: pointer; color: var(--on-gold);
    background: var(--gold);
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    animation: dieBreath 3s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent; user-select: none; touch-action: manipulation;
}
.leela-die:focus-visible { outline: 1px solid var(--ink); outline-offset: 5px; }

/* flat-фолбэк: одна грань крутится (старые WebView / reduced-motion) */
.leela-die.rolling:not(.is3d) { animation: dieTumble 0.52s linear infinite; }
.leela-die.land:not(.is3d) { animation: diePop 0.3s ease; }
.die-face {
    width: 58%; height: 58%;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: 12%; place-items: center;
}
.die-face .pip { width: 100%; height: 100%; border-radius: 50%; }

/* — 3D-режим: сцена без золота (его несут грани); «тук» = сплющивание сцены — */
.leela-die.is3d { background: none; }
.leela-die.is3d.land { animation: stageThud 0.32s cubic-bezier(0.34, 1.56, 0.64, 1); }

.cube {
    position: relative; width: 96px; height: 96px;
    transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
    will-change: transform;
}
.cube__face {
    position: absolute; inset: 0; overflow: hidden;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    gap: 8%; padding: 20%; place-items: center; border-radius: var(--radius-tile);
    background: var(--gold);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
/* «тенемёт»: имитация одного источника света — дальние грани темнее (задаётся ниже по классу) */
.cube__face::after {
    content: ''; position: absolute; inset: 0; border-radius: var(--radius-tile); pointer-events: none;
    background: rgba(10, 7, 20, 0);
}
.cube__face .pip { width: 100%; height: 100%; border-radius: 50%; }

/* позы 6 граней: ребро 96px → полугабарит translateZ(48px) */
.f1 { transform: translateZ(48px); }                  /* front  → 1 */
.f6 { transform: rotateY(180deg) translateZ(48px); }  /* back   → 6 */
.f3 { transform: rotateY(90deg) translateZ(48px); }   /* right  → 3 */
.f4 { transform: rotateY(-90deg) translateZ(48px); }  /* left   → 4 */
.f2 { transform: rotateX(90deg) translateZ(48px); }   /* top    → 2 */
.f5 { transform: rotateX(-90deg) translateZ(48px); }  /* bottom → 5 */
/* затенение по ориентации (свет слева-сверху ~315°) */
.f2::after { background: rgba(255, 250, 235, 0.10); } /* верх — подсвечен, блик */
.f3::after, .f4::after { background: rgba(10, 7, 20, 0.18); }
.f5::after { background: rgba(10, 7, 20, 0.40); }
.f6::after { background: rgba(10, 7, 20, 0.40); }

/* пипсы: тёмная точка на золоте — контраст 9.4, объём даёт затенение грани */
.pip.on {
    background: var(--on-gold);
}
.leela-die-hint { color: var(--body); font-size: var(--fs-sm); text-align: center; }
.leela-die-result { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; min-height: 22px; text-align: center; }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes dieBreath {
    0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
    50% { transform: translateY(-6px) rotateX(6deg) rotateY(-8deg); }
}
@keyframes dieShadowBreath {
    0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    50% { transform: translateX(-50%) scale(0.92); opacity: 0.6; }
}
@keyframes shadowThud {
    0% { transform: translateX(-50%) scale(1); opacity: 0.85; }
    18% { transform: translateX(-50%) scale(1.15); opacity: 0.78; }
    100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
}
@keyframes stageThud {                        /* удар о поверхность с микро-отскоком */
    0% { transform: translateY(0) scaleX(1) scaleY(1); }
    16% { transform: translateY(6px) scaleX(1.06) scaleY(0.9); }
    46% { transform: translateY(-6px) scaleX(0.98) scaleY(1.04); }
    100% { transform: translateY(0) scaleX(1) scaleY(1); }
}
@keyframes dieTumble {                        /* flat-фолбэк: кувырок одной грани */
    0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
    25% { transform: rotateX(180deg) rotateY(90deg) rotateZ(8deg); }
    50% { transform: rotateX(360deg) rotateY(180deg) rotateZ(-6deg); }
    75% { transform: rotateX(200deg) rotateY(290deg) rotateZ(6deg); }
    100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0); }
}
@keyframes diePop {
    0% { transform: scale(1); }
    35% { transform: scale(1.2); }
    100% { transform: scale(1); }
}
/* — поле ввода (низ шторки), по-чатовому: растущее поле + круглая иконка «Отправить» — */
.leela-ask {
    flex: 0 0 auto; display: flex; gap: var(--space-2); align-items: flex-end;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--hair); background: transparent;
}
.leela-ask textarea {
    flex: 1; min-width: 0; min-height: 52px; max-height: 140px; box-sizing: border-box;
    padding: 14px var(--space-5); background: var(--case);
    color: var(--ink); border: 1px solid var(--border);
    border-radius: var(--radius-tile); font-family: var(--font-body); font-size: var(--fs-base);
    line-height: 1.4; resize: none; overflow-y: auto;
    transition: border-color 0.2s ease;
}
.leela-ask textarea::placeholder { color: var(--mark); opacity: 1; }
.leela-ask textarea:focus { outline: none; border-color: var(--ink); }
/* круглая кнопка-иконка отправки (как в мессенджерах): не забирает ширину у поля */
.leela-ask__send {
    flex: 0 0 auto; width: 52px; height: 52px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--gold); color: var(--on-gold);
    border: none; border-radius: var(--radius-pill); cursor: pointer;
    font-size: var(--fs-lg); line-height: 1; -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
.leela-ask__send:active { opacity: 0.78; }
/* Ясна спросила или размышляет рядом — поле мягко подсвечено: здесь ждут твоё слово */
.leela-ask--accent textarea {
    border-color: var(--ink);
}

/* — шторка диалога с Ясной (bottom-sheet): доска остаётся главным экраном — */
.leela-sheet__backdrop {
    position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
/* полоска-«пик» внизу: свёрнутое состояние шторки — превью реплики + бейдж */
.leela-sheet__peek {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 890;
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--case); backdrop-filter: blur(6px);
    border: none; border-top: 1px solid var(--hair);
    color: var(--ink); font-family: var(--font-body); font-size: var(--fs-sm);
    text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s ease, opacity 0.2s ease;
}
.leela-peek__icon { flex: 0 0 auto; font-size: var(--fs-lg); line-height: 1; }
.leela-peek__label { flex: 0 0 auto; color: var(--body); font-weight: 500; }
.leela-peek__preview {
    flex: 1; min-width: 0; color: var(--body);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.leela-peek__badge {
    flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--canvas); color: var(--ink);
    border: 1px solid var(--border);
    font-size: var(--fs-xs); font-weight: 500; border-radius: var(--radius-pill);
}
.leela-peek__badge[hidden] { display: none; }
.leela-peek__chevron { flex: 0 0 auto; color: var(--mark); font-size: var(--fs-xs); }
.leela-sheet__peek.has-new { animation: peekPulse 1.6s ease-in-out 2; }
@keyframes peekPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.68; }
}

/* развёрнутая панель — почти во весь экран, отдельная лента + ввод — */
.leela-sheet__panel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 910;
    display: flex; flex-direction: column;
    height: 86vh; max-height: 86vh;
    background: var(--case);
    border-top: 1px solid var(--hair);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
}
.leela-sheet__head {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hair);
}
.leela-sheet__title { color: var(--ink); font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg); }
.leela-sheet__close {
    background: none; border: none; color: var(--body); cursor: pointer;
    font-size: var(--fs-lg); line-height: 1; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm); -webkit-tap-highlight-color: transparent;
}
.leela-sheet__close:active { color: var(--ink); }
.leela-sheet__roll {
    flex: 0 0 auto; width: calc(100% - 2 * var(--space-4));
    margin: 0 var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
}
.leela-sheet__roll[hidden] { display: none; }

/* переключение состояний */
.leela-sheet[data-state="collapsed"] .leela-sheet__peek { transform: translateY(0); opacity: 1; pointer-events: auto; }
.leela-sheet[data-state="expanded"] .leela-sheet__peek { transform: translateY(100%); opacity: 0; pointer-events: none; }
.leela-sheet[data-state="expanded"] .leela-sheet__backdrop { opacity: 1; pointer-events: auto; }
.leela-sheet[data-state="expanded"] .leela-sheet__panel { transform: translateY(0); }

/* — полный лог ходов (сворачиваемая деталь внизу «Дневника пути», E8) — */
.leela-history { margin-top: var(--space-4); }
.leela-history summary { color: var(--body); cursor: pointer; font-size: var(--fs-sm); }
.leela-history ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); color: var(--body); font-size: var(--fs-sm); line-height: 1.5; }
.leela-history li { margin-bottom: var(--space-1); }

/* — кнопка «Дневник пути» в шапке Лилы (E8): вторичное действие — контурная пилюля — */
/* «Дневник пути» — обычная контурная кнопка системы (.btn.btn--ghost.btn--inline),
   здесь остался только отступ от шапки. Своей кнопки у экрана больше нет. */
.leela-journal-btn { margin-top: var(--space-2); }

/* — «Дневник пути» (E8): оверлей-лист поверх игры; закрыл — игра ровно на месте (E10) — */
.leela-journey { position: fixed; inset: 0; z-index: 1000; display: none; }
.leela-journey.open { display: block; }
.leela-journey__bg {
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(3px);
    animation: modalFade 0.2s ease;
}
.leela-journey__sheet {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    top: max(28px, env(safe-area-inset-top));
    width: min(560px, 100%); display: flex; flex-direction: column; overflow: hidden;
    background: var(--case);
    border: 1px solid var(--hair); border-bottom: none;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    animation: journeyUp 0.26s ease;
}
/* своя анимация: не затирает базовый translateX(-50%) центрирования листа */
@keyframes journeyUp {
    from { opacity: 0; transform: translateX(-50%) translateY(28px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.leela-journey__head {
    flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--hair);
}
.leela-journey__back {
    flex: 0 0 auto; padding: 4px 10px 4px 0; cursor: pointer;
    background: none; border: none; color: var(--body);
    font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500;
}
.leela-journey__title { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 400; }
.leela-journey__body {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
}
.leela-journey__q { color: var(--body); font-family: var(--font-voice); font-size: var(--fs-base); line-height: 1.6; font-style: italic; margin-bottom: var(--space-4); }
.leela-journey__summary p { color: var(--ink); font-size: var(--fs-base); line-height: 1.65; margin: 0 0 var(--space-3); }
.leela-journey__mtitle { color: var(--mark); font-size: var(--fs-xs); font-weight: 500; margin: var(--space-4) 0 var(--space-3); }
.leela-journey__miles { list-style: none; margin: 0; padding: 0; }
.leela-journey__miles li {
    position: relative; padding-left: 20px; margin-bottom: var(--space-2);
    color: var(--ink); font-size: var(--fs-base); line-height: 1.55;
}
.leela-journey__miles li::before { content: '✦'; position: absolute; left: 0; color: var(--mark); }
.leela-journey__loading { color: var(--body); font-size: var(--fs-sm); text-align: center; padding: var(--space-6) 0; }

/* — пейволл партии (после пробных ходов) — */
.leela-pay {
    position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center;
    padding: var(--space-4); background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(3px);
    animation: modalFade 0.2s ease;
}
.leela-pay__card {
    position: relative; width: 100%; max-width: 380px; text-align: center;
    padding: var(--space-6) var(--space-5); border-radius: var(--radius-sm);
    background: var(--case);
    border: 1px solid var(--hair);
    animation: modalPop 0.28s cubic-bezier(0.34, 1.4, 0.6, 1);
}
.leela-pay__title { color: var(--ink); font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 400; margin-bottom: var(--space-3); }
.leela-pay__text { color: var(--body); font-size: var(--fs-base); line-height: 1.5; margin-bottom: var(--space-5); }
.leela-pay__btn { width: 100%; }
.leela-pay__status { color: var(--mark); font-size: var(--fs-sm); min-height: 18px; margin-top: var(--space-3); }
.leela-pay__later {
    margin-top: var(--space-3); background: none; border: none; color: var(--body);
    font-size: var(--fs-sm); cursor: pointer; text-decoration: underline; font-family: var(--font-body);
}

.leela-won {
    text-align: center; color: var(--ink); font-family: var(--font-display); font-weight: 400;
    padding: var(--space-4); border: 1px solid var(--hair); border-radius: var(--radius-sm);
    margin-bottom: var(--space-3); background: var(--case);
    animation: wonBurst 0.7s cubic-bezier(0.34, 1.4, 0.6, 1);
}
@keyframes wonBurst { 0% { opacity: 0; transform: scale(0.92); } 60% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }

/* Вкладка «Лила» в нижней навигации каталога (catalog-screen NAV) — выделена
 * основным тоном текста, чтобы игра читалась как особый пункт среди приглушённых
 * услуг: золото зарезервировано за одним действием на экран.
 * Кубика-эмодзи перед пунктом больше нет: эмодзи вместо иконки направление
 * запрещает (DESIGN.md §8), а тона здесь достаточно, чтобы пункт читался особым. */
.nav-link--leela {
    color: var(--ink); opacity: 0.95;
}
.nav-link--leela:hover { opacity: 1; }