/* «Погуще» — мини-приложение. Стиль А «Турецкая ночь»: кофейный сумрак, золото и бирюза изникской чашки,
   восьмилучевая звезда-печать. Тема постоянная, от темы Telegram не зависит. */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block}

:root{
  --night:#160D09;--coffee:#22140E;--raised:#2C1A12;--raised2:#36211A;
  --gold:#DDB062;--gold-pale:#F2DFB4;--turq:#45BCAE;--turq-deep:#1E6F69;
  --ink:#F3E6D0;--muted:#BCA48C;--line:rgba(221,176,98,.26);--focus:#45BCAE;
  --orn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='none' stroke='%23DDB062' stroke-opacity='.075' stroke-width='1'%3E%3Crect x='19' y='19' width='18' height='18'/%3E%3Crect x='19' y='19' width='18' height='18' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h7M49 28h7M28 0v7M28 49v7'/%3E%3C/g%3E%3C/svg%3E");
  --safe-b:max(env(safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px));
  --safe-t:var(--tg-content-safe-area-inset-top,0px);
  color-scheme:dark;
}
body{background:var(--night) var(--orn);color:var(--ink);font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;overscroll-behavior:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
::selection{background:rgba(69,188,174,.35)}

#app{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:var(--safe-t);padding-bottom:var(--safe-b);z-index:1}
.screen::-webkit-scrollbar{display:none}
.screen.enter{animation:enter .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.ic{width:22px;height:22px;flex:none}
.star{width:1em;height:1em;vertical-align:-.12em;display:inline-block}

/* пылинки-звёзды фона */
.dust{position:absolute;inset:0;pointer-events:none;z-index:0}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-pale);box-shadow:0 0 6px 1px rgba(242,223,180,.55);opacity:.1;animation:tw var(--d,5s) ease-in-out var(--dl,0s) infinite}
.dust i.t{background:var(--turq);box-shadow:0 0 6px 1px rgba(69,188,174,.6)}
@keyframes tw{0%,100%{opacity:.08;transform:scale(.6)}50%{opacity:.85;transform:scale(1)}}

/* навигация вне Telegram (демо в браузере) */
.nav-back{position:absolute;left:12px;top:calc(10px + var(--safe-t));z-index:30;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(22,13,9,.72);border:1px solid var(--line);color:var(--gold-pale);backdrop-filter:blur(6px)}
body.no-tg .screen:not(.s-cam){padding-top:58px}
body.no-tg .hint{top:72px}
.demo-badge{position:absolute;right:12px;top:calc(14px + var(--safe-t));z-index:30;font:600 11px/1 "Golos Text";letter-spacing:.08em;text-transform:uppercase;color:var(--turq);border:1px solid rgba(69,188,174,.5);border-radius:10px;padding:5px 8px;background:rgba(22,13,9,.7);pointer-events:none}

/* ===== общие элементы ===== */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;padding:0 16px;border-radius:16px;font:600 17px "Golos Text",system-ui,sans-serif;position:relative;transition:transform .12s ease,filter .2s}
.btn:active{transform:scale(.985)}
.btn[disabled]{filter:grayscale(.6) brightness(.7);pointer-events:none}
.btn-gold{background:var(--gold);color:#22130B;box-shadow:inset 0 0 0 1px rgba(255,240,200,.45),inset 0 -2px 0 rgba(90,50,10,.25),0 10px 24px -10px rgba(221,176,98,.6)}
.btn-gold::after{content:"";position:absolute;inset:4px;border-radius:12px;border:1px solid rgba(60,30,8,.22);pointer-events:none}
.btn-gold.shine{overflow:hidden}
.btn-gold.shine::before{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,250,235,.55),transparent);animation:shine 4.5s ease-in-out 1.2s infinite}
@keyframes shine{0%{left:-60%}22%,100%{left:130%}}
.btn-ghost{border:1px solid var(--line);color:var(--gold-pale);background:rgba(44,26,18,.6)}
.link-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:15px;color:var(--muted);margin:2px auto 0}
.link-btn .ic{width:18px;height:18px;color:var(--gold)}
.fine{font-size:12.5px;color:var(--muted);text-align:center;padding:18px 0 30px;opacity:.85}
.sn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#22130B;font:700 12px/1 "El Messiri";vertical-align:.08em;cursor:pointer}

.snw{white-space:nowrap}
/* 8-лучевой медальон-печать */
.med{position:absolute;width:24px;height:24px;display:grid;place-items:center;color:#22130B;font:700 14px/1 "El Messiri";isolation:isolate}
.med::before,.med::after{content:"";position:absolute;inset:1px;background:var(--gold);border-radius:3px;z-index:-1;box-shadow:0 0 12px rgba(69,188,174,.55)}
.med::after{transform:rotate(45deg)}
.med.lock{color:var(--turq)}
.med.lock::before,.med.lock::after{background:var(--raised2);box-shadow:inset 0 0 0 1px rgba(69,188,174,.6)}
.med.lock .ic{width:13px;height:13px}

/* ===== 1. Вход ===== */
.e-wrap{display:flex;flex-direction:column;align-items:center;padding:clamp(10px,3vh,26px) 20px 0;text-align:center;max-width:460px;margin:0 auto;position:relative}
.arch{--h:clamp(176px,29vh,252px);position:relative;height:var(--h);width:calc(var(--h)*240/252);flex:none;margin-top:12px}
.arch .win{position:absolute;inset:0;clip-path:url(#archClip);background:#120A07;overflow:hidden}
.arch .win img{position:absolute;width:135%;left:-17.5%;top:-4%;height:auto;animation:breatheImg 9s ease-in-out infinite alternate}
@keyframes breatheImg{to{transform:scale(1.05) translateY(-2%)}}
.arch .win::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 72%,transparent 40%,rgba(22,13,9,.85) 100%),linear-gradient(rgba(22,13,9,.7),transparent 40%)}
.arch svg.frame{position:absolute;left:-2.5%;top:-6.35%;width:105%;height:108.7%;overflow:visible}
.arch .fr1,.arch .fr2{stroke-dasharray:1;stroke-dashoffset:1;animation:drawArch 1.8s cubic-bezier(.6,0,.2,1) .15s forwards}
.arch .fr2{animation-delay:.45s}
@keyframes drawArch{to{stroke-dashoffset:0}}
.arch .tip{transform-box:fill-box;transform-origin:center;opacity:0;animation:tipIn .6s cubic-bezier(.3,1.6,.5,1) 1.5s forwards}
@keyframes tipIn{from{opacity:0;transform:scale(.2) rotate(-90deg)}to{opacity:1;transform:none}}
.steam{position:absolute;inset:0;width:100%;height:100%}
.steam path{fill:none;stroke:#F2DFB4;stroke-width:2.2;stroke-linecap:round;opacity:0;animation:steam 5.5s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.8s}.steam path:nth-child(3){animation-delay:3.6s}
@keyframes steam{0%{opacity:0;transform:translateY(16px)}30%{opacity:.5}100%{opacity:0;transform:translateY(-34px)}}

.mark{font:700 54px/1 "El Messiri",serif;color:var(--gold-pale);margin-top:14px;letter-spacing:.005em;display:inline-flex;align-items:baseline;text-shadow:0 0 30px rgba(221,176,98,.18)}
.mark .l{animation:rise .8s cubic-bezier(.2,.7,.2,1) both .3s}
.mark .ocup{display:inline-block;width:.74em;height:.66em;margin:0 .08em 0 .03em;animation:rise .8s cubic-bezier(.2,.7,.2,1) both .45s;filter:drop-shadow(0 0 10px rgba(69,188,174,.35))}
.mark .ocup svg{width:100%;height:100%;display:block;overflow:visible}
.mark .l+.ocup+.l{animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sw{transform-box:view-box;transform-origin:12px 12px;animation:swirl 14s linear infinite}
@keyframes swirl{to{transform:rotate(360deg)}}
.mark .dr{position:relative;display:inline-block}
.mark .dr::after{content:"";position:absolute;right:.02em;bottom:-.24em;width:11px;height:11px;box-shadow:0 0 10px rgba(69,188,174,.7);background:var(--turq);border-radius:0 50% 50% 50%;transform:rotate(45deg);animation:drip 4s ease-in-out infinite}
@keyframes drip{0%,55%{transform:translateY(0) rotate(45deg) scale(.6);opacity:.4}75%{transform:translateY(2px) rotate(45deg) scale(1);opacity:1}100%{transform:translateY(2px) rotate(45deg) scale(1);opacity:1}}
.sub{font:500 13.5px "Golos Text";color:var(--turq);margin-top:18px;letter-spacing:.02em}
.promise{font-size:16px;line-height:1.5;color:var(--ink);margin:12px 4px 0;opacity:.92;max-width:340px}
.ask{font:500 17px "El Messiri";color:var(--gold);margin:20px 0 10px}
.topics{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.topic{display:flex;align-items:center;gap:9px;min-height:48px;padding:6px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(44,26,18,.55);font-size:14.5px;line-height:1.15;text-align:left;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.topic .ic{color:var(--gold);width:20px;height:20px}
.topic[aria-checked="true"]{border-color:var(--turq);background:rgba(30,111,105,.28);box-shadow:inset 0 0 0 1px var(--turq)}
.topic[aria-checked="true"] .ic{color:var(--turq)}
.e-cta{margin-top:20px}
.today{font-size:13.5px;color:var(--turq);margin-top:10px}
.alt{display:inline-flex;align-items:center;gap:6px;margin-top:12px;min-height:40px;font-size:14px;color:var(--muted)}
.alt u{text-decoration:none;border-bottom:1px dashed rgba(188,164,140,.6);padding-bottom:1px}
.alt .ic{width:18px;height:18px;color:var(--gold)}
.alt-gift{display:flex;margin:4px auto 0;color:var(--gold-pale)}
.today.gift{color:var(--gold-pale);font-size:14.5px}

/* ===== 2. Камера ===== */
.s-cam{background:#000;padding:0;overflow:hidden}
/* --r — диаметр круга, --hl — длина ушка ручки (≈27 % диаметра); пара круг+ушко центрирована по ширине */
.vf{position:absolute;inset:0;overflow:hidden;--r:min(68vw,50vh,320px);--hl:calc(var(--r)*.27);--cy:44%}
.vf video,.vf canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0b0604}
.vf canvas{opacity:0;pointer-events:none}
.vf canvas.on{opacity:1}
.ring{position:absolute;left:calc(50% - var(--hl)/2);top:var(--cy);width:var(--r);height:var(--r);transform:translate(-50%,-50%);border-radius:50%;box-shadow:0 0 0 200vmax rgba(10,6,4,.6)}
.ring svg{position:absolute;inset:-5.2%;width:110.4%;height:110.4%}
.ring .spin{transform-box:view-box;transform-origin:149px 149px;animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.handle{position:absolute;left:calc(50% - var(--hl)/2 + var(--r)/2 - 1px);top:var(--cy);width:calc(var(--hl)*1.12);height:calc(var(--r)*.4);transform:translateY(-50%);pointer-events:none}
.handle svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 6px rgba(221,176,98,.35))}
.hint{position:absolute;left:0;right:0;top:calc(18px + var(--safe-t));text-align:center;padding:0 14px}
.hint span{display:inline-block;background:rgba(22,13,9,.72);border:1px solid var(--line);color:var(--ink);font-size:14.5px;padding:9px 16px;border-radius:20px;backdrop-filter:blur(6px)}
.ctrl{position:absolute;left:0;right:0;bottom:calc(30px + var(--safe-b));display:flex;align-items:center;justify-content:space-around;padding:0 28px}
.ctrl .sm{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:var(--ink);backdrop-filter:blur(6px)}
.ctrl .sm[aria-pressed="true"]{background:var(--gold-pale);color:#22130B}
.shutter{width:84px;height:84px;border-radius:50%;border:3px solid var(--gold-pale);display:grid;place-items:center;box-shadow:0 0 30px rgba(221,176,98,.35);transition:transform .12s}
.shutter i{width:66px;height:66px;border-radius:50%;background:var(--gold);box-shadow:inset 0 0 0 1px rgba(255,240,200,.5);transition:transform .15s}
.shutter:active i{transform:scale(.88)}
.shutter[disabled]{opacity:.45}
.flashfx{position:absolute;inset:0;background:#FFF6E2;opacity:0;pointer-events:none}
.flashfx.go{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.85}100%{opacity:0}}
.fallback{position:absolute;inset:0;z-index:5;background:var(--night) var(--orn);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 24px calc(24px + var(--safe-b));gap:12px}
.fallback .fb-ring{width:150px;height:150px;margin-bottom:8px}
.fallback .fb-hint{font-size:13px;line-height:1.4;color:var(--muted, #b9a58e);max-width:320px;margin:-4px 0 4px}
.fallback h2{font:600 26px/1.15 "El Messiri";color:var(--gold-pale)}
.fallback p{font-size:15.5px;line-height:1.5;color:var(--ink);opacity:.9;max-width:330px;margin-bottom:10px}

/* ===== 3. Ожидание ===== */
.w-wrap{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 26px 48px;text-align:center}
.orb{position:relative;width:min(280px,72vw);aspect-ratio:1}
.orb .ornring{position:absolute;inset:0;width:100%;height:100%;animation:spin 60s linear infinite}
.orb .halo{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(69,188,174,.24),transparent 68%);animation:breathe 4s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.12);opacity:.6}}
.orb .fincan{position:absolute;left:21.4%;top:27.8%;width:57.2%;height:50%}
.fincan .st path{fill:none;stroke:#F2DFB4;stroke-width:3;stroke-linecap:round;stroke-dasharray:60;animation:rise2 3.6s ease-in-out infinite}
.fincan .st path:nth-child(2){animation-delay:1.2s}.fincan .st path:nth-child(3){animation-delay:2.4s}
@keyframes rise2{0%{stroke-dashoffset:60;opacity:0;transform:translateY(6px)}40%{opacity:.75}100%{stroke-dashoffset:-60;opacity:0;transform:translateY(-14px)}}
.s-wait.err .fincan .st{display:none}
.s-wait.err .ornring{animation-play-state:paused}
.s-wait.err .halo{animation:none;opacity:.35}
.w-live{width:100%;display:flex;flex-direction:column;align-items:center}
.phr{position:relative;min-height:64px;width:100%;margin-top:28px;display:grid;place-items:center}
.phr span{font:500 25px/1.25 "El Messiri";color:var(--gold-pale);transition:opacity .45s,transform .45s}
.phr span.out{opacity:0;transform:translateY(-8px)}
.phr span.in{opacity:0;transform:translateY(10px)}
.bar{width:180px;height:2px;background:var(--line);border-radius:2px;margin-top:22px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--turq);transform-origin:left;transform:scaleX(0);transition:transform .6s ease-out;box-shadow:0 0 8px var(--turq)}
.w-note{font-size:14px;color:var(--muted);margin-top:16px}
.w-err{margin-top:26px;width:100%;max-width:380px}
.w-err h2{font:600 26px/1.2 "El Messiri";color:var(--gold-pale)}
.w-err p{font-size:16px;line-height:1.5;color:var(--ink);opacity:.9;margin-top:10px}
.w-btns{display:grid;gap:10px;margin-top:22px}

/* ===== 4. Результат ===== */
.s-result{padding-top:calc(var(--safe-t) + 4px)}
.r-head{padding:16px 20px 14px;max-width:560px;margin:0 auto}
.r-head h2{font:600 28px/1.15 "El Messiri";color:var(--gold-pale)}
.r-head p{color:var(--turq);font-size:14.5px;margin-top:4px}
.r-head .badge{display:inline-block;margin-left:8px;font:600 11px/1 "Golos Text";letter-spacing:.06em;text-transform:uppercase;color:#22130B;background:var(--gold);border-radius:8px;padding:4px 7px;vertical-align:2px;white-space:nowrap}
.r-head .badge.day{background:transparent;color:var(--turq);box-shadow:inset 0 0 0 1px rgba(69,188,174,.6)}
.plate{margin:0 16px;padding:5px;border-radius:24px;border:1px solid var(--line);background:var(--coffee);box-shadow:0 24px 50px -28px rgba(0,0,0,.9),0 0 60px -30px rgba(69,188,174,.35)}
.s-result .plate,.s-result .signs,.s-result .read,.s-result .r-btns{max-width:560px}
@media (min-width:600px){.s-result .plate{margin:0 auto}.s-result .signs,.s-result .read,.s-result .r-btns{margin-left:auto;margin-right:auto}}
.cup{position:relative;overflow:hidden;border-radius:19px;background:#120A07;aspect-ratio:var(--ar,1.65)}
.cup img{width:100%;height:100%;object-fit:cover;filter:brightness(.82) contrast(1.06)}
.cup::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(22,13,9,.55) 100%)}
.cup.dev img{filter:brightness(.35) contrast(1.1) blur(6px) saturate(.6);transform:scale(1.03)}
.cup.dev.go img{filter:brightness(.82) contrast(1.06) blur(0) saturate(1);transform:none;transition:filter 1.4s ease,transform 1.6s ease}
.ov{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:1}
.ov .area{fill:var(--turq);fill-opacity:0;transition:fill-opacity 1s ease}
.ov .sg.done .area{fill-opacity:.12}
.ov .glow{fill:none;stroke:var(--turq);stroke-width:7;stroke-opacity:.55;stroke-linejoin:round;stroke-linecap:round}
.ov .core{fill:none;stroke:#FFE9B8;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ov .st{opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.7,.5,1),opacity .2s}
.ov .st.on{opacity:1;transform:scale(1)}
.ov .st .h{fill:url(#starHalo)}
.ov .st .c{fill:#FFE7A8}
.ov .st.on .h{animation:starFlash .9s ease-out both}
@keyframes starFlash{0%{transform:scale(2.4);opacity:1}100%{transform:scale(1);opacity:.75}}
.ov .st .h{transform-box:fill-box;transform-origin:center}
.ov .sg.done .st.on .h{animation:twinkle var(--tw,3.2s) ease-in-out var(--twd,0s) infinite}
@keyframes twinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.ov .sg.pulse .core{animation:pulseLine 1.1s ease}
.ov .sg.pulse .area{animation:pulseArea 1.1s ease}
@keyframes pulseLine{40%{stroke:#fff;stroke-width:3}}
@keyframes pulseArea{40%{fill-opacity:.35}}
/* золотое свечение гущи: фото приглушено, крупинки знака разгораются — только прозрачность готовых слоёв */
.gl{position:absolute;inset:0;z-index:1;pointer-events:none}
.gl .dim{position:absolute;inset:0;background:#070403;opacity:0;transition:opacity 1s ease}
.gl.on .dim{opacity:.66}
.gl canvas.sand{position:absolute;inset:0;width:100%;height:100%;display:block}
.gf{position:absolute}
.gf canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .55s ease}
.gf .lift{transition-duration:.9s}
.gf .core{transition-duration:.45s}
.gf .rest{transition-duration:.6s}
.gf .glow{filter:blur(8px);mix-blend-mode:screen;transition-duration:1s}
.gf.l1 .lift{opacity:1}.gf.l2 .core{opacity:1}.gf.l3 .rest{opacity:1}.gf.l4 .glow{opacity:.38}
.gf.done .lift,.gf.done .core,.gf.done .rest{opacity:1}.gf.done .glow{opacity:.38}
.gl.instant .dim,.gl.instant canvas{transition:none}
.gf.pulse .glow{animation:gPulse 1.1s ease}
.gf.pulse .core,.gf.pulse .rest{animation:gPulse2 1.1s ease}
@keyframes gPulse{40%{opacity:1}}
@keyframes gPulse2{40%{filter:brightness(1.35)}}
.seals{position:absolute;inset:0;pointer-events:none;z-index:2}
.seals .med{left:var(--x);top:var(--y);transform:translate(-50%,-50%) scale(0);opacity:0}
.seals .med.on{opacity:1;transform:translate(-50%,-50%) scale(1);animation:sealIn .7s cubic-bezier(.3,1.5,.5,1) both}
@keyframes sealIn{0%{transform:translate(-50%,-50%) scale(.1) rotate(-120deg);opacity:0}60%{transform:translate(-50%,-50%) scale(1.25) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}}
.seals .med.on::before,.seals .med.on::after{animation:sealGlow 1.2s ease-out both}
@keyframes sealGlow{0%{box-shadow:0 0 30px 10px rgba(242,223,180,.9)}100%{box-shadow:0 0 12px rgba(69,188,174,.55)}}
.skip{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);z-index:3;font-size:12px;color:var(--gold-pale);background:rgba(22,13,9,.66);border:1px solid var(--line);border-radius:12px;padding:5px 10px;white-space:nowrap;pointer-events:none;animation:fadeIn .6s 2.5s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.signs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 16px 4px}
.sign{position:relative;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;border:1px solid var(--line);background:var(--coffee);text-align:left;min-width:0;transition:border-color .5s,background .5s,box-shadow .5s,opacity .5s}
.sign .med{position:relative;flex:none}
.sign .tx{min-width:0}
.sign b{display:block;font:600 18px/1.1 "El Messiri";color:var(--gold-pale);overflow-wrap:anywhere}
.sign small{display:block;font-size:13px;color:var(--muted);margin-top:3px}
.sign.wait{opacity:.35}
.sign.wait .med::before,.sign.wait .med::after{background:var(--raised2);box-shadow:none}
.sign.wait .med{color:var(--muted)}
.sign.lit{border-color:var(--turq);background:rgba(30,111,105,.3);box-shadow:0 0 26px -8px rgba(69,188,174,.8);opacity:1}
.sign.locked{border-style:dashed;background:rgba(34,20,14,.6)}
.sign.locked b{color:var(--muted);font-size:16px}

.read{padding:18px 22px 0;font-size:16px;line-height:1.66;color:var(--ink)}
.read p{opacity:0;transform:translateY(8px);transition:opacity .7s ease,transform .7s ease}
.read.show p{opacity:1;transform:none}
.read p+p{margin-top:14px}
.read .itog{margin-top:20px;padding:18px 18px 16px;border:1px solid var(--gold);border-radius:4px 22px 4px 22px;font:500 19px/1.45 "El Messiri";color:var(--gold-pale);background:rgba(44,26,18,.7)}
.read .itog .sn{font-size:12px}
.consent{margin:20px 20px 0;padding:14px 14px 12px;border:1px dashed var(--line);border-radius:16px;background:rgba(34,20,14,.6);text-align:center;animation:enter .6s ease both}
.consent p{font-size:14.5px;line-height:1.45;color:var(--muted)}
.consent-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.consent-btns .btn{min-height:44px;font-size:15px}
@media (min-width:600px){.consent{max-width:520px;margin-left:auto;margin-right:auto}}
/* нераскрытый знак: пятно видно, но ещё не прочитано */
.ov .sg.hid{opacity:0;transition:opacity 1.2s ease}
.ov .sg.hid.on{opacity:1}
.ov .sg.hid .core{stroke:#BCA48C;stroke-opacity:.6;stroke-width:1.2;stroke-dasharray:3 5!important;stroke-dashoffset:0!important}
.ov .sg.hid .area{fill:#160D09;fill-opacity:.28}
.seals .med.lock{opacity:0;transform:translate(-50%,-50%) scale(.9);transition:opacity 1.2s ease}
.seals .med.lock.on{opacity:.9;animation:none;transform:translate(-50%,-50%)}
.r-btns{display:grid;gap:10px;padding:22px 20px 0;opacity:0;transition:opacity .6s}
.r-btns.show{opacity:1}

/* ===== 5. Полное гадание ===== */
.p-wrap{padding:22px 20px 0;text-align:center;max-width:460px;margin:0 auto}
.lockcup{position:relative;width:212px;height:212px;margin:4px auto 0;border-radius:50%;padding:6px;border:1px solid var(--gold);background:var(--coffee);box-shadow:0 0 0 6px rgba(221,176,98,.06),0 0 60px -10px rgba(69,188,174,.35)}
.lockcup .in{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:#120A07 center/cover no-repeat;filter:brightness(.55) saturate(.7)}
.lockcup .seal{position:absolute;width:34px;height:34px;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;color:var(--turq);background:rgba(22,13,9,.75);border:1px solid var(--turq);animation:seal 3s ease-in-out infinite}
.lockcup .seal .ic{width:16px;height:16px}
.lockcup .seal:nth-of-type(3n+2){animation-delay:1s}.lockcup .seal:nth-of-type(3n){animation-delay:2s}
@keyframes seal{50%{box-shadow:0 0 0 7px rgba(69,188,174,.14),0 0 22px rgba(69,188,174,.5)}}
.lockcup .opened{position:absolute;width:9px;height:9px;transform:translate(-50%,-50%);border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold)}
.p-wrap h2{font:600 30px/1.15 "El Messiri";color:var(--gold-pale);margin-top:20px}
.p-wrap .lead{font-size:16px;line-height:1.55;margin-top:10px;color:var(--ink);opacity:.92}
.p-wrap .lead b{color:var(--gold-pale);font-weight:600;white-space:nowrap}
.p-or{font-size:13px;color:var(--muted);margin-top:16px}
.packs{display:grid;gap:8px;margin-top:20px;text-align:left}
.pack{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border-radius:16px;border:1px solid var(--line);background:var(--coffee);text-align:left;transition:border-color .2s,background .2s}
.pack .rd{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--muted);flex:none;display:grid;place-items:center}
.pack[aria-checked="true"]{border-color:var(--gold);background:var(--raised);box-shadow:inset 0 0 0 1px var(--gold)}
.pack[aria-checked="true"] .rd{border-color:var(--gold);background:var(--gold)}
.pack[aria-checked="true"] .rd::after{content:"";width:8px;height:8px;border-radius:50%;background:#22130B}
.pack .nm{flex:1;min-width:0}
.pack .nm b{display:block;font:600 17px/1.2 "El Messiri";color:var(--gold-pale)}
.pack .nm small{font-size:13px;color:var(--muted)}
.pack .pr{font:600 17px "Golos Text";color:var(--gold);display:flex;align-items:center;gap:4px;white-space:nowrap}
.pack .tag{display:inline-block;margin-left:6px;font:600 10.5px/1 "Golos Text";color:#22130B;background:var(--turq);border-radius:7px;padding:3px 6px;vertical-align:2px;letter-spacing:.02em}
.p-cta{margin-top:18px}
.p-note{font-size:13px;color:var(--muted);margin-top:10px}

.ioshelp{margin-top:14px;border:1px solid rgba(69,188,174,.45);border-radius:16px;background:rgba(30,111,105,.14);text-align:left;overflow:hidden}
.ih-q{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 14px;font:500 15px "Golos Text";color:var(--turq);text-align:left}
.ih-q .ic{width:18px;height:18px;transform:rotate(-90deg);transition:transform .25s}
.ih-q[aria-expanded="true"] .ic{transform:rotate(90deg)}
.ih-a{padding:0 14px 14px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ih-a p+p{margin-top:8px}
.ih-steps{margin:8px 0 0;padding-left:22px;display:grid;gap:4px}
.ih-steps li::marker{color:var(--gold);font-weight:600}
.ih-steps b{color:var(--gold-pale)}
.ih-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.ih-btns .btn{min-height:46px;font-size:14.5px;padding:0 8px;line-height:1.2}
.ih-addr{position:absolute;left:-9999px;opacity:0}
.ih-small{font-size:12.5px;color:var(--muted);margin-top:10px}
.ih-a p.ih-small+p{margin-top:10px}
.ioshelp.flash{animation:ihFlash 1.2s ease}
@keyframes ihFlash{30%{box-shadow:0 0 0 3px rgba(69,188,174,.45),0 0 24px rgba(69,188,174,.4)}}

/* ===== 6. Поделиться ===== */
.sh-wrap{padding:22px 20px 0;max-width:460px;margin:0 auto}
.sh-wrap h2{font:600 22px "El Messiri";color:var(--gold-pale);text-align:center;margin-bottom:12px}
.card{position:relative;border-radius:26px;padding:22px 18px 18px;background:#1C100B var(--orn);border:1px solid var(--gold);text-align:center;box-shadow:0 30px 60px -24px rgba(0,0,0,.9)}
.card::before{content:"";position:absolute;inset:6px;border-radius:21px;border:1px solid var(--line);pointer-events:none}
.card .brand{font:700 24px/1 "El Messiri";color:var(--gold-pale)}
.mini-mark{display:inline-flex;align-items:baseline}
.mini-mark svg{width:.74em;height:.66em;margin:0 .07em 0 .03em}
.card .brand small{display:block;font:500 11px "Golos Text";color:var(--turq);margin-top:6px;letter-spacing:.03em}
.card h3{font:600 26px/1.1 "El Messiri";color:var(--gold-pale);margin:14px 0 12px}
.card .cup{border-radius:16px}
.card q{display:block;font:500 18px/1.4 "El Messiri";color:var(--ink);margin:14px 6px 0;quotes:"«" "»"}
.card .names{font-size:12.5px;color:var(--muted);margin-top:8px}
.card .bot{font:600 13px "Golos Text";color:var(--turq);margin-top:12px}
.sh-btns{display:grid;gap:10px;margin-top:18px}

/* ===== 0. Посадочная (обычный браузер) ===== */
html.pre-landing:not(.booted) #s-landing,html.pre-app:not(.booted) #s-entry{display:block!important}
.s-landing{background:radial-gradient(90% 60% at 50% 30%,rgba(69,188,174,.08),transparent 70%)}
.l-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:480px;margin:0 auto;padding:clamp(22px,5vh,48px) 20px 0;position:relative}
.l-wrap .mark{margin-top:0}
.l-wrap .sub{margin-top:14px}
.l-promise{font:500 21px/1.35 "El Messiri",serif;color:var(--gold-pale);margin:14px 4px 0;max-width:400px}
.l-plate{width:100%;margin:20px 0 0}
.l-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px;min-height:34px}
.l-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 6px;border-radius:17px;border:1px solid var(--line);background:var(--coffee);font:600 15px "El Messiri";color:var(--gold-pale);opacity:.35;transition:opacity .5s,border-color .5s,background .5s,box-shadow .5s}
.l-chip .med{position:relative;width:22px;height:22px;font-size:13px}
.l-chip.on{opacity:1}
.l-chip.lit{border-color:var(--turq);background:rgba(30,111,105,.3);box-shadow:0 0 22px -6px rgba(69,188,174,.8)}
.l-replay{margin-top:2px}
.l-cta{margin-top:18px;text-decoration:none;min-height:60px;font-size:17px;line-height:1.2;text-align:center}
.l-cta .ic{width:20px;height:20px}
.l-h{font:600 26px/1.15 "El Messiri";color:var(--gold-pale);margin-top:40px}
.l-steps{list-style:none;display:grid;gap:10px;width:100%;margin-top:16px;text-align:left}
.l-steps li{display:flex;align-items:center;gap:14px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--coffee)}
.l-steps .med{position:relative;flex:none;width:28px;height:28px;font-size:16px}
.l-steps b{display:block;font:600 18px/1.15 "El Messiri";color:var(--gold-pale)}
.l-steps small{display:block;font-size:14px;line-height:1.4;color:var(--muted);margin-top:3px}
.l-facts{display:grid;gap:8px;width:100%;margin-top:18px}
.l-fact{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:16px;border:1px solid rgba(69,188,174,.45);background:rgba(30,111,105,.16);font-size:15.5px;line-height:1.35;text-align:left;color:var(--ink)}
.l-fact .ic{color:var(--gold);width:22px;height:22px}
.s-landing{scroll-behavior:smooth}
.l-h{scroll-margin-top:18px}
#bez-kofe{scroll-margin-top:18px}
.l-plate .cup{--ar:1}
.l-shot{display:flex;align-items:center;gap:14px;width:100%;margin-top:14px;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--coffee);text-align:left}
.l-scheme{width:110px;height:94px;flex:none}
.l-tips{list-style:none;display:grid;gap:7px;font-size:14.5px;line-height:1.35;color:var(--muted)}
.l-tips b{color:var(--gold-pale);font:600 16px "El Messiri"}
.l-price{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:14px}
.l-pr{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-radius:16px;border:1px solid var(--line);background:var(--coffee)}
.l-pr:first-child{border-color:rgba(69,188,174,.55);background:rgba(30,111,105,.16)}
.l-pr i{font:600 12px/1.2 "Golos Text";font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--turq)}
.l-pr b{font:600 22px/1.1 "El Messiri";color:var(--gold-pale)}
.l-pr b small{font:500 14px "Golos Text";color:var(--muted)}
.l-pr .star{color:var(--gold);width:.8em;height:.8em}
.l-pr span{font-size:14px;line-height:1.35;color:var(--muted)}
.l-pnote{font-size:13px;color:var(--muted);margin-top:8px}
.l-house{width:100%;margin-top:22px}
.l-house b{color:var(--gold-pale)}
.l-foot{line-height:1.7}
.fine a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(188,164,140,.45);text-underline-offset:2px}
.fine .credit{font-size:11.5px;opacity:.85}
.s-landing .fine{padding-top:16px}
@media (max-width:350px){.l-shot{flex-direction:column;text-align:center}.l-price{grid-template-columns:1fr}}
@media (min-width:768px){.l-wrap{padding-top:56px}.l-promise{font-size:23px}}
@media (max-width:420px){.l-cta .ic{display:none}.l-cta{font-size:16px;padding:0 12px}}

/* лист «сохранить картинку» */
.sheet{position:fixed;inset:0;z-index:50;background:rgba(10,6,4,.86);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px 20px calc(20px + var(--safe-b));animation:fadeIn .25s}
.sheet-in{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.sheet img{width:100%;max-height:68vh;object-fit:contain;border-radius:18px;box-shadow:0 30px 60px -20px #000;-webkit-touch-callout:default;user-select:auto}
.sheet p{font-size:14.5px;color:var(--ink)}

/* всплывающая подсказка */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,20px);z-index:60;max-width:calc(100% - 32px);background:rgba(44,26,18,.96);border:1px solid var(--line);color:var(--ink);font-size:14.5px;line-height:1.4;padding:11px 16px;border-radius:14px;box-shadow:0 14px 30px -10px #000;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-height:700px){.mark{font-size:46px}.ask{margin-top:14px}.e-cta{margin-top:14px}.promise{font-size:15px}}
@media (max-width:350px){.topic{font-size:13.5px;padding:6px 9px;gap:7px}.signs{grid-template-columns:1fr}}

/* меньше движения — знаки и всё прочее видны сразу */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .arch .fr1,.arch .fr2{stroke-dashoffset:0}
  .arch .tip{opacity:1}
  .dust{display:none}
  .s-landing{scroll-behavior:auto}
}
/* «Показать ещё раз» занимает место заранее — чтобы прокрутка к якорю не съезжала, когда кнопка появится */
.l-replay[hidden]{display:inline-flex!important;visibility:hidden}