/* ==========================================================================
   caso.css — Expediente Nº 0 jugable
   ========================================================================== */

.caso-hero{padding:6.2rem 0 1.4rem}
.caso-hero-art{position:relative;overflow:hidden;padding-bottom:2.2rem}
.mesa-art{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 38%;opacity:.5;z-index:-1;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);
          mask-image:linear-gradient(#000 55%,transparent);
}
.caso-hero-art h1,.caso-hero-art .intro{text-shadow:0 2px 18px rgba(6,12,15,.85)}
.caso-hero h1{font-size:clamp(1.7rem,4vw,2.6rem);color:var(--moon);max-width:22ch}
.caso-hero .intro{
  font-family:var(--type);color:var(--mist);max-width:62ch;margin-top:1rem;
  font-size:clamp(.92rem,1.9vw,1.05rem);
}

.caso-doc{
  padding:clamp(1.2rem,3.5vw,2.2rem);--tilt:0deg;margin-top:1.6rem;
}
.caso-doc .doc-head{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);padding-bottom:.6rem;margin-bottom:1.3rem;
}
.caso-doc .doc-head h2{font-size:1.25rem}

/* ---- Pistas -------------------------------------------------------------- */
.pistas{list-style:none;display:grid;gap:.5rem;counter-reset:pista}
.pistas li{counter-increment:pista}
.pistas button{
  display:flex;gap:.7rem;align-items:baseline;width:100%;text-align:left;
  background:var(--card);border:1px solid var(--hair);border-radius:8px;
  padding:.62rem .8rem;font-size:.95rem;color:var(--ink);
  transition:background .2s,opacity .2s;
}
.pistas button::before{
  content:counter(pista);font-family:var(--type);font-size:.78rem;
  color:var(--stamp);border:1.5px solid var(--stamp);border-radius:50%;
  min-width:1.5rem;height:1.5rem;display:inline-flex;align-items:center;
  justify-content:center;flex:none;transform:translateY(.15rem);
}
.pistas button:hover{background:#faf5e8}
.pistas li.done button{opacity:.5}
.pistas li.done button span{text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--stamp)}
.pista-final{
  margin-top:.9rem;font-family:var(--type);font-size:.92rem;color:var(--ink);
  border-left:3px solid var(--stamp);padding:.35rem 0 .35rem .8rem;
}

/* ---- Rejilla jugable ----------------------------------------------------- */
.play-layout{display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,3vw,2.4rem);align-items:start}
@media (max-width:880px){.play-layout{grid-template-columns:1fr}}

table.lgrid.play td.cell{cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}
@media (max-width:430px){
  table.lgrid.play td.cell{width:36px;height:40px;font-size:1.05rem}
  table.lgrid th.rh{min-width:82px;font-size:.62rem;padding:.3rem .35rem}
  table.lgrid th.rot{min-width:33px;height:90px;padding:.4rem .1rem}
}
table.lgrid.play td.cell:hover{background:#fbf6e9}
table.lgrid.play td.cell:active{background:var(--paper-2)}
.grid-tools{display:flex;gap:.8rem;align-items:center;margin-top:.8rem;flex-wrap:wrap}
.grid-tools .mini{
  background:none;border:1px solid var(--muted-ink);border-radius:999px;
  color:var(--muted-ink);font-size:.78rem;padding:.3rem .85rem;
  transition:color .2s,border-color .2s;
}
.grid-tools .mini:hover{color:var(--stamp);border-color:var(--stamp)}
.grid-help{font-size:.8rem;color:var(--muted-ink);margin-top:.5rem;max-width:40ch}

/* ---- Acusación ----------------------------------------------------------- */
.acusar{margin-top:2rem;border-top:2px dashed var(--hair);padding-top:1.4rem}
.acusar h3{font-size:1.1rem;margin-bottom:.9rem}
.acusar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:720px){.acusar-grid{grid-template-columns:1fr}}
.acusar fieldset{border:0}
.acusar legend{
  font-family:var(--type);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted-ink);margin-bottom:.5rem;
}
.opt{
  display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
  background:var(--card);border:1.5px solid var(--hair);border-radius:8px;
  padding:.5rem .7rem;font-size:.92rem;color:var(--ink);margin-bottom:.5rem;
  min-height:44px;transition:border-color .2s,background .2s,box-shadow .2s;
}
.opt img{width:26px;height:26px;flex:none}
.opt .oimg-r{width:24px;height:34px}
.opt:hover{border-color:var(--ink-soft)}
.opt[aria-pressed="true"]{
  border-color:var(--stamp);background:#f8f0df;
  box-shadow:0 0 0 1.5px var(--stamp) inset;
}
.acusar-actions{display:flex;gap:1rem;align-items:center;margin-top:1rem;flex-wrap:wrap}
#acusar-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* réplica de la Reme al fallar */
.replica{
  font-family:var(--type);color:var(--stamp-deep);font-size:.95rem;
  margin-top:.9rem;min-height:1.6em;
}
.replica.shake{animation:shake .4s}
@keyframes shake{
  0%,100%{transform:none}
  25%{transform:translateX(-5px)}
  75%{transform:translateX(5px)}
}

/* ---- Resolución ---------------------------------------------------------- */
.cierre{position:relative;margin-top:2rem;display:none}
.cierre.show{display:block}
.cierre .paper{padding:clamp(1.4rem,3.5vw,2.2rem);--tilt:-.6deg;text-align:center}
.cierre .stamp{font-size:clamp(1.5rem,4vw,2.2rem);padding:.5rem 1.4rem;margin-bottom:1.1rem}
.cierre .desenlace{font-family:var(--type);color:var(--pencil);max-width:52ch;margin:0 auto 1.4rem}
.cierre .culpable{
  display:flex;gap:1rem;justify-content:center;align-items:center;
  margin-bottom:1.2rem;flex-wrap:wrap;
}
.cierre .culpable img{width:90px}
.cierre .culpable .datos{font-family:var(--type);font-size:.9rem;color:var(--ink);text-align:left}
.cierre .cta-libro{margin-top:.6rem}
.cierre .cta-libro p{color:var(--ink-soft);font-size:.95rem;margin-bottom:.9rem}

/* ---- ¿Atascado? (solución paso a paso) ----------------------------------- */
details.atasco{margin-top:1.6rem}
details.atasco summary{
  cursor:pointer;font-family:var(--type);font-size:.85rem;color:var(--muted-ink);
  list-style:none;display:inline-flex;gap:.5rem;align-items:center;
}
details.atasco summary::before{content:"▸";transition:transform .2s}
details.atasco[open] summary::before{transform:rotate(90deg)}
details.atasco ol{margin:.9rem 0 0 1.2rem;display:grid;gap:.45rem;font-size:.88rem;color:var(--ink-soft)}