/* ---------- Місто: 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-top { display: flex; background: #ffc83d; }
.cl-top .cl-head { flex: 1; min-width: 0; }
.cl-bell { flex: none; width: 40px; border: 0; border-left: 2px solid rgba(35, 38, 58, .15); background: none; font-size: 16px; cursor: pointer; }
.cl-bell.off { opacity: .55; }
.cl-peek { padding: 8px 12px; border-top: 2px solid rgba(35, 38, 58, .1); background: #fff7d6; font-size: 13px; line-height: 1.35; color: #23263a; cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.cl-peek[hidden] { display: none; }
.cl-peek b { color: #2f6bff; }
.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; }
[data-theme=night] .cl-peek { background: #2a2f4d; color: #e6e9ff; }

@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; } }

/* player vs player: context menu, flying tomato, splat, stun stars */
.city-menu { position: absolute; z-index: 9; display: flex; flex-direction: column; gap: 4px; min-width: 170px; padding: 8px; border-radius: 14px; transform-origin: 0 0;
  background: #fffdf7; border: 2.5px solid #23263a; box-shadow: 0 4px 0 rgba(35, 38, 58, .3), 0 12px 30px rgba(0, 0, 0, .2); }
.city-menu b { padding: 2px 6px 4px; font-size: 13px; color: #6b6f86; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.city-menu button { padding: 7px 10px; border: 0; border-radius: 9px; background: none; font: inherit; font-weight: 800; color: #23263a; text-align: left; cursor: pointer; }
.city-menu button:hover { background: #ffe9a8; }
.tomato { position: absolute; left: -14px; top: -14px; font-size: 28px; line-height: 1; pointer-events: none; }
.splat { position: absolute; left: 0; bottom: -46px; width: 64px; height: 50px; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #e8392b 0 38%, transparent 40%), radial-gradient(circle at 18% 30%, #e8392b 0 11%, transparent 13%),
    radial-gradient(circle at 82% 26%, #e8392b 0 9%, transparent 11%), radial-gradient(circle at 70% 82%, #d42a1d 0 12%, transparent 14%),
    radial-gradient(circle at 26% 80%, #d42a1d 0 8%, transparent 10%), radial-gradient(circle at 44% 40%, #ff8a75 0 9%, transparent 11%); }
.stun-stars { position: absolute; left: 0; bottom: -22px; width: 0; height: 0; transform: scaleY(.42); } /* flattened: an ellipse around the head */
.stun-stars span { position: absolute; left: 0; top: 0; animation: stun-spin .5s linear infinite; }
.stun-stars i { position: absolute; left: -9px; top: -9px; font-style: normal; font-size: 22px; line-height: 1; color: #ffc83d; text-shadow: 1px 1px 0 #23263a; }
.stun-stars i:nth-child(1) { transform: rotate(0deg) translateX(40px) rotate(0deg) scaleY(2.4); }
.stun-stars i:nth-child(2) { transform: rotate(120deg) translateX(40px) rotate(-120deg) scaleY(2.4); }
.stun-stars i:nth-child(3) { transform: rotate(240deg) translateX(40px) rotate(-240deg) scaleY(2.4); }
@keyframes stun-spin { to { transform: rotate(360deg); } }