/* ===== L.S.D · Estilos de la charla interactiva ===== */
:root{--bg:#0b0a1a;--card:#15132b;--tx:#ecebff;--mut:#a9a6d1;--a:#8b5cf6;--b:#22d3ee;--c:#f472b6;--ok:#34d399;--ko:#f87171}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(circle at 50% 0,#2b1d63 0,var(--bg) 55%);color:var(--tx);min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:16px}
header{width:100%;max-width:760px;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
header a{color:var(--b);text-decoration:none;font-size:.9rem}
header b{letter-spacing:.12em}
#score{color:var(--mut);font-size:.85rem}
#game{width:100%;max-width:760px;background:var(--card);border:1px solid #26234a;border-radius:20px;padding:20px;display:flex;flex-direction:column;gap:14px;flex:1;max-height:calc(100vh - 90px)}
#tag{display:inline-block;align-self:flex-start;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:99px;background:#0f0e22;color:var(--b)}
#chat{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding-right:4px}
.msg{display:flex;gap:10px;align-items:flex-end;animation:in .3s}
.msg .av{width:52px;height:52px;border-radius:50%;background:#0f0e22;border:2px solid var(--a);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex:none;overflow:hidden}
.msg .av img{width:100%;height:100%;object-fit:contain}
.bub{background:#0f0e22;border:1px solid #2c2956;border-radius:16px 16px 16px 4px;padding:12px 15px;max-width:80%;font-size:.98rem}
.bub small{display:block;color:var(--c);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:3px}
.me{justify-content:flex-end}
.me .bub{background:linear-gradient(90deg,var(--a),var(--b));color:#0b0a1a;border:0;border-radius:16px 16px 4px 16px;font-weight:600}
#choices{display:grid;gap:9px}
.ch{padding:12px 16px;border-radius:12px;border:1px solid #333066;background:#0f0e22;color:var(--tx);font-size:.98rem;cursor:pointer;text-align:left}
.ch{display:flex;align-items:center;gap:12px}
.ch img{width:40px;height:40px;object-fit:contain}
.ch:hover:not(:disabled){border-color:var(--b)}
.ch.ok{border-color:var(--ok);background:#0f2a24}
.ch.ko{border-color:var(--ko);background:#2a1214}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.dots span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--mut);animation:b 1s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes b{50%{transform:translateY(-5px)}}