:root { --papel:#d9cfb4; --tinta:#1b1712; --sello:#9b1c1c; --mono:'Courier New',Courier,monospace; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:#000; overflow:hidden; color:#d8d2c4; font-family:Georgia,'Times New Roman',serif; user-select:none; }
canvas#view { position:fixed; inset:0; width:100%; height:100%; display:block; cursor:none; }
body.ui canvas#view { cursor:default; }
button { font-family:inherit; }
/* Título y pausa */
#intro { position:fixed; inset:0; background:#000; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; transition:opacity 1.6s ease; }
#intro.out { opacity:0; pointer-events:none; }
#intro.pausa { background:rgba(0,0,0,.86); transition:opacity .4s; }
#intro h1 { font-weight:400; font-size:clamp(44px,8.4vw,128px); letter-spacing:.18em; margin:0 0 .25em .18em; color:#cfc6b0; text-shadow:0 0 40px rgba(120,150,200,.25); animation:flick 7s infinite; }
#intro h2 { font-weight:400; font-style:italic; font-size:clamp(14px,1.7vw,24px); color:#8a8576; margin:0 0 3em; letter-spacing:.08em; }
#intro .botones { display:flex; flex-direction:column; gap:14px; opacity:0; transition:opacity 1s; }
#intro.ready .botones { opacity:1; }
.mbtn { background:none; border:1px solid #4b473d; color:#b9b19c; font-size:clamp(14px,1.4vw,19px); letter-spacing:.3em; text-transform:uppercase; padding:.6em 2.2em; cursor:pointer; transition:all .25s; }
.mbtn:hover { color:#fff; border-color:#a89f80; background:rgba(255,255,255,.04); }
.solo-pausa { display:none; } #intro.pausa .solo-pausa { display:block; }
#opciones-panel { display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:#0b0b0b; border:1px solid #3a382f; padding:28px 36px; min-width:min(420px,90vw); text-align:left; }
#opciones-panel.on { display:block; }
#opciones-panel h3 { margin:0 0 18px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; font-size:15px; color:#cfc6b0; }
#opciones-panel label { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:10px 0; font-size:15px; color:#b5ad98; }
#opciones-panel label.chk { justify-content:flex-start; }
#opciones-panel input[type=range] { width:180px; accent-color:#a08f4a; }
#opciones-panel select { background:#111; color:#ddd; border:1px solid #444; padding:4px 8px; }
#opciones-panel .mbtn { margin-top:16px; width:100%; }
#loader { width:min(320px,60vw); height:2px; background:#1b1b1b; margin-top:2.2em; overflow:hidden; transition:opacity .8s; }
#loader i { display:block; height:100%; width:0; background:#8f8a7a; transition:width .25s; }
#loadtxt { font-size:12px; color:#555; letter-spacing:.2em; margin-top:.8em; text-transform:uppercase; height:1em; }
#intro.ready #loader, #intro.ready #loadtxt { opacity:0; }
#intro .hint { position:absolute; bottom:3vh; font-size:12px; color:#555; letter-spacing:.12em; }
@keyframes pulse { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes flick { 0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.55} 94%{opacity:1} 96%{opacity:.7} 97%{opacity:1} }
/* HUD */
#ret { position:fixed; left:50%; top:50%; width:4px; height:4px; margin:-2px 0 0 -2px; border-radius:50%; background:rgba(230,225,210,.75); z-index:10; pointer-events:none; transition:all .15s; box-shadow:0 0 4px #000; }
#ret.on { width:22px; height:22px; margin:-11px 0 0 -11px; background:transparent; border:2px solid rgba(240,225,180,.9); }
body.ui #ret, body.hud-off #ret, body.hud-off #hint, body.hud-off #count, body.hud-off #objetivo, body.hud-off #topbar, body.hud-off #ctrl { opacity:0 !important; }
#hint { position:fixed; left:50%; top:calc(50% + 26px); transform:translateX(-50%); font-size:13px; letter-spacing:.14em; color:#e5dcc2; text-shadow:0 1px 3px #000; opacity:0; transition:opacity .2s; z-index:10; pointer-events:none; text-transform:uppercase; }
#hint.on { opacity:.85; }
#sub { position:fixed; left:50%; bottom:7vh; transform:translateX(-50%); max-width:min(900px,86vw); text-align:center; font-size:clamp(17px,1.9vw,26px); line-height:1.4; padding:.45em 1em; background:rgba(0,0,0,.55); color:#e9e3d2; border-radius:3px; opacity:0; transition:opacity .35s; z-index:10; pointer-events:none; text-shadow:0 1px 2px #000; }
#sub.on { opacity:1; } #sub b { font-weight:normal; color:#cdb87a; letter-spacing:.1em; font-size:.8em; margin-right:.4em; }
#count { position:fixed; right:22px; top:18px; z-index:10; font-family:var(--mono); letter-spacing:.2em; font-size:14px; color:#cfc6a8; text-shadow:0 1px 3px #000; opacity:.85; }
#objetivo { position:fixed; right:22px; top:42px; z-index:10; font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:#a9a28f; text-shadow:0 1px 3px #000; max-width:38vw; text-align:right; opacity:0; transition:opacity .5s; }
#objetivo.on { opacity:.9; } #objetivo.flash { animation:objflash 2.4s; }
@keyframes objflash { 0%{color:#f1e4b0} 100%{color:#a9a28f} }
#topbar { position:fixed; left:18px; top:14px; z-index:60; display:none; gap:8px; }
body.jugando #topbar { display:flex; }
body.dossier-open #topbar, body.en-pausa #topbar { opacity:0; pointer-events:none; }   /* no tapan las pestañas del expediente ni el menú de pausa */
.chipbtn { font:12px var(--mono); letter-spacing:.08em; color:#a9a28f; background:rgba(0,0,0,.45); border:1px solid #4b473d; padding:6px 10px; cursor:pointer; border-radius:2px; }
.chipbtn:hover { color:#fff; border-color:#8a8472; }
.chipbtn[aria-pressed=true] { color:#e8d9a0; border-color:#a08f4a; }
#ctrl { position:fixed; left:18px; bottom:14px; z-index:10; font:11px var(--mono); color:#6f6b5f; letter-spacing:.06em; pointer-events:none; line-height:1.5; }
#toast { position:fixed; left:50%; top:16vh; transform:translateX(-50%); font-size:clamp(16px,1.8vw,24px); letter-spacing:.12em; color:#eadfbd; background:rgba(0,0,0,.6); padding:.6em 1.4em; border:1px solid rgba(200,180,120,.4); opacity:0; transition:opacity .5s; z-index:12; pointer-events:none; text-align:center; }
#toast.on { opacity:1; }
#resume { position:fixed; left:50%; top:46%; transform:translate(-50%,0); z-index:11; font-size:15px; letter-spacing:.2em; color:#bdb59f; background:rgba(0,0,0,.5); padding:.6em 1.2em; display:none; pointer-events:none; text-transform:uppercase; }
#fade { position:fixed; inset:0; background:#000; opacity:0; pointer-events:none; z-index:40; transition:opacity 1.2s; }
#fade.on { opacity:1; pointer-events:auto; }
#pantalla { position:fixed; inset:0; z-index:41; display:none; align-items:center; justify-content:center; text-align:center; padding:6vw; font-size:clamp(18px,2.2vw,30px); line-height:1.6; color:#cfc6b0; font-style:italic; }
#pantalla.on { display:flex; }
/* Opciones de diálogo */
#opciones { position:fixed; left:50%; bottom:14vh; transform:translateX(-50%); z-index:15; display:none; flex-direction:column; gap:8px; min-width:min(640px,80vw); }
#opciones.on { display:flex; }
#opciones .op { text-align:left; background:rgba(0,0,0,.72); border:1px solid #4b473d; color:#e3dcc8; font-size:clamp(15px,1.5vw,20px); padding:.55em 1em; cursor:pointer; transition:all .15s; }
#opciones .op:hover { border-color:#c9b77a; color:#fff; background:rgba(20,16,8,.85); }
#opciones .op i { font-style:normal; color:#a08f4a; font-family:var(--mono); margin-right:.6em; }
/* Tarjeta */
#card { position:fixed; right:3.2vw; top:50%; width:min(360px,80vw); transform:translate(30px,-50%) rotate(1.6deg); opacity:0; pointer-events:none; z-index:20; transition:all .6s cubic-bezier(.2,.8,.2,1);
  background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 60%), repeating-linear-gradient(0deg, rgba(120,95,50,.05) 0 2px, transparent 2px 5px), linear-gradient(135deg,#e2d8bb,#cbbf9c);
  color:var(--tinta); padding:26px 26px 22px; box-shadow:0 18px 50px rgba(0,0,0,.8), 0 0 0 1px rgba(80,60,30,.5); font-family:var(--mono); }
#card.on { opacity:1; transform:translate(0,-50%) rotate(1.6deg); }
#card:before { content:''; position:absolute; left:50%; top:-12px; width:70px; height:22px; margin-left:-35px; background:rgba(170,150,100,.55); transform:rotate(-3deg); }
#card .tag { font-size:11px; letter-spacing:.25em; color:#5b5030; border-bottom:1px solid #8b7b50; padding-bottom:6px; margin-bottom:14px; }
#card h3 { margin:0 0 12px; font-size:19px; text-transform:uppercase; letter-spacing:.06em; line-height:1.25; }
#card p { margin:0 0 20px; font-size:16px; line-height:1.5; }
#card .foot { font-size:10.5px; letter-spacing:.14em; color:#6b5f3e; }
#card .stamp { position:absolute; right:16px; bottom:34px; border:3px solid var(--sello); color:var(--sello); font-weight:bold; letter-spacing:.15em; font-size:17px; padding:3px 10px; transform:rotate(-14deg); opacity:.78; mix-blend-mode:multiply; border-radius:4px; }
#card .no { position:absolute; right:14px; top:12px; font-size:11px; color:#7a6d48; }
/* Expediente */
#dossier { position:fixed; inset:0; z-index:30; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }
#dossier.on { display:flex; }
#dossier .carpeta { width:min(860px,94vw); height:min(640px,90vh); background:linear-gradient(135deg,#e2d8bb,#cbbf9c); color:var(--tinta); font-family:var(--mono); box-shadow:0 30px 80px rgba(0,0,0,.9); display:flex; flex-direction:column; transform:rotate(-.4deg); }
#dossier .tabs { display:flex; border-bottom:2px solid #8b7b50; }
#dossier .tabs button { background:none; border:0; border-right:1px solid #b5a77c; padding:14px 20px; font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:#6b5f3e; cursor:pointer; }
#dossier .tabs button.on { background:rgba(255,255,255,.25); color:var(--tinta); }
#dossier .tabs .x { margin-left:auto; border:0; font-size:16px; }
#dossier .hoja { display:none; padding:22px 28px; overflow:auto; flex:1; font-size:15px; line-height:1.5; }
#dossier .hoja.on { display:block; }
#dossier h3 { margin:0 0 10px; font-size:18px; letter-spacing:.08em; text-transform:uppercase; }
#dossier h4 { margin:18px 0 6px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:#5b5030; border-bottom:1px solid #8b7b50; }
#dossier .dim { color:#8a7d58; font-style:italic; }
#dossier .obj { font-size:17px; }
#dossier .pista { padding:10px 0; border-bottom:1px dashed #b5a77c; display:grid; gap:3px; }
#dossier .pista em { font-size:11px; color:#7a6d48; }
#dossier .grid { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0; }
#dossier .chip { background:rgba(255,255,255,.3); border:1px solid #8b7b50; padding:6px 10px; font-family:var(--mono); font-size:13px; cursor:pointer; }
#dossier .chip.sel { background:#2a2419; color:#eadfbd; }
#dossier .unir, #dossier .acusa { display:block; margin:8px 0; background:#2a2419; color:#eadfbd; border:0; padding:10px 18px; font-family:var(--mono); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
#dossier .unir:disabled { opacity:.35; cursor:default; }
#dossier .acusa { width:100%; text-align:left; }
#dossier .acusa:hover { background:var(--sello); }
#err { position:fixed; left:10px; bottom:10px; color:#c66; font:12px monospace; z-index:99; max-width:80vw; white-space:pre-wrap; }
/* Cómo se investiga (ayuda) */
#ayuda { position:fixed; inset:0; z-index:52; display:none; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(8,8,10,.9), #000 85%); opacity:0; transition:opacity .35s; }
#ayuda.on { display:flex; opacity:1; }
#ayuda .ay-hoja { position:relative; width:min(640px,90vw); min-height:min(430px,70vh); padding:34px 40px 26px; color:var(--tinta); font-family:var(--mono); transform:rotate(-.8deg);
  background: radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 60%), repeating-linear-gradient(0deg, rgba(120,95,50,.06) 0 2px, transparent 2px 5px), linear-gradient(135deg,#e2d8bb,#cbbf9c);
  box-shadow:0 24px 70px rgba(0,0,0,.9), 0 0 0 1px rgba(80,60,30,.5); display:flex; flex-direction:column; }
#ayuda .ay-hoja:before { content:''; position:absolute; left:50%; top:-12px; width:90px; height:24px; margin-left:-45px; background:rgba(170,150,100,.55); transform:rotate(-2deg); }
#ayuda .ay-hoja.entra { animation:ayEntra .5s cubic-bezier(.2,.8,.2,1); }
@keyframes ayEntra { from { opacity:0; transform:translate(40px,10px) rotate(2.4deg); } to { opacity:1; transform:rotate(-.8deg); } }
#ayuda .ay-cab { display:flex; justify-content:space-between; font-size:11px; letter-spacing:.22em; color:#5b5030; border-bottom:1px solid #8b7b50; padding-bottom:8px; }
#ayuda .ay-sub { margin:18px 0 6px; font-size:12px; letter-spacing:.35em; color:#7a6d48; }
#ayuda .ay-titulo { margin:0 0 18px; font-size:clamp(24px,3.4vw,36px); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
#ayuda .ay-texto { margin:0; font-size:clamp(16px,1.7vw,20px); line-height:1.65; max-width:30em; flex:1; }
#ayuda .ay-sello { position:absolute; right:34px; top:92px; border:4px solid var(--sello); color:var(--sello); font-weight:bold; letter-spacing:.2em; font-size:clamp(18px,2.2vw,26px); padding:4px 14px; border-radius:5px; opacity:0; mix-blend-mode:multiply; --rot:-12deg; transform:rotate(var(--rot)) scale(3); pointer-events:none; }
#ayuda .ay-sello.estampa { animation:ayEstampa .38s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes ayEstampa { 0% { opacity:0; transform:rotate(calc(var(--rot) + 8deg)) scale(3.2); } 55% { opacity:.95; transform:rotate(var(--rot)) scale(.92); } 75% { transform:rotate(var(--rot)) scale(1.04); } 100% { opacity:.82; transform:rotate(var(--rot)) scale(1); } }
#ayuda .ay-pie { display:flex; justify-content:space-between; align-items:center; margin-top:26px; }
#ayuda .ay-puntos { display:flex; gap:8px; } #ayuda .ay-puntos i { width:9px; height:9px; border:1px solid #6b5f3e; border-radius:50%; } #ayuda .ay-puntos i.on { background:#2a2419; }
#ayuda .ay-sig { background:#2a2419; color:#eadfbd; border:0; padding:11px 26px; font-family:var(--mono); letter-spacing:.25em; text-transform:uppercase; cursor:pointer; font-size:14px; transition:background .2s; }
#ayuda .ay-sig:hover { background:var(--sello); }
#ayuda .ay-saltar { position:fixed; right:22px; top:18px; background:none; border:1px solid #4b473d; color:#8f8975; font:12px var(--mono); letter-spacing:.14em; padding:7px 12px; cursor:pointer; }
#ayuda .ay-saltar:hover { color:#fff; border-color:#a89f80; }
body.ayuda-on canvas#view { cursor:default; }
body.hud-off #resume { display:none !important; }

#pantalla .final { max-width:900px; }
#pantalla .final h2 { font-weight:400; font-style:normal; letter-spacing:.3em; text-transform:uppercase; font-size:clamp(16px,1.6vw,22px); color:#8a8576; margin:0 0 1.2em; }
#pantalla .final p { margin:0 0 1.6em; }
#pantalla .final small { font-style:normal; letter-spacing:.5em; color:#5a564c; font-size:14px; }