/* ═══════════ EL MAPA · tinta sobre el papel de la casa ═══════════ */
body[data-nivel="mapa"]{overflow:hidden;overscroll-behavior:none}
body[data-nivel="mapa"] :is(#cielo,#plumas){opacity:.12}

.mapa{position:fixed;inset:0;top:0;z-index:2;cursor:grab;touch-action:none;
  background:
    radial-gradient(120% 90% at 50% 10%,rgba(231,218,189,.08),transparent 70%),
    linear-gradient(172deg,#1A160F,#0C0A07 62%,#120E09)}
.mapa.arrastrando{cursor:grabbing}

/* el papel donde vive el dibujo: el mismo grano que el pergamino, más apagado */
.lienzo{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.dibujo{position:relative;background:linear-gradient(168deg,#E9DCBE 0%,#DFD0AE 56%,#CDBB95 100%);
  box-shadow:0 40px 90px 10px rgba(0,0,0,.6)}
.dibujo::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.45'/></svg>")}
.dibujo svg{display:block}

/* ── los puntos ── */
.puntos{position:absolute;inset:0}
.punto{position:absolute;transform:translate(-50%,-50%) scale(calc(1 / var(--k,1)));transform-origin:50% 50%;
  background:none;border:0;padding:0;cursor:pointer;display:grid;justify-items:center;gap:4px}
.punto i{display:block;width:16px;height:16px;border-radius:50%;background:var(--c,#C9A35F);
  box-shadow:0 0 0 2px rgba(23,18,12,.7),0 0 14px color-mix(in srgb,var(--c,#C9A35F) 70%,transparent);
  transition:transform .3s var(--curva),box-shadow .3s}
.punto:hover i,.punto:focus-visible i{transform:scale(1.35)}
.punto .nom{font-family:var(--f-rotulo);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:#2A2118;background:rgba(233,220,190,.82);padding:3px 7px;white-space:nowrap;opacity:0;
  transition:opacity .3s;pointer-events:none}
.punto:hover .nom,.punto:focus-visible .nom{opacity:1}
.punto.cat-lugar{--c:#C9A35F}
.punto.cat-mundo{--c:#C0533E}
.punto.cat-escena{--c:#6EE7F0}
.punto.visto i{background:rgba(23,18,12,.5);box-shadow:0 0 0 2px var(--c),inset 0 0 0 3px rgba(233,220,190,.5)}

/* ── las capas ── */
.capas{position:absolute;top:calc(var(--barra) + 14px);left:14px;width:214px;padding:16px 16px 14px;
  background:linear-gradient(176deg,rgba(255,255,255,.05),transparent 46%),rgba(10,8,6,.84);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.capas::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(232,200,116,.4) 16%,rgba(232,200,116,.4) 84%,transparent) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(201,163,95,.26) 24%,rgba(201,163,95,.26) 76%,transparent) bottom/100% 1px no-repeat,
    linear-gradient(180deg,transparent,rgba(201,163,95,.26) 28%,rgba(201,163,95,.26) 72%,transparent) left/1px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(201,163,95,.26) 28%,rgba(201,163,95,.26) 72%,transparent) right/1px 100% no-repeat}
.capas > .rotulo{margin:0 0 12px;font-family:var(--f-rotulo);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.capa{display:flex;align-items:center;gap:10px;padding:7px 0;cursor:pointer;color:var(--ivory-dim);
  font-family:var(--f-rotulo);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.capa input{position:absolute;opacity:0;width:0;height:0}
.capa i{width:10px;height:10px;border-radius:50%;background:var(--c);opacity:.3;transition:opacity .3s,box-shadow .3s}
.capa input:checked + i{opacity:1;box-shadow:0 0 10px color-mix(in srgb,var(--c) 60%,transparent)}
.capa span{flex:1}
.capa b{font-weight:400;color:var(--gold-idle);font-variant-numeric:tabular-nums}
.capa input:checked ~ span{color:var(--ivory)}
.capas .llevas{margin:14px 0 0;padding-top:12px;font-family:var(--f-rotulo);font-size:10px;letter-spacing:.2em;
  color:var(--gold);position:relative;font-variant-numeric:tabular-nums}
.capas .llevas::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,163,95,.3) 20%,rgba(201,163,95,.3) 80%,transparent)}

/* ── el zoom ── */
.zoom{position:absolute;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));display:grid;gap:8px}
.zoom .icono{font-family:var(--f-rotulo);font-size:17px}

/* ── la ficha de un punto ── */
.ficha{position:absolute;right:14px;top:calc(var(--barra) + 14px);width:min(320px,calc(100vw - 28px));
  padding:20px 22px 22px;
  background:linear-gradient(176deg,rgba(255,255,255,.06),transparent 42%),rgba(10,8,6,.9);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  animation:ficha-entra .4s var(--curva) both}
@keyframes ficha-entra{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.ficha::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,transparent,rgba(232,200,116,.44) 14%,rgba(232,200,116,.44) 86%,transparent) top/100% 1px no-repeat,
    linear-gradient(90deg,transparent,rgba(201,163,95,.28) 22%,rgba(201,163,95,.28) 78%,transparent) bottom/100% 1px no-repeat,
    linear-gradient(180deg,transparent,rgba(201,163,95,.28) 26%,rgba(201,163,95,.28) 74%,transparent) left/1px 100% no-repeat,
    linear-gradient(180deg,transparent,rgba(201,163,95,.28) 26%,rgba(201,163,95,.28) 74%,transparent) right/1px 100% no-repeat}
.ficha .cerrar{position:absolute;top:10px;right:10px;width:32px;height:32px}
.ficha .rotulo{margin:0 0 6px;font-family:var(--f-rotulo);font-size:9px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-idle)}
.ficha h2{margin:0 0 10px;font-family:var(--f-rotulo);font-weight:600;font-size:21px;letter-spacing:.06em;
  color:var(--gold-hi);padding-right:30px}
.ficha .dice{margin:0 0 16px;font-family:var(--f-susurro);font-style:italic;font-size:16.5px;line-height:1.5;
  color:var(--ivory-dim)}
.ficha .acciones{display:flex;flex-wrap:wrap;gap:10px}
.ficha .boton{font-size:9.5px;padding:12px 18px;letter-spacing:.24em}

@media (max-width:700px){
  .capas{left:0;right:0;top:auto;bottom:0;width:auto;transform:translateY(calc(100% - 46px));
    transition:transform .45s var(--curva)}
  .capas.abierta{transform:none}
  .capas > .rotulo{text-align:center}
  .ficha{top:auto;bottom:70px;right:14px;left:14px;width:auto}
  .zoom{bottom:auto;top:calc(var(--barra) + 14px)}
}
@media (prefers-reduced-motion:reduce){.ficha{animation:none}}