/* Brasshollow — Steampunk Town scene.
   A full-screen overlay above the world map (below the auth bar + modals). The
   plaza is a 16:9 stage centred in the viewport; buildings are absolutely placed
   on it and light up on hover. */

#town-frame {
  position: fixed;
  inset: 0;
  z-index: 900;                /* over map/board/hand, under auth-bar(1000) + modals */
  background: radial-gradient(circle at 50% 30%, #2a2c3a, #12131b);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 16:9 stage that scales to fit either dimension of the viewport. */
.town-stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  overflow: hidden;
}

.town-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.town-title {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1.4rem, 4.2vw, 3rem);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #f4e7c8;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7), 0 0 18px rgba(120, 230, 255, .35);
  pointer-events: none;
  z-index: 200;
}

/* Each building: a transparent bottom-centre-anchored hotspot on the plaza. */
.town-building {
  position: absolute;
  transform: translateX(-50%);   /* left% is the sprite's horizontal centre */
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.town-building-img {
  display: block;
  width: 100%;
  height: auto;
  /* Grounded drop shadow so the cut-out sits on the cobbles, not floats. */
  filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45));
  transition: transform .16s ease, filter .16s ease;
  transform-origin: 50% 100%;
}

/* Stand-in shown when a building's sprite hasn't been generated yet. Sized like
   a sprite (3:4) so the plaza layout still holds; styled as a brass plaque. */
.town-building-placeholder {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .3em;
  border-radius: 12px;
  border: 2px dashed rgba(214, 178, 110, .8);
  background: linear-gradient(160deg, rgba(58, 46, 28, .82), rgba(28, 26, 20, .82));
  color: #f0e0bf;
  text-align: center;
  padding: 6%;
}
.town-building-placeholder .tbp-icon { font-size: clamp(1.4rem, 4vw, 2.4rem); }
.town-building-placeholder .tbp-name { font-weight: 800; letter-spacing: .05em; font-size: clamp(.7rem, 1.6vw, 1rem); }
.town-building-placeholder .tbp-soon { font-size: clamp(.55rem, 1.1vw, .72rem); color: #c4b48f; opacity: .85; }

/* Hover/focus: lift, enlarge slightly, brighten, and add a cyan aether glow. */
.town-building:hover .town-building-img,
.town-building:focus-visible .town-building-img {
  transform: translateY(-2%) scale(1.06);
  filter:
    drop-shadow(0 16px 14px rgba(0, 0, 0, .5))
    drop-shadow(0 0 14px rgba(120, 230, 255, .85))
    brightness(1.12) saturate(1.06);
}

/* Name tag — hidden until you hover the building. */
.town-building-tag {
  position: absolute;
  left: 50%;
  bottom: -4%;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  padding: .25em .7em;
  border-radius: 999px;
  background: rgba(18, 20, 28, .82);
  border: 1px solid rgba(120, 230, 255, .55);
  color: #eaf7ff;
  font-size: clamp(.7rem, 1.5vw, 1rem);
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 0 14px rgba(120, 230, 255, .35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
}
.town-building:hover .town-building-tag,
.town-building:focus-visible .town-building-tag {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* A building that's currently "open" (e.g. the farm while you're farming):
   stays lifted, brightened and glowing green, with its name tag showing. */
.town-building.active .town-building-img {
  transform: translateY(-3%) scale(1.08);
  filter:
    drop-shadow(0 16px 14px rgba(0, 0, 0, .5))
    drop-shadow(0 0 18px rgba(120, 240, 150, .95))
    brightness(1.14) saturate(1.06);
}
.town-building.active .town-building-tag { opacity: 1; transform: translate(-50%, 0); }

/* Little press bounce when a building is clicked. */
.town-building.poke .town-building-img { animation: town-poke .22s ease; }
@keyframes town-poke {
  40% { transform: translateY(1%) scale(.97); }
  100% { transform: translateY(-2%) scale(1.06); }
}

/* ---- Townsfolk (NPCs) ---- */
/* At rest they BLEND into the scene: only a tight contact shadow (no aether glow)
   and a faint knock-back in brightness/contrast so the eye reads them as just part
   of the painting — until you hover and they brighten, lift and glow like a
   building hotspot (the shared .town-building:hover rules below handle that). */
.town-npc .town-building-img {
  filter:
    drop-shadow(0 4px 4px rgba(0, 0, 0, .4))
    brightness(.96) saturate(.94) contrast(.98);
}
.town-npc:hover .town-building-img,
.town-npc:focus-visible .town-building-img {
  transform: translateY(-2%) scale(1.05);
  filter:
    drop-shadow(0 10px 9px rgba(0, 0, 0, .5))
    drop-shadow(0 0 14px rgba(120, 230, 255, .85))
    brightness(1.12) saturate(1.08) contrast(1.02);
}

/* The map marker that opens the town. Lives inside the map stage (map.js). */
.town-marker {
  position: absolute;
  transform: translate(-50%, -100%);   /* anchor the icon's base at its map point */
  cursor: pointer;
  pointer-events: auto;
  border: 0;
  background: none;
  padding: 0;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .5));
  transition: transform .14s ease, filter .14s ease;
}
.town-marker img { display: block; width: 100%; height: auto; -webkit-user-drag: none; }
.town-marker:hover {
  transform: translate(-50%, -100%) scale(1.1);
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55)) drop-shadow(0 0 12px rgba(120, 230, 255, .9));
}
/* A "centered" marker sits ON its cell (icon centred over the map point) rather
   than standing above it — used to drop a town's graphic down onto its tile. */
.town-marker.centered { transform: translate(-50%, -50%); }
.town-marker.centered:hover { transform: translate(-50%, -50%) scale(1.1); }
.town-marker .town-marker-label {
  position: absolute;
  left: 50%;
  top: -1.4em;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .1em .5em;
  border-radius: 6px;
  background: rgba(18, 20, 28, .8);
  color: #eaf7ff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .05em;
  pointer-events: none;
  opacity: 0;
  transition: opacity .14s ease;
}
.town-marker:hover .town-marker-label { opacity: 1; }