/* ===== Cảnh chùa góc nhìn thứ nhất ===== */
#scene{position:fixed;inset:0;z-index:50;background:#bfe6f2;overflow:hidden;transition:opacity .7s}
#scene.off{opacity:0;pointer-events:none}
#scene[hidden]{display:none}
#sv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .55s}
#sv.fade{opacity:0}
#sCap{position:absolute;left:50%;top:max(16px,env(safe-area-inset-top));transform:translateX(-50%);width:min(92vw,460px);text-align:center;
  background:rgba(255,248,230,.92);color:#5a3a22;border:2px solid #f0c987;border-radius:22px;padding:10px 16px;font-size:1.02rem;line-height:1.45;
  box-shadow:0 6px 18px rgba(90,58,34,.22);transition:opacity .4s;pointer-events:none}
#sCap:empty{opacity:0}
#sBtn{position:absolute;left:50%;bottom:max(28px,env(safe-area-inset-bottom));transform:translateX(-50%);
  background:linear-gradient(#ffd25a,#f2a93a);border:3px solid #fff3cf;color:#5a3208;font-weight:700;font-size:1.15rem;
  border-radius:999px;padding:12px 34px;cursor:pointer;box-shadow:0 8px 0 #c7791a,0 14px 22px rgba(90,58,34,.3);
  transition:transform .12s,opacity .3s;animation:pulse 1.8s ease-in-out infinite}
#sBtn:active{transform:translateX(-50%) translateY(5px);box-shadow:0 3px 0 #c7791a}
#sBtn[hidden]{display:none}
#sSkip{position:absolute;right:12px;bottom:max(12px,env(safe-area-inset-bottom));background:rgba(255,248,230,.8);border:0;border-radius:999px;
  padding:6px 14px;color:#7a5a3a;font-size:.88rem;cursor:pointer}
#sSkip:hover{background:#fff8e6}
@keyframes pulse{50%{box-shadow:0 8px 0 #c7791a,0 0 0 10px rgba(255,210,90,.35),0 14px 22px rgba(90,58,34,.3)}}

/* hoạt hình dùng chung trong SVG (g con mới được animate, g cha giữ transform) */
#scene svg *,#seat *{transform-box:fill-box}
.drift{animation:drift 26s linear infinite alternate}
@keyframes drift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
.swing{transform-origin:50% 0;animation:swing 3.4s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.bob{transform-origin:50% 100%;animation:bobp 3s ease-in-out infinite}
@keyframes bobp{50%{transform:translateY(-3px) scaleY(1.02)}}
.bounce{animation:bounce 1s ease-in-out infinite}
@keyframes bounce{50%{transform:translateY(-6px)}}
.flutter{animation:flutter 5s ease-in-out infinite alternate}
@keyframes flutter{0%{transform:translate(0,0)}50%{transform:translate(18px,-14px)}100%{transform:translate(-10px,-4px)}}
.wing{transform-origin:50% 100%;animation:wing .35s ease-in-out infinite alternate}
@keyframes wing{to{transform:scaleX(.45)}}
.flame{transform-origin:50% 100%;animation:flame .5s ease-in-out infinite alternate}
@keyframes flame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.88,1.12) rotate(3deg)}}
.smoke{stroke-dasharray:6 8;animation:smoke 2.4s linear infinite}
@keyframes smoke{to{stroke-dashoffset:-56}}
.twinkle{animation:tw 2.2s ease-in-out infinite}
@keyframes tw{50%{opacity:.25}}

/* bước đi: cả khung rung nhẹ như nhịp chân */
#sv.walk #bob{animation:step .62s ease-in-out infinite}
@keyframes step{25%{transform:translateY(5px) rotate(.4deg)}75%{transform:translateY(5px) rotate(-.4deg)}}

/* chỗ ngồi */
.cush{cursor:pointer}
.cush.free ellipse:first-of-type+ellipse{transition:filter .2s}
.cush.free:hover{filter:brightness(1.12) drop-shadow(0 0 8px #fff3a0)}
.cush.taken{cursor:not-allowed}
.hnt{animation:bounce 1s ease-in-out infinite}

/* ===== Khung nhìn khi đã ngồi ===== */
body.intro #app{display:none}
#seatWrap{max-width:min(760px,calc(46vh*1.3333));margin:0 auto;padding:0;position:relative}
#seat{display:block;width:100%;height:auto;border-radius:0 0 28px 28px;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  box-shadow:0 12px 26px rgba(0,0,0,.4)}
#seat .o{display:none}
#seat.m-pick .o-pick,#seat.m-mo .o-mo,#seat.m-kinh .o-kinh,#seat.m-chu .o-chu{display:inline}
#seat.m-mo{cursor:pointer}
#seat .mallet{transform-box:view-box;transform-origin:318px 270px;transition:transform .05s}
#seat .mallet.hit{transform:rotate(-20deg)}
#seat .beads{transition:stroke-dashoffset .18s}
#seat .pop{pointer-events:none;transform-origin:50% 50%;animation:pop .9s ease-out forwards}
@keyframes pop{from{opacity:1;transform:translateY(0) scale(.7)}to{opacity:0;transform:translateY(-70px) scale(1.2)}}
#seat .ring{pointer-events:none;transform-origin:50% 50%;animation:ring .55s ease-out forwards}
@keyframes ring{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.9)}}
#seat .glow{animation:tw 3.5s ease-in-out infinite}
body.m-kinh #seatWrap{max-width:min(760px,calc(30vh*1.3333))}

/* hai nút ở góc khung ngồi */
#seatTools{position:absolute;right:10px;top:10px;display:flex;gap:6px}
#seatTools .btn{background:rgba(46,37,32,.55);backdrop-filter:blur(4px);border-color:rgba(255,230,180,.35);font-size:.85rem;padding:5px 12px}

/* ===== Chọn: kinh / chú / gõ mõ ===== */
body.pick nav{display:none}
#pickT h2{text-align:center;font-weight:600;font-size:1.25rem;margin:6px 0 4px}
#pickT .hint{text-align:center;margin-bottom:16px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.card{background:linear-gradient(#4a3a2f,#3b2f28);border:2px solid #6b5444;border-radius:24px;padding:14px 6px 12px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:6px;font-size:1.02rem;transition:transform .15s,border-color .15s;box-shadow:0 6px 0 #241b16}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--saf)}
.card:active{transform:translateY(3px);box-shadow:0 2px 0 #241b16}
.card svg{width:76px;height:76px}
.card small{color:var(--mut);font-size:.78rem;text-align:center;line-height:1.3;padding:0 4px}
@media(max-width:420px){.card svg{width:58px;height:58px}.card{font-size:.95rem}}
#mobtn{display:none!important}

#world{transform-box:view-box;transform-origin:0 0}
#scene[data-st=road],#scene[data-st=gate]{background:linear-gradient(#8fd3ee 0 48.5%,#b4e49a 48.5%)}
#scene[data-st=hall]{background:linear-gradient(#7d5038 0 47%,#e0ab68 47%)}
#sv{left:50%;right:auto;width:min(100vw,calc(100vh*.62));transform:translateX(-50%);box-shadow:0 0 40px rgba(0,0,0,.25)}

/* ===== Phong cách trang nghiêm (ghi đè) ===== */
#scene{background:#2a2018}
#scene[data-st=road],#scene[data-st=gate]{background:linear-gradient(#aeb5a8 0 48.5%,#6e7a58 48.5%)}
#scene[data-st=hall]{background:linear-gradient(#1c120e 0 47%,#4a3424 47%)}
#sCap{background:rgba(24,16,12,.78);color:#ecdcb8;border:1px solid rgba(214,174,96,.55);border-radius:4px;padding:12px 18px;font-size:1rem;box-shadow:0 8px 24px rgba(0,0,0,.45);backdrop-filter:blur(3px)}
#sBtn{background:rgba(24,16,12,.7);border:1px solid #d6ae60;color:#f1dfae;font-weight:600;font-size:1.05rem;letter-spacing:.08em;border-radius:2px;padding:12px 38px;box-shadow:0 8px 22px rgba(0,0,0,.5);animation:pulse2 2.6s ease-in-out infinite}
#sBtn:active{transform:translateX(-50%) translateY(2px);box-shadow:0 3px 10px rgba(0,0,0,.5)}
@keyframes pulse2{50%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 8px rgba(214,174,96,.16)}}
#sSkip{background:rgba(24,16,12,.55);color:#cdb98e;border-radius:2px}
#sSkip:hover{background:rgba(24,16,12,.8)}
#seat{border-radius:0 0 6px 6px}
.hnt{animation:bounce 2.4s ease-in-out infinite}
.card{border-radius:8px}
#seatTools .btn{border-radius:4px}

/* ===== Chuyển động mượt (ghi đè) ===== */
@keyframes fadein{from{opacity:0}to{opacity:1}}
#scene{transition:opacity 1s ease}
#sv{transition:opacity .8s ease-in-out;will-change:opacity}
#world{will-change:transform}
#sCap{transition:opacity .45s ease}
#sBtn:not([hidden]){animation:fadein .9s ease both,pulse2 2.8s ease-in-out .9s infinite}
body:not(.intro) #seatWrap{animation:fadein 1.4s ease both}
#seatWrap{transition:max-width .7s ease}
#seat.m-pick .o-pick,#seat.m-mo .o-mo,#seat.m-kinh .o-kinh,#seat.m-chu .o-chu{animation:fadein .55s ease both}
.cush{transition:filter .35s ease}

/* nhịp đi: hai bước mỗi chu kỳ, nhẹ và đều */
#sv.walk #bob{animation:step2 1.1s ease-in-out infinite}
@keyframes step2{0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(3px) rotate(.25deg)}75%{transform:translateY(3px) rotate(-.25deg)}}

/* mây, đèn, người thở, lửa, khói, quầng sáng: chậm và liền mạch */
.drift{animation-timing-function:ease-in-out}
.swing{animation:swing2 5.5s ease-in-out infinite alternate}
@keyframes swing2{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.bob{animation-name:bobp2;animation-timing-function:ease-in-out}
@keyframes bobp2{0%,100%{transform:translateY(0) scaleY(1)}50%{transform:translateY(-1.5px) scaleY(1.012)}}
.flame{animation:flame2 1.7s ease-in-out infinite alternate}
@keyframes flame2{0%{transform:scale(1,1) rotate(-2deg)}35%{transform:scale(.94,1.08) rotate(1.5deg)}70%{transform:scale(1.03,.96) rotate(-1deg)}100%{transform:scale(.9,1.1) rotate(2deg)}}
.smoke{stroke-dasharray:none;animation:rise 7s ease-in-out infinite}
@keyframes rise{0%{opacity:0;transform:translateY(8px) scaleX(.9)}30%{opacity:.6}100%{opacity:0;transform:translateY(-22px) scaleX(1.15)}}
.glow,#seat .glow{animation:glowb 5s ease-in-out infinite}
@keyframes glowb{0%,100%{opacity:.7}50%{opacity:1}}

/* gõ mõ, hạt chuỗi, hiệu ứng nổi */
#seat .mallet{transition:transform .22s cubic-bezier(.2,.8,.3,1)}
#seat .mallet.hit{transition-duration:.06s}
#seat .beads{transition:stroke-dashoffset .38s cubic-bezier(.2,.8,.3,1)}
#seat .pop{animation:pop2 1.2s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes pop2{0%{opacity:0;transform:translateY(0) scale(.7)}15%{opacity:1}100%{opacity:0;transform:translateY(-60px) scale(1.15)}}
#seat .ring{animation:ring2 .8s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes ring2{from{opacity:.8;transform:scale(.6)}to{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.drift,.swing,.bob,.flame,.smoke,.glow,.flutter,.hnt,#sv.walk #bob{animation:none!important}}