/* Circle's plaza (js/circle/plaza.js): SixCity, one long street where each status is a place. */
html.is-circle-me [data-circle-plaza] { display: none !important; }
.circle-plaza { padding: 0 0 4px; }
.cplaza-street { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.cplaza-street::-webkit-scrollbar { display: none; }
.cplaza-in { position: relative; height: 330px; overflow: hidden; }
.circle-plaza button { -webkit-tap-highlight-color: transparent; }

/* people */
.cplaza-sixy { position: absolute; z-index: 10; display: block; padding: 0; border: 0; background: none; font: inherit; color: #17181a; text-align: center; transform: translateX(-50%); cursor: pointer; }
.cplaza-sixy.is-me { z-index: 12; }
.cplaza-art { display: block; margin: 0 auto; }
.cplaza-art svg, .cplaza-wart svg, .cplaza-cart svg, .cplaza-sh-art svg { display: block; width: 100%; height: 100%; }
.cplaza-name { display: inline-block; margin-top: -2px; padding: 1px 7px; border-radius: 999px; background: rgb(255 255 255 / .88); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.cplaza-sixy.is-sit .cplaza-name { font-size: 10.5px; }
.cplaza-bubble { position: absolute; left: 50%; bottom: calc(100% - 6px); z-index: 3; transform: translateX(-50%); padding: 4px 9px; border-radius: 12px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .12); font-size: 11.5px; font-weight: 600; color: #17181a; white-space: nowrap; }
.cplaza-bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #fff; }
.cplaza-bubble.is-dark { background: #17181a; color: #fff; }
.cplaza-bubble.is-dark::after { border-top-color: #17181a; }
.cplaza-bubble.is-mine { background: #2a6fd6; color: #fff; }
.cplaza-bubble.is-mine::after { border-top-color: #2a6fd6; }
.cplaza-sixy.is-up .cplaza-bubble { bottom: calc(100% + 18px); }
.cplaza-bag { position: absolute; right: -12px; bottom: 16px; width: 18px; height: 22px; border-radius: 4px; background: #d9473a; box-shadow: inset 0 -4px 0 rgb(0 0 0 / .12); }
.cplaza-bag::before { content: ""; position: absolute; left: 4px; top: -6px; width: 6px; height: 5px; border: 2px solid #5f6670; border-bottom: 0; border-radius: 3px 3px 0 0; }
.cplaza-empty { position: absolute; top: 132px; z-index: 4; width: 150px; padding: 6px 10px; border-radius: 12px; background: rgb(255 255 255 / .9); font-size: 12px; line-height: 1.35; color: #55585e; }

/* place signs */
.cplaza-psign { position: absolute; z-index: 5; transform: translateX(-50%); padding: 4px 9px; border-radius: 9px; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .12); font-size: 12px; font-weight: 800; color: #17181a; white-space: nowrap; pointer-events: none; }
.cplaza-psign small { margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #f3f4f6; color: #55585e; font-size: 11px; }

/* the square */
.cplaza-grass { position: absolute; bottom: 58px; z-index: 0; height: 64px; border-radius: 0 40px 0 0; background: #cfe6b4; box-shadow: inset 0 6px 0 rgb(255 255 255 / .25); }
.cplaza-in.is-night .cplaza-grass { background: #3f5a44; }
.cplaza-in.is-sunset .cplaza-grass { background: #c9cf9a; }
.cplaza-tree { position: absolute; z-index: 2; width: 46px; height: 70px; }
.cplaza-tree::before { content: ""; position: absolute; left: 20px; bottom: 0; width: 7px; height: 26px; border-radius: 3px; background: #9c7a57; }
.cplaza-tree::after { content: ""; position: absolute; left: 0; top: 0; width: 46px; height: 50px; border-radius: 50%; background: #9fd3a9; box-shadow: inset -6px -6px 0 rgb(0 0 0 / .06); }
.cplaza-lamp { position: absolute; z-index: 2; width: 4px; height: 58px; border-radius: 2px; background: #8d939b; }
.cplaza-lamp::after { content: ""; position: absolute; left: -6px; top: -8px; width: 16px; height: 12px; border-radius: 8px 8px 3px 3px; background: #ffe7a3; }
.cplaza-in.is-night .cplaza-lamp::after { box-shadow: 0 0 16px 6px rgb(255 221 130 / .7); }
.cplaza-fountain { position: absolute; bottom: 60px; z-index: 3; width: 96px; height: 26px; margin-left: -48px; border-radius: 50%; background: #bcd8ea; box-shadow: inset 0 0 0 5px #d8d2c4, 0 4px 0 #b9ae99; }
.cplaza-fountain::before { content: ""; position: absolute; left: 44px; bottom: 12px; width: 8px; height: 30px; border-radius: 3px; background: #d8d2c4; }
.cplaza-jet { position: absolute; left: 30px; bottom: 34px; width: 36px; height: 26px; border: 3px solid #8cc4e6; border-bottom: 0; border-radius: 50% 50% 0 0; transform-origin: 50% 100%; animation: cplaza-jet 1.6s ease-in-out infinite; }
.cplaza-jet.is-b { left: 38px; width: 20px; height: 16px; animation-delay: -.8s; }
@keyframes cplaza-jet { 0%, 100% { transform: scaleY(1); opacity: .9; } 50% { transform: scaleY(1.18); opacity: .6; } }

/* buildings and windows */
.cplaza-bld { position: absolute; bottom: 116px; z-index: 1; background-color: var(--c); border-radius: 6px 6px 0 0; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .06); }
.cplaza-in.is-night .cplaza-bld, .cplaza-in.is-night .cplaza-hse { background-color: color-mix(in srgb, var(--c) 38%, #1b2036); }
.cplaza-in.is-sunset .cplaza-bld, .cplaza-in.is-sunset .cplaza-hse { background-color: color-mix(in srgb, var(--c) 82%, #c27a6a); }
.cplaza-wins { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(4, 40px); column-gap: 10px; row-gap: 18px; }
.cplaza-w { display: block; width: 40px; height: 34px; border-radius: 5px; background: #e4eef8; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .7); }
.cplaza-in.is-night .cplaza-w { background: #2a3150; box-shadow: inset 0 0 0 3px rgb(255 255 255 / .12); }
.cplaza-in.is-night .cplaza-w.is-lit { background: #ffd56b; }
.cplaza-winp { position: relative; display: block; width: 40px; height: 34px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.cplaza-wbox { position: relative; display: block; width: 40px; height: 34px; overflow: hidden; border-radius: 5px; background: #fff3d6; box-shadow: inset 0 0 0 3px #fff; }
.cplaza-winp.is-me .cplaza-wbox { box-shadow: inset 0 0 0 3px #2a6fd6; }
.cplaza-wart { position: absolute; left: 50%; top: -3px; width: 40px; height: 41px; margin-left: -20px; }
.cplaza-wn { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); max-width: 52px; margin-top: 1px; padding: 0 5px; overflow: hidden; border-radius: 6px; background: rgb(255 255 255 / .92); color: #17181a; font-size: 10px; font-weight: 700; line-height: 14px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; }
.cplaza-awning { position: absolute; left: -8px; right: -8px; top: 0; height: 28px; border-radius: 6px 6px 0 0; background: repeating-linear-gradient(90deg, #f26b4f 0 18px, #fff 18px 36px); }
.cplaza-awning::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 9px; background: radial-gradient(circle at 9px 0, #f26b4f 8px, transparent 8.5px) 0 0 / 36px 9px, radial-gradient(circle at 27px 0, #fff 8px, transparent 8.5px) 0 0 / 36px 9px; }
.is-tea .cplaza-awning { background: repeating-linear-gradient(90deg, #3ba57a 0 18px, #fff 18px 36px); }
.is-tea .cplaza-awning::after { background: radial-gradient(circle at 9px 0, #3ba57a 8px, transparent 8.5px) 0 0 / 36px 9px, radial-gradient(circle at 27px 0, #fff 8px, transparent 8.5px) 0 0 / 36px 9px; }
.cplaza-shopwin { position: absolute; left: 16px; top: 48px; width: 120px; height: 56px; border-radius: 6px; background: #e4eef8; box-shadow: inset 0 0 0 3px #fff, inset 0 -14px 0 #c79f73; display: flex; align-items: flex-end; justify-content: space-around; padding: 0 12px 14px; box-sizing: border-box; }
.cplaza-shopwin i { width: 12px; height: 14px; border-radius: 2px 2px 5px 5px; background: #fff; box-shadow: 0 -2px 0 #f26b4f inset; }
.cplaza-in.is-night .cplaza-shopwin { background: #ffe1a1; }
.cplaza-cdoor, .cplaza-hdoor { position: absolute; right: 22px; bottom: 0; width: 40px; height: 70px; border-radius: 6px 6px 0 0; background: #9c6b45; box-shadow: inset 0 0 0 3px rgb(0 0 0 / .08); }
.cplaza-bld.is-school::before { content: ""; position: absolute; left: -10px; right: -10px; bottom: 100%; height: 30px; background: #c4665a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cplaza-clock { position: absolute; left: 50%; top: -24px; z-index: 1; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #8b6b4b; }
.cplaza-clock::after { content: ""; position: absolute; left: 8px; top: 4px; width: 2px; height: 6px; background: #17181a; }
.cplaza-hse { position: absolute; bottom: 116px; z-index: 1; width: 100px; height: 96px; background-color: var(--c); border-radius: 0 0 2px 2px; }
.cplaza-hse::before { content: ""; position: absolute; left: -9px; right: -9px; bottom: 100%; height: 34px; background: #c4665a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cplaza-in.is-night .cplaza-bld.is-school::before, .cplaza-in.is-night .cplaza-hse::before { background: #5a3a44; }
.cplaza-hwin { position: absolute; left: 8px; top: 8px; display: flex; gap: 4px; }
.cplaza-hse .cplaza-wbox { background: #fff1c9; }
.cplaza-w.is-curtain { background: linear-gradient(90deg, #e7b8a6 0 45%, #2f3654 45% 55%, #e7b8a6 55%); }
.cplaza-hse .cplaza-hdoor { left: 39px; right: auto; width: 22px; height: 32px; }
.cplaza-zz { position: absolute; left: 86px; top: -2px; z-index: 3; pointer-events: none; }
.cplaza-zz i { position: absolute; font-style: normal; font-weight: 800; color: #4a5a9e; font-size: 16px; opacity: 0; animation: cplaza-zz 2.6s ease-out infinite; }
.cplaza-zz i:nth-child(2) { animation-delay: .85s; font-size: 13px; }
.cplaza-zz i:nth-child(3) { animation-delay: 1.7s; font-size: 11px; }
.cplaza-in.is-night .cplaza-zz i { color: #c8d2ff; }
@keyframes cplaza-zz { 0% { opacity: 0; transform: translate(0, 0); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -26px); } }

/* café tables */
.cplaza-chair { position: absolute; bottom: 58px; z-index: 6; display: block; width: 24px; height: 30px; margin-left: -12px; padding: 0; border: 0; background: none; font: inherit; }
.cplaza-chair::before { content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 6px; border-radius: 3px; background: #8b6b4b; }
.cplaza-chair::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 10px; border-left: 3px solid #8b6b4b; border-right: 3px solid #8b6b4b; }
.cplaza-chair.is-open { z-index: 12; cursor: pointer; }
.cplaza-chair.is-open b { position: absolute; left: 50%; bottom: 22px; display: grid; place-items: center; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .18); font-size: 14px; font-weight: 800; color: #2a6fd6; animation: cplaza-pulse 2s ease-in-out infinite; }
.cplaza-hint { position: absolute; left: 50%; bottom: 48px; transform: translateX(-50%); padding: 2px 7px; border-radius: 8px; background: #17181a; color: #fff; font-size: 10.5px; font-weight: 700; white-space: nowrap; }
@keyframes cplaza-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.cplaza-tbl { position: absolute; bottom: 58px; z-index: 11; width: 46px; height: 30px; margin-left: -23px; pointer-events: none; }
.cplaza-tbl::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; border-radius: 4px; background: #f3efe6; box-shadow: 0 2px 0 #c9bfae; }
.cplaza-tbl::after { content: ""; position: absolute; left: 21px; top: 8px; width: 4px; height: 22px; background: #8b6b4b; }

/* the bus stop */
.cplaza-shelter { position: absolute; bottom: 58px; z-index: 2; width: 130px; height: 104px; border-left: 5px solid #8d939b; border-right: 5px solid #8d939b; background: rgb(214 232 246 / .55); }
.cplaza-shelter::before { content: ""; position: absolute; left: -12px; right: -12px; top: -8px; height: 10px; border-radius: 4px; background: #5f6670; }
.cplaza-ssign { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); padding: 3px 8px; border-radius: 5px; background: #2a6fd6; color: #fff; font-size: 10.5px; font-weight: 800; white-space: nowrap; }

/* sky and road */
.cplaza-cloud { position: absolute; z-index: 0; width: 64px; height: 20px; border-radius: 999px; background: rgb(255 255 255 / .85); pointer-events: none; animation: cplaza-cloud linear infinite; }
.cplaza-cloud::before { content: ""; position: absolute; left: 14px; top: -12px; width: 30px; height: 26px; border-radius: 50%; background: inherit; }
.cplaza-in.is-night .cplaza-cloud { background: rgb(255 255 255 / .12); }
@keyframes cplaza-cloud { from { transform: translateX(0); } to { transform: translateX(160px); } }
.cplaza-road { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; height: 58px; background: #8b8f97; box-shadow: inset 0 6px 0 #d9d2c2; }
.cplaza-road::after { content: ""; position: absolute; left: 0; right: 0; top: 30px; height: 4px; background: repeating-linear-gradient(90deg, #f4f1e8 0 26px, transparent 26px 52px); }
.cplaza-in.is-night .cplaza-road { background: #4a4e58; box-shadow: inset 0 6px 0 #6b6a66; }
.cplaza-car { position: absolute; left: 0; bottom: 4px; z-index: 9; display: block; width: 96px; height: 62px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; animation: cplaza-drive linear infinite; }
.cplaza-car.is-me { z-index: 8; bottom: 14px; }
@keyframes cplaza-drive { from { transform: translateX(-130px); } to { transform: translateX(var(--road, 1200px)); } }
.cplaza-cart { position: absolute; left: 36px; top: -14px; width: 42px; height: 44px; }
.cplaza-cbody { position: absolute; left: 0; right: 0; bottom: 10px; display: grid; place-items: center; height: 28px; border-radius: 10px 16px 7px 7px; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .12); }
.cplaza-cname { color: #fff; font-size: 11px; font-weight: 800; }
.cplaza-wh { position: absolute; left: 14px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%; background: #2b2d33; box-shadow: inset 0 0 0 4px #2b2d33, inset 0 0 0 8px #c9ccd2; }
.cplaza-wh.is-b { left: 66px; }

/* the chips under the street */
.cplaza-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 9px 14px 2px; }
.cplaza-chips::-webkit-scrollbar { display: none; }
.cplaza-total { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 6px 4px 6px 0; font-size: 13px; font-weight: 800; color: #55585e; white-space: nowrap; }
.cplaza-chips button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border: 0; border-radius: 999px; background: #f3f4f6; font: inherit; font-size: 13px; font-weight: 600; color: #17181a; white-space: nowrap; cursor: pointer; }
.cplaza-chips b { margin-left: 2px; color: #8a8e96; font-weight: 700; }

/* sheets: what's up? and a friend */
.cplaza-scrim { position: fixed; inset: 0; z-index: 2400; background: rgb(0 0 0 / .32); opacity: 0; transition: opacity .2s; }
.cplaza-scrim.is-in { opacity: 1; }
.cplaza-sheet { position: fixed; left: 50%; bottom: 0; z-index: 2401; width: min(100%, 460px); max-height: 85vh; overflow-y: auto; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: #fff; color: #17181a; box-sizing: border-box; transform: translate(-50%, 100%); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.cplaza-sheet.is-in { transform: translate(-50%, 0); }
.cplaza-grab { width: 38px; height: 5px; margin: 0 auto 10px; border-radius: 3px; background: #dcdde1; }
.cplaza-sh-head { display: flex; align-items: center; gap: 12px; }
.cplaza-sh-head b { display: block; font-size: 18px; }
.cplaza-sh-art { flex: 0 0 auto; width: 58px; height: 60px; }
.cplaza-now { margin: 2px 0 0; font-size: 13.5px; color: #55585e; }
.cplaza-thought { margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: #f3f4f6; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; white-space: pre-line; }
.cplaza-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.cplaza-pick { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 9px; border: 0; border-radius: 14px; background: #f3f4f6; font: inherit; font-size: 13px; font-weight: 700; color: #17181a; cursor: pointer; }
.cplaza-pick span { font-size: 22px; line-height: 1.15; }
.cplaza-pick.is-on { background: #17181a; color: #fff; }
.cplaza-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-top: 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: #f3f4f6; font: inherit; font-size: 15px; font-weight: 700; color: #17181a; text-align: left; cursor: pointer; }
.cplaza-row small { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #8a8e96; }
.cplaza-row.is-end { align-items: center; background: none; color: #d92d3f; font-weight: 600; }
.cplaza-btns { display: flex; gap: 8px; margin-top: 14px; }
.cplaza-btn { flex: 1; padding: 13px 10px; border: 0; border-radius: 14px; background: #f3f4f6; font: inherit; font-size: 15px; font-weight: 700; color: #17181a; cursor: pointer; }
.cplaza-btn.is-main { background: #17181a; color: #fff; }

/* rule 1: no words, the time goes in the name tag */
.cplaza-tm { margin-left: 4px; padding-left: 4px; border-left: 1px solid #d6d8dc; font-style: normal; font-weight: 600; color: #55585e; }
/* empty places invite you (only while you have no status) */
.cplaza-invite { position: absolute; z-index: 13; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .16); font: inherit; font-size: 12px; font-weight: 700; color: #17181a; white-space: nowrap; transform: translateX(-50%); cursor: pointer; animation: cplaza-bob 3s ease-in-out infinite; }
.cplaza-invite b { color: #2a6fd6; }
@keyframes cplaza-bob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-3px); } }

/* the thought board on the square: friends' thoughts as sticky notes */
.cplaza-board { position: absolute; bottom: 92px; z-index: 4; width: 136px; height: 94px; padding: 0; border: 0; background: none; font: inherit; color: #17181a; cursor: pointer; }
.cplaza-bd { position: absolute; left: 0; right: 0; top: 0; height: 66px; border-radius: 6px; background: #b98a5e; box-shadow: inset 0 0 0 4px #9c6b45, 0 3px 0 #7c5434; }
.cplaza-leg { position: absolute; bottom: 0; left: 18px; width: 6px; height: 34px; background: #7c5434; }
.cplaza-leg.is-b { left: auto; right: 18px; }
.cplaza-bl { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); padding: 2px 8px; border-radius: 7px; background: #fff7e0; box-shadow: inset 0 0 0 2px #c79f73; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.cplaza-sn { position: absolute; top: 9px; z-index: 1; width: 36px; height: 40px; padding: 4px 3px 0; overflow: hidden; background: var(--paper, #fff3a8); box-shadow: 0 2px 3px rgb(0 0 0 / .22); box-sizing: border-box; font-size: 6.5px; font-weight: 700; line-height: 1.15; color: #3b3326; text-align: left; }
.cplaza-sn i { position: absolute; left: 50%; top: -2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #d9473a; }
.cplaza-sn.is-mine { display: grid; place-items: center; padding: 0; border: 1.5px dashed #a58a5c; background: #fffbe9; font-size: 16px; color: #8a6d3b; }
.cplaza-sn.is-blank { opacity: .55; }
.cplaza-sn.is-s1 { left: 7px; transform: rotate(-6deg); }
.cplaza-sn.is-s2 { left: 50px; transform: rotate(4deg); }
.cplaza-sn.is-s3 { left: 93px; transform: rotate(-3deg); }
.cplaza-new { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #d92d3f; color: #fff; font-size: 10.5px; box-sizing: border-box; }
.cplaza-cork { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; margin: 12px -4px 0; padding: 14px 10px; border-radius: 16px; background: #c99b6b; }
.cplaza-note { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 14px 10px 10px; border: 0; background: var(--paper, #fff3a8); box-shadow: 0 6px 12px rgb(0 0 0 / .22); color: #2f281d; font: inherit; text-align: left; cursor: pointer; }
.cplaza-note:nth-child(odd) { transform: rotate(-1.6deg); }
.cplaza-note:nth-child(even) { transform: rotate(1.4deg); }
.cplaza-note > i { position: absolute; left: 50%; top: -5px; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: #d9473a; }
.cplaza-note p { flex: 1; margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.cplaza-note small { font-size: 11.5px; color: rgb(47 40 29 / .65); }
.cplaza-nart { width: 40px; height: 41px; }
.cplaza-nart svg { display: block; width: 100%; height: 100%; }
.cplaza-unread { position: absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: #2a6fd6; }
.cplaza-note.is-pin { align-items: center; justify-content: center; border: 2px dashed #a58a5c; background: #fffbe9; box-shadow: none; color: #8a6d3b; text-align: center; }
.cplaza-note.is-pin b { font-size: 28px; line-height: 1; }

/* signs you can tap to join, and the "+N inside" signs */
.cplaza-psign { pointer-events: auto; border: 0; font-family: inherit; color: #17181a; cursor: pointer; }
.cplaza-psign:disabled { cursor: default; }
[data-join] { cursor: pointer; }
.cplaza-door { position: absolute; z-index: 13; transform: translateX(-50%); padding: 5px 10px; border: 0; border-radius: 999px; background: #17181a; color: #fff; font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; box-shadow: 0 2px 6px rgb(0 0 0 / .2); cursor: pointer; }
.cplaza-peek { position: absolute; bottom: 152px; z-index: 4; display: flex; align-items: center; padding: 3px 6px 3px 4px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .9); box-shadow: 0 2px 6px rgb(0 0 0 / .14); font: inherit; cursor: pointer; }
.cplaza-peek span { display: grid; place-items: center; width: 20px; height: 20px; margin-left: -6px; border: 2px solid #fff; border-radius: 50%; background: #e4ecfb; color: #2a4f8f; font-size: 10px; font-weight: 800; }
.cplaza-peek span:first-child { margin-left: 0; }
.cplaza-peek span:nth-child(even) { background: #fde4dc; color: #a24a12; }
.cplaza-peek b { margin-left: 4px; font-size: 11px; color: #55585e; }

/* 🏃 park & gym */
.cplaza-pond { position: absolute; bottom: 64px; z-index: 1; width: 130px; height: 34px; border-radius: 50%; background: #9fd0ea; box-shadow: inset 0 0 0 4px #c9e6b0; }
.cplaza-duck { position: absolute; left: 30px; top: 6px; width: 14px; height: 10px; border-radius: 50% 50% 40% 40%; background: #fff; animation: cplaza-duck 9s ease-in-out infinite alternate; }
.cplaza-duck::before { content: ""; position: absolute; right: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 3px 1px 0 -2px #f7a53b; }
.cplaza-duck.is-b { left: 80px; top: 14px; animation-duration: 12s; animation-direction: alternate-reverse; }
@keyframes cplaza-duck { from { translate: 0 0; } to { translate: 30px 2px; } }
.cplaza-track { position: absolute; bottom: 58px; z-index: 0; width: 390px; height: 10px; border-radius: 6px; background: #d8b48a; }
.cplaza-pullbar { position: absolute; bottom: 58px; z-index: 2; width: 46px; height: 70px; border: 4px solid #6b6f78; border-bottom: 0; border-radius: 4px 4px 0 0; box-sizing: border-box; }
.cplaza-jog { position: absolute; bottom: 0; z-index: 10; width: 0; height: 0; animation: cplaza-jog 14s ease-in-out infinite alternate; }
.cplaza-jog.is-b { animation-duration: 18s; animation-delay: -6s; animation-direction: alternate-reverse; }
@keyframes cplaza-jog { from { translate: 0 0; } to { translate: 220px 0; } }
/* 📚 library */
.cplaza-libr { position: absolute; bottom: 116px; z-index: 1; width: 250px; height: 150px; border-radius: 4px 4px 0 0; background: #e9e2d0; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .06); }
.cplaza-in.is-night .cplaza-libr { background: #4b4a5a; }
.cplaza-lib-top { position: absolute; left: -10px; right: -10px; top: -26px; display: grid; place-items: center; height: 26px; background: #b9ae99; clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%); font-size: 11px; font-weight: 900; letter-spacing: 2px; color: #5b5240; }
.cplaza-cols { position: absolute; left: 8px; right: 8px; top: 6px; display: flex; justify-content: space-between; }
.cplaza-cols i { width: 8px; height: 26px; border-radius: 2px; background: #d6ccb6; }
.cplaza-desks { position: absolute; left: 12px; right: 12px; top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.cplaza-desk { position: relative; height: 70px; padding: 0; border: 0; border-radius: 6px; background: #fff3d6; box-shadow: inset 0 -16px 0 #c79f73; font: inherit; cursor: pointer; }
.cplaza-desk.is-empty { opacity: .6; cursor: default; }
.cplaza-desk.is-me { box-shadow: inset 0 -16px 0 #c79f73, 0 0 0 2px #2a6fd6; }
.cplaza-dart { position: absolute; left: 50%; bottom: 10px; width: 38px; height: 39px; margin-left: -19px; }
.cplaza-dart svg { display: block; width: 100%; height: 100%; }
.cplaza-desk .cplaza-wn { top: auto; bottom: -16px; }
.cplaza-lamp2 { position: absolute; right: 4px; top: 6px; width: 12px; height: 8px; border-radius: 6px 6px 0 0; background: #f7c74b; box-shadow: 0 6px 12px 2px rgb(247 199 75 / .55); }
.cplaza-lamp2.is-off { box-shadow: none; background: #c9bfae; }
/* 🎬 cinema */
.cplaza-cine { position: absolute; bottom: 116px; z-index: 1; width: 230px; height: 140px; border-radius: 6px 6px 0 0; background: #6d3b4d; }
.cplaza-marq { position: absolute; left: 14px; right: 14px; top: 14px; padding: 6px 4px; overflow: hidden; border-radius: 4px; background: #fff7e0; box-shadow: 0 0 0 3px #f7c74b; font-size: 11.5px; font-weight: 800; color: #3b2b20; text-align: center; white-space: nowrap; text-overflow: ellipsis; }
.cplaza-marq b { margin-right: 4px; color: #d9473a; }
.cplaza-bulbs { position: absolute; left: 10px; right: 10px; top: 54px; height: 6px; background: radial-gradient(circle, #ffe7a3 2px, transparent 2.5px) 0 0 / 12px 6px; animation: cplaza-blink 1s steps(2) infinite; }
@keyframes cplaza-blink { 50% { opacity: .4; } }
.cplaza-cdoor2 { position: absolute; left: 85px; bottom: 0; width: 60px; height: 56px; border-radius: 6px 6px 0 0; background: #2b1a22; }
/* 🎧 music corner */
.cplaza-jukebox { position: absolute; bottom: 58px; z-index: 3; width: 56px; height: 96px; padding: 0; border: 0; border-radius: 28px 28px 6px 6px; background: linear-gradient(#f26b4f, #a99be0); box-shadow: inset 0 0 0 4px #fff7e0; font: inherit; cursor: pointer; }
.cplaza-jk-win { position: absolute; left: 8px; right: 8px; top: 30px; padding: 4px 0; overflow: hidden; border-radius: 4px; background: #fff7e0; font-size: 8px; font-weight: 800; color: #3b2b20; white-space: nowrap; }
.cplaza-jk-lights { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 8px; background: repeating-linear-gradient(90deg, #f7c74b 0 6px, #7fcf9b 6px 12px); animation: cplaza-blink .8s steps(2) infinite; }
.cplaza-notes { position: absolute; bottom: 140px; z-index: 4; pointer-events: none; }
.cplaza-notes i { position: absolute; font-style: normal; font-weight: 900; color: #a99be0; font-size: 16px; opacity: 0; animation: cplaza-note 2.4s ease-out infinite; }
.cplaza-notes i:nth-child(2) { left: 14px; animation-delay: .8s; color: #f26b4f; }
.cplaza-notes i:nth-child(3) { left: -10px; animation-delay: 1.6s; }
@keyframes cplaza-note { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px) rotate(15deg); } }

/* a place's room: everyone there, grouped, with search */
.cplaza-sheet.is-room { height: 86vh; max-height: 86vh; display: flex; flex-direction: column; }
.cplaza-rsearch { display: block; width: 100%; margin-top: 12px; padding: 10px 12px; border: 0; border-radius: 12px; background: #f3f4f6; font: inherit; font-size: 16px; box-sizing: border-box; outline: none; }
.cplaza-row.is-join { align-items: center; margin-top: 8px; background: #fff4e4; }
.cplaza-rbody { flex: 1; min-height: 0; overflow-y: auto; margin: 4px -4px 0; padding: 0 4px 10px; }
.cplaza-rgroup { margin: 14px 2px 6px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #8a8e96; }
.cplaza-rgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cplaza-rt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 8px 5px 9px; border-radius: 16px; background: #f6f2ec; text-align: center; }
.cplaza-rt.is-me { box-shadow: 0 0 0 2px #2a6fd6; }
.cplaza-rt-art { width: 44px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; }
.cplaza-rt-art svg { display: block; width: 100%; height: 100%; }
.cplaza-rt-tx { width: 100%; min-width: 0; }
.cplaza-rt-tx b { display: block; overflow: hidden; font-size: 13px; white-space: nowrap; text-overflow: ellipsis; }
.cplaza-rt-tx small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; line-height: 1.25; color: #55585e; }
.cplaza-rt-join { position: absolute; right: 5px; top: 5px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .16); color: #2a6fd6; font: inherit; font-weight: 800; cursor: pointer; }
.cplaza-empty-room { grid-column: 1 / -1; margin: 16px 0; color: #8a8e96; text-align: center; }
.cplaza-cork .cplaza-empty-room { color: #fff; }

/* 🙋 help board and ✈️ paper planes on the square */
.cplaza-helpb { position: absolute; bottom: 58px; z-index: 4; width: 76px; height: 120px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.cplaza-helpb::before { content: ""; position: absolute; left: 0; right: 0; top: 18px; height: 60px; background: #e9eef5; }
.cplaza-hb-top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; padding: 3px 0; border-radius: 6px 6px 0 0; background: #2a6fd6; color: #fff; font-size: 10px; font-weight: 800; }
.cplaza-hb-card { position: absolute; left: 6px; top: 22px; z-index: 1; width: 64px; height: 14px; border-radius: 3px; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.cplaza-hb-card.is-b { top: 40px; background: #fff3a8; }
.cplaza-hb-card.is-c { top: 58px; background: #ffd9e4; }
.cplaza-hb-leg { position: absolute; left: 34px; bottom: 0; width: 6px; height: 42px; background: #6b6f78; }
.cplaza-helpb .cplaza-new { z-index: 2; }
.cplaza-throw { position: absolute; top: 46px; z-index: 13; padding: 6px 11px; border: 0; border-radius: 999px; background: rgb(255 255 255 / .94); box-shadow: 0 2px 8px rgb(0 0 0 / .14); font: inherit; font-size: 12px; font-weight: 800; color: #17181a; cursor: pointer; }
.cplaza-inplane { position: absolute; bottom: 200px; z-index: 14; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .18); font-size: 17px; cursor: pointer; animation: cplaza-floaty 2s ease-in-out infinite; }
.cplaza-inplane b { position: absolute; right: -4px; top: -4px; display: grid; place-items: center; min-width: 16px; height: 16px; border-radius: 999px; background: #d92d3f; color: #fff; font-size: 10px; }
@keyframes cplaza-floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* 🪙 the wishing well */
.cplaza-well { position: absolute; bottom: 58px; z-index: 5; width: 70px; height: 112px; padding: 0; border: 0; background: none; font: inherit; transform: translateX(-50%); cursor: pointer; }
.cplaza-wl-stone { position: absolute; left: 4px; right: 4px; bottom: 0; height: 34px; border-radius: 8px 8px 4px 4px; background: repeating-linear-gradient(90deg, #b9b2a4 0 15px, #a8a090 15px 16px); box-shadow: inset 0 6px 0 #8c8475, 0 3px 0 #8c8475; }
.cplaza-wl-post { position: absolute; left: 12px; bottom: 30px; width: 5px; height: 50px; background: #8b6b4b; }
.cplaza-wl-post.is-b { left: auto; right: 12px; }
.cplaza-wl-roof { position: absolute; left: 0; right: 0; bottom: 76px; height: 24px; background: #c4665a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cplaza-wl-rope { position: absolute; left: 34px; bottom: 44px; width: 2px; height: 34px; background: #6b5a44; }
.cplaza-wl-bucket { position: absolute; left: 28px; bottom: 34px; width: 14px; height: 12px; border-radius: 2px 2px 4px 4px; background: #8b6b4b; animation: cplaza-floaty 2.6s ease-in-out infinite; }
.cplaza-wl-glint { position: absolute; left: 44px; bottom: 30px; font-size: 12px; }
.cplaza-wl-tag { position: absolute; left: 50%; bottom: 104px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #fff; box-shadow: 0 2px 8px rgb(0 0 0 / .16); font-size: 11.5px; font-weight: 800; color: #17181a; white-space: nowrap; }
.cplaza-wl-tag small { padding: 0 5px; border-radius: 999px; background: #fff4e4; color: #a24a12; font-size: 10.5px; }
/* 🏠 your house */
.cplaza-psign.is-plain { cursor: default; }
.cplaza-myhouse { position: absolute; bottom: 116px; z-index: 2; width: 150px; height: 104px; padding: 0; border: 0; border-radius: 0 0 3px 3px; background: var(--hc); font: inherit; cursor: pointer; }
.cplaza-mh-roof { position: absolute; left: -12px; right: -12px; bottom: 100%; height: 40px; background: #c4665a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cplaza-mh-win { position: absolute; left: 14px; top: 14px; width: 34px; height: 30px; border-radius: 5px; background: #fff3d6; box-shadow: inset 0 0 0 3px #fff; }
.cplaza-mh-win.is-b { left: auto; right: 14px; }
.cplaza-mh-door { position: absolute; left: 58px; bottom: 0; width: 34px; height: 48px; border-radius: 6px 6px 0 0; background: #9c6b45; }
.cplaza-pot { position: absolute; left: 18px; bottom: -4px; font-size: 20px; }
.cplaza-pot.is-b { left: auto; right: 18px; }
.cplaza-mailbox { position: absolute; left: -26px; bottom: -40px; width: 18px; height: 14px; border-radius: 5px 5px 2px 2px; background: #2a6fd6; }
.cplaza-mailbox::after { content: ""; position: absolute; left: 7px; top: 100%; width: 3px; height: 28px; background: #6b6f78; }
.cplaza-mailbox b { position: absolute; right: -8px; top: -8px; display: grid; place-items: center; min-width: 16px; height: 16px; border-radius: 999px; background: #d92d3f; color: #fff; font-size: 10px; }
.cplaza-kind { position: absolute; left: -6px; right: -6px; bottom: -36px; overflow: hidden; font-size: 12px; letter-spacing: -1px; text-align: center; white-space: nowrap; }
.cplaza-mat { position: absolute; bottom: 104px; z-index: 3; transform: translateX(-50%); padding: 2px 8px; border-radius: 3px; background: #b5654a; color: #fff3e0; font-size: 10px; font-weight: 800; white-space: nowrap; }
/* their sheets */
.cplaza-wishnew { display: flex; gap: 8px; margin-top: 12px; }
.cplaza-wishnew input { flex: 1; min-width: 0; padding: 11px 12px; border: 0; border-radius: 12px; background: #f3f4f6; font: inherit; font-size: 16px; outline: none; }
.cplaza-wishnew button { flex: 0 0 auto; padding: 0 14px; border: 0; border-radius: 12px; background: #17181a; color: #fff; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.cplaza-hint { margin: 6px 2px 0; font-size: 12px; color: #8a8e96; }
.cplaza-wish { margin-top: 8px; padding: 12px; border-radius: 14px; background: #eef4fb; }
.cplaza-wish p { margin: 0; font-size: 15px; line-height: 1.35; }
.cplaza-wish.is-came { background: linear-gradient(#fff7da, #ffefb3); box-shadow: 0 0 0 1.5px #f7c74b; }
.cplaza-wish-b { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cplaza-came { font-size: 12.5px; font-weight: 800; color: #a36b00; }
.cplaza-wbtn { padding: 6px 10px; border: 0; border-radius: 999px; background: #fff4e4; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cplaza-wbtn.is-quiet { background: none; color: #8a8e96; }
.cplaza-love { margin-left: auto; padding: 6px 12px; border: 0; border-radius: 999px; background: #fff; font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.cplaza-love.is-on { background: #fde4e1; box-shadow: inset 0 0 0 1.5px #f26b4f; }
.cplaza-love:disabled { opacity: .75; cursor: default; }
.cplaza-hrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #ececef; }
.cplaza-htx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.35; }
.cplaza-htx b { display: block; }
.cplaza-htx small { display: block; font-size: 11.5px; color: #8a8e96; }
.cplaza-hbtn { flex: 0 0 auto; padding: 7px 11px; border: 0; border-radius: 999px; background: #2a6fd6; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.cplaza-hbtn.is-on { background: #e1f5ee; color: #0f6e56; }
.cplaza-hbtn.is-quiet { background: #f3f4f6; color: #55585e; }
.cplaza-hmine { max-width: 110px; overflow: hidden; font-size: 12px; color: #0f6e56; white-space: nowrap; text-overflow: ellipsis; }
.cplaza-paper { display: block; width: 100%; min-height: 90px; margin-top: 12px; padding: 12px; border: 0; border-radius: 12px; background: #f6f7f9; font: inherit; font-size: 16px; resize: none; box-sizing: border-box; outline: none; }
.cplaza-bignote { padding: 16px 14px 12px; background: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / .15); transform: rotate(-1deg); }
.cplaza-bignote p { margin: 6px 0; font-size: 17px; font-weight: 650; line-height: 1.35; }
.cplaza-bignote small { color: #8a8e96; }
.cplaza-hlabel { margin: 14px 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-transform: uppercase; color: #8a8e96; }
.cplaza-swatches { display: flex; gap: 8px; }
.cplaza-swatches button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); cursor: pointer; }
.cplaza-swatches button.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #17181a; }
.cplaza-seg { display: flex; gap: 6px; }
.cplaza-seg button { flex: 1; padding: 9px 0; border: 0; border-radius: 10px; background: #f3f4f6; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.cplaza-seg button.is-on { background: #17181a; color: #fff; }
.cplaza-gbook { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; }
.cplaza-gb { padding: 9px 11px; border-radius: 12px; background: #fff7e0; font-size: 14px; line-height: 1.35; }
.cplaza-gb small { display: block; font-size: 11.5px; color: #8a8e96; }
.cplaza-minihouse { position: relative; flex: 0 0 auto; width: 52px; height: 52px; }
.cplaza-minihouse::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: #c4665a; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cplaza-minihouse i { position: absolute; left: 6px; right: 6px; bottom: 0; height: 30px; background: var(--hc); border-radius: 0 0 3px 3px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
.cplaza-row.is-visit { margin-top: 10px; }
.cplaza-sheet.is-room .cplaza-gbook, .cplaza-sheet.is-room .cplaza-rbody { overflow-y: auto; }

/* scenery: moves on its own, no names, nothing to tap */
.cplaza-bird { position: absolute; z-index: 1; width: 18px; height: 8px; pointer-events: none; animation: cplaza-fly linear infinite; }
.cplaza-bird::before, .cplaza-bird::after { content: ""; position: absolute; top: 0; width: 9px; height: 6px; border-top: 2px solid #5b6070; border-radius: 50% 50% 0 0; animation: cplaza-flap .5s ease-in-out infinite alternate; }
.cplaza-bird::before { left: 0; transform-origin: 100% 100%; }
.cplaza-bird::after { right: 0; transform-origin: 0 100%; }
.cplaza-in.is-night .cplaza-bird::before, .cplaza-in.is-night .cplaza-bird::after { border-top-color: #c8d2ff; }
@keyframes cplaza-flap { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
@keyframes cplaza-fly { from { transform: translateX(-60px); } to { transform: translateX(var(--road, 1200px)); } }
.cplaza-cat { position: absolute; z-index: 3; width: 30px; height: 16px; pointer-events: none; }
.cplaza-cat svg { display: block; width: 100%; height: 100%; }
.cplaza-tail { transform-origin: 26px 12px; animation: cplaza-tailwag 2.4s ease-in-out infinite; }
@keyframes cplaza-tailwag { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
.cplaza-walker { position: absolute; left: 0; bottom: 60px; z-index: 8; width: 70px; height: 46px; pointer-events: none; animation: cplaza-stroll linear infinite; }
.cplaza-wk { position: absolute; left: 0; bottom: 0; width: 34px; height: 35px; opacity: .78; filter: saturate(.35); }
.cplaza-wk svg { display: block; width: 100%; height: 100%; }
.cplaza-dog { position: absolute; left: 44px; bottom: 0; width: 24px; height: 16px; animation: cplaza-trot .4s ease-in-out infinite alternate; }
.cplaza-dog svg { display: block; width: 100%; height: 100%; }
.cplaza-leash { position: absolute; left: 26px; bottom: 14px; width: 22px; height: 1.5px; background: #6b6f78; transform: rotate(18deg); transform-origin: 0 50%; }
@keyframes cplaza-stroll { from { transform: translateX(-80px); } to { transform: translateX(var(--road, 1200px)); } }
@keyframes cplaza-trot { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.cplaza-bus { position: absolute; left: 0; bottom: 6px; z-index: 9; width: 130px; height: 48px; pointer-events: none; animation: cplaza-busgo linear infinite; }
.cplaza-bb { position: absolute; left: 0; right: 0; bottom: 8px; height: 36px; border-radius: 9px 14px 5px 5px; background: #2a6fd6; box-shadow: inset 0 -6px 0 rgb(0 0 0 / .14); }
.cplaza-bw { position: absolute; top: 6px; left: 8px; display: flex; gap: 5px; }
.cplaza-bw i { width: 16px; height: 12px; border-radius: 3px; background: #d6e8f8; }
.cplaza-bt { position: absolute; left: 10px; bottom: 9px; color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: .3px; }
.cplaza-wh2 { position: absolute; bottom: 0; left: 16px; width: 16px; height: 16px; border-radius: 50%; background: #2b2d33; box-shadow: inset 0 0 0 4px #2b2d33, inset 0 0 0 8px #c9ccd2; }
.cplaza-wh2.is-b { left: 96px; }
@keyframes cplaza-busgo { 0% { transform: translateX(var(--road, 1200px)); } 55%, 100% { transform: translateX(-160px); } }

@media (prefers-reduced-motion: reduce) {
  .cplaza-bird, .cplaza-walker, .cplaza-bus { display: none; }
  .cplaza-invite, .cplaza-tail, .cplaza-dog { animation: none !important; }
  .cplaza-art .sx *, .cplaza-wart .sx *, .cplaza-cart .sx *, .cplaza-jet, .cplaza-zz i, .cplaza-cloud, .cplaza-chair.is-open b { animation: none !important; }
  .cplaza-car { animation-play-state: paused; }
}