/* ---------- Місто: city square ---------- */
#city { background: linear-gradient(#7cc8ff, #c9cdd6 70%); }
.city-wrap { position: absolute; inset: 0; overflow: hidden; }
.city-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.city-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.city-layer { position: absolute; inset: 0; }

.c-paving { fill: #d9cdb8; }
.c-sign { font: 900 17px ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; text-anchor: middle; letter-spacing: .5px; }
.c-neon { font-size: 19px; }
.cw { fill: #bfe1ff; stroke: #23263a; stroke-width: 2.5; }
.cw-lit { fill: #ffd977; opacity: 0; transition: opacity .8s; }
.c-sun { fill: #ffd84d; stroke: #f5a623; stroke-width: 4; transition: opacity .8s; }
.c-moon, .c-stars, .c-night-sky, .c-shade { opacity: 0; transition: opacity .8s; pointer-events: none; }
.c-shade { fill: #08102e; }
.c-stars circle { fill: #fff; animation: c-twinkle 3s ease-in-out infinite; }
@keyframes c-twinkle { 50% { opacity: .3; } }
.c-cloud.k1 { animation: c-drift1 70s linear infinite; }
.c-cloud.k2 { animation: c-drift2 95s linear infinite; animation-delay: -40s; }
@keyframes c-drift1 { from { transform: translate(-220px, 40px); } to { transform: translate(1700px, 40px); } }
@keyframes c-drift2 { from { transform: translate(-180px, 120px); } to { transform: translate(1700px, 120px); } }

/* stage / billboard */
.c-stage { cursor: pointer; }
.c-stage:hover .c-screen { fill: #2b3f8f; }
.c-screen { fill: #1d2c6b; transition: fill .2s; }
.c-bill-t { font: 900 26px ui-rounded, 'SF Pro Rounded', system-ui, sans-serif; fill: #ffe38a; text-anchor: middle; }
.c-bill-t.big { font-size: 32px; fill: #fff; }
.c-bill-s { font: 700 12px system-ui, sans-serif; fill: #9fb4ff; text-anchor: middle; }
.c-bulb { fill: #ffc83d; stroke: #23263a; stroke-width: 1.5; animation: c-bulbs 1.2s steps(1) infinite; }
.c-bulb.b1 { animation-delay: -.4s; }
.c-bulb.b2 { animation-delay: -.8s; }
@keyframes c-bulbs { 50% { fill: #fff4c8; } }
.c-balloon { animation: c-bob 3.4s ease-in-out infinite; transform-box: fill-box; }
@keyframes c-bob { 50% { transform: translateY(-8px); } }

/* props on the square */
.c-prop { position: absolute; pointer-events: none; }
.c-prop svg { display: block; overflow: visible; }
.c-fountain { pointer-events: auto; cursor: pointer; }
.c-fountain svg { pointer-events: none; }
.c-water { fill: #6cc4ff; stroke: #2f8fd8; stroke-width: 2; }
.c-ripple { fill: none; stroke: #fff; stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: c-ripple 2.6s ease-out infinite; }
@keyframes c-ripple { from { transform: scale(.4); opacity: .7; } to { transform: scale(1.05); opacity: 0; } }
.c-jet { fill: none; stroke: #bfe6ff; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 14 10; animation: c-flow .6s linear infinite; opacity: .9; }
.c-jet.thin { stroke-width: 4; }
.c-jet.up { stroke-width: 6; }
@keyframes c-flow { to { stroke-dashoffset: -24; } }
.c-drop { fill: #bfe6ff; animation: c-drop 1.1s ease-in infinite; }
.c-drop.d1 { animation-delay: -.2s; }
.c-drop.d2 { animation-delay: -.5s; }
.c-drop.d3 { animation-delay: -.7s; }
.c-drop.d4 { animation-delay: -.3s; }
.c-drop.d5 { animation-delay: -.9s; }
@keyframes c-drop { from { transform: translateY(-14px); opacity: 1; } to { transform: translateY(12px); opacity: 0; } }
.c-bulb-lamp { fill: #fff4c8; stroke: #23263a; stroke-width: 2; }
.c-halo { fill: rgba(255, 220, 120, .45); opacity: 0; transition: opacity .8s; }
.c-pool { fill: rgba(255, 214, 120, .35); opacity: 0; transition: opacity .8s; }

/* pigeons */
.pigeon { position: absolute; left: 0; top: 0; width: 40px; height: 30px; transform-origin: 0 0; cursor: pointer; transition: transform .45s ease-out; }
.pigeon svg { width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
.pigeon .pg-head { transform-box: fill-box; transform-origin: 30% 80%; }
.pigeon.peck .pg-head { animation: pg-peck .5s ease-in-out 2; }
@keyframes pg-peck { 50% { transform: rotate(38deg) translateY(4px); } }
.pigeon .pg-wing { transform-box: fill-box; transform-origin: 20% 50%; }
.pigeon.flying { transition: none; pointer-events: none; }
.pigeon.flying .pg-wing { animation: pg-flap .14s linear infinite alternate; }
@keyframes pg-flap { to { transform: scaleY(-1.2) rotate(-12deg); } }

/* chat log */
.chat-log { position: absolute; left: 16px; bottom: 82px; z-index: 7; width: min(340px, calc(100% - 32px)); display: flex; flex-direction: column;
  border-radius: 16px; background: rgba(255, 253, 247, .95); border: 2.5px solid #23263a; box-shadow: 0 8px 24px rgba(0, 0, 0, .22); overflow: hidden; }
.cl-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; background: #ffc83d; font: inherit; font-weight: 900; font-size: 14px; color: #23263a; cursor: pointer; text-align: left; }
.cl-head span { flex: 1; }
.cl-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: #e5483f; color: #fff; font-size: 12px; display: grid; place-items: center; }
.cl-caret { font-style: normal; transition: transform .2s; }
.chat-log[data-collapsed='1'] .cl-caret { transform: rotate(-90deg); }
.chat-log[data-collapsed='1'] .cl-list { display: none; }
.cl-list { list-style: none; margin: 0; padding: 8px 10px; max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.cl-msg { display: flex; flex-direction: column; gap: 1px; font-size: 13px; line-height: 1.35; color: #23263a; }
.cl-meta { font-size: 11px; color: #6b7080; }
.cl-meta b { color: #2f6bff; }
.cl-msg.mine .cl-meta b { color: #c2410c; }
.cl-text { overflow-wrap: anywhere; }
.cl-empty { font-size: 12px; color: #6b7080; line-height: 1.4; }

/* chat input */
.chat-bar { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8; width: min(620px, calc(100% - 32px)); display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px; border-radius: 999px; background: #fffdf7; border: 3px solid #23263a; box-shadow: 0 6px 0 rgba(35, 38, 58, .35), 0 12px 24px rgba(0, 0, 0, .2); }
.cb-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 700; color: #23263a; padding: 8px 0; }
.cb-input::placeholder { color: #9aa0b0; }
.cb-len { font-size: 12px; font-weight: 800; color: #6b7080; }
.cb-len.over { color: #e5483f; }
.cb-send { width: 44px; height: 44px; border-radius: 50%; padding: 0; font-size: 18px; flex: none; }
.chat-bar:focus-within { border-color: #ff7a2f; }

/* night */
[data-theme=night] #city { background: linear-gradient(#0b1233, #1c2340 70%); }
[data-theme=night] .c-night-sky, [data-theme=night] .c-stars, [data-theme=night] .c-moon { opacity: 1; }
[data-theme=night] .c-sun { opacity: 0; }
[data-theme=night] .c-shade { opacity: .38; }
[data-theme=night] .cw-lit, [data-theme=night] .c-halo, [data-theme=night] .c-pool { opacity: 1; }
[data-theme=night] .c-bulb-lamp { fill: #ffd977; filter: drop-shadow(0 0 8px #ffd24d); }
[data-theme=night] .c-neon { filter: drop-shadow(0 0 6px #3ee0ff); }
[data-theme=night] .c-paving { fill: #8f8a9e; }
[data-theme=night] .chat-log { background: rgba(30, 34, 56, .95); border-color: #ffc83d; }
[data-theme=night] .cl-msg, [data-theme=night] .cb-input { color: #e6e9ff; }
[data-theme=night] .cl-meta b { color: #8fb0ff; }
[data-theme=night] .chat-bar { background: #1e2238; border-color: #ffc83d; }

@media (max-width: 640px) {
  /* keep the global sound button (fixed bottom-right, 40px) clear and the player visible above the log */
  .chat-bar { left: 10px; bottom: 10px; transform: none; width: calc(100% - 74px); }
  .chat-log { bottom: 70px; left: 10px; width: calc(100% - 20px); }
  .cl-head { padding: 7px 12px; }
  .cl-list { max-height: 72px; padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-jet, .c-drop, .c-ripple, .c-cloud, .c-balloon, .c-bulb, .c-stars circle { animation: none; }
}

/* multiplayer: players online on the square */
.city-online { position: absolute; left: 16px; top: 78px; z-index: 7; display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px; border-radius: 999px;
  background: #fffdf7; border: 2.5px solid #23263a; box-shadow: 0 3px 0 rgba(35, 38, 58, .3); font-size: 13px; font-weight: 800; color: #23263a; }
.city-online[hidden] { display: none; }
.city-online i { width: 10px; height: 10px; border-radius: 50%; background: #22b866; box-shadow: 0 0 0 3px rgba(34, 184, 102, .25); animation: city-online 1.6s ease-in-out infinite; }
@keyframes city-online { 50% { box-shadow: 0 0 0 6px rgba(34, 184, 102, 0); } }
.actor.remote { cursor: pointer; }
@media (max-width: 560px) { .city-online { top: 70px; left: 10px; } }