@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:wght@400;600&display=swap');
:root{color-scheme:dark;font-family:'Be Vietnam Pro',system-ui,sans-serif;background:#0c1011;color:#f9efcf;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{height:100%;margin:0;overflow:hidden}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid #e1bb74;outline-offset:3px}
#canvas{position:fixed;inset:0;z-index:0}#canvas canvas{display:block;width:100%;height:100%;touch-action:none}
.vignette{pointer-events:none;position:fixed;inset:0;background:radial-gradient(circle at 50% 54%,transparent 25%,rgba(3,5,7,.35) 72%,rgba(3,5,7,.67) 100%);z-index:1}.grain{pointer-events:none;position:fixed;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,16,15,.48),transparent 27%,transparent 69%,rgba(4,8,9,.76));}
.topbar{position:fixed;z-index:4;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;padding:24px 34px}.brand{display:flex;align-items:center;gap:12px;min-width:220px}.brand-symbol{font-size:27px;color:#d7b26c;border:1px solid #b5965b88;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;background:#301f1590}.brand strong{display:block;font-size:12px;letter-spacing:.24em;font-weight:700}.brand span{display:block;color:#c5b999;font-size:10px;margin-top:6px;letter-spacing:.1em}.status{margin-left:auto;border:1px solid #d6c39733;padding:9px 14px;background:#0b110f8a;border-radius:99px;font-size:11px;color:#ded2b6;display:flex;align-items:center;gap:9px;white-space:nowrap;backdrop-filter:blur(9px)}.status-dot{width:7px;height:7px;border-radius:50%;background:#ceac68;box-shadow:0 0 10px #ceac68}.icon-btn{color:#e6cc98;font-weight:700;border:1px solid #c7af763d;border-radius:50%;width:34px;height:34px;background:#10191a90}
.heading{position:fixed;z-index:3;top:108px;width:100%;text-align:center;pointer-events:none;transition:opacity .45s}.eyebrow{display:flex;justify-content:center;align-items:center;gap:14px;color:#d8b978;font-size:10px;letter-spacing:.34em;font-weight:700}.line{width:20px;height:1px;background:#ba995d}h1{font-family:Georgia,'Playfair Display',serif;font-weight:400;letter-spacing:.02em;font-size:clamp(29px,3vw,46px);margin:10px 0 3px;text-shadow:0 2px 22px #000c}.heading p{margin:0;font-size:11px;color:#dacfb9;letter-spacing:.06em}
.side-note{position:fixed;z-index:2;left:35px;top:45%;display:flex;flex-direction:column;gap:14px;align-items:center;color:#e0c087}.note-vert,.note-vert-muted{font-size:10px;letter-spacing:.23em;writing-mode:vertical-rl}.note-vert-muted{color:#ac9d7c}.side-rule{height:36px;width:1px;background:#b29a6b}
.tip{position:fixed;z-index:3;bottom:114px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#0b1112a8;backdrop-filter:blur(10px);border:1px solid #b5a18034;border-radius:90px;padding:9px 17px;color:#d0c4ac;font-size:11px;white-space:nowrap}.tip-mark{color:#dcb96c}
.toolbar{position:fixed;z-index:4;bottom:max(24px, env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;border:1px solid #cab98c40;border-radius:22px;padding:9px 12px;background:linear-gradient(100deg,#141d1bcf,#101514ed);box-shadow:0 12px 50px #0008;backdrop-filter:blur(18px)}.tool{color:#e5d9bf;border:0;background:transparent;min-width:93px;display:flex;flex-direction:column;align-items:center;gap:5px;border-radius:12px;padding:9px 10px;font-size:10px;transition:.18s}.tool:hover,.tool.active{background:#dabb8330;color:#ffe4aa}.tool-icon{font-size:21px;line-height:1.1;height:25px;font-family:Georgia,serif}.tool-separator{height:36px;width:1px;background:#baa57745;margin:0 5px}.toast{position:fixed;z-index:5;bottom:135px;left:50%;transform:translate(-50%,10px);background:#15221de6;box-shadow:0 14px 50px #0007;border:1px solid #e0b87975;border-radius:16px;color:#fce7ba;padding:12px 20px;font-size:12px;text-align:center;opacity:0;pointer-events:none;transition:.3s;max-width:min(90vw,480px)}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal{position:fixed;inset:0;background:#020504b8;z-index:7;display:grid;place-items:center;padding:20px;backdrop-filter:blur(7px)}.is-hidden{display:none}.modal-card{position:relative;width:min(450px,95vw);padding:35px 34px;background:#16221f;border:1px solid #bba57566;border-radius:22px;box-shadow:0 20px 65px #0009}.modal-card h2{font-family:Georgia,serif;font-size:28px;font-weight:400}.modal-card p{line-height:1.8;font-size:13px;color:#d5ccb9}.modal-card code{color:#f3c676}.small-heading{font-size:10px;letter-spacing:.28em;color:#d5b575}.close-btn{position:absolute;right:18px;top:13px;background:transparent;color:#e6d9bf;border:0;font-size:26px}.primary-btn{border:1px solid #d3b478;color:#251d11;background:#e2c186;padding:11px 23px;border-radius:12px;font-weight:700;margin-top:10px}
.loading{position:fixed;inset:0;background:#101717;z-index:10;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:18px;color:#ddc389;font-size:12px;letter-spacing:.15em;transition:opacity .8s}.loading.done{opacity:0;pointer-events:none}.loading-ring{width:34px;height:34px;border:2px solid #d6bb8060;border-top-color:#e5c180;border-radius:50%;animation:spin 1.3s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:680px){.topbar{padding:14px 13px}.brand{min-width:0;gap:8px}.brand-symbol{width:35px;height:35px;font-size:20px}.brand strong{font-size:9px;letter-spacing:.13em}.brand span{font-size:9px}.status{font-size:9px;max-width:145px;overflow:hidden;text-overflow:ellipsis;padding:8px 9px}.heading{top:91px}.heading p{font-size:10px}.side-note{display:none}.tip{font-size:9px;white-space:normal;max-width:92vw;width:max-content;bottom:111px;text-align:center}.toolbar{width:calc(100% - 20px);max-width:480px;justify-content:space-evenly;padding:7px 5px;gap:0;bottom:max(13px,env(safe-area-inset-bottom));border-radius:18px}.tool{min-width:0;flex:1;padding:8px 2px;font-size:9px}.tool-icon{font-size:20px}.tool-separator{margin:0 2px}.toast{bottom:125px}.modal-card{padding:26px 23px}}
@media(max-height:590px){.heading{top:67px}.tip{display:none}.toolbar{bottom:8px}.topbar{padding-top:9px}}

/* CHÙA ONLINE v0.2 – cảnh quan, bảng lựa chọn ngày đêm và âm thanh. */
.settings-toggle{font-size:18px;line-height:1}
.settings-panel{position:fixed;right:26px;top:90px;z-index:5;width:280px;padding:17px;border-radius:17px;border:1px solid #d6bc874f;background:linear-gradient(135deg,#1b2927e8,#121e20f0);box-shadow:0 14px 44px #0006;backdrop-filter:blur(18px);transition:opacity .22s,transform .22s;max-height:calc(100dvh - 195px);overflow-y:auto;overscroll-behavior:contain}
.settings-panel.collapsed{opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden}
.settings-heading{font-weight:700;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.15em;color:#e0c58b;gap:8px;margin-bottom:11px}
.settings-heading span+span{color:#e5dbca;letter-spacing:0;font-size:10px;font-weight:400}
.segmented{display:flex;gap:5px;padding:4px;border-radius:12px;border:1px solid #d6bc873d;background:#050b0c5e}
.time-btn{border:0;border-radius:9px;background:transparent;color:#ded2b4;padding:10px 6px;font-size:11px;flex:1;white-space:nowrap}
.time-btn.active{background:#d6b474;color:#211c12;font-weight:700}
.audio-heading{margin-top:19px}
.audio-options{display:grid;grid-template-columns:1fr;gap:6px}
.audio-btn{display:flex;gap:10px;align-items:center;text-align:left;padding:9px 12px;color:#f0dfbd;font-size:11px;border-radius:10px;border:1px solid #d6bc872b;background:#0c1515a3;transition:background .2s}
.audio-btn span{font-size:18px;width:24px;text-align:center;color:#d2ae6d}
.audio-btn:hover,.audio-btn.active{background:#cba96330;border-color:#f0c88096}
.volume-row{display:flex;align-items:center;gap:9px;margin-top:14px}.volume-row label{font-size:10px;white-space:nowrap;color:#cfc6b4}.volume-row input{min-width:0;flex:1;accent-color:#d8b579;height:18px}.volume-row button{white-space:nowrap;background:#28332b;border:1px solid #d6bc8741;border-radius:8px;color:#e2c78e;font-size:9px;padding:7px}
.settings-footnote{margin:10px 0 0;color:#a9ac9e;font-size:9px}.settings-footnote code{color:#e3c78b}
.walk-hint{position:fixed;z-index:3;left:50%;bottom:166px;transform:translateX(-50%);font-size:10px;color:#f4e1b8;padding:9px 17px;border-radius:50px;border:1px solid #c6aa6a55;background:#131c1acc;white-space:nowrap;pointer-events:none}
.mobile-dpad{display:none}
/* Thêm hai chế độ góc nhìn nên toolbar rộng hơn v0.1. */
.toolbar{padding:8px 9px;gap:1px}.tool{min-width:76px;padding:8px 8px}.tool-icon{height:23px;font-size:19px}.tip{bottom:132px}
@media(max-width:860px){
 .settings-panel{right:11px;top:69px;width:min(278px,calc(100vw - 22px));max-height:calc(100dvh - 168px)}
 .topbar{padding:14px 12px;gap:7px}.brand{min-width:0}.status{font-size:9px;padding:7px 8px;max-width:170px}
 .toolbar{width:calc(100% - 14px);max-width:580px;padding:6px 3px;bottom:max(10px,env(safe-area-inset-bottom))}
 .tool{min-width:0;flex:1;padding:8px 1px;font-size:9px}.tool-icon{font-size:18px}.tool-separator{margin:0 2px}
 .tip{bottom:112px}.walk-hint{display:none}
 .mobile-dpad:not(.is-hidden){display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,45px);grid-template-areas:". up ." "left down right";gap:4px;position:fixed;z-index:5;bottom:max(99px,calc(env(safe-area-inset-bottom) + 90px));left:16px;touch-action:none}
 .dpad{border:1px solid #f4d8a170;border-radius:13px;background:#15231ed9;color:#f5dda9;font-size:23px;font-family:system-ui,sans-serif;touch-action:none;user-select:none;box-shadow:0 5px 17px #0007}
 .dpad.pressed{background:#a78956e3;color:#171f1b}.dpad.up{grid-area:up}.dpad.down{grid-area:down}.dpad.left{grid-area:left}.dpad.right{grid-area:right}
 .tip:has(+ .toast){max-width:calc(100vw - 165px);left:auto;right:12px;transform:none;text-align:right}
 .status{display:none}
}
@media(max-width:400px){
 .brand strong{font-size:9px}.brand span{font-size:8px}.topbar{gap:6px}.icon-btn{width:30px;height:30px}
 .tool{font-size:8px}.tool-icon{font-size:17px}.tip{display:none}.toolbar{bottom:max(7px,env(safe-area-inset-bottom))}
 .mobile-dpad:not(.is-hidden){bottom:95px}
}
@media(max-height:610px){.settings-panel{top:62px;max-height:calc(100dvh - 125px)}.tip,.walk-hint{display:none}}


/* CHÙA ONLINE v0.3 – bảng âm lượng, phát lặp và chú giải điều khiển hai góc. */
.volume-row{gap:10px;margin-top:15px}
.volume-row label{min-width:54px}
.volume-row output{min-width:38px;text-align:right;color:#f0d69a;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums}
.playback-row{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 0 0;border-top:1px solid #d6bc8725}
.loop-control{display:flex;align-items:center;gap:7px;color:#e7d8b5;font-size:11px;cursor:pointer;user-select:none}
.loop-control input{accent-color:#d8b579;width:16px;height:16px;margin:0;cursor:pointer}
.loop-symbol{font-size:18px;line-height:1;color:#e7c887}
#loop-label{font-size:10px;color:#f0d69a;margin-left:auto}
#audio-stop{white-space:nowrap;background:#28332b;border:1px solid #d6bc8741;border-radius:8px;color:#e2c78e;font-size:10px;padding:8px 10px}
.control-hint{position:fixed;bottom:max(129px,calc(env(safe-area-inset-bottom) + 111px));z-index:3;min-width:216px;padding:12px 14px;border:1px solid #d6bc8740;border-radius:14px;background:linear-gradient(140deg,#13201bcf,#0c1616df);backdrop-filter:blur(11px);color:#e5d7bc;pointer-events:none;box-shadow:0 10px 28px #0004}
.control-hint-left{left:28px}
.control-hint-right{right:28px}
.control-hint-title{display:flex;align-items:center;gap:7px;justify-content:space-between;color:#e4bf7f;font-size:10px;font-weight:700;letter-spacing:.10em;white-space:nowrap}
.control-hint-title span{font-size:9px;font-weight:400;letter-spacing:normal;color:#b7ad9b}
.key-map{display:flex;flex-direction:column;gap:3px;align-items:center;width:92px;margin:10px auto 7px}
.key-row{display:flex;justify-content:center;gap:4px}
.key-row kbd{display:grid;place-items:center;width:27px;height:24px;border:1px solid #c8b08472;background:#3b352be6;border-radius:5px;color:#ffe8ad;font-family:inherit;font-size:11px;font-weight:700;box-shadow:inset 0 -2px #0006}
.control-hint p{font-size:9px;color:#dfd4bc;text-align:center;margin:6px 0 0;white-space:nowrap}
.control-hint p span{color:#c2b397}
.mouse-hint-row{display:flex;align-items:center;gap:10px;font-size:10px;margin-top:10px;color:#e5d9c2;white-space:nowrap}
.mouse-key{width:46px;display:inline-flex;align-items:center;justify-content:center;padding:6px 4px;border:1px solid #d3b7836e;background:#4a412e96;border-radius:8px 8px 6px 6px;font-size:9px;font-weight:700;color:#ffdf9b}
.mouse-key-left{border-top-left-radius:14px}
.mouse-key-right{border-top-right-radius:14px}
/* Không hiển thị hai khung chỉ dẫn desktop trên điện thoại. */
@media(min-width:861px){.tip{display:none}}
@media(max-width:1070px) and (min-width:861px){
  .control-hint{bottom:max(145px,calc(env(safe-area-inset-bottom) + 125px));min-width:195px;padding:10px}
  .control-hint-left{left:14px}.control-hint-right{right:14px}
  .control-hint p span{display:none}
}
@media(max-width:860px){.control-hint{display:none}}
@media(max-height:620px){.control-hint{bottom:94px;transform:scale(.87);transform-origin:bottom left}.control-hint-right{transform-origin:bottom right}}


/* v0.4 - Điều khiển chuột ở Đi dạo, thích ứng màn hình/PWA. */
#canvas{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;touch-action:none}
#canvas canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
#canvas canvas.walking-cursor{cursor:grabbing}
[hidden]{display:none!important}
.install-btn{font-weight:700;font-size:21px;flex-shrink:0}
.network-note{position:fixed;top:calc(64px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);background:#4b3920ed;color:#fff0c6;border:1px solid #e7c07b8c;border-radius:12px;padding:8px 14px;font-size:11px;z-index:6;max-width:95vw;text-align:center}
.control-hint-right{min-width:254px}
.control-hint-right .mouse-hint-row{white-space:normal;line-height:1.35}
button,input{touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:3px solid #f3cc79;outline-offset:2px}
@media(hover:none),(pointer:coarse){
 .toolbar{backdrop-filter:blur(10px)}
 .tool{min-height:51px}
 .time-btn,.audio-btn{min-height:44px}
 .dpad{min-height:46px;min-width:46px}
}
@media(max-width:860px){
 .topbar{padding-top:max(10px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-left:max(12px,env(safe-area-inset-left))}
 .settings-panel{top:calc(max(10px,env(safe-area-inset-top)) + 54px);right:max(10px,env(safe-area-inset-right));max-height:min(65dvh,510px);overscroll-behavior:contain}
 .toolbar{left:50%;right:auto;transform:translateX(-50%);bottom:max(8px,env(safe-area-inset-bottom));padding:7px max(4px,env(safe-area-inset-left));width:calc(100% - 12px);max-width:none;overflow-x:auto;scrollbar-width:none;justify-content:flex-start;white-space:nowrap}
 .toolbar::-webkit-scrollbar{display:none}
 .tool{flex:1 0 61px;font-size:10px;min-height:54px;padding:7px 3px}
 .tool-icon{font-size:19px}
 .mobile-dpad:not(.is-hidden){bottom:calc(max(8px,env(safe-area-inset-bottom)) + 76px);left:max(12px,env(safe-area-inset-left));grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,48px)}
 .tip{bottom:calc(max(8px,env(safe-area-inset-bottom)) + 84px);font-size:11px}
 .heading{top:calc(83px + env(safe-area-inset-top));pointer-events:none}
 .heading h1{font-size:clamp(23px,6vw,34px)}
 .modal-card{max-height:calc(100dvh - 36px);overflow-y:auto;padding:25px 22px}
 .modal-card p{font-size:13px}
}
@media(max-width:390px){
 .toolbar{padding:5px 2px;justify-content:flex-start}
 .tool{flex:0 0 62px;min-width:62px;font-size:10px}
 .tool-separator{flex:0 0 1px}
 .mobile-dpad:not(.is-hidden){grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,45px)}
 .brand span{font-size:9px}
}
@media(max-height:520px) and (orientation:landscape){
 .topbar{padding-top:5px;padding-bottom:3px}
 .heading,.tip,.control-hint,.side-note{display:none}
 .toolbar{bottom:max(4px,env(safe-area-inset-bottom));max-width:min(600px,calc(100% - 300px));min-height:52px;left:50%;transform:translateX(-50%)}
 .tool{min-height:46px;font-size:9px}
 .tool-icon{font-size:16px;height:18px}
 .settings-panel{top:48px;max-height:calc(100dvh - 65px)}
 .mobile-dpad:not(.is-hidden){bottom:max(8px,env(safe-area-inset-bottom));left:max(7px,env(safe-area-inset-left));grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,43px)}
}
@media(prefers-reduced-motion:reduce){
 .loading-ring{animation:none}
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* v0.4.1: Popup chuỗi ngọc độc lập, không ảnh hưởng camera/người đi dạo. */
.beads-modal{z-index:20;overflow-y:auto;overscroll-behavior:contain}
.beads-card{width:min(660px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow-y:auto;padding:25px 26px 19px;background:#17251f}
.beads-card h2{font-size:clamp(23px,3.5vw,32px);margin:10px 0 3px;color:#f8e4b6}
.beads-instruction{margin:6px 0 12px!important;font-size:12px!important;line-height:1.55!important}
#beads-canvas{display:block;width:100%;height:clamp(225px,43dvh,430px);touch-action:none;cursor:grab;border-radius:16px;border:1px solid #e7ddc44f;background:#ebece0}
#beads-canvas:active{cursor:grabbing}
.beads-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:11px 0 8px}
.beads-stat-grid>div{background:#0e1815;border:1px solid #ac9b7247;border-radius:11px;text-align:center;padding:9px 3px 8px;min-width:0}
.beads-stat-grid span,.beads-stat-grid small{display:block;color:#c8bb96;font-size:9px;letter-spacing:.09em}
.beads-stat-grid strong{display:block;color:#ffdf94;font-size:clamp(19px,3vw,28px);font-variant-numeric:tabular-nums;margin:4px 0;white-space:nowrap}
.beads-stat-grid small{color:#b8c2b7;font-size:10px}
.beads-actions{display:flex;align-items:center;gap:8px;margin-top:11px;flex-wrap:wrap}
.beads-actions button{border-radius:10px;padding:10px 13px;font-weight:700;font-size:11px;white-space:nowrap;min-height:39px}
.beads-secondary{background:#253b32;border:1px solid #d2be8c55;color:#e9d8b2}
.beads-primary{background:#d5b77a;border:1px solid #d5b77a;color:#1d261f;flex:1}
.beads-reset{background:transparent;border:1px solid #a6b4a352;color:#bdc9bc}
.beads-fixed-note{text-align:center;font-size:10px;color:#a6bcae;margin-top:13px}
@media(max-width:680px){
  .beads-card{padding:19px 14px 12px}
  #beads-canvas{height:clamp(210px,38dvh,370px)}
  .beads-stat-grid strong{font-size:19px}
  .beads-stat-grid span{font-size:8px}
  .beads-actions{gap:6px}
  .beads-actions button{flex:1 1 auto;font-size:10px;padding:9px 8px}
}
@media(max-height:480px) and (orientation:landscape){
  .beads-card{padding:12px 16px}
  .beads-card h2{margin:3px 0;font-size:20px}
  .beads-instruction{margin:3px 0 6px!important}
  #beads-canvas{height:128px;min-height:128px}
  .beads-instruction{display:none}
  .beads-fixed-note{display:none}
  .beads-actions{margin-top:5px}
  .beads-actions button{padding:6px 9px;min-height:31px}
  .beads-stat-grid strong{font-size:16px}
  .beads-stat-grid{margin:5px 0}
  .beads-stat-grid>div{padding:5px 2px}
}

/* v0.4.2 - Hiện diện online, tách khỏi các tính năng 3D v0.4.1 */
.online-count{
 display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
 padding:8px 12px;border:1px solid rgba(180,229,182,.34);border-radius:999px;
 background:rgba(17,38,27,.86);color:#c8f2cc;font-size:11px;font-weight:700;
 white-space:nowrap;letter-spacing:.01em;box-shadow:0 3px 12px rgba(0,0,0,.2);
 font-variant-numeric:tabular-nums;
}
.online-count.online-error{color:#f3d3a0;border-color:rgba(237,194,111,.3)}
.join-modal{z-index:45;background:rgba(5,13,14,.86);backdrop-filter:blur(8px)}
.join-card{max-width:min(420px,calc(100vw - 24px));text-align:left;padding:27px 28px 24px}
.join-card h2{margin:8px 0 10px}
.join-card label{display:block;margin:17px 0 8px;color:#efd7a4;font-size:12px;font-weight:700}
.join-card input{
 box-sizing:border-box;width:100%;min-height:46px;border-radius:11px;padding:10px 13px;
 background:rgba(250,246,230,.95);color:#16211e;border:1px solid #e5d6ad;
 font:inherit;font-size:16px;
}
.join-card input:focus{outline:3px solid #f1ce83;outline-offset:2px}
.join-card .primary-btn{width:100%;min-height:46px;margin-top:6px}
.join-card .primary-btn:disabled{opacity:.7;cursor:wait}
.join-card .join-error{color:#f7bfb2;font-size:12px;min-height:18px;margin:8px 0 1px}
.join-card .join-privacy{font-size:11px;line-height:1.5;color:#b8b9aa;margin:14px 0 0;text-align:center}
@media(max-width:860px){
 .topbar{gap:7px}
 .online-count{margin-left:auto;padding:7px 10px;font-size:10px}
 .status{display:none}
}
@media(max-width:400px){
 .online-count{font-size:9px;padding:7px 6px}
 .brand span{display:none}
 .join-card{padding:24px 19px}
}
@media(max-height:520px) and (orientation:landscape){
 .join-card{max-height:96dvh;overflow-y:auto;padding:15px 20px}
 .join-card p{margin:5px 0}
 .join-card h2{margin:3px 0 5px}
}

/* CHÙA ONLINE Version 1 – nhãn thiền, ghi nhận tác giả và công cụ. */
.meditation-mantra{position:fixed;z-index:5;left:50%;bottom:calc(124px + env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:88vw;padding:12px 20px;text-align:center;background:rgba(22,32,27,.92);border:1px solid #d8b77f88;border-radius:16px;box-shadow:0 12px 30px #0008;color:#ffe5ae;font-size:13px;font-weight:700;pointer-events:none}
.app-credits{border-top:1px solid #c9ab7440;margin-top:18px;padding-top:13px;font-size:11px;color:#e4c38a;text-align:center}
.app-credits strong{letter-spacing:.12em}
.app-credits p{font-size:11px!important;margin:7px 0 0!important;color:#e4d8c0!important}
.credit-line{border-top:1px solid #c6a96c33;padding-top:10px;margin:14px 0 0!important;font-size:10px!important;line-height:1.5!important;color:#d6ba80!important;text-align:center}
@media(max-width:860px){.meditation-mantra{bottom:calc(96px + env(safe-area-inset-bottom));font-size:11px;padding:9px 12px}.tool[data-action="meditate"]{min-width:72px}}
@media(max-height:520px) and (orientation:landscape){.meditation-mantra{bottom:65px;font-size:10px}}