.preview-scene{background-image:url('/cafe-v3.webp');background-size:cover;background-position:center}.stage{background:#af8463}.room-chat-shortcut{position:absolute;right:10px;bottom:10px;z-index:3;background:#fffaf3f5;box-shadow:0 2px 10px #3d253529}#closeRoomChat{display:block;margin:9px 9px 0 auto}#closeRoomChat[hidden]{display:none}#bubble{background:#fffaf3f5;border:1px solid #d1b3a3;color:#412d39;max-width:calc(100% - 24px);z-index:4}.conversation-paper{border-radius:8px;background:linear-gradient(125deg,#fff7e5,#f2dfca);padding:22px;margin:13px 0;box-shadow:0 3px 12px #633b2420;border-left:4px solid #a84f65}.conversation-paper>p{font:24px/1.32 Georgia;margin:12px 0;color:#50313f}.card-kind{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#81465a}#conversationCards{padding:20px;background:#fffaf2;border:1px solid var(--line);border-radius:10px;margin-bottom:14px}.card-heading h3{font:25px Georgia;margin:8px 0}#conversationCards select{font:13px system-ui;min-height:42px;border:1px solid #bea397;border-radius:6px;padding:8px;background:#fffaf2;color:var(--ink);width:100%}#world{aspect-ratio:680/440}.world-heading h1{font-size:clamp(30px,4vw,44px)}
@media(max-width:740px){.room-chat-open #roomSidebar{position:fixed;left:12px;right:12px;bottom:max(12px,env(safe-area-inset-bottom));max-height:72dvh;overflow:auto;z-index:40;box-shadow:0 6px 60px #39202e55;border-color:#b08b80}.room-chat-open #messages{height:clamp(140px,30dvh,240px)}.room-chat-open #chatInput{font-size:16px}.room-chat-open #eventsPanel{max-height:40dvh}#conversationCards{padding:15px}.conversation-paper>p{font-size:22px}}
.graphics-review .review-banner{padding:11px 14px;background:#e9eddf;color:#3c5947;border-radius:7px;font-size:12px}.review-intro{font-size:13px;color:var(--muted);margin:8px 0}.review-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 16px}.review-tools span{font-size:11px;color:var(--muted)}.review-tools a{margin-left:auto;font-size:12px}.review-chat-heading{padding:18px 14px 0}.review-chat-heading h2{font-size:25px;margin:9px 0}.graphics-review #conversationCards{margin-top:12px}.graphics-review header>a:last-child{font-size:12px}.graphics-review #appearanceDialog{max-width:680px;max-height:90dvh;overflow:auto}.graphics-review #movementFeedback{min-height:32px}@media(max-width:740px){.graphics-review .edition{display:none}.review-tools a{margin-left:0}.review-tools{gap:8px}.graphics-review .world-heading{gap:8px}.graphics-review .world-heading button{font-size:11px;max-width:95px}.graphics-review #roomSidebar{margin-top:0}}

.cafe-3d .walktools{flex-wrap:wrap}
.cafe-3d .emotes{flex-wrap:wrap}
.cafe-3d #world{touch-action:pan-y}
.cafe-3d #reviewAvatarEditor canvas{display:none}
.cafe-3d nav button[aria-pressed="true"]{background:#754753;color:#fff;border-color:#754753}
.cafe-3d #drawingPanel{scroll-margin-top:1rem;margin:1rem 0}
.cafe-3d #drawingPanel h2{margin-bottom:.4rem}

.live-3d-frame main{padding:0;max-width:none}
.live-3d-frame header,.live-3d-frame .review-banner,.live-3d-frame #previewHeading,
.live-3d-frame #previewRooms,.live-3d-frame #capacityButton,.live-3d-frame #previewTools span,
.live-3d-frame #previewTools a,.live-3d-frame #roomChatShortcut,.live-3d-frame #roomSidebar,
.live-3d-frame #conversationCards,.live-3d-frame footer{display:none}
.live-3d-frame .world-layout{display:block}
.live-3d-frame .stage{margin:0}
/* Inside the live game the 3D scene fills its frame; the game's own buttons drive the review page's hidden controls. */
.live-3d-frame .walktools,.live-3d-frame #movementFeedback,.live-3d-frame #drawingPanel,.live-3d-frame #previewTools{display:none}
.live-3d-frame .stage{border:0;border-radius:0;height:100vh;height:100dvh}
.live-3d-frame #world{width:100%;height:100%;aspect-ratio:auto}
html:has(.live-3d-frame),.live-3d-frame{overflow:hidden;margin:0}
#live3dFrame{display:block;width:100%;height:clamp(440px,65vw,700px);border:0}

#bubble.avatar-bubble{position:absolute;right:auto;bottom:auto;left:clamp(88px,var(--speech-x,50%),calc(100% - 88px));transform:translate(-50%,-100%);width:max-content;max-width:min(174px,80%);padding:6px 9px;overflow:hidden;overflow-wrap:anywhere;line-height:1.25;font-size:12px;max-height:calc(2.5em + 14px);pointer-events:none;text-align:center}
#tourDialog{width:min(420px,calc(100% - 32px))}
#tourDialog h2{margin:8px 0}
#tourDialog .row{justify-content:space-between;margin-top:18px}


.district-spotlight{position:absolute;z-index:2;top:14%;left:53%;transform:translateX(-50%);width:min(58%,380px);padding:3px;background:linear-gradient(#35373a,#111315);border:1px solid #5c5e60;border-radius:4px;box-shadow:0 7px 12px #170a0b99}
.district-spotlight[hidden],.spotlight-controls[hidden]{display:none}
.spotlight-poster{display:flex;align-items:center;justify-content:space-between;gap:7px;width:100%;padding:5px 7px;border:1px solid #65515b;border-radius:1px;text-align:left;color:#fff8f1;background:repeating-linear-gradient(0deg,#0000 0 3px,#0002 3px 4px),linear-gradient(112deg,#241b2b,#754c70)}
.spotlight-poster[data-theme="courtyard"]{background:repeating-linear-gradient(0deg,#0000 0 3px,#0002 3px 4px),linear-gradient(112deg,#191e35,#5c3d69)}
.spotlight-poster[data-theme="cafe"]{background:repeating-linear-gradient(0deg,#0000 0 3px,#0002 3px 4px),linear-gradient(112deg,#261922,#754838)}
.spotlight-copy{display:grid;gap:2px;min-width:0}
.spotlight-kicker{color:#ffd9de;font-size:9px;font-weight:800;letter-spacing:.07em}
#spotlightTitle{font-size:clamp(12px,1.8vw,17px);line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spotlightDetails{color:#f8e7e2;font-size:10px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.spotlight-view{flex:none;padding:8px 9px;background:#ffe086;color:#2a1e2a;font-size:11px;font-weight:800;border-radius:2px}
.spotlight-controls{display:flex;justify-content:center;align-items:center;gap:8px;color:#fff7ed;font-size:11px}
.spotlight-controls button{background:#252629;color:#fff7ed;border:0;border-radius:2px;padding:3px 9px;font-size:11px;min-height:28px}
.district-spotlight button:focus-visible{outline:2px solid #ffe086;outline-offset:2px}
@media(max-width:550px){
 .district-spotlight{width:72%;top:5%}
 .spotlight-poster{min-height:40px;padding:4px 5px}
 .spotlight-kicker{font-size:8px;letter-spacing:0}
 #spotlightDetails{display:none}
 .spotlight-controls button{min-height:24px;min-width:28px;padding:2px 6px}
 .spotlight-view{padding:5px;font-size:10px}
}

/* One-time arrival celebration for the first community social. */
.live-welcome{width:min(440px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-sizing:border-box;padding:30px 26px;border:1px solid #d1b3a3;border-radius:22px;background:#fff8ee;color:#412d39;box-shadow:0 18px 70px #412d3930}
.live-welcome::backdrop{background:#412d395c}
.live-welcome h2{font:clamp(29px,5vw,38px)/1.12 Georgia;margin:14px 0}
.live-welcome p{line-height:1.55}
.live-welcome .primary{width:100%;margin-top:8px}
.live-welcome .welcome-signature{font:italic 25px Georgia;color:#a84f65}
.welcome-glitter{position:fixed;inset:0;z-index:100;pointer-events:none;overflow:hidden}
.welcome-glitter span{position:absolute;top:-22px;left:var(--left);width:5px;height:10px;border-radius:2px;opacity:0;animation:welcome-sparkle 2.35s var(--delay) ease-in forwards}
.welcome-glitter span:nth-child(3n){width:5px;height:5px;border-radius:50%}
@keyframes welcome-sparkle{0%{opacity:0;transform:translate(0,-10px) rotate(0)}10%{opacity:.95}80%{opacity:.8}100%{opacity:0;transform:translate(var(--drift),110vh) rotate(var(--turn))}}
@media(prefers-reduced-motion:reduce){.welcome-glitter{display:none}.welcome-glitter span{animation:none}}