.skylantern-modal { position: fixed; z-index: 80; inset: 0; display: grid; padding: 12px; background: rgba(2, 5, 10, .9); place-items: center; backdrop-filter: blur(9px); }
.skylantern-game { position: relative; width: 88vw; height: min(920px, 96dvh); overflow: hidden; border: 1px solid #b0864d; background: #07111d; box-shadow: inset 0 0 0 3px #080a0c,inset 0 0 0 4px #6f512d,inset 0 0 34px #c18b3a1f,0 24px 80px #000; color: #e8c98e; }
.skylantern-game::before { position: absolute; z-index: 20; inset: 8px; border: 1px solid rgba(203,158,88,.52); pointer-events: none; box-shadow: inset 0 0 0 3px #070a0d,inset 0 0 0 4px rgba(123,87,45,.56),inset 0 0 22px rgba(202,143,62,.12); content: ""; }
.skylantern-game::after { position: absolute; z-index: 25; inset: 13px; pointer-events: none; background: linear-gradient(90deg,#9e743d,transparent 22%) left 17px top/90px 1px no-repeat,linear-gradient(-90deg,#9e743d,transparent 22%) right 17px top/90px 1px no-repeat,linear-gradient(90deg,#9e743d,transparent 22%) left 17px bottom/90px 1px no-repeat,linear-gradient(-90deg,#9e743d,transparent 22%) right 17px bottom/90px 1px no-repeat; filter: drop-shadow(0 0 5px rgba(208,161,95,.2)); content: ""; }
.skylantern-close { position: absolute; z-index: 30; top: 18px; right: 18px; width: 38px; height: 38px; border: 1px solid #c69a59; border-radius: 50%; background: #11100dce; color: #f0d19b; font-size: 25px; cursor: pointer; }
.skylantern-hud { position: absolute; z-index: 12; top: 18px; left: 50%; display: grid; width: 190px; padding: 8px 20px 11px; border: 1px solid #6c4d2c; background: linear-gradient(#2b2119ee,#100f0eee); text-align: center; transform: translateX(-50%); clip-path: polygon(10% 0,90% 0,100% 25%,93% 100%,7% 100%,0 25%); }
.skylantern-hud span { font-size: 13px; letter-spacing: .18em; }.skylantern-hud strong { color: #f3c875; font-size: 28px; font-weight: 500; line-height: 1.1; }.skylantern-hud strong b { font: inherit; }
.skylantern-sky { position: absolute; inset: 0 0 148px; overflow: hidden; touch-action: none; background-color: #061329; }
.skylantern-sky-bg { position: absolute; z-index: 0; inset: -8%; pointer-events: none; background: url("../../assets/images/taskgame/skylantern/nightsky.webp") center / cover no-repeat; transform: translate3d(var(--sky-drift-x,0),var(--sky-drift-y,0),0) scale(1.04); will-change: transform; }
.skylantern-sky::after { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; height:stretch; pointer-events: none; background: url("../../assets/images/taskgame/skylantern/mountain_scenery.webp") center bottom / cover no-repeat; content: ""; opacity: var(--mountain-opacity,1); transform: translateY(var(--mountain-shift,0%)); transform-origin: center bottom; transition: opacity .12s linear,transform .12s linear; }
.skylantern-moon { position: absolute; z-index: 2; top: 54px; right: 45px; width: 72px; aspect-ratio: 1; background: url("../../assets/images/taskgame/skylantern/moon.webp") center / contain no-repeat; filter: drop-shadow(0 0 14px #e8c17d66); }
.skylantern-embers { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }.skylantern-embers i { position: absolute; bottom: -24px; left: var(--ember-left); width: var(--ember-size); height: var(--ember-size); background-position: center; background-size: contain; background-repeat: no-repeat; opacity: 0; animation: skylantern-ember var(--ember-duration) var(--ember-delay) linear infinite; }.skylantern-embers .is-fire-1 { background-image: url("../../assets/images/taskgame/skylantern/fire_effect01.webp"); }.skylantern-embers .is-fire-2 { background-image: url("../../assets/images/taskgame/skylantern/fire_effect02.webp"); }.skylantern-embers .is-fire-3 { background-image: url("../../assets/images/taskgame/skylantern/fire_effect03.webp"); }
.skylantern-altimeter { position: absolute; z-index: 8; top: 105px; bottom: 72px; left: 15px; width: 60px; pointer-events: none; color: #d7b77e; }
.skylantern-altimeter-track { position: absolute; top: 0; bottom: 0; left: 10px; width: 5px; border: 1px solid #81623a; border-radius: 5px; background: #090b0cbb; box-shadow: inset 0 0 6px #000,0 0 0 1px #17130e; }
.skylantern-altimeter-fill { position: absolute; right: 0; bottom: 0; left: 0; height: 0; border-radius: inherit; background: linear-gradient(0deg,#f39b37,#ffd77a); box-shadow: 0 0 8px #e99a3d,0 0 16px #db762e66; transition: height .12s linear; }
.skylantern-altimeter-marker { position: absolute; z-index: 2; left: 50%; bottom: 0; color: #ffe0a0; font-size: 12px; line-height: 1; text-shadow: 0 0 7px #ff9c3c; transform: translate(-50%,50%); transition: bottom .12s linear; }
.skylantern-altimeter-track span { position: absolute; left: 13px; bottom: var(--height-level); display: flex; align-items: center; font-size: 10px; line-height: 1; transform: translateY(50%); }
.skylantern-altimeter-track span::before { width: 8px; height: 1px; margin-right: 3px; background: #a17c49; content: ""; }
.skylantern-altimeter-value { position: absolute; left: 25px; bottom: 0; width: max-content; padding: 3px 6px; border: 1px solid #75532e; background: #0b0d0ed9; color: #f3c979; font-size: 10px; line-height: 1; box-shadow: 0 3px 10px #000; transform: translateY(50%); transition: bottom .12s linear; }
.skylantern-player { position: absolute; z-index: 6; bottom: 12%; left: 50%; display: grid; width: 94px; height: 132px; background: url("../../assets/images/taskgame/skylantern/lantern_normal.webp") center / contain no-repeat; color: transparent; font-size: 0; place-items: center; transform: translateX(-50%); filter: drop-shadow(0 6px 7px #000); transition: left .08s linear,bottom .08s linear; }
.skylantern-player::before { display: none; }.skylantern-player::after { position: absolute; z-index: -2; inset: -25px -34px; border: 2px solid rgba(255,221,139,.9); border-radius: 50%; background: radial-gradient(circle,rgba(255,211,103,.08) 38%,rgba(255,190,69,.24) 69%,rgba(255,238,169,.08) 72%); box-shadow: inset 0 0 20px rgba(255,210,102,.4),0 0 14px rgba(255,187,61,.72),0 0 34px rgba(255,166,41,.48); content: ""; opacity: 0; pointer-events: none; transform: scale(.68); transition: opacity .22s ease,transform .22s ease; }.skylantern-player.is-shielded::after { opacity: 1; transform: scale(1); animation: skylantern-shield-pulse 1s ease-in-out infinite; }.skylantern-player i { position: absolute; z-index: -1; bottom: 1px; width: 46px; height: 58px; background: url("../../assets/images/taskgame/skylantern/fire.webp") center / contain no-repeat; opacity: 0; filter: drop-shadow(0 0 12px #ff8b35); transition: opacity .25s ease; }.skylantern-player i::after { display: none; }
.skylantern-shield-status { position: absolute; z-index: 9; top: 88px; left: 50%; min-width: 132px; padding: 6px 13px; border: 1px solid rgba(232,190,106,.8); border-radius: 20px; background: rgba(23,16,8,.82); color: #ffe2a0; font-size: 13px; line-height: 1; letter-spacing: .1em; text-align: center; box-shadow: 0 0 16px rgba(232,153,44,.28); transform: translateX(-50%); }.skylantern-shield-status[hidden] { display: none; }.skylantern-shield-status b { color: #fff2c8; font: inherit; font-variant-numeric: tabular-nums; }
.skylantern-player.is-lit { background-image: url("../../assets/images/taskgame/skylantern/lantern_light.webp"); animation: skylantern-lift .85s ease both, skylantern-float 2s .85s ease-in-out infinite; filter: drop-shadow(0 0 24px #ff8b3599); }.skylantern-player.is-lit i { opacity: 1; }.skylantern-player.is-hit { background-image: url("../../assets/images/taskgame/skylantern/lantern_broken.webp"); animation: skylantern-hit .32s ease both; }.skylantern-player.is-destroyed { background-image: url("../../assets/images/taskgame/skylantern/lantern_destory.webp"); }.skylantern-player.is-falling { animation: skylantern-fall 1.2s cubic-bezier(.42,0,.88,.62) both; }.skylantern-player.is-hit i { opacity: 0; }
.skylantern-obstacles { position: absolute; z-index: 4; inset: 0; }.skylantern-obstacle { position: absolute; display: grid; margin-left: 0; border: 1px solid #855a32; background: #21160fe6; color: #d7a65c; font-size: 18px; place-items: center; filter: drop-shadow(0 5px 7px #000); transform: translateX(-50%); }.skylantern-obstacle:is(.is-kite-01,.is-kite-02,.is-wildgoose,.is-cloud-01,.is-cloud-02) { border: 0; background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat; }.skylantern-obstacle.is-kite-01 { background-image: url("../../assets/images/taskgame/skylantern/kite01.webp"); }.skylantern-obstacle.is-kite-02 { background-image: url("../../assets/images/taskgame/skylantern/kite02.webp"); }.skylantern-obstacle.is-wildgoose-01 { background-image: url("../../assets/images/taskgame/skylantern/wildgoose01.webp"); }.skylantern-obstacle.is-wildgoose-02 { background-image: url("../../assets/images/taskgame/skylantern/wildgoose02.webp"); }.skylantern-obstacle.is-wildgoose-03 { background-image: url("../../assets/images/taskgame/skylantern/wildgoose03.webp"); }.skylantern-obstacle.is-cloud-01 { background-image: url("../../assets/images/taskgame/skylantern/cloud01.webp"); opacity: .78; }.skylantern-obstacle.is-cloud-02 { background-image: url("../../assets/images/taskgame/skylantern/cloud02.webp"); opacity: .78; }.skylantern-obstacle.is-banner { border-color: #c79a51; background: linear-gradient(90deg,#1a1009e8,#392514e8,#1a1009e8); color: #f0cc83; writing-mode: vertical-rl; letter-spacing: .3em; box-shadow: inset 0 0 10px rgba(224,164,72,.2),0 0 13px rgba(224,164,72,.22); }.skylantern-obstacle.is-repelled { opacity: 0; filter: brightness(2.2) drop-shadow(0 0 18px #ffd579); transform: translateX(-50%) scale(1.35); transition: opacity .18s ease,filter .18s ease,transform .18s ease; }
.skylantern-obstacle.is-wildgoose { transform: translateX(-50%) scaleX(var(--goose-facing,1)); }
.skylantern-intro,.skylantern-result { position: absolute; z-index: 10; inset: 0; display: flex; align-items: center; flex-direction: column; justify-content: flex-end; padding: 0 24px 25px; background: linear-gradient(transparent 35%,rgba(2,5,9,.84)); text-align: center; }.skylantern-intro[hidden],.skylantern-result[hidden] { display: none; }.skylantern-intro p { margin: 0 0 13px; letter-spacing: .18em; }.skylantern-intro small { margin-top: 13px; color: #ae9a78; font-size: 11px; }
.skylantern-light,.skylantern-result button { min-width: 210px; padding: 14px 24px; border: 1px solid #bd8d4e; background: linear-gradient(#4e3824,#21170f); color: #f2d29a; font-size: 20px; letter-spacing: .2em; cursor: pointer; }.skylantern-light { width: min(360px,76vw); min-width: 0; aspect-ratio: 4 / 1; padding: 0; border: 0; background: url("../../assets/images/taskgame/skylantern/btn_ignite.webp") center / contain no-repeat; color: transparent; filter: drop-shadow(0 8px 15px #000); transition: filter .2s ease,transform .2s ease; }.skylantern-light:hover,.skylantern-light:focus-visible { filter: brightness(1.18); transform: scale(1.035); }.skylantern-result { justify-content: center; background: #02060bd9; }.skylantern-result p { margin: 0; }.skylantern-result > strong { margin: 5px 0 14px; color: #f0c878; font-size: 43px; }.skylantern-result > span { margin-bottom: 24px; font-size: 18px; }.skylantern-result div { display: grid; gap: 10px; }.skylantern-result button { min-width: 190px; font-size: 15px; }
.skylantern-rewards { position: absolute; z-index: 11; right: 14px; bottom: 14px; left: 14px; display: flex; height: 120px; align-items: flex-end; justify-content: space-around; padding: 14px 8px; border: 1px solid #4f3b25; background: #090d10e8; }.skylantern-rewards span { position: relative; display: grid; min-width: clamp(34px,8vw,48px); justify-items: center; gap: 3px; color: #a9936d; font-size: 10px; opacity: .58; transition: opacity .3s ease,transform .3s ease; }.skylantern-rewards i { display: block; width: clamp(34px,8vw,48px); aspect-ratio: 4 / 5; background: url("../../assets/images/taskgame/skylantern/reward_light.webp") center / contain no-repeat; color: transparent; font-size: 0; font-style: normal; filter: grayscale(.5) brightness(.72) drop-shadow(0 3px 5px #000); transition: filter .3s ease; }.skylantern-rewards small { color: #d5b779; }.skylantern-rewards .is-next { color: #f1d49c; opacity: 1; transform: translateY(-3px); }.skylantern-rewards .is-next i { filter: brightness(1.05) drop-shadow(0 0 8px rgba(237,167,67,.45)); }.skylantern-rewards .is-reached { color: #ffe3a4; opacity: 1; }.skylantern-rewards .is-reached i { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255,178,62,.72)); }.skylantern-rewards .is-reached::after { position: absolute; right: 0; bottom: 4px; display: grid; width: 17px; height: 17px; border: 1px solid #e3bd70; border-radius: 50%; background: #23391f; color: #e9d692; font-size: 11px; content: "✓"; place-items: center; box-shadow: 0 0 7px rgba(180,220,117,.3); }
@keyframes skylantern-lift { from { transform: translateX(-50%) translateY(80px); } to { transform: translateX(-50%) translateY(0); } } @keyframes skylantern-float { 50% { transform: translateX(-50%) translateY(-8px) rotate(1deg); } } @keyframes skylantern-hit { 35% { transform: translateX(-50%) rotate(12deg) scale(.94); filter: brightness(2); } to { transform: translateX(-50%) rotate(-8deg) translateY(30px); opacity: .55; } }
@keyframes skylantern-fall { from { transform: translateX(-50%) translateY(25px) rotate(-8deg); opacity: .8; } 55% { opacity: 1; } to { transform: translateX(-50%) translateY(78vh) rotate(145deg) scale(.76); opacity: .28; } }
@keyframes skylantern-ember { 0% { opacity: 0; transform: translate3d(0,0,0) scale(.55); } 18% { opacity: .9; } 72% { opacity: .65; } 100% { opacity: 0; transform: translate3d(var(--ember-drift),-82vh,0) scale(1.15); } }
@keyframes skylantern-shield-pulse { 50% { border-color: #fff0ba; box-shadow: inset 0 0 30px rgba(255,218,126,.54),0 0 22px rgba(255,190,67,.88),0 0 46px rgba(255,157,24,.54); transform: scale(1.045); } }
@media (min-width: 901px) { .skylantern-game { width: 88vw; }.skylantern-sky { bottom: 138px; }.skylantern-player { width: 98px; height: 132px; } }
@media (max-width: 430px) and (orientation: portrait) { .skylantern-altimeter { left: 8px; width: 52px; }.skylantern-altimeter-value { left: 20px; }.skylantern-altimeter-track span { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .skylantern-player,.skylantern-player::after,.skylantern-card,.skylantern-embers i { animation: none !important; transition: none !important; } }