/* King Flan · el anfitrión.
   Misma paleta que la trivia y el tarot: Shibuya de noche. La diferencia es
   que acá la pantalla es una charla, así que casi todo el espacio es para el
   texto y el resto se corre del medio. */

:root{
  --bg:#0A0714;--panel:#120C22;--fog:#17102A;--line:#261D3E;--ink:#fff;--muted:#A9A0BF;
  --pink:#FF2D8A;--pink-d:#E01A72;--yolk:#FFF23A;--cyan:#22E6FF;--green:#00E701;--red:#E63946;
  --font:'Suisse Intl','Inter',system-ui,-apple-system,sans-serif;--jp:'Noto Sans JP',sans-serif;
  --r:16px;--r-lg:24px;--max:720px;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.35);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.55;font-size:16px;
  -webkit-font-smoothing:antialiased;min-height:100%;display:flex;flex-direction:column;
  background-image:radial-gradient(ellipse at 12% 0%,rgba(255,45,138,.14),transparent 45%),radial-gradient(ellipse at 88% 8%,rgba(34,230,255,.10),transparent 40%),radial-gradient(ellipse at 55% 100%,rgba(139,61,255,.14),transparent 50%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
input,textarea{font:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
.wrap{width:min(100% - 28px,var(--max));margin:0 auto}

/* ---------- barra ---------- */
.nav{position:sticky;top:0;z-index:60;backdrop-filter:blur(14px);background:rgba(10,7,20,.82);border-bottom:1px solid var(--line);flex:none}
.nav .wrap{display:flex;align-items:center;gap:12px;padding:11px 0}
.nav .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.12em;font-size:12px}
.nav .brand img{width:26px}
.nav .sp{flex:1}
.nav .lk{font-size:13px;font-weight:600;color:var(--muted)}
.nav .lk:hover{color:#fff}
.left{
  font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:6px 11px;white-space:nowrap;
}
.left.low{color:var(--yolk);border-color:rgba(255,242,58,.4)}

/* ---------- la charla ---------- */
main{flex:1;display:flex;flex-direction:column;min-height:0}
.log{
  flex:1;overflow-y:auto;padding:22px 0 8px;
  display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth;
}
.msg{display:flex;gap:11px;align-items:flex-end;max-width:100%}
.msg .av{width:34px;height:34px;flex:none;border-radius:50%;background:var(--fog);border:1px solid var(--line);padding:3px}
.bub{
  padding:11px 15px;border-radius:18px;max-width:min(80%,520px);
  font-size:15.5px;line-height:1.52;white-space:pre-wrap;overflow-wrap:anywhere;
}
.msg.f .bub{background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:6px}
.msg.u{flex-direction:row-reverse;align-self:flex-end}
.msg.u .bub{background:var(--pink);color:#fff;border-bottom-right-radius:6px;font-weight:500}
.msg.u .av{display:none}

/* los tres puntitos mientras piensa */
.dots{display:inline-flex;gap:5px;align-items:center;padding:3px 2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--muted);display:block}
@media (prefers-reduced-motion:no-preference){
  .dots i{animation:bounce 1.2s ease-in-out infinite}
  .dots i:nth-child(2){animation-delay:.15s}
  .dots i:nth-child(3){animation-delay:.3s}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
}

.sys{
  align-self:center;text-align:center;font-size:13px;color:var(--muted);
  border:1px solid var(--line);border-radius:14px;padding:11px 15px;max-width:440px;background:rgba(18,12,34,.7);
}
.sys b{color:var(--yolk);font-weight:700}
.sys .cta{display:inline-block;margin-top:9px;font-size:13px;font-weight:700;color:var(--pink)}
.sys .cta:hover{color:#fff}

/* ---------- arranque ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 6px 45px}
.chip{
  font-size:13.5px;font-weight:600;padding:8px 14px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:rgba(18,12,34,.6);
}
.chip:hover{color:#fff;border-color:var(--pink);background:rgba(255,45,138,.1)}

/* ---------- el compositor ---------- */
.composer{
  flex:none;position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 62%,transparent);
  padding:10px 0 max(14px,env(safe-area-inset-bottom));
}
.box{
  display:flex;align-items:flex-end;gap:9px;background:var(--panel);
  border:1px solid var(--line);border-radius:22px;padding:7px 7px 7px 16px;box-shadow:var(--shadow);
}
.box:focus-within{border-color:var(--pink)}
.box textarea{
  flex:1;background:none;border:0;color:var(--ink);resize:none;outline:none;
  font-size:16px;line-height:1.45;max-height:132px;padding:9px 0;
}
.box textarea::placeholder{color:var(--muted)}
.send{
  width:38px;height:38px;flex:none;border-radius:50%;background:var(--pink);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800;transition:background .15s,transform .1s;
}
.send:hover:not(:disabled){background:var(--pink-d)}
.send:active:not(:disabled){transform:scale(.94)}
.send:disabled{opacity:.35;cursor:not-allowed}
.foot{
  text-align:center;font-size:11px;color:var(--muted);padding:8px 0 2px;line-height:1.6;
}
.foot button{color:var(--muted);text-decoration:underline;font-size:11px}
.foot button:hover{color:#fff}

/* ---------- hoja del club ---------- */
.sheet{position:fixed;inset:0;z-index:90;display:none;place-items:center;padding:20px;background:rgba(5,3,9,.72);backdrop-filter:blur(6px)}
.sheet.on{display:grid}
.card{
  width:min(100%,420px);background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px 24px;box-shadow:var(--shadow-lg);text-align:center;
}
.card img{width:64px;margin:0 auto 12px}
.card h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:9px}
.card p{font-size:14.5px;color:var(--muted);margin-bottom:16px}
.card ul{list-style:none;text-align:left;margin:0 0 18px;display:flex;flex-direction:column;gap:8px}
.card li{font-size:14px;display:flex;gap:9px;align-items:flex-start}
.card li::before{content:"·";color:var(--pink);font-weight:800;font-size:18px;line-height:1.2}
.btn{display:block;width:100%;padding:13px;border-radius:999px;font-weight:700;font-size:15px;text-align:center}
.btn.pri{background:var(--pink);color:#fff}
.btn.pri:hover{background:var(--pink-d)}
.btn.gh{color:var(--muted);margin-top:8px;font-size:13.5px}
.btn.gh:hover{color:#fff}
.soon{
  font-size:12px;color:var(--yolk);border:1px solid rgba(255,242,58,.35);border-radius:12px;
  padding:10px 12px;margin-bottom:14px;line-height:1.5;background:rgba(255,242,58,.06);
}

/* ---------- ajustes de la edición ---------- */
.field{display:flex;flex-direction:column;gap:7px;text-align:left;margin-bottom:14px}
.field label{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.field select{
  background:var(--fog);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  color:var(--ink);font-size:16px;width:100%;
}
.field select:focus{outline:none;border-color:var(--pink)}
.check{
  display:flex;align-items:center;gap:10px;font-size:14.5px;text-align:left;
  padding:10px 0;cursor:pointer;
}
.check input{width:18px;height:18px;accent-color:var(--pink);flex:none}
.tiny{font-size:12px;color:var(--muted);margin-top:11px;min-height:16px;line-height:1.5}
.tiny.ok{color:var(--green)}
.card .btn.pri{margin-top:10px}

/* la edición, dentro de la charla */
.ed{
  border:1px solid rgba(255,242,58,.32);background:rgba(255,242,58,.05);
  border-radius:var(--r);padding:15px 17px;align-self:stretch;
}
.ed .k{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yolk);margin-bottom:8px}
.ed p{font-size:15.5px;line-height:1.55}
.ed p + p{margin-top:9px}
.ed .q{color:var(--yolk);font-weight:600}

@media(max-width:520px){
  .bub{max-width:86%;font-size:15px}
  .chips{padding-left:0}
}