.r-scene{position:relative;isolation:isolate;aspect-ratio:3/2;overflow:hidden;background:#567b63;touch-action:pan-y}.r-backdrop,.r-overlay{position:absolute;inset:0}.r-backdrop{background-size:cover;background-position:center;transition:filter 1.1s,transform 1.1s}.r-overlay{z-index:2}.r-tag{position:absolute;top:3%;left:3%;padding:5px 12px;background:#fcf7e6ed;border-left:3px solid #b48238;border-radius:3px;font-size:14px;z-index:7;pointer-events:none}.r-steps{display:flex;list-style:none;margin:0;padding:10px 14px;gap:10px;background:#183f33;color:#b3c5ae;font-size:14px}.r-steps li{flex:1;border-bottom:2px solid #55715c;padding:3px;text-align:center}.r-steps .current{color:#fff1bd;border-color:#e6bd68}.r-steps .done{color:#e2eacd}.r-hit,.r-art{position:absolute;border:0;padding:0;background:transparent;border-radius:12px;min-width:34px;min-height:34px;z-index:3;transition:left 1s,top 1s,transform .45s;touch-action:none}.r-art{background-repeat:no-repeat;border-radius:0;filter:drop-shadow(0 5px 5px #17312430)}.r-hit:not(.r-art):hover:not(:disabled),.r-hit.active{box-shadow:inset 0 0 0 2px #fff1a58a,inset 0 0 28px #ffe19f2e}.r-hit.active:after{content:'';position:absolute;inset:25%;border:2px solid #fff8bfbb;border-radius:50%;box-shadow:0 0 9px #fdedaf;animation:invite 2s infinite;pointer-events:none}.r-hit:focus-visible,.r-art:focus-visible{outline:3px solid #fff1a4;outline-offset:2px}.r-hit.read{box-shadow:none}.r-hit:disabled:after{display:none}.r-art.active,.r-art:hover:not(:disabled){filter:drop-shadow(0 0 9px #fff1b2)}.draggable{cursor:grab}.selected{filter:drop-shadow(0 0 10px #ffde65);z-index:9}.dragging{transition:none!important;cursor:grabbing;z-index:10}.r-zone{z-index:4}.r-zone:not(.drop-ready){pointer-events:auto}.drop-ready{border:2px dashed #fff6b4;background:#f5d76820;box-shadow:0 0 17px #f2d47a88}.r-speech{position:absolute;max-width:66%;padding:12px 16px;color:#324734;background:#fffbedf2;border:1px solid #b9a276;border-radius:16px;box-shadow:0 4px 14px #263d3530;font-family:KaiTi,'楷体',serif;font-size:clamp(17px,2vw,23px);line-height:1.55;z-index:6;pointer-events:none}.r-controls{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.r-choice,.r-next{border:1px solid #98ae86;padding:11px 18px;border-radius:5px;background:#fffdf2;color:#30513b;min-height:46px;font-size:16px}.r-next{background:#24573f;color:#fff;border-color:#24573f}.r-choice:disabled{background:#e4edd9}.r-choice[aria-pressed=true]{background:#f1deab;border-color:#a07735}.r-spoken{font-size:18px;line-height:1.9;border-left:4px solid #b68940;background:#f5eed8;padding:18px}.r-range-label{display:flex;flex-wrap:wrap;align-items:center;gap:14px;width:100%;font-size:16px}.r-range-label input{flex:1;min-width:150px;min-height:44px;accent-color:#45734c}.portrait{aspect-ratio:3/4;max-width:400px;margin:auto}.r-after{position:absolute;inset:0;background-size:200% 100%;background-position:100% center;transition:opacity 2s}.closeup .r-backdrop{filter:blur(5px) brightness(.55)}.r-pupil{position:absolute;z-index:6;background:#293c34;border:4px solid #726c4c;border-radius:50%;box-shadow:inset -3px -3px 8px #0007;touch-action:none;transition:left .7s,top .7s}.r-pupil:after{content:'';position:absolute;top:14%;left:20%;width:18%;height:18%;border-radius:50%;background:#fff9df}.eye-blur #eye{filter:blur(3px)}.r-calendar{width:100%;display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:12px;background:#f9f3de}.r-calendar p{grid-column:1/-1;margin:0 0 8px}.r-calendar span{text-align:center;background:#e0e8ce;border-radius:3px;line-height:1.8;font-size:14px}.r-calendar .taken{background:#ad6749;color:white}.r-waypoint{border-radius:50%;background:#fff7ba35;border:2px dashed #fff5bf}.r-go-stone{position:absolute;background:#17241c;border-radius:50%;box-shadow:1px 2px 2px #0006}.r-grain{position:absolute;background:#fffbe8;border:1px solid #b1afa0;border-radius:2px;box-shadow:1px 2px 4px #30231377;z-index:5;min-width:3px;min-height:3px;animation:salt-fall .7s both}.r-weather{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}.r-weather i{position:absolute;top:-15%;display:block;animation:fall 1s linear infinite}.r-weather.rain i{width:1px;height:20%;background:linear-gradient(transparent,#e8f4f9bb)}.r-weather.snow i{width:5px;height:5px;border-radius:50%;background:#fffefa;animation-name:snowfall}.r-weather.stars i{top:22%;width:3px;height:3px;background:#fff1b7;animation:twinkle 2s infinite alternate}.r-weather.steam{inset:37% 10% 10% 20%;filter:blur(7px)}.r-weather.steam i{width:28px;height:50px;background:#fffbe3aa;border-radius:50%;animation:steam 2.5s infinite}.night .r-backdrop{filter:brightness(.35) saturate(.65)}.winter .r-backdrop{filter:saturate(.3) brightness(1.1)}.summer .r-backdrop{filter:saturate(1.3)}.autumn .r-backdrop{filter:sepia(.35) saturate(1.2)}.glowing .r-backdrop{filter:brightness(1.15) saturate(1.15)}.shake{animation:shake .5s}.flying{animation:flap .35s infinite alternate}.r-wind{animation:breeze 2s infinite alternate}@keyframes invite{50%{opacity:.3;transform:scale(.85)}}@keyframes salt-fall{from{translate:0 -35px;opacity:0}to{translate:0 0;opacity:1}}@keyframes shake{30%,70%{translate:0 4px}50%{translate:0 -3px}}@keyframes flap{to{transform:translateY(-8px) scaleY(.9)}}@keyframes breeze{to{transform:scale(1.02) translateX(2px)}}@keyframes fall{to{translate:-25px 700px}}@keyframes snowfall{to{translate:20px 700px}}@keyframes twinkle{to{opacity:.2}}@keyframes steam{from{top:80%;opacity:.7}to{top:0;opacity:0}}
@media(max-width:720px){.r-scene{aspect-ratio:1.3}.r-scene.portrait{aspect-ratio:3/4}.r-tag{font-size:13px}.r-steps{gap:4px;padding:8px 5px}.r-steps li{font-size:13px}.r-speech{padding:8px 10px;font-size:17px;max-width:74%}.r-choice,.r-next{padding:10px 13px}.r-hit,.r-art{min-width:30px;min-height:30px}.r-controls{gap:8px}}@media(prefers-reduced-motion:reduce){.r-backdrop,.r-hit,.r-art,.r-pupil,.r-after{transition:none}.r-hit:after,.r-weather i,.flying,.shake,.r-wind,.r-grain{animation:none}}

.face-view{aspect-ratio:3/4;width:min(100%,400px);margin:auto}.r-scene{scroll-margin-top:12px}.r-art[data-art="owl"]{clip-path:polygon(0 0,100% 0,100% 64%,87% 64%,87% 100%,0 100%)}.r-art[data-art="dove"]{clip-path:polygon(13% 0,100% 0,100% 100%,0 100%,0 64%,13% 64%)}
.r-zone:disabled{pointer-events:none}