:root{--gold:#e6c07b;--gold2:#f6dca2;--gold3:#b8904f;--ink:#0d1322;--ink2:#151d33;--cream:#f6ecd9;--muted:#b9b3a6;--glass:rgba(22,28,46,.72);
--sky1:#0b1226;--sky2:#1a2547;--sky3:#3b3a62;--hud:58px;--bar:88px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
--serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;--sans:-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream);font-family:var(--sans);overflow:hidden;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
svg{display:block}
.hidden{display:none!important}
#sky-bg{position:fixed;inset:0;background:linear-gradient(180deg,var(--sky1),var(--sky2) 55%,var(--sky3));transition:background 2s}
#view{position:fixed;inset:0;overflow:hidden}
body[data-room=map] #view{overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---------- 开场 ---------- */
#splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 38%,#2a2440 0,#121729 55%,#080b16 100%);transition:opacity 1.2s ease,visibility 1.2s}
#splash.leaving{opacity:0;visibility:hidden}#splash.gone{display:none}
.splash-sky i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7;animation:tw 4s infinite ease-in-out}
.splash-sky i:nth-child(1){left:12%;top:14%}.splash-sky i:nth-child(2){left:78%;top:10%;animation-delay:1s}.splash-sky i:nth-child(3){left:66%;top:28%;animation-delay:2s}.splash-sky i:nth-child(4){left:22%;top:34%;animation-delay:.5s}
.splash-sky i:nth-child(5){left:88%;top:44%;animation-delay:1.5s}.splash-sky i:nth-child(6){left:40%;top:8%;animation-delay:2.5s}.splash-sky i:nth-child(7){left:8%;top:58%;animation-delay:3s}.splash-sky i:nth-child(8){left:56%;top:18%;animation-delay:.8s}
.splash-inner{position:relative;padding:24px;max-width:420px}
.lamp{position:relative;width:60px;height:120px;margin:0 auto 18px;animation:sway 5s ease-in-out infinite;transform-origin:50% 0}
.lamp-glow{position:absolute;left:50%;top:70%;width:220px;height:220px;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(255,214,140,.45),rgba(255,214,140,0) 65%);animation:breatheGlow 4s ease-in-out infinite}
#splash h1{font-family:var(--serif);font-weight:600;font-size:40px;letter-spacing:.3em;margin:0 0 4px .3em;background:linear-gradient(180deg,#fff3d0,#e2b56a);-webkit-background-clip:text;background-clip:text;color:transparent}
#splash .sub{letter-spacing:.5em;color:var(--gold);margin:0 0 26px .5em;font-size:14px}
#splash .slogan{font-family:var(--serif);font-size:19px;line-height:1.9;color:#f3e6cc;margin:0 0 10px;text-shadow:0 0 20px rgba(255,200,120,.25)}
#splash .greet{color:var(--muted);font-size:13px;margin:0 0 28px}
#splash .hint{font-size:12px;color:#8d8778;margin-top:18px}
.gold-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 26px;border-radius:999px;background:linear-gradient(180deg,#f6d999,#d7a95c);color:#3a2610;font-weight:600;letter-spacing:.08em;box-shadow:0 6px 24px rgba(230,180,90,.35),inset 0 1px 0 rgba(255,255,255,.6);transition:transform .15s}
.gold-btn:active{transform:scale(.96)}
#enter-btn{font-size:17px;padding:0 40px;min-height:52px}
.ghost-btn{min-height:42px;padding:0 18px;border-radius:999px;border:1px solid rgba(230,192,123,.45);color:var(--gold2);background:rgba(255,255,255,.04)}
.ghost-btn:active{background:rgba(230,192,123,.15)}

/* ---------- 顶部栏 ---------- */
#hud{position:fixed;left:0;right:0;top:0;z-index:30;height:calc(var(--hud) + var(--safe-t));padding:var(--safe-t) 10px 0;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(8,11,22,.55),rgba(8,11,22,0));pointer-events:none}
#hud>*{pointer-events:auto}
.hud-btn{display:flex;align-items:center;gap:2px;height:40px;padding:0 12px 0 6px;border-radius:999px;background:var(--glass);border:1px solid rgba(230,192,123,.25);color:var(--gold2);font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hud-btn svg,.hud-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#hud-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15;padding-left:4px}
#hud-title b{font-family:var(--serif);font-size:17px;letter-spacing:.08em;color:#fff3d6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#hud-title small{font-size:11px;color:var(--gold);opacity:.85}
.hud-right{display:flex;gap:6px}
.hud-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--glass);border:1px solid rgba(230,192,123,.25);color:var(--gold2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hud-icon circle{fill:currentColor}
.hud-icon.on{background:linear-gradient(180deg,#f6d999,#d7a95c);color:#3a2610}
.hud-icon.muted .wave{opacity:0}.hud-icon.muted svg{opacity:.55}

/* ---------- 动作栏 ---------- */
#actions{position:fixed;left:0;right:0;bottom:0;z-index:25;height:calc(var(--bar) + var(--safe-b));padding:10px 10px calc(10px + var(--safe-b));display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;justify-content:safe center;background:linear-gradient(0deg,rgba(8,11,22,.92),rgba(8,11,22,.55) 70%,rgba(8,11,22,0))}
#actions::-webkit-scrollbar{display:none}
.act{flex:0 0 auto;min-width:70px;height:66px;padding:6px 8px;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:rgba(30,36,58,.78);border:1px solid rgba(230,192,123,.22);color:#f2e3c4;font-size:12.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform .12s,background .3s}
.act i svg{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.act:active{transform:scale(.94)}
.act.on{background:linear-gradient(180deg,rgba(246,217,153,.95),rgba(215,169,92,.95));color:#3a2610}.act.on i svg{stroke:#3a2610}
.act.primary{background:linear-gradient(180deg,rgba(246,217,153,.22),rgba(215,169,92,.12));border-color:rgba(246,217,153,.6)}
.act.on,.act.primary.on{background:linear-gradient(180deg,rgba(246,217,153,.95),rgba(215,169,92,.95));color:#3a2610}

/* ---------- 提示与面板 ---------- */
#toasts{position:fixed;left:0;right:0;top:calc(var(--hud) + var(--safe-t) + 6px);z-index:40;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.toast{max-width:min(92vw,440px);padding:10px 16px;border-radius:14px;background:rgba(20,24,40,.9);border:1px solid rgba(230,192,123,.3);color:#f6ead2;font-size:13.5px;line-height:1.5;text-align:center;opacity:0;transform:translateY(-8px);transition:all .45s;box-shadow:0 8px 30px rgba(0,0,0,.35)}
.toast.in{opacity:1;transform:none}
#sheet-wrap{position:fixed;inset:0;z-index:50}
#sheet-bg{position:absolute;inset:0;background:rgba(4,6,14,.55);opacity:0;transition:opacity .3s;backdrop-filter:blur(2px)}
#sheet{position:absolute;left:50%;bottom:0;width:min(100%,520px);max-height:86vh;overflow-y:auto;transform:translate(-50%,105%);transition:transform .34s cubic-bezier(.2,.8,.2,1);padding:10px 20px calc(24px + var(--safe-b));border-radius:24px 24px 0 0;background:linear-gradient(180deg,#232a42,#171c2f);border:1px solid rgba(230,192,123,.28);border-bottom:0;box-shadow:0 -10px 50px rgba(0,0,0,.5)}
#sheet-wrap.open #sheet-bg{opacity:1}#sheet-wrap.open #sheet{transform:translate(-50%,0)}
.sheet-grip{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:2px auto 10px}
#sheet h2{font-family:var(--serif);font-weight:600;font-size:20px;letter-spacing:.1em;margin:4px 0 12px;color:#fbe9c4}
#sheet h3{font-size:14px;color:var(--gold);margin:18px 0 6px;font-weight:600}
#sheet p{line-height:1.7;margin:6px 0}
.sheet-x{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06)}
.sheet-x svg{width:18px;height:18px;stroke:#d9cdb3;stroke-width:2;fill:none}
.small{font-size:12.5px;color:var(--muted)}.center{text-align:center}.tiny{font-size:11px;color:#6f6a60}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}
textarea,#sheet input[type=text],#sheet input:not([type]){width:100%;border-radius:14px;border:1px solid rgba(230,192,123,.3);background:rgba(0,0,0,.25);color:#fbf1dc;padding:12px 14px;font:inherit;font-size:16px;line-height:1.6;outline:none}
textarea{min-height:110px;resize:none}
textarea:focus,#sheet input:focus{border-color:var(--gold)}
.sliders label{display:flex;align-items:center;gap:12px;margin:10px 0}.sliders span{width:52px;font-size:14px}.sliders em{width:30px;font-style:normal;font-size:12px;color:var(--muted);text-align:right}
input[type=range]{flex:1;accent-color:#e6c07b;height:30px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:8px 14px;border-radius:999px;border:1px solid rgba(230,192,123,.3);font-size:13px;color:#eadcc0;background:rgba(255,255,255,.03)}
.chip.on{background:linear-gradient(180deg,#f6d999,#d7a95c);color:#3a2610;border-color:transparent}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.wbtn{padding:12px 6px;border-radius:16px;border:1px solid rgba(230,192,123,.22);background:rgba(255,255,255,.03);display:flex;flex-direction:column;align-items:center;gap:3px}
.wbtn i svg{width:28px;height:28px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wbtn b{font-size:14px}.wbtn small{font-size:11px;color:var(--muted)}
.wbtn.on{background:rgba(230,192,123,.18);border-color:var(--gold)}
.rec{margin-top:12px;font-size:13px;color:var(--muted)}.rec a{display:inline-block;margin:4px 6px 0 0;padding:6px 12px;border-radius:999px;background:rgba(230,192,123,.14);color:var(--gold2)}
.real{margin-top:8px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.1)}
.menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.menu-grid button{padding:14px 4px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(230,192,123,.18);display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px}
.menu-grid svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.surprise,.daily{text-align:center;padding:6px 0}
.gift svg{width:54px;height:54px;margin:0 auto;fill:none;stroke:var(--gold);stroke-width:1.4;animation:pop .6s}
.surprise h3{font-family:var(--serif);font-size:26px!important;color:#fff0cc!important}
.big-line{font-family:var(--serif);font-size:20px;line-height:1.8!important;color:#fbecc9;margin:16px 0!important}
.plist{padding-left:18px;line-height:1.8;font-size:14px}
.plist b{color:var(--gold2)}
.link{color:var(--gold);text-decoration:underline;text-underline-offset:3px;font-size:13px}

/* ---------- 转场 ---------- */
#veil{position:fixed;inset:0;z-index:45;pointer-events:none;background:radial-gradient(circle at 50% 55%,#3a2c1c,#06080f 70%);opacity:0;transition:opacity .4s ease}
#veil.on{opacity:1}
#dim{position:fixed;inset:0;z-index:20;pointer-events:none;background:#000;opacity:0;transition:opacity 1.2s}
body.dnd #dim{opacity:.32}
body.dnd #toasts,body.dnd .cat-bubble{display:none!important}
#sleep-veil{position:fixed;inset:0;z-index:58;background:rgba(0,0,0,.35);display:grid;place-items:center;transition:opacity 1s}
.sleep-msg{font-family:var(--serif);color:#c9b48a;text-align:center;font-size:22px;line-height:2;transition:opacity 4s}.sleep-msg small{font-size:13px;color:#7e735e}.sleep-msg.fade{opacity:.25}
#breath{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(circle at 50% 45%,rgba(40,48,80,.96),rgba(8,10,20,.98));opacity:0;transition:opacity .6s}
#breath.on{opacity:1}
.b-ring{width:230px;height:230px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(230,192,123,.35);transform:scale(.6);transition:transform 4s ease-in-out}
.b-ring.in{transform:scale(1)}.b-ring.hold{transform:scale(1)}.b-ring.out{transform:scale(.6);transition-duration:6s}
.b-core{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle,#ffe2a6,#d39a4e 60%,rgba(211,154,78,0) 72%);box-shadow:0 0 80px rgba(255,200,120,.45)}
.b-say{font-family:var(--serif);font-size:26px;letter-spacing:.3em;margin:0}.b-left{color:var(--muted);margin:0;font-size:13px}

/* ---------- 地图 ---------- */
.map{max-width:560px;margin:0 auto;padding:calc(var(--hud) + var(--safe-t)) 14px calc(30px + var(--safe-b));position:relative}
.hero{position:relative;margin:0 -14px;height:330px;overflow:hidden;border-radius:0 0 28px 28px}
.hero-sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky1),var(--sky2) 60%,var(--sky3))}
.stars{position:absolute;inset:0}.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;animation:tw 3.5s infinite ease-in-out}
body[data-period=morning] .stars,body[data-period=afternoon] .stars{opacity:0}
.moon{position:absolute;right:13%;top:14%;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fffbe8,#f3d998 60%,#d8b570);box-shadow:0 0 40px 10px rgba(255,226,150,.35),0 0 120px 40px rgba(255,226,150,.12)}
body[data-period=morning] .moon,body[data-period=afternoon] .moon{background:radial-gradient(circle,#fffdf0,#ffe9a8 60%,#ffd27a);box-shadow:0 0 60px 20px rgba(255,236,170,.6)}
body[data-period=dusk] .moon{background:radial-gradient(circle,#ffe4b0,#ff9e5e);top:44%;box-shadow:0 0 80px 30px rgba(255,150,90,.5)}
.skyline{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px}
.flick{animation:flick 6s infinite}
.hero-text{position:absolute;left:0;right:0;top:34px;padding:0 22px}
.hero h1{font-family:var(--serif);font-size:36px;font-weight:600;letter-spacing:.24em;margin:12px 0 0;background:linear-gradient(180deg,#fff6dc,#e5b86b);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{color:var(--gold);letter-spacing:.5em;margin:4px 0 12px;font-size:13px}
.hero .slogan{font-family:var(--serif);font-size:15px;line-height:1.8;color:#f3e6cc;max-width:15em;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.chip-row{display:flex;gap:8px;margin:0;flex-wrap:wrap}
.chip.ghost{display:inline-flex;align-items:center;gap:4px;background:rgba(10,14,28,.45);backdrop-filter:blur(6px);font-size:12px;padding:6px 12px}
.chip.ghost svg{width:15px;height:15px;fill:none;stroke:var(--gold);stroke-width:1.8}
.greet-card{text-align:center;color:var(--muted);font-size:13px;margin:14px 0 4px}
.card{display:block;width:100%;text-align:left;margin:12px 0;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,rgba(54,44,30,.6),rgba(28,32,52,.75));border:1px solid rgba(230,192,123,.28);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.card small{color:var(--gold);font-size:11.5px;letter-spacing:.2em}.card p{margin:6px 0 0;font-family:var(--serif);font-size:16.5px;line-height:1.7;color:#f8ebd0}
.late{border-color:rgba(160,170,255,.35);background:linear-gradient(135deg,rgba(40,44,90,.7),rgba(20,22,44,.8))}.late b{color:#c9cfff;font-size:14px}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:6px 0 4px}
.tools button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 2px;border-radius:16px;background:rgba(30,36,58,.65);border:1px solid rgba(230,192,123,.18);font-size:12px;color:#efe1c4}
.tools svg{width:24px;height:24px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rec-row{margin:14px 0 0}.rec-row h3{font-size:13px;color:var(--muted);font-weight:500;margin:0 0 8px}
.rec-row div{display:flex;gap:8px;flex-wrap:wrap}.rec-row a{padding:8px 14px;border-radius:999px;background:rgba(230,192,123,.14);border:1px solid rgba(230,192,123,.35);color:var(--gold2);font-size:13.5px}
.zone{position:relative;margin:26px 0 0;padding:0 0 14px;border-radius:24px;background:linear-gradient(180deg,rgba(26,32,54,.85),rgba(18,22,38,.9));border:1px solid rgba(230,192,123,.2);overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.zone-art{position:relative;height:132px;background:linear-gradient(180deg,var(--sky1),var(--sky2));overflow:hidden}
.zone-art svg{position:absolute;left:0;right:0;bottom:0;width:100%;height:100%}
.zone header{padding:12px 16px 4px}
.zone h2{font-family:var(--serif);font-weight:600;font-size:21px;letter-spacing:.12em;margin:0;color:#fbe7bd;display:flex;align-items:baseline;gap:10px}
.zone h2 small{font-family:var(--sans);font-size:10.5px;letter-spacing:.2em;color:var(--gold3);text-transform:uppercase}
.zone header p{margin:4px 0 0;color:var(--muted);font-size:12.5px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 12px 0}
.tile{position:relative;display:flex;flex-direction:column;gap:3px;padding:14px 12px 12px;border-radius:16px;min-height:96px;background:linear-gradient(160deg,rgba(255,226,160,.13),rgba(255,226,160,.03));border:1px solid rgba(230,192,123,.3);transition:transform .15s,background .3s}
.tile:active{transform:scale(.97)}
.tile i svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tile b{font-size:15.5px;color:#fff1d2;margin-top:4px}.tile small{font-size:11.5px;color:var(--muted);line-height:1.45}
.tile em{position:absolute;right:8px;top:8px;font-style:normal;font-size:10.5px;padding:2px 8px;border-radius:999px;background:linear-gradient(180deg,#f6d999,#d7a95c);color:#3a2610}
.tile u{position:absolute;right:10px;bottom:10px;text-decoration:none;font-size:10px;color:#ffb38a}
.tile.rec u{display:none}
.tile.soon{background:rgba(255,255,255,.02);border:1px dashed rgba(230,192,123,.18);cursor:default;min-height:74px}
.tile.soon b{color:#b7ae9c;font-size:14px}.tile.soon small{color:var(--gold3);letter-spacing:.1em}
.tile .win{width:22px;height:16px;border-radius:3px;background:linear-gradient(180deg,#ffe3a3,#e9a253);box-shadow:0 0 14px rgba(255,200,110,.55);opacity:.75;animation:breatheGlow 5s infinite}
.zone.closed .zone-art{filter:saturate(.6) brightness(.75)}
.soon-ribbon{position:absolute;right:12px;top:12px;padding:4px 12px;border-radius:999px;font-size:11.5px;background:rgba(10,12,24,.7);border:1px solid rgba(230,192,123,.4);color:var(--gold2);letter-spacing:.15em}
.map-foot{text-align:center;margin:30px 0 10px;color:var(--muted);font-size:13px}.map-foot p{margin:8px 0}
.neon{animation:neon 3s infinite}
.spin{animation:spin 40s linear infinite}

/* ---------- 房间舞台 ---------- */
.room{position:absolute;inset:0;overflow:hidden}
.stage{position:absolute;left:50%;top:calc(var(--hud) + var(--safe-t));transform:translateX(-50%);height:calc(100% - var(--hud) - var(--safe-t) - var(--bar) - var(--safe-b) + 40px);aspect-ratio:9/16;max-width:100vw}
@supports not (aspect-ratio:1){.stage{width:min(100vw,56vh)}}
@media (max-aspect-ratio:9/16){.stage{width:100vw;height:auto;top:50%;transform:translate(-50%,-52%)}}
.stage>svg.scene{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hot{cursor:pointer}
.stage .fx{position:absolute;pointer-events:none;transform:translate(-50%,-50%)}
.ripple{width:20px;height:20px;border-radius:50%;border:2px solid rgba(255,255,255,.7);animation:ripple 1.4s ease-out forwards}
.ripple2{width:20px;height:9px;border-radius:50%;border:1.5px solid rgba(220,250,255,.8);animation:ripple 1.6s ease-out forwards}
.sparkle{width:8px;height:8px;border-radius:50%;background:#fff3c4;box-shadow:0 0 12px 4px rgba(255,220,140,.8);animation:sparkle 1.2s ease-out forwards}
.overlay{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;transition:opacity 1s}
.overlay.on{opacity:1;pointer-events:auto}
.hint-tag{position:absolute;transform:translate(-50%,-50%);font-size:11px;color:#fff1d2;background:rgba(10,12,24,.55);padding:3px 9px;border-radius:999px;border:1px solid rgba(230,192,123,.35);pointer-events:none;white-space:nowrap;animation:hintIn 1s .8s both}
body.dnd .hint-tag{display:none}

/* ---------- 小猫 ---------- */
.cat{position:absolute;z-index:4;transform:translate(-50%,-100%);aspect-ratio:1}
.cat-mover{width:100%;height:100%;position:relative}
.cat-hit{width:100%;height:100%;display:block}
.cat.flip .cat-svg{transform:scaleX(-1)}
.cat-svg{width:100%;height:100%;overflow:visible}
.cat-tail{transform-origin:84px 104px;animation:tail 3s ease-in-out infinite}
.cat-eyes{transform-origin:60px 44px;animation:blink 5s infinite}
.cat-closed,.cat-zzz{display:none}
.cat-zzz text{fill:#e9e2ff;font-family:var(--sans);font-weight:700}
.cat.sleep .cat-eyes,.cat.happy .cat-eyes,.cat.eat .cat-eyes{display:none}
.cat.sleep .cat-closed,.cat.happy .cat-closed,.cat.eat .cat-closed{display:block}
.cat.sleep .cat-zzz{display:block;animation:zzz 3s infinite}
.cat.sleep .cat-body,.cat.sleep .cat-head{animation:catBreath 3.5s ease-in-out infinite;transform-origin:60px 110px}
.cat.sleep .cat-head{transform:translateY(6px) rotate(-6deg)}
.cat.sleep .cat-tail{animation-duration:7s}
.cat.stretch .cat-svg{animation:stretch 4s ease-in-out 2}
.cat.walk .cat-svg{animation:walk .5s ease-in-out infinite}
.cat.eat .cat-head{transform:translateY(14px);transform-origin:60px 60px;animation:eat .45s ease-in-out infinite}
.cat.happy .cat-tail{animation-duration:.8s}
body[data-period=night] .cat .pupil,body[data-period=dusk] .cat .pupil{rx:3.8;ry:5.2}
body[data-period=night] .cat-eyes ellipse:not(.pupil){fill:#e9d36a;filter:drop-shadow(0 0 2px #f6e98a)}
.cat-bowl{position:absolute;left:58%;bottom:-2%;width:34%;height:12%;border-radius:0 0 40px 40px;background:linear-gradient(180deg,#e8e2d6,#a79e8e);opacity:0;transition:opacity .3s}
.cat-bowl:before{content:"";position:absolute;left:20%;top:-20%;width:60%;height:50%;background:#d9a066;border-radius:50%}
.cat.has-bowl .cat-bowl{opacity:1}
.cat-bubble{position:absolute;left:50%;bottom:104%;transform:translate(-50%,6px);width:max-content;max-width:62vw;max-width:min(62vw,260px);padding:8px 12px;border-radius:14px;background:rgba(255,248,232,.95);color:#4a3420;font-size:12.5px;line-height:1.5;opacity:0;pointer-events:none;transition:all .4s;box-shadow:0 6px 20px rgba(0,0,0,.3);text-align:center}
.cat-bubble:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:rgba(255,248,232,.95)}
.cat-bubble.show{opacity:1;transform:translate(-50%,0)}
.cat-menu{position:absolute;left:50%;bottom:102%;transform:translateX(-50%) scale(.8);display:flex;gap:6px;opacity:0;pointer-events:none;transition:all .25s;z-index:3}
.cat-menu.show{opacity:1;pointer-events:auto;transform:translateX(-50%) scale(1)}
.cat-menu button{white-space:nowrap;padding:8px 11px;border-radius:999px;background:rgba(255,248,232,.96);color:#5a3c1e;font-size:12.5px;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.cat-menu.show~.cat-bubble{opacity:0}
.heart-fx{position:absolute;top:10%;color:#ff8fa3;font-size:18px;animation:heartUp 1.6s ease-out forwards;pointer-events:none}

/* ---------- 关键帧 ---------- */
@keyframes tw{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes breatheGlow{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes flick{0%,92%,100%{opacity:1}94%{opacity:.3}96%{opacity:.9}}
@keyframes neon{0%,100%{opacity:1;filter:drop-shadow(0 0 3px #ff7fb0)}50%{opacity:.8;filter:drop-shadow(0 0 6px #ff7fb0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-50%) scale(5);opacity:0}}
@keyframes sparkle{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}100%{transform:translate(-50%,-160%) scale(1.4);opacity:0}}
@keyframes hintIn{from{opacity:0}to{opacity:1}}
@keyframes tail{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(10deg)}}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes zzz{0%{opacity:0;transform:translateY(4px)}50%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}
@keyframes catBreath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.03)}}
@keyframes stretch{0%,100%{transform:scaleX(1)}40%,60%{transform:scaleX(1.12) scaleY(.92)}}
@keyframes walk{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes eat{0%,100%{transform:translateY(14px)}50%{transform:translateY(17px)}}
@keyframes heartUp{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.2)}}
@keyframes fall{from{transform:translateY(-10%)}to{transform:translateY(110%)}}
@keyframes rise{0%{opacity:0;transform:translateY(0) scale(.6)}30%{opacity:.8}100%{opacity:0;transform:translateY(-120px) scale(1.6)}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes glowPulse{0%,100%{opacity:.6}50%{opacity:1}}

/* ================= 房间：共用 ================= */
body{--g-hill:#1b2a3a;--g-hill2:#1c3030;--g-lawn1:#1f3a2c;--g-lawn2:#0f2018;--g-path:#6b604f;--g-bush:#1f4a33;--g-bush2:#285a3c;--g-leaf:#1d4230;--g-leaf2:#27563a;--g-house:#2a2f45;--g-roof:#3a3550}
body[data-period=morning],body[data-period=afternoon]{--g-hill:#7d9fb0;--g-hill2:#6f9a78;--g-lawn1:#82b36a;--g-lawn2:#4d7f46;--g-path:#d8c6a0;--g-bush:#4f8a4a;--g-bush2:#62a058;--g-leaf:#4f8f4a;--g-leaf2:#69a85a;--g-house:#e9dcc6;--g-roof:#b5653e}
body[data-period=dusk]{--g-hill:#5a4a6a;--g-hill2:#4a5a4e;--g-lawn1:#4a6a42;--g-lawn2:#26402a;--g-path:#a8906e;--g-bush:#355e3a;--g-bush2:#447046;--g-leaf:#36603a;--g-leaf2:#467548;--g-house:#5a4a5a;--g-roof:#7a4a4a}
body[data-period=dawn]{--g-hill:#141c2c;--g-hill2:#14242a;--g-lawn1:#162a22;--g-lawn2:#0a1612;--g-path:#4a443c;--g-bush:#163a28;--g-bush2:#1d4630;--g-leaf:#153424;--g-leaf2:#1d4430}
.room-garden,.room-wish{background:linear-gradient(180deg,var(--sky1),var(--sky2) 45%,var(--g-lawn1) 58%,var(--g-lawn2))}
.g-stars circle{fill:#fff;animation:tw 4s infinite ease-in-out}
.g-stars{transition:opacity 2s}
body[data-period=morning] .g-stars,body[data-period=afternoon] .g-stars{opacity:0}
body[data-weather=cloudy] .g-stars,body[data-weather=rain] .g-stars,body[data-weather=storm] .g-stars{opacity:.15}
body[data-weather=starry] .g-stars circle{filter:drop-shadow(0 0 2px #fff)}
.moon-disc{fill:#fdf0c8}
body[data-period=morning] .moon-disc,body[data-period=afternoon] .moon-disc{fill:#fff4c9;filter:drop-shadow(0 0 12px #ffe9a0)}
body[data-period=dusk] .g-moon{transform:translateY(200px)}body[data-period=dusk] .moon-disc{fill:#ffb070}
.g-clouds path{fill:#8a93ab;opacity:.0;transition:opacity 2s}
body[data-period=morning] .g-clouds path,body[data-period=afternoon] .g-clouds path{fill:#fff}
body[data-weather=cloudy] .g-clouds path,body[data-weather=breeze] .g-clouds path{opacity:.75}
body[data-weather=rain] .g-clouds path,body[data-weather=storm] .g-clouds path{opacity:.9;fill:#5a6378}
.g-clouds .cl1{animation:drift 60s linear infinite}.g-clouds .cl2{animation:drift 80s linear infinite reverse}.g-clouds .cl3{animation:drift 70s linear infinite}
@keyframes drift{0%,100%{transform:translateX(-30px)}50%{transform:translateX(60px)}}
.wlit{opacity:0;transition:opacity 2s}
body[data-period=night] .wlit,body[data-period=dusk] .wlit,body[data-period=dawn] .wlit{opacity:1}
.lantern{animation:glowPulse 4s infinite}
.gate-glow{animation:glowPulse 6s infinite}
.flw{transition:filter 1.5s}
.flw-sway{animation:fsway 4s ease-in-out infinite;transform-origin:0 0}
.flw:nth-child(3n) .flw-sway{animation-delay:-1.3s}.flw:nth-child(3n+1) .flw-sway{animation-delay:-2.6s}
@keyframes fsway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.flw .petals{transition:transform 1.6s cubic-bezier(.3,1.4,.5,1)}
.flw .halo{opacity:0;transition:opacity 2s}
.flw .dew{opacity:0;fill:#dff4ff;transition:opacity 1.5s}
body[data-weather=sunny] .flw .petals{transform:translate(0px,-40px) scale(1.12)}
body[data-weather=cloudy] .flw .petals{transform:translate(0px,-40px) scale(.82)}
body[data-weather=rain] .flw .petals,body[data-weather=storm] .flw .petals{transform:translate(0px,-38px) scale(.72) rotate(8deg)}
body[data-weather=rain] .flw .dew,body[data-weather=storm] .flw .dew{opacity:1;animation:glowPulse 2s infinite}
body[data-weather=starry] .flw .halo{opacity:.16;animation:glowPulse 3s infinite}
body[data-weather=starry] .flw .petals{filter:brightness(1.25) drop-shadow(0 0 4px rgba(255,240,200,.9))}
body[data-weather=breeze] .flw-sway{animation-duration:1.6s}
body[data-weather=storm] .flw-sway{animation-duration:1.1s}
.flw.grow .flw-sway{animation:grow 1.6s cubic-bezier(.3,1.5,.5,1) both,fsway 4s 1.6s ease-in-out infinite}
@keyframes grow{0%{transform:scale(0)}100%{transform:scale(1)}}
.flw.wiggle .petals{animation:wig .8s}
@keyframes wig{0%,100%{rotate:0deg}25%{rotate:18deg}60%{rotate:-12deg}}
.g-rainfx,.gh-rain,.rain-layer{position:absolute;inset:-10% -60%;pointer-events:none;opacity:0;transition:opacity 1.5s;background:repeating-linear-gradient(103deg,transparent 0 14px,rgba(200,220,255,.22) 14px 15px,transparent 15px 31px);background-size:62px 120px;animation:rainmove .5s linear infinite}
@keyframes rainmove{from{background-position:0 0}to{background-position:-26px 120px}}
body[data-weather=rain] .g-rainfx{opacity:.8}
body[data-weather=storm] .g-rainfx{opacity:1;animation-duration:.3s}
.g-flash{position:absolute;inset:-50% -100%;background:#e8f0ff;opacity:0;pointer-events:none}
.g-flash.on{animation:flash 1.2s}
@keyframes flash{0%{opacity:0}5%{opacity:.75}10%{opacity:.1}16%{opacity:.55}100%{opacity:0}}
.g-petals{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s}
body[data-weather=breeze] .g-petals{opacity:1}
.g-petals i{position:absolute;left:-10%;width:9px;height:6px;border-radius:60% 0;background:#f6b9c9;animation:petal 8s linear infinite}
@keyframes petal{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(130vw,140px) rotate(720deg)}}
.fireflies{position:absolute;inset:0;pointer-events:none}
.fireflies i{position:absolute;left:0;top:0;width:6px;height:6px;margin:-3px;border-radius:50%;background:#fff6a8;box-shadow:0 0 10px 4px rgba(255,236,120,.6)}
body[data-period=morning] .fireflies i,body[data-period=afternoon] .fireflies i{background:#fffbe0;box-shadow:0 0 6px 2px rgba(255,255,255,.5);width:4px;height:4px}
.svg-rip{fill:none;stroke:rgba(220,250,255,.75);stroke-width:1.3;rx:2;ry:1;animation:svgrip 1.6s ease-out forwards}
@keyframes svgrip{to{rx:46px;ry:18px;opacity:0;stroke-width:.3}}
.koi-tail{animation:ktail .5s ease-in-out infinite alternate;transform-origin:-13px 0}
@keyframes ktail{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.greenhouse .gh-light{animation:glowPulse 5s infinite}
.gh-rain{opacity:0}
body[data-weather=rain] .greenhouse .gh-rain{opacity:1}
.greenhouse .gh-rain{opacity:.7}
.greenhouse .gh-rain path{animation:ghr .7s linear infinite}
@keyframes ghr{from{transform:translateY(-10px)}to{transform:translateY(16px)}}
.swing{transform-origin:332px 276px}
.seed{width:10px;height:10px;border-radius:50%;background:radial-gradient(#fff6c8,#f0b44a);box-shadow:0 0 16px 6px rgba(255,214,120,.7);animation:seedfall 1.2s ease-in forwards}
@keyframes seedfall{from{transform:translate(-50%,-50%) scale(1.4)}to{transform:translate(-50%,280%) scale(.6)}}
/* 玻璃花房内景 */
.greenhouse-in{background:#0e1628}
.greenhouse-in .gh-streaks path{stroke:rgba(190,215,255,.45);stroke-width:1.2;animation:streak 1.4s linear infinite}
@keyframes streak{from{transform:translateY(-40px);opacity:0}30%{opacity:1}to{transform:translateY(120px);opacity:0}}
.greenhouse-in .gh-rain{opacity:.5;inset:0 -60% 45% -60%}
.greenhouse-in .lamp-halo{transition:opacity 1s;animation:glowPulse 5s infinite}
.greenhouse-in.lamp-off .lamp-halo{opacity:0;animation:none}
.greenhouse-in.lamp-off .lamp-shade{fill:#7a6a50}
.greenhouse-in.lamp-off .string-lights circle{fill:#5a4a30}
.string-lights circle{animation:glowPulse 3s infinite;filter:drop-shadow(0 0 4px #ffd27a)}
.teapot{transform-origin:138px 588px;transition:transform .6s}
.pouring .teapot{transform:translate(18px,-8px) rotate(-38deg)}
.tea-stream{transition:opacity .3s}
.pouring .tea-stream{opacity:1;stroke-dasharray:4 3;animation:dash .4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
.pouring .tea-fill,.poured .tea-fill{opacity:1;transition:opacity 2s}
.steam path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2;stroke-linecap:round;opacity:0}
.poured .steam path{animation:steamUp 3s ease-out infinite}.poured .steam path:nth-child(2){animation-delay:1.2s}
@keyframes steamUp{0%{opacity:0;transform:translateY(4px)}40%{opacity:.8}100%{opacity:0;transform:translateY(-26px)}}
/* 许愿池 */
.coin{fill:#e6c07b;animation:glowPulse 3s infinite}
.jets path{stroke-dasharray:6 8;animation:dash 1s linear infinite;opacity:.8}
.lotus{animation:floaty 5s ease-in-out infinite}.lotus.l2{animation-delay:-2s}
.moon-ref{animation:glowPulse 4s infinite}
.w-fx{position:absolute;inset:0;pointer-events:none;overflow:visible}
.rel{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%)}
.rel p{margin:0;color:#3a2a18;font-size:11px;line-height:1.35;text-align:center;font-family:var(--serif);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rel-boat{width:34%;transition:all 6.5s ease-in}
.rel-boat svg{width:100%}
.rel-boat p{position:absolute;left:8%;right:8%;top:68%;font-size:9px}
.rel-boat{animation:floaty 1.6s ease-in-out infinite}
.rel-boat.go{left:82%;top:63%;width:10%;opacity:0}
.rel-lamp{top:66%;transition:top 7s cubic-bezier(.4,0,.6,1),opacity 7s ease-in,transform 7s}
.sky-lamp{width:84px;height:104px;border-radius:40% 40% 18% 18%;background:radial-gradient(ellipse at 50% 70%,#fff3c8,#ffbe6a 55%,#e07c3a);box-shadow:0 0 40px 14px rgba(255,180,90,.55);display:flex;align-items:center;justify-content:center;padding:10px;animation:sway 3s ease-in-out infinite}
.sky-lamp p{color:#6a3010}
.rel-lamp.go{top:4%;opacity:.0;transform:translate(-50%,-50%) scale(.2)}
.rel-wave{top:72%;width:80%}
.rel-wave p{font-size:16px;color:#f4f0e6;text-shadow:0 0 8px rgba(0,0,0,.6);display:block;-webkit-line-clamp:unset}
.rel-wave span{display:inline-block;transition:transform 2.6s 1.6s ease-out,opacity 2.6s 1.6s,filter 2.6s 1.6s}
.rel-wave.go span{transform:translate(var(--dx),var(--dy)) rotate(var(--r));opacity:0;filter:blur(3px)}
.wave-sweep{position:absolute;left:-160%;bottom:-4%;width:150%;height:58%;transition:left 3.8s cubic-bezier(.45,.05,.55,.95);pointer-events:none}
.wave-sweep svg{width:100%;height:100%}
.wave-sweep.go{left:120%}
.toss-coin{position:absolute;left:50%;top:96%;width:22px;height:22px;margin:-11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff4c4,#e6b85a 60%,#a7772e);box-shadow:0 0 12px rgba(255,210,120,.8);animation:toss 1.1s cubic-bezier(.3,.6,.6,1) forwards}
@keyframes toss{0%{transform:translate(0,0) scale(1.4) rotateX(0)}50%{transform:translate(-10px,-300px) scale(1) rotateX(720deg)}100%{transform:translate(-4px,-200px) scale(.4) rotateX(1440deg);opacity:.6}}
.star-born{width:6px;height:6px;animation:glowPulse 1s 3}
.modes{display:flex;gap:8px;margin-top:12px}
.modes button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 4px;border-radius:14px;border:1px solid rgba(230,192,123,.25);font-size:13.5px}
.modes svg{width:26px;height:26px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.modes .on{background:rgba(230,192,123,.18);border-color:var(--gold)}
.check{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:13.5px;color:#e6dcc8}
.check input{width:20px;height:20px;accent-color:#e6c07b}
.wish-list{list-style:none;padding:0;margin:0}.wish-list li{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.wish-list span{flex:1;font-family:var(--serif);line-height:1.6}.wish-list small{display:block;font-family:var(--sans);font-size:11px;color:var(--muted)}
.wish-list button{font-size:12px;color:#e9a0a0;padding:6px 10px}
/* 雨夜房间 */
.room-rainroom{background:linear-gradient(180deg,#232a35 0,#232a35 60%,#3a2618 66%,#22160c)}
.r-streaks path{stroke:rgba(200,220,255,.5);stroke-width:1.1;animation:streak 1.4s linear infinite}
.heavy .r-streaks path{animation-duration:.6s!important;stroke-width:1.5}
.r-drops circle{fill:rgba(220,235,255,.55)}
.bokeh{filter:blur(2px)}
.trail{stroke:rgba(220,235,255,.5);stroke-width:2;stroke-linecap:round}
.drip-g .bead{fill:rgba(230,240,255,.85);animation:beadfall 3s ease-in forwards}
.drip-g .trail{animation:trailgrow 3s ease-in forwards}
@keyframes beadfall{to{transform:translateY(var(--len))}}
@keyframes trailgrow{from{stroke-dasharray:0 400}to{stroke-dasharray:0 400;opacity:0}}
.room-dark{position:absolute;inset:-40% -100%;pointer-events:none;background:radial-gradient(ellipse at 35% 40%,rgba(10,14,30,.25),rgba(5,8,18,.75));opacity:0;transition:opacity 1.2s}
.lamp-off .room-dark{opacity:1}
.room-rainroom .lamp-halo{transition:opacity 1s;animation:glowPulse 5s infinite}
.lamp-off .lamp-halo{opacity:0;animation:none}
.lamp-off .lamp-shade{fill:#6a5c48}
.tv-on{opacity:0;transition:opacity .6s}
.tv-is-on .tv-on{opacity:1}
.tv-led{fill:#c33}.tv-is-on .tv-led{fill:#5f5}
.tv-glow{opacity:0;transition:opacity 1s}
.tv-is-on .tv-glow{opacity:1;animation:tvflick 4s infinite}
@keyframes tvflick{0%,100%{opacity:.85}50%{opacity:1}}
.tvg-s{stop-color:#7ab8ff}
.ch{opacity:0;transition:opacity .5s}
[data-ch="0"] .ch0,[data-ch="1"] .ch1,[data-ch="2"] .ch2,[data-ch="3"] .ch3{opacity:1}
[data-ch="1"] .tvg-s{stop-color:#ff9a6a}[data-ch="2"] .tvg-s{stop-color:#ff8a3a}[data-ch="3"] .tvg-s{stop-color:#4ac0d0}
.aur{animation:aur 6s ease-in-out infinite alternate}.aur.a2{animation-duration:8s}
@keyframes aur{from{transform:translateX(-10px) scaleY(.9)}to{transform:translateX(10px) scaleY(1.2)}}
.seaw{animation:floaty 3s ease-in-out infinite}
.fl{transform-origin:370px 394px;animation:flame .35s ease-in-out infinite alternate}.fl.f2{animation-duration:.27s}
@keyframes flame{from{transform:scaleY(.9) skewX(-3deg)}to{transform:scaleY(1.1) skewX(3deg)}}
.tvfish{animation:fishswim 8s ease-in-out infinite alternate}
@keyframes fishswim{from{transform:translateX(-14px)}to{transform:translateX(18px)}}
.bub{animation:bub 2.4s linear infinite}
@keyframes bub{from{transform:translateY(0);opacity:1}to{transform:translateY(-70px);opacity:0}}
.room-rainroom .teapot{transform-origin:190px 694px}
.room-rainroom.pouring .teapot{transform:translate(20px,-10px) rotate(-38deg)}
.room-rainroom.pouring .tea-stream{opacity:1;stroke-dasharray:4 3;animation:dash .4s linear infinite}
.room-rainroom.pouring .tea-fill,.room-rainroom.poured .tea-fill{opacity:1;transition:opacity 2s}
.room-rainroom.poured .steam path{animation:steamUp 3s ease-out infinite}.room-rainroom.poured .steam path:nth-child(2){animation-delay:1.2s}
/* ===== 会所共用 ===== */
.twk{animation:flick 5s infinite}.blink{animation:glowPulse 1.6s infinite}
.steam-layer,.hs-steam,.sp-steam{position:absolute;inset:0;pointer-events:none;overflow:visible}
.steam-layer i,.hs-steam i,.sp-steam i{position:absolute;width:120px;height:80px;margin:-40px -60px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.28),rgba(255,255,255,0) 70%);filter:blur(6px);animation:puff 9s ease-in-out infinite}
@keyframes puff{0%{opacity:0;transform:translate(0,0) scale(.6)}30%{opacity:1}100%{opacity:0;transform:translate(20px,-140px) scale(1.6)}}
.drop-fx{width:6px;height:10px;border-radius:50%;background:#d8f6ff;animation:dropfx 1s ease-out forwards}
@keyframes dropfx{0%{transform:translate(-50%,0)}50%{transform:translate(calc(-50% + var(--x,0px)),-90px)}100%{transform:translate(-50%,10px);opacity:0}}
/* 泳池 */
.room-pool{--pool1:#3fc6e0;--pool2:#0d4f7a;background:linear-gradient(180deg,var(--sky1),var(--sky2) 50%,var(--pool1) 54%,var(--pool2) 80%,#9a8f7e 81%)}
#p-water rect:first-child{transition:fill 1.5s}
.plight{fill:var(--pool1);opacity:.9;filter:blur(6px);animation:glowPulse 3s infinite}
.caus path{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1.2;animation:caus 4s ease-in-out infinite}
@keyframes caus{0%,100%{transform:translateX(0);opacity:.2}50%{transform:translateX(12px);opacity:.7}}
.underwater{position:absolute;inset:-30% -100%;z-index:6;pointer-events:none;opacity:0;transition:opacity 1.2s;background:linear-gradient(180deg,var(--pool1),var(--pool2) 70%,#04101e);display:flex;align-items:center;justify-content:center}
.underwater.on{opacity:.96}
.underwater p{font-family:var(--serif);color:rgba(255,255,255,.85);font-size:18px;letter-spacing:.2em}
.rays{position:absolute;inset:0;background:repeating-linear-gradient(100deg,rgba(255,255,255,.0) 0 40px,rgba(255,255,255,.12) 40px 70px,rgba(255,255,255,0) 70px 120px);animation:rays 8s ease-in-out infinite alternate}
@keyframes rays{to{transform:translateX(60px)}}
.bubbles{position:absolute;inset:0}.bubbles i{position:absolute;bottom:-20px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);animation:bubup 5s linear infinite}
@keyframes bubup{to{transform:translateY(-110vh) translateX(20px)}}
/* 桑拿 */
.room-sauna{--heat:.3;background:linear-gradient(180deg,#a87244,#a87244 62%,#6a4426 63%)}
.s-tint{position:absolute;inset:-30% -100%;pointer-events:none;background:radial-gradient(ellipse at 70% 70%,rgba(255,120,40,calc(var(--heat)*.35)),rgba(255,120,40,0) 60%);mix-blend-mode:screen}
.s-ember{animation:glowPulse 2s infinite}.s-cracks path{animation:glowPulse 1.3s infinite}
.s-fire{transform-origin:355px 688px;animation:flame .3s ease-in-out infinite alternate}
.ladle{transform-origin:300px 560px;transition:transform .5s}
.throw .ladle{animation:ladle 1s ease-in-out}
@keyframes ladle{40%{transform:translate(80px,-90px) rotate(-30deg)}60%{transform:translate(90px,-84px) rotate(-70deg)}}
.throw .s-splash{animation:splashS .8s .45s}
@keyframes splashS{0%{opacity:1;transform:translateY(6px)}100%{opacity:0;transform:translateY(-10px)}}
.steam-layer b{position:absolute;top:66%;width:150px;height:110px;margin:-55px -75px;border-radius:50%;background:radial-gradient(ellipse,rgba(255,255,255,.75),rgba(255,255,255,0) 70%);filter:blur(8px);animation:bigsteam 5s ease-out forwards}
@keyframes bigsteam{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:translate(-120px,-380px) scale(3)}}
.steamy .steam-layer i{opacity:1}
.hglass{transform-origin:225px 234px;transition:transform .8s}
.hglass.flip{transform:rotate(180deg)}
.sand-top{transform-origin:225px 230px;transform:scaleY(0)}.sand-bot{transform-origin:225px 262px}.sand-flow{opacity:0}
.sand-run .sand-top{animation:sandTop 180s linear forwards}.sand-run .sand-bot{animation:sandBot 180s linear forwards}.sand-run .sand-flow{opacity:1;stroke-dasharray:2 2;animation:dash .5s linear infinite}
@keyframes sandTop{from{transform:scaleY(1)}to{transform:scaleY(0)}}
@keyframes sandBot{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
.s-halo{transition:opacity 1s}
[data-lv="1"] .s-halo{opacity:.4}[data-lv="2"] .s-halo{opacity:0}
.room-sauna[data-lv="1"] .stage{filter:brightness(.8)}.room-sauna[data-lv="2"] .stage{filter:brightness(.55)}
.room-sauna[data-lv="2"] .s-tint{background:radial-gradient(ellipse at 78% 75%,rgba(255,120,40,.5),rgba(255,120,40,0) 50%)}
.s-merc{transition:all 1.2s}
/* 足疗 */
.room-spa{--spa:rgba(255,190,110,.18);background:linear-gradient(180deg,#3a2418,#5a3a26 58%,#3a2418 59%)}
.spa-tint{position:absolute;inset:-30% -100%;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,var(--spa),rgba(0,0,0,.25));transition:background 1.5s}
.room-spa[data-li="3"] .stage{filter:brightness(.62)}.room-spa .stage{transition:filter 1.5s}
.sconce{animation:glowPulse 5s infinite}
.saltglow{fill:url(#spSconce);animation:glowPulse 4s infinite}
.diff-led{fill:#555}.diff-on .diff-led{fill:#7fe0ff;filter:drop-shadow(0 0 3px #7fe0ff)}
.mist{position:absolute;left:86.6%;top:65%;width:1px;height:1px;opacity:0;transition:opacity 1s;pointer-events:none}
.diff-on .mist{opacity:1}
.mist i{position:absolute;width:40px;height:40px;margin:-20px;border-radius:50%;background:radial-gradient(rgba(255,255,255,.55),rgba(255,255,255,0) 70%);filter:blur(3px);animation:mist 7s ease-out infinite}
@keyframes mist{0%{transform:translate(0,0) scale(.3);opacity:0}20%{opacity:.9}100%{transform:translate(var(--dx),-220px) scale(3);opacity:0}}
.sp-steam{opacity:.35;transition:opacity 1s}.soaking .sp-steam{opacity:1}
.petals-w{animation:floaty 4s ease-in-out infinite}
.soaking #sp-basin ellipse{transition:fill 1s}
/* 温泉 */
.room-hotspring{background:linear-gradient(180deg,var(--sky1),var(--sky2) 50%,#e6edf4 66%)}
.snow{position:absolute;inset:-10% -60%;pointer-events:none;overflow:hidden}
.snow i{position:absolute;top:-4%;border-radius:50%;background:#fff;opacity:.9;animation:snowfall 10s linear infinite}
[data-snow="1"] .snow i:nth-child(2n){display:none}
[data-snow="2"] .snow i{animation-duration:5s!important}
@keyframes snowfall{to{transform:translate(var(--sx),110vh)}}
.lantern-h{animation:sway 6s ease-in-out infinite;transform-origin:120px 110px}
.sl-fire{animation:glowPulse 2s infinite}
.shishi{transform-origin:410px 565px}
.shishi.tip{animation:shishi 1.4s ease-in-out}
@keyframes shishi{40%{transform:rotate(24deg)}55%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
.tray{transform:translate(60px,640px)}
.tray.float{animation:tray 14s ease-in-out forwards}
@keyframes tray{0%{transform:translate(40px,640px)}50%{transform:translate(225px,650px) rotate(4deg)}100%{transform:translate(390px,630px)}}
.tray-steam{animation:steamUp 3s infinite}
.soak-line{position:absolute;left:-100%;right:-100%;bottom:-20%;height:0;background:linear-gradient(180deg,rgba(111,184,200,.85),rgba(42,90,106,.95));transition:height 1.6s ease;pointer-events:none}
.soaked .soak-line{height:38%}
.soaked .stage>svg{transition:transform 1.6s ease;transform:translateY(6%) scale(1.06)}
.room-hotspring .stage>svg{transition:transform 1.6s ease}
.soaked .hs-steam{opacity:1}.hs-steam{opacity:.7}
/* VIP */
.room-vip{background:linear-gradient(180deg,var(--sky1),var(--sky2) 50%,#14100e 60%)}
.car{fill:#ffe9a8;animation:carL 9s linear infinite}.car.r{fill:#ff6a5a;animation-name:carR}
@keyframes carL{from{transform:translateX(-700px)}to{transform:translateX(1150px)}}
@keyframes carR{from{transform:translateX(1150px)}to{transform:translateX(-700px)}}
.v-cur .cl,.v-cur .cr{transition:transform 1.8s ease-in-out}
.cur-closed .v-cur .cl{transform:translateX(480px)}.cur-closed .v-cur .cr{transform:translateX(-480px)}
.v-halo{animation:glowPulse 6s infinite}
.v-dim{position:absolute;inset:-30% -100%;pointer-events:none;background:#000;opacity:0;transition:opacity 1.2s}
[data-dim="1"] .v-dim{opacity:.3}[data-dim="2"] .v-dim{opacity:.55}
.vinyl{transform-origin:376px 458px}
.playing .vinyl{animation:vinyl 1.8s linear infinite}
@keyframes vinyl{0%{rx:34}50%{rx:33}100%{rx:34}}
.playing #v-rec ellipse:nth-of-type(2){animation:spinR 1.8s linear infinite;transform-origin:376px 458px}
@keyframes spinR{to{transform:rotate(360deg) scaleY(1)}}
.wine{transform-origin:244px 704px;transform:scaleY(0);transition:transform 1.8s ease-out}
.g2 .wine{transform-origin:294px 704px}
.poured .wine{transform:scaleY(1)}
.bottle{transform-origin:160px 700px;transition:transform .6s}
.pouring .bottle{transform:translate(60px,-30px) rotate(-62deg)}
.pouring .w-stream{opacity:1;stroke-dasharray:5 3;animation:dash .3s linear infinite}
.pouring .g1 .wine{transform:scaleY(1)}
.clink{animation:clink .8s}
@keyframes clink{40%{transform:translate(26px,-14px) rotate(14deg)}}
/* 麻将 */
.room-mahjong{background:#2a1e18}
.tl{position:relative;width:100%;aspect-ratio:3/4;border-radius:5px;background:linear-gradient(180deg,#fffdf6,#efe6d2);box-shadow:0 3px 0 #2f6aa0,0 4px 0 #1f4a70,0 6px 10px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;font-family:var(--serif);color:#222}
.tl b{font-size:min(4.2vw,19px);font-weight:700}.tl i{font-style:normal;font-size:min(3.6vw,16px);margin-top:2px;font-weight:700}
.tl.s0 i{color:#c0262d}.tl.s0 b{color:#222}.tl.s1 b,.tl.s1 i{color:#1f7a3a}.tl.s2 b,.tl.s2 i{color:#1f4a9a}
.mj-hand{position:absolute;left:3%;right:3%;bottom:6%;display:flex;gap:.3%;align-items:flex-end;justify-content:center}
.tlw{flex:0 0 6.2%;transition:transform .18s}
.tlw.sel{transform:translateY(-22%)}.tlw.sel .tl{box-shadow:0 3px 0 #2f6aa0,0 4px 0 #1f4a70,0 0 0 2px #ffd27a,0 0 16px rgba(255,210,120,.8)}
.tlw.new{margin-left:1.5%}
.tlw.deal{animation:deal .5s cubic-bezier(.2,1.4,.5,1) both}
@keyframes deal{from{transform:translateY(-280%) scale(.6);opacity:0}to{transform:none;opacity:1}}
.mj-disc{position:absolute;left:12%;right:12%;top:35%;display:grid;grid-template-columns:repeat(8,1fr);gap:4px;transform:perspective(500px) rotateX(18deg)}
.mj-disc .tl.sm{box-shadow:0 2px 0 #2f6aa0,0 3px 4px rgba(0,0,0,.3)}.mj-disc .tl b{font-size:min(3.2vw,14px)}.mj-disc .tl i{font-size:min(2.8vw,12px)}
.mj-disc .tl:last-child{animation:pop .3s}
.mj-disc.knock{animation:knock .3s}
@keyframes knock{30%{transform:perspective(500px) rotateX(18deg) translateY(-3px)}}
.mj-tenpai{position:absolute;left:5%;right:5%;bottom:17.5%;text-align:center;font-size:12.5px;color:#d9f0e0;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.mj-tenpai b{color:#ffe08a;font-size:14px}
.mj-swirl{position:absolute;left:50%;top:48%;width:0;height:0;opacity:0;transition:opacity .3s}
.mj-swirl.on{opacity:1}
.mj-swirl i{position:absolute;width:26px;height:34px;margin:-17px -13px;border-radius:4px;background:#2f6aa0;border-top:5px solid #f3ead6;box-shadow:0 3px 6px rgba(0,0,0,.4);animation:swirl 1.8s ease-in-out}
@keyframes swirl{0%{transform:rotate(var(--a)) translate(0) rotate(0)}50%{transform:rotate(calc(var(--a) + 200deg)) translate(var(--r)) rotate(180deg)}100%{transform:rotate(calc(var(--a) + 400deg)) translate(0) rotate(360deg);opacity:0}}
.mj-win{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;text-align:center;transition:all .6s cubic-bezier(.2,1.6,.4,1)}
.mj-win.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.mj-win b{display:block;font-family:var(--serif);font-size:110px;line-height:1;background:linear-gradient(180deg,#fff3c8,#e6a83a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 20px rgba(255,200,90,.8))}
.mj-win span{font-size:18px;letter-spacing:.3em;color:#fff3d0}
.won .tlw .tl{animation:wint 1s ease-in-out infinite alternate}
.won .tlw:nth-child(odd) .tl{animation-delay:.2s}
@keyframes wint{to{transform:translateY(-8px);box-shadow:0 3px 0 #2f6aa0,0 0 18px rgba(255,220,120,.9)}}
.confetti{width:8px;height:12px;animation:conf 2.4s ease-out forwards}
.confetti.c0{background:#ffd27a}.confetti.c1{background:#ff8fa3}.confetti.c2{background:#9fd6f2}.confetti.c3{background:#b5f2a6}
@keyframes conf{0%{transform:translate(-50%,-50%) rotate(0)}100%{transform:translate(calc(-50% + 40px),300px) rotate(720deg);opacity:0}}
/* KTV */
.room-ktv{background:linear-gradient(180deg,#1a1230,#2a1a40 62%,#140c22 63%)}
.ball .facets{animation:facet 4s linear infinite}
@keyframes facet{from{transform:translateX(-7px)}to{transform:translateX(7px)}}
.ballglow{animation:glowPulse 1.2s infinite}
.k-lights{position:absolute;inset:-20% -100%;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.k-lights i{position:absolute;top:-10%;width:180px;height:140%;margin-left:-90px;background:linear-gradient(180deg,var(--c),transparent 80%);opacity:.22;filter:blur(10px);transform-origin:50% 0;animation:sweep 6.6s ease-in-out infinite}
@keyframes sweep{0%,100%{transform:rotate(-28deg)}50%{transform:rotate(28deg)}}
.singing .k-lights i{opacity:.32;animation-duration:3.3s}
.k-stars{position:absolute;inset:-10% -60%;pointer-events:none;opacity:0;transition:opacity 1s}
.k-stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff;animation:tw 2s infinite}
[data-mode="1"] .k-stars{opacity:1}[data-mode="1"] .k-lights{opacity:.3}
[data-mode="2"] .k-lights i{animation-name:rainbow;animation-duration:4s}
@keyframes rainbow{0%{transform:rotate(-20deg);filter:blur(10px) hue-rotate(0)}50%{transform:rotate(20deg);filter:blur(10px) hue-rotate(180deg)}100%{transform:rotate(-20deg);filter:blur(10px) hue-rotate(360deg)}}
[data-mode="3"] .k-lights,[data-mode="3"] .k-stars{opacity:0}
.k-lyrics{position:absolute;left:12%;right:12%;top:17%;height:24%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.k-lyrics small{font-size:11px;color:#c9b8ff;letter-spacing:.2em}
.k-lyrics .l1{font-family:var(--serif);font-size:min(6.4vw,28px);margin:8px 0 4px;color:#fff;letter-spacing:.06em;text-shadow:0 0 12px rgba(180,140,255,.7)}
.k-lyrics .l1 span{transition:color .15s,text-shadow .15s}.k-lyrics .l1 span.on{color:#ffd25f;text-shadow:0 0 14px #ff9f3a}
.k-lyrics .l2{font-size:13px;color:#b9a9e0;margin:0}
.spk{fill:#555}.singing .spk{animation:spk .34s ease-in-out infinite alternate;fill:#999}
@keyframes spk{to{transform:scale(1.25)}}
.spk{transform-box:fill-box;transform-origin:center}
.neon-strips path{animation:neon 2.4s infinite;filter:drop-shadow(0 0 6px currentColor)}
.k-scr{animation:scrShift 8s ease-in-out infinite alternate}
@keyframes scrShift{to{opacity:.7}}
#k-tamb.shake{animation:shake .4s;transform-box:fill-box;transform-origin:center}
@keyframes shake{25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.song-list{display:grid;gap:10px}.song-list button{text-align:left;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(230,192,123,.22)}
.song-list b{display:block;font-family:var(--serif);font-size:17px;color:#fbe7bd}.song-list small{color:var(--muted);font-size:12.5px}
/* 电影院 */
.room-cinema{background:#1c0a0d}
.film{opacity:0;transition:opacity 1.5s}.film-on .film{opacity:1}
.scr-blank{transition:fill 1s}.proj-on .scr-blank{fill:#fff8e6}
.cur-l,.cur-r{transition:transform 2.6s cubic-bezier(.6,0,.3,1)}
.cur-open .cur-l{transform:translateX(-190px) scaleX(.5)}.cur-open .cur-r{transform:translateX(190px) scaleX(.5)}
.cur-l{transform-origin:20px 0}.cur-r{transform-origin:430px 0}
.cur-open .cur-l{transform:scaleX(.18)}.cur-open .cur-r{transform:scaleX(.18)}
.beam,.dusts{opacity:0;transition:opacity 1s}.proj-on .beam{opacity:1;animation:beam 3s infinite}.proj-on .dusts{opacity:1}
@keyframes beam{0%,100%{opacity:.85}50%{opacity:1}}
.dust{fill:#fff;opacity:.6;animation:dust 6s linear infinite}
@keyframes dust{0%{transform:translate(0,0)}50%{transform:translate(8px,-10px)}100%{transform:translate(0,0)}}
.lens{fill:#444}.proj-on .lens{fill:#fff6d8;filter:drop-shadow(0 0 6px #fff)}
.reel{transform-box:fill-box;transform-origin:center}
.proj-on .reel>circle:nth-child(2){animation:spin 2s linear infinite;transform-box:fill-box;transform-origin:center}
.house-dark{position:absolute;inset:-30% -100%;pointer-events:none;background:#000;opacity:0;transition:opacity 2s}
.lights-off .house-dark{opacity:.45}
.lights-off .sconce-c{opacity:.25}
.rf1{animation:roofs 24s linear infinite}.rf2{animation:roofs 14s linear infinite}
@keyframes roofs{from{transform:translateX(0)}to{transform:translateX(-520px)}}
.fcat-b{animation:walk .45s ease-in-out infinite}
.fmoon{animation:moonrise 24s ease-in-out infinite}
@keyframes moonrise{0%{transform:translateY(40px)}50%{transform:translateY(0)}100%{transform:translateY(40px)}}
.fstars circle{animation:tw 3s infinite}
.shoot{opacity:0;animation:shoot 12s 4s infinite}
@keyframes shoot{0%,90%{opacity:0;transform:translate(0,0)}93%{opacity:1}100%{opacity:0;transform:translate(-120px,54px)}}
.cards text{opacity:0;animation:card 24s infinite}
.cards .ttl{animation-delay:0s}.cards .c0{animation-delay:4.8s}.cards .c1{animation-delay:9.6s}.cards .c2{animation-delay:14.4s}.cards .c3{animation-delay:19.2s}
@keyframes card{0%{opacity:0}4%,16%{opacity:1}20%,100%{opacity:0}}
.pcorn{width:12px;height:11px;border-radius:50% 45% 55% 50%;background:#fff6d8;box-shadow:inset -2px -2px 0 #f0d58a;animation:pcorn 1.3s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes pcorn{0%{transform:translate(-50%,-50%) scale(.4)}50%{transform:translate(calc(-50% + var(--x)*.6),calc(-50% + var(--y))) scale(1)}100%{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y)*.2 + 40px)) rotate(200deg);opacity:0}}
/* 游戏厅 */
.room-arcade{background:linear-gradient(180deg,#140f2a,#22183e 74%,#1a1030 75%)}
[data-game=claw] .hoop-m,[data-game=claw] #ballG,[data-game=claw] #netFront{display:none}
[data-game=hoop] .claw-m{display:none}
.fl,.fr{transition:transform .3s;transform-origin:0 0}
.claw-open .fl{transform:rotate(22deg)}.claw-open .fr{transform:rotate(-22deg)}
.neon-sign{animation:neon 2.6s infinite}
.arc-scr{animation:glowPulse 2s infinite}
#net.swish{animation:swishNet .5s}
@keyframes swishNet{50%{transform:scaleY(1.2) translateY(4px)}}
#net{transform-origin:225px 312px}
.plush-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.plush-list div{text-align:center;padding:8px;border-radius:14px;background:rgba(255,255,255,.04)}
.plush-list svg{width:56px;height:56px;margin:0 auto}.plush-list b{display:block;font-size:13px}.plush-list small{color:var(--muted)}
@media (min-width:900px){
.map{max-width:1120px;padding-left:28px;padding-right:28px}
.hero{margin:0;border-radius:0 0 32px 32px;height:380px}
.hero-text{padding:0 48px;top:50px}.hero h1{font-size:48px}.hero .slogan{font-size:18px;max-width:none}
.map .zones-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.map .zone{margin-top:0}
.tools{grid-template-columns:repeat(4,1fr);max-width:640px;margin-left:auto;margin-right:auto}
.daily-card,.greet-card,.late{max-width:640px;margin-left:auto;margin-right:auto}
.rec-row{text-align:center}.rec-row div{justify-content:center}
.tiles{grid-template-columns:1fr 1fr 1fr}
.zones-grid{margin-top:26px}
}
body[data-room=map] #hud{background:linear-gradient(180deg,rgba(8,11,22,.92),rgba(8,11,22,.7) 70%,rgba(8,11,22,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.tile u{top:10px;bottom:auto;right:12px;font-size:10.5px}