:root{--bg:#f7f0df;--paper:#fffaf0;--ink:#2b2118;--muted:#7a6a55;--gold:#c9971c;--gold2:#e0aa1e;--wood:#5a3d22;--line:#e3d5b8}
*{box-sizing:border-box} body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.5;overflow-x:hidden}
.topbar{position:sticky;top:0;z-index:5;background:#2b1d10;color:#fff8e6;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.topbar span{white-space:nowrap}
/* Vào web là chính điện full màn hình ngay, như trong video: không còn thanh trên
   và đoạn giới thiệu chiếm chỗ ở đầu trang, tên + số người nằm trong chính điện. */
.topbar{display:none}
.intro{display:none}
.wrap{max-width:none;padding:0}
.wrap>.controls,.wrap>.counts,.wrap>.panel,.wrap>.beadview,.wrap>.note{margin-left:16px;margin-right:16px}
.wrap>div:has(> #joinBtn){margin:0 16px}
.hall{min-height:100dvh;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.hall3d-wrap{flex:1;min-height:0;width:100%;border-radius:14px;overflow:hidden;background:#2f1d0f;display:flex}
.hall3d-wrap canvas{display:block;width:100%;height:auto;touch-action:pan-y}
.wrap{max-width:900px;margin:0 auto;padding:16px}
.intro{text-align:center} .intro h1{margin:6px 0} .intro p{color:var(--muted);max-width:640px;margin:8px auto}
.hall{position:relative;background:linear-gradient(#4a2f1a,#2f1d0f);border-radius:18px;padding:14px;color:#fff8e6;box-shadow:0 10px 28px rgba(0,0,0,.22);overflow:hidden}
.hall-top{display:flex;justify-content:space-between;gap:8px;margin-bottom:12px}
.pill{background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:6px 12px;font-size:14px;color:#fff8e6}
.pill button{background:none;border:none;color:#fff8e6;font-size:15px;cursor:pointer;padding:0 4px}
.windows{display:flex;justify-content:space-between;margin-bottom:8px}
.win{width:52px;height:52px;border:4px solid #6b4a22;background:#3f6b3a;display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px}
.win i{background:#7fb069;display:block}
.altar{position:relative;text-align:center;padding:10px 8px 14px;border:1px solid rgba(224,170,30,.55);border-radius:14px;background:radial-gradient(circle at 50% 30%,#7a3a2a,#3a2412 70%)}
.altar .sidefig{position:absolute;top:30px;font-size:28px;opacity:.85}
.buddha{width:120px;height:150px;margin:8px auto 0;position:relative}
.halo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:86px;height:86px;border-radius:50%;background:radial-gradient(circle,#ffe27a,#c9971c 70%);box-shadow:0 0 28px rgba(255,215,90,.8)}
.head{position:absolute;left:50%;top:22px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;background:#e8b64c;border:2px solid #8a6508}
.body{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:92px;height:68px;background:linear-gradient(#f0c14b,#b8860b);border-radius:46px 46px 12px 12px;border:2px solid #8a6508}
.candle{position:absolute;bottom:18px;font-size:20px}
.seats{display:grid;grid-template-columns:repeat(3,1fr) 26px repeat(3,1fr);gap:10px;margin-top:18px}
.aisle{grid-column:4}
.seat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:10px 4px 8px;text-align:center;min-height:108px}
.seat .avatar{width:44px;height:58px;margin:0 auto;position:relative;transition:transform .5s;transform-origin:bottom center}
.seat .avatar .hd{width:30px;height:30px;border-radius:50%;background:#f2c99b;margin:0 auto;border:2px solid #7a5a2e}
.seat .avatar .robe{width:44px;height:30px;margin-top:-2px;border-radius:8px 8px 4px 4px;background:#9a9a9a;position:relative;overflow:hidden}
.seat .avatar .robe:after{content:"";position:absolute;left:8px;top:-6px;width:12px;height:44px;background:#d4a017;transform:rotate(24deg)}
.seat .mat{width:54px;height:10px;background:#3a3a3a;border-radius:2px;margin:4px auto 0}
.seat .label{font-size:12px;margin-top:6px;color:#f0dcb0}
.seat.empty{opacity:.75} .seat.empty .avatar .hd{opacity:.5} .seat.empty .robe{background:transparent;border:1px dashed rgba(255,255,255,.3)} .seat.empty .robe:after{display:none}
.seat.me{border-color:var(--gold2);background:rgba(224,170,30,.20)}
.seat.bowing .avatar{transform:translateY(14px) rotate(55deg) scaleY(.65)}
.hall-bar{display:flex;justify-content:center;gap:12px;margin-top:18px;background:rgba(0,0,0,.5);border-radius:99px;padding:8px;width:fit-content;margin-left:auto;margin-right:auto}
.hall-bar button{background:#fff8e6;color:#241a08;border:none;border-radius:99px;padding:10px 18px;font-size:16px;cursor:pointer;font-weight:700}
.controls{display:grid;grid-template-columns:1fr;gap:12px;margin-top:16px}
@media(min-width:640px){.controls{grid-template-columns:1fr 1fr}}
button{font-size:17px;padding:14px 12px;border-radius:12px;border:1px solid var(--wood);cursor:pointer;background:var(--paper);color:var(--ink)}
button.primary{background:var(--gold2);color:#241a08;font-weight:700;border-color:#8a6508}
.counts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
@media(min-width:640px){.counts{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.card b{display:block;font-size:26px} .card span{color:var(--muted);font-size:14px}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px}
.note{color:var(--muted);font-size:14px;text-align:center}
.beadview{background:#fdf6e3;border:1px solid #e3d5b8;border-radius:14px;padding:16px;margin-top:16px}
.bead-top{display:flex;justify-content:space-between;align-items:center}
.bead-u{width:220px;margin:16px auto;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.bead-row{display:flex;justify-content:space-between;width:220px}
.bead-row i,.bead-arc i{width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9a05a,#7a4a18 70%);display:block;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.bead-arc{display:flex;gap:6px;justify-content:center}
.bead-count{font-size:36px;font-weight:800;text-align:left} .bead-count small{font-size:20px;font-weight:600;color:var(--muted)}
.overlay{position:fixed;inset:0;background:rgba(20,12,6,.55);backdrop-filter:blur(10px);z-index:20;display:none;overflow:auto;padding:20px}
.overlay.open{display:block}
.overlay-box{max-width:560px;margin:40px auto;background:#fff;border-radius:14px;padding:16px}
.comment{border-top:1px solid var(--line);padding:12px 0;display:flex;gap:10px}
.avatar-c{width:40px;height:40px;border-radius:50%;background:#d4a017;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
input{width:100%;padding:12px;border-radius:10px;border:1px solid var(--line);font-size:16px}
footer{text-align:center;color:var(--muted);font-size:14px;padding:16px}
@media(max-width:520px){.seats{gap:6px} .win{width:36px;height:36px}}