/* ════════════════════════════════════════════════════════════════════════
   SOYDETECTIVE — Hoja de estilo (Noir años 40)
   ════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700;900&family=Oswald:wght@300;400;500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&family=Special+Elite&display=swap');

:root{
  --bg:#0c0a09; --bg2:#14110e; --panel:#1b1714; --panel2:#221d18;
  --ink:#ece3d2; --ink-dim:#a99e8a; --ink-faint:#6f665a;
  --amber:#e9b13e; --amber-soft:#f3cd7a; --amber-deep:#b8801f;
  --oxblood:#7a2228; --oxblood-bright:#b6353c; --teal:#214a47; --teal-bright:#3d8a82;
  --line:#352d24; --line-soft:#2a241d;
  --good:#5fae6b; --bad:#c8534b;
  --shadow:0 20px 60px rgba(0,0,0,.6);
  --r:14px;
  --display:'Cinzel',serif; --head:'Oswald',sans-serif; --body:'Spectral',serif; --type:'Special Elite',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--body); color:var(--ink); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden; line-height:1.5;
}
/* Atmósfera: viñeta + textura de grano + bruma */
body::before{ content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(233,177,62,.06), transparent 55%),
    radial-gradient(140% 120% at 50% 120%, rgba(33,74,71,.10), transparent 60%),
    linear-gradient(180deg,#0c0a09,#0a0807);
}
body::after{ content:''; position:fixed; inset:-50%; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 8s steps(6) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-2%)}60%{transform:translate(-2%,2%)}80%{transform:translate(2%,-3%)}100%{transform:translate(0,0)}}
#app{position:relative; z-index:2; min-height:100vh}
::selection{background:var(--amber);color:#1a1206}
::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

/* ───── Tipografía utilitaria */
h1,h2,h3{font-family:var(--head);font-weight:600;letter-spacing:.02em;line-height:1.05}
.display{font-family:var(--display);font-weight:900;letter-spacing:.04em}
.stamp{font-family:var(--type);color:var(--amber-soft);letter-spacing:.06em}
.muted{color:var(--ink-dim)} .faint{color:var(--ink-faint)}
.amber{color:var(--amber)}

/* ───── Botones */
.btn{font-family:var(--head);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:.86rem;color:#1a1206;background:linear-gradient(180deg,var(--amber-soft),var(--amber));
  border:1px solid var(--amber-deep);border-radius:10px;padding:.8em 1.4em;cursor:pointer;
  transition:transform .12s, box-shadow .2s, filter .2s; box-shadow:0 6px 18px rgba(233,177,62,.18);}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(233,177,62,.32);filter:brightness(1.05)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--amber);color:var(--amber-soft)}
.btn.danger{background:linear-gradient(180deg,var(--oxblood-bright),var(--oxblood));border-color:#5a1418;color:#fbe9e6}
.btn.sm{padding:.5em .9em;font-size:.74rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

/* ───── Inputs */
.field{display:block;margin:.9rem 0}
.field label{display:block;font-family:var(--head);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.4rem}
.field input{width:100%;background:#0f0c0a;border:1px solid var(--line);border-radius:9px;color:var(--ink);
  padding:.8em .9em;font-family:var(--body);font-size:1rem;transition:border .2s, box-shadow .2s}
.field input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(233,177,62,.15)}

/* ───── Cards / paneles */
.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);margin:1.2rem 0}

/* ───── Topbar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:1rem;
  padding:.7rem 1.2rem;background:rgba(12,10,9,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);font-weight:900;font-size:1.3rem;letter-spacing:.06em;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:.5rem}
.logo .dot{color:var(--amber)}
.logo svg{filter:drop-shadow(0 2px 6px rgba(233,177,62,.4))}
.nav{display:flex;gap:.3rem;margin-left:auto;align-items:center}
.nav a{font-family:var(--head);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim);
  padding:.5em .8em;border-radius:8px;cursor:pointer;transition:.2s}
.nav a:hover,.nav a.active{color:var(--amber-soft);background:rgba(233,177,62,.08)}
.coinpill{display:flex;align-items:center;gap:.4rem;font-family:var(--head);font-size:.85rem;color:var(--amber-soft);
  background:rgba(233,177,62,.08);border:1px solid var(--line);padding:.4em .8em;border-radius:20px}
.coin{width:16px;height:16px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f7d97a,#c8901f);box-shadow:inset 0 0 0 1.5px #8a6212}

/* ───── Layout helpers */
.wrap{max-width:1100px;margin:0 auto;padding:2rem 1.2rem 4rem}
.center{min-height:calc(100vh - 60px);display:grid;place-items:center;padding:2rem 1rem}
.grid{display:grid;gap:1.1rem}
.fade{animation:fade .5s both} @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.stagger>*{animation:fade .5s both}
.stagger>*:nth-child(1){animation-delay:.04s}.stagger>*:nth-child(2){animation-delay:.10s}
.stagger>*:nth-child(3){animation-delay:.16s}.stagger>*:nth-child(4){animation-delay:.22s}
.stagger>*:nth-child(5){animation-delay:.28s}.stagger>*:nth-child(6){animation-delay:.34s}
.stagger>*:nth-child(7){animation-delay:.40s}.stagger>*:nth-child(8){animation-delay:.46s}
.stagger>*:nth-child(9){animation-delay:.52s}.stagger>*:nth-child(10){animation-delay:.58s}

/* ───── Landing / hero */
.hero{position:relative;min-height:calc(100vh - 60px);display:grid;align-items:center;overflow:hidden}
.hero-inner{max-width:760px;margin:0 auto;padding:3rem 1.5rem;text-align:center;position:relative;z-index:3}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(2.6rem,8vw,5.4rem);letter-spacing:.05em;
  background:linear-gradient(180deg,#fff5e0,var(--amber) 60%,var(--amber-deep));-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(233,177,62,.12)}
.hero p.tag{font-family:var(--type);color:var(--amber-soft);letter-spacing:.18em;text-transform:uppercase;font-size:.8rem;margin:.4rem 0 1.3rem}
.hero p.lead{font-size:1.15rem;color:var(--ink-dim);max-width:540px;margin:0 auto 2rem}
.hero .cta{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.searchlight{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:conic-gradient(from 200deg at 50% -10%, transparent 0deg, rgba(233,177,62,.10) 18deg, transparent 36deg);
  animation:sweep 9s linear infinite;transform-origin:50% 0}
@keyframes sweep{to{transform:rotate(360deg)}}
.smoke{position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;z-index:0;animation:drift 18s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(40px,-30px) scale(1.2)}}

/* ───── Mapa de niveles */
.cases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}
.casecard{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);cursor:pointer;
  background:var(--panel);min-height:210px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .2s, box-shadow .25s, border-color .2s}
.casecard:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(0,0,0,.55);border-color:var(--amber-deep)}
.casecard .art{position:absolute;inset:0;z-index:0}
.casecard .scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,transparent 30%,rgba(8,6,5,.92))}
.casecard .meta{position:relative;z-index:2;padding:1rem}
.casecard .lvl{font-family:var(--type);font-size:.7rem;letter-spacing:.1em;color:var(--amber-soft)}
.casecard h3{font-size:1.25rem;margin:.15rem 0;color:#fff}
.casecard .sub{font-size:.82rem;color:var(--ink-dim)}
.casecard .stars{position:absolute;top:.7rem;right:.8rem;z-index:2;color:var(--amber);font-size:.95rem;letter-spacing:2px}
.casecard.locked{filter:grayscale(.7) brightness(.6);cursor:not-allowed}
.casecard .lock{position:absolute;top:.6rem;left:.7rem;z-index:2;font-size:1rem;opacity:.8}
.diffbadge{display:inline-block;font-family:var(--head);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.2em .6em;border-radius:6px;background:rgba(233,177,62,.14);color:var(--amber-soft);margin-top:.4rem}

/* ───── Escena de investigación */
.scene-stage{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#000}
.scene-stage svg{position:absolute;inset:0;width:100%;height:100%}
.clue-hot{position:absolute;transform:translate(-50%,-50%);cursor:crosshair;z-index:5}
.clue-hot .ring{width:26px;height:26px;border-radius:50%;border:2px solid rgba(233,177,62,.0);transition:.2s}
.clue-hot::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(233,177,62,.0);box-shadow:0 0 0 0 rgba(233,177,62,.0)}
.scene-stage.hintmode .clue-hot:not(.found)::after{background:rgba(233,177,62,.9);animation:pulse 1.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(233,177,62,.6)}70%{box-shadow:0 0 0 16px rgba(233,177,62,0)}100%{box-shadow:0 0 0 0 rgba(233,177,62,0)}}
.clue-hot.found .ring{border-color:var(--good);background:rgba(95,174,107,.12)}
.clue-hot.found::after{background:var(--good)}
.clue-hot:hover .ring{border-color:var(--amber)}
.scene-vig{position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 140px 40px rgba(0,0,0,.75)}
.scene-rain,.scene-fog{position:absolute;inset:0;z-index:3;pointer-events:none}
.scene-hud{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin:.9rem 0}
.cluecount{font-family:var(--head);letter-spacing:.06em}
.found-toast{position:fixed;left:50%;top:78px;transform:translateX(-50%) translateY(-20px);z-index:90;opacity:0;
  background:var(--panel2);border:1px solid var(--amber-deep);border-radius:12px;padding:.8rem 1.2rem;
  box-shadow:var(--shadow);transition:.35s;max-width:90vw}
.found-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.found-toast .t{font-family:var(--head);color:var(--amber-soft);letter-spacing:.06em}
.timerbox{font-family:var(--type);color:var(--amber-soft);font-size:1.05rem;border:1px solid var(--line);padding:.3em .7em;border-radius:8px}

/* ───── Evidencias */
.evlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.8rem}
.evcard{background:#0f0c0a;border:1px solid var(--line);border-radius:10px;padding:.8rem;position:relative}
.evcard.key{border-color:var(--amber-deep);box-shadow:0 0 0 1px rgba(233,177,62,.15) inset}
.evcard .kx{position:absolute;top:.4rem;right:.5rem;font-size:.6rem;color:var(--amber-soft);font-family:var(--type)}
.evcard h4{font-family:var(--head);font-size:.95rem;color:var(--ink)}
.evcard p{font-size:.82rem;color:var(--ink-dim);margin-top:.3rem}

/* ───── Sospechosos / interrogatorio */
.suspect-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.suspect{cursor:pointer;text-align:center;border:1px solid var(--line);border-radius:12px;padding:.8rem;background:var(--panel);transition:.2s;position:relative}
.suspect:hover{border-color:var(--amber);transform:translateY(-3px)}
.suspect.accused{border-color:var(--oxblood-bright);box-shadow:0 0 0 2px rgba(182,53,60,.3)}
.suspect .portrait{width:100%;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#0a0807;border:1px solid var(--line-soft)}
.suspect h4{font-family:var(--head);font-size:1rem;margin-top:.5rem}
.suspect .role{font-size:.74rem;color:var(--ink-dim)}
.interrogate{display:grid;grid-template-columns:240px 1fr;gap:1.4rem}
@media(max-width:680px){.interrogate{grid-template-columns:1fr}}
.bigportrait{aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0a0807;position:relative}
.bigportrait .nameplate{position:absolute;left:0;right:0;bottom:0;padding:.7rem;background:linear-gradient(180deg,transparent,rgba(8,6,5,.95))}
.bigportrait .nameplate h3{color:#fff;font-size:1.2rem}.bigportrait .nameplate .role{color:var(--amber-soft);font-size:.8rem;font-family:var(--type)}
.dialogue{min-height:90px;background:#0f0c0a;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:1rem 1.1rem;font-style:italic;color:var(--ink)}
.dialogue .who{font-style:normal;font-family:var(--type);color:var(--amber-soft);font-size:.72rem;display:block;margin-bottom:.4rem;letter-spacing:.08em}
.qopts{display:grid;gap:.6rem;margin-top:1rem}
.qopt{text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;cursor:pointer;
  font-family:var(--body);color:var(--ink);transition:.18s;display:flex;gap:.6rem;align-items:flex-start}
.qopt:hover{border-color:var(--amber);background:var(--panel2)}
.qopt .q{color:var(--amber-soft)} .qopt.asked{opacity:.55}
.qopt.asked .q::after{content:' ✓';color:var(--good)}

/* ───── Modal / overlay */
.overlay{position:fixed;inset:0;z-index:100;background:rgba(6,5,4,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;animation:fade .25s}
.modal{width:min(560px,94vw);max-height:90vh;overflow:auto;border-radius:18px;padding:1.6rem;background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--shadow)}
.modal h2{font-family:var(--display);font-size:1.6rem}

/* ───── Rankings */
.rank-table{width:100%;border-collapse:collapse}
.rank-table th{font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--ink-dim);text-align:left;padding:.7rem;border-bottom:1px solid var(--line)}
.rank-table td{padding:.75rem;border-bottom:1px solid var(--line-soft)}
.rank-table tr:hover td{background:rgba(233,177,62,.04)}
.rank-pos{font-family:var(--display);font-weight:700;width:46px}
.rank-pos.g{color:#f4d35e}.rank-pos.s{color:#cfd2d6}.rank-pos.b{color:#cd8a4a}

/* ───── Lobby multijugador */
.lobby-players{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.pcard{border:1px solid var(--line);border-radius:12px;padding:.9rem;background:var(--panel);text-align:center;position:relative}
.pcard.host{border-color:var(--amber-deep)} .pcard .crown{position:absolute;top:.4rem;right:.5rem}
.pcard.off{opacity:.4}
.pcard .ava{width:54px;height:54px;border-radius:50%;margin:0 auto .5rem;background:#0a0807;overflow:hidden;border:1px solid var(--line)}
.pcard .ready{font-size:.7rem;font-family:var(--head);letter-spacing:.08em;margin-top:.3rem}
.pcard .ready.on{color:var(--good)} .pcard .ready.no{color:var(--ink-faint)}
.roomcode{font-family:var(--type);font-size:2rem;letter-spacing:.4em;color:var(--amber);text-align:center;
  background:#0f0c0a;border:1px dashed var(--amber-deep);border-radius:12px;padding:.7rem;cursor:copy}

/* ───── Tutorial coachmarks */
.coach{background:#0f0c0a;border:1px solid var(--amber-deep);border-radius:12px;padding:1rem 1.1rem;margin:.8rem 0;display:flex;gap:.8rem}
.coach .n{flex:0 0 28px;height:28px;border-radius:50%;background:var(--amber);color:#1a1206;font-family:var(--head);font-weight:700;display:grid;place-items:center}

.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--amber);animation:spin .8s linear infinite;margin:2rem auto}
@keyframes spin{to{transform:rotate(360deg)}}
.toast-err{color:var(--bad);font-size:.85rem;min-height:1.2em;margin-top:.3rem}

@media(max-width:560px){.wrap{padding:1.2rem .8rem 3rem}.nav a{padding:.4em .5em;font-size:.72rem}}