/* ==========================================================================
   AUTOS DA NOITE — folha de estilo "RPG noir"
   Paleta: preto de tinta, papel amarelado, âmbar de lampião, sangue seco.
   ========================================================================== */

:root{
  --tinta:      #08090b;
  --nevoa:      #12141a;
  --nevoa-alta: #1c1f27;
  --papel:      #ded6c2;
  --osso:       #9d968a;
  --ambar:      #d7a54a;
  --ambar-fraco:#8a6a2c;
  --sangue:     #a8232a;
  --sangue-esc: #5e1418;
  --verde:      #6e8f74;
  --azul-frio:  #4a6a86;

  --serifa: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --maquina: "Courier New", Courier, monospace;
  --condensada: "Haettenschweiler", "Arial Narrow", "Oswald", Impact, sans-serif;
  /* letra da marca Sub Judice: serifa de alto contraste, tipo Didone */
  --marca: "Didot", "Bodoni 72", "Playfair Display", "Times New Roman", Georgia, serif;
  --marca-sub: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{
  margin:0; padding:0; height:100%;
  background:var(--tinta);
  color:var(--papel);
  font-family:var(--serifa);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- palco ---------- */
#jogo{ position:fixed; inset:0; overflow:hidden; }
#palco{ position:absolute; inset:0; }

/* grão de filme e vinheta: dão o "filme velho" */
#grao{
  position:absolute; inset:-50%;
  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='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.055; pointer-events:none; z-index:30;
  animation:tremeGrao .28s steps(3) infinite;
}
@keyframes tremeGrao{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}
#vinheta{
  position:absolute; inset:0; pointer-events:none; z-index:29;
  background:radial-gradient(ellipse at 50% 45%, transparent 42%, rgba(0,0,0,.42) 80%, rgba(0,0,0,.8) 100%);
}
body.sem-grao #grao{ display:none; }

/* ---------- cenário de fundo (SVG injetado) ---------- */
.cenario{
  position:absolute; inset:0; z-index:1;
  display:block; width:100%; height:100%;
}
.cenario svg{ width:100%; height:100%; display:block; }

/* ---------- camadas de clima ---------- */
.clima{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.clima.chuva{
  background-image:
    repeating-linear-gradient(102deg, rgba(190,205,225,.12) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(99deg, rgba(190,205,225,.07) 0 1px, transparent 1px 9px);
  animation:cai 0.45s linear infinite;
  opacity:.5;
}
@keyframes cai{ to{ background-position:0 260px, 0 400px; } }

.relampago{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  background:rgba(226,235,255,.9); opacity:0;
}
.relampago.dispara{ animation:raio 1.5s ease-out; }
@keyframes raio{
  0%,100%{opacity:0} 3%{opacity:.85} 6%{opacity:.05} 9%{opacity:.7} 13%{opacity:0}
  55%{opacity:0} 58%{opacity:.35} 62%{opacity:0}
}

/* ---------- personagem em cena ---------- */
.figura{
  position:absolute; bottom:20%; z-index:10;
  width:min(30vw, 300px);
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.75));
  animation:entraFigura .5s ease-out both;
  transition:opacity .35s, filter .35s;
}
.figura svg{ width:100%; height:auto; display:block; }
.figura.esq{ left:6%; }
.figura.dir{ right:6%; }
.figura.centro{ left:50%; transform:translateX(-50%); }
.figura.apagada{ opacity:.62; filter:drop-shadow(0 10px 16px rgba(0,0,0,.8)) brightness(.62) saturate(.55); }
@keyframes entraFigura{ from{ opacity:0; transform:translateY(14px) } }
.figura.centro{ animation:none; }

/* ---------- caixa de diálogo ---------- */
#caixa-fala{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:3.2vh; width:min(940px, 92vw); z-index:40;
  background:linear-gradient(180deg, rgba(10,11,14,.93), rgba(6,7,9,.97));
  border:1px solid rgba(215,165,74,.35);
  box-shadow:0 0 0 1px rgba(0,0,0,.9), 0 18px 50px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  padding:1.1rem 1.4rem 1.3rem;
  animation:sobe .3s ease-out both;
}
@keyframes sobe{ from{ opacity:0; transform:translate(-50%, 14px) } to{ opacity:1; transform:translate(-50%,0) } }

#caixa-fala .quem{
  font-family:var(--condensada); letter-spacing:.16em; text-transform:uppercase;
  font-size:.95rem; color:var(--ambar); margin-bottom:.45rem;
  display:flex; align-items:baseline; gap:.6rem;
}
#caixa-fala .quem .cargo{
  font-family:var(--serifa); font-style:italic; letter-spacing:0;
  text-transform:none; font-size:.8rem; color:var(--osso); opacity:.8;
}
#caixa-fala .texto{
  font-size:clamp(1rem, 1.35vw, 1.22rem); line-height:1.62; min-height:4.9em;
  color:var(--papel);
}
#caixa-fala .texto em{ color:var(--ambar); font-style:italic; }
#caixa-fala .texto strong{ color:#fff; }
#caixa-fala.narracao .texto{ font-style:italic; color:#c3bcac; text-align:center; }
#caixa-fala.narracao{ border-color:rgba(255,255,255,.12); }
#caixa-fala.terror .texto{ color:#e8d9d9; }
#caixa-fala.terror{ border-color:rgba(168,35,42,.5); box-shadow:0 0 0 1px #000, 0 0 60px rgba(168,35,42,.25), 0 18px 50px rgba(0,0,0,.85); }

.cursor{ display:inline-block; width:.55em; color:var(--ambar); animation:pisca .7s steps(1) infinite; }
@keyframes pisca{ 50%{ opacity:0 } }

.avancar{
  position:absolute; right:1.1rem; bottom:.5rem;
  font-family:var(--condensada); letter-spacing:.14em; font-size:.72rem;
  color:var(--ambar-fraco); text-transform:uppercase; animation:pulsa 1.6s ease-in-out infinite;
}
@keyframes pulsa{ 50%{ opacity:.35 } }

/* ---------- escolhas ---------- */
.escolhas{ margin-top:1rem; display:grid; gap:.5rem; }
.op{
  text-align:left; width:100%; cursor:pointer;
  background:rgba(255,255,255,.035); color:var(--papel);
  border:1px solid rgba(215,165,74,.25); border-left:3px solid var(--ambar-fraco);
  padding:.7rem .9rem; font-family:var(--serifa); font-size:1rem; line-height:1.45;
  transition:background .15s, border-color .15s, transform .1s;
}
.op:hover{ background:rgba(215,165,74,.12); border-left-color:var(--ambar); transform:translateX(3px); }
.op.certa{ border-left-color:var(--verde); background:rgba(110,143,116,.16); }
.op.errada{ border-left-color:var(--sangue); background:rgba(168,35,42,.14); opacity:.75; }
.op:disabled{ cursor:default; transform:none; }

.veredito{
  margin-top:.9rem; padding:.8rem 1rem; font-size:.98rem; line-height:1.55;
  border-left:3px solid var(--ambar); background:rgba(215,165,74,.08); color:#ded6c2;
}
.veredito.mau{ border-left-color:var(--sangue); background:rgba(168,35,42,.1); }

/* ---------- botões gerais ---------- */
button{ font-family:var(--condensada); letter-spacing:.1em; }
.btn{
  cursor:pointer; background:transparent; color:var(--ambar);
  border:1px solid var(--ambar-fraco); padding:.6rem 1.4rem;
  text-transform:uppercase; font-size:.85rem; letter-spacing:.18em;
  transition:background .15s, color .15s, box-shadow .15s;
}
.btn:hover{ background:var(--ambar); color:#0a0a0a; box-shadow:0 0 24px rgba(215,165,74,.35); }
.btn.forte{ border-color:var(--sangue); color:#e6a0a4; }
.btn.forte:hover{ background:var(--sangue); color:#fff; box-shadow:0 0 24px rgba(168,35,42,.45); }
.btn[disabled]{ opacity:.35; cursor:not-allowed; }
.btn[disabled]:hover{ background:transparent; color:var(--ambar); box-shadow:none; }

/* ---------- HUD ---------- */
#hud{
  position:fixed; top:0; left:0; right:0; z-index:55;
  display:flex; justify-content:space-between; align-items:center;
  padding:.55rem .9rem; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.7), transparent);
}
#hud > div{ display:flex; gap:.5rem; align-items:center; pointer-events:auto; }
#hud-fase{
  font-family:var(--condensada); letter-spacing:.22em; font-size:.72rem; color:var(--sangue);
  border:1px solid rgba(168,35,42,.5); padding:.2rem .5rem;
}
#hud-local{ font-family:var(--maquina); font-size:.72rem; color:var(--osso); letter-spacing:.05em; }
#hud button{
  cursor:pointer; background:rgba(8,9,11,.72); color:var(--osso);
  border:1px solid rgba(255,255,255,.14); padding:.32rem .7rem; font-size:.72rem; letter-spacing:.1em;
  transition:color .15s, border-color .15s;
}
#hud button:hover{ color:var(--ambar); border-color:var(--ambar-fraco); }
#hud button.mudo{ color:#5a564e; border-color:rgba(255,255,255,.08); }

/* ---------- modal (professor, dossiê, documentos) ---------- */
#modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.82); backdrop-filter:blur(2px); padding:4vh 3vw;
  animation:apareceModal .2s ease-out both;
}
@keyframes apareceModal{ from{opacity:0} }
#modal-caixa{
  position:relative; width:min(760px, 96vw); max-height:92vh; overflow:auto;
  background:linear-gradient(180deg,#15171d,#0c0d11);
  border:1px solid rgba(215,165,74,.35); padding:1.8rem 1.8rem 2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.9);
}
#modal-fechar{
  position:absolute; top:.5rem; right:.6rem; background:none; border:none;
  color:var(--osso); font-size:1.1rem; cursor:pointer;
}
#modal-fechar:hover{ color:var(--sangue); }
#modal h2{
  font-family:var(--condensada); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ambar); font-size:1.1rem; margin:0 0 1rem;
}
#modal p{ line-height:1.65; }

/* ---------- documento (regulamento, auto de infração) ---------- */
.documento{
  background:#cfc7b0; color:#20211f; font-family:var(--maquina);
  padding:2.2rem 2rem; line-height:1.75; font-size:.92rem;
  box-shadow:inset 0 0 60px rgba(120,100,60,.35), 0 20px 50px rgba(0,0,0,.8);
  border:1px solid #8d866f; position:relative;
  background-image:radial-gradient(ellipse at 20% 10%, rgba(150,120,60,.18), transparent 60%);
}
.documento h3{ text-align:center; font-size:1rem; letter-spacing:.1em; margin:0 0 1.4rem; }
.documento .selo{
  position:absolute; top:1rem; right:1.2rem; transform:rotate(-12deg);
  border:3px double var(--sangue-esc); color:var(--sangue-esc);
  font-family:var(--condensada); letter-spacing:.14em; font-size:.7rem;
  padding:.3rem .6rem; opacity:.8;
}
.documento .art{ margin:.85rem 0; }
.documento .art b{ letter-spacing:.02em; }
.documento .rubrica{ margin-top:1.6rem; text-align:right; font-style:italic; font-size:.82rem; }
.documento mark{ background:rgba(168,35,42,.28); color:#3a0d10; padding:0 .15em; }

/* ---------- tela de título / criação de personagem ---------- */
.tela-centro{
  position:absolute; inset:0; z-index:30; display:flex; flex-direction:column;
  align-items:center; justify-content:safe center; text-align:center; padding:6vh 6vw; gap:1.1rem;
  overflow:auto;
}
.tela-centro > *{ flex-shrink:0; }
/* a marca do Sub Judice, recortada do fundo preto por máscara de luminância */
.marca{
  width:min(300px, 56vw); margin:0 0 -.2rem; pointer-events:none;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.85));
}
.marca svg{ width:100%; height:auto; display:block; }
.marca.pequena{ width:min(150px, 34vw); margin-bottom:-.4rem; opacity:.75; }

.titulo-jogo{
  font-family:var(--marca); letter-spacing:.02em;
  font-size:clamp(2.2rem, 7vw, 4.4rem); line-height:.95; margin:0;
  color:var(--papel); text-shadow:0 0 40px rgba(0,0,0,.9), 0 4px 0 #000;
}
.titulo-jogo span{
  font-family:var(--marca-sub); font-weight:700; color:var(--sangue);
  display:block; font-size:.26em; letter-spacing:.3em; margin-top:.8rem; text-transform:uppercase;
}
.subtitulo{ font-style:italic; color:var(--osso); max-width:40ch; line-height:1.6; }
.botoeira{ display:flex; gap:.8rem; flex-wrap:wrap; justify-content:center; margin-top:.4rem; }
.creditos{
  position:absolute; bottom:1.1rem; left:1rem; right:1rem; text-align:center;
  font-size:.7rem; color:#5a564e; letter-spacing:.14em;
  font-family:var(--condensada); line-height:1.8;
}
.credito-musica{ font-family:var(--serifa); letter-spacing:.02em; font-size:.92em; color:#4d4a44; font-style:italic; }

.ficha{
  width:min(560px,94vw); text-align:left; display:grid; gap:1.1rem;
  background:rgba(8,9,11,.7); border:1px solid rgba(215,165,74,.3); padding:1.6rem;
}
.ficha label{ font-family:var(--condensada); letter-spacing:.18em; font-size:.75rem; color:var(--ambar); text-transform:uppercase; display:block; margin-bottom:.45rem; }
.ficha input[type=text]{
  width:100%; background:rgba(255,255,255,.05); border:none; border-bottom:1px solid var(--ambar-fraco);
  color:var(--papel); font-family:var(--serifa); font-size:1.15rem; padding:.5rem .2rem;
}
.ficha input[type=text]:focus{ outline:none; border-bottom-color:var(--ambar); background:rgba(215,165,74,.08); }
.ficha .opcional{ color:#6f6a60; letter-spacing:.06em; font-style:italic; text-transform:none; }
.nota-campo{
  margin:.55rem 0 0; font-size:.78rem; line-height:1.5; color:#7d776c; font-style:italic;
}
.opcoes{ display:flex; gap:.45rem; flex-wrap:wrap; }
.opcoes button{
  flex:1 1 auto; cursor:pointer; background:rgba(255,255,255,.04); color:var(--osso);
  border:1px solid rgba(255,255,255,.14); padding:.55rem .7rem;
  font-size:.78rem; letter-spacing:.08em; transition:background .15s, color .15s, border-color .15s;
}
.opcoes button small{ font-family:var(--serifa); letter-spacing:0; opacity:.7; font-size:.9em; }
.opcoes button:hover{ border-color:var(--ambar-fraco); color:var(--papel); }
.opcoes button[aria-pressed=true]{ border-color:var(--ambar); color:#0a0a0a; background:var(--ambar); }
.opcoes button[aria-pressed=true] small{ opacity:.85; }

/* ---------- QUEBRA-CABEÇA ---------- */
.puzzle{
  position:absolute; inset:0; z-index:45; overflow:auto;
  background:radial-gradient(ellipse at 50% 0%, rgba(215,165,74,.09), transparent 55%), rgba(4,5,7,.9);
  padding:4.2rem 1.2rem 2rem;
}
.puzzle-topo{ text-align:center; margin-bottom:1.2rem; }
.puzzle-topo h2{
  font-family:var(--condensada); text-transform:uppercase; letter-spacing:.2em;
  color:var(--ambar); font-size:1.15rem; margin:0 0 .4rem;
}
.puzzle-topo p{ margin:0 auto; max-width:70ch; color:var(--osso); font-size:.92rem; line-height:1.55; font-style:italic; }

.tabuleiro{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr));
  gap:.7rem; max-width:1180px; margin:0 auto 1.4rem;
}
.encaixe{
  min-height:132px; border:1px dashed rgba(215,165,74,.4); background:rgba(255,255,255,.03);
  padding:.6rem; display:flex; flex-direction:column; gap:.5rem; transition:background .15s, border-color .15s;
}
.encaixe.alvo{ border-color:var(--ambar); background:rgba(215,165,74,.12); }
.encaixe .cat{
  font-family:var(--condensada); letter-spacing:.18em; font-size:.66rem; color:var(--ambar);
  text-transform:uppercase; border-bottom:1px solid rgba(215,165,74,.25); padding-bottom:.35rem;
}
.encaixe .cat small{ display:block; letter-spacing:0; font-family:var(--serifa); font-style:italic;
  text-transform:none; color:var(--osso); font-size:.72rem; margin-top:.25rem; }
.encaixe.ok{ border-style:solid; border-color:var(--verde); background:rgba(110,143,116,.12); }
.encaixe.nao{ border-style:solid; border-color:var(--sangue); background:rgba(168,35,42,.1); animation:treme .4s; }
@keyframes treme{ 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.bandeja{
  max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  border-top:1px solid rgba(255,255,255,.1); padding-top:1.1rem;
}
.peca{
  cursor:grab; background:linear-gradient(180deg,#1d2028,#14161c); color:var(--papel);
  border:1px solid rgba(255,255,255,.16); border-radius:2px;
  padding:.55rem .8rem; font-family:var(--serifa); font-size:.86rem; line-height:1.4;
  max-width:250px; text-align:left; box-shadow:0 6px 14px rgba(0,0,0,.6);
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.peca:hover{ transform:translateY(-2px); border-color:var(--ambar); }
.peca[aria-pressed=true]{ border-color:var(--ambar); box-shadow:0 0 22px rgba(215,165,74,.4); transform:translateY(-3px); }
.peca.no-encaixe{ max-width:none; width:100%; box-shadow:none; }
.peca.travada{ cursor:default; opacity:.95; }
.peca.travada:hover{ transform:none; border-color:rgba(255,255,255,.16); }

/* ficha sendo arrastada: a original desbota, a cópia segue o cursor */
.peca.na-mao{ opacity:.28; cursor:grabbing; }
.peca.fantasma{
  position:fixed; z-index:200; pointer-events:none; margin:0;
  max-width:min(300px, 76vw);          /* a cópia não herda a largura da lista */
  cursor:grabbing; transform:rotate(-2deg) scale(1.04);
  border-color:var(--ambar); box-shadow:0 18px 40px rgba(0,0,0,.75), 0 0 26px rgba(215,165,74,.35);
}

.puzzle-rodape{ text-align:center; margin-top:1.5rem; display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.placar{ text-align:center; font-family:var(--maquina); font-size:.78rem; color:var(--osso); margin-top:.8rem; }

/* ---------- lista de conferência (revelação) ---------- */
.checklist{ display:grid; gap:.6rem; margin:1.2rem 0; }
.check{
  display:flex; gap:.8rem; align-items:flex-start; cursor:pointer; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
  padding:.75rem .9rem; color:var(--papel); font-family:var(--serifa); font-size:.95rem; line-height:1.5;
}
.check .marca{
  flex:0 0 auto; width:1.25em; height:1.25em; border:1px solid var(--ambar-fraco);
  display:inline-flex; align-items:center; justify-content:center; color:var(--ambar); font-size:.9em;
}
.check[aria-pressed=true]{ border-color:var(--ambar); background:rgba(215,165,74,.1); }
.check.certa{ border-color:var(--verde); background:rgba(110,143,116,.14); }
.check.errada{ border-color:var(--sangue); background:rgba(168,35,42,.12); }

/* ---------- fim de fase ---------- */
.dossie h3{ font-family:var(--condensada); letter-spacing:.16em; color:var(--ambar); font-size:.9rem; margin:1.4rem 0 .5rem; text-transform:uppercase; }
.dossie ul{ padding-left:1.1rem; line-height:1.7; }
.dossie li{ margin-bottom:.4rem; }
.lei{ font-family:var(--maquina); font-size:.85rem; color:#b9b1a0; background:rgba(255,255,255,.04);
  border-left:3px solid var(--ambar-fraco); padding:.7rem .9rem; margin:.7rem 0; line-height:1.6; }
.selo-nota{
  font-family:var(--condensada); letter-spacing:.2em; text-transform:uppercase; text-align:center;
  border:2px double var(--ambar); color:var(--ambar); padding:.8rem; margin:1.2rem auto; max-width:420px;
}

/* ---------- telefone do professor ---------- */
.chamada{ display:flex; gap:1.2rem; align-items:flex-start; }
.chamada .retrato{ flex:0 0 120px; }
.chamada .retrato svg{ width:100%; height:auto; filter:drop-shadow(0 8px 16px rgba(0,0,0,.7)); }
.chamada .fala{ flex:1; }
.chamada .fala p{ margin:0 0 .8rem; }
.chamada .fala p:last-child{ margin-bottom:0; }

/* ---------- responsivo ---------- */
@media (max-width:760px){
  #hud-local{ display:none; }
  #hud{ padding:.4rem .5rem; }
  #hud button{ padding:.3rem .5rem; font-size:.66rem; }
  .tabuleiro{ grid-template-columns:1fr; gap:.5rem; }
  .encaixe{ min-height:auto; }
  .puzzle{ padding:3.4rem .7rem 2rem; }
  .peca{ max-width:none; width:100%; font-size:.84rem; }
  .puzzle-topo p{ font-size:.84rem; }
  .figura{ width:min(42vw, 210px); bottom:26%; }
  .figura.esq{ left:1%; } .figura.dir{ right:1%; }
  #caixa-fala{ bottom:1.5vh; padding:.9rem 1rem 1.1rem; }
  #caixa-fala .texto{ min-height:5.6em; font-size:1rem; }
  .documento{ padding:1.4rem 1.1rem; font-size:.82rem; }
  #modal-caixa{ padding:1.3rem 1.1rem 1.6rem; }
  .chamada{ flex-direction:column; align-items:center; text-align:center; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}