:root{--ink:#59483f;--muted:#a18e82;--pink:#c77883;--cream:#fbf7ef;--line:#eadfd4}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--ink);font-family:'Noto Sans SC','Microsoft YaHei',sans-serif;font-size:14px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #b77a80;outline-offset:4px}button{transition:transform .15s,background .15s}button:hover{transform:translateY(-2px)}button:disabled{cursor:wait;opacity:.6}button:active{transform:scale(.97)}.app{max-width:1400px;margin:auto;padding:0 52px}header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:16px;font-size:30px}.brand span{font-size:20px;font-weight:700;letter-spacing:1px}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:6px;color:var(--muted)}.header-right{display:flex;gap:24px;align-items:center;font-size:12px}.header-right button{background:none;border:1px solid var(--line);border-radius:20px;padding:9px 15px}.intro{display:flex;justify-content:space-between;align-items:center;padding:36px 0 30px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--pink)}h1{font-size:30px;letter-spacing:1px;font-weight:600;margin:10px 0}p{line-height:1.9;color:var(--muted);margin:7px 0}.day{display:flex;align-items:center;gap:15px;font-size:36px;color:#b3985e}.day span{font-size:13px;color:var(--ink)}.day small{display:block;color:var(--muted);font-size:10px;margin-top:5px}.game{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.left{min-width:0}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;background:#fffdf9;border:1px solid var(--line);border-radius:18px;padding:19px 22px;margin-bottom:16px}.stat-title{display:flex;justify-content:space-between;font-size:11px;margin-bottom:10px}.stat-title b{font-weight:500;color:var(--muted)}.track{height:5px;border-radius:8px;background:#eee7df;overflow:hidden}.fill{height:100%;border-radius:8px;transition:width .4s}.room{height:470px;position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(#f2e7df 0%,#f2e7df 69%,#e3c8b3 69%,#eddbca 70%,#ead8c6 100%);border:1px solid #e8d6c6}.room::after{content:'';position:absolute;bottom:0;left:0;right:0;height:30%;background:repeating-linear-gradient(0deg,transparent 0 42px,#c8a18425 43px 44px);pointer-events:none}.room-label{position:absolute;top:22px;left:24px;display:flex;gap:7px;align-items:center;font-size:11px;color:#9a8272}.room-label i{width:6px;height:6px;border-radius:50%;background:#94a481}.wall-art{position:absolute;top:100px;left:50px;border:7px solid #e1cbb6;background:#fff8ec;box-shadow:0 3px 0 #d5bda7;padding:14px 17px;transform:rotate(-7deg);text-align:center;color:#af987d;font-family:Georgia,serif;font-size:11px;line-height:1.4}.wall-art b{font-size:35px;font-weight:400;color:#c89791}.window{position:absolute;right:48px;top:72px;width:116px;height:145px;background:linear-gradient(#c8ddd9,#e5ebe0);border:9px solid #fffbf1;border-radius:60px 60px 4px 4px;box-shadow:0 5px 0 #d6c5b5;color:#f8e7ad;font-size:35px;text-align:right;padding:10px}.window:after{content:'';position:absolute;height:100%;width:5px;background:#fffbf1;left:50%;top:0}.window span{position:absolute;left:5px;top:45px;color:white}.plant{position:absolute;right:35px;bottom:99px;font-size:75px;filter:saturate(.55)}.rug{position:absolute;width:380px;max-width:80%;height:80px;border:10px solid #cda2a455;background:#d8b1b066;border-radius:50%;bottom:42px;left:50%;transform:translateX(-50%)}.speech{position:absolute;z-index:3;top:40px;left:50%;transform:translateX(-50%);width:max-content;max-width:66%;border:1px solid #ead8cd;border-radius:19px;padding:12px 20px;background:#fffcf7;box-shadow:0 5px 12px #8a66550a;text-align:center;font-size:12px}.speech:after{content:'';position:absolute;bottom:-7px;left:50%;width:12px;height:12px;background:#fffcf7;border-right:1px solid #ead8cd;border-bottom:1px solid #ead8cd;transform:rotate(45deg)}.character{position:absolute;z-index:2;width:310px;height:310px;left:50%;bottom:55px;transform:translateX(-50%);padding:0;border:0;background:none;mix-blend-mode:multiply;animation:breathe 3s infinite ease-in-out;touch-action:manipulation}.character:hover,.character:active{transform:translateX(-50%)}.character img{width:100%;height:100%;object-fit:contain;pointer-events:none;border-radius:20px}.character.react{animation:bounce .45s ease-in-out}.room-hint{position:absolute;bottom:18px;left:0;width:100%;text-align:center;font-size:10px;color:#957a67;z-index:3}.rooms{display:flex;justify-content:space-between;gap:6px;margin-top:16px;background:#fffdf9;padding:10px;border:1px solid var(--line);border-radius:19px}.rooms button{flex:1;border:0;border-radius:12px;background:transparent;padding:9px 2px;font-size:11px;color:#9b887c}.rooms button span{display:block;font-size:22px;margin-bottom:6px}.rooms button.active{background:#f5e6e2;color:#a86e74}.rooms button:hover{background:#f7efdf}aside{border:1px solid var(--line);border-radius:22px;background:#fffcf7;padding:26px 24px;display:flex;flex-direction:column}.panel-head{padding-bottom:16px;border-bottom:1px dashed var(--line);margin-bottom:20px}h2{font-size:21px;margin:10px 0 4px;font-weight:600}.panel-head p{font-size:12px}.action{display:flex;align-items:center;width:100%;padding:15px 17px;border:1px solid var(--line);border-radius:14px;background:#fffdfa;margin-bottom:10px;text-align:left;gap:15px}.action.primary{background:#c8878e;color:white;border-color:#c8878e}.action .emoji{font-size:25px}.action b{font-weight:500;font-size:13px}.action small{display:block;font-size:10px;opacity:.65;margin-top:4px}.action .arrow{margin-left:auto;opacity:.6}.note{padding:16px;background:#f4eee2;border-radius:14px;margin-top:18px;font-size:11px}.note span{font-weight:600;color:#a38a64}.note p{font-size:11px;color:#a38f76}.collection{margin-top:auto;padding-top:24px;font-size:11px}.collection>b{float:right;color:#bb8e8a;font-weight:400}#badges{display:flex;justify-content:space-between;margin-top:12px;font-size:19px}#badges span{filter:grayscale(1);opacity:.23}#badges span.earned{filter:none;opacity:1}footer{display:flex;justify-content:space-between;font-size:10px;color:#b3a294;padding:24px 0}.food-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.food{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 4px;font-size:11px}.food span{display:block;font-size:24px;margin-bottom:4px}.food.selected{background:#f7e2df;border-color:#c8878e}.meal{font-size:11px;min-height:45px;margin-top:12px;color:var(--muted)}.mini{font-size:10px;color:var(--muted);line-height:1.8}.weight{font-size:40px;text-align:center;padding:22px 0;color:#bc8287}.weight small{font-size:14px}.bubble{position:absolute;z-index:5;font-size:28px;pointer-events:none;animation:float 1.2s ease-out forwards}#accessory{position:absolute;top:18%;right:20%;font-size:45px;pointer-events:none}#scene-prop{position:absolute;z-index:3;bottom:60px;left:50%;transform:translateX(-50%);pointer-events:none;font-size:58px;white-space:nowrap}.bath{background:linear-gradient(#dfecea 70%,#c2dbd7 70%)}.toilet{background:linear-gradient(#eeece4 70%,#d4d8cd 70%)}.makeup{background:linear-gradient(#f2e1e5 70%,#e2c7cd 70%)}@keyframes breathe{50%{translate:0 -5px}}@keyframes bounce{50%{translate:0 -15px;rotate:-4deg}}@keyframes float{to{translate:0 -130px;opacity:0;rotate:20deg}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}@media(min-width:1450px){.intro{padding-top:46px;padding-bottom:40px}.room{height:510px}.character{width:340px;height:340px}}@media(max-width:1000px){.app{padding:0 24px}.game{grid-template-columns:minmax(0,1fr) 270px;gap:16px}.wall-art{left:24px}.window{right:24px;width:90px}.character{width:275px;height:275px}.stats{gap:12px;padding:17px 15px}}@media(max-width:740px){.app{padding:0 16px}header{height:78px}.brand{font-size:22px;gap:9px}.brand span{font-size:15px}.brand small{font-size:7px;letter-spacing:2px}.header-right{gap:0}.header-right>span{display:none}.header-right button{font-size:10px;padding:8px}.intro{padding:25px 0 20px}h1{font-size:22px}.intro p{font-size:11px}.day{display:none}.game{grid-template-columns:1fr}.room{height:420px}.stats{gap:15px}.stat-title{font-size:10px}.character{width:290px;height:290px;bottom:45px}.window{top:100px;width:85px;height:115px;right:20px}.wall-art{left:20px;top:115px;padding:8px;font-size:9px}.plant{font-size:55px;right:15px}.speech{top:45px;max-width:85%}.rooms{position:relative}.rooms button{font-size:10px}aside{padding:22px}.collection{margin-top:0}.food-grid{grid-template-columns:repeat(3,1fr)}footer{gap:15px;line-height:1.8}.eyebrow{font-size:9px}}
/* Version 2: instant poses, face-aligned makeup and touch-first layout. */
[hidden]{display:none!important}button{touch-action:manipulation}.character{animation:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.character img{display:block;pointer-events:none}.character.react{animation:none}.character:hover,.character:active{transform:translateX(-50%)}.rooms{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px}.rooms button{min-height:63px}.rooms button span{font-size:21px}.rooms button.active{background:#eed9d6;color:#855762}.room{isolation:isolate}.speech{font-size:12px;max-width:76%;z-index:8;pointer-events:none}.room-hint{font-size:11px}.interaction-tip{font-size:12px;color:#a47976;background:#f6eae4;border-radius:13px;padding:12px 15px;margin:0 0 16px}.character.playing{opacity:.17;pointer-events:none}.outing{background:linear-gradient(#e1ebe1 69%,#bfd0a7 69%,#d4dfc4 100%)}.outing .window{background:linear-gradient(#b3d8e4,#edf4dd)}.outing .rug{background:#b0c09188;border-color:#a7bc9155}.play{background:linear-gradient(#f5e7df 69%,#ead3c3 69%)}.wardrobe{background:linear-gradient(#ece2df 69%,#d9c8bc 69%)}
.makeup{background:radial-gradient(ellipse at center,#fff6ef,#efddd6);--face-size:365px}.makeup .window,.makeup .wall-art,.makeup .plant,.makeup .rug{display:none}.makeup::after{display:none}.makeup:before{content:'';position:absolute;left:50%;bottom:39px;transform:translateX(-50%);width:calc(var(--face-size) + 30px);height:calc(var(--face-size) + 30px);background:#fffcf8;border:9px solid #d7b6a7;border-radius:50% 50% 36% 36%;box-shadow:0 0 0 5px #f8ece2,0 8px 25px #a67b6820}.makeup .speech{top:18px;padding:10px 16px}.makeup .room-label{top:19px;left:15px;font-size:10px}.character.beauty-face{width:var(--face-size);height:var(--face-size);bottom:54px;border-radius:45% 45% 25% 25%;overflow:visible;mix-blend-mode:multiply}.beauty-face img{border-radius:45% 45% 25% 25%;object-fit:fill}#cosmetics{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#face-tools{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:54px;width:var(--face-size);height:var(--face-size);pointer-events:none}.face-hit{position:absolute;background:transparent;border:1px dashed #b87d8c99;color:#8c5b66;border-radius:50%;font-size:9px;pointer-events:auto;min-height:40px;min-width:44px;text-shadow:0 1px 3px white}.face-hit:hover{background:#ffffff40;transform:none}.face-hit:focus-visible{outline:3px solid #a45970}.lips{width:22%;height:11%;left:42%;top:60%;color:transparent}.lips:after{content:'点嘴唇';position:absolute;left:0;top:100%;width:100%;color:#8c5b66}.left-cheek{width:23%;height:17%;left:16%;top:53%}.right-cheek{width:19%;height:17%;left:67%;top:53%}.head-hit{width:35%;height:21%;left:31%;top:7%;background:#fff7!important}.tool-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:#f4ebe4;padding:4px;border-radius:12px;gap:3px;margin-bottom:18px}.tool-tabs button{border:0;border-radius:9px;background:none;min-height:42px;font-size:12px}.tool-tabs .selected{background:#fffaf6;box-shadow:0 2px 4px #73564b15;color:#b0687d}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.swatch{border:1px solid transparent;background:none;border-radius:12px;padding:8px 1px;min-height:72px}.swatch i{display:flex;justify-content:center;align-items:center;width:36px;height:36px;margin:0 auto 7px;border-radius:50%;font-style:normal;font-size:19px;box-shadow:inset 0 0 0 3px #ffffff40}.swatch span{display:block;font-size:10px}.swatch.selected{background:#f8e9e8;border-color:#cf98a4}.tool-instruction{color:#aa677b;font-size:12px;padding:12px 0}.look-summary{font-size:10px;color:#a18c81;line-height:1.9;border-top:1px dashed var(--line);padding:12px 0 15px}.outfit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.outfit{border:1px solid var(--line);border-radius:13px;padding:6px;background:#fff;font-size:11px}.outfit img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:9px}.outfit span{display:block;padding:7px 0}.outfit.selected{border-color:#c8878e;background:#fbecea}.outfit.selected img{mix-blend-mode:multiply}.score-card{text-align:center;padding:12px 0 23px}.score-card span{display:block;font-size:11px;color:var(--muted)}.score-card b{display:block;font-size:34px;color:#bd7e89;margin-top:7px;font-weight:500}#catch-area{position:absolute;inset:110px 20% 70px;z-index:6;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-content:center}.catch-target{background:#fffcf2e8;border:2px solid #d6b0a2;border-radius:24px;font-size:43px;min-height:85px;box-shadow:0 5px 0 #d3b2a1}.catch-target:active{box-shadow:none;translate:0 4px}.catch-target:hover{transform:none}#badges{flex-wrap:wrap;gap:10px;justify-content:flex-start}.album-link{border:1px solid var(--line);background:#fffaf4;border-radius:12px;width:100%;margin-top:16px;padding:13px 12px;text-align:left;font-size:11px}.album-link span{float:right;color:#b68086}.album-link b{font-weight:500}dialog{border:1px solid #d8b7ac;background:#fffaf5;border-radius:24px;max-width:650px;width:calc(100% - 24px);max-height:85dvh;padding:25px;color:var(--ink)}dialog::backdrop{background:#59483f88;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head button{border:0;background:#f2e4df;border-radius:50%;width:44px;height:44px;font-size:25px}.dialog-head h2{font-size:20px}dialog p{font-size:12px}#album-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;padding-top:15px}#album-grid button{padding:3px;border:1px solid var(--line);border-radius:12px;background:white}#album-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain;border-radius:9px}#album-large{display:block;width:100%;max-height:350px;object-fit:contain;border-radius:16px;margin-top:15px}.collection{padding-top:20px}
@media(min-width:1450px){.makeup{--face-size:400px}}
@media(max-width:1000px) and (min-width:741px){.makeup{--face-size:310px}.makeup .room-label{display:none}.rooms{grid-template-columns:repeat(5,1fr)}.rooms button{min-height:55px}.rooms button span{font-size:18px}}
@media(max-width:740px){
 body{font-size:13px}.app{padding:0 12px}header{height:64px}.brand{font-size:20px;gap:7px}.brand span{font-size:14px}.brand small{font-size:6px}.header-right button{min-height:38px}.intro{padding:14px 4px 16px}.intro .eyebrow{font-size:8px;letter-spacing:2px}.intro h1{font-size:20px;margin:6px 0}.intro p{font-size:10px;margin:3px 0}.game{display:block}.stats{padding:13px 12px;margin-bottom:10px;gap:10px;border-radius:14px}.stat-title{font-size:9px;margin-bottom:7px;gap:3px}.room{height:370px;border-radius:20px}.character{width:270px;height:270px;bottom:42px}.room-label{top:14px;left:14px;font-size:9px}.speech{top:39px;padding:10px 12px;font-size:11px;max-width:90%;line-height:1.5}.window{width:68px;height:99px;right:15px;top:102px;border-width:6px;font-size:25px}.wall-art{left:13px;top:107px;border-width:5px;font-size:8px}.wall-art b{font-size:25px}.plant{font-size:43px;bottom:77px;right:12px}.rug{width:290px;bottom:37px;height:60px}.room-hint{font-size:10px;bottom:14px;padding:0 7px}.rooms{grid-template-columns:repeat(5,1fr);padding:6px;margin:10px 0 14px;gap:3px;border-radius:16px}.rooms button{min-height:51px;padding:5px 1px;font-size:10px}.rooms button span{font-size:19px;margin-bottom:3px}.rooms button:last-child{grid-column:auto}aside{padding:19px 17px;border-radius:18px}.panel-head{padding-bottom:10px;margin-bottom:14px}.panel-head h2{font-size:19px;margin:6px 0}.panel-head p{font-size:11px;line-height:1.7}.action{min-height:56px;padding:10px 14px;margin-bottom:8px}.action small{font-size:10px}.interaction-tip{padding:10px 12px;margin-bottom:11px}.food-grid{grid-template-columns:repeat(4,1fr)}.food{font-size:10px;min-height:64px;padding:8px 2px}.food span{font-size:23px}.note{margin-top:13px;padding:12px}.note p{margin-bottom:0}.collection{padding-top:16px}.makeup{--face-size:min(76vw,300px);height:375px}.makeup .speech{top:14px;font-size:10px}.makeup .room-label{display:none}.character.beauty-face,#face-tools{bottom:48px}.makeup:before{bottom:32px}.makeup .room-hint{bottom:10px}.tool-tabs{margin-bottom:10px}.tool-tabs button{min-height:44px}.swatches{gap:6px}.swatch{min-height:70px}.swatch i{width:38px;height:38px}.swatch span{font-size:10px}.tool-instruction{font-size:11px;margin:0;padding:10px 0}.look-summary{padding:10px 0}.outfit-grid{grid-template-columns:repeat(3,1fr);gap:8px}.outfit span{font-size:10px}#catch-area{inset:98px 22px 60px;gap:12px}.catch-target{min-height:80px;font-size:37px;border-radius:18px}footer{font-size:9px;gap:10px;padding:18px 3px calc(18px + env(safe-area-inset-bottom))}.face-hit{font-size:8px;min-height:34px;min-width:40px}#album-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:360px){.brand small{display:none}.intro h1{font-size:18px}.room{height:340px}.character{width:245px;height:245px}.makeup{height:350px}.stat-title{font-size:8px}.food-grid{grid-template-columns:repeat(3,1fr)}}
@media(hover:none){button:hover{transform:none}.character:hover{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.bubble{display:none}}
@media(max-width:740px){
 body[data-room="makeup"] .intro,body[data-room="makeup"] .stats{display:none}
 body[data-room="makeup"] header{margin-bottom:10px}
 body[data-room="makeup"] .rooms{display:flex;overflow-x:auto;justify-content:flex-start;scrollbar-width:thin;padding-bottom:8px;margin-bottom:10px}
 body[data-room="makeup"] .rooms button{flex:0 0 56px;min-height:48px}
 body[data-room="makeup"] aside{padding:12px}
 body[data-room="makeup"] .panel-head,body[data-room="makeup"] .note,body[data-room="makeup"] .collection{display:none}
 body[data-room="makeup"] .look-summary{font-size:9px;padding:6px 0}
 body[data-room="makeup"] .tool-instruction{font-size:10px;padding:7px 0}
 body[data-room="makeup"] .action{min-height:44px;margin-bottom:0;padding:7px 10px}
 body[data-room="makeup"] .action .emoji{font-size:20px}
 body[data-room="makeup"] .action small{display:none}
 body[data-room="makeup"] .swatch{min-height:64px;padding:5px 0}
 body[data-room="makeup"] .swatch i{width:32px;height:32px;margin-bottom:5px}
 body[data-room="makeup"] .tool-tabs{margin-bottom:4px}
 body[data-room="makeup"] .tool-tabs button{min-height:38px}
}
.friend-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.friend-card{border:1px solid var(--line);border-radius:15px;background:#fffaf4;padding:8px;min-width:0}.friend-card img{width:100%;height:95px;object-fit:contain;mix-blend-mode:multiply}.friend-card b,.friend-card small{display:block;font-size:12px}.friend-card small{font-size:10px;color:var(--muted);margin:5px 0}.visit-progress,.online-status{padding:12px;background:#f6e9e4;border-radius:12px;font-size:12px;line-height:1.8}.rooms{overflow-x:auto}.rooms button{min-width:48px}.has-guest .character{left:30%;width:250px;height:250px}.has-guest .speech{max-width:80%}#guest-scene{position:absolute;inset:0;z-index:2;pointer-events:none}.guest-character{position:absolute;right:3%;bottom:60px;width:44%;height:255px;border:0;background:none;pointer-events:auto;mix-blend-mode:multiply}.guest-character img{width:100%;height:100%;object-fit:contain;pointer-events:none}.visit-door{position:absolute;right:8%;bottom:110px;font-size:140px;opacity:.3}#visit-prop{position:absolute;left:48%;bottom:80px;font-size:48px}.arrived .guest-character{animation:guest-enter .85s both}.party .guest-character{animation:guest-hop 1s 2}.party #visit-prop{animation:snack-share 1.5s 2}.photo .guest-character{opacity:.15}.photo:after{content:'📸';position:absolute;left:45%;top:30%;font-size:55px;animation:photo-flash .8s both}.leaving .guest-character{animation:guest-leave 1.2s both}.arrived .visit-door,.party .visit-door,.photo .visit-door,.leaving .visit-door{display:none}.has-guest:has(.photo) .character{left:50%;width:300px;height:300px}#bath-scene{position:absolute;width:240px;height:260px;left:50%;bottom:50px;transform:translateX(-50%);z-index:3;pointer-events:none}.bath-head{position:absolute;left:10px;top:0;width:220px;height:170px;overflow:hidden;mix-blend-mode:multiply}.bath-head img{width:440px;max-width:none;height:auto}.bath-tub{position:absolute;top:153px;left:-8px;width:256px;height:100px;border-radius:20px 20px 75px 75px;background:linear-gradient(#fffefa,#d7e9e5);border:4px solid #b5cec9;text-align:center;padding:27px;font-size:24px;color:#759c91}.bath-tub span{position:absolute;right:12px;top:-28px;font-size:33px}.bath-foam{position:absolute;z-index:2;top:128px;left:0;width:240px;border-radius:50%;background:#f8ffff;text-align:center;font-size:40px;line-height:50px;animation:foam-bob 2s infinite}.bath:has(#bath-scene.ready:not([hidden])) .character{opacity:0}.online-form{display:grid;gap:8px;margin:12px 0}.online-form label{display:grid;gap:6px;font-size:12px}.online-form input{width:100%;min-width:0;border:1px solid var(--line);border-radius:9px;padding:12px;font:inherit;background:#fff;color:var(--ink)}.online-form button,#online-actions button,.neighbor-row button,#controls>button:not(.action){padding:10px;border:1px solid var(--line);background:#f7e7e2;border-radius:10px;min-height:44px}.friend-code{overflow-wrap:anywhere;font-weight:bold}.neighbor-row{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px dashed var(--line);padding:10px 0}.neighbor-row span{flex-basis:100%;overflow-wrap:anywhere}#online-actions{display:flex;gap:8px}#neighbor-dashboard p{font-size:12px}.online .plant,.friends .plant{opacity:.3}
@keyframes guest-enter{from{translate:110% 0;opacity:0}to{translate:0 0;opacity:1}}@keyframes guest-leave{to{translate:110% 0;opacity:0}}@keyframes guest-hop{50%{translate:0 -15px;rotate:4deg}}@keyframes snack-share{50%{translate:-60px -35px;rotate:-20deg}}@keyframes photo-flash{0%{opacity:0}30%{opacity:1;filter:drop-shadow(0 0 70px white)}100%{opacity:0}}@keyframes foam-bob{50%{translate:0 -4px}}
@media(max-width:740px){.friend-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.friend-card img{height:90px}.has-guest .character{width:190px;height:190px;left:28%;bottom:60px}.guest-character{height:200px;right:2%;bottom:60px}.has-guest:has(.photo) .character{width:250px;height:250px}.has-guest .speech{top:40px;max-width:86%;font-size:11px}#visit-prop{font-size:32px;bottom:60px}#bath-scene{scale:.88;transform-origin:bottom left;bottom:45px}.visit-door{font-size:100px}.friend-card b{font-size:11px}}
@media(prefers-reduced-motion:reduce){#guest-scene *,#guest-scene:after,.bath-foam,.foam-dot{animation:none!important}.leaving .guest-character{opacity:.3}}
.friend-card img{mix-blend-mode:normal;background:transparent;object-fit:contain}
.guest-character{mix-blend-mode:normal;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;right:4%;bottom:48px;width:42%;height:280px}
.guest-character img{width:100%;height:88%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 12px 0 #d3bba85c)}
.guest-tag{font-size:11px;background:#fff8f0ee;border:1px solid #ead8cd;border-radius:999px;padding:3px 10px;margin-top:4px;color:#8d6a60;font-weight:600}
.has-guest .character{mix-blend-mode:multiply;filter:drop-shadow(0 12px 0 #d3bba848)}
.has-guest.together .character{left:26%;width:236px;height:236px;bottom:58px}
.arrived .guest-character,.party .guest-character,.photo .guest-character{opacity:1}
.photo .guest-character{right:20%;bottom:52px}
.has-guest:has(.photo) .character{left:30%;width:236px;height:236px}
.photo-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:#fff8}
.photo .photo-flash{animation:photo-wash .7s ease}
@keyframes photo-wash{0%{opacity:0}25%{opacity:.85}100%{opacity:0}}
.character:not(.beauty-face),.guest-character{mix-blend-mode:normal}
.character.hair-adjusting{touch-action:none;cursor:ns-resize}.hair-adjust{display:grid;gap:8px;margin:6px 0 18px;color:#9a6c75;font-size:12px}.hair-adjust input{width:100%;accent-color:#c8878e}
.tool-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}
.tool-tabs button{font-size:11px}
#photo-preview{display:block;width:min(100%,420px);height:auto;margin:16px auto;border-radius:12px;box-shadow:0 8px 25px #8a665522}
.photo-save{display:block;background:#c8878e;color:white;text-align:center;text-decoration:none;border-radius:12px;padding:14px;min-height:44px}
.photo:after{content:none}
.party #visit-prop{z-index:4}
#bath-scene{position:absolute;left:50%;bottom:36px;width:280px;height:340px;transform:translateX(-50%);z-index:4;pointer-events:none}
.bath-body{position:absolute;left:50%;bottom:92px;transform:translateX(-50%);height:228px;width:auto;max-width:210px;z-index:1;filter:drop-shadow(0 8px 0 #b9d0cb55)}
.bath-tub{position:absolute;left:18px;right:18px;bottom:18px;height:118px;border-radius:40px 40px 70px 70px;background:linear-gradient(#f7fffe 0%,#d5eeea 48%,#b7d8d3 100%);border:5px solid #9fc4be;box-shadow:inset 0 14px 0 #ffffff88;z-index:2}
.bath-tub .duck{position:absolute;right:16px;top:-22px;font-size:34px}
.bath-water{position:absolute;left:32px;right:32px;bottom:78px;height:86px;z-index:3;overflow:visible}
.foam-dot{position:absolute;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0 40%,#eef8f6 68%,#cfe8e3 100%);border:1px solid #ffffffcc;opacity:.92;animation:foam-bob 2.6s ease-in-out infinite}
.bath-water.rinsing .foam-dot{opacity:.38;transform:scale(.72)}
.bath:has(#bath-scene.ready:not([hidden])) .character,.bath:has(#bath-scene.ready:not([hidden])) #scene-prop{opacity:0}
@media(max-width:740px){.guest-character{height:220px}.has-guest.together .character,.has-guest:has(.photo) .character{width:188px;height:188px;left:24%}.bath-body{height:190px;bottom:80px}#bath-scene{width:250px;height:300px;bottom:28px}}
/* Third edition: all visitors share the same room plane; bubbles stay at the rim. */
.home .character,.wardrobe .character,.friends .character,.online .character,.has-guest .character{mix-blend-mode:normal}
.friends .character img,.online .character img,.home .character img,.wardrobe .character img{border-radius:0;filter:drop-shadow(0 11px 6px #8c6b5a30)}
.friends .room::before,.online .room::before{content:'';position:absolute;left:13%;right:13%;bottom:36px;height:72px;border-radius:50%;background:#d7ad9b55;filter:blur(12px)}
.guest-character{bottom:57px;z-index:2}
.guest-character img{filter:drop-shadow(0 11px 6px #8c6b5a30)}
.has-guest.together .character{bottom:59px}
.visit-door{z-index:0;filter:blur(1px)}
.bath{background:radial-gradient(circle at 50% 37%,#fff9ef 0,#e8f4ef 57%,#b6d7d0 100%)}
.bath::after{background:repeating-linear-gradient(0deg,transparent 0 35px,#8bb8aa20 36px 37px)}
.bath-sparkles{position:absolute;left:12px;right:12px;top:16px;text-align:center;color:#8eb8ad;font-size:32px;letter-spacing:15px;opacity:.7}
.bath-body{z-index:2;bottom:88px;height:238px;max-width:224px;filter:drop-shadow(0 9px 6px #719e9340)}
.bath-water{z-index:4;bottom:96px;height:24px;left:24px;right:24px;pointer-events:none}
.bath-tub{z-index:3;bottom:15px;height:105px;border-radius:42px 42px 78px 78px;background:linear-gradient(155deg,#fcfffbd9 0%,#e5f2eeb5 53%,#b8d8d191 100%);box-shadow:inset 0 10px 0 #ffffffa8,0 12px 18px #60978736}
.foam-dot{opacity:.8;box-shadow:inset -2px -2px 4px #b9d9d255,0 2px 5px #7ba99b22}
.bath-water.rinsing .foam-dot{opacity:.25}
@media(max-width:740px){.bath-body{height:205px;bottom:76px}.bath-water{bottom:85px}.guest-character{bottom:59px}}
.character:not(.beauty-face) img{border-radius:0;filter:drop-shadow(0 11px 6px #8c6b5a30)}
#swing-video-player{display:block;width:100%;max-height:65dvh;margin-top:16px;border-radius:12px;background:#2c2626}

/* The photograph and its SVG clothes share one 429×537 coordinate system. */
.makeup:before{width:min(95%,490px);height:340px;border-radius:28px;bottom:42px}
.makeup .character.beauty-face{width:429px;height:537px;bottom:-147px;border-radius:0;mix-blend-mode:normal;overflow:visible}
.beauty-face img{border-radius:0;object-fit:contain}
.character img{object-fit:contain}
.character #cosmetics{overflow:visible}
.outfit-preview{position:relative;display:block;width:100%;aspect-ratio:429/537;background:#fff9f3;border-radius:9px;overflow:hidden}
.outfit-preview img,.outfit-preview svg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.makeup .room-hint{background:#fffaf3c9;border-radius:9px;padding:4px 9px}
@media(max-width:740px){.makeup .character.beauty-face{width:min(92vw,342px);height:auto;aspect-ratio:429/537;bottom:-95px}.makeup:before{height:280px;bottom:31px}.has-guest.together .character,.has-guest:has(.photo) .character{width:210px;height:210px}}

/* Keep the base image and every overlay in the same contained rectangle. */
body[data-room="wardrobe"] #character,body[data-room="friends"] #character,body[data-room="online"] #character{aspect-ratio:429/537;height:auto}
#character #portrait,#character #cosmetics{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:0}
body[data-room="chat"] #character,body[data-room="growth"] #character{aspect-ratio:429/537;height:auto}
.chat-log{max-height:340px;overflow-y:auto;display:grid;gap:10px;margin-bottom:16px}.chat-message{padding:12px 14px;border-radius:16px;background:#f4e8df;margin:0;line-height:1.8;overflow-wrap:anywhere;white-space:pre-wrap}.chat-message.user{background:#f4e0e5;margin-left:22px}.chat-message.assistant{margin-right:22px}.chat-message b{display:block;font-size:11px;color:#a1777d;margin-bottom:4px}.chat-form{display:grid;gap:10px}.chat-form textarea{resize:vertical;border:1px solid #dfc9bf;border-radius:12px;padding:12px;font:inherit;color:inherit;background:#fffaf4;max-width:100%}.chat-form button{border:0;border-radius:12px;padding:14px;background:#b97887;color:white;min-height:44px}.chat-form button:disabled{opacity:.5}.outfit:disabled{opacity:.55;cursor:not-allowed}.growth-total{text-align:center;background:#f7ebe1;padding:20px;border-radius:18px}.growth-total b{display:block;color:#a1717b;font-size:38px;padding:8px}.growth-total b small{font-size:14px}.growth-total p{font-size:12px}.care-checks{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}.care-checks span{border:1px solid #e3d2c6;border-radius:20px;padding:7px 10px;font-size:12px}.care-checks .done{background:#e8eee2;color:#627451}.care-condition{font-size:12px;color:#8b725f}.growth-rewards{display:grid;gap:10px}.growth-rewards>div{display:grid;grid-template-columns:35px 1fr;gap:4px 8px;border:1px solid #e6d2c7;border-radius:12px;padding:12px}.growth-rewards span{grid-row:span 2;font-size:25px}.growth-rewards b{font-size:13px}.growth-rewards small{font-size:11px;color:#9c8174}
.draw-tools{margin:16px 0;padding:16px;background:#fff8f3;border:1px solid #e2c9c1;border-radius:16px;display:grid;gap:12px}.draw-tools label{display:flex;align-items:center;gap:12px;justify-content:space-between}.draw-tools button{min-height:44px;padding:8px 12px;border:1px solid #d9b7b2;border-radius:10px;background:#f3e1df;color:#654c4f}.draw-tools .draw-actions{display:flex;flex-wrap:wrap;gap:8px}.draw-tools p{font-size:12px;line-height:1.7;margin:0}.draw-tools input[type=range]{width:55%}#character.drawing{touch-action:none;cursor:crosshair}#character.drawing:active{transform:translateX(-50%)}
.draw-layer{display:grid;grid-template-columns:1fr 1fr;gap:8px}.draw-layer button.selected{background:#c8878e;color:#fff}.outfit:disabled{opacity:.72;filter:grayscale(.75)}.outfit:disabled .outfit-preview::after{content:"🔒 待解锁";position:absolute;left:8px;right:8px;bottom:8px;padding:7px;border-radius:8px;background:#fffaf0e8;color:#775b64;font-size:12px;font-weight:700}.growth-rewards .locked{background:#f4f0ed;color:#9a8d87}#controls>h3{margin:18px 0 10px;font-size:15px;color:#865f68}
.fashion-board{margin:0 0 18px;border-radius:14px;overflow:hidden;background:#e5d7d1}.fashion-board img{display:block;width:100%;height:auto}.fashion-board figcaption{padding:9px 12px;background:#fff4eb;color:#896a68;font-size:11px;text-align:center}
.outfit-preview.full-look{aspect-ratio:1}.outfit-preview.full-look img{object-fit:contain}
body[data-room] #character:has(.is-outfit){width:min(68%,310px);height:auto;aspect-ratio:429/537;bottom:20px}
#character #portrait.is-outfit{object-fit:contain}
.wardrobe .speech{top:14px}

body[data-room="makeup"] #character:has(.is-outfit){width:min(76%,360px);bottom:5px}
@media(max-width:740px){body[data-room="makeup"] #character:has(.is-outfit){width:min(70%,270px);bottom:6px}}