/* Conoce tu Villa — solo se encola en page-conoce-tu-villa.php */

/* El lienzo ocupa la pantalla bajo la cabecera. El alto exacto lo fija el
   motor —descuenta la cabecera pegajosa medida de verdad—; este valor es el
   de partida y el que queda si el script no llega a correr. */
.vp{position:relative;width:100%;height:calc(100svh - 150px);min-height:360px;
  scroll-margin-top:var(--vc3-head,84px);
  overflow:hidden;background:#1d2b1a;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);touch-action:none;
  -webkit-user-select:none;user-select:none;cursor:grab}
.vp:fullscreen{height:100%!important;min-height:0;border:0}
/* La página es solo el lienzo: sin titular ni nota, el mapa ocupa todo el
   centro entre la cabecera y el pie. */
.juego-main{display:block}
.vp:active{cursor:grabbing}

/* Solo las tres capas del mapa. Un `canvas{...}` a secas también posicionaba
   el icono del diálogo, que se salía de su caja. */
#suelo,#objetos,#cv{position:absolute;left:0;top:0;transform-origin:0 0;
  image-rendering:pixelated;image-rendering:crisp-edges}
/* Las parcelas van en SVG: vectorial, así que no se pixelan al acercar. */
#lotes{position:absolute;left:0;top:0;transform-origin:0 0;overflow:visible;
  pointer-events:none;shape-rendering:geometricPrecision}

.hud{position:absolute;left:12px;bottom:12px;display:flex;gap:10px;flex-wrap:wrap;
  max-width:calc(100% - 24px);
  background:rgba(23,24,26,.82);color:#F6F6F4;padding:7px 11px;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em}
.hud b{color:#E8C15E;font-weight:600}

.frente{position:absolute;left:50%;top:14px;transform:translateX(-50%);
  max-width:calc(100% - 28px);
  background:rgba(23,24,26,.86);color:#F6F6F4;padding:9px 18px;
  font-family:'IBM Plex Mono',monospace;font-size:clamp(13px,1.3vw,16px);
  font-weight:600;letter-spacing:.1em;
  opacity:0;transition:opacity .18s;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.frente.on{opacity:1}

/* Leyenda, arriba a la izquierda. Mismo tono y tipografía que el marcador:
   son dos notas al margen del mismo plano, no dos piezas distintas. */
.leyenda{position:absolute;left:12px;top:12px;z-index:6;margin:0;padding:8px 11px;
  list-style:none;display:flex;flex-direction:column;gap:5px;
  background:rgba(23,24,26,.82);color:#F6F6F4;
  font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;
  pointer-events:none}
.leyenda li{display:flex;align-items:center;gap:7px;margin:0}
.leyenda svg{width:13px;height:18px;flex:none;display:block}
@media (max-width:560px){
  /* A 390 px arriba no caben leyenda, rótulo y botones a la vez: el rótulo
     se solapaba con «A la puerta». La leyenda se va abajo a la derecha, que
     es el rincón que queda —el diálogo la tapa, pero mientras lo lees no
     estás mirando el plano—. */
  .leyenda{left:auto;right:12px;top:auto;bottom:12px;
    font-size:9px;padding:6px 8px;gap:4px}
  .leyenda svg{width:11px;height:15px}
  /* Y el botón se queda en «Puerta»: con el rótulo centrado, cada píxel que
     ocupa a la derecha se lo quita al nombre del sitio. */
  .ancho{display:none}
  /* Y el rótulo deja de ir centrado: centrado crece hacia los dos lados y
     chocaba con el botón pasara lo que pasara con su ancho máximo. Pegado a
     la izquierda, el hueco que le queda es suyo entero. */
  .frente{left:12px;transform:none;max-width:calc(100% - 160px)}
  /* El marcador cede el rincón de la leyenda: envuelve antes que meterse debajo. */
  .hud{max-width:calc(100% - 130px)}
}

/* ── Joystick flotante ─────────────────────────────────────
   Aparece bajo el pulgar. Se oculta con teclado, no estorba en escritorio. */
.joy{position:absolute;width:90px;height:90px;margin:-45px 0 0 -45px;
  border:2px solid rgba(246,246,244,.5);border-radius:50%;
  background:rgba(23,24,26,.25);opacity:0;transition:opacity .12s;
  pointer-events:none;z-index:5}
.joy.on{opacity:1}
.joy__k{position:absolute;left:50%;top:50%;width:45px;height:45px;
  margin:0;border-radius:50%;background:rgba(246,246,244,.75);
  transform:translate(-50%,-50%)}

/* ── Diálogo estilo RPG ────────────────────────────────────
   Borde escalonado con box-shadow: contorno de píxeles sin imágenes. */
.prompt{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);
  font-family:Silkscreen,'IBM Plex Mono',monospace;font-size:11px;
  background:#E8C15E;color:#17181A;padding:6px 10px;
  box-shadow:0 -3px 0 #E8C15E,0 3px 0 #E8C15E,-3px 0 0 #E8C15E,3px 0 0 #E8C15E,
             0 -6px 0 #17181A,0 6px 0 #17181A,-6px 0 0 #17181A,6px 0 0 #17181A;
  border:0;cursor:pointer;visibility:hidden;
  opacity:0;transition:opacity .15s}
.prompt.on{opacity:1;visibility:visible}
.prompt b{background:#17181A;color:#E8C15E;padding:1px 5px;margin-right:6px}

.dlg{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  width:min(560px,calc(100% - 44px));background:#1B2A20;color:#EAF0E2;
  padding:16px 18px;display:none;z-index:10;
  box-shadow:0 -4px 0 #1B2A20,0 4px 0 #1B2A20,-4px 0 0 #1B2A20,4px 0 0 #1B2A20,
             0 -8px 0 #EAF0E2,0 8px 0 #EAF0E2,-8px 0 0 #EAF0E2,8px 0 0 #EAF0E2,
             0 -12px 0 #17181A,0 12px 0 #17181A,-12px 0 0 #17181A,12px 0 0 #17181A}
.dlg.on{display:block}
.dlg__cerrar{position:absolute;right:6px;top:4px;min-width:44px;min-height:44px;
  border:0;background:transparent;color:#EAF0E2;font-size:24px;cursor:pointer}
.dlg__cab{padding-right:24px}
.vp:focus-visible,.prompt:focus-visible,.dlg__cerrar:focus-visible{outline:3px solid #E8C15E;outline-offset:3px}
.dlg__cab{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.dlg__ico{display:block;width:44px;height:44px;image-rendering:pixelated;flex:0 0 auto}
.dlg__t{font-family:Silkscreen,monospace;font-size:15px;font-weight:700;color:#E8C15E;line-height:1.3}
.dlg__sub{font-family:Silkscreen,monospace;font-size:9px;color:#8FB07E;margin-top:3px}
.dlg__txt{font-family:Silkscreen,monospace;font-size:11px;line-height:1.9;min-height:3.8em;
  overflow-wrap:anywhere}
.dlg__pie{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;
  font-family:Silkscreen,monospace;font-size:9px;color:#8FB07E}
.dlg__url{color:#E8C15E;text-decoration:underline}
.dlg__mas{animation:parpadeo 1s steps(2) infinite}
@keyframes parpadeo{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.dlg__mas{animation:none}}

/* El buscador vive dentro del diálogo: lo pide el vigilante del pórtico. */
.dlg__form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.dlg__form select,.dlg__form input[type=text]{font-family:Silkscreen,'IBM Plex Mono',monospace;
  font-size:11px;height:34px;padding:0 8px;border:2px solid #EAF0E2;background:#0F1A13;
  color:#EAF0E2}
.dlg__form input[type=text]{width:62px}
.dlg__form button{font-family:Silkscreen,'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.1em;height:34px;padding:0 14px;border:2px solid #E8C15E;
  background:#E8C15E;color:#17181A;cursor:pointer}
.dlg__form button:hover{background:#F2D27C;border-color:#F2D27C}
.dlg__msg{font-family:Silkscreen,monospace;font-size:9px;color:#8FB07E}

/* Cartel de llegada */
.logro{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.8);
  margin:0;z-index:8;pointer-events:none;text-align:center;
  font-family:Silkscreen,'IBM Plex Mono',monospace;font-size:clamp(16px,3.4vw,26px);
  line-height:1.5;color:#E8C15E;background:#17181A;padding:10px 18px;
  box-shadow:0 -4px 0 #17181A,0 4px 0 #17181A,-4px 0 0 #17181A,4px 0 0 #17181A,
             0 -8px 0 #E8C15E,0 8px 0 #E8C15E,-8px 0 0 #E8C15E,8px 0 0 #E8C15E;
  opacity:0;transition:opacity .2s,transform .35s cubic-bezier(.2,1.5,.4,1)}
.logro.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.logro small{display:block;font-size:.5em;color:#8FB07E;margin-top:6px;letter-spacing:.1em}
@media (prefers-reduced-motion:reduce){.logro{transition:opacity .2s}}

/* Pantalla completa */
.full{position:absolute;right:12px;top:12px;width:34px;height:34px;z-index:6;
  border:1px solid rgba(246,246,244,.35);background:rgba(23,24,26,.72);
  color:#F6F6F4;font-size:15px;line-height:1;cursor:pointer}
.full:hover{background:rgba(23,24,26,.9)}
.full:focus-visible{outline:3px solid #E8C15E;outline-offset:2px}
/* Lleva texto, no un símbolo: un icono de casa se lee como «inicio del sitio». */
.full--puerta{right:54px;width:auto;height:34px;padding:0 10px;
  font-family:Silkscreen,'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em}

/* En móvil el diálogo ocupa el ancho y el texto crece: a 390 px el
   recorte del artboard dejaba la ficha ilegible. */
@media (max-width:560px){
  .vp{min-height:300px}
  .dlg{left:8px;right:8px;bottom:8px;transform:none;width:auto;padding:13px 14px}
  .dlg__ico{width:34px;height:34px}
  .dlg__t{font-size:13px}
  .dlg__txt{font-size:10px;line-height:1.8}
  .prompt{bottom:auto;top:46px}
  .full{height:44px;min-width:44px}
  .full--puerta{right:64px}
  .hud{font-size:10px;padding:5px 9px}
}

/* En móvil el mapa es la página: el titular no puede comerse la primera
   pantalla. Solo afecta aquí — juego.css no se encola en ninguna otra. */
@media (max-width:560px){
  .dlg__form select,.dlg__form input[type=text],.dlg__form button{height:44px}
}