/* Capa compartida de terror: grano, viñeta, parpadeo, título de neón, botón de sonido */
:root{
  --ano-red:#d4161d;
  --ano-red-glow:rgba(225,37,42,.85);
  --ano-bone:#d9d3c4;
  --ano-mute:#8a867b;
  --ano-fungus:#cfc3a1;
  --ano-moss:#6f7d63;
}
.fx-grain{position:fixed;inset:-100%;width:300%;height:300%;z-index:40;pointer-events:none;opacity:.14;mix-blend-mode:overlay;animation:fx-grain .9s steps(9) infinite}
@keyframes fx-grain{
  0%{transform:translate(0,0)}11%{transform:translate(-3%,2%)}22%{transform:translate(2%,-4%)}33%{transform:translate(-5%,1%)}
  44%{transform:translate(4%,3%)}55%{transform:translate(-2%,-3%)}66%{transform:translate(5%,-1%)}77%{transform:translate(-4%,4%)}88%{transform:translate(1%,-5%)}100%{transform:translate(0,0)}}
.fx-vig{position:fixed;inset:0;z-index:38;pointer-events:none;
  background:radial-gradient(ellipse at 50% 48%,rgba(0,0,0,0) 38%,rgba(0,0,0,.3) 72%,rgba(0,0,0,.72) 100%)}
.fx-grade{position:fixed;inset:0;z-index:37;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(180deg,rgba(40,70,70,.35),rgba(120,90,40,.22) 70%,rgba(30,50,45,.4))}
.fx-flicker{position:fixed;inset:0;z-index:39;pointer-events:none;background:#000;opacity:0}
.fx-spores{position:fixed;inset:0;width:100vw;height:100vh;z-index:36;pointer-events:none}
.fx-sound{position:fixed;right:26px;bottom:22px;z-index:45;font:500 .62rem "IBM Plex Mono",monospace;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ano-bone);background:rgba(0,0,0,.55);border:1px solid rgba(217,211,196,.25);padding:7px 11px;cursor:pointer;display:flex;align-items:center;gap:8px}
.fx-sound i{width:7px;height:7px;border-radius:50%;background:#555}
.fx-sound[aria-pressed="true"] i{background:var(--ano-red);box-shadow:0 0 8px var(--ano-red)}
.fx-sound:focus-visible{outline:1px solid var(--ano-red);outline-offset:3px}

/* Título: piedra cincelada, tétrica, integrada en el fondo (Cinzel + textura de piedra generada en fx.js) */
.ano-title{font-family:"Cinzel",Georgia,serif;font-weight:900;text-transform:uppercase;letter-spacing:.08em;line-height:.95;
  color:#6d6a63;background-color:#6d6a63;background-image:var(--stone,none);background-size:420px 420px;background-position:center;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  opacity:.84;mix-blend-mode:luminosity;
  filter:drop-shadow(0 0 14px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(140,12,18,.22));
  animation:ano-breathe 9s ease-in-out infinite}
.ano-title.on{animation:ano-rise 3s cubic-bezier(.2,.6,.2,1) both, ano-breathe 9s 3s ease-in-out infinite}
@keyframes ano-breathe{0%,100%{filter:drop-shadow(0 0 14px rgba(0,0,0,.55)) drop-shadow(0 0 46px rgba(140,12,18,.22))}
  50%{filter:drop-shadow(0 0 18px rgba(0,0,0,.55)) drop-shadow(0 0 60px rgba(160,14,20,.32))}}
@keyframes ano-rise{0%{opacity:0;transform:translateY(12px);letter-spacing:.14em;filter:blur(4px)}100%{opacity:.84;transform:none;letter-spacing:.08em;filter:blur(0)}}
.ano-sub{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ano-mute)}
@media (prefers-reduced-motion:reduce){.fx-grain{animation:none}.ano-title,.ano-title.on{animation:none}}