.album-transition{background-color:#09060e!important;opacity:1!important}
.album-transition.play{animation:transition-fade-in-solid .18s ease-out both!important}
@keyframes transition-fade-in-solid{from{opacity:.98}to{opacity:1}}
.album-complete-note{margin:7px 0 0!important;color:#f0ce87!important;font-size:11px!important;letter-spacing:.08em;animation:resume-rise .5s ease both}
.invite-card{position:relative;width:min(100%,330px);max-height:58vh;overflow:auto;margin-top:18px!important;padding:30px 25px 24px!important;border:1px solid #efc86e!important;border-radius:3px;background:linear-gradient(145deg,rgba(255,245,211,.98),rgba(246,218,160,.94))!important;color:#5b3040;box-shadow:0 18px 45px rgba(0,0,0,.32),inset 0 0 0 5px rgba(255,255,255,.32);text-align:left;animation:letter-open .55s cubic-bezier(.2,.8,.2,1) both}
.invite-card:before{content:'';position:absolute;inset:12px;border:1px solid rgba(151,91,50,.28);pointer-events:none}
.invite-card small,.invite-card b,.invite-card p,.letter-divider,.letter-seal{position:relative;z-index:1}
.invite-card small{display:block;color:#a06d40;text-align:center;font:700 9px Georgia;letter-spacing:.25em}
.invite-card b{display:block;margin:11px 0 7px;color:#8f3341;text-align:center;font:700 24px KaiTi,serif}
.invite-card p{margin:9px 0;color:#694452;font:15px KaiTi,serif;line-height:1.8}
.letter-divider{text-align:center;color:#b88642;font-size:18px}
.letter-seal{position:absolute;right:23px;top:22px;width:35px;height:35px;display:grid;place-items:center;border:2px solid #b84d4d;border-radius:50%;color:#b84d4d;font:700 20px serif;transform:rotate(9deg)}
.letter-sign{text-align:right!important;color:#8f3341!important;margin-top:15px!important}
.letter-sign small{margin-top:2px;color:#a06d40;font-size:11px!important;letter-spacing:.12em}
@keyframes letter-open{from{opacity:0;transform:translateY(18px) scale(.92) rotateX(10deg)}to{opacity:1;transform:translateY(0) scale(1) rotateX(0)}}

/* Device-safe layout: panels must not reserve the hidden game controls area. */
.panel{inset:0!important;min-height:100%;padding-top:max(28px,env(safe-area-inset-top));padding-bottom:max(28px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.album-transition{inset:0!important}
#phaser-game{display:block;overflow:hidden}
#phaser-game canvas{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important}
#phaser-game:after{content:'';position:absolute;z-index:3;inset:0;pointer-events:none;background:radial-gradient(circle at 52% 42%,transparent 42%,rgba(20,9,29,.18) 78%,rgba(12,6,20,.42) 100%),linear-gradient(180deg,rgba(255,224,149,.04),transparent 35%,rgba(28,13,34,.12));box-shadow:inset 0 0 34px rgba(255,216,120,.08)}
.life-photo{width:min(286px,calc(100vw - 38px));height:min(315px,46vh)}
.memory-stage{width:min(100%,320px)}

@media(max-height:700px){
  .panel{padding-top:18px;padding-bottom:18px}
  .panel h1{margin:7px 0;font-size:42px}
  .panel h2{margin:7px 0;font-size:25px}
  .album>p{margin:2px 0 6px}
  .album .memory-stage{height:min(370px,67vh)}
  .album .life-photo{height:min(315px,48vh)}
  .memory-slide h3{margin:7px 0 2px;font-size:22px}
  .memory-slide>p{line-height:1.4}
  .album-progress{margin-top:2px}
  .profile{justify-content:flex-start}
  .gender span{height:145px!important}
  .gender img{height:132px}
}

@media(max-width:350px){
  .panel{padding-left:16px;padding-right:16px}
  .panel h2{font-size:23px}
  .life-photo{width:calc(100vw - 34px)}
  .panel>button,.panel form>button{min-width:min(225px,86vw)}
}

@media(max-width:390px){
  .shell{width:100vw;max-width:100vw}
  .hud{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);padding-left:10px;padding-right:10px}
  .hud>*{min-width:0}
  .hud .left,.hud .right{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .controls{padding-left:10px;padding-right:10px;gap:7px}
  .controls>div{gap:8px}
  .controls button{width:58px;height:58px;border-radius:16px}
  .controls .attack{width:72px;height:72px}
  .controls span{min-width:70px}
}
.panel button:disabled{cursor:wait;filter:saturate(.55);opacity:.72;box-shadow:0 3px 0 #543044!important}

.victory-transition{position:absolute;z-index:95;inset:0;overflow:hidden;background:linear-gradient(#38275d 0 56%,#aa5c62 56% 67%,#3c2445 67%);color:#ffe7a1}
.victory-transition:after{content:'';position:absolute;inset:14px;border:2px solid rgba(255,218,119,.56);border-radius:22px;pointer-events:none}
.victory-stars{position:absolute;inset:0;background-image:radial-gradient(circle at 15% 18%,#ffe793 0 2px,transparent 3px),radial-gradient(circle at 73% 13%,#fff4c7 0 2px,transparent 3px),radial-gradient(circle at 86% 34%,#f5bd78 0 2px,transparent 3px),radial-gradient(circle at 33% 30%,#e6c7ff 0 1px,transparent 2px);animation:victory-stars 1s steps(2) infinite}
.pixel-cloud{position:absolute;width:82px;height:22px;background:#f4d8d0;box-shadow:18px -13px 0 #f4d8d0,38px -4px 0 #f4d8d0;opacity:.56}
.cloud-a{left:8%;top:25%}.cloud-b{right:12%;top:40%;transform:scale(.72)}
.victory-ground{position:absolute;z-index:2;left:0;right:0;bottom:0;height:112px;border-top:6px solid #f0c768;background:repeating-linear-gradient(90deg,#6f3b49 0 34px,#8c4c4f 34px 68px)}
.victory-ground:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 29px,rgba(255,221,137,.22) 29px 33px)}
.wedding-pole{position:absolute;z-index:4;left:43%;bottom:104px;width:9px;height:320px;border:2px solid #fff0b0;border-radius:7px;background:#d5a646;box-shadow:0 0 14px rgba(255,224,141,.55)}
.wedding-pole:before{content:'';position:absolute;left:50%;top:-13px;width:24px;height:24px;border:3px solid #ffe69c;border-radius:50%;background:#b84850;transform:translateX(-50%)}
.wedding-pole i{position:absolute;left:-24px;bottom:-8px;width:58px;height:15px;border:2px solid #ffe09a;border-radius:50%;background:#673341}
.wedding-pole b{position:absolute;left:7px;top:32px;display:grid;place-items:center;width:72px;height:52px;border:3px solid #f8d270;background:#bc3d49;color:#ffe99d;font:900 34px serif;transform-origin:0 0}
.wedding-castle{position:absolute;z-index:3;right:5%;bottom:106px;width:142px;height:176px;border:5px solid #f0c768;background:linear-gradient(90deg,#813c4d,#b95450 48%,#713648);box-shadow:0 0 30px rgba(255,205,104,.32)}
.wedding-castle:before{content:'';position:absolute;left:34px;top:-55px;width:64px;height:58px;border:5px solid #f0c768;background:#9c4650;clip-path:polygon(50% 0,100% 52%,100% 100%,0 100%,0 52%)}
.wedding-castle:after{content:'囍';position:absolute;left:50%;top:30px;color:#ffe99d;font:900 40px serif;transform:translateX(-50%)}
.wedding-castle b{position:absolute;top:-37px;left:50%;width:100px;color:#ffe9a4;text-align:center;font:800 11px KaiTi,serif;transform:translateX(-50%)}
.tower{position:absolute;bottom:-5px;width:35px;height:145px;border:4px solid #f0c768;background:#733544}.tower:before{content:'';position:absolute;left:-8px;top:-31px;border-left:21px solid transparent;border-right:21px solid transparent;border-bottom:30px solid #f0c768}.tower:after{content:'';position:absolute;left:-3px;top:-22px;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:23px solid #a94d4f}.tower-left{left:-27px}.tower-right{right:-27px}
.castle-door{position:absolute;left:50%;bottom:0;width:46px;height:61px;border:4px solid #e9bb61;border-bottom:0;border-radius:23px 23px 0 0;background:#2d1934;transform:translateX(-50%);transform-origin:100% 50%}
.victory-hero,.victory-guardian{position:absolute;z-index:8;left:-22%;bottom:105px;width:64px;height:128px;object-fit:contain;filter:drop-shadow(0 10px 6px rgba(18,7,25,.45));transform-origin:50% 100%}
.victory-guardian{z-index:7;width:54px;height:108px}
.victory-copy{position:absolute;z-index:10;left:50%;top:11%;display:flex;flex-direction:column;align-items:center;width:88%;opacity:0;transform:translateX(-50%);text-align:center;text-shadow:0 4px 14px #26132f}
.victory-copy b{font:900 37px KaiTi,serif}.victory-copy span{margin-top:5px;color:#f0c783;font-size:12px;letter-spacing:.18em}
.victory-transition.play .victory-hero{animation:victory-hero-path 4.5s cubic-bezier(.32,.02,.2,1) both}
.victory-transition.play .victory-guardian{animation:victory-guardian-path 4.5s .18s linear both}
.victory-transition.play .wedding-pole b{animation:victory-flag-drop 4.5s ease-in-out both}
.victory-transition.play .castle-door{animation:castle-door-open 4.5s ease both}
.victory-transition.play .victory-copy{animation:victory-copy-show 4.5s ease both}
@keyframes victory-hero-path{0%{left:-22%;bottom:105px}18%{left:31%;bottom:105px}29%{left:40%;bottom:255px;transform:rotate(-8deg)}45%{left:42%;bottom:108px;transform:rotate(0)}60%{left:56%;bottom:105px}86%{left:77%;bottom:105px;opacity:1}100%{left:82%;bottom:105px;opacity:0}}
@keyframes victory-guardian-path{0%,13%{left:-24%;bottom:105px}42%{left:28%;bottom:105px}64%{left:54%;bottom:105px}88%{left:76%;bottom:105px;opacity:1}100%{left:82%;bottom:105px;opacity:0}}
@keyframes victory-flag-drop{0%,28%{top:32px}47%,100%{top:228px}}
@keyframes castle-door-open{0%,63%{transform:translateX(-50%) perspective(90px) rotateY(0)}76%,100%{transform:translateX(-50%) perspective(90px) rotateY(-72deg)}}
@keyframes victory-copy-show{0%,70%{opacity:0;transform:translateX(-50%) translateY(-12px)}78%,100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes victory-stars{from{opacity:.5}to{opacity:1}}

@media(max-height:650px){.wedding-pole{height:245px}.wedding-castle{height:148px;transform:scale(.82);transform-origin:100% 100%}.victory-copy{top:6%}.victory-copy b{font-size:30px}@keyframes victory-hero-path{0%{left:-22%;bottom:105px}18%{left:31%;bottom:105px}29%{left:40%;bottom:205px;transform:rotate(-8deg)}45%{left:42%;bottom:108px;transform:rotate(0)}60%{left:56%;bottom:105px}86%{left:77%;bottom:105px;opacity:1}100%{left:82%;bottom:105px;opacity:0}}}