:root{--cafe-ink:#493026;--cafe-rose:#e96d8c;--cafe-cream:#fff8ea;--cafe-wood:#875135}

/* Giữ nguyên hệ tọa độ 768x1376 của quầy. Nền và hitbox phải dịch cùng
   một lượng; tuyệt đối không nén riêng trục Y vì sẽ làm vùng bấm lệch ảnh. */
#q3{overflow-x:hidden!important;overflow-y:auto!important;overflow-y:overlay!important;touch-action:pan-y pinch-zoom!important;overscroll-behavior-y:contain!important;background:#f7e7ca!important}
#q3stage.cafe-life-ready{height:1476px!important;background-size:768px 1376px!important;background-position:0 var(--prep-shift,100px)!important}
#q3stage.cafe-life-ready .q3lane,#q3stage.cafe-life-ready #q3face{display:none!important}
.cafe-life__prep-layer{position:absolute;inset:0;z-index:5;transform:translateY(var(--prep-shift,620px));transform-origin:0 0}

/* Bubble được neo vào đúng khách đang gọi và luôn có nền đặc. */
#q3stage.cafe-life-ready #q3bub{--bubble-tail:210px;width:410px!important;height:auto!important;min-height:100px!important;z-index:2100!important;box-sizing:border-box;padding:10px 14px 8px 11px!important;border:4px solid #6f4633;border-radius:20px;color:#3b271e;background:#fffdf7;box-shadow:0 7px 0 rgba(93,51,31,.22),0 13px 20px rgba(71,35,19,.18);filter:none!important;opacity:0;visibility:hidden;transform:translateY(9px);transition:opacity .18s,transform .18s,visibility 0s linear .18s}
#q3stage.cafe-life-ready.cafe-life-has-order #q3bub{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#q3stage.cafe-life-ready #q3bub:after{content:"";position:absolute;left:var(--bubble-tail);bottom:-21px;width:30px;height:30px;border-right:4px solid #6f4633;border-bottom:4px solid #6f4633;border-radius:0 0 7px;background:#fffdf7;transform:translateX(-50%) rotate(45deg);z-index:-1}
#q3stage.cafe-life-ready #q3say{font-size:23px!important;line-height:1.14!important;text-shadow:none!important}
#q3stage.cafe-life-ready #q3bub.q3idleB{display:none!important}
#q3stage.cafe-life-ready .q3pat{margin-top:3px}
/* Dòng hướng dẫn đầu ngày nằm trên cùng hàng nhãn quầy, không chui dưới
   mép café và không đè lên chồng ly. */
#q3stage.cafe-life-ready #q3coach{left:150px!important;top:327px!important;width:470px!important}

/* Khung quán mobile gọn như bố cục gốc: một hàng bốn chỗ, quầy pha ngay dưới. */
.cafe-life{position:absolute;left:0;top:76px;width:768px;height:340px;overflow:hidden;z-index:9;border-bottom:8px solid #67412f;background:#d89358 url("img/cafe-room-v3.png") center 25%/768px auto no-repeat;box-shadow:inset 0 -18px 30px rgba(61,32,20,.14);isolation:isolate}
.cafe-life:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url("img/cafe-room-night-v1.png") center 25%/768px auto no-repeat;opacity:0;transition:opacity .8s ease}
.cafe-life[data-period="night"]:before{opacity:1}
.cafe-life[data-period="night"]{box-shadow:inset 0 -18px 30px rgba(23,20,43,.3)}
.cafe-life__wall,.cafe-life__door,.cafe-life__counter,.cafe-life__rug,.cafe-life__aisle{display:none}
.cafe-life__wall{position:absolute;left:0;right:0;top:0;height:240px;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 3px,transparent 3px 38px),linear-gradient(90deg,#edc39d,#f9e7c9 58%,#eab989);border-bottom:11px solid #8c5739;box-shadow:0 8px 0 rgba(91,49,30,.16)}
.cafe-life__window{position:absolute;left:125px;top:27px;width:208px;height:137px;border:10px solid #74462f;border-radius:7px;background:linear-gradient(#8dc8dc 0 54%,#d9eee7 55% 100%);box-shadow:inset 0 0 0 5px #f8e3c4,7px 8px 0 rgba(86,47,29,.12)}
.cafe-life__window:before,.cafe-life__window:after{content:"";position:absolute;background:#74462f}.cafe-life__window:before{left:96px;top:0;width:8px;height:100%}.cafe-life__window:after{left:0;right:0;top:62px;height:8px}
.cafe-life__menu{position:absolute;left:356px;top:37px;width:145px;height:100px;border:7px solid #74462f;border-radius:4px;background:#365745;box-shadow:5px 7px 0 rgba(84,46,29,.12)}
.cafe-life__menu:after{content:"TRÀ SỮA\A MATCHA\A HỒNG TRÀ";white-space:pre;position:absolute;inset:10px;color:#fff2c9;font:800 14px/1.62 system-ui;text-align:center}
.cafe-life__shelf{position:absolute;right:18px;top:33px;width:218px;height:120px;border-bottom:10px solid #805038;background:repeating-linear-gradient(90deg,transparent 0 22px,#d99a65 23px 36px,transparent 37px 48px);filter:drop-shadow(0 7px 0 rgba(82,44,28,.16))}
.cafe-life__door{position:absolute;left:14px;top:92px;width:98px;height:245px;z-index:150;border:9px solid #694330;border-bottom:0;border-radius:7px 7px 0 0;background:linear-gradient(90deg,#b9654f,#e2a27a 56%,#9d5645);box-shadow:7px 3px 0 rgba(78,39,25,.17)}
.cafe-life__door:before{content:"";position:absolute;right:10px;top:120px;width:10px;height:10px;border-radius:50%;background:#f6cf64;border:2px solid #71432d}.cafe-life__door span{position:absolute;left:11px;top:30px;padding:4px 8px;border:3px solid #76503b;border-radius:4px;background:#fff3d5;color:#71432d;font:900 11px system-ui;transform:rotate(-2deg)}
.cafe-life__counter{position:absolute;right:12px;top:150px;width:260px;height:145px;z-index:250;border:6px solid #794832;border-radius:9px 9px 3px 3px;background:repeating-linear-gradient(90deg,#cf735f 0 25px,#ef9278 26px 50px);box-shadow:0 11px 0 #6c422f,0 18px 17px rgba(71,37,24,.2)}
.cafe-life__counter:before{content:"";position:absolute;left:-9px;right:-9px;top:-14px;height:22px;border:5px solid #75452f;border-radius:7px;background:#efb36f}.cafe-life__counter i{position:absolute;right:18px;top:27px;width:52px;height:61px;border:5px solid #664232;border-radius:7px;background:linear-gradient(#f5e8d5 0 30%,#bc8d6c 31% 100%)}.cafe-life__counter b{position:absolute;left:27px;bottom:23px;color:#fff6dc;font:900 13px system-ui;text-shadow:0 2px #8d483d}
.cafe-life__rug{position:absolute;left:145px;top:254px;width:560px;height:570px;z-index:1;border:6px solid rgba(132,71,48,.32);border-radius:80px 80px 24px 24px;background:radial-gradient(ellipse at center,rgba(248,215,169,.26),rgba(159,89,57,.08) 70%,transparent 71%)}
.cafe-life__aisle{position:absolute;left:91px;top:292px;width:78px;height:545px;z-index:2;border-left:3px dashed rgba(255,241,208,.38);border-right:3px dashed rgba(255,241,208,.38);transform:skewX(-6deg)}
.cafe-life__status{display:none}
.cafe-life__status b{font:900 14px system-ui}.cafe-life__status small{grid-column:1/-1;margin-top:2px;font:700 11px system-ui;color:#8c6656}.cafe-life__status span{width:10px;height:10px;border-radius:50%;background:#52b66d;box-shadow:0 0 0 4px rgba(82,182,109,.18);animation:cafePulse 1.8s ease-in-out infinite}

/* Nội thất cùng góc nhìn ngang với pose ngồi: hai ghế đối diện dùng chung
   một bàn. Lưng ghế nằm phía sau người; mép ghế và bàn che đúng phần đùi. */
.cafe-life__seat{position:absolute;left:calc(var(--seat-x) - 60px);top:calc(var(--seat-y) - 104px);width:120px;height:132px;pointer-events:none}
.cafe-life__chair-back{position:absolute;left:9px;top:18px;width:102px;height:64px;z-index:calc(var(--seat-z) - 16);box-sizing:border-box;border:5px solid #65402f;border-radius:25px 25px 13px 13px;background:linear-gradient(105deg,#c66f61,#f0a487 48%,#c4675c);box-shadow:inset 0 0 0 4px rgba(255,220,188,.35),inset 0 -9px rgba(114,57,45,.12),0 6px 0 rgba(73,38,25,.14)}
.cafe-life__seat[data-facing="right"] .cafe-life__chair-back,.cafe-life__seat[data-facing="left"] .cafe-life__chair-back{left:9px;right:auto;transform:none}
.cafe-life__chair-seat{position:absolute;left:10px;top:67px;width:100px;height:30px;z-index:calc(var(--seat-z) - 14);box-sizing:border-box;border:5px solid #65402f;border-radius:18px;background:linear-gradient(#f0ad91,#c66f61);box-shadow:inset 0 5px rgba(255,228,204,.35),0 5px 0 rgba(103,64,47,.18)}
.cafe-life__chair-seat:after{display:none}
/* Không vẽ lớp mặt trước: toàn bộ sofa ở sau sprite để đùi, cẳng chân và
   bàn chân không bị bất kỳ gờ ngang nào cắt qua. */
.cafe-life__chair-front{display:none}
.cafe-life__table-pair{position:absolute;left:calc(var(--table-x) - 73px);top:244px;width:146px;height:78px;z-index:312;pointer-events:none}
.cafe-life__table-pair:before{content:"";position:absolute;left:0;top:0;width:136px;height:28px;border:5px solid #68412e;border-radius:50%;background:linear-gradient(#e7ad76,#a96944);box-shadow:inset 0 5px #f4c493,0 5px 0 #66412e,0 8px 10px rgba(58,29,18,.2)}
.cafe-life__table-pair:after{content:"";position:absolute;left:61px;top:26px;width:15px;height:39px;border-radius:4px;background:linear-gradient(90deg,#5c3929,#89583d,#5c3929)}
.cafe-life__table-pair>i{position:absolute;left:15px;top:7px;width:106px;height:7px;border-radius:50%;background:rgba(255,222,173,.35)}.cafe-life__table-pair>i:after{content:"";position:absolute;left:38px;top:54px;width:31px;height:10px;border-radius:50%;background:#5d3929;box-shadow:0 3px 5px rgba(62,31,18,.2)}
.cafe-life__seat.is-active~.cafe-life__table-pair{filter:none}
.cafe-life__drink{position:absolute;left:calc(var(--cup-x) - var(--seat-x) + 60px);top:calc(var(--cup-y) - var(--seat-y) + 104px);width:27px;height:39px;z-index:320;opacity:0;transform:translateY(-9px) scale(.78);transition:opacity .18s,transform .34s cubic-bezier(.2,.8,.25,1);filter:drop-shadow(0 3px 2px rgba(61,30,18,.24))}.cafe-life__drink.is-L{width:31px;height:46px;top:calc(var(--cup-y) - var(--seat-y) + 97px)}.cafe-life__seat.has-drink .cafe-life__drink{opacity:1;transform:none}.cafe-life__drink-art{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}

/* Frame PNG rời 320x320 được chuẩn hóa về cùng foot anchor, hiển thị 128px. */
.cafe-life__actors{position:absolute;inset:0;z-index:auto;pointer-events:none}
.cafe-life__actor{position:absolute;left:0;top:0;width:128px;height:128px;will-change:transform;pointer-events:none}
.cafe-life__actor[hidden]{display:none!important}
.cafe-life__sprite-wrap{position:absolute;inset:0;overflow:visible;transform-origin:64px 122px;will-change:transform}
.cafe-life__shadow{position:absolute;left:25px;bottom:2px;width:78px;height:11px;border-radius:50%;background:rgba(58,31,21,.2);filter:blur(2px)}
.cafe-life__sprite{position:absolute;left:0;top:0;width:128px;height:128px;object-fit:contain;user-select:none;image-rendering:auto;filter:drop-shadow(0 2px 0 rgba(79,42,28,.18))}
.cafe-life__held-drink{position:absolute;left:60px;top:52px;width:27px;height:41px;z-index:8;display:none;filter:drop-shadow(0 3px 2px rgba(58,30,20,.25));transform-origin:50% 100%}.cafe-life__held-drink.is-L{width:31px;height:48px;top:45px}.cafe-life__held-drink.has-drink{display:block}
.cafe-life__staff-label{position:absolute;left:64px;top:119px;z-index:30;padding:2px 6px;border:2px solid #fff;border-radius:8px;background:#5e4032;color:#fff;font:800 10px/1 system-ui;white-space:nowrap;transform:translateX(-50%)}

/* Hình đổi bằng src theo clip; CSS chỉ xử lý hướng nhìn và ly động. */
.cafe-life__actor--guest[data-pose="walk"][data-motion="side"][data-facing="left"] .cafe-life__sprite{transform:scaleX(-1)}
.cafe-life__actor--guest[data-facing="left"][data-pose="sitdown"] .cafe-life__sprite,.cafe-life__actor--guest[data-facing="left"][data-pose="seated"] .cafe-life__sprite,.cafe-life__actor--guest[data-facing="left"][data-pose="pickup"] .cafe-life__sprite,.cafe-life__actor--guest[data-facing="left"][data-pose="order"] .cafe-life__sprite,.cafe-life__actor--guest[data-facing="left"][data-pose="drink"] .cafe-life__sprite{transform:scaleX(-1)}
.cafe-life__actor--staff[data-facing="left"] .cafe-life__sprite{transform:scaleX(-1)}
.cafe-life__actor--guest[data-facing="left"] .cafe-life__held-drink{left:41px}
.cafe-life__actor--guest[data-facing="right"][data-pose="pickup"] .cafe-life__held-drink{animation:cafeSpritePickupRight .56s ease-in-out both}.cafe-life__actor--guest[data-facing="left"][data-pose="pickup"] .cafe-life__held-drink{animation:cafeSpritePickupLeft .56s ease-in-out both}
.cafe-life__actor--guest[data-facing="right"][data-pose="drink"] .cafe-life__held-drink{animation:cafeSpriteSipRight 1.45s ease-in-out infinite}.cafe-life__actor--guest[data-facing="left"][data-pose="drink"] .cafe-life__held-drink{animation:cafeSpriteSipLeft 1.45s ease-in-out infinite}
.cafe-life__actor--staff[data-pose="walk-carry"] .cafe-life__held-drink{left:78px;top:43px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="1"] .cafe-life__held-drink{left:77px;top:44px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="2"] .cafe-life__held-drink{left:78px;top:43px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="3"] .cafe-life__held-drink{left:79px;top:42px}.cafe-life__actor--staff[data-pose="walk-carry"] .cafe-life__held-drink.is-L{top:36px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="1"] .cafe-life__held-drink.is-L{top:37px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="2"] .cafe-life__held-drink.is-L{top:36px}.cafe-life__actor--staff[data-pose="walk-carry"][data-frame="3"] .cafe-life__held-drink.is-L{top:35px}
.cafe-life__actor--staff[data-facing="left"][data-pose="walk-carry"] .cafe-life__held-drink{left:23px}.cafe-life__actor--staff[data-facing="left"][data-pose="walk-carry"][data-frame="1"] .cafe-life__held-drink{left:24px}.cafe-life__actor--staff[data-facing="left"][data-pose="walk-carry"][data-frame="2"] .cafe-life__held-drink{left:23px}.cafe-life__actor--staff[data-facing="left"][data-pose="walk-carry"][data-frame="3"] .cafe-life__held-drink{left:22px}
.cafe-life__actor--staff[data-pose="place"] .cafe-life__held-drink{left:var(--serve-held-x,82px);top:var(--serve-held-y,9px);animation:cafeStaffPlaceDrink .42s ease-in-out both}.cafe-life__actor--staff[data-pose="place"] .cafe-life__held-drink.is-L{top:calc(var(--serve-held-y,9px) - 7px)}

.cafe-life__upgrade-preview{margin:8px 4px 14px;padding:12px;border:2px solid #e8b9a2;border-radius:18px;background:linear-gradient(145deg,#fff9ed,#fff0e7);color:var(--cafe-ink)}.cafe-life__upgrade-preview>b{display:block;margin-bottom:9px}.cafe-life__upgrade-preview>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.cafe-life__upgrade-preview span{min-height:76px;display:grid;place-items:end center;padding:8px;border:2px solid rgba(116,69,46,.22);border-radius:12px;background:linear-gradient(#f6d5ad 0 55%,#b9764e 56%);font:800 12px system-ui;text-align:center}

@keyframes cafePulse{50%{transform:scale(.72);opacity:.65}}
@keyframes cafeSpriteIdle{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cafeSpriteWalk{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-4px) rotate(.7deg)}}
@keyframes cafeGuestWalkFrames{0%,100%{background-position-x:0}25%{background-position-x:-120px}50%{background-position-x:-240px}75%{background-position-x:-360px}}
@keyframes cafeStaffCarryFrames{0%,100%{background-position-x:0}25%{background-position-x:-150px}50%{background-position-x:-300px}75%{background-position-x:-450px}}
@keyframes cafeGuestSitFrames{0%{background-position-x:0}33%{background-position-x:-120px}66%{background-position-x:-240px}100%{background-position-x:-360px}}
@keyframes cafeGuestSitRight{from{transform:translateX(0)}to{transform:translate(-17px,2px)}}
@keyframes cafeGuestSitLeft{from{transform:translateX(0)}to{transform:translate(17px,2px)}}
@keyframes cafeSpriteOrderRight{from{transform:translate(-17px,2px) rotate(-.6deg)}to{transform:translate(-17px,0) rotate(.8deg)}}
@keyframes cafeSpriteOrderLeft{from{transform:translate(17px,2px) rotate(-.6deg)}to{transform:translate(17px,0) rotate(.8deg)}}
@keyframes cafeSpritePickupRight{0%{transform:translate(var(--pickup-x,50px),var(--pickup-y,-12px)) rotate(0)}100%{transform:translate(3px,-29px) rotate(-7deg)}}
@keyframes cafeSpritePickupLeft{0%{transform:translate(var(--pickup-x,-56px),var(--pickup-y,-12px)) rotate(0)}100%{transform:translate(-3px,-29px) rotate(7deg)}}
@keyframes cafeSpriteSipRight{0%,16%,100%{transform:translate(-2px,-15px) rotate(-3deg)}42%,68%{transform:translate(-10px,-31px) rotate(-10deg)}}
@keyframes cafeSpriteSipLeft{0%,16%,100%{transform:translate(2px,-15px) rotate(3deg)}42%,68%{transform:translate(7px,-31px) rotate(10deg)}}
@keyframes cafeStaffPlaceDrink{from{transform:translate(calc(var(--carry-held-x,83px) - var(--serve-held-x,82px)),calc(var(--carry-held-y,22px) - var(--serve-held-y,9px)))}to{transform:none}}
@keyframes cafeSpritePlace{0%{transform:translateY(0)}100%{transform:translateY(1px)}}
@media(prefers-reduced-motion:reduce){.cafe-life *{animation-duration:.001ms!important;animation-iteration-count:1!important}}
@media(max-width:430px){.cafe-life__upgrade-preview>div{grid-template-columns:1fr}}