@font-face{font-family:Amatic;src:url('/fonts/AmaticSC-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{color-scheme:dark;--ink:#ece7da;--muted:#a9a99f;--gold:#ffcf7a;--glow:#ffb547;--shadow:#c2cad3;--canvas:#0b0e12}
*{box-sizing:border-box}
/* Страница не листается: один экран, всё меняется по нажатию */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
html{background:var(--canvas);-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:18px/1.6 Georgia,'PT Serif','Times New Roman',serif;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

.bg{position:fixed;inset:0 0 auto 0;height:100lvh;min-height:100%;z-index:0;overflow:hidden;pointer-events:none;background:var(--canvas)}
.bg-layer{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1)}
.bg-layer.on{opacity:1;animation:drift 36s ease-in-out infinite alternate}
.bg.closer .bg-layer.on{transform:scale(1.12)}
.veil{position:absolute;inset:0;background:linear-gradient(180deg,#0b0e1288 0%,#0b0e1210 26%,#0b0e1238 48%,#0b0e12e0 78%,#0b0e12 100%);transition:background .8s}
body.dim .veil{background:linear-gradient(180deg,#0b0e12b0,#0b0e12c8 50%,#0b0e12f0)}
@keyframes drift{from{translate:0 0;scale:1.01}to{translate:-1.2% -.8%;scale:1.07}}

.top{position:fixed;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:max(16px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left))}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand img{border-radius:50%;width:26px;height:26px}
.brand span{font:700 24px/1 Amatic,sans-serif;letter-spacing:.02em}
.sound{background:none;border:0;padding:6px 0;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.sound[aria-pressed=true]{color:var(--gold)}

/* Сцена */
.stage{position:fixed;inset:0;z-index:2;display:flex;align-items:flex-end;padding:90px max(22px,env(safe-area-inset-right)) max(64px,calc(env(safe-area-inset-bottom) + 50px)) max(22px,env(safe-area-inset-left));cursor:pointer;user-select:none;-webkit-user-select:none}
.panel{width:100%;max-width:600px;transition:opacity .45s ease,transform .45s ease}
.panel.out{opacity:0;transform:translateY(-8px)}
.panel.wide{max-width:980px}
.kicker{margin:0 0 12px;min-height:1.3em;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 14px #ffb54755}
.kicker:empty{display:none}
.text{text-shadow:0 2px 12px #000d}
.text p{margin:0 0 .75em;text-wrap:pretty}
.text p:last-child{margin-bottom:0}
.text .h1{font:700 clamp(78px,22vw,150px)/.95 Amatic,sans-serif;letter-spacing:.01em;margin-bottom:.12em;text-shadow:0 3px 30px #000a}
.text .h2{font:700 clamp(46px,11vw,76px)/1 Amatic,sans-serif;margin-bottom:.25em}
.text .accent{color:var(--gold)}
.text .shadow{font-style:italic;color:var(--shadow);padding-left:14px;border-left:1px solid #ffffff2e}
.text .speaker{display:block;font:700 26px/1.1 Amatic,sans-serif;font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:#eef2f6;text-shadow:0 0 12px #fff7}
.text .question{font:700 clamp(44px,11vw,78px)/1.05 Amatic,sans-serif;color:var(--gold);text-shadow:0 0 26px #ffb54755,0 2px 12px #000c}
.caret{display:inline-block;width:.45ch;height:1em;margin-left:2px;vertical-align:-.12em;background:currentColor;opacity:.75;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* Подсказка «нажмите»: след лапы мягко дышит внизу экрана */
.tap{position:fixed;left:50%;bottom:max(18px,calc(env(safe-area-inset-bottom) + 8px));translate:-50% 0;display:flex;align-items:center;gap:8px;color:#ffffff70;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .5s;pointer-events:none}
.tap svg{width:14px;height:18px;color:#ffffff60;animation:breathe 2.2s ease-in-out infinite}
.tap.show{opacity:1}
@keyframes breathe{50%{transform:scale(1.18);opacity:.5}}

/* Выборы */
.choices{display:grid;gap:12px;margin-top:24px}
.choices:empty{display:none}
.choice{display:flex;align-items:center;gap:12px;width:100%;max-width:360px;min-height:56px;padding:12px 26px;text-align:left;text-decoration:none;border:0;background:url('/assets/game-ink-panel-v1.svg') center/100% 100% no-repeat;color:var(--gold);font:700 26px/1.15 Amatic,sans-serif;cursor:pointer;filter:drop-shadow(0 4px 8px #0006);opacity:0;translate:0 8px;animation:rise .55s ease forwards;transition:color .2s,filter .2s}
.choice:nth-child(2){animation-delay:.14s}.choice:nth-child(3){animation-delay:.28s}
.choice:hover{color:#ffe7b6;filter:drop-shadow(0 5px 12px #000a)}
.choice svg{flex:none}
.choice.small{max-width:none;width:auto;min-height:0;padding:6px 0;background:none;filter:none;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
@keyframes rise{to{opacity:1;translate:0 0}}

/* Пункты эксперимента и карточки */
.steps{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.steps li{display:flex;gap:16px;align-items:baseline;opacity:0;translate:0 10px;transition:opacity .6s,translate .6s}
.steps li.in{opacity:1;translate:0 0}
.steps b{flex:none;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.06em;color:var(--gold)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px;max-width:760px}
.cards figure{margin:0;border-radius:6px;overflow:hidden;box-shadow:0 16px 44px #000c;opacity:0;translate:0 18px;transition:opacity .9s,translate .9s cubic-bezier(.16,1,.3,1)}
.cards figure.in{opacity:1;translate:0 0}
.cards img{display:block;width:100%;height:auto}
.caption{margin:14px 0 0;font-size:.82em;color:var(--muted)}

/* Переходы между сценами */
.fx{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.fx.busy{pointer-events:auto}
/* Тень: тёмная лохматая масса проходит через экран, посередине открывает глаза */
.shade{position:absolute;top:50%;left:50%;width:260vmax;height:260vmax;margin:-130vmax 0 0 -130vmax;border-radius:50%;background:radial-gradient(closest-side,#07090b 0 62%,#07090bdd 70%,#07090b00 76%);animation:shade 2.2s cubic-bezier(.65,0,.35,1) forwards}
@keyframes shade{0%{transform:translateX(-120%) scale(.6)}42%,58%{transform:translateX(0) scale(1)}100%{transform:translateX(120%) scale(.6)}}
.eyes{position:absolute;top:44%;left:50%;display:flex;gap:min(16vw,110px);translate:-50% 0;opacity:0;animation:eyes 2.2s ease forwards}
.eyes i{display:block;width:min(9vw,62px);height:min(3.6vw,24px);border-radius:50%;background:#fff;box-shadow:0 0 18px 6px #ffffffaa,0 0 60px 18px #ffffff40}
.eyes i:first-child{rotate:-14deg;translate:0 8px}.eyes i:last-child{rotate:10deg}
@keyframes eyes{0%,38%{opacity:0;scale:1 .1}48%{opacity:1;scale:1 1}54%{opacity:1;scale:1 .08}58%{opacity:1;scale:1 1}64%,100%{opacity:0}}
/* Следы: лапы идут через экран */
.fx .paw{position:absolute;width:clamp(22px,4.2vw,40px);color:#e9edf2;opacity:0;rotate:var(--a);animation:paw 2.4s ease forwards;filter:drop-shadow(0 0 6px #0008)}
@keyframes paw{0%{opacity:0;scale:.7}12%{opacity:.85;scale:1}65%{opacity:.6}100%{opacity:0}}
.fx .dark{position:absolute;inset:0;background:#07090b;opacity:0;animation:darken 2.4s ease forwards}
@keyframes darken{0%{opacity:0}40%,60%{opacity:.9}100%{opacity:0}}
/* Моргание: веки смыкаются, ночник мигает */
.lid{position:absolute;left:0;right:0;height:51%;background:#050607}
.lid.t{top:0;transform-origin:top;animation:lidT 1.8s ease-in-out forwards;border-bottom-left-radius:50% 30%;border-bottom-right-radius:50% 30%}
.lid.b{bottom:0;transform-origin:bottom;animation:lidB 1.8s ease-in-out forwards;border-top-left-radius:50% 30%;border-top-right-radius:50% 30%}
@keyframes lidT{0%{transform:scaleY(0)}35%,62%{transform:scaleY(1)}48%{transform:scaleY(.86)}100%{transform:scaleY(0)}}
@keyframes lidB{0%{transform:scaleY(0)}35%,62%{transform:scaleY(1)}48%{transform:scaleY(.86)}100%{transform:scaleY(0)}}
.clock{position:absolute;top:50%;left:50%;translate:-50% -50%;font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.06em;color:#ffcf7a;text-shadow:0 0 22px #ffb547aa;opacity:0;animation:clock 1.8s ease forwards}
@keyframes clock{0%,30%{opacity:0}42%{opacity:1}50%{opacity:.2}56%,62%{opacity:1}74%,100%{opacity:0}}
/* Загрузка: тонкая жёлтая нить и подпись */
.load{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:18px;background:#07090b;animation:fade 2.6s ease forwards}
.load span{font:700 26px/1.1 Amatic,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.load b{display:block;width:min(56vw,260px);height:1px;background:#ffffff1c;position:relative;overflow:hidden}
.load b::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,#ffcf7a,transparent);translate:-100% 0;animation:thread 1.3s ease-in-out infinite}
@keyframes thread{to{translate:100% 0}}
@keyframes fade{0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}

/* Прогресс: точки-шаги внизу слева */
.progress{position:fixed;z-index:3;left:max(22px,env(safe-area-inset-left));bottom:max(22px,calc(env(safe-area-inset-bottom) + 12px));display:flex;gap:6px}
.progress i{width:5px;height:5px;border-radius:50%;background:#ffffff26;transition:background .4s}
.progress i.on{background:var(--gold);box-shadow:0 0 8px #ffb547}

.fallback{position:fixed;inset:auto 24px 40px;max-width:32ch}

@media(min-width:900px){
 body{font-size:20px}
 .stage{align-items:center;padding-left:clamp(48px,8vw,140px);padding-right:clamp(48px,6vw,100px)}
 .veil{background:linear-gradient(90deg,#0b0e12e6 0%,#0b0e12b0 34%,#0b0e1230 68%,#0b0e1210 100%),linear-gradient(0deg,#0b0e12a0,transparent 40%)}
 body.dim .veil{background:#0b0e12c8}
 .top{padding:28px clamp(28px,4vw,64px) 0 clamp(48px,8vw,140px)}
 .progress{left:clamp(48px,8vw,140px);bottom:34px}
}
@media(max-height:700px) and (max-width:700px){body{font-size:16px}.text .h1{font-size:72px}.choice{min-height:50px;font-size:23px}.steps{gap:9px}}
@media(max-width:380px){body{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01s!important;transition:none!important}}
/* Карточки веером: средняя впереди, крайние повёрнуты и уходят назад */
.cards{grid-template-columns:1fr 1.22fr 1fr;align-items:center;gap:0}
.cards figure:nth-child(1){rotate:-6deg;margin-right:-14%;z-index:1}
.cards figure:nth-child(2){z-index:2}
.cards figure:nth-child(3){rotate:6deg;margin-left:-14%;z-index:1}
@media(max-width:700px){.cards{margin-left:-6px;margin-right:-6px}}
/* Почта и личная карточка */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.mail{display:grid;gap:12px;margin-top:22px;max-width:380px}
.mail input{width:100%;min-height:54px;padding:12px 18px;border:1px solid #ffffff2e;border-radius:4px;background:#0b0e12b3;color:var(--ink);font:18px/1.2 Georgia,serif;-webkit-appearance:none;appearance:none}
.mail input::placeholder{color:#ffffff59}
.mail input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #ffb54733}
.mail .choice{max-width:none;justify-content:center}
.mail .caption{margin:2px 0 0;font-size:12.5px;line-height:1.5}
.mail .caption a{color:var(--muted)}
.err{margin:0;min-height:1em;font-size:14px;color:#ffb3a0}
.err:empty{display:none}
.mine{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:center}
.mine canvas{width:100%;height:auto;border-radius:6px;box-shadow:0 20px 56px #000c;opacity:0;scale:.96;transition:opacity 1s,scale 1s cubic-bezier(.16,1,.3,1)}
.mine canvas.in{opacity:1;scale:1}
.mine-no{margin:0 0 10px;font:700 clamp(46px,7vw,72px)/1 Amatic,sans-serif;color:var(--gold);text-shadow:0 0 24px #ffb54766}
.mine p{margin:0 0 14px}
.mine .choice{max-width:280px}
@media(max-width:700px){
 .mine{grid-template-columns:1fr;gap:14px}
 .mine canvas{max-height:46svh;width:auto;max-width:100%;justify-self:start}
 .mine-no{display:none}
 .mine p{font-size:15px;margin-bottom:10px}
}
@media(max-width:700px){
 .mine canvas{max-height:min(40svh,330px)}
 .panel.wide .choices{margin-top:12px;gap:8px}
 .panel.wide .choices .caption{margin-top:4px;font-size:12.5px}
 .mine .caption{font-size:12.5px}
}
/* Прогресс: цепочка следов вместо точек */
.progress{gap:4px;align-items:center}
.progress i{display:none}
.progress svg{width:12px;height:15px;color:#ffffff26;rotate:var(--r);translate:0 var(--y);transition:color .5s,filter .5s}
.progress svg.on{color:var(--gold);filter:drop-shadow(0 0 4px #ffb547)}
/* Выбор начала истории: три сцены */
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pick{position:relative;display:block;padding:0;border:0;border-radius:6px;overflow:hidden;background:#000;cursor:pointer;box-shadow:0 16px 44px #000c;opacity:0;translate:0 18px;rotate:0deg;margin:0!important;transition:opacity .9s,translate .9s cubic-bezier(.16,1,.3,1),outline-color .3s,filter .4s}
.pick.in{opacity:1;translate:0 0}
.pick img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;transition:scale .6s}
.pick span{position:absolute;left:0;right:0;bottom:0;padding:28px 10px 12px;background:linear-gradient(transparent,#0b0e12e8);font:700 26px/1 Amatic,sans-serif;color:var(--gold);text-align:center}
.pick:hover img{scale:1.04}
.pick{outline:2px solid transparent;outline-offset:3px}
.pick.chosen{outline-color:var(--gold);box-shadow:0 0 30px #ffb54766}
.cards:has(.chosen) .pick:not(.chosen){filter:brightness(.4)}
.cards figure{display:none}
@media(max-width:700px){.pick span{font-size:21px;padding:22px 6px 9px}.cards{gap:8px;margin-left:0;margin-right:0}}
/* Лапки по центру внизу, подсказка «нажмите» над ними */
.progress{left:50%!important;translate:-50% 0;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important}
.tap{bottom:max(44px,calc(env(safe-area-inset-bottom) + 36px))}
.stage{padding-bottom:max(84px,calc(env(safe-area-inset-bottom) + 70px))}

/* Два шрифта: фигурный Amatic для подписей и кнопок, обычный для текста истории */
.sound,.kicker,.text .speaker,.tap,.choice.small,.steps b,.load span,.clock{text-transform:none;letter-spacing:.01em}
.sound{font-size:24px}
.kicker{font-size:34px;line-height:1;margin-bottom:10px}
.text .speaker{font-size:24px;line-height:1.1;margin-bottom:2px}
.tap{font-size:22px;color:#ffffff80}
.choice.small{font-size:24px}
.steps b{font-size:30px;line-height:.9}
.load span{font-size:30px;color:var(--muted)}
.clock{font-size:clamp(64px,18vw,120px)}
@media(max-width:700px){.kicker{font-size:30px}}
@media(max-width:700px){.kicker{font-size:clamp(22px,6.5vw,30px);white-space:nowrap}}

/* ---------- Золотое сечение ----------
   Шрифт: база × φ на каждую ступень (φ = 1.618), мелкий текст база ÷ √φ.
   Отступы: ряд Фибоначчи 8 · 13 · 21 · 34 · 55 · 89.
   Телефон: 18 → 29 → 47 → 76. Компьютер: 21 → 34 → 55 → 89. */
:root{--phi:1.618;--base:18px;--small:calc(var(--base) / 1.272);--k:calc(var(--base) * 1.618);--h2:calc(var(--base) * 2.618);--h1:calc(var(--base) * 4.236);
 --s1:8px;--s2:13px;--s3:21px;--s4:34px;--s5:55px;--s6:89px}
@media(min-width:900px){:root{--base:21px}}
body{font-size:var(--base);line-height:1.618}
.text p{margin:0 0 var(--s3)}
.text p:last-child{margin-bottom:0}
.kicker{font-size:var(--k);line-height:1;margin:0 0 var(--s2);white-space:nowrap}
.text .h1{font-size:var(--h1);line-height:1;margin-bottom:var(--s2)}
.text .h2{font-size:var(--h2);line-height:1;margin-bottom:var(--s3)}
.text .question{font-size:var(--h2);line-height:1.1}
.text .speaker{font-size:calc(var(--k) * .786);margin-bottom:var(--s1)}
.text .shadow{padding-left:var(--s2)}
.choices{margin-top:var(--s4);gap:var(--s2)}
.choice{font-size:var(--k);min-height:var(--s5);padding:var(--s2) var(--s4)}
.choice.small{font-size:calc(var(--k) * .786);padding:var(--s1) 0}
.steps{margin-top:var(--s4);gap:var(--s3)}
.steps li{gap:var(--s3)}
.steps b{font-size:var(--k)}
.cards{margin-top:var(--s3)}
.caption,.mail .caption,.mine .caption,.panel.wide .choices .caption{font-size:var(--small);line-height:1.5;margin-top:var(--s2)}
.mail{margin-top:var(--s4);gap:var(--s2)}
.mail input{min-height:var(--s5);font-size:var(--base);padding:var(--s2) var(--s3)}
.mine{gap:var(--s4)}
.mine p{margin:0 0 var(--s3)}
.tap{font-size:calc(var(--k) * .786);bottom:max(var(--s5),calc(env(safe-area-inset-bottom) + var(--s4)))}
.progress{bottom:max(var(--s3),calc(env(safe-area-inset-bottom) + var(--s2)))!important;gap:var(--s1)}
.stage{padding:var(--s6) max(var(--s3),env(safe-area-inset-right)) max(var(--s6),calc(env(safe-area-inset-bottom) + var(--s5))) max(var(--s3),env(safe-area-inset-left))}
.top{padding:max(var(--s3),env(safe-area-inset-top)) max(var(--s3),env(safe-area-inset-right)) 0 max(var(--s3),env(safe-area-inset-left))}
.sound,.brand span{font-size:calc(var(--k) * .786)}
@media(min-width:900px){
 .stage{padding-left:var(--s6);padding-right:var(--s6)}
 .top{padding:var(--s4) var(--s5) 0 var(--s6)}
 .panel{max-width:calc(var(--base) * 30)}
}
@media(max-width:359px){:root{--base:16px}}
@media(max-height:700px) and (max-width:700px){:root{--base:16px}}
@media(max-width:700px){.mine{gap:var(--s3)}.mine canvas{max-height:min(34svh,300px)}.mine p{margin-bottom:var(--s2)}.panel.wide .choices{margin-top:var(--s3)}}
.text .name{font:700 var(--h2)/1 Amatic,sans-serif;text-shadow:0 0 24px #ffb54755,0 2px 12px #000c}
/* Реплики Луоки: без черты сбоку и без курсива, просто тихий светлый текст в кавычках */
.text .shadow{font-style:normal;border-left:0;padding-left:0;color:#d9e0e7}
.text p{margin-bottom:var(--s2)}
/* Следы в переходе: как в прогрессе, жёлтые со свечением */
.fx .paw{color:var(--gold);filter:drop-shadow(0 0 6px #ffb547aa);rotate:var(--a)}
/* Вороны и смахивание */
.wipe{position:absolute;inset:0;background:linear-gradient(90deg,#07090b00 0%,#07090b 30%,#07090b 70%,#07090b00 100%);width:300%;left:-300%;animation:wipe 2.8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes wipe{to{transform:translateX(166%)}}
.crow{position:absolute;left:-12%;color:#0a0c0e;filter:drop-shadow(0 0 1px #ffffff30);animation:fly 2.4s cubic-bezier(.3,0,.7,1) forwards}
.crow svg{display:block;width:100%;height:auto;animation:flap .32s ease-in-out infinite alternate;transform-origin:50% 55%}
@keyframes fly{to{transform:translate(calc(100vw + 30vmin),var(--dy))}}
@keyframes flap{to{transform:scaleY(-.55)}}
.crow{animation:fly 1.6s cubic-bezier(.35,.1,.65,1) forwards;color:#111418;filter:drop-shadow(0 0 1.5px #c9d2dc55)}
.wipe{animation:wipe 2.6s cubic-bezier(.65,0,.35,1) .45s forwards}
.steps b{width:1.5em;text-align:left}
.steps li{gap:var(--s2)}.steps b{width:1.2em}
.bg-layer{will-change:opacity,transform;backface-visibility:hidden}
/* Надпись на загрузке: фигурная, жёлтая, со свечением */
.load span{font:700 var(--h2)/1 Amatic,sans-serif;color:var(--gold);letter-spacing:.01em;text-transform:none;text-shadow:0 0 24px #ffb54766;padding:0 var(--s3);text-align:center}
.load.trail{animation:fade 3.7s ease forwards}
.load.trail span{position:relative;z-index:1}
.load.trail{place-content:start center;padding-top:30vh}

/* ---------- Экран с номером по золотому сечению ----------
   Телефон: карточка шириной 0.618 колонки, под ней текст и две одинаковые кнопки на всю колонку.
   Отступы по ряду Фибоначчи: карточка → 21 → текст → 34 → кнопки (13 между) → 21 → подпись.
   Компьютер: две колонки 1 : 1.618, слева карточка, справа текст и кнопки. */
.panel.yours{max-width:min(100%,calc(var(--base) * 21))}
.panel.yours .mine{display:grid;grid-template-columns:1fr;gap:var(--s3);align-items:start}
.panel.yours .mine canvas{width:61.8%;max-height:none;justify-self:start}
.panel.yours .mine-copy p{margin:0}
.panel.yours .mine-actions{display:grid;gap:var(--s2);margin-top:var(--s4)}
.panel.yours .mine-actions .choice{width:100%;max-width:none;justify-content:flex-start;opacity:1;translate:none;animation:none}
.panel.yours .mine-copy .caption{margin-top:var(--s3)}
@media(min-width:900px){
 .panel.yours{max-width:calc(var(--base) * 42)}
 .panel.yours .mine{grid-template-columns:1fr 1.618fr;gap:var(--s5);align-items:center}
 .panel.yours .mine canvas{width:100%}
}
@media(max-height:700px) and (max-width:700px){.panel.yours .mine canvas{width:50%}}
/* «Это ваш личный ключ…» фигурным шрифтом, ступень подписей из той же шкалы φ */
.panel.yours .mine-copy p:not(.caption){font:700 var(--k)/1.15 Amatic,sans-serif;color:var(--ink);letter-spacing:.01em;text-shadow:0 2px 12px #000c}
/* Строка про ключ: обычные буквы (Amatic пишет только капсом), название игры жёлтым */
.panel.yours .mine-copy p.key{font:400 calc(var(--base) * 1.272)/1.45 Georgia,'PT Serif',serif;letter-spacing:0}
.panel.yours .mine-copy p.key span{color:var(--gold);text-shadow:0 0 18px #ffb54755}
/* Главное действие «Поделиться» жёлтое, Telegram вторичный: светлый текст на той же плашке */
.panel.yours .mine-actions a.choice{color:var(--ink)}
.panel.yours .mine-actions a.choice:hover{color:#fff}

/* ---------- Последний экран: спокойно и по центру ----------
   Карточка 0.618 колонки, под ней строка текста, одна кнопка и тихая ссылка.
   Отступы 21 · 34 · 21 из ряда Фибоначчи. */
.panel.yours .mine{justify-items:center;text-align:center;gap:var(--s3)}
.panel.yours .mine canvas{justify-self:center}
.panel.yours .mine-copy{display:grid;justify-items:center;max-width:calc(var(--base) * 18)}
.panel.yours .mine-copy p.key{font:400 var(--base)/1.55 Georgia,'PT Serif',serif;color:var(--muted)}
.panel.yours .mine-copy #save{width:100%;max-width:calc(var(--base) * 15);justify-content:center;margin-top:var(--s4);opacity:1;translate:none;animation:none}
.tg-link{margin-top:var(--s3);font:700 calc(var(--k) * .786)/1 Amatic,sans-serif;color:var(--muted);text-decoration:none;border-bottom:1px solid #ffffff2a;padding-bottom:2px}
.tg-link:hover{color:var(--ink);border-color:#ffffff66}
@media(min-width:900px){
 .panel.yours .mine{text-align:left;justify-items:start}
 .panel.yours .mine-copy{justify-items:start}
}
/* На телефоне карточка крупнее: 0.786 колонки (√φ), на низких экранах остаётся 0.618 */
@media(max-width:899px){.panel.yours .mine canvas{width:78.6%}}
@media(max-width:899px) and (max-height:760px){.panel.yours .mine canvas{width:61.8%}}

/* Keep the approved mobile lower bleed and a quiet black top edge. */
@media(max-width:700px){
 html{background:#000;overflow:hidden;overflow:clip;scrollbar-width:none}
 body{position:relative;min-height:calc(100lvh + 100px + env(safe-area-inset-bottom,0px));overflow:hidden;overflow:clip}
 .bg{position:absolute;top:calc(0px - max(24px,env(safe-area-inset-top,0px)));bottom:0;height:auto;min-height:100%}
 .bg::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#000 0px,#000b 24px,#0003 54px,#0000 84px)}
 html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
}
/* Keep every scene reachable on short phone screens without page scrolling. */
@media(max-width:700px) and (max-height:700px){
 :root{--base:15px}
 .stage{padding:72px 21px max(64px,calc(env(safe-area-inset-bottom) + 44px))}
 .text .h2,.text .question{font-size:36px}
 .text p{margin-bottom:8px}
 .steps{margin-top:13px;gap:13px}
 .steps b{font-size:22px}
 .choices,.mail{margin-top:21px}
 .mail input{font-size:16px}
 .panel.yours .mine{gap:13px}
 .panel.yours .mine-copy #save{margin-top:21px}
}
@media(min-width:701px) and (max-height:500px){
 :root{--base:15px}
 .stage{padding:64px 34px 48px}
 .panel{max-width:750px}
 .text .h1{font-size:54px}.text .h2,.text .question{font-size:36px}
 .text p{margin-bottom:8px}.kicker{font-size:24px;margin-bottom:8px}
 .choices,.steps,.cards,.mail{margin-top:13px;gap:8px}
 .choice{min-height:44px;padding:8px 21px}
 .cards img{height:36svh;object-fit:cover}
 .panel.yours{max-width:700px}
 .panel.yours .mine{grid-template-columns:1fr 1.618fr;gap:21px;text-align:left;align-items:center}
 .panel.yours .mine canvas{width:auto;max-height:60svh}
 .panel.yours .mine-copy #save{margin-top:13px}
 .mail{max-width:600px;grid-template-columns:1fr 1fr}.mail .caption,.mail .err{grid-column:1/-1}
}

/* Landscape screens: show the complete portrait illustration beside the copy. */
@media(min-width:701px){
 .bg-layer[data-format="portrait"]{inset:0;animation:none!important;transform:none!important;translate:none;scale:1;background-position:center}
 .bg-layer[data-format="portrait"]::before{content:'';position:absolute;inset:-40px;background-image:inherit;background-position:center;background-size:cover;filter:blur(28px) brightness(.22)}
 .bg-layer[data-format="portrait"]::after{content:'';position:absolute;top:0;bottom:0;right:clamp(0px,4vw,100px);width:min(62vw,66.6667vh);background-image:inherit;background-position:center;background-size:contain;background-repeat:no-repeat;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
 .veil{background:linear-gradient(90deg,#080c11b3,transparent 66%),linear-gradient(0deg,#080c1173,transparent 28%)}
 body.dim .veil{background:linear-gradient(90deg,#080c11ed,#080c11b3 50%,#080c1180)}
 .stage{padding-left:clamp(40px,6vw,120px);padding-right:clamp(40px,6vw,120px)}
 .panel:not(.wide){max-width:min(43vw,650px)}
 .panel.wide:not(.yours){max-width:min(70vw,980px)}
}
@media(min-width:701px) and (max-height:500px){.panel:not(.wide){max-width:min(62vw,750px)}}

/* Final mobile screen: keep the scene below the browser bars, blend both edges. */
@media(max-width:700px){
 body[data-step="yours"] .bg{min-height:calc(100lvh + 180px + env(safe-area-inset-top,0px) + env(safe-area-inset-bottom,0px));background:#000}
 body[data-step="yours"].dim .veil{background:linear-gradient(180deg,#000 0px,#0009 48px,#0003 110px,#0005 48%,#0009 76%,#000 100%)}
 body[data-step="yours"] .bg::after{background:linear-gradient(180deg,#000 0px,#0009 36px,transparent 100px),linear-gradient(0deg,#000 0px,#000b 65px,transparent 210px)}
}

/* Sound state: muted is visibly crossed out; active retains the warm accent. */
.sound[aria-pressed="false"]{color:#92928e;text-decoration-line:line-through;text-decoration-thickness:1.5px;text-decoration-color:currentColor}
.sound[aria-pressed="true"]{color:var(--gold);text-decoration:none}