/* ================================================================
   CARTOPUZZLE · lienzo del mapa, chinchetas y zonas
   ----------------------------------------------------------------
   Compartida por builder.html y play.html.

     .ct-viewport     ventana fija, recorta y captura gestos
       .ct-layer      capa con transform: translate()+scale()
         img.ct-map   imagen del mundo
         svg          zonas, en coordenadas de píxel de la imagen
         .ct-fx       ondas de acierto/fallo
         .ct-pins     chinchetas
   ================================================================ */

.ct-viewport {
  position: relative;
  overflow: hidden;
  touch-action: none;              /* los gestos los maneja el JS */
  user-select: none;
  -webkit-user-select: none;
  border-radius: 18px;
  background-color: var(--ct-bg, #0b0713);
  background-image: var(--ct-bg-img, none);
  background-size: var(--ct-bg-size, auto);
  cursor: grab;
  color: var(--ct-text, #f0ecff);
  --ct-inv: 1;
}
.ct-viewport.is-panning { cursor: grabbing; }
.ct-viewport[data-tool="pin"],
.ct-viewport[data-tool="circle"],
.ct-viewport[data-tool="poly"] { cursor: crosshair; }
/* Mirilla: modo búsqueda libre */
.ct-viewport.is-aiming { cursor: crosshair; }

.ct-layer {
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;             /* solo un sistema de coordenadas */
  transform-origin: 0 0;
  will-change: transform;
}

.ct-map {
  position: absolute;
  top: 0; left: 0;
  max-width: none;                 /* gana a cualquier `img{max-width:100%}` global */
  display: block;
  pointer-events: none;            /* los clics son del viewport */
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--ct-map-edge, rgba(255,255,255,.1));
  filter: var(--ct-map-filter, none);
}

.ct-shapes {
  position: absolute;
  left: 0; top: 0;
  overflow: visible;
  pointer-events: none;            /* solo las zonas concretas lo reactivan */
}

.ct-pins, .ct-fx {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
}

/* ══════════════════════════════════════════════════════════════════
   INVITACIÓN A SOLTAR EL MAPA (constructor, sin imagen)
   ══════════════════════════════════════════════════════════════════ */
.ct-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 26px;
  text-align: center;
  pointer-events: none;
  color: var(--ct-muted, #a99fc4);
}
.ct-empty[hidden] { display: none; }
/* Botón: sí captura el puntero */
.ct-empty-btn { pointer-events: auto; }
.ct-empty-ico { font-size: 3.2rem; opacity: .85; }
.ct-empty p { margin: 0; font-size: 0.86rem; line-height: 1.6; max-width: 34ch; }
.ct-empty p:first-of-type { font-size: 1rem; color: var(--ct-text, #f0ecff); }
.ct-empty b { color: var(--ct-accent, #8deeff); }

/* ══════════════════════════════════════════════════════════════════
   CHINCHETAS
   ══════════════════════════════════════════════════════════════════ */
/* Anclaje en la punta inferior */
.ct-pin {
  position: absolute;
  transform: translate(-50%, -100%) scale(var(--ct-inv));
  transform-origin: 50% 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  z-index: 4;
  transition: filter .18s ease, opacity .18s ease;
}
.ct-pin:focus-visible { outline: none; }
.ct-pin:focus-visible .ct-pin-head { box-shadow: 0 0 0 3px var(--ct-accent, #8deeff); }

.ct-pin-head {
  width: 30px; height: 30px;
  border-radius: 50% 50% 50% 4px;
  transform: rotate(-45deg);
  display: grid;
  place-items: center;
  background: var(--ct-pin-bg, linear-gradient(140deg, #8deeff, #a96ae7));
  border: 2px solid var(--ct-pin-border, rgba(255,255,255,.85));
  box-shadow: 0 6px 14px rgba(0,0,0,.45);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.ct-pin-glyph {
  transform: rotate(45deg);
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--ct-pin-text, #0d0a16);
  line-height: 1;
}
.ct-pin-stem {
  width: 2px; height: 7px;
  margin-top: -2px;
  background: var(--ct-pin-border, rgba(255,255,255,.85));
  border-radius: 0 0 2px 2px;
}
.ct-pin-label {
  margin-top: 3px;
  max-width: 132px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  color: var(--ct-text, #f0ecff);
  background: var(--ct-label-bg, rgba(12, 8, 24, .82));
  border: 1px solid var(--ct-label-border, rgba(255,255,255,.16));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ct-pin:hover .ct-pin-head { transform: rotate(-45deg) scale(1.14); }

/* Flotación de las opciones */
@keyframes ct-flota {
  0%, 100% { transform: translate(-50%, -100%) scale(var(--ct-inv)); }
  50%      { transform: translate(-50%, calc(-100% - 5px)) scale(var(--ct-inv)); }
}
.ct-pin.is-option { animation: ct-flota 2.6s ease-in-out infinite; }
/* Desfase de la animación */
.ct-pin.is-option:nth-child(2n)   { animation-delay: -.55s; }
.ct-pin.is-option:nth-child(3n)   { animation-delay: -1.15s; }
.ct-pin.is-option:nth-child(5n)   { animation-delay: -1.8s; }

/* Marca de constructor: chincheta correcta */
.ct-pin.is-correct-mark .ct-pin-head {
  background: var(--ct-ok, #3ddc97);
  border-color: #eafff5;
}
.ct-pin.is-correct-mark .ct-pin-glyph::after {
  content: "✓";
  margin-left: 2px;
}

.ct-pin.is-right .ct-pin-head { background: var(--ct-ok, #3ddc97); border-color: #eafff5; }
.ct-pin.is-wrong .ct-pin-head { background: var(--ct-bad, #ff6b81); border-color: #ffe6ea; }
.ct-pin.is-off {
  opacity: .32;
  pointer-events: none;
  animation: none;
  filter: grayscale(1);
}
.ct-pin.is-off .ct-pin-label { opacity: .5; }
/* Chincheta acertada: recuerdo dorado */
.ct-pin.is-gold {
  animation: none;
  z-index: 6;
}
.ct-pin.is-gold .ct-pin-head {
  background: var(--ct-gold, #ffc94a);
  border-color: #fff6dd;
  box-shadow: 0 0 0 3px rgba(255, 201, 74, .28), 0 8px 18px rgba(0,0,0,.5);
}

@keyframes ct-shake {
  0%, 100% { transform: translate(-50%, -100%) scale(var(--ct-inv)) rotate(0deg); }
  22%      { transform: translate(calc(-50% - 5px), -100%) scale(var(--ct-inv)) rotate(-6deg); }
  58%      { transform: translate(calc(-50% + 5px), -100%) scale(var(--ct-inv)) rotate(6deg); }
}
.ct-pin.shake { animation: ct-shake .36s ease; }

@keyframes ct-pop {
  0%   { transform: translate(-50%, -100%) scale(var(--ct-inv)); }
  45%  { transform: translate(-50%, -100%) scale(calc(var(--ct-inv) * 1.35)); }
  100% { transform: translate(-50%, -100%) scale(var(--ct-inv)); }
}
.ct-pin.pop { animation: ct-pop .42s ease; }

/* ══════════════════════════════════════════════════════════════════
   ZONAS (círculos y polígonos)
   ══════════════════════════════════════════════════════════════════ */
/* Zonas: sin color en reproductor hasta revelarse; visibles en constructor */
.ct-shape-body {
  fill: transparent;
  stroke: none;
}
.ct-edit .ct-shape-body {
  fill: var(--ct-zone-fill, rgba(141, 238, 255, .14));
  stroke: var(--ct-zone-line, #8deeff);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  pointer-events: auto;
  cursor: move;
}
.ct-edit .ct-shape-g:hover .ct-shape-body { fill: var(--ct-zone-fill-hi, rgba(141, 238, 255, .24)); }
.ct-edit .ct-shape-g.is-selected .ct-shape-body {
  stroke: var(--ct-gold, #ffc94a);
  stroke-dasharray: none;
  stroke-width: 2.5;
}

/* Zona revelada */
.ct-shape-g.is-revealed .ct-shape-body {
  fill: rgba(61, 220, 151, .2);
  stroke: var(--ct-ok, #3ddc97);
  stroke-width: 3;
  stroke-dasharray: none;
  animation: ct-revelar .5s ease;
}
@keyframes ct-revelar {
  from { opacity: 0; stroke-width: 9; }
  to   { opacity: 1; stroke-width: 3; }
}

/* Círculo de calor (pista) */
.ct-shape-g.is-hot .ct-shape-body {
  fill: rgba(255, 201, 74, .12);
  stroke: var(--ct-gold, #ffc94a);
  stroke-width: 2;
  stroke-dasharray: 10 8;
  animation: ct-latido 1.6s ease-in-out infinite;
}
@keyframes ct-latido {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.ct-handle {
  fill: var(--ct-gold, #ffc94a);
  stroke: #1a1030;
  stroke-width: 2;
  pointer-events: auto;
  cursor: grab;
  /* Contra-escala */
  transform: scale(var(--ct-inv));
  transform-origin: center;
  transform-box: fill-box;
}
.ct-handle-radius { fill: var(--ct-accent, #8deeff); }
.ct-handle:hover { fill: #fff; }

.ct-draft-line {
  fill: rgba(141, 238, 255, .1);
  stroke: var(--ct-accent, #8deeff);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.ct-draft-dot {
  fill: var(--ct-accent, #8deeff);
  stroke: #14092a;
  stroke-width: 2;
  transform: scale(var(--ct-inv));
  transform-origin: center;
  transform-box: fill-box;
}

.ct-foco-velo { fill: rgba(4, 2, 12, .78); }

/* ══════════════════════════════════════════════════════════════════
   ONDAS DE DISPARO (caliente / frío / acierto)
   ══════════════════════════════════════════════════════════════════ */
.ct-onda {
  position: absolute;
  width: 26px; height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(var(--ct-inv));
  transform-origin: center;
  z-index: 3;
}
.ct-onda::before, .ct-onda::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid currentColor;
  animation: ct-expandir 1.1s cubic-bezier(.15,.7,.3,1) forwards;
}
.ct-onda::after { animation-delay: .16s; }
@keyframes ct-expandir {
  from { transform: scale(.35); opacity: .95; }
  to   { transform: scale(3.6);  opacity: 0; }
}
.ct-onda.is-cold { color: #6aa8ff; }
.ct-onda.is-warm { color: #ffab40; }
.ct-onda.is-hot  { color: #ff7043; }
.ct-onda.is-good { color: var(--ct-ok, #3ddc97); }

/* X roja del fallo en búsqueda libre */
.ct-onda.is-miss::before, .ct-onda.is-miss::after { display: none; }
.ct-onda.is-miss {
  color: var(--ct-bad, #ff6b81);
  font-size: 20px;
  font-weight: 900;
  line-height: 26px;
  text-align: center;
  animation: ct-fallo 1.5s ease forwards;
}
.ct-onda.is-miss::first-letter { color: inherit; }
@keyframes ct-fallo {
  0%   { opacity: 0; transform: scale(calc(var(--ct-inv) * .5)); }
  22%  { opacity: 1; transform: scale(calc(var(--ct-inv) * 1.15)); }
  75%  { opacity: 1; transform: scale(var(--ct-inv)); }
  100% { opacity: 0; transform: scale(var(--ct-inv)); }
}

/* ══════════════════════════════════════════════════════════════════
   MANDOS DE CÁMARA
   ══════════════════════════════════════════════════════════════════ */
.ct-cam {
  position: absolute;
  right: 12px; bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 20;
}
.ct-cam button {
  width: 34px; height: 34px;
  border-radius: 11px;
  border: 1px solid var(--ct-cam-border, rgba(255,255,255,.18));
  background: var(--ct-cam-bg, rgba(14, 9, 28, .86));
  color: var(--ct-text, #f0ecff);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color .15s ease, background .15s ease;
}
.ct-cam button:hover { border-color: var(--ct-accent, #8deeff); }

.ct-zoom-label {
  position: absolute;
  left: 14px; bottom: 16px;
  z-index: 20;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: var(--ct-muted, #a99fc4);
  background: var(--ct-cam-bg, rgba(14, 9, 28, .8));
  border: 1px solid var(--ct-cam-border, rgba(255,255,255,.14));
  border-radius: 999px;
  padding: 3px 9px;
  pointer-events: none;
}

/* Marca de "suelta aquí el archivo" (drag & drop) */
.ct-viewport.pl-drop-target {
  outline: 3px dashed var(--ct-accent, #8deeff);
  outline-offset: -6px;
}

/* ══════════════════════════════════════════════════════════════════
   MODAL DEL DATO (al acertar)
   ══════════════════════════════════════════════════════════════════ */
.ct-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: rgba(5, 2, 14, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ct-modal[hidden] { display: none; }
.ct-modal-card {
  width: min(430px, 100%);
  border-radius: 20px;
  overflow: hidden;
  background: var(--ct-modal-bg, #150d28);
  border: 1px solid var(--ct-modal-border, rgba(255,255,255,.16));
  box-shadow: 0 26px 60px rgba(0,0,0,.6);
  animation: ct-modal-in .22s ease;
}
@keyframes ct-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.ct-modal-body { padding: 1.3rem 1.35rem 1.2rem; }
.ct-modal-kicker {
  margin: 0 0 0.45rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ct-gold, #ffc94a);
}
.ct-modal-body h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--ct-text, #f0ecff);
}
.ct-modal-body p {
  margin: 0 0 1rem;
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--ct-muted, #a99fc4);
}
.ct-modal-close {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--ct-accent, #8deeff);
  background: transparent;
  color: var(--ct-accent, #8deeff);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.ct-modal-close:hover { background: var(--ct-accent, #8deeff); color: #0d0a16; }

/* ══════════════════════════════════════════════════════════════════
   SKINS
   ══════════════════════════════════════════════════════════════════ */
.ct-skin-atlas {
  --ct-bg: #0a0715;
  --ct-bg-img:
    radial-gradient(circle at 16% 20%, rgba(141,238,255,.14), transparent 46%),
    radial-gradient(circle at 82% 78%, rgba(169,106,231,.16), transparent 44%);
  --ct-text: #f0ecff;
  --ct-muted: #a99fc4;
  --ct-accent: #8deeff;
  --ct-ok: #3ddc97;
  --ct-bad: #ff6b81;
  --ct-gold: #ffc94a;
  --ct-pin-bg: linear-gradient(140deg, #8deeff, #a96ae7);
  --ct-pin-text: #0d0a16;
  --ct-zone-fill: rgba(141,238,255,.14);
  --ct-zone-line: #8deeff;
  --ct-map-edge: rgba(255,255,255,.12);
}

.ct-skin-satelite {
  --ct-bg: #03050c;
  --ct-bg-img:
    radial-gradient(circle at 50% 50%, rgba(61,220,151,.1), transparent 60%),
    linear-gradient(rgba(61,220,151,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61,220,151,.05) 1px, transparent 1px);
  --ct-bg-size: auto, 34px 34px, 34px 34px;
  --ct-text: #dcffee;
  --ct-muted: #79a897;
  --ct-accent: #3ddc97;
  --ct-ok: #7dffc4;
  --ct-bad: #ff5f6d;
  --ct-gold: #d8ff5a;
  --ct-pin-bg: linear-gradient(140deg, #7dffc4, #1fa37a);
  --ct-pin-text: #04140d;
  --ct-zone-fill: rgba(61,220,151,.14);
  --ct-zone-line: #3ddc97;
  --ct-map-edge: rgba(61,220,151,.24);
  --ct-map-filter: saturate(1.08) contrast(1.06);
  --ct-label-bg: rgba(3, 18, 12, .85);
  --ct-label-border: rgba(61,220,151,.28);
  --ct-cam-bg: rgba(4, 20, 14, .86);
  --ct-cam-border: rgba(61,220,151,.26);
  --ct-modal-bg: #06180f;
  --ct-modal-border: rgba(61,220,151,.28);
}

.ct-skin-pergamino {
  --ct-bg: #241a10;
  --ct-bg-img:
    radial-gradient(circle at 20% 24%, rgba(255, 214, 150, .14), transparent 48%),
    radial-gradient(circle at 78% 76%, rgba(120, 78, 40, .28), transparent 46%);
  --ct-text: #3a2a17;
  --ct-muted: #7a6244;
  --ct-accent: #b6733a;
  --ct-ok: #4f8a4a;
  --ct-bad: #b03a3a;
  --ct-gold: #a8761f;
  --ct-pin-bg: linear-gradient(140deg, #f0d9a8, #c08b45);
  --ct-pin-text: #2f2010;
  --ct-pin-border: rgba(60, 40, 20, .8);
  --ct-zone-fill: rgba(176, 115, 58, .2);
  --ct-zone-line: #8a5a26;
  --ct-map-edge: rgba(60, 40, 20, .35);
  --ct-map-filter: sepia(.22) saturate(1.05);
  --ct-label-bg: rgba(248, 235, 208, .92);
  --ct-label-border: rgba(120, 84, 44, .4);
  --ct-cam-bg: rgba(246, 232, 203, .9);
  --ct-cam-border: rgba(120, 84, 44, .34);
  --ct-modal-bg: #f6e8cb;
  --ct-modal-border: rgba(120, 84, 44, .4);
}

.ct-skin-neon {
  --ct-bg: #06040f;
  --ct-bg-img:
    radial-gradient(circle at 18% 22%, rgba(229,90,177,.22), transparent 46%),
    radial-gradient(circle at 84% 76%, rgba(141,238,255,.18), transparent 44%),
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  --ct-bg-size: auto, auto, 26px 26px, 26px 26px;
  --ct-text: #ffe9fb;
  --ct-muted: #c39fce;
  --ct-accent: #ff6ec7;
  --ct-ok: #5cffd0;
  --ct-bad: #ff5470;
  --ct-gold: #ffe14a;
  --ct-pin-bg: linear-gradient(140deg, #ff6ec7, #7b5cff);
  --ct-pin-text: #14061a;
  --ct-zone-fill: rgba(255, 110, 199, .16);
  --ct-zone-line: #ff6ec7;
  --ct-map-edge: rgba(255, 110, 199, .3);
  --ct-map-filter: saturate(1.12);
  --ct-label-bg: rgba(20, 6, 30, .86);
  --ct-label-border: rgba(255,110,199,.3);
  --ct-cam-bg: rgba(18, 6, 28, .88);
  --ct-cam-border: rgba(255,110,199,.28);
  --ct-modal-bg: #170a24;
  --ct-modal-border: rgba(255,110,199,.32);
}

/* ══════════════════════════════════════════════════════════════════
   MOVIMIENTO REDUCIDO Y MODO BAJO RENDIMIENTO
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ct-pin.is-option,
  .ct-shape-g.is-hot .ct-shape-body { animation: none; }
  .ct-onda::before, .ct-onda::after { animation-duration: .4s; }
  .ct-modal-card { animation: none; }
}

body.perf-low .ct-pin.is-option,
body.perf-low .ct-shape-g.is-hot .ct-shape-body { animation: none; }
body.perf-low .ct-cam button,
body.perf-low .ct-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
body.perf-low .ct-map { filter: none; }

/* ══════════════════════════════════════════════════════════════════
   PANTALLAS ESTRECHAS
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .ct-pin-head { width: 34px; height: 34px; }
  .ct-pin-glyph { font-size: 0.84rem; }
  .ct-pin-label { max-width: 108px; font-size: 0.6rem; }
  .ct-cam button { width: 38px; height: 38px; font-size: 1.05rem; }
  .ct-cam { right: 10px; bottom: 10px; }
  .ct-empty-ico { font-size: 2.6rem; }
  .ct-empty p { font-size: 0.8rem; }
}

/* Puntero grueso: área de agarre de tiradores */
@media (pointer: coarse) {
  .ct-handle { r: 10; }
}

/* Blancos táctiles */
@media (pointer: coarse) {
  .ct-cam button { min-width: 44px; min-height: 44px; }
}