/* ---------- Shared world HUD ---------- */
.world-hud { display: flex; align-items: center; gap: 10px; }
.hud-back { pointer-events: auto; height: 46px; padding: 0 16px; border-radius: 999px; border: 3px solid #23263a; cursor: pointer; font: inherit; font-weight: 900; font-size: 15px;
  background: linear-gradient(#ffe082, #ffc83d); color: #23263a; box-shadow: 0 5px 0 #b88a12, 0 10px 18px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s; white-space: nowrap; }
.hud-back:hover { transform: translateY(-2px) scale(1.04); }
.hud-back:active { transform: translateY(4px); box-shadow: 0 1px 0 #b88a12; }
[data-theme=night] .hud-back { background: linear-gradient(#5a4a1a, #3d3210); color: #ffe38a; border-color: #ffc83d; box-shadow: 0 5px 0 #1d1808, 0 0 14px rgba(255,200,61,.3); }
#map .map-hud { display: flex; align-items: center; gap: 10px; }

@media (max-width: 640px) {
  .map-hud { left: 10px; top: 10px; right: 120px; }
  .hud-title { padding: 6px 10px 6px 8px; min-width: 0; }
  .hud-title img { width: 26px; }
  .hud-title b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-title small { display: none; }
  .hud-back { height: 40px; padding: 0 12px; font-size: 13px; }
  .hud-profile { right: 64px; top: 10px; height: 46px; padding: 0 3px; }
  .hud-profile b { display: none; }
  .hud-profile .hp-face { width: 36px; height: 36px; }
  .hud-gear { right: 10px; top: 10px; width: 46px; height: 46px; }
}

/* ---------- World map ---------- */
#world { background: #6cbf5e; }
.w-road-edge { fill: none; stroke: #c9ad74; stroke-width: 50; stroke-linecap: round; stroke-linejoin: round; }
.w-road { fill: none; stroke: #ecd8a6; stroke-width: 40; stroke-linecap: round; stroke-linejoin: round; }
.w-road-dots { fill: none; stroke: #d7bf88; stroke-width: 4; stroke-dasharray: 2 18; stroke-linecap: round; }
.w-pad { fill: #c6c9d2; stroke: #a6aab6; stroke-width: 3; stroke-linejoin: round; }
.w-pad.city { fill: #e3d6c0; stroke: #c4b393; }
.w-roof { fill: var(--r, #e85d3a); }
.w-glass { fill: #bfe1ff; }
.w-win { fill: #6f7d99; transition: fill .6s, filter .6s; }
.w-win.city { fill: #bfe1ff; }
.w-win.home { fill: #bfe1ff; }
.w-gate-light { fill: #ffd77a; }
.w-clock { fill: #fffdf7; }
.w-fence rect { fill: #fffdf7; stroke: #c9b48c; stroke-width: 1.5; }
.w-sign-t { font-size: 10px; font-weight: 900; fill: #5a3412; text-anchor: middle; font-family: var(--font); }
.w-blades { animation: spin 9s linear infinite; transform-box: view-box; }
.w-blades { transform-origin: 612px 208px; }
.w-duck { animation: duck 14s ease-in-out infinite; }
@keyframes duck { 0%, 100% { transform: translate(-60px, 4px); } 50% { transform: translate(60px, -6px); } 51% { transform: translate(60px, -6px) scaleX(-1); } 99% { transform: translate(-60px, 4px) scaleX(-1); } }
.w-bird { fill: none; stroke: #23263a; stroke-width: 2.5; stroke-linecap: round; opacity: .55; animation: bird 38s linear infinite; }
.w-bird.b1 { animation-delay: -12s; animation-duration: 44s; }
.w-bird.b2 { animation-delay: -27s; animation-duration: 33s; }
@keyframes bird { from { transform: translate(-300px, 260px) scale(.8); } 50% { transform: translate(800px, 120px) scale(1); } to { transform: translate(1900px, 220px) scale(.8); } }

.loc { cursor: pointer; }
.loc .lift { transition: transform .28s cubic-bezier(.34,1.56,.64,1), filter .2s; }
.loc:hover .lift { transform: translateY(-6px); filter: brightness(1.06) drop-shadow(0 12px 8px rgba(0,0,0,.18)); }
.loc-label rect { fill: #fffdf7; stroke: #23263a; stroke-width: 3; }
.loc-label text { font-size: 20px; font-weight: 900; text-anchor: middle; fill: #23263a; font-family: var(--font); letter-spacing: .04em; }
.loc:hover .loc-label rect { fill: #ffc83d; }
.loc-label { animation: bob-label 3.2s ease-in-out infinite; }
.loc-city .loc-label { animation-delay: -1s; }
.loc-home .loc-label { animation-delay: -2s; }
@keyframes bob-label { 50% { transform: translateY(-5px); } }
.loc-pill rect { fill: rgba(35,38,58,.86); }
.loc-pill text { font-size: 14px; font-weight: 800; fill: #fff; text-anchor: middle; font-family: var(--font); }
.loc-pill.plant-pill rect { fill: rgba(94,77,178,.92); }
.loc-pill.home-pill rect { fill: rgba(200,90,50,.92); }
.loc-pill.city-pill rect { fill: rgba(30,120,170,.92); }

/* night */
[data-theme=night] #world { background: #16243a; }
[data-theme=night] .world-svg .night-shade { opacity: .6; }
[data-theme=night] .w-win, [data-theme=night] .w-win.city, [data-theme=night] .w-win.home { fill: #ffd76a; filter: drop-shadow(0 0 6px rgba(255,200,80,.9)); }
[data-theme=night] .w-win.city:nth-of-type(3n) { fill: #6f7d99; filter: none; }
[data-theme=night] .w-gate-light { fill: #ffcf5a; filter: drop-shadow(0 0 8px #ffb02e); }
[data-theme=night] .w-bird { opacity: 0; }
[data-theme=night] .loc-label rect { fill: #2b2f45; stroke: #ffc83d; }
[data-theme=night] .loc-label text { fill: #ffe38a; }
/* lit things sit above the night shade */
.world-svg .locs { isolation: isolate; }
.night-glow { opacity: 0; pointer-events: none; transition: opacity .8s; }
[data-theme=night] .night-glow { opacity: 1; }
[data-theme=night] .world-svg .loc .w-win { filter: none; }
.loc-k { transform: scale(var(--lk, 1)); }
.loc-label, .loc-k { transform-box: fill-box; transform-origin: 50% 100%; }
.loc-k.top { transform-origin: 50% 0; }

/* ---------- Side-view stages (home, city) ---------- */
.w-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; border-radius: 8px; }
.w-stage-wrap.panning, .panning * { cursor: grabbing !important; }
.hud-emoji { font-size: 28px; line-height: 1; }

/* the player on a stage + its screen-space nick tag & bubbles */
.actor { position: absolute; left: 0; top: 0; transform-origin: 0 0; cursor: pointer; will-change: transform; }
.actor .avatar { width: 100%; height: 100%; pointer-events: none; }
.actor::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 0; height: 12px; border-radius: 50%; background: rgba(0,0,0,.25); z-index: -1; }
.actor:hover .avatar { filter: url(#paper) drop-shadow(0 0 6px rgba(255,255,255,.8)); }
[data-theme=night] .actor { filter: drop-shadow(0 0 14px rgba(255,214,120,.4)); }
.actor-hud { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 6; }
.actor-tag { position: absolute; left: 0; bottom: 0; transform: translate(-50%, -4px); white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  padding: 2px 10px; border-radius: 999px; background: #23263a; color: #ffe38a; font-size: 12px; font-weight: 900; border: 2px solid #ffc83d; box-shadow: 0 3px 0 rgba(0,0,0,.25); }
.actor-bubbles { position: absolute; left: 0; bottom: 30px; transform: translateX(-50%); width: min(280px, 70vw); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.actor-bubble { position: relative; max-width: 100%; padding: 7px 12px; border-radius: 14px; background: #fffdf7; color: #23263a; font-size: 14px; font-weight: 800; line-height: 1.3;
  box-shadow: 0 4px 0 rgba(0,0,0,.2); overflow-wrap: anywhere; pointer-events: auto; cursor: pointer; transform-origin: 50% 100%; }
.actor-bubble:last-child::after { content: ''; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fffdf7; border-bottom: 0; }
.actor-bubble.chat { background: #fff; border: 2.5px solid #23263a; }
.actor-bubble.chat:last-child::after { bottom: -10px; border-top-color: #23263a; }
[data-theme=night] .actor-bubble { background: #e6e9ff; }
[data-theme=night] .actor-bubble:last-child::after { border-top-color: #e6e9ff; }
[data-theme=night] .actor-bubble.chat { background: #fff; }
[data-theme=night] .actor-bubble.chat:last-child::after { border-top-color: #23263a; }
#home .map-hud, #home .hud-profile, #home .hud-gear, #city .map-hud, #city .hud-profile, #city .hud-gear { z-index: 10; }