:root{
  --bg:#14100d;--bg2:#1d1712;--card:#241c16;--line:#3a2e25;--ink:#f6eee6;--mut:#b5a597;--dim:#7d6e62;
  --ember:#ff7a2f;--ember2:#ffb347;--coal:#c2410c;
  --Humano:#e8a33d;--Victima:#e0533d;--Don:#3fa9a0;--Salva:#7cc46a;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif}
body{min-height:100dvh;padding-bottom:calc(76px + var(--safe-b))}
button{font:inherit;color:inherit;cursor:pointer}
#app{max-width:560px;margin:0 auto;padding:calc(18px + var(--safe-t)) 18px 24px}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:30px;line-height:1.12}h2{font-size:23px}
.kick{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.mut{color:var(--mut)}.dim{color:var(--dim)}.small{font-size:13.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px}
.row{display:flex;align-items:center;gap:10px}.sp{flex:1}
.boot{height:70dvh;display:grid;place-items:center}

/* tabs */
#tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;background:rgba(20,16,13,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:8px 6px calc(8px + var(--safe-b));z-index:10}
#tabs a{flex:1;text-align:center;color:var(--dim);text-decoration:none;font-size:11.5px;font-weight:600}
#tabs a .i{display:block;font-size:20px;line-height:1.3;filter:grayscale(1) brightness(.8)}
#tabs a.on{color:var(--ember2)}#tabs a.on .i{filter:none}

/* streak chip */
.streak{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#3a1d0c,#2a1609);border:1px solid #5a2e12;border-radius:999px;padding:6px 12px 6px 8px;font-weight:700}
.streak .f{font-size:20px}.streak.off{filter:grayscale(.8);opacity:.75}

/* the ember (record button) */
.ember{display:block;width:150px;height:150px;border-radius:50%;margin:0 auto;padding:0;position:relative;background:radial-gradient(circle at 50% 60%,var(--ember2) 0%,var(--ember) 35%,var(--coal) 70%,#3d1405 100%);box-shadow:0 0 60px 10px rgba(255,122,47,.35),inset 0 -10px 30px rgba(0,0,0,.35);animation:glow 3.2s ease-in-out infinite;border:0}
.ember::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px solid rgba(255,160,80,.25)}
.ember .lbl{position:absolute;inset:0;display:grid;place-items:center;font-weight:800;font-size:15px;letter-spacing:.06em;color:#2b0f02;text-transform:uppercase}
.ember.rec{animation:pulse 1.1s ease-in-out infinite;background:radial-gradient(circle at 50% 60%,#fff1d6 0%,var(--ember2) 30%,var(--ember) 60%,var(--coal) 100%)}
@keyframes glow{0%,100%{box-shadow:0 0 50px 8px rgba(255,122,47,.28),inset 0 -10px 30px rgba(0,0,0,.35)}50%{box-shadow:0 0 80px 18px rgba(255,122,47,.45),inset 0 -10px 30px rgba(0,0,0,.35)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.ember,.ember.rec{animation:none}}

.q{font-family:var(--serif);font-size:26px;line-height:1.25;margin:10px 0 0}
.timer{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;text-align:center;margin-top:14px}
.pista{min-height:52px;text-align:center;color:var(--ember2);font-family:var(--serif);font-size:18px;margin-top:10px;transition:opacity .4s}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--bg2);border-radius:14px;padding:12px 16px;font-weight:650}
.btn.pri{background:var(--ember);border-color:var(--ember);color:#230b00}
.btn.ghost{background:none}
.btn.block{width:100%}
textarea{width:100%;min-height:120px;background:var(--bg2);border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;padding:12px}

/* conversation */
.chat{display:flex;flex-direction:column;gap:12px;margin:18px 0}
.b{max-width:88%;padding:12px 14px;border-radius:18px;line-height:1.45}
.b.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);font-family:var(--serif);font-size:18.5px;border-bottom-left-radius:6px}
.b.alan{align-self:flex-end;background:#3a2414;border:1px solid #5a3519;border-bottom-right-radius:6px;font-size:15px}
.b .meta{display:block;font:600 11px/1 -apple-system,sans-serif;letter-spacing:.06em;color:var(--dim);margin-top:8px;text-transform:uppercase}
.tip{align-self:flex-start;font-size:13.5px;color:var(--ember2);border-left:2px solid var(--ember);padding:2px 0 2px 10px;max-width:88%}
.wait{align-self:flex-start;color:var(--mut);font-size:14px;display:flex;gap:8px;align-items:center}
.dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ember);margin:0 2px;animation:d 1.2s infinite}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes d{0%,80%,100%{opacity:.25}40%{opacity:1}}
.saved{background:#1f2a1a;border:1px solid #3c5a2f;color:#cfe8c0;border-radius:14px;padding:10px 12px;font-size:14px}

/* tasks */
.task{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 16px;margin:10px 0;font-family:var(--serif);font-size:17px;line-height:1.35}
.task small{display:block;font:600 11px -apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:6px}
.task.new{border-style:dashed;border-color:#6a3a1a;color:var(--ember2)}

/* mi fuego */
.big{font-family:var(--serif);font-size:64px;line-height:1;font-weight:700;color:var(--ember2)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.cal div{aspect-ratio:1;border-radius:8px;background:var(--bg2);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:var(--dim)}
.cal div.on{background:radial-gradient(circle at 50% 60%,var(--ember2),var(--ember) 60%,var(--coal));color:#2b0f02;border-color:var(--ember);font-weight:800}
.cal div.part{background:#3a2414;border-color:#5a3519;color:var(--mut)}
.cal div.today{outline:2px solid var(--ember2);outline-offset:1px}
.lv{display:flex;gap:6px;margin-top:10px}.lv span{flex:1;text-align:center;font-size:11px;padding:6px 0;border-radius:8px;background:var(--bg2);color:var(--dim);border:1px solid var(--line)}
.lv span.on{background:#3a1d0c;color:var(--ember2);border-color:#6a3a1a}

/* universe */
.av{width:132px;height:132px;border-radius:50%;margin:8px auto 10px;background:var(--bg2) center/cover;box-shadow:0 0 0 3px rgba(255,200,150,.8),0 0 50px 12px rgba(255,122,47,.35)}
.crumbs{font-size:12.5px;color:var(--mut);margin:6px 0 14px;text-align:center}
.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:last-child{color:var(--ink)}
.node{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-left:5px solid var(--c,var(--ember));border-radius:16px;padding:14px;margin:8px 0}
.node .n{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;background:radial-gradient(circle at 35% 30%,#fff3,var(--c,var(--ember)) 45%,#0008);color:#fff}
.node b{font-family:var(--serif);font-size:18px;font-weight:600;display:block}
.node small{color:var(--mut);font-size:12.5px}
.st{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;margin-top:4px}
.st.h{background:#1f2a1a;color:#a8d98f}.st.f{background:#3a1a14;color:#ff9b85}.st.new{background:#3a1d0c;color:var(--ember2)}
.story{margin-top:10px}
.quote{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:14px;white-space:pre-wrap;font-family:var(--serif);font-size:17px;line-height:1.5;margin:10px 0}
.quote .src{display:block;font:600 11px -apple-system,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.empty{text-align:center;color:var(--mut);padding:40px 10px}
.toast{position:fixed;left:50%;bottom:calc(90px + var(--safe-b));transform:translateX(-50%);background:#2e2219;border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:20;font-size:14px}
.install{margin-top:16px;font-size:13.5px}

a{color:inherit}
a.node{text-decoration:none;color:inherit}
.node span{min-width:0}