/* Дополнения: открытие конверта, гирлянда, вечер, музыка, альбом, финал */
.phone{container-type:inline-size}
/* на телефоне страница занимает весь экран без полосы снизу */
html,body{background:var(--paper)}
.phone{position:fixed;top:0;bottom:0;left:0;right:0;height:auto!important;margin:0 auto}

/* ---------- открытие конверта ---------- */
.fx-open{position:absolute;inset:0;z-index:28;display:flex;align-items:center;justify-content:center;background:rgba(40,18,12,.55);opacity:0;transition:opacity .3s;pointer-events:none}
.fx-open.on{opacity:1;pointer-events:auto}
.fx-env{position:relative;width:72cqw;aspect-ratio:1.4;perspective:120cqw;animation:fxPop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes fxPop{from{transform:scale(.3) rotate(-8deg);opacity:0}}
.fx-back,.fx-front,.fx-flap{position:absolute;left:0;right:0}
.fx-back{inset:0;border-radius:1.6cqw;background:linear-gradient(#c99a7f,#b9876c);box-shadow:0 3cqw 7cqw rgba(0,0,0,.45)}
.fx-card{position:absolute;left:7%;right:7%;top:8%;bottom:6%;background:#fbf2e6;border:1px solid #e3cdb5;transition:transform .8s cubic-bezier(.3,.8,.3,1);z-index:2;
  display:flex;align-items:flex-start;justify-content:center;padding-top:6cqw;font-family:'Great Vibes','Marck Script',cursive;font-size:9cqw;color:var(--wine)}
.fx-front{inset:0;z-index:3;border-radius:1.6cqw;background:linear-gradient(160deg,#e2bca5,#cfa186);
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%)}
.fx-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(110,60,40,.3) 50%,transparent 50.4%),linear-gradient(to top left,transparent 49.6%,rgba(110,60,40,.3) 50%,transparent 50.4%)}
.fx-flap{top:0;height:58%;z-index:4;transform-origin:top;transition:transform .6s ease-in-out,z-index 0s .3s;
  background:linear-gradient(#e8cbb3,#d4ab92);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 1cqw 1cqw rgba(0,0,0,.2))}
.fx-seal{position:absolute;left:50%;top:58%;width:15cqw;height:15cqw;margin:-7.5cqw;z-index:5;display:flex}
.fx-seal span{flex:1;background:radial-gradient(circle at 70% 30%,#a8373e,var(--wine) 60%,#4a1217);transition:transform .45s ease-in,opacity .45s .2s;box-shadow:0 1cqw 2cqw rgba(0,0,0,.4)}
.fx-seal span:first-child{border-radius:7.5cqw 0 0 7.5cqw;clip-path:polygon(0 0,100% 0,80% 30%,100% 55%,75% 80%,100% 100%,0 100%)}
.fx-seal span:last-child{border-radius:0 7.5cqw 7.5cqw 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,-25% 80%,0 55%,-20% 30%);background:radial-gradient(circle at 30% 30%,#a8373e,var(--wine) 60%,#4a1217)}
.fx-env.crack .fx-seal span:first-child{transform:translate(-6cqw,8cqw) rotate(-35deg);opacity:0}
.fx-env.crack .fx-seal span:last-child{transform:translate(6cqw,9cqw) rotate(40deg);opacity:0}
.fx-env.flap .fx-flap{transform:rotateX(180deg);z-index:1}
.fx-env.out .fx-card{transform:translateY(-62%)}

/* ---------- гирлянда ---------- */
.garland{position:absolute;left:0;top:0;width:100%;z-index:1;pointer-events:none;overflow:visible}
.garland .bulb{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}

/* ---------- вечерний режим ---------- */
.evening .stage{background-color:#a9796a}
.evening .stage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 75% 45% at 50% 32%,rgba(255,200,150,.18),transparent 70%),radial-gradient(ellipse 120% 100% at 50% 50%,transparent 45%,rgba(35,12,18,.45));mix-blend-mode:multiply}
.evening .garland .bulb{filter:drop-shadow(0 0 2.5cqw currentColor) drop-shadow(0 0 1cqw currentColor)}
.evening .countdown,.evening .env{filter:brightness(.97)}

/* ---------- кнопка музыки ---------- */
.music-btn{position:absolute;left:4cqw;top:4cqw;z-index:26;width:10cqw;height:10cqw;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#a8373e,var(--wine) 60%,#4a1217);color:#f5dccb;font-size:5cqw;box-shadow:0 1cqw 2cqw rgba(0,0,0,.35)}
.music-btn.off{opacity:.55}
.music-btn.off::after{content:"";position:absolute;width:7cqw;height:.6cqw;background:#f5dccb;transform:rotate(-45deg);border-radius:1cqw}
.music-btn.on{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 1.6cqw rgba(138,44,51,.18),0 1cqw 2cqw rgba(0,0,0,.35)}}

/* ---------- альбом ---------- */
.btn.ghost{background:rgba(255,242,232,.7);color:var(--wine);box-shadow:inset 0 0 0 .4cqw rgba(107,31,38,.5);margin-top:4cqw}
.btn.ghost svg{stroke:var(--wine)}
.album{position:absolute;inset:0;z-index:32;overflow-y:auto;display:none;padding:14cqw 5cqw 10cqw;
  background:radial-gradient(ellipse 80% 50% at 50% 20%,rgba(245,215,195,.8),transparent 75%),var(--paper)}
.album.on{display:block;animation:fadeIn .4s}
@keyframes fadeIn{from{opacity:0}}
.album h2{font-family:'Great Vibes','Marck Script',cursive;font-weight:400;font-size:12cqw;color:var(--wine);text-align:center;margin:0}
.album .sub2{text-align:center;font-size:4.4cqw;font-weight:600;margin:1cqw 0 6cqw}
.album .row{position:relative;display:flex;justify-content:space-around;padding-top:4cqw;margin-bottom:8cqw}
.album .row::before{content:"";position:absolute;left:-5cqw;right:-5cqw;top:2.2cqw;height:.6cqw;border-radius:1cqw;
  background:repeating-linear-gradient(45deg,#e7d3b0 0 1cqw,#b89a6c 1cqw 2cqw);transform:rotate(-1.2deg)}
.album .pp{position:relative;width:27cqw;padding:1.5cqw 1.5cqw 6cqw;background:#f6ece0;box-shadow:0 1.4cqw 2.4cqw rgba(60,25,15,.35);cursor:pointer;transform-origin:50% 0;animation:sway 4s ease-in-out infinite}
.album .pp:nth-child(2){animation-delay:-1.3s}.album .pp:nth-child(3){animation-delay:-2.6s}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.album .pp::before{content:"";position:absolute;left:50%;top:-3.4cqw;width:2.4cqw;height:6cqw;margin-left:-1.2cqw;background:linear-gradient(90deg,#a87c58,#d9b48a,#a87c58);border-radius:.5cqw;z-index:2}
.album .pp div{aspect-ratio:1;background:linear-gradient(135deg,#a3786a,#5a3530) center/cover;filter:sepia(.25)}
.album .pp span{position:absolute;left:0;right:0;bottom:1cqw;text-align:center;font-family:'Great Vibes','Marck Script',cursive;font-size:4.6cqw;color:var(--ink)}
.album .empty{text-align:center;font-style:italic;font-size:4.6cqw;margin-top:20cqw}
.album .close{display:block;margin:4cqw auto 0;background:none;border:1px solid var(--wine);color:var(--wine);border-radius:5cqw;padding:2cqw 6cqw;font:700 4cqw 'Cormorant Garamond';cursor:pointer}
.album .x{position:absolute;right:4cqw;top:4cqw;width:10cqw;height:10cqw;border-radius:50%;border:1px solid var(--wine);background:none;color:var(--wine);font-size:5cqw;cursor:pointer}

/* ---------- финал ---------- */
.env.final{box-shadow:0 0 0 .5cqw #c99a4b,0 0 3cqw rgba(201,154,75,.6),inset 0 0 2cqw rgba(120,65,40,.35)}
.env.final .n{color:#8a5a12}
.env.final::before{content:"✦";position:absolute;top:-2.6cqw;left:50%;transform:translateX(-50%);color:#c99a4b;font-size:4cqw;z-index:5}
.fireworks{position:absolute;inset:0;width:100%;height:100%;z-index:34;pointer-events:none}
.newyear{position:absolute;inset:0;z-index:33;display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8cqw;
  background:radial-gradient(ellipse at 50% 40%,rgba(90,23,29,.75),rgba(25,8,10,.92))}
.newyear.on{display:flex;animation:fadeIn .8s}
.newyear h2{font-family:'Great Vibes','Marck Script',cursive;font-weight:400;font-size:15cqw;line-height:1.05;color:#f3d9a4;margin:0;text-shadow:0 0 4cqw rgba(243,217,164,.5)}
.newyear p{color:#f5dccb;font-size:5cqw;font-weight:600;margin:5cqw 0 7cqw}
.newyear .close{background:none;border:1px solid #f3d9a4;color:#f3d9a4;border-radius:5cqw;padding:2.4cqw 7cqw;font:700 4.4cqw 'Cormorant Garamond';cursor:pointer}