.tea-salon{background:#60442b;color:#fff2cc}
.salon-scene{position:relative;isolation:isolate;aspect-ratio:16/9;container-type:inline-size}
.salon-scene>img{width:100%;height:100%;display:block;object-fit:cover}
.tea-seat{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);border:0;background:transparent;min-height:44px;min-width:54px;padding:0 2px;color:#fff3cd;touch-action:manipulation;z-index:1;font-size:clamp(10px,2.2cqw,13px);font-weight:700;white-space:nowrap}
.tea-seat span{padding:3px 7px;border:1px solid #e2c581;border-radius:6px;background:#254a3ef2;box-shadow:0 2px 6px #3621118c}
.tea-seat[aria-pressed=true] span{background:#f9e9b9;color:#402e20;border-color:#fff1c1}
.salon-scene .tea-seat[data-seat="0"],.tea-salon[data-table="0"]{--x:27%;--y:58%}
.salon-scene .tea-seat[data-seat="1"],.tea-salon[data-table="1"]{--x:74%;--y:56%}
.salon-scene .tea-seat[data-seat="2"],.tea-salon[data-table="2"]{--x:25%;--y:85%}
.salon-scene .tea-seat[data-seat="3"],.tea-salon[data-table="3"]{--x:79%;--y:85%}
.tea-bubble{position:absolute;z-index:2;pointer-events:none;width:max-content;max-width:48%;margin:0;left:clamp(2%,calc(var(--x) - 11%),50%);bottom:calc(100% - var(--y) + 17px);background:#fff8e8f7;border:1px solid #ba955b;color:#284637;border-radius:9px;padding:5px 9px;box-shadow:0 2px 9px #291e1690;font:600 clamp(12px,2.3cqw,16px)/1.48 system-ui,"PingFang SC",sans-serif}
.tea-bubble:after{content:"";position:absolute;bottom:-6px;left:20%;width:9px;height:9px;background:#fff8e8;border:solid #ba955b;border-width:0 1px 1px 0;transform:rotate(45deg)}
.tea-salon[data-table="1"] .tea-bubble:after,.tea-salon[data-table="3"] .tea-bubble:after{left:auto;right:16%}
.tea-salon[data-table="1"] .tea-bubble,.tea-salon[data-table="3"] .tea-bubble{left:auto;right:clamp(2%,calc(94% - var(--x)),28%)}
.tea-bubble b{display:block;color:#8c572e;font-size:.8em;letter-spacing:.12em}
.salon-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 11px;background:#25473b;border-bottom:1px solid #9d804f;color:#f4e3b4;font-size:12px}
.salon-bar button{flex-shrink:0;min-height:38px;color:#fff3ca;background:transparent;border:0;font-weight:bold;text-decoration:underline;text-underline-offset:4px;touch-action:manipulation}
.salon-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Two independent paths share the perspective of the central aisle. */
.salon-aisle{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;container-type:size}
.tea-walker{position:absolute;display:block;left:0;top:0;width:12%;aspect-ratio:2/3;transform-origin:50% 100%;opacity:0;will-change:transform}
.tea-walker:before{content:"";position:absolute;bottom:.8%;left:31%;width:38%;height:5%;border-radius:50%;background:#3826165c;filter:blur(1px)}
.tea-walker>i{display:block;width:100%;height:100%;background-position:0 center;background-size:1600% 100%;background-repeat:no-repeat;animation:tea-footsteps 1.04s steps(16,end) infinite}
.tea-walker.arriving{animation:tea-come 24s linear -5s infinite}
.tea-walker.arriving>i{background-image:url('/luobo/tea/guest-in-stride.webp?v=walk5')}
.tea-walker.leaving{animation:tea-go 29s linear -19s infinite}
.tea-walker.leaving>i{background-image:url('/luobo/tea/guest-out-stride.webp?v=walk5');animation-duration:1.16s}
@keyframes tea-footsteps{to{background-position:106.666667% center}}
@keyframes tea-come{
  0%{transform:translate(calc(52cqw - 50%),calc(143cqh - 100%)) scale(1.28);opacity:0}
  4%{transform:translate(calc(52cqw - 50%),calc(127cqh - 100%)) scale(1.22);opacity:1}
  14%{transform:translate(calc(53cqw - 50%),calc(97cqh - 100%)) scale(1.01);opacity:1}
  28%{transform:translate(calc(54cqw - 50%),calc(74cqh - 100%)) scale(.78);opacity:1}
  42%{transform:translate(calc(52.5cqw - 50%),calc(59cqh - 100%)) scale(.57);opacity:1}
  53%{transform:translate(calc(55cqw - 50%),calc(51cqh - 100%)) scale(.44);opacity:1}
  59%{transform:translate(calc(60cqw - 50%),calc(48cqh - 100%)) scale(.40);opacity:1}
  62%,100%{transform:translate(calc(62cqw - 50%),calc(47.5cqh - 100%)) scale(.38);opacity:0}
}
@keyframes tea-go{
  0%,10%{transform:translate(calc(39cqw - 50%),calc(50cqh - 100%)) scale(.45);opacity:0}
  13%{transform:translate(calc(41cqw - 50%),calc(52cqh - 100%)) scale(.48);opacity:1}
  24%{transform:translate(calc(44cqw - 50%),calc(63cqh - 100%)) scale(.63);opacity:1}
  35%{transform:translate(calc(45.5cqw - 50%),calc(78cqh - 100%)) scale(.80);opacity:1}
  45%{transform:translate(calc(46cqw - 50%),calc(98cqh - 100%)) scale(1.02);opacity:1}
  56%{transform:translate(calc(44cqw - 50%),calc(127cqh - 100%)) scale(1.22);opacity:1}
  63%,100%{transform:translate(calc(42cqw - 50%),calc(147cqh - 100%)) scale(1.36);opacity:0}
}
@media(prefers-reduced-motion:reduce){.salon-aisle{display:none}}
.tea-salon[data-offscreen] .tea-walker,.tea-salon[data-offscreen] .tea-walker>i{animation-play-state:paused}

@container (max-width:470px){
  .tea-salon[data-table="2"] .tea-bubble,.tea-salon[data-table="3"] .tea-bubble{bottom:56%}
}
.salon-bar>div{display:flex;align-items:center;gap:12px;white-space:nowrap}
#teaListen{color:#f9e7b8;text-decoration:none}
.tea-salon[data-speaking] .tea-bubble b:after{content:' · 正在说话';font-size:.82em;letter-spacing:0;color:#657753}
.tea-salon[data-speaking][data-table="0"] .tea-bubble,.tea-salon[data-speaking][data-table="1"] .tea-bubble{bottom:61%}

/* Keep the painting and its articulated guests under the same camera. */
.salon-scene{overflow:hidden}
.salon-camera{position:absolute;inset:0;transform-origin:0 0;}
.salon-camera>img,.salon-camera>canvas{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.salon-camera>canvas{pointer-events:none}
.tea-salon[data-closeup] .salon-aisle{visibility:hidden}
#teaWide{position:absolute;top:8px;left:8px;z-index:2;min-height:36px;padding:5px 13px;border:1px solid #dcc391;border-radius:18px;background:#18382eeb;color:#fff3d5;font-weight:650;cursor:pointer;touch-action:manipulation}
.tea-salon [hidden]{display:none}
.tea-salon[data-closeup]>.tea-bubble{position:static;display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:10px;max-width:none;width:100%;margin:0;min-height:44px;padding:10px 14px;background:#fffae9;border:0;border-radius:0;box-shadow:none;font-size:clamp(13px,2.15vw,17px);pointer-events:auto}
.tea-salon[data-closeup]>.tea-bubble:after,.tea-salon[data-closeup]>.tea-bubble b:after{display:none}
.tea-salon[data-closeup]>.tea-bubble b{color:#83542a}
#teaListen{min-height:44px;padding:4px 12px;border-radius:20px;background:#f8e6ad;color:#294536}
#teaReply{min-height:44px}
.salon-bar{min-height:52px}

.tea-closeup{position:absolute;inset:0;overflow:hidden;background:#4c3725;animation:tea-close-in .23s ease-out both;pointer-events:none}
.tea-closeup img,.tea-closeup video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.tea-closeup video{opacity:0}
.tea-closeup[data-film] video{opacity:1}
@keyframes tea-close-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.tea-closeup{animation:none}}
.tea-salon[data-table="2"] #teaWide{left:auto;right:8px}

.tea-salon[data-ambient] .tea-bubble{animation:tea-bubble-in .25s ease-out both}
@keyframes tea-bubble-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.tea-salon[data-ambient] .tea-bubble{animation:none}}

.salon-camera>img.tea-service-motion{inset:auto;left:44.09722%;top:38.88889%;width:7.63889%;height:29.62963%;pointer-events:none}
@media(prefers-reduced-motion:reduce){.tea-service-motion{display:none!important}}