:root{color-scheme:dark;--ink:#fff0d4;--muted:#dfcbb6;--bg:#201a23;--focus:#ffe4a1}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 50% 55%,#594334 0%,#29222a 65%,#191720 100%)}
#room{position:absolute;inset:0}#room>canvas{display:block;width:100%;height:100%;touch-action:auto;user-select:none}
.site-header{position:fixed;z-index:2;top:0;left:0;right:0;padding:22px 30px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.site-header a{pointer-events:auto;color:var(--ink);text-decoration:none;text-shadow:0 1px 8px #181017}
.wordmark{font-size:23px;font-weight:750;letter-spacing:-1.1px}.wordmark span{font-size:10px;vertical-align:super;margin-left:3px;letter-spacing:0}.studio-link{font-size:12px;letter-spacing:.02em;padding:8px 12px;border:1px solid #f5d5a63d;border-radius:20px;background:#211b24d9}.studio-link:hover{background:#4c3730}.studio-link span{margin-left:7px}
a:focus-visible{outline:3px solid var(--focus);outline-offset:5px;border-radius:4px}
.site-footer{position:fixed;z-index:2;bottom:16px;left:30px;right:30px;display:flex;justify-content:space-between;pointer-events:none;color:var(--muted);font-size:10px;letter-spacing:.05em;text-shadow:0 1px 5px #140d08}.site-footer span:last-child{font-size:9px;letter-spacing:.15em}
#loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;background:var(--bg);z-index:3;transition:opacity .6s}#loading.ready{opacity:0;pointer-events:none}.loading-mark{display:grid;place-items:center;width:54px;height:54px;border:1px solid #c99a56;border-radius:18px;color:#ffcf7a;font:600 30px Georgia,serif;box-shadow:0 0 40px #ffbc4b20}#loading p{font-size:12px;color:var(--muted);margin-top:20px}
#loading[hidden]{display:none}
#movementHint{position:fixed;z-index:2;left:50%;bottom:15px;transform:translateX(-50%);margin:0;padding:8px 15px;border:1px solid #ffddb52c;border-radius:20px;background:#302521da;color:#f7e7ce;font-size:11px;white-space:nowrap;pointer-events:none;box-shadow:0 2px 12px #241b181c}#movementHint .desktop-hint{font-weight:650}.touch-hint{display:none}
#walkPad{position:fixed;z-index:2;left:18px;bottom:25px;display:grid;grid-template-columns:repeat(3,45px);grid-template-rows:repeat(2,44px);gap:4px}#walkPad button{border:1px solid #ffe2b452;border-radius:13px;color:#fff0d2;background:#302b29df;font-size:24px;touch-action:none;cursor:pointer;user-select:none;box-shadow:0 2px 8px #1b141c28}#walkPad button:first-child{grid-column:2}#walkPad button:nth-child(2){grid-row:2;grid-column:1}#walkPad button:nth-child(3){grid-row:2;grid-column:2}#walkPad button:nth-child(4){grid-row:2;grid-column:3}#walkPad button:hover,#walkPad button.held{background:#6d573d}#walkPad button:focus-visible{outline:3px solid #ffe4a1;outline-offset:3px}
#room>canvas:focus-visible{outline:2px solid #f6d58a;outline-offset:-3px}
@media(min-width:850px) and (pointer:fine){#walkPad{opacity:.65}#walkPad:hover,#walkPad:focus-within{opacity:1}}
@media(max-width:600px){#movementHint{left:auto;right:18px;bottom:43px;transform:none;padding:8px 10px;font-size:10px}.desktop-hint{display:none}.touch-hint{display:inline}}
#room-error,.no-script{position:absolute;z-index:5;top:50%;left:50%;transform:translate(-50%,-50%);width:min(90%,420px);padding:24px;border-radius:16px;background:#201a23;color:var(--ink)}#room-error a,.no-script a{color:#ffd58c}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.character-source{position:absolute;width:1px;height:1px;border:0;visibility:hidden;pointer-events:none}
@media(max-width:600px){.site-header{padding:16px 18px}.wordmark{font-size:21px}.site-footer{left:18px;right:18px;bottom:18px;justify-content:center}.site-footer span:last-child{display:none}}
@media(prefers-reduced-motion:reduce){#loading{transition:none}}
@media(forced-colors:active){.studio-link{border:1px solid LinkText}.site-header a{color:LinkText}.site-footer{color:CanvasText}}

#benchPrompt{position:fixed;z-index:4;transform:translate(-50%,-100%);padding:12px 18px;border:1px solid #ffe1a17a;border-radius:14px;background:#29221bef;color:#fff0d4;font:600 13px system-ui;box-shadow:0 5px 22px #160f0a55;cursor:pointer;white-space:nowrap}
#benchPrompt::after{content:"";position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:#29221b;transform:translateX(-50%) rotate(45deg);border-right:1px solid #ffe1a17a;border-bottom:1px solid #ffe1a17a}
#getUp{position:fixed;z-index:4;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));padding:15px 21px;border:1px solid #f8d18d;border-radius:16px;background:#f5ce85;color:#332419;font:700 14px system-ui;box-shadow:0 6px 24px #160f0a55;cursor:pointer}
#getUp span{margin-left:13px}#getUp:hover{background:#ffe0a4}#benchPrompt:hover{background:#53402b}
#benchPrompt:focus-visible,#getUp:focus-visible{outline:3px solid #fff0c7;outline-offset:4px}
#benchPrompt[hidden],#getUp[hidden]{display:none}.board-view #walkPad,.board-view #movementHint,.board-view .site-header{display:none}
@media(max-width:600px){#getUp{right:16px;bottom:max(18px,env(safe-area-inset-bottom))}}

.header-actions{display:flex;gap:10px;align-items:center;pointer-events:auto}#editRoom{border:1px solid #f5d5a65c;border-radius:20px;padding:8px 14px;background:#211b24e8;color:#fff0d4;font:600 12px system-ui;cursor:pointer}
#layoutEditor{position:fixed;z-index:6;top:78px;right:24px;width:294px;max-height:calc(100vh - 100px);overflow:auto;padding:20px;border:1px solid #dfbf8e66;border-radius:18px;background:#241f21f5;box-shadow:0 15px 50px #110e1266;color:#fff0d4;backdrop-filter:blur(12px)}
#layoutEditor[hidden]{display:none}.editor-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.editor-title h2{font-size:17px;margin:0;font-weight:650}.editor-help{font-size:12px;color:#dfcbb6;margin:11px 0 18px}#layoutEditor label,#layoutEditor legend{font-size:12px;font-weight:600}#layoutEditor input,#layoutEditor select{display:block;width:100%;min-height:38px;border:1px solid #867466;border-radius:8px;padding:7px 9px;background:#171618;color:#fff4e3;font:13px system-ui;margin:5px 0 13px}#layoutEditor fieldset{margin:14px 0 0;padding:0;border:0}.editor-coordinates{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.editor-modes,.editor-footer{display:flex;gap:8px}#layoutEditor button{border:1px solid #99816b;border-radius:9px;min-height:36px;padding:7px 12px;background:#3c3432;color:#fff0d4;font:600 12px system-ui;cursor:pointer}.editor-modes button{flex:1}#layoutEditor button[aria-pressed="true"]{background:#efd19b;color:#30231a;border-color:#efd19b}.editor-footer{margin-top:20px}.editor-footer #saveLayout{flex:1;background:#f2cc84;color:#30231a;border-color:#f2cc84}#layoutEditor button:disabled{opacity:.45;cursor:default}#layoutEditor #closeLayout{padding:0;width:32px;min-height:32px;font-size:23px;border:0;background:transparent}#layoutStatus{font-size:11px;color:#dfcbb6;min-height:34px;margin:13px 0 0}#layoutEditor :is(button,input,select):focus-visible,#editRoom:focus-visible{outline:3px solid #ffe4a1;outline-offset:3px}.room-editing #walkPad,.room-editing #movementHint,.room-editing #benchPrompt{display:none}
#layoutEditor .editor-modes button{padding:7px 8px}#layoutEditor #deleteLayout{width:100%;border-color:#b57d72;color:#ffd3c9;background:#4c2e2c}#layoutEditor input:disabled{opacity:.5}
#layoutEditor{padding:16px}.editor-help{margin:9px 0 12px;font-size:11px}#layoutEditor input,#layoutEditor select{margin-bottom:10px}.editor-footer{margin-top:14px}



#openDecor{min-height:44px;padding:9px 15px;border:1px solid #f2cc84;border-radius:24px;background:#f2cc84;color:#30231a;font:650 12px system-ui;cursor:pointer;box-shadow:0 3px 18px #17101838}#openDecor span{font-size:17px;margin-right:4px}#openDecor:hover{background:#ffe0a4}#openDecor:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
#editRoom,.studio-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
#decorInventory{position:fixed;z-index:7;top:82px;right:24px;width:386px;max-height:calc(100dvh - 106px);overflow:auto;overscroll-behavior:contain;padding:22px;border:1px solid #dfbf8e66;border-radius:20px;background:#241f21f7;box-shadow:0 18px 60px #110e1270;backdrop-filter:blur(16px);scrollbar-color:#867466 transparent}
#decorInventory[hidden],.decor-card[hidden]{display:none}.decor-eyebrow{font-size:9px;letter-spacing:.17em;color:#e3bd7e;margin:0 0 4px}#decorTitle{font-size:22px;letter-spacing:-.5px}.decor-help{font-size:12px;color:#dfcbb6;margin:12px 0 15px}
#closeDecor{flex:none;width:44px;height:44px;border:1px solid #86746666;border-radius:50%;background:#ffffff06;color:#fff0d4;font:25px system-ui;cursor:pointer}.decor-filters{display:flex;gap:5px;margin-bottom:18px}.decor-filters button{flex:1;min-height:44px;padding:8px 7px;border:1px solid #86746666;border-radius:10px;background:transparent;color:#dfcbb6;font:600 11px system-ui;cursor:pointer}.decor-filters button[aria-pressed="true"]{color:#30231a;background:#efd19b;border-color:#efd19b}
#decorGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.decor-card{min-width:0;border:1px solid #a68b673d;border-radius:12px;background:#30292a;overflow:hidden;display:flex;flex-direction:column}.decor-card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#eee7dc}.decor-card h3{font-size:13px;line-height:1.4;margin:12px 11px 4px}.decor-card p{font-size:10px;line-height:1.5;color:#dfcbb6;margin:0 11px 10px;flex:1}.decor-card button{display:block;margin:0 10px 10px;min-height:44px;border:1px solid #b9a08080;border-radius:8px;background:#44382e;color:#ffdf9e;font:650 12px system-ui;cursor:pointer}.decor-card button:hover{background:#5e4934;border-color:#efd19b}#decorInventory button:focus-visible{outline:3px solid var(--focus);outline-offset:-4px}#decorStatus{font-size:11px;color:#dfcbb6;margin:18px 0 0;line-height:1.6}
@media(max-width:600px){.header-actions{max-width:calc(100vw - 130px);flex-wrap:wrap;justify-content:flex-end;gap:6px}.site-header{align-items:flex-start}#openDecor{padding:8px 11px}#editRoom{padding:8px 11px}.studio-link{padding:8px 11px}#decorInventory,#layoutEditor{top:124px;right:16px;width:calc(100vw - 32px);max-height:calc(100dvh - 144px)}#decorInventory{padding:18px}.decor-card p{font-size:11px}}

#layoutEditor .editor-title{gap:6px}#layoutEditor .editor-title h2{flex:1;min-width:0}
#layoutEditor #layoutDragHandle{display:flex;align-items:center;gap:7px;min-height:44px;width:100%;padding:0;border:0;border-radius:7px;background:transparent;text-align:left;font:650 16px/1.2 system-ui;cursor:grab;touch-action:none;user-select:none}#layoutDragHandle span{color:#dbb67e;font-size:22px;flex:none}#layoutEditor.panel-dragging #layoutDragHandle{cursor:grabbing}#layoutEditor.panel-dragging{user-select:none}
#layoutEditor #closeLayout{flex:none;width:44px;min-height:44px}#layoutMoveHelp{font-size:10px;line-height:1.5;margin:2px 0 10px;color:#dfcbb6}
#layoutPanelPosition{display:flex;gap:5px;margin:0 0 12px}#layoutPanelPosition[hidden]{display:none}#layoutEditor #layoutPanelPosition button{flex:1;min-width:44px;min-height:44px;padding:0;font-size:19px}

.editor-order{display:flex;gap:6px;align-items:flex-start}#layoutEditor .editor-order input{text-align:center;margin:5px 0 4px}#layoutEditor .editor-order button{flex:none;width:44px;min-height:38px;margin-top:5px;font-size:16px}.editor-order-hint{font-size:11px;color:#dfcbb6;margin:0 0 10px}
#layoutEditor .editor-lock{display:flex;align-items:center;gap:8px;min-height:36px;cursor:pointer}#layoutEditor .editor-lock input{flex:none;width:18px;height:18px;margin:0;accent-color:#f5ce85}#layoutEditor input:disabled{opacity:.55;cursor:not-allowed}

#roomCamera{position:fixed;z-index:2;right:24px;bottom:20px;width:230px;max-width:calc(100vw - 36px);padding:10px 13px;border:1px solid #ffddb552;border-radius:14px;background:#302521f2;color:var(--ink);font-size:11px;box-shadow:0 2px 12px #241b1833}
#roomCamera label,#roomCamera>div{display:flex;align-items:center;justify-content:space-between;gap:10px}#roomCamera label{font-weight:650}#roomCamera output{font-weight:400;font-variant-numeric:tabular-nums}#roomCamera input{display:block;width:100%;min-height:28px;margin:3px 0;accent-color:#f5ce85;cursor:pointer}#roomCamera small{color:var(--muted);font-size:10px}#roomCamera button{min-height:28px;padding:3px 9px;border:1px solid #ffddb552;border-radius:7px;background:#49382c;color:var(--ink);font:inherit;cursor:pointer}#roomCamera button:hover{background:#6d573d}#roomCamera :focus-visible{outline:3px solid var(--focus);outline-offset:3px}.board-view #roomCamera{display:none}
@media(max-width:600px){#roomCamera{right:18px;bottom:125px;width:210px}}
#roomFovStatus{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.4}
@media(forced-colors:active){#roomCamera{background:Canvas;color:CanvasText;border-color:CanvasText}#roomCamera small{color:CanvasText}#roomCamera button{background:ButtonFace;color:ButtonText;border-color:ButtonText}}

/* Opening sequence */
#introHint{display:none;position:fixed;z-index:3;left:7vw;bottom:max(24px,10.5vh);align-items:center;gap:14px;padding:0;border:0;background:none;color:#7c6a52;font:400 clamp(13px,1.35vw,21px) 'Helvetica Neue',Arial,system-ui,sans-serif;cursor:pointer;transition:opacity .4s}
.introChevron{display:grid;place-items:center;width:clamp(34px,3.2vw,50px);height:clamp(34px,3.2vw,50px);border-radius:50%;background:#fff;box-shadow:0 1px 8px #0002}.introChevron svg{fill:#1a1713;animation:introBob 1.6s ease-in-out infinite}
@keyframes introBob{50%{transform:translateY(2px)}}
body.intro #introHint{display:flex}body.intro-moving #introHint{opacity:0;pointer-events:none}
body.intro .site-header,body.intro .header-actions,body.intro #walkPad,body.intro #movementHint,body.intro #roomCamera{display:none}
@media(prefers-reduced-motion:reduce){.introChevron svg{animation:none}}

#layoutEditor #streetUploadButton{width:100%;margin:5px 0 4px}
.street-slider{display:flex;justify-content:space-between}#layoutEditor input[type=range]{min-height:24px;padding:0;margin:4px 0 10px;accent-color:#f2cc84}

/* About Anthony: hover tooltip and the opening book popup */
.sr-only-focusable{position:fixed;left:-9999px;top:12px;z-index:9}.sr-only-focusable:focus-visible{left:50%;transform:translateX(-50%);padding:8px 14px;border-radius:20px;border:1px solid #ffddb552;background:#302521ee;color:#fff0d4;font:600 13px system-ui}
#bookTip{position:fixed;z-index:6;pointer-events:none;transform:translate(14px,16px);padding:6px 12px;border-radius:14px;background:#241f21f0;border:1px solid #f2cc84aa;color:#ffe2a8;font:600 13px system-ui;box-shadow:0 6px 20px #0006,0 0 14px #f2cc8444;white-space:nowrap}#bookTip[hidden]{display:none}
#aboutBook{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100vw;height:100vh;overflow:visible;color:#2d2118}
#aboutBook::backdrop{background:#120d12cc;backdrop-filter:blur(6px)}
#aboutBook[open]{display:grid;place-items:center}
#aboutBookClose{position:fixed;top:22px;right:26px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid #ffddb560;background:#241f21;color:#ffe9c0;font:400 26px/1 system-ui;cursor:pointer}
#aboutBookClose:focus-visible{outline:3px solid #ffe4a1;outline-offset:3px}
.book-stage{perspective:2400px;width:100%;display:grid;place-items:center}
.book-spread{position:relative;width:min(980px,92vw);aspect-ratio:1.36;transform-style:preserve-3d;transform:translateX(-25%) rotateX(28deg) scale(.62);opacity:0;transition:transform .85s cubic-bezier(.22,.8,.24,1),opacity .35s ease}
[data-state=open] .book-spread{transform:none;opacity:1}
.book-page{position:absolute;top:0;bottom:0;box-sizing:border-box;padding:clamp(22px,4.4vw,54px);background:linear-gradient(100deg,#f3ead8,#fbf6ea 14%,#f7efdd);overflow:auto;font:400 clamp(13px,1.6vw,19px)/1.6 'Georgia',serif;box-shadow:inset 18px 0 22px -18px #5c452d55}
.book-right{left:50%;right:0;border-radius:2px 16px 16px 2px;box-shadow:inset 18px 0 22px -18px #5c452d66,0 30px 60px -20px #000a;opacity:0;transition:opacity .4s ease}
[data-state=open] .book-right{opacity:1;transition-delay:.55s}
.book-right h3{margin:0 0 .9em;font:italic 400 clamp(22px,3vw,36px)/1.2 Georgia,serif;color:#5b3b24}
.book-right ul{list-style:none;margin:0;padding:0;display:grid;gap:.95em}.book-right li{padding-left:1.1em;position:relative;font-size:.95em}.book-right li::before{content:'';position:absolute;left:0;top:.7em;width:.45em;height:.45em;border-radius:50%;background:#c9a24d}
.book-right b{display:block;font:600 1.02em 'Helvetica Neue',Arial,sans-serif;color:#1d1812}
.book-cover{position:absolute;left:50%;top:0;bottom:0;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.5,.05,.2,1)}
[data-state=open] .book-cover{transform:rotateY(-180deg);transition-delay:.2s}
.book-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book-front{border-radius:2px 16px 16px 2px;background:linear-gradient(135deg,#5a3a28,#3d271b 60%,#33201a);box-shadow:inset 0 0 0 10px #4a2f22,inset 0 0 0 12px #c9a24d99,0 30px 60px -20px #000a;display:grid;place-items:center;color:#e8c777;text-align:center;font:italic 600 clamp(26px,4.2vw,52px)/1.15 Georgia,serif;letter-spacing:.02em;text-shadow:0 1px 0 #0005}
.book-back{transform:rotateY(180deg);right:0;left:0;border-radius:16px 2px 2px 16px;box-shadow:inset -18px 0 22px -18px #5c452d66;background:linear-gradient(260deg,#f3ead8,#fbf6ea 14%,#f7efdd)}
.book-back h2{margin:.2em 0 .6em;font:italic 400 clamp(24px,3.4vw,40px)/1.15 Georgia,serif;color:#2d1d12}.book-back p{margin:0 0 1em}.book-eyebrow{font:600 .72em system-ui;letter-spacing:.22em;color:#a7833b}
[data-state=closed] .book-right,.book-spread:not(:hover) .book-right{pointer-events:auto}
@media(max-width:640px){.book-spread{aspect-ratio:.78;width:94vw;transform:translateX(0) rotateX(28deg) scale(.62)}[data-state=open] .book-spread{transform:none}.book-right{left:0;top:50%;border-radius:2px 2px 16px 16px}.book-cover{left:0;width:100%;height:50%;bottom:auto;transform-origin:center bottom}[data-state=open] .book-cover{transform:rotateX(180deg)}.book-back{transform:rotateX(180deg);border-radius:16px 16px 2px 2px}.book-page{padding:18px}}
@media(prefers-reduced-motion:reduce){.book-spread,.book-cover,.book-right{transition:none!important}}

#roomCamera{display:none!important}

/* Temporarily hidden: remove this rule to bring back "Kho trang trí", "Edit room" and "3D Studio". */
.header-actions{display:none!important}