/* Birthday station hero — an original pixel landscape independent of the wedding template. */
.game-hud{top:max(14px,env(safe-area-inset-top));width:min(calc(100% - 32px),488px);height:52px;filter:drop-shadow(0 4px #382d2a80)}
.hud-day{width:68px;border-color:#74462f;background:#f8ca57}.hud-time{border-color:#74462f;background:#fff3c9}.hud-music{width:54px;border-color:#74462f;background:#509c83}.hud-time b{color:#a63e36}.hud-time i{font-size:20px}
.hero{min-height:760px;height:100svh;padding:100px 26px;background:linear-gradient(#55b8e8 0 43%,#9edbf0 43% 47%,#87c55b 47% 100%);overflow:hidden}
.hero:before{content:"";position:absolute;z-index:-1;left:0;right:0;top:39%;height:10%;background:linear-gradient(155deg,transparent 24%,#5a9f66 25% 39%,transparent 40%),linear-gradient(205deg,transparent 27%,#43885b 28% 45%,transparent 46%);background-size:190px 100%;opacity:.85}
.hero-land{position:absolute;z-index:-1;inset:0;background:none;overflow:hidden}.sun-glow{position:absolute;right:52px;top:100px;width:72px;height:72px;background:#ffed9e;box-shadow:0 0 0 10px #fff2b033,0 0 40px #fff4a8;border-radius:50%}.far-hills{position:absolute;left:-10%;right:-10%;top:38%;height:19%;background:#69a660;clip-path:polygon(0 75%,10% 52%,20% 67%,33% 20%,46% 65%,60% 34%,74% 66%,87% 30%,100% 63%,100% 100%,0 100%);box-shadow:inset 0 -14px #4f9058}
.party-field{position:absolute;inset:48% 0 0;background-color:#79bd4f;background-image:linear-gradient(45deg,#6bad47 25%,transparent 25%),linear-gradient(-45deg,#6bad47 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#91cd5d 75%),linear-gradient(-45deg,transparent 75%,#91cd5d 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.party-field:after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#ffdd55 0 2px,transparent 3px) 7px 11px/53px 47px,radial-gradient(circle,#fff3cc 0 2px,transparent 3px) 20px 30px/71px 61px;opacity:.8}.party-field>i{position:absolute;z-index:2;width:6px;height:15px;background:#277744;box-shadow:6px 5px #277744,-6px 8px #3e8c47}.party-field>i:nth-child(1){left:7%;top:15%}.party-field>i:nth-child(2){left:84%;top:20%}.party-field>i:nth-child(3){left:13%;top:58%}.party-field>i:nth-child(4){left:75%;top:65%}.party-field>i:nth-child(5){left:92%;top:49%}.party-field>i:nth-child(6){left:5%;top:83%}
.farm-path{position:absolute;z-index:1;left:27%;bottom:-10%;width:46%;height:64%;background:#d7a85b;clip-path:polygon(43% 0,58% 0,74% 35%,67% 61%,95% 100%,5% 100%,36% 61%,28% 35%)}.farm-path:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,#b78247 0 3px,transparent 4px) 0 0/31px 43px,radial-gradient(ellipse,#edca7a 0 3px,transparent 4px) 15px 18px/43px 37px;opacity:.65}.pond{position:absolute;z-index:2;right:-34px;bottom:18%;width:170px;height:104px;border-radius:52%;background:repeating-linear-gradient(0deg,#42a8c3 0 8px,#57bdd0 9px 14px);border:8px solid #4c944d;box-shadow:0 0 0 7px #6cae4d;transform:rotate(-7deg)}.pond span{position:absolute;width:24px;height:6px;background:#d3ee8b;border-radius:50%}.pond span:nth-child(1){left:26px;top:28px}.pond span:nth-child(2){right:28px;top:53px}.pond span:nth-child(3){left:70px;bottom:18px}
.wood-fence{position:absolute;z-index:3;bottom:14%;width:116px;height:9px;background:#9a5f32;border-block:3px solid #643d27;box-shadow:0 25px #9a5f32,0 22px 0 3px #643d27}.wood-fence:before,.wood-fence:after{content:"";position:absolute;top:-12px;width:13px;height:55px;background:#b9783d;border:3px solid #643d27}.wood-fence:before{left:13px}.wood-fence:after{right:13px}.left-fence{left:-18px}.right-fence{right:-9px;bottom:8%}.party-flags{position:absolute;z-index:3;left:4%;right:4%;top:48%;height:34px;border-top:3px solid #6f482e;transform:rotate(-2deg);display:flex;justify-content:space-around;padding-inline:20px}.party-flags i{width:23px;height:28px;background:#e95849;clip-path:polygon(0 0,100% 0,50% 100%)}.party-flags i:nth-child(2),.party-flags i:nth-child(5){background:#f3c743}.party-flags i:nth-child(3),.party-flags i:nth-child(6){background:#5c9fc5}
.bus-stop{position:absolute;z-index:4;left:-22px;bottom:22%;width:138px}.bus-stop img{width:120px;filter:drop-shadow(5px 6px #38522e)}.bus-stop span{display:block;width:92px;margin:-2px auto 0;padding:4px;background:#f7d26d;border:4px solid #75462c;text-align:center;color:#5d3927;font-size:8px;line-height:1.3}
.letter{z-index:6;align-self:center;max-width:418px;padding:0 23px 67px;background:#fff0bc;border:5px solid #75442d;box-shadow:inset 0 0 0 4px #d3944d,8px 9px #28573d;transform:none;border-radius:3px;overflow:visible}.letter:before{inset:10px;border:2px solid #e0b871}.letter-header{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin:0 -23px 18px;padding:10px 16px;background:#4f9074;color:#fff;border-bottom:5px solid #75442d}.letter-header .letter-stamp{position:static;width:48px;height:48px;flex:none;border:3px solid #f2d37d;background:#2f6d59}.letter-header .letter-stamp img{width:38px}.letter-header div:nth-child(2){flex:1}.letter-header .letter-from{margin:0;color:#fff;font-size:9px;letter-spacing:1px}.letter-header small{font-size:10px;color:#dff2cf}.letter-header>b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#f2c344;color:#74412e;border:3px solid #74412e;font-size:22px;line-height:1;margin-bottom:2px;padding-left:2px}
.quest-title{position:relative;z-index:1;text-align:center;padding:2px 0 14px;border-bottom:3px double #cb9352}.quest-title>small{display:inline-block;background:#e5b64f;color:#6c3d29;padding:4px 9px;font-size:8px;letter-spacing:1px}.letter h1{margin:10px 0 0;font-size:27px;line-height:1.2;text-shadow:none}.letter h1 em{font-size:37px;color:#c44d3e;text-shadow:2px 2px #f1c77c}.letter-copy{position:relative;z-index:1;margin:16px 3px 13px!important;font-size:13px;line-height:1.65!important}.letter-copy>b{color:#b44135}.letter-meta{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;border-block:2px dashed #c18c51;padding:9px 0;gap:9px}.letter-meta span:first-child{border-right:2px dashed #c18c51}.letter-meta small,.letter-meta b{display:block}.letter-meta small{font-size:8px;color:#a66d41}.letter-meta b{font-size:11px;margin-top:3px}.wax-seal{bottom:-28px;width:auto;height:55px;min-width:148px;border-radius:4px;border:4px solid #713a2d;background:#d55241;box-shadow:inset 0 0 0 3px #ed735b,0 6px #633629;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 16px}.wax-seal span{font-size:15px}.wax-seal b{font-size:22px;color:#ffe06f}.hero-tip{z-index:6;bottom:28px;font-size:10px;background:#2e604db8;padding:7px 13px;border-radius:2px}
@media(max-width:390px){.hero{padding-inline:18px}.letter{padding-inline:19px}.letter-header{margin-inline:-19px}.letter h1{font-size:24px}.letter h1 em{font-size:32px}.letter-copy{font-size:12px}.bus-stop{transform:scale(.85);transform-origin:left bottom}.pond{transform:rotate(-7deg) scale(.85);transform-origin:right bottom}}