/* Refresco visual del prototipo: todo queda acotado a Experience. */
html.upgrade-prototype-refresh { font-size: 106%; }

html.upgrade-prototype-refresh,
html.upgrade-prototype-refresh body {
  scrollbar-width: thin;
  scrollbar-color: rgba(217, 180, 90, .72) rgba(8, 12, 20, .72);
}
html.upgrade-prototype-refresh *::-webkit-scrollbar { display: block; width: 10px; height: 10px; }
html.upgrade-prototype-refresh *::-webkit-scrollbar-track { background: rgba(8, 12, 20, .72); }
html.upgrade-prototype-refresh *::-webkit-scrollbar-thumb { border: 2px solid rgba(8, 12, 20, .72); border-radius: 999px; background: linear-gradient(#f0d58c, #b9913d); }

/* Estados de distrito: plata velada, brasa ámbar y oro vivo. */
.mapa-zona { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M9.2 20.4V8.2a1.8 1.8 0 0 1 3.6 0v7.2V5.8a1.8 1.8 0 0 1 3.6 0v9.6V6.7a1.8 1.8 0 0 1 3.6 0v8.7V10a1.8 1.8 0 0 1 3.6 0v10.1c0 5-3 8.3-8 8.3h-2.9c-3.2 0-5.2-1.3-6.7-3.9l-2.1-3.6a1.9 1.9 0 0 1 3.2-2l2.1 2.7Z' fill='%23141821' stroke='%23D9B45A' stroke-width='2.2' stroke-linejoin='round'/><path d='M6.5 19.7 8.1 22' stroke='%23F0D58C' stroke-width='1.2' stroke-linecap='round'/></svg>") 16 17, grab; }
.mapa-zona.arrastrando,
.mapa-zona.arrastrando .marca { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M7.2 13.1c0-2.6 2.1-4.7 4.7-4.7h8.3c3.2 0 5.8 2.6 5.8 5.8v6.1c0 5-3.8 8.2-8.6 8.2h-3.7c-5 0-8.8-3.8-8.8-8.8v-2.1l-1.5-1.5a2.1 2.1 0 0 1 3-3l.8.8Z' fill='%23141821' stroke='%23D9B45A' stroke-width='2.2' stroke-linejoin='round'/><path d='M8.5 11.2v5.1m4.1-7v6.3m4.1-6.3v6.3m4.1-4.4v4.4' stroke='%23F0D58C' stroke-width='1.1' stroke-linecap='round'/></svg>") 16 17, grabbing; }
.mapa-zona .m-on img { animation: upgrade-map-gold 4.5s ease-in-out infinite; }
.mapa-zona .m-mid img { animation: upgrade-map-ember 3.6s ease-in-out infinite; }
.mapa-zona .m-asignado { width: 86px !important; height: 86px !important; }
.mapa-zona .m-asignado.m-completado::after { border-color: rgba(255, 235, 169, .95); }
.mapa-zona .m-asignado.m-en-curso::after { border-color: rgba(240, 150, 70, .95); }
.mapa-zona .m-diag img { filter: grayscale(1) brightness(.98) opacity(.92) drop-shadow(0 5px 9px rgba(15,20,30,.5)); }
.mapa-zona .m-off img { filter: grayscale(1) brightness(.82) opacity(.45) drop-shadow(0 3px 6px rgba(15,20,30,.4)); }
.mapa-zona .m-off:hover img { filter: grayscale(1) brightness(.95) opacity(.75) drop-shadow(0 3px 6px rgba(15,20,30,.4)); }
.mapa-zona .m-on::before { background: radial-gradient(circle, rgba(255,238,190,.72), rgba(240,213,140,.26) 50%, transparent 74%); }
.mapa-zona .m-mid::before { background: radial-gradient(circle, rgba(240,150,70,.42), rgba(240,150,70,.14) 55%, transparent 76%); }
.mapa-zona .m-diag::before { background: radial-gradient(circle, rgba(252,248,238,.4), rgba(252,248,238,.12) 55%, transparent 76%); }
.mapa-zona .m-alerta .aviso { scale: .82; opacity: .82; }
@keyframes upgrade-map-gold { 0%,100% { filter: brightness(1.3) saturate(1.22) contrast(1.05) drop-shadow(0 0 14px rgba(255,236,180,.9)) drop-shadow(0 5px 9px rgba(15,20,30,.45)); } 50% { filter: brightness(1.4) saturate(1.28) contrast(1.05) drop-shadow(0 0 30px rgba(255,240,190,1)) drop-shadow(0 5px 9px rgba(15,20,30,.45)); } }
@keyframes upgrade-map-ember { 0%,100% { filter: sepia(.42) saturate(1.6) hue-rotate(-14deg) brightness(1.02) drop-shadow(0 0 10px rgba(240,150,70,.75)) drop-shadow(0 5px 9px rgba(15,20,30,.5)); } 50% { filter: sepia(.42) saturate(1.7) hue-rotate(-14deg) brightness(1.1) drop-shadow(0 0 20px rgba(245,140,60,.95)) drop-shadow(0 5px 9px rgba(15,20,30,.5)); } }

/* En ventanas bajas, las pantallas de Guardián y Campaña dejan de atrapar el
   contenido en un viewport fijo: se puede llegar a todo mediante scroll. */
@media (min-width: 981px) and (max-height: 760px) {
  html[data-upgrade-experience-page="guardian"] body,
  html[data-upgrade-experience-page="campana"] body { height: auto !important; min-height: 100svh !important; overflow-y: auto !important; overflow-x: hidden !important; }
  html[data-upgrade-experience-page="guardian"] .salon,
  html[data-upgrade-experience-page="campana"] .escena { position: relative !important; min-height: 100svh !important; height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mapa-zona .m-on img, .mapa-zona .m-mid img { animation: none !important; }
}