@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');
:root{--ink:#20221e;--muted:#77766f;--paper:#f7f4ee;--purple:#5f477d;--rose:#af5c4b;--line:rgba(42,36,35,.14)}
*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}body{font-family:'IBM Plex Sans Thai','DM Sans',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.hidden{display:none!important}
#app{display:flex;height:100dvh;flex-direction:column;overflow:hidden}.header{height:88px;flex:0 0 88px;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 36px;background:#faf8f3;border-bottom:1px solid #dedad2;position:relative;z-index:5}.brand{display:flex;align-items:center;gap:14px;min-width:0}.brand-mark{height:52px;width:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#513b6d;border-radius:2px;color:#fff;line-height:1.12;letter-spacing:.05em}.brand-mark span{font-family:'DM Sans',sans-serif;font-weight:700;font-size:17px}.brand-mark small{font-family:'DM Sans',sans-serif;letter-spacing:.3em;font-size:8px;margin-left:3px}.brand-en{font:600 12px 'DM Sans',sans-serif;letter-spacing:.15em;white-space:nowrap}.brand-en b{font-weight:700;color:var(--purple)}.brand-th{font-size:12px;margin-top:5px;color:#77746e;white-space:nowrap}.header-actions{display:flex;gap:14px;align-items:center}.mode-chip,.visitors-chip{display:flex;align-items:center;gap:8px;font-size:12px;white-space:nowrap}.mode-chip{color:#6f7b6f}.status-dot{width:7px;height:7px;background:#c9a95f;border-radius:50%}.mode-chip.connected .status-dot{background:#48a67c;box-shadow:0 0 0 4px #48a67c22}.visitors-chip{border-left:1px solid var(--line);padding-left:15px}.visitors-chip b{font:700 15px 'DM Sans';font-variant-numeric:tabular-nums}.sep{color:#bdb8ad;margin:0 2px}.visitor-icon{font-size:17px;color:var(--purple)}.header-btn{border:1px solid #dcd7ce;background:transparent;color:#302e2b;padding:11px 16px;display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;border-radius:3px;white-space:nowrap;transition:background .2s}.header-btn:hover{background:#eeeae3}.header-btn.primary{color:#fff;background:#58406f;border-color:#58406f}.header-btn.primary:hover{background:#38274e}
.main{position:relative;flex:1;min-height:0;overflow:hidden;background:#d7d4c9}.stage{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;outline:none;background:linear-gradient(#c6d0d0,#e8d6b7)}.stage:active{cursor:grabbing}.sky{position:absolute;inset:0;background:linear-gradient(180deg,#cdd8d3 0%,#ebe4d1 55%,#aeb7a5 100%);transition:background .5s}.stage[data-light="evening"] .sky{background:linear-gradient(180deg,#b6a9ac,#e6bfa5 54%,#c4b29c)}.stage[data-light="gallery"] .sky{background:linear-gradient(180deg,#aab0b6,#e8e7e0 54%,#aaa6a2)}.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 52%,transparent 38%,#1a1a1930 100%);pointer-events:none;z-index:3}.scene-grain{position:absolute;inset:0;opacity:.08;pointer-events:none;z-index:3;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.27'/%3E%3C/svg%3E")}.world-viewport{position:absolute;inset:0;perspective:950px;perspective-origin:50% 50%;overflow:hidden;transform-style:preserve-3d}.world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}.world>*{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}
.room-floor,.garden-floor{background:repeating-linear-gradient(90deg,#bf9b70 0,#bf9b70 2px,#ddc6a2 2px,#e5d0b0 83px,#cfb391 84px,#cfb391 86px);box-shadow:inset 0 0 210px #5b422355}.room-floor[data-floor="concrete"]{background:repeating-linear-gradient(0deg,#b8b8b3,#cfcfc8 140px,#b2b2ae 143px)}.room-floor[data-floor="cream"]{background:repeating-linear-gradient(90deg,#e3d9c5,#f4ead8 175px,#d5cbbb 178px)}.garden-floor{background:radial-gradient(circle at 20% 30%,#94a57b,#5b7950 80%);box-shadow:inset 0 0 140px #30432c66}.garden-path{background:repeating-linear-gradient(0deg,#d8ccb6 0,#e2d5c0 80px,#bcb2a5 83px);border:2px solid #baaf99}.roof{background:linear-gradient(120deg,#d9d6ca,#f2eddd);box-shadow:0 8px 40px #0000001a}.wall-surface{background:linear-gradient(110deg,#d8d2c5 0%,#f5f1e9 19%,#f7f4ee 75%,#d6d1c6 100%);border-top:3px solid #d3cbbb;box-shadow:inset 0 0 60px #98867524;overflow:visible}.wall-surface[data-wall="lavender"]{background:linear-gradient(110deg,#a89bb8,#ddd3e4 23%,#e2dbea 75%,#a497b6)}.wall-surface[data-wall="sage"]{background:linear-gradient(110deg,#a4afa0,#e5eadf 23%,#e7ecdf 75%,#a9b4a4)}.wall-surface[data-wall="stone"]{background:linear-gradient(110deg,#9d9b96,#dddcd6 23%,#e2e0db 75%,#a7a59f)}.wall-trim{background:linear-gradient(90deg,#867260,#bba282,#8b7761);box-shadow:0 3px 9px #0003}.architecture-post{background:linear-gradient(90deg,#9e8c7f,#efdfca 45%,#aa947f);box-shadow:10px 5px 18px #25170b30}.ceiling-beam{background:linear-gradient(#6f5e50,#b09983,#826f60)}.portal-banner{display:flex;align-items:center;justify-content:center;background:#503a6d;color:#fff;font:600 24px 'DM Sans',sans-serif;letter-spacing:.25em;text-align:center;box-shadow:0 2px 14px #0004}.gallery-sign{display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;text-align:center;background:#f9f5ed;border:1px solid #cfbfa8;color:#574967;box-shadow:0 8px 24px #0002}.gallery-sign strong{font:700 31px 'DM Sans',sans-serif;letter-spacing:.12em}.gallery-sign small{font-size:13px;letter-spacing:.02em}.gallery-sign i{font-style:normal;font:500 11px 'DM Sans';letter-spacing:.4em;color:#b39b7f}.gallery-sign .sign-rule{width:70%;height:1px;background:#d4bca4;margin:10px}.frame{border:9px solid #9b7751;background:#f7f0df;padding:8px;box-shadow:0 13px 21px #0004, inset 0 0 1px 2px #ceb58a;cursor:pointer;transition:filter .2s}.frame:focus-visible{outline:6px solid #705593}.frame:hover{filter:brightness(1.1)}.frame .art-mat{height:100%;width:100%;background:#eee7da;padding:9px;box-shadow:inset 0 0 0 1px #aaa396}.frame img{height:100%;width:100%;object-fit:cover;display:block;box-shadow:0 0 0 1px #c7c4bb}.frame-caption{position:absolute;top:calc(100% + 17px);left:0;right:0;color:#55504a;background:#ede8decc;padding:4px 8px;line-height:1.6;text-align:center;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 1px 4px #0002}.frame-caption b{font-weight:700}.frame-caption span{font-size:10px;color:#77706d}.gallery-spot{height:16px;border-radius:50%;background:radial-gradient(ellipse,#ffffd8c7,transparent 68%);filter:blur(3px);pointer-events:none}.art-lamp{background:linear-gradient(90deg,#4c443b,#fff3d4,#65594d);box-shadow:0 2px 8px #0003}.panel-face{background:linear-gradient(100deg,#e5ddd1,#fbf9f4 35%,#ded8cb);border:7px solid #9b8771;box-shadow:13px 8px 25px #3526154d}.pillar{background:linear-gradient(90deg,#aba18f,#eee5d6 50%,#bcb3a5)}.plant-leaves{border-radius:50%;background:radial-gradient(circle at 28% 28%,#a8bd86,#54764c 47%,#294a35 79%);box-shadow:9px 11px 20px #18311a33}.plant-pot{background:linear-gradient(90deg,#7a604c,#c7a887 47%,#765b46);border-radius:5px 5px 18px 18px;box-shadow:7px 9px 13px #0002}.tree-trunk{background:linear-gradient(90deg,#594533,#95765a 45%,#4f382c);border-radius:10px}.tree-crown{border-radius:50%;background:radial-gradient(circle at 28% 30%,#9eb77b,#668753 49%,#2b4f38 80%);box-shadow:9px 14px 23px #1c3a2850}.plaque{background:#604c75;color:#fff;display:flex;align-items:center;justify-content:center;text-align:center;letter-spacing:.1em;box-shadow:5px 5px 10px #0003;font-size:15px}.outside-lettering{display:flex;align-items:center;justify-content:center;color:#f0ece7;font:700 40px 'DM Sans';letter-spacing:.08em;text-shadow:2px 4px 6px #0006}.avatar{width:60px;height:145px;overflow:visible;filter:drop-shadow(5px 8px 5px #0004);pointer-events:none}.avatar-head{height:39px;width:39px;border-radius:50%;background:#ddad88;position:absolute;left:11px;top:13px;box-shadow:inset -8px 3px 0 #a87c5b40}.avatar-hair{height:22px;width:43px;border-radius:24px 24px 8px 8px;background:#312a2b;position:absolute;left:9px;top:7px}.avatar-body{position:absolute;top:53px;left:2px;width:56px;height:66px;background:var(--avatar-color,#685483);border-radius:14px 14px 8px 8px}.avatar-legs{position:absolute;bottom:0;left:13px;width:36px;height:28px;background:linear-gradient(90deg,#313744 45%,transparent 45%,transparent 55%,#313744 55%)}.avatar-name{position:absolute;bottom:154px;left:50%;transform:translateX(-50%);background:#fbf9f1;color:#393038;font-size:13px;white-space:nowrap;padding:4px 11px;border-radius:20px;box-shadow:0 2px 8px #0002;border:1px solid #fff}
.overlay-ui{position:absolute;z-index:4;pointer-events:none}.floating-intro{top:6.8%;left:6%;max-width:460px;padding:25px 24px 23px 0;text-shadow:0 1px 12px #ede7dbaa}.floating-intro:before{content:'';position:absolute;inset:0 -20px -15px -20px;background:linear-gradient(90deg,#f4eee3d9 0%,#f4eee3a0 60%,transparent);border-radius:0 30px 30px 0;z-index:-1;filter:blur(10px)}.eyebrow{font:700 10px 'DM Sans','IBM Plex Sans Thai',sans-serif;letter-spacing:.22em;color:#7f6258;display:flex;align-items:center;gap:9px}.red-line{width:22px;height:2px;background:#a9655a;display:inline-block}.floating-intro h1{font-size:clamp(29px,3.1vw,48px);line-height:1.36;letter-spacing:-.045em;margin:19px 0 10px;font-weight:600}.floating-intro em{font-weight:400;font-style:normal;color:#624779}.floating-intro p{font-size:13px;line-height:1.95;color:#5f5a56;margin:0}.floating-rule{height:1px;width:80%;background:#aea399;margin:20px 0 13px;opacity:.6}.mini-facts{display:flex;gap:17px;font-size:11px;color:#665d55}.right-hud{right:35px;top:40px;background:#faf8efed;border:1px solid #ffffff77;box-shadow:0 8px 30px #00000019;padding:18px 22px;min-width:200px;backdrop-filter:blur(10px)}.hud-label{font:700 9px 'DM Sans';color:#9b847a;letter-spacing:.19em}.hud-title{font-size:17px;font-weight:600;margin:6px 0 3px}.hud-sub{font-size:11px;color:#7e7871}.compass{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ddd5c8;margin-top:13px;padding-top:10px;font-size:10px;color:#78736b}.compass-rose{height:34px;width:34px;border-radius:50%;border:1px solid #ccc1b2;display:grid;place-items:center;color:#6e4c7d;font-size:24px}.compass-rose i{font-style:normal;transition:transform .08s}.bottom-hud{bottom:25px;left:50%;transform:translateX(-50%);display:flex;gap:12px;align-items:center}.control-info{background:#f8f7f0ed;border:1px solid #ffffff70;box-shadow:0 6px 28px #0002;padding:11px 16px;display:flex;gap:12px;align-items:center;font-size:11px;color:#55514d;white-space:nowrap;backdrop-filter:blur(10px)}.key-group{display:flex;gap:3px}kbd{background:#fff;border:1px solid #c8c1b7;border-bottom-width:2px;box-shadow:0 1px 3px #0001;padding:1px 5px;color:#5c5261;border-radius:3px;font-size:10px;font-family:'DM Sans'}.info-divider{width:1px;height:15px;background:#cec7bd}.mouse-symbol{color:#604779;font-size:18px}.circular-button{pointer-events:auto;border:1px solid #ffffff70;background:#f8f7f0ed;border-radius:50%;width:41px;height:41px;color:#594373;box-shadow:0 6px 28px #0002;font:700 17px 'DM Sans'}.crosshair{top:50%;left:50%;font-size:17px;opacity:.35;color:#fff;text-shadow:0 1px 3px #000;transform:translate(-50%,-50%)}.mobile-joystick{bottom:30px;left:25px;display:none;flex-direction:column;align-items:center;gap:4px}.mobile-joystick div{display:flex;gap:4px}.mobile-joystick button{pointer-events:auto;width:50px;height:50px;background:#fff9;border:1px solid #fff;border-radius:10px;color:#544067;box-shadow:0 3px 7px #0002;touch-action:none;user-select:none}
.dialog{max-width:min(930px,96vw);max-height:90dvh;padding:0;border:0;background:#faf8f2;box-shadow:0 25px 100px #0006;color:#2e2b28;overflow:auto}.dialog::backdrop{background:rgba(28,24,31,.64);backdrop-filter:blur(7px)}.welcome-dialog{width:min(900px,95vw);overflow:hidden}.welcome-panel{display:grid;grid-template-columns:39% 61%;min-height:510px}.welcome-pattern{background:radial-gradient(circle at 30% 18%,#b89bc7 0 7%,transparent 8%),radial-gradient(circle at 73% 67%,#b9a1c9 0 13%,transparent 13.3%),linear-gradient(138deg,#4c3265,#73538c 62%,#c5a1aa);position:relative;overflow:hidden}.welcome-pattern:before{content:'';position:absolute;width:280px;height:330px;top:12%;left:22%;border:35px solid #c9a9c2;border-right-color:#e3c6bc;border-bottom-color:#4a305f;transform:rotate(-22deg);box-shadow:15px 20px 0 #3b294e77}.welcome-pattern:after{content:'AWP  ·  ART SPACE';position:absolute;bottom:30px;left:28px;color:#fff;letter-spacing:.22em;font:700 13px 'DM Sans'}.welcome-copy{padding:57px 55px 35px}.welcome-heading{font-size:34px;font-weight:600;line-height:1.35;margin:20px 0 13px;letter-spacing:-.04em}.title-dot{color:#b56959}.welcome-copy p{font-size:13px;line-height:2;color:#706963;margin:0 0 25px}.form-label{display:block;color:#544d4b;font-size:12px;font-weight:600;margin:16px 0 7px}.field{display:block;width:100%;border:1px solid #d5cfc3;background:#fffdf9;padding:12px 13px;font-size:13px;border-radius:2px;color:#292728;outline:none;transition:border .2s}.field:focus{border-color:#72588d;box-shadow:0 0 0 3px #72588d1e}textarea.field{resize:vertical}.welcome-notice{font-size:11px;line-height:1.7;background:#eee7db;padding:10px 13px;color:#756654;margin:13px 0}.big-button{background:#5a4078;border:1px solid #5a4078;color:white;display:flex;align-items:center;justify-content:space-between;gap:30px;width:100%;padding:15px 19px;font-size:13px;font-weight:600;transition:background .2s}.big-button:hover{background:#35214b}.big-button span{font-size:19px}.big-button.compact{margin-top:15px;padding:12px 15px;font-size:12px}.welcome-foot{color:#9d9791;display:block;margin-top:18px;font-size:10px;line-height:1.8}.dialog-x{position:absolute;right:17px;top:12px;border:0;background:#fffdf3eb;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;font-size:25px;color:#564c46;z-index:2}.dialog-x.static{position:static;background:#ede7db}.art-dialog{width:min(970px,95vw)}.art-detail{display:grid;grid-template-columns:55% 45%;min-height:450px}.art-detail-image{display:grid;place-items:center;padding:40px;background:#e7e1d7;min-height:350px}.art-detail-image img{width:auto;height:auto;max-width:100%;max-height:67dvh;box-shadow:0 10px 40px #0002;object-fit:contain;background:white}.art-detail-copy{padding:65px 40px 40px;display:flex;align-items:start;flex-direction:column}.art-detail-copy h2{font-size:30px;line-height:1.4;margin:18px 0;font-weight:600}.art-author{font-weight:600;font-size:14px}.art-level{font-size:12px;color:#9b8a84;margin:8px 0 18px}.art-detail-copy p{font-size:13px;line-height:2;color:#6b655e;white-space:pre-wrap}.art-detail-note{border-top:1px solid #ded4c9;padding-top:15px;margin-top:auto;width:100%;font-size:11px;color:#97897f}.soft-button{padding:11px 13px;border:1px solid #cfc5bb;background:#fff9f0;color:#5a456c;font-size:12px;font-weight:600;margin-top:13px;transition:background .2s}.soft-button:hover{background:#e9e1d7}.soft-button.block{width:100%}.map-dialog,.help-dialog{width:min(650px,95vw);padding:28px 34px 30px}.modal-top{display:flex;justify-content:space-between;align-items:flex-start}.modal-top h2{font-size:24px;margin:8px 0 13px}.map-illustration{background:#ebe7df;padding:25px;display:grid;place-items:center}.map-room{width:350px;height:330px;background:#f7f5ee;border:12px solid #8d8178;position:relative;max-width:100%}.map-north{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:10px;white-space:nowrap}.map-west{position:absolute;left:-2px;top:45%;font-size:10px;writing-mode:vertical-rl}.map-east{position:absolute;right:-2px;top:45%;font-size:10px;writing-mode:vertical-rl}.map-island{position:absolute;left:32%;top:40%;border:7px solid #b49f8c;padding:20px 4px;color:#765e49;font-size:11px;text-align:center;width:40%}.map-entrance{position:absolute;bottom:-19px;left:50%;transform:translateX(-50%);padding:2px 16px;background:#ebe7df;color:#655c56;font-size:10px;white-space:nowrap}.map-person{position:absolute;color:#9d4564;left:50%;top:68%;font-size:23px;text-shadow:0 0 0 4px #f7f5ee}.map-hint{font-size:12px;line-height:1.8;color:#736d69}.help-content p{font-size:13px;line-height:2;color:#625c57;padding-bottom:12px;border-bottom:1px solid #e0d8ce}
.toast{position:absolute;z-index:20;top:19px;left:50%;transform:translate(-50%,-120px);background:#322a36;color:#fff;box-shadow:0 7px 32px #0003;padding:12px 20px;font-size:13px;max-width:90vw;transition:transform .25s;pointer-events:none}.toast.visible{transform:translate(-50%,0)}
.editor{position:fixed;right:0;top:0;bottom:0;width:min(475px,100vw);background:#faf8f3;z-index:21;transform:translateX(102%);transition:transform .28s ease;box-shadow:-10px 0 55px #0002;overflow:auto;padding:0 27px 40px}.editor.open{transform:translateX(0)}.editor-shade{position:fixed;inset:0;background:#17132165;z-index:20;display:none}.editor-shade.open{display:block}.editor-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:1px solid #e1d9cd;margin:0 -27px;padding:31px 27px 21px}.editor-head h2{font-size:27px;margin:10px 0 1px}.editor-head p{font-size:11px;color:#807870;margin:4px 0 0}.editor-close{background:none;border:0;font-size:29px;line-height:1;color:#625a55}.editor-note{background:#f0e9da;border-left:3px solid #b7a16b;padding:11px 12px;margin:21px 0;color:#6b604e;font-size:12px;line-height:1.8}.auth-section{margin-top:20px;border:1px solid #dfd5cb;padding:18px;background:#f1ede6}.auth-section h3{font-size:14px;margin:0 0 14px}.small-hint{font-size:11px;color:#807770;line-height:1.9}.signed-in{font-size:12px;color:#50775f;display:flex;justify-content:space-between;align-items:center;gap:10px}.text-button{background:none;border:0;color:#6b4d85;text-decoration:underline;font-size:12px}.tabs{display:flex;gap:0;position:sticky;top:0;background:#faf8f3;z-index:2;padding-top:20px;border-bottom:1px solid #dcd4c8}.tab{flex:1;border:0;background:transparent;color:#8b817b;padding:13px 3px;font-size:12px;font-weight:600;border-bottom:2px solid transparent}.tab.active{border-bottom-color:#624879;color:#4b375d}.tab-body{padding-top:22px}.tab-body h3{font-size:15px;margin:0}.editor-section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.editor-section-heading span{font:500 11px 'DM Sans';color:#9a8c7d}.artwork-list{display:flex;flex-direction:column;gap:7px;max-height:285px;overflow-y:auto;padding-right:3px}.artwork-item{display:grid;grid-template-columns:54px 1fr auto;gap:11px;align-items:center;background:#fff;border:1px solid #e5ddd2;padding:6px 8px}.artwork-thumb{height:51px;width:54px;object-fit:cover;background:#ccc}.artwork-item-title{font-weight:600;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artwork-item-sub{font-size:10px;color:#958b81;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.artwork-item button{background:#f3eee6;border:1px solid #e1d9cf;padding:7px;color:#695775;font-size:11px}.editor-form-title{font-size:15px;font-weight:600;margin:27px 0 9px;border-top:1px solid #ded4c7;padding-top:20px}.two-col{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.upload-drop{position:relative;background:#f1ede6;border:1px dashed #bcae9c;min-height:105px;display:grid;place-items:center;overflow:hidden}.upload-drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:1}.upload-preview{display:flex;align-items:center;justify-content:center;gap:14px;color:#8e7a69;font-size:29px;padding:10px;text-align:left}.upload-preview span{font-size:12px;line-height:1.8}.upload-preview small{font-size:10px;color:#ada195}.upload-preview img{max-height:145px;max-width:100%;object-fit:contain}.orientation-options{display:flex;gap:9px}.orientation-options label{flex:1;cursor:pointer}.orientation-options input{position:absolute;opacity:0}.orientation-options span{display:flex;align-items:center;justify-content:center;gap:11px;padding:10px;background:#fffbf5;border:1px solid #d9d1c5;color:#745e82;font-size:24px}.orientation-options small{font-size:12px}.orientation-options input:checked+span{border-color:#715789;background:#e9e0f0}.form-actions{display:flex;align-items:center;gap:10px}.form-actions .big-button{flex:2}.form-actions .soft-button{flex:1}.editor #tab-ambience .big-button{margin-top:25px}
@media(max-width:1100px){.header{padding:0 17px}.brand-en{font-size:10px}.brand-th{font-size:11px}.header-actions{gap:8px}.right-hud{right:18px;top:25px}.floating-intro{left:4%;top:5%}.floating-intro h1{font-size:34px}}
@media(max-width:760px){.header{height:68px;flex-basis:68px;padding:0 10px;gap:3px}.brand-mark{width:41px;height:42px}.brand-mark span{font-size:13px}.brand-text{max-width:160px}.brand-en{font-size:8px;white-space:normal;line-height:1.5}.brand-th{font-size:9px;white-space:normal;line-height:1.3;margin-top:2px}.mode-chip{display:none}.visitors-chip{padding-left:6px;font-size:10px;border:0}.visitor-icon{display:none}.header-btn{padding:9px;font-size:11px}.header-btn.primary span{display:none}.hide-small{display:none}.floating-intro{left:16px;top:14px;max-width:76%;padding:14px 15px 12px 0}.floating-intro .eyebrow{font-size:8px}.floating-intro h1{font-size:24px;margin:10px 0 5px}.floating-intro p{font-size:10px;line-height:1.7}.floating-rule,.mini-facts{display:none}.right-hud{right:10px;top:auto;bottom:17px;min-width:auto;padding:9px 13px}.hud-title{font-size:13px}.hud-sub{font-size:10px}.hud-label,.compass{display:none}.bottom-hud{bottom:20px;left:auto;right:10px;transform:none}.control-info{display:none}.mobile-joystick{display:flex}.crosshair{display:none}.welcome-panel{grid-template-columns:1fr}.welcome-pattern{height:145px}.welcome-pattern:before{top:-90px;left:34%;height:240px}.welcome-copy{padding:28px 23px}.welcome-heading{font-size:28px}.welcome-copy p{font-size:12px}.welcome-dialog{width:95vw;max-height:95dvh}.art-detail{grid-template-columns:1fr}.art-detail-image{min-height:200px;padding:25px}.art-detail-image img{max-height:38dvh}.art-detail-copy{padding:23px}.art-detail-copy h2{font-size:22px}.editor{padding-left:20px;padding-right:20px}.editor-head{margin:0 -20px;padding:20px}.map-dialog,.help-dialog{padding:22px}.map-room{width:270px;height:265px}.map-illustration{padding:13px}.map-island{top:34%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

.stage[data-light="gallery"] .world-viewport{filter:brightness(.95) contrast(1.045)}
.stage[data-light="evening"] .world-viewport{filter:sepia(.19) brightness(.89) saturate(.95)}

.floating-intro{transition:opacity .45s,transform .45s}.tour-moving .floating-intro{opacity:0;transform:translateY(-15px)}

/* VERSION 3 — three connected exhibition rooms, visitor avatars and moderated chat */
.door-sign{display:flex;align-items:center;justify-content:center;text-align:center;padding:4px 10px;background:#5b4475;color:#fff;font-size:14px;letter-spacing:.03em;white-space:nowrap;box-shadow:0 6px 16px #291f2b4d}
.room-plaque{background:#f6f0e3;color:#614879;border:1px solid #a792b3;display:grid;place-items:center;text-align:center;font-size:14px;font-weight:700;box-shadow:0 5px 12px #0002}
.corridor-floor{box-shadow:inset 0 0 80px #654b7d2c}
.corridor-label{font-size:14px;font-weight:700;display:grid;place-items:center;background:#eddfd0;color:#604978;letter-spacing:.1em}
.gallery-sign strong{font-size:22px;letter-spacing:0;line-height:1.25;padding:8px}
.room-map-grid{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;margin:15px 0}
.room-map-card{flex:1 1 160px;max-width:225px;padding:13px 12px;border:1px solid #d6cdc1;border-radius:12px;background:#fffdf9;text-align:center}
.room-map-title{font-weight:700;font-size:13px;min-height:36px}
.mini-room{height:130px;position:relative;border:7px solid #a591ab;margin:8px 0 11px;border-radius:3px;background:repeating-linear-gradient(0deg,#e7d7bd,#ece0ca 17px,#e7d7bd 19px)}
.mini-room .mini-door{position:absolute;width:38px;height:9px;background:#fffdf9;left:calc(50% - 19px)}
.mini-door.top{top:-8px}.mini-door.bottom{bottom:-8px}.mini-room .map-person{z-index:2;font-size:17px;transform:translate(-50%,-50%)}
.map-art-lines{position:absolute;inset:43% 0 auto;display:block;letter-spacing:11px;font-size:10px;color:#6e5486;pointer-events:none}
.map-connector{font-size:10px;color:#77677f;white-space:nowrap;max-width:78px}
.room-map-card .soft-button{font-size:11px}
.editor-room-heading{font-size:14px;background:#eee8f1;border-left:4px solid #785b90;padding:9px 11px;margin:18px 0 8px}
.room-settings{margin:28px 0 8px;padding:18px;border:1px solid #d8cddd;border-radius:12px;background:#f7f4f8}.room-settings h3{margin-top:0}.room-settings .field{margin-bottom:10px}
.word-rules-list{display:flex;flex-direction:column;gap:6px;max-height:270px;overflow:auto;margin:15px 0 23px}.rule-item{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #ddd6cf;background:#fff;border-radius:6px;padding:6px 9px;font-size:12px}.rule-item button{border:0;background:#fae5e5;color:#8e4350;border-radius:5px;padding:4px 8px;cursor:pointer}
#word-rule-form .big-button{margin-top:14px}
/* Chat panel stays outside the stage, so chat inputs never trigger movement or camera controls. */
.chat-panel{position:fixed;right:18px;top:110px;bottom:18px;width:min(380px,calc(100vw - 32px));z-index:11;background:#fffefa;border:1px solid #ded2e6;box-shadow:0 22px 54px #21162948;display:flex;flex-direction:column;transform:translateX(calc(100% + 35px));transition:transform .24s ease;border-radius:18px;overflow:hidden;visibility:hidden}
.chat-panel.open{transform:translateX(0);visibility:visible}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;background:linear-gradient(120deg,#5a4278,#79618b);color:white;padding:17px 18px}
.chat-head .eyebrow{color:#dfd0e7;font-size:8px}.chat-head h2{font-size:21px;margin:4px 0 1px}.chat-room-title{font-size:12px;color:#f3e9f7}
.chat-close{background:#ffffff29;border:1px solid #ffffff66;border-radius:100%;color:#fff;width:30px;height:30px;font-size:23px;cursor:pointer}
.chat-messages{padding:14px 13px;overflow-y:auto;flex:1;min-height:80px;background:#f7f4f8;overscroll-behavior:contain}
.chat-empty{font-size:12px;line-height:1.8;color:#726679;padding:18px;text-align:center}
.chat-message{background:white;border:1px solid #e5dee9;border-radius:11px;padding:9px 10px;margin-bottom:9px;box-shadow:0 3px 10px #2f204411}
.chat-message.comment{background:#fff9e9;border-color:#eddbb4}
.chat-message-meta{display:flex;gap:8px;align-items:center;font-size:11px;color:#625570}
.chat-message-meta span{font-size:10px;color:#998f9c;margin-left:auto}
.chat-message p{font-size:12px;line-height:1.65;overflow-wrap:anywhere;white-space:pre-wrap;margin:6px 0 0;color:#352f3b}
.chat-comment-tag{font-weight:700;color:#8a6a31;font-size:10px}
.message-delete{font-size:10px;border:0;background:#f9e2e5;color:#a03954;padding:3px 6px;border-radius:4px;cursor:pointer}
.chat-form{background:#fffdf9;padding:12px 15px 15px;border-top:1px solid #e1d7df;flex:none}
.chat-form .form-label{font-size:10px;margin:3px 0 5px}.chat-form .field{font-size:12px;padding:8px;margin-bottom:8px}.chat-form textarea{resize:vertical;min-height:54px;max-height:120px}
.chat-form .big-button{width:100%;font-size:12px;padding:9px}
.chat-safety{font-size:10px;line-height:1.65;color:#837a84;margin:10px 0 0}
/* Avatar: CSS 2.5D model with eyes, face, clothing, arms and walking animation */
.avatar{width:66px!important;height:156px!important;filter:drop-shadow(5px 7px 6px #0004);pointer-events:none;transform-style:preserve-3d;overflow:visible}
.avatar-shadow{position:absolute;left:6px;top:139px;height:14px;width:53px;border-radius:50%;background:#1c1c1b44;filter:blur(4px)}
.avatar-head{top:17px;left:12px;width:42px;height:41px;border-radius:40% 40% 48% 48%;background:linear-gradient(105deg,#efc79d,#c88e6a);box-shadow:inset -7px 0 #99684822;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;color:#43312b;font-size:13px;z-index:3}
.avatar-head span{line-height:13px;letter-spacing:3px}.avatar-head i{font-size:14px;line-height:12px;font-style:normal}
.avatar-hair{top:10px;left:10px;width:47px;height:28px;border-radius:45% 45% 18% 12%;background:linear-gradient(110deg,#282227,#53403c);z-index:4}
.avatar-torso{position:absolute;top:59px;left:11px;width:46px;height:62px;border-radius:16px 16px 10px 10px;background:linear-gradient(100deg,var(--avatar-color),#ffffff33),var(--avatar-color);z-index:2;box-shadow:inset -8px 0 #0002}
.avatar-badge{position:absolute;top:22px;left:3px;font-size:8px;color:#fff;background:#ffffff30;border-radius:3px;padding:1px 3px}
.avatar-arm{position:absolute;top:66px;width:16px;height:54px;background:linear-gradient(100deg,var(--avatar-color),#ffffff3d);border-radius:10px;transform-origin:top center;z-index:1}
.avatar-arm.arm-left{left:4px;transform:rotate(13deg)}.avatar-arm.arm-right{right:1px;transform:rotate(-13deg)}
.avatar-leg{position:absolute;top:115px;width:17px;height:32px;background:linear-gradient(100deg,#444b62,#1f2638);border-radius:3px 3px 6px 6px;transform-origin:top center;z-index:1}
.avatar-leg.leg-left{left:16px}.avatar-leg.leg-right{left:37px}
.avatar-name{bottom:160px;z-index:9}.avatar-bubble{position:absolute;top:-55px;left:50%;transform:translateX(-50%);color:#fff;display:none}
.avatar[data-style="artist"] .avatar-torso{background:#d9b58a}.avatar[data-style="artist"] .avatar-arm{background:#d9b58a}.avatar[data-style="teacher"] .avatar-torso{background:#5d778c}.avatar[data-style="teacher"] .avatar-arm{background:#5d778c}
.avatar.walking .leg-left{animation:awp-step .38s ease-in-out infinite alternate}.avatar.walking .leg-right{animation:awp-step .38s ease-in-out infinite alternate-reverse}
.avatar.walking .arm-left{animation:awp-arm .4s ease-in-out infinite alternate}.avatar.walking .arm-right{animation:awp-arm .4s ease-in-out infinite alternate-reverse}
@keyframes awp-step{from{transform:rotate(-18deg)}to{transform:rotate(19deg)}}@keyframes awp-arm{from{transform:rotate(-17deg)}to{transform:rotate(18deg)}}
@media(max-width:760px){.chat-panel{right:8px;left:8px;bottom:8px;top:76px;width:auto;border-radius:12px}.chat-messages{min-height:70px}.chat-form{padding:10px}.room-map-grid{gap:5px}.room-map-card{flex-basis:120px;padding:10px 6px}.mini-room{height:85px}.map-connector{font-size:9px;max-width:42px}.header-btn:not(.primary){font-size:12px}.header-btn:not(.primary) span{display:none}}

/* Never crop student artwork to fit a frame. */
.frame img{object-fit:contain;background:#ede5d8}

/* v4: walk-around central blocks, floor-to-ceiling picture density, no benches */
.island-display{background:linear-gradient(105deg,#a28f82,#f8f1e6 18%,#e7d6c6 82%,#917b71);border:3px solid #c9b7a0;box-shadow:0 1px 12px #6a544b44}
.island-plinth{background:linear-gradient(110deg,#655164,#a98aa3 50%,#655164)}
.island-cornice{background:linear-gradient(#bba17f,#715d64,#c7ad94)}
.island-kicker{font:700 10px 'DM Sans',sans-serif;letter-spacing:.19em;color:#513b6d;text-align:center;text-shadow:0 1px #fff8eb;display:flex;align-items:center;justify-content:center}
.island-art{border-width:6px;padding:4px;box-shadow:0 7px 17px #0006}
.island-art .art-mat{padding:5px}
.island-art .frame-caption{font-size:9px;top:calc(100% + 7px);padding:2px 5px}
.island-art .frame-caption span{font-size:8px}
.island-narrow .frame-caption{font-size:9px}

/* v4: camera-facing illustrated character models, standing in real 3D world space */
.visitor-character{pointer-events:none;overflow:visible;transform-style:preserve-3d;filter:drop-shadow(5px 6px 6px #17101d48)}
.visitor-character .char-figure{position:absolute;inset:0;filter:drop-shadow(2px 3px 3px #2c20354a)}
.visitor-character .char-ground{position:absolute;bottom:-2px;left:10%;width:80%;height:17px;border-radius:50%;background:#1e1c2248;filter:blur(7px)}
.visitor-character .char-neck{position:absolute;left:35px;top:58px;width:15px;height:24px;background:#ca987a;z-index:1}
.visitor-character .char-hair{position:absolute;left:15px;top:9px;width:57px;height:35px;border-radius:46% 46% 25% 25%;background:linear-gradient(112deg,#272329,#534443);z-index:7;box-shadow:inset -9px 3px #16131c44}
.visitor-character .char-face{position:absolute;left:19px;top:23px;width:49px;height:48px;border-radius:43% 43% 48% 48%;background:linear-gradient(115deg,#f4d5b0,#d39a78 74%,#a97155);z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#53382c;box-shadow:inset -6px 0px 0px #9b624727}
.visitor-character .char-eyes{font-size:14px;line-height:18px;letter-spacing:1px}.visitor-character .char-mouth{font-size:21px;line-height:17px;margin-bottom:2px}
.visitor-character .char-ear{position:absolute;top:44px;width:13px;height:18px;border-radius:50%;background:#d7a082;z-index:4}.visitor-character .char-ear-left{left:13px}.visitor-character .char-ear-right{right:13px}
.visitor-character .char-shirt{position:absolute;left:16px;top:77px;width:54px;height:61px;border-radius:14px 14px 8px 8px;background:linear-gradient(105deg,#ffffff44,transparent 28%,#00000025 90%),var(--shirt-color);z-index:5;box-shadow:inset -9px 0 #0002,0 0 0 2px #4b3c5b18}
.visitor-character .char-logo{position:absolute;top:23px;left:13px;background:#ffffff38;color:#fff;border-radius:3px;font:700 11px 'DM Sans',sans-serif;padding:2px 3px}
.visitor-character .char-collar{position:absolute;left:21px;top:0;width:13px;height:11px;border-radius:0 0 6px 6px;background:#f7ece0}
.visitor-character .char-arm{position:absolute;top:79px;width:17px;height:61px;background:linear-gradient(92deg,#ffffff3b,transparent 35%,#0003),var(--shirt-color);border-radius:9px 9px 10px 10px;transform-origin:50% 7%;z-index:4}
.visitor-character .char-arm-left{left:4px;transform:rotate(9deg)}.visitor-character .char-arm-right{right:4px;transform:rotate(-9deg)}
.visitor-character .char-leg{position:absolute;top:132px;width:20px;height:39px;background:linear-gradient(100deg,#536079,#253047);border-radius:4px;z-index:3;transform-origin:50% 5%}
.visitor-character .char-leg-left{left:23px}.visitor-character .char-leg-right{right:23px}
.visitor-character .char-shoe{position:absolute;bottom:-6px;left:-5px;width:28px;height:11px;background:linear-gradient(105deg,#3d3a3e,#171a26);border-radius:6px 8px 3px 3px}
.visitor-character .char-name,.visitor-character .char-demo{position:absolute;left:50%;transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:12;box-shadow:0 3px 7px #2d21303d;border-radius:14px}
.visitor-character .char-name{top:-24px;max-width:172px;overflow:hidden;text-overflow:ellipsis;padding:3px 9px;font-size:12px;font-weight:700;background:#fffdf5;color:#302b35;border:1px solid #fff}
.visitor-character .char-demo{top:-43px;padding:2px 9px;font-size:10px;font-weight:600;background:#674f80;color:#fff}
.visitor-character.is-walking .char-leg-left{animation:char-leg-a .38s ease-in-out infinite alternate}.visitor-character.is-walking .char-leg-right{animation:char-leg-b .38s ease-in-out infinite alternate}
.visitor-character.is-walking .char-arm-left{animation:char-arm-a .39s ease-in-out infinite alternate}.visitor-character.is-walking .char-arm-right{animation:char-arm-b .39s ease-in-out infinite alternate}
@keyframes char-leg-a{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}@keyframes char-leg-b{from{transform:rotate(18deg)}to{transform:rotate(-18deg)}}
@keyframes char-arm-a{from{transform:rotate(12deg)}to{transform:rotate(-14deg)}}@keyframes char-arm-b{from{transform:rotate(-12deg)}to{transform:rotate(14deg)}}
@media(prefers-reduced-motion:reduce){.visitor-character.is-walking .char-arm,.visitor-character.is-walking .char-leg{animation:none!important}}

/* v6 — cute original voxel 3D visitor character. All six sides are pixel-block
   surfaces. Existing gallery geometry, room content and controls are unchanged. */
.box-group,.box-group > div{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}
.island-display{background:linear-gradient(107deg,#ece1d4,#f8f3ec 45%,#cbb9aa);border:1px solid #b69d85;box-shadow:none}
.island-art{box-shadow:0 3px 7px #0004;transform-style:preserve-3d}
.game-avatar{
 position:absolute;width:0;height:0;overflow:visible;transform-style:preserve-3d;pointer-events:none;
 --model-coat:#9b76cb;--model-coat-light:#b8a0e4;--model-coat-shadow:#66508d;
 --model-trim:#fff0a9;--model-bottom:#5c5d8f;--model-skin:#f6c5a2;
 --model-skin-shadow:#dd9e83;--model-hair:#51405f;--model-hair-light:#745b84;
 --model-pack:#735a9d;--model-pack-light:#ad93ce;--model-shoes:#48415b;
}
.game-avatar[data-style="creator"]{
 --model-coat:#e8948a;--model-coat-light:#ffc3ae;--model-coat-shadow:#b86976;
 --model-trim:#fff6c8;--model-bottom:#8072a7;--model-skin:#f6cfb4;
 --model-skin-shadow:#e7a991;--model-hair:#5f453d;--model-hair-light:#8f6453;
 --model-pack:#ce8e8b;--model-pack-light:#ffb8ae;--model-shoes:#624657;
}
.game-avatar[data-style="guide"]{
 --model-coat:#65b6ae;--model-coat-light:#a3e0d3;--model-coat-shadow:#438f9a;
 --model-trim:#fbef9e;--model-bottom:#456b92;--model-skin:#f1c39f;
 --model-skin-shadow:#d99c7e;--model-hair:#394857;--model-hair-light:#63798a;
 --model-pack:#407b86;--model-pack-light:#83b9ba;--model-shoes:#344657;
}
.game-model,.model-part,.model-anchor,.model-swing{position:absolute;left:0;top:0;transform-style:preserve-3d}
.game-model{transform-style:preserve-3d}
.model-part>.voxel-face{border-radius:0!important;box-sizing:border-box;outline:1px solid #23162518;backface-visibility:hidden}
.model-part>.voxel-left{filter:brightness(.85)}
.model-part>.voxel-right{filter:brightness(.94)}
.model-part>.voxel-top{filter:brightness(1.18)}
.model-part>.voxel-back{filter:brightness(.9)}
.model-torso,.model-sleeve,.model-hood{background:var(--model-coat)}
.model-torso.voxel-face,.model-sleeve.voxel-face,.model-hood.voxel-face{background:
 linear-gradient(90deg,transparent 0 13%,#ffffff10 13% 24%,transparent 24% 77%,#00000013 77% 85%,transparent 85%),var(--model-coat)}
.model-torso.voxel-back{background:linear-gradient(90deg,var(--model-coat-shadow) 0 13%,var(--model-coat) 13% 87%,var(--model-coat-shadow) 87%)}
.model-hood.voxel-face,.model-cuff.voxel-face{background:var(--model-coat-light)}
.model-neck.voxel-face,.model-head.voxel-face,.model-hand.voxel-face{background:var(--model-skin);box-shadow:inset -2px 0 #c28b7040}
.model-head.voxel-left,.model-head.voxel-right,.model-neck.voxel-left{background:var(--model-skin-shadow)}
.model-hair.voxel-face,.model-bangs.voxel-face,.model-back-hair.voxel-face,.model-side-hair.voxel-face,.model-cat-ear.voxel-face{background:
 repeating-linear-gradient(90deg,transparent 0 15px,#ffffff12 15px 23px,transparent 23px 35px),var(--model-hair)}
.model-hair.voxel-top,.model-cat-ear.voxel-top{background:var(--model-hair-light)}
.model-ear-inner.voxel-face{background:#f8b4c2}
.model-waist.voxel-face{background:var(--model-coat-shadow)}
.model-cuff.voxel-face{background:var(--model-coat-light)}
.model-pants.voxel-face{background:linear-gradient(90deg,#ffffff15 0 20%,transparent 20% 80%,#00000014 80%),var(--model-bottom)}
.model-sneaker.voxel-face{background:var(--model-shoes)}
.model-shoe-toe.voxel-face{background:var(--model-trim)}
.model-rucksack.voxel-face{background:var(--model-pack)}
.model-rucksack-flap.voxel-face{background:var(--model-pack-light)}
.model-pack-heart{display:flex;justify-content:center;align-items:center;color:#fff6ac;line-height:1;backface-visibility:hidden}
.model-pack-heart span{font:bold 20px sans-serif;text-shadow:0 2px 0 #725b7c}
.model-face{position:absolute;display:flex;align-items:center;justify-content:space-between;gap:1px;padding:3px 4px 0;box-sizing:border-box;backface-visibility:hidden}
.model-eye{width:10px;height:13px;background:#33283c;display:block;box-shadow:2px 2px 0 #5f475e;position:relative;flex-shrink:0}
.model-eye i{position:absolute;top:2px;left:2px;background:#fff;width:4px;height:4px}
.model-blush{width:9px;height:5px;background:#ea91a2;opacity:.72;flex-shrink:0;margin-top:12px}
.model-smile{width:13px;height:6px;border-bottom:3px solid #9b5764;display:block;align-self:flex-end;margin-bottom:4px;image-rendering:pixelated}
.model-emblem{display:flex;align-items:center;justify-content:center;background:var(--model-trim);color:#58426c;font:900 10px 'DM Sans',sans-serif;letter-spacing:.04em;border:2px solid #fff9dc;box-shadow:0 1px 3px #0002;backface-visibility:hidden}
.model-anchor{transform-origin:0 0}
.model-swing{transform-origin:0 0}
.game-avatar.is-walking .model-swing.leg-left{animation:game-walk-a .31s ease-in-out infinite alternate}
.game-avatar.is-walking .model-swing.leg-right{animation:game-walk-b .31s ease-in-out infinite alternate}
.game-avatar.is-walking .model-swing.arm-left{animation:game-walk-b .35s ease-in-out infinite alternate}
.game-avatar.is-walking .model-swing.arm-right{animation:game-walk-a .35s ease-in-out infinite alternate}
@keyframes game-walk-a{from{transform:rotateX(-24deg)}to{transform:rotateX(24deg)}}
@keyframes game-walk-b{from{transform:rotateX(24deg)}to{transform:rotateX(-24deg)}}
.game-shadow{border-radius:50%;background:radial-gradient(ellipse,#25202759,transparent 72%);filter:blur(5px);pointer-events:none}
.game-name{position:absolute;left:0;top:-285px;white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis;transform:translateX(-50%);background:#fffdf4;color:#493950;padding:4px 10px;border-radius:30px;box-shadow:0 2px 8px #0003;font-size:12px;font-weight:700;backface-visibility:visible;transform-style:preserve-3d}
.my-character .game-name{background:#654e82;color:#fff;border:1px solid #dac9f1}
.resume-control{pointer-events:auto;background:#624779;color:white;border:1px solid #a493ba;border-radius:4px;padding:11px 13px;font-size:12px;box-shadow:0 5px 14px #0002;white-space:nowrap}
.resume-control:hover,.resume-control:focus-visible{background:#46305e;outline:2px solid #fff}
@media(max-width:760px){.resume-control{padding:11px 8px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.game-avatar.is-walking .model-swing{animation:none!important}}

body.gallery-entered .floating-intro{opacity:.0;transition:opacity .5s;pointer-events:none}

/* v7 – 3D room decor, uncluttered camera view and selection-free orbit */
.stage,.stage *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.stage{overscroll-behavior:contain}
.decor-pot,.decor-pot-rim{background:linear-gradient(108deg,#bd8f75,#efd0b1 48%,#a77462);box-shadow:inset -3px -1px 4px #6a3f3436}
.decor-soil{background:#685646}
.decor-stem{background:#56724a}
.decor-leaf{background:linear-gradient(118deg,#93b985,#568c69 67%,#305e4b);box-shadow:inset -2px -1px 3px #23482b38}
.decor-trunk{background:linear-gradient(94deg,#715036,#b78e65 55%,#61462f)}
.decor-tree-canopy{background:linear-gradient(130deg,#a0ca8e,#578b65 56%,#37684d);box-shadow:inset -10px -4px 15px #2c523c40}
.decor-track-light,.decor-art-lamp{background:linear-gradient(90deg,#8e7b62,#d7bd91 50%,#8e7b62)}
.decor-light-bulb{background:#fff4c8;box-shadow:0 0 15px #ffe9af70}
.decor-pot,.decor-pot-rim,.decor-soil,.decor-stem,.decor-leaf,.decor-trunk,.decor-tree-canopy,.decor-track-light,.decor-light-bulb,.decor-art-lamp{pointer-events:none}
/* Overlay does not occupy the sight line and disappears during camera orbit. */
body.gallery-entered .right-hud{right:14px;top:12px;min-width:0;max-width:min(245px,30vw);padding:9px 13px;opacity:.83;transition:opacity .12s}
body.gallery-entered .right-hud .compass{display:none}
body.gallery-entered .bottom-hud{bottom:12px}
body.gallery-entered .control-info{padding:7px 10px;font-size:10px;max-width:min(750px,68vw);overflow:hidden;text-overflow:ellipsis}
body.camera-dragging .right-hud,body.camera-dragging .control-info,body.camera-dragging .crosshair{opacity:0!important;visibility:hidden;pointer-events:none}
.world .gallery-sign,.world .door-sign,.world .room-plaque,.world .corridor-label,.world .island-kicker,.world .outside-lettering{pointer-events:none}
.frame .frame-caption{pointer-events:none}
@media(max-width:760px){body.gallery-entered .right-hud{top:8px;right:8px;max-width:58vw;padding:6px 9px}body.gallery-entered .hud-title{font-size:11px}body.gallery-entered .hud-sub{font-size:9px}}

/* v7: Keep all status/controls OUTSIDE the 3D camera viewport, not on top
   of artwork captions, wall signs, or the viewer avatar. */
.gallery-toolbar{flex:0 0 auto;min-height:54px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 27px;background:#f4f0e9;border-bottom:1px solid #dfd8cf;position:relative;z-index:5}
.gallery-room-indicator{min-width:0;display:flex;align-items:center;gap:12px;color:#41384e}
.toolbar-label{font:700 9px 'DM Sans',sans-serif;letter-spacing:.15em;color:#a18b82;white-space:nowrap}
.gallery-room-indicator b{font-size:13px;font-weight:700;max-width:270px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.toolbar-count{font-size:11px;color:#81786e;white-space:nowrap}
.toolbar-compass{border:1px solid #d6c8d6;border-radius:100%;width:26px;height:26px;display:grid;place-items:center;color:#624779;flex:none}
.toolbar-compass i{font-size:18px;font-style:normal;transition:transform .07s}
.gallery-toolbar-actions{display:flex;gap:10px;align-items:center;flex:none}
.gallery-toolbar .control-info{background:transparent;box-shadow:none;border:0;padding:0;font-size:11px;backdrop-filter:none;max-width:none}
.gallery-toolbar .resume-control{padding:9px 12px;font-size:11px}
.gallery-toolbar .circular-button{width:34px;height:34px;box-shadow:none;background:#fff}
body.gallery-entered .crosshair{display:none}
@media(max-width:1160px){.toolbar-label,.toolbar-compass{display:none}.gallery-toolbar{padding:6px 15px}.toolbar-count{display:none}}
@media(max-width:760px){.gallery-toolbar{padding:5px 9px;min-height:47px}.gallery-room-indicator b{font-size:10px;max-width:48vw}.gallery-toolbar .control-info{display:none}.gallery-toolbar-actions{gap:6px}.gallery-toolbar .resume-control{padding:7px;font-size:10px}.gallery-toolbar .circular-button{width:30px;height:30px}}
/* Visitor knows their own name; don't project that label over exhibition text. */
.my-character .game-name{display:none}


/* AWP ART SPACE 8 — bottom control deck and lowered third-person camera. */
/* DOM order: header > 3D stage > bottom controls. Controls never cover paintings. */
.gallery-toolbar{flex:0 0 auto;display:flex;flex-direction:column;gap:0;padding:0;min-height:0;background:#f6f2eb;border-bottom:0;border-top:1px solid #ded5cb;box-shadow:0 -2px 12px #33233814;z-index:6}
.gallery-toolbar-main{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:61px;padding:9px 25px}
.gallery-toolbar-mobile-controls{display:none}
/* During camera dragging, the footer stays visible: it is outside the stage. */
body.camera-dragging .gallery-toolbar .control-info{opacity:1!important;visibility:visible!important}
/* The lower stage edge is a distinct boundary; no controls on top of 3D art. */
.main{flex:1 1 auto;min-height:0}
@media(max-width:1160px){
 .gallery-toolbar-main{min-height:57px;padding:7px 15px}
 .gallery-toolbar .toolbar-count{display:inline-block;font-size:10px;overflow:hidden;text-overflow:ellipsis;max-width:245px}
}
@media(max-width:760px){
 .gallery-toolbar-main{min-height:45px;padding:5px 10px;gap:6px}
 .gallery-room-indicator{gap:5px;flex:1;min-width:0;flex-wrap:wrap;align-content:center}
 .gallery-room-indicator b{max-width:none;font-size:11px;flex-basis:100%;line-height:1.3}
 .gallery-toolbar .toolbar-count{font-size:9px;max-width:100%;line-height:1.3}
 .gallery-toolbar-actions{gap:5px;flex:none}
 .gallery-toolbar .resume-control{font-size:10px;min-height:34px;padding:7px 9px}
 .gallery-toolbar .circular-button{height:33px;width:33px}
 .gallery-toolbar-mobile-controls{min-height:53px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #e0d8ce;background:#f9f7f2;padding:5px 12px}
 .mobile-controls-hint{font-size:10px;display:flex;flex-direction:column;gap:2px;color:#756d7b;line-height:1.5;min-width:0}
 .mobile-controls-hint b{font-size:11px;color:#57446c}
 .mobile-controls-hint span{max-width:160px}
 .mobile-joystick{position:static;left:auto;bottom:auto;display:flex;flex-direction:row;align-items:center;gap:4px;z-index:auto;flex:none;pointer-events:auto;user-select:none}
 .mobile-joystick div{display:flex;gap:4px}
 .mobile-joystick button{width:43px;height:43px;min-width:43px;background:#fff;border:1px solid #cabed7;border-bottom:2px solid #b19bbd;border-radius:9px;color:#5e4479;box-shadow:0 1px 3px #0001;touch-action:none;font-size:15px;font-weight:700}
 .mobile-joystick button:active{background:#e9ddf1;transform:translateY(1px)}
}
@media(max-width:400px){
 .mobile-controls-hint span{font-size:9px;max-width:125px}
 .mobile-joystick button{width:41px;min-width:41px;height:41px}
 .gallery-toolbar-main{padding-inline:7px}
 .gallery-toolbar-mobile-controls{padding-inline:7px}
}
@media(max-height:590px) and (max-width:760px){
 .gallery-toolbar-mobile-controls{min-height:42px;padding-block:3px}
 .mobile-joystick button{height:35px;min-width:35px;width:35px}
}


/* AWP ART SPACE 9 — render performance */
.scene-zone{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;overflow:visible}
.scene-zone > *{position:absolute;transform-style:preserve-3d;backface-visibility:hidden}
.scene-zone[hidden]{display:none!important}
.smooth-toggle{background:#ebe6f3;border:1px solid #c7b6d8;border-radius:4px;color:#513b6d;font-size:11px;font-weight:700;min-height:33px;padding:7px 10px;white-space:nowrap}
.smooth-toggle[aria-pressed="false"]{background:#fff;color:#63566b}
.smooth-toggle:focus-visible{outline:2px solid #74549d;outline-offset:2px}
/* Large blurred filters and animated grain on many 3D planes are especially
   expensive for school tablets and low-powered laptops. Geometry remains 3D. */
body.smooth-mode .scene-grain{display:none}
body.smooth-mode .vignette{opacity:.40}
body.smooth-mode .room-floor,body.smooth-mode .garden-floor,body.smooth-mode .roof,body.smooth-mode .wall-surface{box-shadow:none}
body.smooth-mode .frame{box-shadow:0 3px 7px #0003}
body.smooth-mode .frame-caption{box-shadow:none}
body.smooth-mode .decor-pot,body.smooth-mode .decor-pot-rim,body.smooth-mode .decor-leaf,body.smooth-mode .decor-tree-canopy,body.smooth-mode .decor-light-bulb,body.smooth-mode .game-avatar,body.smooth-mode .game-shadow{filter:none!important;box-shadow:none!important}
@media(max-width:760px){.smooth-toggle{padding:6px 8px;font-size:10px;min-height:33px}.gallery-toolbar-actions{gap:4px}}
@media(max-width:410px){.smooth-toggle{font-size:0;padding:5px 7px}.smooth-toggle::before{content:'⚡';font-size:15px}}

/* v10: only requested additions, preserve previous three-room exhibition design. */
.music-toggle{background:#eef2ec;border:1px solid #c8d7cb;border-radius:4px;color:#35694f;font-size:11px;font-weight:700;min-height:33px;padding:7px 11px;white-space:nowrap}
.music-toggle[aria-pressed="true"]{background:#d7eadf;border-color:#7ba58a}
.music-toggle:focus-visible{outline:2px solid #547e64;outline-offset:2px}
.fps-readout{font:700 11px 'DM Sans',sans-serif;white-space:nowrap;min-width:56px;text-align:center;color:#687464;font-variant-numeric:tabular-nums}
.fps-readout.low-fps{color:#a36045}
.owner-login-dialog{width:min(450px,94vw);padding:0;border-radius:10px}
.owner-login-box{padding:28px 30px 32px;background:#fcfaf6}
.owner-login-head{display:flex;justify-content:space-between;gap:16px;align-items:start;margin-bottom:18px}
.owner-login-head h2{font-size:24px;line-height:1.3;margin:9px 0}
.owner-login-head p{font-size:12px;color:#766e75;line-height:1.8;margin:0}
.owner-login-box .field{margin-bottom:14px}
.owner-login-message{font-size:11px;line-height:1.75;color:#665a6b;background:#f0eaf3;border-left:3px solid #786194;padding:9px 12px;margin:4px 0 15px}
.owner-login-submit{width:100%}
.stats-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:17px 0 20px}
.stats-grid>div{display:flex;flex-direction:column;background:#f3eee8;border:1px solid #e6ddd2;padding:13px;gap:2px}
.stats-grid span{font-size:11px;color:#746976}
.stats-grid strong{font:700 30px 'DM Sans',sans-serif;color:#5c4874;font-variant-numeric:tabular-nums}
.stats-grid small{font-size:10px;color:#8d8586}
.stats-subtitle{margin:18px 0 8px;font-size:13px}
.stats-daily{display:flex;flex-direction:column;gap:7px;font-size:11px}
.stats-day{display:grid;grid-template-columns:76px 1fr 30px;gap:7px;align-items:center}
.stats-day-track{height:12px;background:#e9e2ea;border-radius:3px;overflow:hidden}
.stats-day-fill{height:100%;background:#846ba0;min-width:0}
/* Visible labels float over ALL avatars, including the visitor's own character. */
.my-character .game-name{display:block;}
.game-name{z-index:3;font-size:13px;line-height:1.45;min-width:44px;text-align:center;border:1px solid #e8ddec;box-shadow:0 4px 12px #0003;padding:5px 12px;pointer-events:none;overflow:visible;max-width:190px}
.game-name::after{content:'';position:absolute;left:50%;bottom:-6px;width:9px;height:9px;transform:translateX(-50%) rotate(45deg);background:inherit;border-right:1px solid #e8ddec;border-bottom:1px solid #e8ddec}
@media(max-width:950px){.fps-readout{display:none}}
@media(max-width:760px){.music-toggle{padding:6px;font-size:10px;min-height:32px}.stats-grid strong{font-size:24px}}
@media(max-width:430px){.music-toggle{font-size:0;min-width:32px;padding:5px 7px}.music-toggle::before{content:'♫';font-size:16px}}

/* v11 — requested garden only: opaque architectural boundaries, art objects,
   flowerbeds. No changes to rooms, user interface, motion or chat styling. */
.garden-boundary{background:linear-gradient(120deg,#918b9b 0%,#c3b5ca 34%,#ded2d7 60%,#968caa 100%);border:1px solid #82778d;box-shadow:inset 0 0 15px #503b5a30;opacity:1!important;backface-visibility:hidden}
.garden-wall-cap{background:linear-gradient(#efe4d7,#cbbcc4);border:1px solid #b6a5b2}
.garden-gate-title{display:flex;align-items:center;justify-content:center;text-align:center;background:#604775;color:#fff1e8;border:4px solid #d7bfa6;font-size:23px;font-weight:700;letter-spacing:.01em;box-shadow:0 8px 20px #0003;pointer-events:none}
.garden-planter{background:linear-gradient(105deg,#d6bb97,#f1dbbe 47%,#af8b73);border:1px solid #9a816b}
.garden-planter-soil{background:#615341}
.garden-flower-stem{background:#5a8759}
.garden-flower{background:linear-gradient(125deg,#fff8eb,var(--flower-color,#f1b2ce) 32%,#a786bb);border:1px solid #ffffff90;box-shadow:0 0 5px #fff2}
.garden-sculpture-base{background:linear-gradient(100deg,#a696ac,#f1e5d5 50%,#8e7b97);border:1px solid #a58b98}
.garden-sculpture{background:linear-gradient(128deg,#f7f2ec,var(--sculpture-color,#bda2d2) 60%,#796a98);border:2px solid #ffffff75}
.garden-boundary,.garden-wall-cap,.garden-gate-title,.garden-planter,.garden-planter-soil,.garden-flower-stem,.garden-flower,.garden-sculpture-base,.garden-sculpture{pointer-events:none}
/* Quick admin-only portrait/landscape action beside each artwork. */
.artwork-item{grid-template-columns:54px minmax(0,1fr) auto}
.artwork-item-actions{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.artwork-item-actions button{white-space:nowrap;padding:4px 6px}
.artwork-item-actions .frame-orientation-toggle{background:#eee7f5;color:#563c78;border-color:#d2c3e3;font-weight:700}
.artwork-item-actions .frame-orientation-toggle:hover{background:#e0d3ed}