/* Cazafantasmas AR v4 — terror.css
   Ambientación de terror para TODO el juego (se carga después de style.css y lo pisa donde hace falta). */
@font-face{font-family:"Creepster";src:url(../fonts/creepster.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Special Elite";src:url(../fonts/special-elite.woff2) format("woff2");font-display:swap}

:root{
  --sangre:#a8001a; --sangre2:#e0142f; --hueso:#e9dfc8; --ceniza:#8c8178; --negro:#050203;
  --bg:#050203; --ink:#e9dfc8; --muted:#9a8f86; --accent:#e0142f; --accent2:#7a5cff;
  --glass:rgba(12,3,5,.72);
}
html,body{background:var(--negro);font-family:"Special Elite","Courier New",monospace}

/* fondo de menús: niebla nocturna mientras no hay cámara */
#camFallback{background:
  radial-gradient(ellipse at 50% 18%,rgba(120,10,20,.35) 0%,transparent 45%),
  radial-gradient(ellipse at 20% 90%,#1a0f14 0%,transparent 60%),
  radial-gradient(ellipse at 80% 70%,#0f1218 0%,transparent 55%),#040203}

/* grano de película + parpadeo */
#grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  animation:grano .6s steps(4) infinite}
@keyframes grano{0%{transform:translate(0,0)}25%{transform:translate(-6%,4%)}50%{transform:translate(5%,-3%)}75%{transform:translate(-3%,-6%)}100%{transform:translate(4%,5%)}}

/* ---------- pantallas ---------- */
.screen{background:radial-gradient(ellipse at 50% 38%,rgba(40,0,6,.25),rgba(0,0,0,.84) 75%);backdrop-filter:none;gap:12px}
.screen.scroll{justify-content:flex-start;overflow-y:auto;touch-action:pan-y;-webkit-overflow-scrolling:touch;background:rgba(4,1,2,.94)}
#splash{cursor:pointer}
.splash-txt{display:flex;flex-direction:column;align-items:center;gap:22px}
.parpadea{font-size:18px;color:var(--hueso);animation:parpadeo 3.2s infinite}
@keyframes parpadeo{0%,100%{opacity:.9}45%{opacity:.9}47%{opacity:.1}49%{opacity:.8}51%{opacity:.05}53%,90%{opacity:.85}}
.aviso-auris{font-size:12px;color:var(--ceniza)}

h1.sangre,h1{font-family:"Creepster",fantasy;font-weight:400;font-size:42px;letter-spacing:2px;line-height:.95;
  color:var(--sangre2);text-shadow:0 0 2px #000,0 2px 0 #3a0008,0 0 22px rgba(224,20,47,.55),0 0 60px rgba(160,0,20,.35);
  animation:latido 4s ease-in-out infinite}
h1 span{display:block;font-size:64px;color:var(--hueso);text-shadow:0 0 18px rgba(255,240,210,.35),0 3px 0 #2a0005;letter-spacing:8px}
@keyframes latido{0%,100%{transform:scale(1)}8%{transform:scale(1.03)}14%{transform:scale(1)}20%{transform:scale(1.02)}}
h2{font-family:"Creepster",fantasy;font-weight:400;font-size:34px;letter-spacing:2px;color:var(--sangre2);text-shadow:0 0 18px rgba(224,20,47,.55)}
.sangre-chica{font-size:30px}
.logo-ghost{display:none}
.sub{color:var(--ceniza);max-width:340px}
.hint,.ver{color:var(--ceniza)}

/* ---------- botones ---------- */
.btn{font-family:"Special Elite",monospace;font-weight:400;letter-spacing:1px;color:var(--hueso);
  background:linear-gradient(180deg,#7a0012,#3d0008);border:1px solid #c2122d;border-radius:6px;
  box-shadow:0 0 14px rgba(224,20,47,.35),inset 0 0 18px rgba(0,0,0,.6)}
.btn.ghost{background:rgba(0,0,0,.45);border:1px solid rgba(233,223,200,.35);box-shadow:none;color:var(--hueso)}
.btn.rojo{background:linear-gradient(180deg,#2b1b3d,#120a1c);border-color:#7a5cff;box-shadow:0 0 14px rgba(122,92,255,.35)}
.tesoro-btn{background:linear-gradient(180deg,#3a2a0c,#170f03);border-color:#c9922e;box-shadow:0 0 16px rgba(201,146,46,.35);margin-top:4px}
.lvl{font-family:"Special Elite",monospace;background:rgba(8,2,3,.78);border:1px solid rgba(233,223,200,.14);border-radius:6px;position:relative;
  box-shadow:inset 0 0 24px rgba(0,0,0,.8)}
.lvl b{font-family:"Creepster",fantasy;font-weight:400;font-size:24px;letter-spacing:1px}
.lvl[data-level="0"] b{color:#9dffc9}.lvl[data-level="1"] b{color:#a993ff}.lvl[data-level="2"] b{color:var(--sangre2)}
.lvl[data-level="0"]{border-left:4px solid #3fae7a}.lvl[data-level="1"]{border-left:4px solid #6a4cdb}.lvl[data-level="2"]{border-left:4px solid var(--sangre)}
.lvl-est{position:absolute;right:12px;top:12px;font-style:normal;font-size:12px;color:#d9a441}

/* ---------- subniveles ---------- */
.subs{display:flex;flex-direction:column;gap:8px;width:100%;max-width:380px}
.sub-card{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:10px;padding:10px 12px;text-align:left;
  background:rgba(8,2,3,.8);border:1px solid rgba(233,223,200,.14);border-radius:6px;color:var(--hueso);font:inherit}
.sub-card .num{font-family:"Creepster",fantasy;font-size:28px;color:var(--sangre2);text-align:center}
.sub-card b{display:block;font-size:15px}.sub-card small{color:var(--ceniza);font-size:12px}
.sub-card .est{color:#d9a441;font-size:15px;letter-spacing:1px;white-space:nowrap}
.sub-card.bloq{opacity:.45;filter:grayscale(1)}
.sub-card:active{transform:scale(.98)}
.estrellas{font-size:40px;letter-spacing:6px;color:#d9a441;text-shadow:0 0 14px rgba(217,164,65,.6)}
.estrellas .off{color:#3a3330;text-shadow:none}

/* ---------- HUD ---------- */
#topbar{background:linear-gradient(to bottom,rgba(0,0,0,.75),transparent)}
.stat span:last-child{font-family:"Special Elite",monospace;color:var(--hueso);text-shadow:0 0 10px rgba(224,20,47,.7)}
.stat .lbl{color:var(--ceniza)}
#combo{font-family:"Creepster",fantasy;font-size:26px;color:var(--sangre2);letter-spacing:2px}
#pauseBtn{background:rgba(0,0,0,.6);border-color:rgba(224,20,47,.5)}
#verTag{font-family:"Special Elite",monospace}
#intro{position:fixed;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;pointer-events:none;text-align:center;
  animation:intro 3.2s ease forwards}
#intro small{color:var(--ceniza);letter-spacing:4px;font-size:13px}
#intro b{font-family:"Creepster",fantasy;font-weight:400;font-size:44px;color:var(--sangre2);text-shadow:0 0 24px rgba(224,20,47,.8),0 2px 0 #000;padding:0 16px;line-height:1}
#intro span{color:var(--hueso);font-size:15px;text-shadow:0 0 8px #000}
@keyframes intro{0%{opacity:0;letter-spacing:12px}15%{opacity:1;letter-spacing:0}75%{opacity:1}100%{opacity:0}}

/* escaneo de marcas */
#scanRet{position:fixed;z-index:4;left:50%;top:50%;width:min(62vw,300px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;animation:respira 2.4s ease-in-out infinite}
#scanRet i{position:absolute;width:34px;height:34px;border:3px solid rgba(217,164,65,.85)}
#scanRet i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
#scanRet i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
#scanRet i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
#scanRet i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
#scanRet span{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:12px;color:rgba(217,164,65,.9);letter-spacing:2px}
@keyframes respira{50%{transform:translate(-50%,-50%) scale(1.05);opacity:.65}}
#clue{position:fixed;z-index:6;left:12px;right:72px;bottom:calc(env(safe-area-inset-bottom) + 12px);padding:10px 12px;border-radius:4px;
  background:linear-gradient(180deg,rgba(216,201,163,.95),rgba(180,160,120,.95));color:#1d1208;box-shadow:0 6px 20px rgba(0,0,0,.7)}
#clueNum{font-size:11px;letter-spacing:1px;color:#6a1010}
#clueTxt{font-size:15px;line-height:1.25;margin-top:2px}
#clue.mini #clueTxt{display:none}
body:has(#clue:not(.hidden)) #verTag{display:none}

/* pergamino */
.pergamino{max-width:340px;width:100%;padding:22px 20px;background:radial-gradient(ellipse at center,#e6d8b2,#b89d6a);color:#1d1208;font-size:19px;line-height:1.35;
  clip-path:polygon(0 4%,6% 0,15% 3%,27% 0,40% 2%,55% 0,68% 3%,80% 0,92% 2%,100% 0,98% 30%,100% 55%,97% 80%,100% 100%,85% 97%,70% 100%,55% 97%,40% 100%,25% 96%,10% 100%,0 97%,2% 70%,0 45%,3% 20%);
  box-shadow:inset 0 0 40px rgba(80,40,10,.6)}
.cofre{font-size:72px;animation:latido 1.6s infinite}

/* ---------- editor del adulto ---------- */
.campo{display:flex;flex-direction:column;gap:6px;width:100%;max-width:400px;text-align:left}
.campo>span{font-size:12px;color:var(--ceniza);letter-spacing:1px}
.campo input,.campo select,.pista textarea{font:inherit;font-size:16px;color:var(--hueso);background:rgba(0,0,0,.6);border:1px solid rgba(233,223,200,.25);border-radius:4px;padding:10px;width:100%;user-select:text;-webkit-user-select:text}
.seg{display:flex;gap:6px}
.seg button{flex:1;font:inherit;font-size:13px;padding:9px 4px;color:var(--hueso);background:rgba(0,0,0,.5);border:1px solid rgba(233,223,200,.2);border-radius:4px}
.seg button.on{background:#5c0010;border-color:var(--sangre2)}
.stepper{display:flex;align-items:center;gap:16px}
.stepper button{width:46px;height:42px;font-size:24px;color:var(--hueso);background:rgba(0,0,0,.6);border:1px solid rgba(233,223,200,.3);border-radius:4px}
.stepper b{font-size:26px;min-width:30px;text-align:center}
#hPistas{display:flex;flex-direction:column;gap:10px;width:100%;max-width:400px}
.pista{display:flex;flex-direction:column;gap:4px;text-align:left}
.pista span{font-size:12px;color:var(--ceniza)}.pista b{color:var(--hueso)}
.pista.final b{color:#d9a441}
.pista textarea{resize:none}

/* ---------- hoja imprimible ---------- */
.print-bar{display:flex;flex-direction:column;gap:8px;align-items:center;margin-bottom:10px}
#printArea{width:100%;max-width:720px;color:#111;background:#fff;padding:14px;border-radius:4px;text-align:left}
.hoja-adulto h3{font-family:"Creepster",fantasy;font-weight:400;font-size:24px;color:#7a0012}
.hoja-adulto p,.hoja-adulto li{font-size:13px;margin:4px 0}.hoja-adulto ol{padding-left:20px}
.hoja-adulto .nota{color:#555;font-size:11px}
.cartas{display:grid;grid-template-columns:1fr;gap:14px;margin-top:14px}
.carta{border:6px double #111;padding:14px;text-align:center;page-break-inside:avoid;break-inside:avoid;background:#fff}
.carta-top{font-size:12px;letter-spacing:3px}
.carta-tit{font-family:"Creepster",fantasy;font-size:52px;color:#7a0012;line-height:1}
.carta.tesoro .carta-tit{color:#8a5a00}
.carta-sub{font-size:13px;margin-bottom:6px}
.carta-qr svg{width:min(70vw,300px);height:auto;display:block;margin:0 auto}
.carta-pie{font-size:11px;margin-top:6px;color:#444}
@media print{
  @page{margin:10mm}
  html,body{background:#fff!important;overflow:visible!important;height:auto!important}
  body>*:not(#huntPrint){display:none!important}
  #huntPrint{position:static!important;display:block!important;background:#fff!important;padding:0!important;overflow:visible!important}
  .no-print{display:none!important}
  #printArea{max-width:none;padding:0}
  .hoja-adulto{page-break-after:always;break-after:page}
  .cartas{grid-template-columns:1fr 1fr;gap:8mm}
  .carta{height:125mm;display:flex;flex-direction:column;justify-content:center}
  .carta-qr svg{width:70mm}
}

/* ---------- v2: modos, historia y sustos ---------- */
.modos{display:flex;flex-direction:column;gap:12px;width:100%;max-width:380px;margin-top:6px}
.modo{display:grid;grid-template-columns:52px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:16px 14px;border-radius:6px;
  font:inherit;color:var(--hueso);background:linear-gradient(180deg,rgba(40,24,6,.85),rgba(10,5,2,.9));border:1px solid #c9922e;box-shadow:0 0 18px rgba(201,146,46,.25),inset 0 0 24px rgba(0,0,0,.7)}
.modo.caza{background:linear-gradient(180deg,rgba(70,0,12,.85),rgba(14,0,3,.9));border-color:var(--sangre2);box-shadow:0 0 18px rgba(224,20,47,.3),inset 0 0 24px rgba(0,0,0,.7)}
.modo-ico{grid-row:1/3;font-size:36px;text-align:center}
.modo b{font-family:"Creepster",fantasy;font-weight:400;font-size:26px;letter-spacing:1px}
.modo small{color:var(--ceniza);font-size:12px}
.modo:active{transform:scale(.98)}
.acto{font-family:"Creepster",fantasy;font-weight:400;color:#d9a441;font-size:20px;letter-spacing:1px;margin:8px 0 2px;text-align:left}
.relato{font-size:17px;max-width:360px;min-height:120px}
.relato p{white-space:pre-wrap}
.invisible{visibility:hidden}
#overFin{margin:4px 0}

/* sustos: la pantalla se cierra durante la tensión, sacudón y fogonazo en el golpe */
body{--tension:0}
#vignette::after{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent calc(55% - 50% * var(--tension)),rgba(0,0,0,calc(.97 * var(--tension))) calc(100% - 30% * var(--tension)));
  box-shadow:inset 0 0 calc(160px * var(--tension)) rgba(120,0,15,calc(.6 * var(--tension)))}
body.sacudon #hud,body.sacudon #cam,body.sacudon #camFallback{animation:sacudon .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes sacudon{10%,90%{transform:translate(-3px,2px)}20%,80%{transform:translate(6px,-4px) rotate(.6deg)}30%,50%,70%{transform:translate(-10px,6px) rotate(-1deg)}40%,60%{transform:translate(10px,-6px) rotate(1deg)}}
body.fogonazo #vignette{background:rgba(255,255,255,.75)!important;transition:none}
body.virtual #cam{display:none}
body.virtual #camFallback{display:block!important}

/* ---------- v2: visor del detector ---------- */
.visor{position:fixed;inset:0;z-index:4;pointer-events:none;--vc:rgba(124,245,196,.85)}
.visor.v1{--vc:rgba(143,211,255,.85)}.visor.v2{--vc:rgba(255,60,80,.85)}
.visor .scan{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.visor .scan::after{content:"";position:absolute;left:0;right:0;height:18%;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.05),transparent);animation:barrido 4s linear infinite}
@keyframes barrido{from{top:-20%}to{top:100%}}
.visor .esq{position:absolute;width:28px;height:28px;border:2px solid var(--vc);opacity:.75}
.visor .esq.a{left:10px;top:calc(env(safe-area-inset-top) + 66px);border-right:0;border-bottom:0}
.visor .esq.b{right:10px;top:calc(env(safe-area-inset-top) + 66px);border-left:0;border-bottom:0}
.visor .esq.c{left:10px;bottom:calc(env(safe-area-inset-bottom) + 70px);border-right:0;border-top:0}
.visor .esq.d{right:10px;bottom:calc(env(safe-area-inset-bottom) + 70px);border-left:0;border-top:0}
#vCoord{position:absolute;left:16px;top:calc(env(safe-area-inset-top) + 100px);font:10px/1.35 "Special Elite",monospace;color:var(--vc);opacity:.8;margin:0}
.rec{position:absolute;left:16px;top:calc(env(safe-area-inset-top) + 76px);font:12px "Special Elite",monospace;color:#ff2e4d;letter-spacing:1px;animation:parpadeo 1.6s steps(2) infinite}
.rec span{color:#e9dfc8;margin-left:6px}
.bat{position:absolute;right:18px;top:calc(env(safe-area-inset-top) + 78px);width:30px;height:14px;border:1.5px solid var(--vc);border-radius:2px;--bat:80%}
.bat::after{content:"";position:absolute;right:-5px;top:3px;width:3px;height:5px;background:var(--vc)}
.bat b{position:absolute;left:2px;top:2px;bottom:2px;width:calc(var(--bat) - 4px);background:var(--vc)}
.bat.baja b{background:#ff2e4d;width:12%}
.emf{position:absolute;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.emf small{writing-mode:vertical-rl;transform:rotate(180deg);font:9px "Special Elite",monospace;color:var(--vc);letter-spacing:2px;opacity:.75}
#vEmf{display:flex;flex-direction:column-reverse;gap:4px}
#vEmf i{width:12px;height:12px;border-radius:2px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
#vEmf i.on:nth-child(1),#vEmf i.on:nth-child(2){background:#5dff8a;box-shadow:0 0 8px #5dff8a}
#vEmf i.on:nth-child(3){background:#ffe14a;box-shadow:0 0 8px #ffe14a}
#vEmf i.on:nth-child(4),#vEmf i.on:nth-child(5){background:#ff2e4d;box-shadow:0 0 10px #ff2e4d}
#vEmfNum{font:10px "Special Elite",monospace;color:var(--vc)}
body:has(#clue:not(.hidden)) .visor .esq.c,body:has(#clue:not(.hidden)) .visor .esq.d{display:none}

/* glitch de señal (Terror) */
body.glitch #hud{transform:translate(6px,-2px) skewX(-4deg);filter:drop-shadow(-4px 0 rgba(255,0,60,.8)) drop-shadow(4px 0 rgba(0,255,230,.7))}
body.glitch #cam,body.glitch #camFallback{transform:translateX(-8px);filter:contrast(1.6) hue-rotate(90deg)!important}
body.glitch .visor .scan{background:repeating-linear-gradient(to bottom,rgba(255,255,255,.18) 0 2px,transparent 2px 6px)}

/* ---------- v2: cabina de fotos ---------- */
.foto-btn{background:linear-gradient(180deg,#1f2a3a,#0a0f18);border-color:#6fb6ff;box-shadow:0 0 14px rgba(111,182,255,.3)}
#foto{position:fixed;inset:0;z-index:15;background:#000}
#fotoVid{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#fotoVivo,#fotoRes{position:absolute;inset:0}
#fotoCanvas{position:absolute;inset:0;width:100%;height:100%}
.foto-guia{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 118px);left:0;right:0;text-align:center;color:var(--hueso);font-size:14px;text-shadow:0 0 6px #000}
#fotoCuenta{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:"Creepster",fantasy;font-size:160px;color:var(--hueso);text-shadow:0 0 30px #e0142f;pointer-events:none}
.foto-ctrl{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 22px);display:flex;justify-content:space-around;align-items:center}
.redondo{width:54px;height:54px;border-radius:50%;font-size:22px;color:var(--hueso);background:rgba(0,0,0,.55);border:1px solid rgba(233,223,200,.4)}
.disparador{width:78px;height:78px;border-radius:50%;background:#e9dfc8;border:6px solid rgba(224,20,47,.85);box-shadow:0 0 20px rgba(224,20,47,.6)}
.disparador:active{transform:scale(.92)}.disparador:disabled{opacity:.4}
#fotoRes{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 12px);background:#050203}
#fotoRes.hidden,#fotoVivo.hidden{display:none}
#fotoImg{max-width:100%;max-height:62vh;border:1px solid rgba(233,223,200,.25);box-shadow:0 0 30px rgba(224,20,47,.35)}
.foto-acc{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;max-width:380px}
.foto-acc .btn{min-width:0;font-size:15px;padding:12px 8px}
.foto-acc #fotoCompartir{grid-column:1/3}

/* ---------- v3: capa de miedo (rostro, figura, manos en el vidrio) ---------- */
#miedoCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}