/* ============================================================
   Metrópolis (templates/play_metropolis.html, static/js/metropolis.js)
   Mapa esquemático protagonista; panel sobrio a la derecha (abajo en móvil).
   ============================================================ */
.play-metropolis, #mt-hub {
  --z-centro: #ECE3F7; --z-residencial: #E3F2E3; --z-comercial: #FFF0D2;
  --z-industrial: #E4E7EC; --z-costa: #DAEEF9; --z-periferia: #F3EBDD;
  --mt-road: #D8D0C4; --mt-special: #F6F3EE;
}
:root[data-theme="dark"] .play-metropolis, :root[data-theme="dark"] #mt-hub {
  --z-centro: #3A3147; --z-residencial: #2D3E2E; --z-comercial: #463A22;
  --z-industrial: #34373D; --z-costa: #243A48; --z-periferia: #3F3629;
  --mt-road: #26231F; --mt-special: #2E2B27;
}

/* turno (arriba a la derecha) */
.mt-turn { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; font-size: var(--t-sm); color: var(--ink-2); }
.mt-turn.is-mine .mt-turn-t { color: var(--ink); font-weight: 600; }
.mt-clock { min-width: 3.2em; text-align: right; font-size: 1.05rem; color: var(--ink); }
.mt-clock.is-urgent { color: var(--danger); font-weight: 600; }

.mt-stage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.mt-stage[hidden] { display: none; }
.mt-left { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* noticias: evento actual y anunciado */
.mt-news { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mt-news-i { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: var(--t-sm); color: var(--ink-2); }
.mt-news-i strong { display: block; color: var(--ink); }
.mt-news-i p { margin: 2px 0 0; }
.mt-news-t { flex: none; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); writing-mode: horizontal-tb; min-width: 6.5em; }
.mt-news-i.is-next { border-style: dashed; }

/* mapa: ciudad en vista 3/4 (static/js/metropolis-city.js) */
.play-metropolis, #mt-hub { --mt-asphalt: #ABA59B; --mt-win: #93B5CB; }
:root[data-theme="dark"] .play-metropolis, :root[data-theme="dark"] #mt-hub { --mt-asphalt: #57524A; --mt-win: #5D6F7C; }
.mt-map-wrap { border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 1px 2px rgba(40, 30, 20, .12), 0 8px 28px rgba(40, 30, 20, .10); background: var(--mt-asphalt); }
.mt-map { display: block; width: 100%; height: auto; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.mt-lot { cursor: pointer; outline: none; }
.mt-lift { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.mt-lot:hover .mt-lift { transform: translateY(-2px); }
.mt-lot.is-selected .mt-lift { transform: translateY(-4px); }
.mt-curb { stroke: #F8F4EC; stroke-width: 2.5; }
.mt-own { stroke: transparent; stroke-width: 4.5; transition: stroke .45s ease; }
.mt-ring { stroke: var(--sel); stroke-width: 4; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.mt-lot.is-selected .mt-ring { opacity: 1; }
.mt-lot:focus-visible .mt-ring { opacity: .8; stroke: var(--focus); }
.mt-plq-t { font: 600 10.5px var(--font-ui); fill: #2B2620; letter-spacing: -.01em; }
.mt-price-t { font: 600 11.5px var(--font-num); fill: #2B2620; }
.mt-special .mt-plq-t { font-weight: 500; fill: #5B544B; }
.mt-auction-b { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.mt-auction-t { font: 700 9.5px var(--font-ui); fill: #fff; letter-spacing: .08em; }
.mt-lot.is-auction .mt-auction-b { opacity: 1; animation: mt-breathe 2.6s ease-in-out infinite; }
:root[data-theme="dark"] .mt-win.is-lit { fill: #F1C761; }
.mt-special.is-inactive { opacity: .85; }

/* movimiento: suave y corto; todo se apaga con «reducir movimiento» */
.mt-bld.is-rise, .mt-bld.is-plant .mt-flag, .mt-dust, .mt-puff, .mt-smoke circle, .mt-boat, .mt-tag.is-changed { transform-box: fill-box; }
.mt-bld.is-rise { transform-origin: 50% 100%; animation: mt-rise .85s cubic-bezier(.2, .9, .25, 1.04) both; }
.mt-bld.is-plant .mt-flag { transform-origin: 50% 100%; animation: mt-plant .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.mt-bld.is-leaving { animation: mt-leave .45s ease forwards; }
.mt-bld.is-hit { animation: mt-shake .6s ease; }
.mt-bld.is-hidden { opacity: 0; }
.mt-bld.is-settle { animation: mt-fadein .5s ease both; }
.mt-special.is-born { animation: mt-fadein .9s ease both; }
.mt-tag.is-changed { transform-origin: 30% 50%; animation: mt-pop .5s ease; }
.mt-dust { transform-origin: center; animation: mt-dust 1s ease-out both; }
.mt-puff { transform-origin: center; animation: mt-puffup 1.7s ease-out both; }
.mt-smoke circle { transform-origin: center; opacity: 0; animation: mt-smoke 4.5s ease-out infinite; }
.mt-smoke .p2 { animation-delay: 1.5s; } .mt-smoke .p3 { animation-delay: 3s; }
.mt-waves { animation: mt-waves 9s linear infinite; }
.mt-boat { transform-origin: 50% 100%; animation: mt-bob 4.2s ease-in-out infinite; }
.mt-train { animation: mt-train 16s linear infinite; }
.mt-sweep { animation: mt-sweep 1.6s ease-in-out forwards; }
.mt-float { font: 700 15px var(--font-num); fill: #1E7A46; paint-order: stroke; stroke: #FFFDF8; stroke-width: 3px; stroke-linejoin: round; animation: mt-float 2.1s ease-out both; }
.mt-float.is-neg { fill: #B3261E; }
@keyframes mt-rise { 0% { transform: scaleY(.04); opacity: 0; } 35% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes mt-plant { 0% { transform: translateY(-16px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes mt-leave { to { opacity: 0; } }
@keyframes mt-fadein { from { opacity: 0; } }
@keyframes mt-shake { 20% { transform: translateX(-2.5px); } 40% { transform: translateX(2.5px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1px); } }
@keyframes mt-pop { 40% { transform: scale(1.12); } }
@keyframes mt-dust { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(2) translateY(-4px); opacity: 0; } }
@keyframes mt-puffup { 0% { transform: scale(.4); opacity: .8; } 100% { transform: translateY(-34px) scale(2.2); opacity: 0; } }
@keyframes mt-smoke { 0% { transform: scale(.5); opacity: 0; } 15% { opacity: .85; } 100% { transform: translate(6px, -22px) scale(2); opacity: 0; } }
@keyframes mt-waves { to { transform: translateX(-24px); } }
@keyframes mt-bob { 50% { transform: translateY(1.6px) rotate(-1.2deg); } }
@keyframes mt-train { 0% { transform: translateX(0); opacity: 0; } 4% { opacity: 1; } 30% { opacity: 1; } 34% { transform: translateX(170px); opacity: 0; } 100% { transform: translateX(170px); opacity: 0; } }
@keyframes mt-sweep { to { transform: translateX(1000px); } }
@keyframes mt-float { 0% { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-24px); opacity: 0; } }
@keyframes mt-breathe { 50% { opacity: .72; } }

/* panel: transiciones de turno, noticias y cifras */
.mt-turn.is-new { animation: mt-slide .5s cubic-bezier(.2, .8, .2, 1); }
.mt-news.is-new .mt-news-i { animation: mt-slide .55s cubic-bezier(.2, .8, .2, 1) both; }
.mt-news.is-new .mt-news-i + .mt-news-i { animation-delay: .08s; }
@keyframes mt-slide { from { transform: translateY(-6px); opacity: 0; } }
[data-tw] { transition: color .4s ease; }
[data-tw].is-up { color: var(--success) !important; }
[data-tw].is-down { color: var(--danger) !important; }
.mt-pl { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.mt-card { transition: box-shadow .25s ease; }
.mt-lot-card-in { animation: mt-slide .35s ease both; }
@media (prefers-reduced-motion: reduce) {
  .mt-lift, .mt-own, .mt-ring, .mt-pl { transition: none; }
  .mt-bld, .mt-flag, .mt-tag, .mt-waves, .mt-boat, .mt-turn, .mt-news-i, .mt-lot-card-in, .mt-auction-b, .mt-special { animation: none !important; }
}
.mt-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-xs); color: var(--muted); }
.mt-leg { display: inline-flex; align-items: center; gap: 6px; }
.mt-leg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .1); }
/* la leyenda usa los mismos suelos que el mapa (metropolis-city.js, GROUND) */
.mt-leg.zone-centro i { background: #E7E1D6; } .mt-leg.zone-residencial i { background: #CFE1B4; }
.mt-leg.zone-comercial i { background: #EFE0C2; } .mt-leg.zone-industrial i { background: #D5D9DD; }
.mt-leg.zone-costa i { background: #F1E4C4; } .mt-leg.zone-periferia i { background: #DCE3BC; }

/* panel */
.mt-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mt-card { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.mt-card[hidden] { display: none; }
.mt-h { margin: 0 0 8px; font-size: .95rem; }
.mt-kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: var(--t-sm); }
.mt-kv dt { color: var(--muted); }
.mt-kv dd { margin: 0; text-align: right; color: var(--ink); }
.mt-kv dd.is-strong { font-weight: 700; font-size: 1rem; }
.mt-kv dd.is-neg { color: var(--danger); }
.mt-kv dd.is-pos { color: var(--success); }
.mt-lot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mt-zone { padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--t-xs); color: var(--ink-2); border: 1px solid rgba(0, 0, 0, .08); }
.mt-zone.zone-centro { background: var(--z-centro); } .mt-zone.zone-residencial { background: var(--z-residencial); }
.mt-zone.zone-comercial { background: var(--z-comercial); } .mt-zone.zone-industrial { background: var(--z-industrial); }
.mt-zone.zone-costa { background: var(--z-costa); } .mt-zone.zone-periferia { background: var(--z-periferia); }
.mt-owner { margin: 0 0 8px; font-size: var(--t-sm); color: var(--ink-2); }
.mt-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.mt-actions .btn { justify-content: center; white-space: normal; min-height: 40px; line-height: 1.2; }
.mt-actions-row { display: flex; gap: 6px; margin-top: 6px; }
.mt-inline { display: flex; gap: 6px; margin-top: 6px; }
.mt-num { margin: 0; height: 40px; width: 7.5rem; flex: none; font-family: var(--font-num); }
.mt-inline .btn { flex: 1 1 auto; }
.mt-note { margin: 6px 0 0; font-size: var(--t-xs); color: var(--muted); }
.mt-empty { margin: 0; font-size: var(--t-sm); color: var(--muted); }
.mt-warn { margin: 8px 0 0; color: var(--danger); font-size: var(--t-sm); }
.mt-offer p { margin: 0; font-size: var(--t-sm); }
.mt-offer + .mt-offer { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.mt-plist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mt-pl { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; font-size: var(--t-sm); }
.mt-pl.is-turn { font-weight: 600; }
.mt-pl.is-out { opacity: .5; }
.mt-dot { width: 10px; height: 10px; border-radius: 50%; }
.mt-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.mt-pl.is-you .mt-pname { text-decoration: underline; text-decoration-color: var(--sel); text-underline-offset: 3px; }
.mt-pworth { text-align: right; color: var(--ink); }
.mt-pmeta { grid-column: 2 / -1; font-size: var(--t-xs); color: var(--muted); font-weight: 400; }
.mt-log summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); }
.mt-log ol { list-style: none; margin: 8px 0 0; padding: 0; max-height: 220px; overflow-y: auto; font-size: var(--t-xs); color: var(--ink-2); }
.mt-log li { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.mt-toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h, 0px) + 24px); transform: translateX(-50%); z-index: 200;
  padding: 10px 18px; border-radius: var(--r-pill); background: var(--ink); color: var(--on-ink); font-size: var(--t-sm); box-shadow: var(--shadow-md); max-width: calc(100vw - 32px); }
.mt-toast.is-ok { background: var(--success); color: #fff; }
.mt-toast.is-no { background: var(--danger); color: #fff; }
.mt-toast[hidden] { display: none; }

/* portada: rivales */
.mt-rivals { display: grid; gap: 6px; }
.mt-rival { display: flex; align-items: center; gap: 8px; }
.mt-rival-n { font-size: var(--t-sm); color: var(--ink-2); min-width: 4.2em; }
.mt-rival select { flex: 1 1 auto; height: 38px; padding: 0 8px; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.mt-rival-x { width: 34px; height: 34px; font-size: 1.2rem; }
.mt-rivals-tools { margin-top: 8px; }

@media (max-width: 1100px) { .mt-stage { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 900px) {
  .mt-stage { grid-template-columns: minmax(0, 1fr); }
  .mt-news { grid-template-columns: 1fr; }
  .play-metropolis .play-topbar { flex-wrap: wrap; }
  .mt-turn { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  .mt-news-t { min-width: 5.5em; }
  .play-metropolis .play-report { display: none; }
}

/* escritorio: el mapa cabe entero en la pantalla (6×5 manzanas ≈ 1,2:1) */
@media (min-width: 901px) {
  .mt-map-wrap { width: 100%; max-width: max(520px, calc((100vh - 300px) * 1.24)); margin-inline: auto; }
  .mt-news, .mt-legend { width: 100%; max-width: max(520px, calc((100vh - 300px) * 1.24)); margin-inline: auto; }
}
/* móvil: la ficha del terreno tocado va justo bajo el mapa; nombres legibles */
@media (max-width: 900px) {
  .mt-side .mt-lot { order: -2; }
  .mt-side .mt-auction, .mt-side .mt-offers { order: -1; }
}
@media (max-width: 560px) {
  .mt-plq-t { font-size: 14.5px; }
  .mt-price-t { font-size: 15px; }
  .mt-float { font-size: 20px; }
}
.mt-roi { margin: 8px 0 0; padding: 6px 10px; border-radius: var(--r-sm); background: var(--sel-weak); color: var(--sel-ink); font-size: var(--t-sm); }
.mt-roi-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--muted); cursor: pointer; }

/* portada: ciudad de ejemplo */
.mt-hero { margin: var(--s-3) 0 var(--s-2); border-radius: var(--r-lg); overflow: hidden; background: var(--mt-asphalt);
  box-shadow: 0 1px 2px rgba(40, 30, 20, .12), 0 8px 28px rgba(40, 30, 20, .10); max-width: 560px; }
.mt-hero .mt-lot { cursor: default; }
.mt-hero .mt-lot:hover .mt-lift { transform: none; }