@charset "UTF-8";
:root{
  color-scheme:light;
  --wine:#7a2341;--wine-2:#621b34;--wine-deep:#3e0e1f;--rose:#b4506b;
  --gold:#d6ad6e;--gold-2:#b48647;--gold-soft:#ecd3a4;
  --cream:#fbf3e7;--paper:#fffaf2;--paper-2:#f7ecdb;--ink:#3b2028;--ink-2:#5b3a40;--muted:#7d6260;--line:#e6d2b5;--line-2:#d4b994;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;--sans:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow-1:0 1px 2px rgba(60,20,30,.06),0 4px 14px rgba(60,20,30,.08);
  --shadow-2:0 2px 6px rgba(60,20,30,.08),0 16px 36px rgba(60,20,30,.16);
  --ease-out:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;min-width:280px;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:#2a0915 radial-gradient(120% 80% at 50% 0%,#6d1e39 0%,#3a0d1d 55%,#1f0610 100%);color:var(--ink);font:16px/1.5 var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.5;background:radial-gradient(circle at 12% 22%,#d6ad6e33 0 2px,transparent 3px),radial-gradient(circle at 84% 14%,#d6ad6e2a 0 3px,transparent 4px),radial-gradient(circle at 76% 72%,#d6ad6e22 0 2px,transparent 3px),radial-gradient(circle at 20% 84%,#ff9fb422 0 3px,transparent 4px),radial-gradient(60% 40% at 50% 100%,#d6ad6e18,transparent)}
button,input{font:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation;flex-shrink:0}
button:disabled{cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}

/* Каркас приложения: на телефоне — во весь экран, на компьютере — аккуратная «карточка-телефон». */
#app{position:fixed;top:var(--visual-offset,0px);left:50%;transform:translateX(-50%);isolation:isolate;width:100%;max-width:480px;height:var(--app-height,100dvh);max-height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;background:var(--cream)}
@media (min-width:560px) and (min-height:700px){
  #app{top:50%;transform:translate(-50%,-50%);max-width:440px;height:min(calc(var(--app-height,100dvh) - 48px),900px);border-radius:32px;box-shadow:0 0 0 1px #ffdcb414,0 30px 80px #0a00058c,0 0 140px #d6ad6e1f}
}

.topbar{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:calc(58px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 12px 0 18px;background:linear-gradient(180deg,#6e1f3a,#58172f);color:#fbeedb}
.wordmark{min-height:48px;display:flex;flex-direction:column;justify-content:center;gap:1px;font:italic 600 21px/1.05 var(--serif);text-decoration:none;color:inherit}
.wordmark span{font:700 9px/1.6 var(--sans);font-style:normal;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);opacity:.85}
.icon-btn{width:48px;height:48px;display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid #ecd3a459;background:#ffffff0f;color:#fbeedb;transition:background .2s,border-color .2s,scale .15s var(--ease-out)}
.icon-btn:hover{background:#ffffff1f}.icon-btn:active{scale:.92}
.icon-btn svg{width:22px;height:22px}
.sound-off{display:none}#sound[aria-pressed=false] .sound-on{display:none}#sound[aria-pressed=false] .sound-off{display:inline}#sound[aria-pressed=false]{color:#e7c9bb;border-color:#ecd3a433}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ecd3a41f}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));transform-origin:0 50%;transform:scaleX(0);transition:transform 1s var(--ease-out);box-shadow:0 0 8px #ecd3a499}

/* Сцена */
.stage{position:relative;isolation:isolate;min-height:0;overflow:hidden;background:radial-gradient(120% 75% at 50% 6%,#fffaf0 0%,#f7ead4 45%,#e8d2b1 100%)}
.curtain-fill{position:absolute;inset:0;z-index:0;pointer-events:none;background:repeating-linear-gradient(90deg,#4a1222 0,#8a2c46 15px,#b04a63 23px,#76223c 33px,#4a1222 49px)}
.stage:before,.stage:after{content:"";position:absolute;top:0;bottom:0;width:14px;z-index:6;pointer-events:none;background:linear-gradient(90deg,#3a0c1c,#7c2840 62%,#4f1427);box-shadow:2px 0 6px #2a071330}
.stage:before{left:0}.stage:after{right:0;transform:scaleX(-1)}
.stage>.valance{position:absolute;top:0;left:0;width:100%;height:36px;z-index:6;pointer-events:none;filter:drop-shadow(0 3px 4px #28050f40)}
#world{position:absolute;inset:0;z-index:1;pointer-events:none}#world>svg{display:block;width:100%;height:100%;overflow:visible}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(130% 90% at 50% 42%,transparent 62%,#3c0f192e 100%)}
.dust{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;opacity:.55}
.dust:before{content:"";position:absolute;left:0;right:0;top:0;height:200%;background-image:radial-gradient(#f3d39a 1px,transparent 1.6px),radial-gradient(#fff2d6 .8px,transparent 1.3px);background-size:73px 97px,51px 67px;background-position:0 0,23px 31px;animation:dust 40s linear infinite;will-change:transform}
.content{position:absolute;inset:0;min-height:0;z-index:4;padding:46px 26px 14px;text-align:center;overflow:hidden}
.ghost{pointer-events:none}

/* Типографика */
.eyebrow{font:700 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;margin:0 0 12px;color:#9a6c52;transition:color .6s}
h1{font:600 clamp(54px,15.5vw,74px)/.95 var(--serif);letter-spacing:-.015em;margin:6px 0 14px;color:var(--ink);transition:color .6s}
h1 i{color:var(--wine);font-weight:600}
h2{font:600 clamp(30px,8.6vw,38px)/1.05 var(--serif);margin:0 0 12px;text-wrap:balance;letter-spacing:-.005em;color:var(--ink);transition:color .6s}
.subline{font:500 16px/1.55 var(--sans);margin:12px auto 0;max-width:320px;text-wrap:balance;color:var(--ink-2);transition:color .6s}
.closed .eyebrow{color:var(--gold-soft)}
.closed h1,.closed h2{color:#fff3e2;text-shadow:0 2px 22px #1e050c73}
.closed h1 i{color:#ffd9a8}
.closed .subline{color:#f6dccb}

/* Нижняя строка кнопок */
.actions{position:relative;z-index:8;min-height:76px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 18px max(12px,env(safe-area-inset-bottom));background:var(--cream);box-shadow:0 -1px 0 #e3cdb0,0 -10px 24px #5a1c2e14;overflow:hidden}
.actions>*{animation:rise-in .45s var(--ease-out) both}
.actions>*:nth-child(2){animation-delay:.07s}
.btn{min-height:52px;min-width:0;padding:12px 22px;border:1px solid var(--line-2);border-radius:999px;font:700 16px/1.2 var(--sans);letter-spacing:.01em;color:var(--ink);background:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:8px;text-align:center;text-decoration:none;box-shadow:inset 0 1px 0 #fff,0 3px 10px #501e2814;transition:background .2s,box-shadow .2s,scale .15s var(--ease-out),opacity .2s}
.btn:hover{background:#f6eadb}.btn:active:not(:disabled){scale:.97}
.btn:disabled{opacity:.7}
.btn-primary{background:linear-gradient(180deg,#8c2b4b,#6b1e39);border-color:#5e1a32;color:#fff6e8;box-shadow:inset 0 1px 0 #ffffff2e,0 8px 20px #6e1e3747}
.btn-primary:hover{background:linear-gradient(180deg,#94304f,#5f1a33)}
.btn-quiet{background:transparent;box-shadow:none}
.btn-grow{flex:1;max-width:300px}
.loading,.footer-note{font:500 13px/1.4 var(--sans);color:var(--muted);text-align:center;margin:0}
.footer-note:not(:only-child){display:none}

/* Приветствие */
.greeting-button{background:transparent;border:0;padding:0;color:inherit;display:block;margin:0 auto;font:inherit}
.greeting-button:focus-visible{outline-offset:8px;border-radius:8px}
.letter-char{display:inline-block;will-change:transform,opacity}
.drop .letter-char{animation:letter-drop .8s cubic-bezier(.42,0,.9,.4) forwards;animation-delay:calc(var(--i)*.025s)}
.drop .ornament,.drop .subline,.drop .tap-note,.drop .eyebrow{transition:opacity .4s;opacity:0}
.ornament{display:flex;align-items:center;justify-content:center;gap:10px;width:150px;margin:2px auto 0;color:var(--gold)}
.ornament:before,.ornament:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,currentColor)}
.ornament:after{transform:scaleX(-1)}
.ornament svg{width:13px;height:13px;flex:none;animation:heartbeat 1.8s ease-in-out infinite}
.tap-note{display:inline-flex;align-items:center;gap:7px;margin:20px 0 0;padding:9px 15px 9px 12px;border-radius:999px;font:600 12.5px/1 var(--sans);letter-spacing:.03em;color:#f6dccb;background:#ffffff14;border:1px solid #ecd3a447;animation:breathe 2.8s ease-in-out infinite}
.tap-note svg,.paper-instruction svg{width:17px;height:17px;flex:none}

/* Кино */
.film-content{display:grid;grid-template-rows:auto auto minmax(80px,1fr) auto minmax(36px,auto);gap:10px;padding:40px 26px 10px}
.film-content h2{font-size:clamp(28px,8vw,34px);margin:0}
.film-counter{display:flex;align-items:center;justify-content:space-between;min-height:16px;color:#9a6c52;font:700 10px/1 var(--sans);letter-spacing:.16em}
.film-counter{grid-row:1}.film-content>h2{grid-row:2}.film-content>.screen{grid-row:3}#film-options{grid-row:4}#film-result{grid-row:5}
.film-dots{display:flex;gap:5px}.film-dots i{width:16px;height:4px;border-radius:4px;background:#dcc7a8;transition:background .4s}.film-dots i.active{background:var(--wine)}
.screen{position:relative;width:100%;height:100%;max-height:300px;min-height:0;align-self:center;border-radius:16px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(120% 90% at 50% 30%,#3b2b36,#1c141b);color:#f6e9d4;box-shadow:0 0 0 4px #2a1f26,0 0 0 5px #d6ad6e80,0 16px 32px #320f1947}
.screen:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 40px #0006}
.screen video{display:block;width:100%;height:calc(100% - 46px);object-fit:contain;position:absolute;top:0;left:0;background:#1a1419}
.screen-id{position:absolute;top:12px;left:14px;z-index:1;font:700 9px/1 var(--sans);letter-spacing:.16em;color:#cdb3a4}
.film-screen-start{position:relative;z-index:3;display:inline-flex;align-items:center;gap:8px;min-width:132px;min-height:54px;padding:10px 24px 10px 18px;border:1px solid #d6ad6e99;border-radius:999px;background:linear-gradient(180deg,#4a3442,#33242f);color:#fbeedb;font:600 24px/1 var(--serif);box-shadow:0 8px 20px #0006,0 0 0 6px #d6ad6e14;transition:scale .15s var(--ease-out),box-shadow .3s;animation:glow 2.6s ease-in-out infinite}
.film-screen-start svg{width:20px;height:20px;color:var(--gold-soft)}
.film-screen-start:active{scale:.96}
.media-tap{max-width:90%;font-size:19px;padding-left:22px}
.screen-error{position:relative;z-index:3;padding:14px;font-size:14px}.screen-error p{margin:0}
.screen-loader{position:absolute;top:calc(50% - 41px);left:calc(50% - 18px);z-index:2;width:36px;height:36px;border-radius:50%;border:3px solid #ffffff26;border-top-color:var(--gold-soft);opacity:0;transition:opacity .3s;animation:spin .9s linear infinite;pointer-events:none}
.screen.loading .screen-loader{opacity:1}
.media-controls{position:absolute;inset:auto 0 0;height:46px;z-index:4;display:flex;align-items:center;gap:6px;padding:0 12px 0 0;background:linear-gradient(180deg,#221a22,#1a1419);color:#f7ead6}
.video-control{position:relative;z-index:1;min-width:48px;height:46px;padding:0;border:0;background:transparent;color:#f6e8ce;font-size:15px}
.video-control:disabled{opacity:.45}
.video-progress{display:block;appearance:none;-webkit-appearance:none;width:0;flex:1;height:4px;min-width:30px;border:0;border-radius:4px;overflow:hidden;background:#5d4b57;color:var(--gold)}
.video-progress::-webkit-progress-bar{background:#5d4b57;border-radius:4px}.video-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--gold-2),var(--gold-soft));border-radius:4px}.video-progress::-moz-progress-bar{background:var(--gold)}
.video-time{min-width:66px;text-align:right;white-space:nowrap;font:600 10.5px/1 var(--sans);font-variant-numeric:tabular-nums;color:#e8d8c2}
#film-options:empty{display:none}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.answer{position:relative;display:flex;align-items:center;gap:9px;min-height:56px;min-width:0;padding:8px 10px 8px 9px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink);font:600 14.5px/1.2 var(--sans);text-align:left;box-shadow:var(--shadow-1);transition:background .2s,border-color .2s,scale .15s var(--ease-out),opacity .3s;animation:rise-in .45s var(--ease-out) both;animation-delay:calc(var(--i,0)*70ms)}
.answer-text{min-width:0;text-wrap:balance;overflow-wrap:anywhere}
.answer-key{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#f3e4cf;color:#8a5a43;font:700 12px/1 var(--sans);transition:background .25s,color .25s}
.answer:hover:not(:disabled){background:#fbf0e0;border-color:var(--line-2)}
.answer:active:not(:disabled){scale:.97}
.answer:disabled{cursor:default}
.answer.correct{background:#eef5e6;border-color:#8eab73;color:#2f4a28;animation:pop .5s var(--spring)}
.answer.correct .answer-key{background:#6f9256;color:#fff}
.answer.wrong{background:#f9ebea;border-color:#d19aa1;color:#7a4450;animation:shake .45s ease}
.answer.wrong:disabled{opacity:.66}
.answer.wrong .answer-key{background:#e9c5c9;color:#7a4450}
.result{margin:0;font:500 14px/1.4 var(--sans);color:#654634}
#film-result{display:flex;align-items:center;justify-content:center;min-height:36px;padding:3px 6px;text-wrap:balance}
/* Подсказка в кино — как короткое сообщение от ведущего с его аватаркой. */
#film-result:not(:empty){justify-content:flex-start;gap:10px;padding:8px 12px 8px 8px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-1);text-align:left;font-weight:600;color:var(--ink-2)}
#film-result:not(:empty):before{content:"";flex:none;width:34px;height:34px;border-radius:50%;background:#f3e4cf url(assets/character/head-448.png) center 30%/150% no-repeat;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line-2)}
#film-result.success{background:#eef5e6;border-color:#b8cfa2;color:#2f4a28}
#film-result.replay{animation:rise-in .4s var(--ease-out)}
.point-hand{display:none}

/* Вопросы о нас */
.question-content{display:flex;flex-direction:column;gap:10px;padding-top:42px}
.question-content .eyebrow,.question-content h2{margin:0}
.question-content h2{font-size:clamp(30px,8.6vw,36px)}
.question-card{margin:4px 0 0;padding:18px;background:var(--paper);border:1px solid var(--line);border-radius:20px;text-align:left;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-2)}
.question-card label{display:none}
.question-card input{width:100%;min-height:56px;max-height:60px;padding:10px 14px;border:1.5px solid var(--line-2);border-radius:14px;background:#fffdf9;color:var(--ink);font:700 22px/1 var(--sans);letter-spacing:.08em;text-align:center;font-variant-numeric:tabular-nums;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.question-card input:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 4px #d6ad6e40}
.question-card input::placeholder{font:500 16px/1 var(--sans);letter-spacing:.04em;color:#a8907e}
.question-card input:disabled{opacity:1;background:#f0f6ea;border-color:#a9c294;color:#2f4a28}
.question-card input[aria-invalid=true]{border-color:#c98b93}
.question-card input.shake{animation:shake .45s ease}
.field-note{margin:0;font:500 12.5px/1.35 var(--sans);color:#86705f;text-align:center;text-wrap:balance}
.validation{margin:0;font:600 13px/1.35 var(--sans);color:#a03f57;text-align:center}
.validation:empty,#personal-result:empty{display:none}
.personal-result{padding:12px 14px;border-radius:14px;background:#f8eedd;border:1px dashed #d8b98c;text-align:center;animation:rise-in .4s var(--ease-out) both}
.personal-result.success{background:#eef5e6;border:1px solid #b8cfa2}.personal-result.success .result{color:#2f4a28;font-weight:700}
.hint-title{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 5px;font:700 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#9a6c4a}
.hint-title:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px #d6ad6e40}
.question-card:has(.hint-card) .field-note{display:none}

/* Обращение */
.speech-content{padding-top:46px}
.speech-card{position:relative;margin:0 auto;max-width:400px;padding:24px 22px 20px;background:var(--paper);border:1px solid var(--line);border-radius:22px;text-align:left;font:600 24px/1.36 var(--serif);color:var(--ink);box-shadow:0 18px 40px #1e050c40}
.speech-card:before{content:"\201C";position:absolute;top:-6px;left:14px;font:700 54px/1 var(--serif);color:var(--gold)}
.speech-card:after{content:"";position:absolute;bottom:-9px;left:calc(50% - 8px);width:16px;height:16px;transform:rotate(45deg);background:var(--paper);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.speech-card p{margin:0;text-wrap:pretty}
.word{display:inline-block;animation:word-in .55s var(--ease-out) both;animation-delay:calc(var(--w)*42ms + 160ms)}
.speech-count{display:flex;justify-content:center;gap:7px;margin:18px 0 0}
.speech-count i{width:7px;height:7px;border-radius:50%;background:#ffffff40;transition:background .4s,width .4s}
.speech-count i.seen{background:#ecd3a499}.speech-count i.active{width:22px;border-radius:4px;background:var(--gold-soft)}

/* Предложение */
.proposal-content{padding-top:48px}
.proposal-content h2{max-width:300px;margin:0 auto}
.proposal-action{position:relative;display:block;margin:28px auto 0;min-height:56px;padding:10px 40px;border:1px solid #e0b77a;border-radius:999px;background:linear-gradient(180deg,#fff7e8,#f6dfb8);color:var(--wine);font:700 30px/1 var(--serif);letter-spacing:.02em;box-shadow:inset 0 1px 0 #fff,0 12px 28px #1e050c59;transition:scale .15s var(--ease-out)}
.proposal-action:before{content:"";position:absolute;inset:-1px;border-radius:inherit;border:2px solid #ecd3a4;animation:ring 2.2s ease-out infinite;pointer-events:none}
.proposal-action:hover{background:linear-gradient(180deg,#fffaf0,#f2d6a8)}
.proposal-action:active{scale:.95}

/* Конверт → открытка → листок → приглашение. Механика слоёв не меняется. */
.paper-content{display:flex;flex-direction:column;align-items:center;padding:42px 20px 12px;perspective:1000px}
.paper-content>.eyebrow{color:var(--gold-soft)}.paper-content>h2{color:#fff3e2}
.paper-instruction{display:inline-flex;align-items:center;gap:7px;margin:18px 0 auto;padding:8px 14px 8px 11px;border-radius:999px;font:600 12.5px/1 var(--sans);color:#fbe7d6;background:#3e0e1fa6;border:1px solid #ecd3a44d;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:breathe 2.8s ease-in-out infinite}
.envelope{position:relative;display:block;flex-shrink:0;width:min(290px,100%);height:190px;border:0;padding:0;background:transparent;perspective:1000px;margin:auto auto 0;filter:drop-shadow(0 16px 18px #1e050c59);animation:envelope-rise .8s cubic-bezier(.18,.8,.25,1) both,float 3.2s ease-in-out 1s infinite;transform-style:preserve-3d}
.envelope:disabled:not(.opening){cursor:default}
.envelope-back{position:absolute;inset:0;border-radius:6px;background:#d8b68d;border:1px solid #b48a65;z-index:1}
.paper-pocket{position:absolute;top:-180px;left:17px;right:17px;bottom:0;overflow:hidden;z-index:2;pointer-events:none}
.envelope-note{position:absolute;bottom:16px;left:0;right:0;height:158px;border:1px solid #dcc39c;border-radius:4px;background:linear-gradient(180deg,#fffaf0,#fbecd2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font:600 21px var(--serif);color:var(--wine);transition:transform .85s cubic-bezier(.2,.7,.2,1);box-shadow:0 2px 8px #6f46251f}
.envelope-note i{font:italic 600 36px/1 var(--serif)}
.envelope-front{position:absolute;inset:0;border-radius:0 0 6px 6px;clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%);background:linear-gradient(145deg,#efd6b1,#d9b387);z-index:4}
.envelope-front:after{content:"";position:absolute;inset:0;clip-path:polygon(0 100%,50% 43%,100% 100%);background:linear-gradient(180deg,#f3d6b0,#e6c39a)}
.envelope-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 55%);background:linear-gradient(180deg,#f7dcb6,#ecca9d);transform-origin:50% 0;z-index:5;backface-visibility:hidden}
.seal{position:absolute;left:calc(50% - 23px);top:72px;width:46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#a8455f,#7a2341 70%);border:3px double #c97a8b;z-index:6;display:grid;place-content:center;font:italic 600 26px/1 var(--serif);color:#f3c6bf;box-shadow:0 3px 8px #4a0f2266;transition:opacity .2s}
.envelope:not(:disabled):not(.opening) .seal{animation:seal 2.4s ease-in-out infinite}
.envelope.opening .seal{opacity:0}.envelope.opening .envelope-flap{animation:flap-lift .55s ease forwards}.envelope.opening .envelope-note{transform:translateY(-150px);transition-delay:.48s}
.paper-content:has(.envelope.opening)>.eyebrow,.paper-content:has(.envelope.opening)>h2,.paper-content:has(.envelope.opening)>.paper-instruction{opacity:0;transition:opacity .2s}
.envelope.opening{animation:envelope-settle 1.5s ease forwards}
.postcard{position:relative;display:block;width:min(270px,100%);height:228px;min-height:0;border:0;background:transparent;color:var(--ink);margin:auto auto 0;padding:0;perspective:1000px;transform-style:preserve-3d;animation:paper-appear .55s var(--ease-out) both,float 3.2s ease-in-out 1s infinite}
.postcard-inside{position:absolute;inset:0;border-radius:6px;background:#f6e7cb;border:1px solid #c6a16f;display:grid;place-content:center;padding:20px;color:#9b8063;font:italic 600 21px var(--serif)}
.postcard-cover{position:absolute;inset:0;border-radius:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px 18px;background:linear-gradient(160deg,#fffaf0,#fbecd3);border:1px solid #c6a16f;box-shadow:0 16px 30px #1e050c4d;transform-origin:0 50%;transition:transform .7s ease;backface-visibility:hidden}
.postcard-cover:before{content:"";position:absolute;inset:10px;border:1px solid #bf9b6a66;border-radius:3px;pointer-events:none}
.postcard-title{font:italic 600 34px/1.05 var(--serif);color:var(--wine)}
.postcard small{font:700 10px/1 var(--sans);letter-spacing:.2em;color:#8f6a4f}
.paper-flower{width:45px;height:45px;display:block;color:#a04560}
.postcard.unfolding .postcard-cover{transform:rotateY(-150deg)}
.folded-sheet{position:relative;display:block;flex-shrink:0;width:min(260px,100%);height:160px;min-height:0;margin:auto auto 0;padding:0;border:0;background:transparent;color:var(--ink);perspective:900px;transform:rotate(-4deg);animation:paper-appear .55s var(--ease-out) both,float 3.2s ease-in-out 1s infinite}
.sheet-base,.sheet-top,.sheet-bottom{position:absolute;left:0;right:0;background:#fff3db;border:1px solid #c4a473;box-shadow:0 10px 22px #1e050c40}
.sheet-base{inset:0}
.sheet-top{top:0;height:50%;transform-origin:50% 100%;transition:transform .75s ease;backface-visibility:hidden;background:linear-gradient(180deg,#fffaf0,#fbefd9)}
.sheet-bottom{bottom:0;height:50%;transform-origin:50% 0;transition:transform .75s ease;backface-visibility:hidden;background:linear-gradient(180deg,#f9ebd2,#f4e1c2)}
.sheet-label{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .2s}
.sheet-label>span{font:italic 600 31px/1 var(--serif);color:var(--wine)}
.sheet-label small{font:700 10px/1 var(--sans);letter-spacing:.14em;color:#8a6a52}
.folded-sheet.unfolding .sheet-top{transform:rotateX(-170deg)}.folded-sheet.unfolding .sheet-bottom{transform:rotateX(170deg)}.folded-sheet.unfolding .sheet-label{opacity:0}
.invitation{position:relative;margin:auto;width:100%;max-width:330px;padding:24px 20px 22px;background:linear-gradient(170deg,#fffcf6,#fbefdc);border:1px solid #c9a676;border-radius:8px;box-shadow:0 20px 44px #1e050c66;animation:invitation-in .7s var(--ease-out) both;color:var(--ink)}
.invitation:before{content:"";position:absolute;inset:8px;border:1px solid #c9a6765c;border-radius:4px;pointer-events:none}
.invitation:after{content:"";position:absolute;inset:12px;border:1px solid #c9a67633;border-radius:3px;pointer-events:none}
.invitation .eyebrow{margin:6px 0 10px;font-size:9.5px;color:#9a6c52}
.invitation h2{margin:0 0 4px;font:italic 600 46px/1.05 var(--serif);color:var(--wine);text-shadow:none}
.invitation .invite-line{margin:0 0 16px;font:600 23px/1.3 var(--serif);color:var(--ink)}
.invite-details{position:relative;margin:0 auto 16px;padding:12px 0 0;max-width:240px}
.invite-details:before{content:"";position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.invite-date{margin:0 0 4px;font:700 26px/1.15 var(--serif);color:var(--ink)}
.invite-place{margin:0;font:700 15px/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--wine)}
.invite-address{margin:2px 0 0;font:500 15px/1.4 var(--sans);color:#7a5b4c}
.invite-close{margin:0 auto;max-width:250px;font:italic 600 20px/1.3 var(--serif);color:var(--ink-2)}
.invitation .paper-flower{margin:0 auto 4px;width:38px;height:38px}

/* Финалы */
.end-content{padding-top:48px}
.end-content h2{font-size:clamp(34px,10vw,44px)}
.end-content .subline{max-width:280px}
.end-date{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:18px 0 0;padding:10px 18px;border:1px solid #d9b78a;border-radius:999px;background:#fff6e6;font:700 14px/1.2 var(--sans);color:var(--wine);box-shadow:var(--shadow-1);animation:pop .6s var(--spring) .4s both}
.end-date svg{width:15px;height:15px;color:var(--rose);animation:heartbeat 1.6s ease-in-out infinite}
.stage,.actions,.topbar{transition:filter 1.4s ease,background 1.4s ease}
.sad-ending .stage,.sad-ending .actions{filter:saturate(0) brightness(.97)}
.sad-ending .topbar{background:#4a4448}
.sad-ending .end-content .subline{color:#d4ccca}
#fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}

/* Облачко с репликой ведущего */
.bubble{position:absolute;left:0;top:0;z-index:7;pointer-events:none;padding:8px 14px;border-radius:16px;background:#fffdf8;border:1px solid #ecd9bd;color:var(--wine);font:800 15px/1.2 var(--sans);white-space:nowrap;box-shadow:0 8px 22px #3c141e33;opacity:0;scale:.6;transform-origin:var(--tail,50%) 100%;transition:opacity .25s,scale .25s}
.bubble:after{content:"";position:absolute;bottom:-7px;left:calc(var(--tail,50%) - 7px);width:13px;height:13px;transform:rotate(45deg);background:#fffdf8;border-right:1px solid #ecd9bd;border-bottom:1px solid #ecd9bd}
.bubble.show{opacity:1;scale:1;transition:opacity .2s,scale .35s var(--spring)}
.bubble.side{transform-origin:100% 50%}
.bubble.side:after{bottom:auto;top:calc(50% - 7px);left:auto;right:-7px;transform:rotate(-45deg)}

/* Маленький «выглядыватель» из-за кулисы */
.cameo{position:absolute;z-index:5;width:96px;height:96px;pointer-events:none}
.cameo[data-from=side]{top:var(--y);translate:0 -50%}
.cameo[data-from=side][data-side=left]{left:0}.cameo[data-from=side][data-side=right]{right:0}
.cameo[data-from=bottom]{bottom:0}
.cameo[data-from=bottom][data-side=left]{left:22px}.cameo[data-from=bottom][data-side=right]{right:22px}
.cameo-inner{position:relative;width:96px;height:96px;will-change:transform}
.cameo[data-side=left] .cameo-inner{transform-origin:0 100%}.cameo[data-side=right] .cameo-inner{transform-origin:100% 100%}
.cameo[data-from=bottom] .cameo-inner{transform-origin:50% 100%}
.cameo-flip{position:absolute;inset:0}
.cameo[data-side=right] .cameo-flip,.cameo[data-side=right] .cameo-head{transform:scaleX(-1)}
.cameo-head{position:relative;z-index:1;display:block;width:96px;height:96px;filter:drop-shadow(0 4px 6px #3c141e40)}
.cameo-arm{position:absolute;z-index:0;left:40px;top:62px;width:72px;height:44px;overflow:visible}
.cameo[data-from=bottom] .cameo-arm{left:82px;top:52px;transform:rotate(-90deg);transform-origin:0 50%}
.cameo-hand{transform-box:fill-box;transform-origin:0% 70%;animation:wave .5s ease-in-out infinite alternate}
.cameo-say{position:absolute;top:-10px;z-index:2;padding:7px 12px;border-radius:14px;background:#fffdf8;border:1px solid #ecd9bd;color:var(--wine);font:800 13.5px/1.2 var(--sans);white-space:nowrap;box-shadow:0 6px 18px #3c141e33;opacity:0;scale:.5;transition:opacity .25s,scale .25s}
.cameo[data-side=left] .cameo-say{left:80px;transform-origin:0 100%}.cameo[data-side=right] .cameo-say{right:80px;transform-origin:100% 100%}
.cameo[data-from=bottom] .cameo-say{top:-40px}
.cameo[data-from=bottom][data-side=left] .cameo-say{left:70px}.cameo[data-from=bottom][data-side=right] .cameo-say{right:70px}
.cameo.talking .cameo-say{opacity:1;scale:1;transition:opacity .2s,scale .4s var(--spring)}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.fatal{padding:20px;text-align:center}.fatal p{font-size:16px}

/* Средние по высоте экраны */
#app[data-compact=true] .content{padding-top:40px}
#app[data-compact=true] .film-content{padding-top:36px}
#app[data-compact=true] .speech-card{font-size:22px;padding:20px 18px 17px}
#app[data-compact=true] .invitation{padding:18px 16px}
#app[data-compact=true] .invitation .paper-flower{width:30px;height:30px;margin-bottom:2px}
#app[data-compact=true] .invitation .eyebrow{margin:3px 0 7px}
#app[data-compact=true] .invitation h2{font-size:40px}
#app[data-compact=true] .invite-line{font-size:21px;margin-bottom:12px}
#app[data-compact=true] .invite-details{margin-bottom:12px;padding-top:10px}
#app[data-compact=true] .invite-date{font-size:24px}
#app[data-compact=true] .invite-close{font-size:18px}

/* Низкие экраны и открытая клавиатура */
#app[data-short=true] .topbar{min-height:calc(50px + env(safe-area-inset-top))}
#app[data-short=true] .wordmark{font-size:18px;min-height:44px}
#app[data-short=true] .wordmark span{display:none}
#app[data-short=true] .icon-btn{width:44px;height:44px}
#app[data-short=true] .actions{min-height:64px;padding-top:6px;padding-bottom:max(7px,env(safe-area-inset-bottom))}
#app[data-short=true] .content{padding:32px 18px 8px}
#app[data-short=true] .eyebrow{font-size:9.5px;margin-bottom:7px}
#app[data-short=true] h2{font-size:26px}
#app[data-short=true] h1{font-size:46px}
#app[data-short=true] .subline{font-size:14px;margin-top:8px}
#app[data-short=true] .film-content{gap:6px;grid-template-rows:auto auto minmax(55px,1fr) auto minmax(28px,auto)}
#app[data-short=true] .film-content h2{font-size:24px}
#app[data-short=true] .answer{font-size:13.5px;min-height:48px;padding:5px 7px}
#app[data-short=true] .answer-key{width:22px;height:22px;font-size:11px}
#app[data-short=true] .question-content{padding:8px 17px;gap:6px}
#app[data-short=true] .question-content>.eyebrow,#app[data-short=true] .question-content>h2{display:none}
#app[data-short=true] .question-card{padding:10px;gap:6px;margin:0;border-radius:16px}
#app[data-short=true] .question-card label{display:block;font:700 14px/1.25 var(--sans);color:var(--ink)}
#app[data-short=true] .question-card input{min-height:48px;height:48px;font-size:19px}
#app[data-short=true] .field-note,#app[data-short=true] .hint-title{display:none}
#app[data-short=true] .personal-result{padding:7px}
#app[data-short=true] .question-card .result{font-size:13px}
#app[data-keyboard=true] .actions{padding-bottom:6px}
#app[data-short=true][data-scene=question] .valance{display:none}
#app[data-short=true] .speech-content{padding-top:30px}
#app[data-short=true] .speech-card{font-size:19px;padding:14px 15px}
#app[data-short=true] .speech-card:before{display:none}
#app[data-short=true] .speech-count{margin-top:10px}
#app[data-short=true] .envelope{width:230px;height:150px}#app[data-short=true] .seal{top:52px}
#app[data-short=true] .postcard{height:180px;width:220px}#app[data-short=true] .postcard-cover{gap:7px;padding:15px}#app[data-short=true] .postcard-title{font-size:27px}
#app[data-short=true] .folded-sheet{height:130px;width:220px}#app[data-short=true] .paper-instruction{margin:8px 0 auto}
#app[data-short=true] .invitation{padding:12px 14px}
#app[data-short=true] .invitation .paper-flower,#app[data-short=true] .invitation .eyebrow{display:none}
#app[data-short=true] .invitation h2{font-size:32px}
#app[data-short=true] .invite-line{font-size:19px;margin-bottom:8px}
#app[data-short=true] .invite-details{margin-bottom:8px;padding-top:7px}
#app[data-short=true] .invite-date{font-size:21px;margin-bottom:2px}
#app[data-short=true] .invite-place{font-size:13px}
#app[data-short=true] .invite-address{font-size:13px}
#app[data-short=true] .invite-close{font-size:16px}
#app[data-short=true] .proposal-content{padding-top:34px}
#app[data-short=true] .proposal-action{margin-top:16px}

/* Узкие телефоны */
@media (max-width:360px){
  .topbar{padding-left:15px;padding-right:10px}
  .wordmark{font-size:19px}
  .content{padding-left:21px;padding-right:21px}
  .film-content{padding-left:22px;padding-right:22px}
  .answer{font-size:13.5px;gap:7px;padding-left:7px;padding-right:7px}
  .answer-key{width:22px;height:22px}
  .speech-card{font-size:21px;padding:20px 16px 16px}
  .actions{padding-left:14px;padding-right:14px}
  .btn{padding-left:14px;padding-right:14px}
  .invitation h2{font-size:40px}
}

/* Телефон в горизонтальном положении */
@media (min-width:600px) and (max-height:500px){
  #app{max-width:900px;top:var(--visual-offset,0px);transform:translateX(-50%);height:var(--app-height,100dvh);border-radius:0}
  .content{max-width:650px;margin-inline:auto}
  .film-content,#app[data-short=true] .film-content{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;padding:22px 30px 7px;gap:5px 18px}
  .film-counter,.film-content h2,#film-result{grid-column:1/-1}
  .screen{grid-column:1;grid-row:3;max-height:none}
  #film-options{grid-column:2;grid-row:3;align-self:center}
  #film-result{grid-row:4}
  .answers{gap:6px}.answer{min-height:48px;font-size:13.5px}
  .paper-content{padding-top:22px}
  #app[data-short=true] .paper-content>.eyebrow,#app[data-short=true] .paper-content>h2{display:none}
  .invitation{max-width:520px}
  .invitation h2{display:inline-block;margin-right:14px}.invitation .invite-line{display:inline-block}
  .invite-details{max-width:none;margin-bottom:6px}
  .invitation .invite-date,.invitation .invite-place,.invitation .invite-address{display:inline-block;margin:4px 7px}
  .invite-close{max-width:none}
  .speech-content{max-width:560px}.speech-card{font-size:19px}
  #app[data-short=true] .speech-content>.eyebrow{display:none}
  .proposal-content h2{display:inline-block;max-width:360px;vertical-align:middle}
  .proposal-action{display:inline-block;margin:12px 0 0 24px;vertical-align:middle}
}

@keyframes dust{to{transform:translateY(-50%)}}
@keyframes letter-drop{to{transform:translate(calc((var(--i) - 5)*8px),430px) rotate(calc((var(--i) - 5)*17deg));opacity:0}}
@keyframes rise-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@keyframes word-in{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}
@keyframes breathe{50%{opacity:.72;scale:.97}}
@keyframes heartbeat{0%,60%,100%{scale:1}15%{scale:1.25}30%{scale:1}45%{scale:1.15}}
@keyframes glow{50%{box-shadow:0 8px 20px #0006,0 0 0 10px #d6ad6e0a}}
@keyframes spin{to{rotate:360deg}}
@keyframes pop{0%{scale:.92}55%{scale:1.04}100%{scale:1}}
@keyframes shake{0%,100%{translate:0 0}20%{translate:-6px 0}40%{translate:5px 0}60%{translate:-3px 0}80%{translate:2px 0}}
@keyframes ring{0%{opacity:.9;scale:1}100%{opacity:0;scale:1.25 1.5}}
@keyframes float{50%{translate:0 -6px}}
@keyframes seal{50%{scale:1.07;box-shadow:0 3px 8px #4a0f2266,0 0 0 7px #ecd3a42e}}
@keyframes wave{from{rotate:-14deg}to{rotate:16deg}}
@keyframes envelope-rise{from{transform:translateY(180px) rotate(-8deg);opacity:0}to{transform:translateY(0) rotate(-3deg);opacity:1}}
@keyframes envelope-settle{0%,30%{transform:rotate(-3deg)}100%{transform:translateY(30px) rotate(0)}}
@keyframes flap-lift{0%{transform:rotateX(0);z-index:5}49%{z-index:5}51%{z-index:1}100%{transform:rotateX(-180deg);z-index:1}}
@keyframes paper-appear{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes invitation-in{from{opacity:0;transform:perspective(800px) rotateX(-14deg) translateY(10px)}to{opacity:1;transform:perspective(800px) rotateX(0) translateY(0)}}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .dust{display:none}.letter-char{will-change:auto}
}