/* Los 4 J's — hoja de estilo unica */

:root{
  --verde:#25d366;          /* whatsapp */
  --burbuja-mia:#005c4b;
  --burbuja-otro:#202c33;
  --chat-fondo:#0b141a;
  --papel:#efe6d8;
  --tinta:#16110c;
  --acento:#d8a13a;
  --serrucho:#1f9e5a;
  --espana:#d84545;
  --manolito:#3d8fd6;
  --jesulin:#e0a020;
  --otro:#8a8a8a;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  background:#000;
  color:#fff;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
}

#app{position:fixed;inset:0}

.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* ---------- botones ---------- */
.btn{
  display:block;width:100%;max-width:340px;margin:0 auto 12px;
  padding:14px 20px;border:1px solid #ffffff26;border-radius:10px;
  background:#ffffff0d;color:#fff;font-size:1rem;font-family:inherit;
  cursor:pointer;transition:.15s;
}
.btn:hover{background:#ffffff1c;border-color:#ffffff4d;transform:translateY(-1px)}
.btn.primary{background:var(--verde);border-color:var(--verde);color:#04231a;font-weight:600}
.btn.primary:hover{background:#2ee670}
.btn.ghost{background:none;border-color:#ffffff1a;color:#ffffff73;font-size:.9rem}

/* ---------- menu ---------- */
#menu{
  background:
    radial-gradient(120% 90% at 50% 0%,#123 0%,#000 70%),
    #000;
  display:none;place-items:center;
}
#menu.active{display:grid}
.menu-inner{text-align:center;padding:24px;width:100%}
.logo{
  font-size:clamp(2.6rem,11vw,4.6rem);font-weight:800;letter-spacing:.06em;
  line-height:1;margin-bottom:10px;
}
.logo span{color:var(--verde)}
.tagline{color:#ffffff80;margin-bottom:38px;font-size:.98rem;font-style:italic}
.version{margin-top:26px;color:#ffffff40;font-size:.8rem;letter-spacing:.05em}

/* ---------- paneles ---------- */
.panel{
  position:absolute;inset:0;overflow-y:auto;padding:28px 20px 40px;
  background:#0d0d10;
}
.panel h2{font-size:1.6rem;margin-bottom:6px}
.panel .sub{color:#ffffff66;font-size:.9rem;margin-bottom:22px;max-width:560px}
.panel .btn{margin-top:20px}

.chapter-list{display:grid;gap:10px;max-width:620px;margin-bottom:10px}
.cap{
  display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid #ffffff1a;border-radius:10px;background:#ffffff08;
  cursor:pointer;transition:.15s;
}
.cap:hover:not(.bloqueado){border-color:var(--verde);background:#ffffff12}
.cap.bloqueado{opacity:.35;cursor:not-allowed}
.cap .anio{font-size:1.5rem;font-weight:700;color:var(--verde);min-width:74px}
.cap .tit{font-weight:600}
.cap .desc{font-size:.82rem;color:#ffffff59;margin-top:2px}
.cap .msgs{margin-left:auto;font-size:.75rem;color:#ffffff40;text-align:right;white-space:nowrap}

.role-grid{display:flex;flex-wrap:wrap;gap:8px;max-width:720px}
.rol{
  display:flex;align-items:center;gap:7px;padding:7px 13px;border-radius:20px;
  background:#ffffff0f;font-size:.87rem;border:1px solid transparent;
}
.rol .punto{width:9px;height:9px;border-radius:50%;background:currentColor;flex:none}
.rol.locked{opacity:.28;filter:grayscale(1)}
.rol.sincita{opacity:.5;border-style:dashed;border-color:#ffffff26}
.rol:hover{background:#ffffff1f}
.seccion{
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#ffffff59;margin:26px 0 12px;font-weight:600;
}
.seccion:first-of-type{margin-top:0}
.rol.locked .txt{letter-spacing:.14em}
.rol .cita{display:none}
.rol-detalle{
  margin-top:18px;padding:16px;border-left:3px solid var(--acento);
  background:#ffffff08;border-radius:0 8px 8px 0;font-size:.9rem;line-height:1.6;
  min-height:60px;
}
.rol-detalle .fecha{color:var(--acento);font-size:.78rem;letter-spacing:.06em}

/* ---------- juego: fondo y sprites ---------- */
#juego{background:#000}
.fondo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity .5s, filter .5s;
}
.escenario{position:absolute;inset:0;pointer-events:none}

.sprite{
  --esc:1;
  position:absolute;bottom:0;height:82%;width:auto;aspect-ratio:2/3;
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  transition:transform .3s, filter .3s, opacity .3s;
  transform:translateX(-50%) scale(var(--esc));
  transform-origin:bottom center;
}
/* hueco cuando ese sprite todavia no existe: tarjeta negra que dice lo que falta */
.sprite .ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;padding:18px;text-align:center;
  background:#07080bec;border:2px dashed;border-radius:10px;
}
.ph-falta{
  font-size:.62rem;letter-spacing:.22em;color:#ffffff4d;
}
.ph-quien{font-size:1.15rem;font-weight:800;letter-spacing:.05em;line-height:1.1}
.ph-mood{
  font-size:.9rem;font-weight:700;color:#fff;padding:3px 12px;border-radius:20px;
  background:#ffffff14;
}
.ph-desc{font-size:.82rem;line-height:1.45;color:#ffffff8c;max-width:22ch}
.ph-ruta{
  font-family:ui-monospace,Consolas,monospace;font-size:.6rem;color:#ffffff40;
  margin-top:8px;word-break:break-all;max-width:24ch;
}
.sprite.atenuado{filter:brightness(.45) saturate(.6)}
.sprite.oculto{opacity:0;transform:translateX(-50%) scale(var(--esc)) translateY(20px)}

/* ---------- juego: chat ---------- */
.chat-view{
  position:absolute;inset:0;display:none;flex-direction:column;
  background:var(--chat-fondo);
}
.chat-view.on{display:flex}
.chat-header{
  display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:#202c33;border-bottom:1px solid #ffffff0f;flex:none;
}
.chat-header .back{font-size:1.6rem;color:#ffffff8c;line-height:1}
.avatar-grupo{
  width:38px;height:38px;border-radius:50%;background:var(--verde);color:#04231a;
  display:grid;place-items:center;font-weight:800;font-size:.85rem;flex:none;
  overflow:hidden;
}
.avatar-grupo img{width:100%;height:100%;object-fit:cover}
.auto-btn{
  margin-left:auto;padding:7px 12px;border-radius:16px;cursor:pointer;
  border:1px solid #ffffff2e;background:#ffffff0f;color:#ffffffa6;
  font-family:inherit;font-size:.76rem;white-space:nowrap;flex:none;
}
.auto-btn.vel{margin-left:6px;font-size:.7rem}
.auto-btn:hover{background:#ffffff1f;color:#fff}
.auto-btn.on{background:var(--verde);border-color:var(--verde);color:#04231a;font-weight:700}

.chat-titulo strong{display:block;font-size:1rem}
.chat-titulo small{color:#ffffff59;font-size:.76rem}

.chat-scroll{
  flex:1;overflow-y:auto;padding:16px 12px 30px;
  display:flex;flex-direction:column;gap:3px;
  background-image:radial-gradient(#ffffff05 1px,transparent 1px);
  background-size:22px 22px;
}
.fecha-sep{
  align-self:center;margin:12px 0;padding:5px 13px;border-radius:8px;
  background:#182229;color:#ffffff73;font-size:.72rem;letter-spacing:.04em;
}
.burbuja{
  max-width:min(78%,440px);padding:7px 11px 6px;border-radius:9px;
  background:var(--burbuja-otro);position:relative;
  animation:pop .22s ease-out both;font-size:.95rem;line-height:1.42;
  word-wrap:break-word;
}
.burbuja.mia{align-self:flex-end;background:var(--burbuja-mia)}
.burbuja .autor{font-size:.78rem;font-weight:700;margin-bottom:2px;display:block}
.burbuja .hora{
  float:right;font-size:.63rem;color:#ffffff59;margin:6px 0 -2px 9px;
}
.burbuja.media{color:#ffffff73;font-style:italic;font-size:.87rem}
.burbuja.sistema{
  align-self:center;background:#182229;color:#ffffff8c;font-size:.78rem;
  text-align:center;max-width:80%;
}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.97)}to{opacity:1;transform:none}}

.escribiendo{
  align-self:flex-start;padding:11px 15px;background:var(--burbuja-otro);
  border-radius:9px;display:flex;gap:4px;
}
.escribiendo i{
  width:6px;height:6px;border-radius:50%;background:#ffffff73;
  animation:bounce 1.1s infinite;
}
.escribiendo i:nth-child(2){animation-delay:.16s}
.escribiendo i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-4px)}}

/* ---------- juego: caja de dialogo ---------- */
.caja{
  position:absolute;left:0;right:0;bottom:0;display:none;
  padding:18px 22px 24px;min-height:170px;
  background:linear-gradient(to top,#000000f0 60%,#00000000);
  cursor:pointer;
}
.caja.on{display:block}
.caja .nombre{
  font-weight:700;font-size:1.05rem;margin-bottom:7px;letter-spacing:.02em;
}
.caja .texto{
  font-size:clamp(1rem,3.6vw,1.16rem);line-height:1.62;max-width:900px;
  min-height:3.2em;text-shadow:0 2px 8px #000;
}
.caja .siguiente{
  position:absolute;right:20px;bottom:12px;color:#ffffff59;font-size:.85rem;
  animation:flota 1.2s infinite;
}
@keyframes flota{50%{transform:translateY(4px);opacity:.4}}

/* ---------- diccionario josemaritano ----------
   palabra subrayada; al pasar el raton (o tocar) sale la traduccion */
.jm{
  position:relative;cursor:help;
  border-bottom:2px dotted var(--acento);
  color:inherit;
}
.jm::after{
  content:attr(data-term) "\a" attr(data-def);
  white-space:pre-line;
  position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(6px);
  min-width:210px;max-width:min(78vw,340px);
  padding:11px 14px;border-radius:9px;
  background:#12141ainherit;background:#12141af7;
  border:1px solid var(--acento);
  color:#fff;font-size:.82rem;line-height:1.5;text-align:left;text-shadow:none;
  box-shadow:0 10px 34px #000b;
  opacity:0;pointer-events:none;transition:.16s;z-index:80;
  font-weight:400;
}
.jm::first-line{font-weight:700}
.jm:hover::after,.jm:focus::after,.jm.abierto::after{
  opacity:1;transform:translateX(-50%) translateY(0);
}
/* si la palabra está muy a la izquierda o derecha, que no se salga */
.burbuja .jm::after{max-width:min(70vw,300px)}

/* ---------- narracion ---------- */
.narracion{
  position:absolute;inset:0;display:none;place-items:center;padding:36px;
  background:#000;cursor:pointer;
}
.narracion.on{display:grid}
.narracion p{
  max-width:640px;text-align:center;font-size:clamp(1.05rem,4vw,1.35rem);
  line-height:1.85;color:#ffffffe0;
}

/* ---------- elecciones ---------- */
.elecciones{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;padding:28px;
  background:#000000a6;backdrop-filter:blur(3px);
}
.elecciones.on{display:flex}
.opcion{
  width:100%;max-width:520px;padding:16px 20px;border-radius:10px;
  border:1px solid #ffffff2e;background:#141820e6;color:#fff;
  font-size:1rem;font-family:inherit;text-align:left;cursor:pointer;transition:.15s;
}
.opcion:hover{border-color:var(--verde);background:#1c2530;transform:translateX(4px)}

/* ---------- minijuego ---------- */
.minijuego{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;padding:28px;
  background:#05070ae6;text-align:center;
}
.minijuego.on{display:flex}
.mj-titulo{font-size:1.5rem;font-weight:800;letter-spacing:.04em}
.mj-sub{color:#ffffff8c;font-size:.92rem;max-width:420px;line-height:1.5}
.mj-barra{
  width:min(90%,420px);height:26px;border-radius:14px;background:#ffffff14;
  overflow:hidden;border:1px solid #ffffff1f;
}
.mj-relleno{height:100%;width:0;background:linear-gradient(90deg,var(--verde),#a0e83a);transition:width .08s}
.mj-tiempo{font-size:2.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.mj-boton{
  padding:26px 54px;border-radius:16px;border:none;cursor:pointer;
  background:var(--verde);color:#04231a;font-size:1.4rem;font-weight:800;
  font-family:inherit;letter-spacing:.04em;user-select:none;
}
.mj-boton:active{transform:scale(.95)}
.mj-lluvia{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.mj-palabra{
  position:absolute;font-weight:700;font-size:1.1rem;color:var(--verde);
  animation:sube .9s ease-out forwards;
}
@keyframes sube{to{transform:translateY(-160px);opacity:0}}

/* ---------- foto real: polaroid ---------- */
.polaroid-capa{
  position:absolute;inset:0;display:none;place-items:center;padding:30px;
  background:#000000d9;cursor:pointer;z-index:40;
}
.polaroid-capa.on{display:grid}
.polaroid{
  background:#f4f1ea;padding:14px 14px 0;border-radius:3px;
  box-shadow:0 24px 60px #000c, 0 2px 0 #fff6 inset;
  max-width:min(88vw,460px);
  animation:revelar .6s cubic-bezier(.2,1.1,.4,1) both;
  transform-origin:center;
}
.polaroid img{
  display:block;width:100%;height:auto;max-height:58vh;object-fit:cover;
  background:#ddd8ce;
}
.polaroid figcaption{
  padding:14px 4px 18px;color:#2b2620;font-size:1.02rem;text-align:center;
  font-family:"Segoe Script","Bradley Hand",cursive;
}
@keyframes revelar{
  from{opacity:0;transform:rotate(-6deg) scale(.86) translateY(24px);filter:contrast(.4) brightness(1.6)}
  to  {opacity:1;transform:rotate(-1.5deg) scale(1)}
}

.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;max-width:760px}
.foto-grid figure{background:#f4f1ea;padding:8px 8px 0;border-radius:3px;transform:rotate(-1deg)}
.foto-grid figure:nth-child(even){transform:rotate(1.2deg)}
.foto-grid img{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#ddd8ce}
.foto-grid figcaption{
  padding:8px 2px 10px;color:#2b2620;font-size:.8rem;text-align:center;
  font-family:"Segoe Script","Bradley Hand",cursive;
}
.foto-vacio{color:#ffffff59;font-size:.92rem;line-height:1.7;max-width:520px}

/* ---------- pantalla del diccionario ---------- */
.dicc-lista{max-width:640px}
.dicc-letra{margin-bottom:26px}
.dicc-letra .letra{
  font-size:2.2rem;font-weight:800;color:var(--acento);line-height:1;
  border-bottom:1px solid #ffffff1a;padding-bottom:8px;margin-bottom:14px;
}
.entrada{margin-bottom:18px;padding-left:4px}
.entrada .termino{font-size:1.12rem;font-weight:700;margin-bottom:5px}
.entrada .def{
  color:#ffffffc4;font-size:.94rem;line-height:1.55;padding-left:16px;
  position:relative;margin-bottom:3px;
}
.entrada .def::before{content:'—';position:absolute;left:0;color:#ffffff4d}
.entrada .firma{color:#ffffff40;font-size:.74rem;margin-top:6px;letter-spacing:.04em}

/* ---------- toast de rol ---------- */
.toast{
  position:absolute;top:18px;left:50%;transform:translate(-50%,-160%);
  padding:12px 20px;border-radius:12px;background:#141820f2;
  border:1px solid var(--acento);box-shadow:0 8px 30px #000a;
  transition:transform .45s cubic-bezier(.2,1.4,.4,1);z-index:50;text-align:center;
}
.toast.on{transform:translate(-50%,0)}
.toast .cab{font-size:.7rem;letter-spacing:.16em;color:var(--acento);margin-bottom:3px}
.toast .nom{font-weight:700}

.salir{
  position:absolute;top:12px;right:12px;z-index:60;
  width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
  background:#0009;color:#fff9;font-size:1rem;line-height:1;
}
.salir:hover{background:#000c;color:#fff}

/* ---------- movil ---------- */
@media(max-width:560px){
  .caja{min-height:150px;padding:15px 17px 22px}
  .sprite{height:70%}
}