:root{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#0b1920}
body{color:#ffebbb}
button,input{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:wait}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.venue{min-height:100vh;min-height:100svh;display:grid;place-items:center;position:relative;isolation:isolate;overflow:hidden;padding:12px 12px max(8px,env(safe-area-inset-bottom))}
.venue::before{content:"";position:absolute;inset:-38px;z-index:-2;background:#163226 url('/luobo/assets/garden.webp') center/cover no-repeat;filter:blur(26px) brightness(.55) saturate(.82)}
.venue::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 35%,transparent 20%,#0b202052 76%),linear-gradient(0deg,#071719bb,transparent 55%)}
.frame{width:min(100%,calc((100vh - 52px) * .75),690px);width:min(100%,calc((100svh - 52px) * .75),690px);position:relative}
.stage{container-type:inline-size;width:100%;aspect-ratio:413/552;position:relative;overflow:hidden;isolation:isolate;border-radius:14px;background:#09202c;box-shadow:0 0 0 1px #e0b8638c,0 20px 90px #06100c88}
.scene{position:absolute;inset:0;background-size:100% 100%;background-position:center;background-repeat:no-repeat}

.reward{background-image:url('/luobo/assets/scenes-hd/grand.webp')}
.reward.participation{background-image:url('/luobo/assets/scenes-hd/lucky.webp')}
.records{background-image:url('/luobo/assets/scenes/records.webp?v=brand2')}
.brand{position:absolute;z-index:2;left:3.8%;top:2.6%;width:10.5%;max-width:58px;height:auto;pointer-events:none;user-select:none;filter:drop-shadow(0 1px 1.5px #0e2139bd) drop-shadow(0 1px 4px #15303e7a)}
.spot{position:absolute;padding:0;border:0;background:transparent;border-radius:999px}
.spot:focus-visible{outline:3px solid white;outline-offset:-3px;box-shadow:0 0 0 4px #e99519}
.history{right:2%;top:2.4%;width:32%;height:8%}
.pass{position:absolute;left:10.9%;top:80.1%;width:79.1%;height:8.1%;border-radius:999px;display:flex;align-items:center;padding:0 4.3%;gap:2%;background:#fff;color:#514830;border:1px solid #e6cb99;box-shadow:0 .7cqw 1.3cqw #44230b45}
.pass:focus-within{box-shadow:0 0 0 .6cqw #ffe292}.pass svg{width:4.3cqw;height:4.3cqw;flex:none;fill:none;stroke:#927f61;stroke-width:1.8}.pass input{min-width:0;width:100%;height:85%;border:0;outline:0;color:#3f3526;background:transparent;font-size:clamp(14px,3.55cqw,22px);text-align:left}.pass input::placeholder{color:#8a8275}.enter{left:13.8%;width:73.5%;top:87.1%;height:10.8%}
.enter:active,.accept:active,.bottom-return:active,.top-return:active{background:#7c3e1738}
.prize-tier,.prize-value,.time-seal,.ledger{position:absolute;text-align:center}
.prize-tier{top:27.7%;height:8%;left:29.3%;width:42%;display:grid;place-items:center;color:#fff0ad;background:linear-gradient(#b72917,#9c1105 60%,#ce3211);border:1px solid #ffcc66;border-radius:1.8cqw;font-weight:850;font-size:6.1cqw;text-shadow:0 2px #8a2a12}
.prize-photo{position:absolute;left:13.3%;right:11.9%;top:35.9%;height:27.2%;overflow:hidden;background:#f7d295}.prize-photo img{width:100%;height:100%;object-fit:cover}
.prize-value{left:13.7%;width:73.7%;top:62.1%;height:17.7%;background:linear-gradient(100deg,#ffe3a8,#fff0cc 46%,#f9dda7);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#9a200c}.prize-value strong,.prize-value b{display:block}.prize-value strong{font-size:9.4cqw;line-height:1.08;font-weight:900}.prize-value b{font-size:5.35cqw;line-height:1.45}
.time-seal{left:17%;right:15%;top:78.8%;height:5.4%;background:#f9dea5;color:#74512c;font-size:2.7cqw;display:grid;place-items:center}.participation .time-seal{left:12%;right:12%;top:79.9%;height:5.8%;background:#111413;color:#ffeabd}.participation .prize-value,.participation .prize-tier{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.accept{left:20%;width:60%;top:86.4%;height:12.3%}
.top-return{right:1.5%;top:3%;width:30%;height:9%}.bottom-return{left:24%;width:53%;top:82.5%;height:10.9%}
.ledger{top:30.2%;left:4.45%;width:93%;height:49.3%;overflow:auto;border-radius:2cqw;border:1px solid #cfaf6d;background:#fffaf0;color:#302617;text-align:left;overscroll-behavior:contain;scrollbar-width:thin}
.ledger table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:3.05cqw}.ledger th,.ledger td{padding:2.6cqw 1.1cqw;border-bottom:1px solid #e7d9be;overflow-wrap:anywhere;text-align:center}.ledger th{background:#f7eacc;color:#4b391c;font-size:2.8cqw}.ledger td:nth-child(3){color:#922b10;font-weight:720}.ledger th:nth-child(1){width:10%}.ledger th:nth-child(2){width:16%}.ledger th:nth-child(3){width:43%}.ledger th:nth-child(4){width:31%}.record-status{padding:0 3cqw;color:#6f593c;font-size:3cqw}.record-form{padding:5.2cqw}.record-form h3{font-size:5.4cqw;margin:0 0 1.6cqw}.record-form p{font-size:3.3cqw;color:#745e42;margin:0 0 3cqw}.record-form input{width:100%;background:white;color:#392a14;border:1px solid #c8a576;border-radius:9px;padding:2.8cqw;font-size:max(16px,3.4cqw)}.ledger button,dialog:where(#prizes) button{background:linear-gradient(#fff1b4,#f7bd56);border:1px solid #b37c25;border-radius:999px;color:#332009;font-weight:750;padding:2cqw 5cqw;font-size:3.6cqw;margin-top:2.2cqw}.record-empty{padding:4cqw}
.message{position:absolute;z-index:3;left:7%;width:86%;bottom:25.5%;border:1px solid #d3ad69;border-radius:12px;text-align:center;padding:2cqw 3cqw;background:#101c20f2;color:#ffebc1;font-size:3.4cqw;line-height:1.4}.message:empty{display:none}.stage[data-scene="records"] .message{bottom:21.7%}.stage[data-scene="choose"] .message{bottom:8%}
.foot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 4px 0;color:#f5dbc0;font-size:12px;text-shadow:0 1px 3px #000}.foot button{background:transparent;color:#ffe8b6;font-size:12px;min-height:29px;border:0;padding:2px 6px}.foot button span{color:#f3b841}
dialog:where(#prizes){max-width:min(92vw,430px);border:1px solid #ddb875;border-radius:16px;background:linear-gradient(155deg,#143141,#071b26);color:#ffe5b2;padding:24px;box-shadow:0 18px 50px #0006}dialog:where(#prizes)::backdrop{background:#061018bd}dialog:where(#prizes) h2{margin:0 0 14px}dialog:where(#prizes) ol{list-style:none;padding:0;margin:0}dialog:where(#prizes) li{padding:9px 0;border-bottom:1px solid #9c835345;display:flex;gap:10px;justify-content:space-between;font-size:14px}dialog:where(#prizes) li small{white-space:nowrap;color:#f0cb82}dialog:where(#prizes) p{font-size:13px;line-height:1.6;color:#ead9bd}dialog:where(#prizes) button{padding:9px 22px;font-size:15px}
@media(max-width:600px) and (orientation:portrait){.venue{padding:0 0 env(safe-area-inset-bottom);align-content:center}.frame{width:min(100%,calc((100svh - 30px)*.75))}.stage{border-radius:0;aspect-ratio:3/4;height:auto}.foot{padding-inline:14px}.venue::before{filter:blur(22px) brightness(.57)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.ledger .swap{margin-left:3cqw;background:transparent;font-size:3cqw;padding:1.3cqw 3cqw}
.venue,.stage{overflow:clip}
@media(min-width:601px),(orientation:landscape){.frame{width:min(100%,calc((100vh - 62px)*.747),690px);width:min(100%,calc((100svh - 62px)*.747),690px)}}

.ledger .open-reward{border:0;background:transparent;color:#932f15;padding:0;margin:0;border-radius:0;font:inherit;cursor:pointer}
.ledger .open-reward:focus-visible,.ledger .open-reward:hover{text-decoration:underline}
.top-prize .prize-value,.top-prize .prize-tier{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.is-preview .pass input{color:#776f60}

#roots{position:absolute;inset:0}
.root{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;border-radius:46%;touch-action:manipulation}
.root::after{content:"";position:absolute;inset:46% 4% 1%;border-radius:48%;pointer-events:none}
.root.chosen::after,.root:focus-visible::after{box-shadow:0 0 0 2px #ffdd76,0 0 19px #ffdf6c,inset 0 0 10px #ffe49b88}
.root:focus-visible{outline:2px solid #fff5c4;outline-offset:2px}
@media(hover:hover){.root:hover::after{box-shadow:0 0 12px #ffdf6cb3}}
.prize-art{display:block;width:100%;height:auto;border-radius:6px}


.stage{background:#143220 url('/luobo/assets/garden-motion/still.webp?v=scatter10') center/100% 100% no-repeat}
#garden{position:absolute;inset:0;display:block;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}
#garden.painted{opacity:1}#garden.curtain{z-index:3}
.scene{z-index:1}.brand{z-index:4}.history{z-index:4;background:transparent url('/luobo/assets/garden-motion/history.webp') center/100% 100% no-repeat;left:66.4%;top:3.04%;width:31.1%;height:6.38%}
.welcome,.choose,.pull{background:transparent}
.choose::before{content:"";position:absolute;left:24.7%;top:42.46%;width:53.7%;height:5.37%;background:url('/luobo/assets/garden-motion/instruction.webp') center/contain no-repeat;pointer-events:none;animation:field-prompt-in .32s ease-out both}
@keyframes field-prompt-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.enter{background:transparent url('/luobo/assets/garden-motion/start.webp') center/100% 100% no-repeat;left:14.1%;top:89%;width:72.6%;height:10%}
.enter:active{filter:brightness(.95)}
.stage[data-scene="pull"] .message{bottom:5%;width:auto;left:50%;transform:translateX(-50%);padding:1.4cqw 3cqw}

.welcome-landmarks{position:absolute;top:26.8116%;left:0;width:100%;height:35.9420%;pointer-events:none;user-select:none}

#musicToggle{position:absolute;z-index:4;right:35.4%;top:3.05%;height:6.35%;min-height:30px;max-height:49px;display:inline-flex;align-items:center;justify-content:center;gap:.42em;padding:0 .88em;border:1px solid #ecc66f;border-radius:999px;background:linear-gradient(180deg,#17382f,#102520);color:#ffdf92;font-size:clamp(11px,2.65cqw,16px);font-weight:700;line-height:1;box-shadow:0 2px 5px #102c342e}
#musicToggle svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#musicToggle[aria-pressed=true]{color:#fff1bb;background:linear-gradient(180deg,#35634c,#123528)}
#musicToggle:focus-visible{outline:3px solid #fff0bd;outline-offset:2px}

.foot .experience-link,.foot #replayButton{margin-left:auto;color:#ffe3a4;border:1px solid #9a8556;background:#18382d;border-radius:999px;padding:4px 10px;font:650 12px/1.45 system-ui;text-decoration:none;text-shadow:none}
.foot .experience-link:focus-visible,.foot #replayButton:focus-visible{outline:2px solid #fff1b4;outline-offset:2px}
.pull-stills{position:absolute;inset:0;background:#244630 url('/luobo/assets/garden-motion/pull-stages.webp') left center/300% 100% no-repeat;pointer-events:none}
.pull-stills[data-frame="1"]{background-position:center center}.pull-stills[data-frame="2"]{background-position:right center}
.pull-stills[data-frame="2"]::before{content:"";position:absolute;left:58%;top:36%;width:22%;aspect-ratio:518/690;background:url('/luobo/assets/garden-motion/harvest-ticket.svg?v=memberticket1') center/contain no-repeat}
.pull-stills span{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);color:#ffedbf;background:#153329e8;border:1px solid #d9b66e;border-radius:99px;white-space:nowrap;padding:5px 16px;font-size:clamp(13px,3.2cqw,18px)}
.ledger .record-replay{display:block;margin:3px auto 0;padding:2px 5px;border:0;border-radius:3px;background:transparent;color:#66532e;text-decoration:underline;font-size:2.8cqw}

.draw-wayback{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#183f32;border:1px solid #dcb978;border-radius:12px 12px 0 0;padding:3px 12px 3px 6px;color:#fff3d2}
.draw-wayback a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;background:#ffe4a2;border-radius:8px;color:#214536;font:800 16px/1.2 system-ui,sans-serif;text-decoration:none}
.draw-wayback a span{font-size:22px;line-height:1}.draw-wayback a:hover{background:#fff1cc}.draw-wayback a:focus-visible{outline:3px solid white;outline-offset:1px}
.draw-wayback small{color:#eee1bc;font:650 13px/1.3 system-ui,sans-serif}.draw-wayback+.stage{border-top-left-radius:0;border-top-right-radius:0}