:root{--gold:#ffda9c;--dark:#2b1018;--red:#8b1c30;--glass:rgba(37,12,20,.83);--outline:rgba(250,205,124,.62)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#180b0c;color:#fff7e6;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;touch-action:none}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{opacity:.58;cursor:not-allowed}.hidden{display:none!important}#game{position:fixed;inset:0;overflow:hidden}#game canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 min(11vw,110px) #17040b9c;background:linear-gradient(to bottom,#12061155,transparent 24%,transparent 70%,#13050c88)}.glass{background:linear-gradient(160deg,rgba(64,22,24,.89),rgba(29,10,20,.88));border:1px solid var(--outline);box-shadow:0 10px 30px #0008, inset 0 1px #fff2;backdrop-filter:blur(10px)}.hud{position:fixed;z-index:10;top:calc(env(safe-area-inset-top) + 9px);left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:9px;pointer-events:none}.hud>*{pointer-events:auto}.identity{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:15px;min-width:164px}.identity .logo-small{height:36px;width:36px;display:grid;place-items:center;border-radius:12px;font-size:23px;color:#ffde86;background:linear-gradient(140deg,#ad263b,#4e1323);border:1px solid #ffdb91}.identity b{display:block;font-size:11px;color:#ffe9b6;white-space:nowrap}.identity small{display:block;color:#f6d7c6;font-size:11px;max-width:142px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.hud-title{text-align:center;text-shadow:0 3px 16px #1c0914}.hud-title b{display:block;font-family:Georgia,serif;letter-spacing:.11em;font-size:clamp(15px,2vw,29px);color:#ffe6af}.hud-title small{display:block;font-size:9px;letter-spacing:.19em;color:#f1cf98}.hud-right{display:flex;gap:7px}.iconbtn{border-radius:15px;border:1px solid #eabb7f9e;background:#3a1421d9;color:#fff4d0;padding:8px 10px;min-width:39px;min-height:37px;box-shadow:0 3px 13px #0007;font-size:15px}.iconbtn span{font-size:10px;color:#fff0ae;vertical-align:top}.quest{position:fixed;z-index:8;top:calc(env(safe-area-inset-top) + 85px);left:12px;padding:11px 13px;border-radius:17px;width:min(235px,46vw);pointer-events:none}.quest-head{font-weight:900;font-size:11px;color:#f8d5a0;display:flex;justify-content:space-between;gap:7px;white-space:nowrap}.quest-head span{color:#fff}.quest-list{display:grid;gap:7px;margin-top:10px}.quest-step{display:flex;align-items:center;gap:8px;color:#cdb6ab;font-size:11px}.quest-step b{font-size:10px;border:1px solid #a7805c;width:21px;height:21px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}.quest-step.current{color:#fff2c8;font-weight:800}.quest-step.current b{background:#c58b3c;color:#320c15;box-shadow:0 0 12px #ffcf6e}.quest-step.done{color:#bcf5cf}.quest-step.done b{border-color:#87cda0;background:#216a47}.hint{position:fixed;z-index:9;bottom:calc(env(safe-area-inset-bottom) + 112px);left:50%;transform:translateX(-50%);padding:9px 15px;border-radius:13px;font-size:12px;font-weight:800;text-align:center;width:max-content;max-width:min(500px,90vw);pointer-events:none;color:#fff2cb}.target-chips{position:fixed;z-index:8;bottom:calc(env(safe-area-inset-bottom) + 161px);right:13px;display:flex;gap:5px;pointer-events:auto}.target-chips button{background:#33111ee8;color:#ffe2b3;border:1px solid #ffcc807c;border-radius:12px;padding:7px 9px;font-size:10px}.controls{position:fixed;z-index:12;left:15px;right:15px;bottom:calc(env(safe-area-inset-bottom) + 17px);display:flex;align-items:flex-end;justify-content:space-between;gap:20px;pointer-events:none}.controls>*{pointer-events:auto}.controls.simplified{justify-content:flex-end}.controls.simplified .joystick{display:none!important}.controls.simplified .right-controls{width:min(230px,60vw);justify-items:end}.joystick{width:114px;height:114px;flex:0 0 auto;border:2px solid #ffe0a575;border-radius:50%;background:#27102186;box-shadow:0 9px 30px #000a,inset 0 0 20px #ffc87516;position:relative;display:grid;place-items:center;touch-action:none;user-select:none}.joystick-inner{width:51px;height:51px;border:3px solid #ffdea0;border-radius:50%;background:radial-gradient(circle at 35% 25%,#fff5d5,#b98747);box-shadow:0 2px 16px #0008;pointer-events:none;z-index:1;will-change:transform}.joystick span{position:absolute;color:#fff5dfa8;font-size:9px}.j-up{top:4px}.j-down{bottom:4px}.j-left{left:9px}.j-right{right:9px}.right-controls{display:grid;justify-items:end;gap:7px}.action-btn{min-width:128px;max-width:193px;min-height:62px;padding:10px 16px;background:linear-gradient(160deg,#f4bd6b,#ad582d);border:2px solid #ffe6ac;border-radius:19px;color:#451122;font-size:12px;font-weight:900;box-shadow:0 8px 28px #16020ca8,0 0 22px #fba84e3f}.camera-btn{background:#321420ca;color:#ffe7b8;border:1px solid #ffd48d92;border-radius:12px;padding:8px 12px;font-size:11px;font-weight:700}.control-tip{font-size:9px;color:#ffeed4cc;max-width:170px;text-align:right;text-shadow:0 2px 5px #000b}.modal-back{z-index:35;position:fixed;inset:0;background:#100912c9;backdrop-filter:blur(13px);display:flex;align-items:center;justify-content:center;padding:17px;overflow:auto;touch-action:pan-y}.modal-card{max-height:calc(100dvh - 30px);overflow-y:auto;touch-action:pan-y;width:min(390px,100%);padding:25px 21px;background:linear-gradient(153deg,#63212a,#31121d 70%,#230c18);border:1.5px solid #f8c77c;border-radius:25px;text-align:center;box-shadow:0 15px 90px #000a,inset 0 1px #fff2;position:relative}.crest{font-size:43px;line-height:1.4;color:#f2cb78;text-shadow:0 0 28px #e29a33}.kicker{letter-spacing:.14em;color:#f9c978;font-size:10px;font-weight:800}.modal-card h1,.modal-card h2{font-family:Georgia,serif;font-size:28px;color:#ffe5aa;margin:10px 0}.modal-card p{line-height:1.72;color:#ead7cd;font-size:13px}.start-modal .intro{margin:5px 0 17px}.avatar-preview{display:flex;align-items:center;gap:12px;background:#441523;border:1px solid #be8457;border-radius:16px;padding:9px 13px;text-align:left;margin:12px 0}.avatar-preview>span{font-size:34px}.avatar-preview strong{display:block;color:#ffdfaa;font-size:14px}.avatar-preview small{display:block;color:#d7bcb8;font-size:10px}.start-modal label{display:block;text-align:left;margin:17px 0 7px;font-size:12px;font-weight:800}.start-modal select,.setting select{width:100%;border-radius:12px;border:1px solid #e5b777;background:#fff5e5;color:#4c2530;padding:12px;font-size:16px}.primary{display:block;width:100%;min-height:50px;margin:16px 0 8px;background:linear-gradient(160deg,#ffdc9a,#c3873d);color:#401221;font-weight:950;border:0;border-radius:14px;font-size:13px}.firebase-status{border:1px solid #cbaa79;color:#ffe4ae;background:#260d1be8;border-radius:10px;font-size:10px;padding:9px;line-height:1.5;margin-top:12px}.secondary-text{font-size:10px!important;color:#d9bdac!important}.setup-link{font-size:11px;color:#ffda99}.prayer-card p{font-size:15px;line-height:1.9}.fortune-card blockquote{background:#421a21;border-left:3px solid #eaba71;margin:14px 0;padding:12px 14px;font-size:14px;line-height:1.7;text-align:left}.fortune-card .explanation{font-size:12px}.fortune-category{display:inline-block;border-radius:25px;background:#93543a;padding:5px 12px;font-size:11px}.fortune-score{font-size:26px;color:#ffd58d;font-weight:900}.fortune-card small{display:block;font-size:11px;color:#eecda0;margin:5px 0}.textbtn{background:none;color:#ffdfa8;border:0;padding:8px}.xclose{border:0;background:#32131d;color:#ffdcaa;font-size:24px;line-height:1;border-radius:50%;width:33px;height:33px}.fortune-card .xclose{position:absolute;top:12px;right:12px}.side-panel{z-index:30;position:fixed;right:0;top:0;bottom:0;width:min(365px,94vw);overflow-y:auto;touch-action:pan-y;padding:calc(env(safe-area-inset-top) + 21px) 18px calc(env(safe-area-inset-bottom) + 25px);background:linear-gradient(154deg,#4d1729f8,#1d0d19f8);box-shadow:-20px 0 65px #080410ca;border-left:1px solid #c18f62}.panel-head{display:flex;justify-content:space-between;gap:15px;align-items:start}.panel-head h2{margin:7px 0 9px;font-size:21px;color:#ffe4a8}.panel-head h2 small{font-size:13px;color:#ffe7ac}.panel-note{font-size:11px;color:#dfbcb4;line-height:1.7}.roster-list{display:grid;gap:8px;margin-top:15px}.roster-item{width:100%;text-align:left;display:flex;align-items:center;gap:10px;background:#6e334024;color:#fff2da;border:1px solid #d6a16c63;border-radius:13px;padding:10px}.roster-item .avatar-emoji{font-size:22px;background:#6e313d;padding:6px;border-radius:12px}.roster-item .roster-body{flex:1;min-width:0}.roster-item b{font-size:12px;display:block}.roster-item span.status{display:block;font-size:10px;color:#debdac;margin-top:4px}.roster-item .que{font-size:11px;color:#ffd68d;text-align:right}.setting{display:flex;align-items:center;justify-content:space-between;gap:13px;padding:14px 0;font-size:13px;border-bottom:1px solid #e7aa6733}.setting select{width:185px;font-size:12px}.setting input{width:22px;height:22px;accent-color:#dca253}.setting-link{display:block;width:100%;text-align:center;color:#ffe4b0;background:#4f202a;border:1px solid #d6a16b;border-radius:12px;padding:13px;margin:14px 0;text-decoration:none;font-size:13px}.toast{position:fixed;z-index:60;left:50%;top:calc(env(safe-area-inset-top) + 78px);transform:translate(-50%,-12px);pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;background:#240a19ed;border:1px solid #edc07a;padding:12px 17px;border-radius:12px;font-size:12px;max-width:min(400px,90vw);line-height:1.6;box-shadow:0 9px 25px #0008}.toast.show{transform:translate(-50%,0);opacity:1}.load-cover{position:fixed;z-index:80;inset:0;display:grid;justify-items:center;align-content:center;background:radial-gradient(circle at 50% 38%,#752b30,#250c1e 55%,#100910);color:#ffe3ad;text-align:center;gap:8px}.lotus-load{font-size:63px}.load-cover h1{font-family:Georgia,serif;font-size:clamp(25px,5vw,43px);margin:4px}.load-cover p{font-size:12px;letter-spacing:.22em;color:#d4a476}.loadbar{width:200px;height:7px;background:#391b28;border-radius:10px;overflow:hidden;border:1px solid #ab7455}.loadbar i{display:block;width:70%;height:100%;background:linear-gradient(90deg,#b66a41,#ffe4a9);animation:loadpulse 1.8s infinite alternate}@keyframes loadpulse{to{transform:translateX(40%)}}#loadMsg{font-size:12px}.webgl-error{position:fixed;inset:10px;z-index:90;padding:35px 25px;background:#331923;color:#ffe5bf;display:grid;place-content:center;gap:12px;text-align:center;border:2px solid #c59561;border-radius:15px}.webgl-error a{color:#ffdeb1}.webgl-error button{background:#d8a55b;padding:12px;border-radius:10px;border:0}.visitor-name-tag{position:fixed;z-index:5;pointer-events:auto;transform:translate(-50%,-100%);color:#fff8e3;font-size:10px;font-weight:900;text-align:center;background:#3b1423d9;padding:3px 8px;border-radius:8px;border:1px solid #ffcf7f8c;white-space:nowrap;box-shadow:0 3px 9px #0008}.visitor-name-tag small{display:block;color:#ffe4b0;font-size:9px;font-weight:500}.visitor-name-tag:active{background:#7d3043}
@media(max-width:750px){.hud-title{display:none}.identity{min-width:0;max-width:182px}.identity .logo-small{width:30px;height:30px;font-size:19px}.identity b{font-size:10px}.identity small{font-size:10px}.hud-right{gap:5px}.iconbtn{min-width:37px;padding:8px 6px}.quest{top:calc(env(safe-area-inset-top) + 74px);width:min(187px,48vw);padding:9px 10px}.quest-head{font-size:9px}.quest-list{gap:5px;margin-top:8px}.quest-step{font-size:10px}.quest-step b{width:19px;height:19px}.controls{bottom:calc(env(safe-area-inset-bottom) + 15px)}.joystick{width:105px;height:105px}.hint{bottom:calc(env(safe-area-inset-bottom) + 145px);font-size:11px}.target-chips{left:50%;transform:translateX(-50%);right:auto;bottom:calc(env(safe-area-inset-bottom) + 197px);white-space:nowrap}.control-tip{font-size:9px;max-width:115px}.action-btn{max-width:150px;min-width:125px}.visitor-name-tag{font-size:9px}.visitor-name-tag small{font-size:8px}}
@media(max-width:390px){.identity{max-width:153px}.identity .logo-small{display:none}.quest{width:172px}.control-tip{display:none}.target-chips button{font-size:9px;padding:6px}.joystick{width:100px;height:100px}}
@media(max-height:650px){.quest-list{gap:2px}.quest{top:calc(env(safe-area-inset-top) + 63px)}.hint{bottom:125px}.target-chips{bottom:174px}.controls{bottom:12px}.joystick{width:91px;height:91px}}

@media (prefers-reduced-motion:reduce){.loadbar i{animation:none}}

#syncBadge{display:block;font-size:9px;font-weight:700;margin-top:3px}#targetChips button:disabled{opacity:.48}#game canvas{outline:none}

/* V7 CINEMATIC ART DIRECTION: texture-baked temple + WebGL character layer */
#game {background-color:#210c12; background-image:linear-gradient(90deg,rgba(23,6,11,.18),transparent 24%,transparent 76%,rgba(20,5,8,.18)),url("./assets/chanh-dien-cinematic.webp");background-size:100% 100%;background-position:center;background-repeat:no-repeat;}
#game canvas{position:absolute;inset:0;z-index:1;background:transparent!important;}
.vignette{box-shadow:inset 0 0 min(8vw,76px) #24071477;background:linear-gradient(to bottom,#14050c62,transparent 23%,transparent 72%,#19060d5f)}
.identity,.quest,.hint{background:linear-gradient(130deg,#541924de,#240b17e6);border-color:#f0c984bb;}
.hud-title b{font-family:Georgia,serif;font-weight:800;text-shadow:0 2px 12px #2d060c,0 0 8px #9c441c}
#game::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 40%,rgba(255,200,98,.04),transparent 72%)}
@media (orientation:landscape){#game{background-size:contain;background-color:#351721;background-image:url("./assets/chanh-dien-cinematic.webp");}#game::before{content:"";position:absolute;inset:-30px;z-index:0;background:url("./assets/chanh-dien-cinematic.webp") center /cover no-repeat;filter:blur(35px) brightness(.42);}}

.avatar-preview .portrait{flex:0 0 56px;width:56px;height:61px;border-radius:12px;background-color:#351421;background-size:118% auto;background-position:center 12%;background-repeat:no-repeat;border:1px solid #e3ae7b80;box-shadow:inset 0 -12px 20px #4d23333d;}
.roster-item img.avatar-emoji{width:40px;height:43px;flex:0 0 40px;object-fit:cover;object-position:center 10%;background:#4e1d30;border-radius:10px;padding:0;border:1px solid #d7b18a60;}

.model-status{background:rgba(20,40,39,.54);border:1px solid rgba(157,210,181,.55);color:#d9f3e1;border-radius:10px;font-size:11px;padding:8px 10px;line-height:1.6;margin:10px 0 0}.model-status.error{border-color:#d89e74;color:#ffe0c1}