/* EL SEGUNDO MURO · cerradura de nueve glifos. Namespace propio (.muro-*);
   no toca selectores de vitrina.css ni de caja.css. El violeta es el del agua
   de la pared (portal.js), no un color nuevo. */
#muro{
  position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  background:radial-gradient(60% 60% at 50% 46%, #1a1430e6, #05060bf2 72%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1);
  color:#e9e4ff; font-family:Inter,sans-serif;
  --muro-r:clamp(108px, 30vmin, 158px);
}
#muro[hidden]{display:none}
#muro.muro-vivo{opacity:1}
.muro-panel{display:grid; justify-items:center; gap:22px; padding:16px}
.muro-rotulo{
  margin:0; display:flex; gap:14px; font:600 10px/1 Inter,sans-serif; letter-spacing:.32em;
  color:#a894ec;
}
.muro-rotulo span + span{color:#ffffff55}
.muro-corona{
  position:relative; width:calc(var(--muro-r) * 2 + 64px); height:calc(var(--muro-r) * 2 + 64px);
  border-radius:50%;
  background:
    radial-gradient(circle, transparent 54%, #a894ec14 55%, transparent 56%),
    radial-gradient(circle, transparent 69%, #a894ec22 70%, transparent 71%),
    repeating-linear-gradient(0deg, #ffffff05 0 1px, transparent 1px 3px);
  box-shadow:inset 0 0 60px #a894ec18, 0 0 80px #a894ec12;
}
.muro-glifo{
  position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px;
  transform:rotate(calc(var(--i) * 40deg)) translateY(calc(var(--muro-r) * -1)) rotate(calc(var(--i) * -40deg));
  border:1px solid #a894ec44; border-radius:50%; background:#0d0b1acc;
  color:#d8d0ff; font:400 22px/1 "Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2",sans-serif;
  display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.muro-glifo:hover, .muro-glifo:focus-visible{border-color:#d8d0ffaa; box-shadow:0 0 18px #a894ec66; outline:none}
.muro-glifo.muro-toque span{animation:muroToque .32s cubic-bezier(.2,.7,.3,1)}
@keyframes muroToque{0%{transform:scale(1)}40%{transform:scale(1.35); filter:brightness(2)}100%{transform:scale(1)}}
.muro-centro{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  display:flex; gap:8px;
}
.muro-hueco{
  width:20px; height:28px; display:grid; place-items:center; font-style:normal;
  border-bottom:1px solid #a894ec66; color:#f2eeff; font:400 15px/1 "Segoe UI Symbol","Apple Symbols",monospace;
}
.muro-hueco.lleno{border-bottom-color:#f2eeff; text-shadow:0 0 10px #a894ec}
.muro-aviso{margin:0; min-height:1.4em; font-size:12px; letter-spacing:.06em; color:#cfc7f5cc; text-align:center}
.muro-cerrar{
  position:absolute; top:max(16px, env(safe-area-inset-top)); right:16px; width:44px; height:44px;
  display:grid; place-items:center; border:1px solid #ffffff28; border-radius:50%;
  background:#0b0d1399; color:#dbdce2; cursor:pointer;
}
#muro.muro-falla .muro-centro{animation:muroFalla .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes muroFalla{
  20%,60%{transform:translate(calc(-50% - 6px),-50%)}
  40%,80%{transform:translate(calc(-50% + 6px),-50%)}
}
/* al ceder: la corona se ondula como el agua y se disuelve */
#muro.muro-sale .muro-corona{animation:muroSale .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes muroSale{
  0%{transform:scale(1); filter:none; opacity:1}
  35%{transform:scaleX(1.18) scaleY(.94); filter:brightness(2.2) blur(1px)}
  100%{transform:scale(1.4); filter:blur(8px); opacity:0}
}
@media (prefers-reduced-motion:reduce){
  #muro{transition:none}
  .muro-glifo.muro-toque span, #muro.muro-falla .muro-centro, #muro.muro-sale .muro-corona{animation:none}
}