:root{font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#fff6e5;background:#563a26;font-synthesis:none}*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible,#viewport:focus-visible{outline:3px solid #ffe1a0;outline-offset:3px}button:disabled{cursor:wait;opacity:.5}[hidden]{display:none!important}.header{position:fixed;z-index:10;top:max(22px,env(safe-area-inset-top));left:24px;right:24px;display:flex;align-items:center;gap:12px;pointer-events:none}.header>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:10px;font-size:23px;font-weight:750;letter-spacing:-1px;color:#fff6e5;text-decoration:none;background:#392c29b8;border:1px solid #fff5;border-radius:36px;padding:10px 22px;box-shadow:0 5px 24px #22140f25;backdrop-filter:blur(12px)}.brand-icon{font-size:32px;line-height:1;color:#ffe2b4}.brand-dot,.tagline{display:none}.quiet-button{border:1px solid #fff6;background:#3c2c25b8;padding:14px 18px;border-radius:30px;font-size:12px;box-shadow:0 4px 18px #22140f20;backdrop-filter:blur(12px)}#recenter{margin-left:auto}.quiet-button span{margin-left:8px}main{margin:0;width:100%;height:100svh}.room{position:absolute;inset:0;overflow:hidden;background:#7e5030;isolation:isolate}#backdrop{position:absolute;max-width:none;pointer-events:none;user-select:none}#viewport{position:absolute;inset:0;touch-action:none;z-index:1}canvas{display:block;width:100%;height:100%}.room-badge{position:absolute;z-index:2;top:92px;right:25px;display:flex;align-items:center;gap:7px;border:1px solid #fff4;border-radius:20px;background:#4333269c;padding:8px 13px;font-size:11px;pointer-events:none}.room-badge i{width:6px;height:6px;border-radius:50%;background:#dfbb75}.room-badge span{color:#e7cfac;margin-left:4px}.scene-hint{position:absolute;z-index:2;bottom:165px;left:50%;transform:translateX(-50%);font-size:11px;white-space:nowrap;text-shadow:0 1px 5px #251708;pointer-events:none;background:#47311e85;padding:7px 14px;border-radius:20px}.controls{position:fixed;z-index:4;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:22px;padding:14px 23px;background:#493327a6;backdrop-filter:blur(15px);border:1px solid #f9e3bf80;border-radius:30px;box-shadow:0 8px 35px #29180d35}.welcome{width:206px}.tiny-label{font-size:9px;color:#ddc6a3;letter-spacing:.8px}.welcome h2{font-size:12px;line-height:1.5;font-weight:500;margin:5px 0 9px;min-height:36px}.outfits{display:flex;align-items:center;gap:10px}.outfits>span{font-size:10px;color:#e7cdaa;margin-right:4px}.swatch{width:21px;height:21px;border:2px solid #78614c;outline:1px solid transparent;border-radius:50%;padding:0}.swatch.active{outline:2px solid #fff0c7}.peach{background:#e9a35c}.mint{background:#b2c39a}.lilac{background:#c3acd1}.actions{display:flex;gap:6px}.actions>button{width:74px;border:1px solid transparent;background:transparent;border-radius:18px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:background .18s}.actions>button:hover{background:#e9d1ab24}.actions>button.selected{background:#f3dab332;border-color:#fff1}.action-icon{height:33px;font-size:30px;line-height:1.1;color:#fff2da}.actions b{font-size:13px;font-weight:500}.actions small{font-size:9px;color:#e8d3b7}footer{display:none}.loading{position:absolute;z-index:5;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#61452f;text-align:center;padding:28px}.loading-mark{font-size:64px;color:#ffd69d;animation:breathe 1.7s ease-in-out infinite}.loading h2{font-size:20px}.loading p{font-size:13px;line-height:1.8;max-width:300px;color:#ebd1ae}.loading button{background:#f3d5a5;color:#61412b;border:0;border-radius:24px;padding:13px 25px;margin-top:12px}@keyframes breathe{50%{transform:translateY(-5px);opacity:.6}}@media(max-width:760px){.header{top:max(16px,env(safe-area-inset-top));left:13px;right:13px;gap:7px}.brand{font-size:19px;padding:9px 14px;gap:6px}.brand-icon{font-size:27px}.quiet-button{font-size:10px;padding:12px 10px}.quiet-button span{margin-left:4px}.room-badge{top:78px;right:14px;font-size:9px;padding:7px 10px}.controls{bottom:max(14px,env(safe-area-inset-bottom));width:calc(100% - 24px);display:block;padding:11px 12px 9px;border-radius:25px}.welcome{width:100%;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:0 4px 8px;border-bottom:1px solid #efd4ac29}.tiny-label,.outfits>span{display:none}.welcome h2{margin:0;min-height:0;font-size:10px;line-height:1.45;max-width:210px}.outfits{gap:8px;flex-shrink:0}.swatch{width:17px;height:17px}.actions{justify-content:space-between;padding-top:5px;gap:3px}.actions>button{width:auto;flex:1;padding:8px 2px;border-radius:14px;gap:4px}.actions b{font-size:12px}.actions small{display:none}.action-icon{height:28px;font-size:26px}.scene-hint{bottom:152px;font-size:9px;padding:6px 10px}}@media(max-height:500px) and (orientation:landscape){.header{top:12px;left:16px;right:16px}.brand{font-size:18px;padding:7px 14px}.brand-icon{font-size:26px}.quiet-button{padding:10px 12px}.room-badge{top:65px;font-size:9px}.controls{width:auto;bottom:10px;padding:5px 12px;display:flex;border-radius:22px}.welcome{display:none}.actions{padding:0;gap:6px}.actions>button{width:60px;padding:6px 8px}.actions small{display:none}.action-icon{height:26px;font-size:24px}.actions b{font-size:11px}.scene-hint{bottom:91px;font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Exploration controls. Keep the warm environment visible behind quiet glass UI. */
#places-open{margin-left:auto}#recenter{margin-left:0}.quiet-button{min-height:42px;white-space:nowrap}.actions>button{min-height:68px}.actions small{white-space:nowrap}.controls{gap:18px}.welcome{width:196px}.outfits{gap:2px}.outfits>span{margin-right:5px}.swatch{position:relative;width:32px;height:32px;border:0;outline:0;background:transparent;flex-shrink:0}.swatch:after{content:"";position:absolute;inset:6px;border:2px solid #78614c;border-radius:50%;background:var(--swatch)}.swatch.peach{--swatch:#e9a35c}.swatch.mint{--swatch:#b2c39a}.swatch.lilac{--swatch:#c3acd1}.swatch.active{outline:0}.swatch.active:after{outline:2px solid #fff0c7}.swatch:focus-visible{outline:2px solid #fff0c7;outline-offset:0}
#joystick{position:absolute;z-index:3;left:30px;bottom:43px;width:114px;height:114px;border:1.5px solid #ffedcb99;border-radius:50%;background:radial-gradient(circle,#f8dfbc22 0 38%,#4d342551 39%);box-shadow:inset 0 0 25px #e7c3941a,0 5px 22px #2f1c1520;backdrop-filter:blur(7px);touch-action:none;user-select:none;cursor:grab}#joystick:active{cursor:grabbing}.joystick-arrows{position:absolute;inset:0;display:grid;place-items:center;font-size:96px;line-height:1;font-weight:200;color:#ffedcf40;pointer-events:none}#joystick-knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:2px solid #fff4d9bb;background:linear-gradient(145deg,#f7ecd6d9,#d1b790a8);box-shadow:0 3px 12px #33201533;pointer-events:none;will-change:transform}.joystick-caption{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);font-size:9px;color:#f8e8ca;text-shadow:0 1px 4px #24170f;white-space:nowrap;pointer-events:none}#destination-label{position:absolute;z-index:3;top:94px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);background:#443124c9;border:1px solid #fff3;border-radius:22px;padding:9px 16px;backdrop-filter:blur(8px);font-size:12px;color:#fff0d2;text-align:center;pointer-events:none}
body:not(.room-ready) .quiet-button,body:not(.room-ready) .controls,body:not(.room-ready) #joystick{pointer-events:none;opacity:.4}body:not(.room-ready) #destination-label{display:none}
#places-dialog{color:#664631;background:#f6e9d5;border:1px solid #fff4d6;border-radius:28px;padding:25px;width:420px;max-width:calc(100% - 28px);max-height:calc(100svh - 32px);box-shadow:0 22px 75px #25150866;overflow:auto}#places-dialog::backdrop{background:#21180e80;backdrop-filter:blur(4px)}.places-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.places-eyebrow{font-size:10px;letter-spacing:1px;color:#9d7d5c}.places-heading h2{margin:6px 0 0;font-size:22px;letter-spacing:-.6px}#places-close{border:0;background:#dec6a455;color:#896344;border-radius:50%;width:40px;height:40px;flex-shrink:0;font-size:25px;line-height:1}#places-description{font-size:12px;line-height:1.6;color:#96785d;margin:14px 0 18px}.places-list{display:grid;grid-template-columns:1fr 1fr;gap:9px}.places-list button{display:flex;align-items:center;flex-direction:column;gap:5px;border:1px solid #dbc4a6;background:#fffbf2a8;border-radius:17px;min-height:100px;padding:12px 7px;color:#6d4a30}.places-list button:hover{background:#fffaf0;border-color:#ae875a}.places-list button:focus-visible,#places-close:focus-visible{outline-color:#8c6746}.places-list button>span{font-size:25px;line-height:1.15;color:#bd8a4d}.places-list b{font-size:13px;font-weight:650}.places-list small{font-size:10px;color:#9a7e62}.places-list button:last-child{grid-column:1/-1;min-height:74px;display:grid;grid-template-columns:32px auto;column-gap:10px;justify-content:center;text-align:left}.places-list button:last-child span{grid-row:1/3;align-self:center}.places-list button:last-child b{align-self:end}.places-list button:last-child small{align-self:start}.places-footnote{margin:15px 0 0;color:#a18a72;font-size:10px;line-height:1.6;text-align:center}
@media(max-width:760px){.header{left:10px;right:10px;gap:5px}.brand{font-size:17px;gap:4px;padding:10px 10px;white-space:nowrap}.brand-icon{font-size:24px}.quiet-button{padding:10px 9px;min-height:42px;font-size:10px}.quiet-button span{margin-left:3px}.controls{width:calc(100% - 20px);padding:7px 9px 8px}.welcome{width:100%;padding:0 1px 5px;gap:3px}.welcome h2{max-width:calc(100% - 120px);font-size:10px}.outfits{gap:0}.swatch{width:40px;height:40px}.swatch:after{inset:11px}.actions{gap:2px;padding-top:4px}.actions>button{min-width:0;min-height:62px;padding:7px 1px;gap:4px}.actions b{font-size:11px}.action-icon{font-size:24px;height:26px}.scene-hint{bottom:164px;font-size:9px}#joystick{width:88px;height:88px;left:16px;bottom:191px}.joystick-arrows{font-size:74px}#joystick-knob{width:38px;height:38px;margin:-19px 0 0 -19px}.joystick-caption{font-size:8px;top:calc(100% + 5px)}#destination-label{top:115px;font-size:11px;max-width:calc(100% - 26px);padding:8px 13px}#places-dialog{padding:21px;border-radius:24px}.places-heading h2{font-size:20px}}
@media(max-width:350px){.brand{padding:10px 8px;font-size:16px}.brand-icon{font-size:22px}.header{gap:4px}.quiet-button{padding:10px 7px;font-size:9px}.quiet-button span{display:none}.welcome h2{max-width:calc(100% - 115px);font-size:9px}.outfits{margin-right:-3px}.swatch{width:38px}.swatch:after{inset:11px 10px}.scene-hint{font-size:8px;padding:6px 8px}.actions b{font-size:10px}}
@media(max-height:500px) and (orientation:landscape){.header{left:16px;right:16px;gap:8px}.brand{font-size:18px;padding:7px 14px}.brand-icon{font-size:26px}.quiet-button{min-height:40px;padding:8px 12px;font-size:10px}.controls{width:auto;padding:4px 12px;bottom:10px}.actions>button{width:58px;min-height:62px;padding:5px 8px}.scene-hint{bottom:89px}#joystick{width:82px;height:82px;left:20px;bottom:31px}#joystick-knob{width:36px;height:36px;margin:-18px 0 0 -18px}.joystick-arrows{font-size:68px}#destination-label{top:66px;font-size:10px}.places-heading h2{font-size:19px}#places-dialog{padding:17px 23px;width:480px}.places-list{grid-template-columns:repeat(3,1fr);gap:7px}.places-list button{min-height:78px;padding:8px}.places-list button:last-child{grid-column:auto;display:flex;min-height:78px;text-align:center}.places-list button:last-child b,.places-list button:last-child small{align-self:center}.places-list small{font-size:9px}#places-description{margin:9px 0 12px}.places-footnote{margin-top:10px}}
body:not(.room-ready) .room{z-index:20}

@media(min-width:761px) and (max-width:1050px) and (min-height:501px){#joystick{bottom:190px;width:92px;height:92px}.joystick-arrows{font-size:76px}}
/* Six rooms: an even grid of destinations, no full-width final card. */
.places-list button:last-child{grid-column:auto;display:flex;min-height:100px;text-align:center}.places-list button:last-child span{grid-row:auto}.places-list button:last-child b,.places-list button:last-child small{align-self:center}
@media(max-height:500px) and (orientation:landscape){.places-list button:last-child{min-height:78px}}
.room-badge{transition:background .4s}#destination-label{animation:toast .35s ease-out}@keyframes toast{from{opacity:0;transform:translate(-50%,-6px)}}
/* 수면실 dream mode: a calm top bar, quieter controls, nothing else in the way. */
#sleep-bar{position:absolute;z-index:3;top:94px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px;border-radius:26px;background:#2b2450c4;border:1px solid #cfc3ff55;backdrop-filter:blur(10px);font-size:12px;color:#efe9ff;white-space:nowrap;animation:toast .5s ease-out}#sleep-bar button{border:1px solid #d8ceff66;background:#ffffff14;border-radius:20px;min-height:40px;padding:8px 13px;font-size:11px;color:#f5f1ff}#sleep-bar #wake{background:#f3e6ff2e}
body.sleeping .room-badge,body.sleeping #destination-label,body.sleeping #joystick{opacity:0;pointer-events:none;transition:opacity 1s}body.sleeping .controls,body.sleeping .header{opacity:.55;transition:opacity 1.2s}body.dreaming .controls,body.dreaming .header,body.dreaming .scene-hint{opacity:.3}
@media(max-width:760px){#sleep-bar{top:78px;font-size:11px;padding-left:12px}#sleep-bar span{display:none}}
@media(max-height:500px) and (orientation:landscape){#sleep-bar{top:62px}}
/* ---------- Phase 2: visitors, name tags, chat ---------- */
#labels{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.nametag{position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:center;gap:5px;will-change:transform}
.nametag b{font-size:11px;font-weight:650;line-height:1;color:#fff6e8;background:#3d2c23b8;border:1px solid #fff3;border-radius:10px;padding:4px 8px;white-space:nowrap;text-shadow:0 1px 2px #0005}
.nametag.self b{background:#c9824bd0}
.nametag .bubble{position:relative;max-width:190px;padding:8px 12px;border-radius:16px;background:#fffaf0;color:#5a3b28;font-size:12px;line-height:1.45;box-shadow:0 4px 14px #3a20102e;word-break:keep-all;overflow-wrap:anywhere;text-align:center}
.nametag .bubble:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:#fffaf0}
.nametag .bubble.pop{animation:bubble .28s ease-out}@keyframes bubble{from{opacity:0;transform:translateY(6px) scale(.9)}}
.online-pill{position:absolute;z-index:3;top:92px;left:24px;display:flex;align-items:center;gap:7px;min-height:34px;border:1px solid #fff4;border-radius:20px;background:#4333269c;padding:7px 13px;font-size:11px;color:#fff6e5;backdrop-filter:blur(8px)}
.online-pill i{width:7px;height:7px;border-radius:50%;background:#bda98f}
.online-pill[data-status=online] i{background:#8fd17a;box-shadow:0 0 0 3px #8fd17a33}.online-pill[data-status=connecting] i{background:#f2c66d;animation:breathe 1.2s infinite}.online-pill[data-status=offline] i{background:#e7826b}
#chat-open{position:absolute;z-index:3;right:30px;bottom:43px;width:76px;height:76px;border-radius:50%;border:1.5px solid #ffedcb99;background:#4d3425a8;backdrop-filter:blur(8px);box-shadow:0 5px 22px #2f1c1530;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#fff3dc}
#chat-open span{font-size:24px;line-height:1}#chat-open b{font-size:10px;font-weight:600}
#chat-open em{position:absolute;top:-2px;right:-2px;min-width:22px;height:22px;border-radius:11px;background:#e9785a;color:#fff;font-style:normal;font-size:11px;font-weight:700;display:grid;place-items:center;padding:0 5px;border:2px solid #fff1dd}
#chat{position:fixed;z-index:15;right:24px;top:140px;bottom:150px;width:350px;display:flex;flex-direction:column;background:#f8eddcf2;color:#5d3f2b;border:1px solid #fff4d6;border-radius:24px;box-shadow:0 18px 60px #25150855;backdrop-filter:blur(14px);overflow:hidden}
#chat[hidden]{display:none}
#chat header{display:flex;align-items:center;gap:8px;padding:14px 14px 10px 18px;border-bottom:1px solid #e3cfb1}
#chat header div{flex:1;display:flex;align-items:baseline;gap:8px}#chat h2{margin:0;font-size:16px}#chat-count{font-size:11px;color:#9b7c5d}
#chat-rename{border:1px solid #d9c1a0;background:#fffaf2;border-radius:16px;min-height:34px;padding:6px 11px;font-size:11px;color:#7a5539}
#chat-close{border:0;background:#dec6a455;color:#896344;border-radius:50%;width:38px;height:38px;font-size:24px;line-height:1}
#chat-log{flex:1;margin:0;padding:12px 14px;list-style:none;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;-webkit-overflow-scrolling:touch}
#chat-log li{max-width:84%;display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.5}
#chat-log li b{font-size:11px;color:#a07650;font-weight:650}#chat-log li span{background:#fffaf2;border:1px solid #ead8bd;border-radius:4px 16px 16px 16px;padding:8px 11px;overflow-wrap:anywhere;word-break:keep-all}
#chat-log li time{font-size:9px;color:#b39a80}
#chat-log li.me{align-self:flex-end;align-items:flex-end}#chat-log li.me span{background:#f1b27f;border-color:#e59f68;color:#4a2c18;border-radius:16px 4px 16px 16px}#chat-log li.me b{display:none}
#chat-log li.system{align-self:center;max-width:100%;font-size:11px;color:#9b7c5d;background:#ead8bd66;border-radius:12px;padding:3px 10px}
#chat-note{margin:0 14px 6px;padding:7px 10px;border-radius:12px;background:#fff1d6;color:#9a5a2a;font-size:11px}
#chat-form{display:flex;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));border-top:1px solid #e3cfb1;background:#f3e3cc}
#chat-input{flex:1;min-width:0;min-height:44px;border:1px solid #d6bc98;border-radius:22px;padding:0 15px;font:inherit;font-size:16px;color:#4b3020;background:#fffdf8}
#chat-input:focus{outline:2px solid #e3a565;outline-offset:1px}
#chat-form button{min-height:44px;border:0;border-radius:22px;padding:0 16px;background:#c9824b;color:#fff8ee;font-weight:650}
#join-dialog{color:#664631;background:#f6e9d5;border:1px solid #fff4d6;border-radius:28px;padding:26px;width:380px;max-width:calc(100% - 28px);box-shadow:0 22px 75px #25150866}
#join-dialog::backdrop{background:#21180e80;backdrop-filter:blur(4px)}#join-dialog h2{margin:6px 0 4px;font-size:21px;letter-spacing:-.5px}#join-dialog p{font-size:12px;color:#96785d;margin:0 0 14px;line-height:1.6}
#nickname{width:100%;min-height:48px;border:1px solid #d6bc98;border-radius:16px;padding:0 15px;font:inherit;font-size:16px;color:#4b3020;background:#fffdf8}
#join-note{min-height:18px;margin:8px 2px 4px!important;color:#c0603d!important}
.join-actions{display:flex;gap:9px}.join-actions button{flex:1;min-height:48px;border-radius:16px;border:1px solid #d6bc98;background:#fffaf2;color:#7a5539;font-weight:600}.join-actions #join-enter{background:#c9824b;border-color:#c9824b;color:#fff8ee}
@media(max-width:760px){
 .online-pill{top:78px;left:13px;font-size:9px;min-height:30px;padding:6px 10px}
 #chat-open{width:64px;height:64px;right:16px;bottom:191px}#chat-open span{font-size:21px}
 /* Portrait-first bottom sheet that rides above the keyboard. */
 #chat{left:0;right:0;top:auto;width:auto;bottom:var(--keyboard,0px);height:min(56svh,460px);border-radius:24px 24px 0 0;border-bottom:0}
 body.keyboard-open #chat{height:min(calc(100svh - var(--keyboard,0px) - 70px),360px)}
 body.chat-open .controls,body.chat-open #joystick,body.chat-open .scene-hint,body.chat-open #chat-open{visibility:hidden}
}
@media(max-height:500px) and (orientation:landscape){
 .online-pill{top:62px;left:16px}#chat-open{right:20px;bottom:31px;width:58px;height:58px}
 #chat{left:auto;right:0;top:0;bottom:var(--keyboard,0px);height:auto;width:min(52%,380px);border-radius:24px 0 0 24px}
 body.chat-open .controls{visibility:hidden}
}
@media(min-width:761px) and (max-width:1050px) and (min-height:501px){#chat-open{bottom:190px}}
body.sleeping #labels,body.sleeping .online-pill,body.sleeping #chat-open{opacity:0;pointer-events:none}
body:not(.room-ready) .online-pill,body:not(.room-ready) #chat-open{display:none}
/* ---------- Phase 2.1: frosted-glass chat (glassmorphism) ---------- */
#chat{background:linear-gradient(160deg,#fff8ee66,#ffe9d433 55%,#f7d2b444);border:1px solid #ffffff8c;box-shadow:0 24px 60px #2a160a40,inset 0 1px 0 #ffffffb3,inset 0 -1px 0 #ffffff33;-webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);color:#4a2f1f}
#chat:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(120% 60% at 15% 0%,#ffffff55,transparent 60%)}
#chat>*{position:relative}
#chat header{border-bottom:1px solid #ffffff59}
#chat h2{color:#4a2f1f;text-shadow:0 1px 0 #fff8}#chat-count{color:#7a5236;background:#ffffff59;border-radius:10px;padding:2px 8px}
#chat-rename{background:#ffffff4d;border:1px solid #ffffff99;color:#5d3b25;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#chat-close{background:#ffffff4d;color:#6b4429;border:1px solid #ffffff80}
#chat-log li b{color:#6e4a31;text-shadow:0 1px 0 #fff9}
#chat-log li span{background:#ffffffa6;border:1px solid #ffffffcc;box-shadow:0 4px 14px #5a301414;color:#3f2717;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#chat-log li.me span{background:linear-gradient(135deg,#ffc79bde,#f2a074d9);border-color:#ffe2cbb3;color:#3c200f}
#chat-log li time{color:#7f604a}
#chat-log li.system{background:#ffffff47;border:1px solid #ffffff73;color:#6b4a33}
#chat-note{background:#fff3dfcc;border:1px solid #ffffffb3}
#chat-form{background:#ffffff26;border-top:1px solid #ffffff59}
#chat-input{background:#ffffffb3;border:1px solid #ffffffd9;box-shadow:inset 0 1px 3px #5a30141a}
#chat-form button{background:linear-gradient(135deg,#e99a63,#c97445);box-shadow:0 6px 16px #c9744566,inset 0 1px 0 #ffffff59}
#chat-log::-webkit-scrollbar{width:6px}#chat-log::-webkit-scrollbar-thumb{background:#ffffff80;border-radius:3px}
#chat-open{background:linear-gradient(160deg,#fff8ee55,#f7d2b433);border:1px solid #ffffff99;box-shadow:0 10px 26px #2a160a40,inset 0 1px 0 #ffffffb3;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
.online-pill{background:#fff8ee33;border:1px solid #ffffff73;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
/* Nickname dialog in the same glass, with a dice for new suggestions. */
#join-dialog{background:linear-gradient(160deg,#fff8eed9,#ffeadbc4);border:1px solid #ffffffb3;box-shadow:0 30px 80px #25150866,inset 0 1px 0 #fff;-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%)}
#join-dialog::backdrop{background:#21180e59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nickname-row{display:flex;gap:8px}.nickname-row #nickname{flex:1;min-width:0;background:#ffffffcc}
#nickname-reroll{flex-shrink:0;width:48px;min-height:48px;border-radius:16px;border:1px solid #ffffffd9;background:#ffffff8c;font-size:22px;box-shadow:0 4px 12px #5a301414}
#nickname-reroll:active{transform:rotate(-20deg) scale(.94)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){#chat{background:#f8eddcf2}#chat-open{background:#4d3425d0}}
#chat-open b{color:#5a3520;text-shadow:0 1px 0 #fff9}#chat-open{color:#5a3520}
/* ---------- Phase 4: 매점, wallet, toasts, mini-games (warm glass) ---------- */
#wallet{position:absolute;z-index:3;top:132px;left:24px;display:flex;gap:9px;align-items:center;min-height:32px;border:1px solid #ffffff73;border-radius:18px;background:#fff8ee33;-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);padding:6px 12px;font-size:11px;color:#fff6e5}
#wallet b{font-weight:700}
#shop-open{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:180px;min-height:46px;padding:10px 20px;border-radius:24px;border:1px solid #ffffffb3;background:linear-gradient(135deg,#f3a874e6,#d9824fe6);color:#fff;font-weight:700;font-size:14px;box-shadow:0 10px 26px #7a3c1440,inset 0 1px 0 #ffffff80;animation:toast .4s ease-out}
.action-icon{position:relative}.action-icon .count{position:absolute;right:-12px;top:-4px;min-width:18px;height:18px;border-radius:9px;background:#fff1dc;color:#7a4321;font-style:normal;font-size:10px;font-weight:800;line-height:18px;padding:0 4px;box-shadow:0 2px 6px #0003}
.actions>button.empty .count{background:#8f7764;color:#f6e8d6}
#toast{position:absolute;z-index:6;left:50%;top:132px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:calc(100% - 28px);padding:9px 10px 9px 16px;border-radius:22px;border:1px solid #ffffffa6;background:linear-gradient(160deg,#fff8eee6,#ffe7d3d9);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);color:#5a3520;font-size:12px;box-shadow:0 12px 30px #2a160a33;animation:toast .35s ease-out}
#toast button{flex-shrink:0;min-height:36px;border:0;border-radius:18px;padding:6px 13px;background:#c97445;color:#fff;font-weight:700;font-size:12px}
#game{position:absolute;z-index:7;left:50%;top:118px;transform:translateX(-50%);width:min(360px,calc(100% - 28px));padding:18px;border-radius:26px;border:1px solid #ffffffb3;background:linear-gradient(160deg,#fff8eeeb,#ffe5cee0);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);color:#4a2f1f;box-shadow:0 24px 60px #2a160a55;text-align:center;animation:toast .35s ease-out}
#game h2{margin:0 0 6px;font-size:17px}#game p{margin:0 0 12px;font-size:12px;color:#7a5236;line-height:1.5}
#game .gauge{position:relative;height:26px;border-radius:13px;background:linear-gradient(90deg,#e8cfb2,#f6e3cc,#e8cfb2);margin:6px 4px 16px;overflow:hidden;box-shadow:inset 0 2px 4px #5a301422}
#game .gauge .good{position:absolute;left:33%;width:34%;top:0;bottom:0;background:#f7c58e88}#game .gauge .sweet{position:absolute;left:43%;width:14%;top:0;bottom:0;background:linear-gradient(#ffd977,#f4b23f)}
#game .gauge .marker{position:absolute;top:-3px;bottom:-3px;width:6px;margin-left:-3px;border-radius:3px;background:#6b3a1c;box-shadow:0 0 0 2px #fff}
#game label{display:block;text-align:left;font-size:11px;color:#7a5236;margin:0 4px 10px}
#game .meter{display:block;height:14px;border-radius:7px;background:#ead6bf;margin-top:4px;overflow:hidden}#game .meter i{display:block;height:100%;width:0;border-radius:7px;background:linear-gradient(90deg,#f1cf9d,#e3a35f)}
#game .meter.freeze i{background:linear-gradient(90deg,#a9d9f5,#6fb3e8)}#game .meter.freeze i.hot{background:linear-gradient(90deg,#8ec5f0,#e67a7a)}
#game .timer{font-weight:700;color:#a35d2d}
.game-button{width:100%;min-height:56px;border:0;border-radius:20px;background:linear-gradient(135deg,#f0a26a,#c97445);color:#fff;font-size:17px;font-weight:800;box-shadow:0 8px 20px #c9744566,inset 0 1px 0 #ffffff80;touch-action:none;user-select:none;-webkit-user-select:none}
.game-button:active,.game-button.active{transform:scale(.97);filter:brightness(1.05)}
#game-result{margin:12px 0 0!important;font-size:15px!important;font-weight:800;color:#a3501f!important}
body.playing .controls,body.playing #joystick,body.playing #shop-open,body.playing .scene-hint{visibility:hidden}
#shop-dialog{color:#5a3520;border:1px solid #ffffffb3;border-radius:28px;padding:22px;width:440px;max-width:calc(100% - 24px);max-height:calc(100svh - 32px);overflow:auto;background:linear-gradient(160deg,#fff8eef0,#ffe8d6e6);-webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);box-shadow:0 30px 80px #25150866,inset 0 1px 0 #fff}
#shop-dialog::backdrop{background:#21180e59;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
#shop-dialog .places-heading{gap:10px}#shop-balance{margin-left:auto;padding:6px 12px;border-radius:14px;background:#ffffffa6;border:1px solid #fff;font-weight:800;color:#a3501f}
#shop-close{border:0;background:#dec6a455;color:#896344;border-radius:50%;width:40px;height:40px;font-size:25px;line-height:1;flex-shrink:0}
.shop-items{display:grid;gap:10px;margin-top:16px}
.shop-items article{display:grid;grid-template-columns:64px 1fr;gap:4px 12px;align-items:center;padding:12px;border-radius:20px;background:#ffffff8c;border:1px solid #ffffffd9;box-shadow:0 6px 18px #5a301412}
.shop-items h3{margin:0;font-size:14px}.shop-items p{margin:2px 0;font-size:11px;color:#8a6a50}.shop-items .bag{font-size:11px;font-weight:700;color:#b0622f}
.shop-actions{grid-column:1/-1;display:flex;gap:8px;margin-top:6px}.shop-actions button{flex:1;min-height:42px;border-radius:14px;border:1px solid #e3c39e;background:#fffaf2;color:#7a4a28;font-weight:700;font-size:12px}
.shop-actions [data-free]{background:linear-gradient(135deg,#ffe28f,#f6bf55);border-color:#efb84c;color:#6b3f12}.shop-actions button:disabled{opacity:.45}
.snack-art{width:60px;height:60px;border-radius:18px;background:#fff3e2;position:relative;box-shadow:inset 0 0 0 1px #f0dcc0}
.snack-art.egg:before{content:"";position:absolute;left:16px;top:9px;width:28px;height:38px;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#e3a873,#a96534 70%);box-shadow:0 3px 6px #6b3a1c44}
.snack-art.egg:after{content:"";position:absolute;left:21px;top:16px;width:4px;height:4px;border-radius:50%;background:#6b3a1c66;box-shadow:9px 7px 0 -1px #6b3a1c55,4px 16px 0 -1px #6b3a1c55,13px 20px 0 0 #6b3a1c44}
.snack-art.drink:before{content:"";position:absolute;left:15px;top:14px;width:30px;height:36px;background:linear-gradient(#f2e2bf 0 22%,#fff6e6 22%);clip-path:polygon(0 0,100% 0,88% 100%,12% 100%);box-shadow:0 3px 6px #6b3a1c33}
.snack-art.drink:after{content:"";position:absolute;left:34px;top:4px;width:4px;height:22px;border-radius:2px;background:#ef8f7a;transform:rotate(14deg)}
.shop-sub{margin:18px 2px 8px;font-size:14px}.shop-sub small{font-size:10px;font-weight:500;color:#9a7a5d;margin-left:6px}
.shop-games{display:grid;grid-template-columns:1fr 1fr;gap:8px}.shop-games button{display:flex;flex-direction:column;gap:3px;align-items:center;min-height:62px;border-radius:16px;border:1px solid #ffffffd9;background:#ffffff8c;color:#6b4429;font-weight:700;font-size:12px}.shop-games small{font-weight:500;color:#9a7a5d;font-size:10px}.shop-games button:disabled{opacity:.45}
@media(max-width:760px){#wallet{top:116px;left:13px;font-size:10px;min-height:28px;padding:5px 10px;gap:7px}#shop-open{bottom:170px}#toast{top:116px;font-size:11px}#game{top:110px}.action-icon .count{right:-10px;top:-3px;min-width:16px;height:16px;line-height:16px;font-size:9px}}
@media(max-height:500px) and (orientation:landscape){#wallet{top:100px;left:16px}#shop-open{bottom:96px}#toast{top:60px}#game{top:56px;padding:12px}}
body.sleeping #wallet,body.sleeping #shop-open{opacity:0;pointer-events:none}
body:not(.room-ready) #wallet,body:not(.room-ready) #shop-open{display:none}
#shop-open{bottom:205px}@media(max-width:760px){#shop-open{bottom:206px}}@media(max-height:500px) and (orientation:landscape){#shop-open{bottom:120px}}
/* 친구 초대 next to the visitor count. */
#social-row{position:absolute;z-index:3;top:92px;left:24px;display:flex;gap:6px;align-items:center}
#social-row .online-pill{position:static}
#invite{min-height:34px;border:1px solid #ffe58a;border-radius:20px;padding:7px 12px;background:linear-gradient(135deg,#fee500f0,#f7d23ae6);color:#3b1e1e;font-size:11px;font-weight:700;box-shadow:0 6px 16px #3b1e1e26}
@media(max-width:760px){#social-row{top:78px;left:13px;gap:5px}#social-row .online-pill{top:auto;left:auto}#invite{min-height:30px;padding:6px 10px;font-size:10px}}
@media(max-height:500px) and (orientation:landscape){#social-row{top:62px;left:16px}}
body.sleeping #social-row{opacity:0;pointer-events:none}body:not(.room-ready) #invite{display:none}
/* ---------- 중앙 휴게실 TV ads ---------- */
#tv-ad{position:absolute;z-index:4;transform:translate(-50%,-50%);max-width:calc(100% - 28px);min-height:48px;padding:11px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.75);background:rgba(255,250,245,.72);-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);box-shadow:0 8px 28px rgba(120,80,60,.18),inset 0 1px 0 #fff;color:#5B4A42;font-size:14px;font-weight:800;white-space:nowrap;transition:transform .15s}
#tv-ad[data-state=ready]{background:linear-gradient(160deg,#FFD0BD,#FFB59A);border-color:#fff;box-shadow:0 10px 26px rgba(255,140,110,.38),inset 0 2px 0 rgba(255,255,255,.7);animation:tvPulse 1.6s ease-in-out infinite}
#tv-ad:disabled{cursor:default;opacity:1;font-weight:700;font-size:13px}
#tv-ad:active:not(:disabled){transform:translate(-50%,-50%) scale(.94)}
@keyframes tvPulse{50%{box-shadow:0 10px 26px rgba(255,140,110,.38),0 0 0 8px rgba(255,181,154,.25),inset 0 2px 0 rgba(255,255,255,.7)}}
#shop-tv{margin-top:12px;padding:12px 14px;border-radius:20px;background:#fff6e0cc;border:1px solid #fff;display:flex;flex-direction:column;gap:10px;align-items:stretch}
#shop-tv p{margin:0;font-size:13px;line-height:1.5;color:#6b4429;font-weight:600}
#shop-tv button{min-height:44px;border-radius:999px;border:1px solid #fff;background:linear-gradient(160deg,#FFD0BD,#FFB59A);color:#5B4A42;font-weight:800;font-size:14px;box-shadow:0 8px 20px rgba(255,140,110,.3),inset 0 2px 0 rgba(255,255,255,.7)}
.shop-actions .short{flex:1;display:grid;place-items:center;min-height:42px;border-radius:14px;border:1.5px dashed #e3c39e;color:#9a7a5d;font-size:13px;font-weight:700}
.places-footnote a,.join-privacy a{color:#8a6448;text-decoration:underline;text-underline-offset:2px}
.join-privacy{margin:0 0 10px!important;text-align:right;font-size:12px!important}
body.sleeping #tv-ad{display:none}