/* ============================================================
   A Conta Que a Bet Não Mostra — mural escuro, mobile-first
   ============================================================ */

:root{
  --bg:#060606;
  --bg-2:#0d0c0b;
  --sheet:#111010;
  --ink:#e2ddd4;      /* texto principal, off-white morno */
  --ink-soft:#b7b1a7;
  --dim:#7c766c;      /* metadados */
  --faint:#39352f;    /* linhas/bordas */
  --ember:#c34a40;    /* acento sobrio (perda/CTA) */
  --ember-soft:#e07a70;
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.6;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* grão + vinheta pra dar textura triste */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 8%,transparent 40%,rgba(0,0,0,.55) 100%);
}
main,.hero,.site-foot,.toast{position:relative;z-index:1}

a{color:inherit;text-decoration:none}

/* ---------- HERO (toque para escrever) ---------- */
.hero{
  min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:64px 26px 40px;cursor:pointer;
}
.hero .brand{
  font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--dim);font-weight:600;
}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(2.1rem,8.5vw,3.6rem);line-height:1.12;
  margin:26px 0 8px;letter-spacing:-.01em;
}
.hero h1 .soft{display:block;color:var(--dim)}
.hero h1 .em{color:var(--ember-soft)}
.hero .lead{
  max-width:30ch;color:var(--ink-soft);font-size:1.02rem;margin:18px auto 0;
}
.tap-hint{
  margin-top:52px;color:var(--dim);font-size:.9rem;
  display:inline-flex;align-items:center;gap:10px;
}
.tap-hint .dot{
  width:9px;height:9px;border-radius:50%;background:var(--ember);
  box-shadow:0 0 0 0 rgba(195,74,64,.6);animation:pulse 2.4s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(195,74,64,.55)}
  70%{box-shadow:0 0 0 16px rgba(195,74,64,0)}
  100%{box-shadow:0 0 0 0 rgba(195,74,64,0)}
}
.scroll-cue{
  margin-top:auto;padding-top:34px;color:var(--faint);font-size:1.4rem;
  animation:bob 2.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---------- números (sobrios) ---------- */
.tally{
  text-align:center;color:var(--dim);font-size:.95rem;
  padding:8px 24px 4px;letter-spacing:.02em;
}
.tally b{color:var(--ink);font-weight:600}
.tally .sep{opacity:.4;margin:0 .5em}

/* ---------- MURAL de relatos ---------- */
.mural{max-width:660px;margin:0 auto;padding:40px 26px 140px}
.mural-intro{
  text-align:center;color:var(--dim);font-size:.78rem;letter-spacing:.28em;
  text-transform:uppercase;margin:40px 0 10px;
}
.whisper{
  margin:11vh 0;
  opacity:0;transform:translateY(26px);
  transition:opacity 1.1s ease,transform 1.1s ease;
}
.whisper.seen{opacity:1;transform:none}
.whisper-text{
  font-family:var(--serif);font-size:clamp(1.3rem,5.4vw,1.7rem);
  line-height:1.5;color:var(--ink);
}
.whisper-text::before{content:"“";color:var(--faint);margin-right:.05em}
.whisper-text::after{content:"”";color:var(--faint);margin-left:.02em}
.whisper-by{
  margin-top:18px;color:var(--dim);font-size:.9rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.55em;
}
.whisper-by .line{width:26px;height:1px;background:var(--faint)}
.whisper-by .loss{color:var(--ember-soft)}
.mural .empty{
  text-align:center;color:var(--dim);font-family:var(--serif);
  font-size:1.25rem;line-height:1.6;padding:14vh 0;
}
.pager{
  display:flex;justify-content:center;align-items:center;gap:22px;
  color:var(--dim);font-size:.9rem;margin-top:30px;
}
.pager a{color:var(--ink-soft);border-bottom:1px solid var(--faint);padding-bottom:2px}

/* ---------- CTA fixo (polegar) ---------- */
.write-fab{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:max(20px,env(safe-area-inset-bottom));z-index:20;
  background:rgba(20,10,9,.72);backdrop-filter:blur(10px);
  color:var(--ink);border:1px solid var(--ember);
  padding:14px 26px;border-radius:999px;font-size:.98rem;font-weight:600;
  cursor:pointer;display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);transition:transform .15s,background .2s;
}
.write-fab:active{transform:translateX(-50%) scale(.96)}
.write-fab .pen{color:var(--ember-soft)}

/* ---------- WRITER (modal folha) ---------- */
.writer{
  position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .28s ease;
}
.writer.open{opacity:1;visibility:visible}
.sheet{
  position:relative;
  width:100%;max-width:580px;max-height:94dvh;overflow-y:auto;
  background:var(--sheet);border:1px solid var(--faint);
  border-radius:22px 22px 0 0;padding:26px 22px 40px;
  transform:translateY(30px);transition:transform .32s ease;
}
.writer.open .sheet{transform:none}
.sheet-grip{width:44px;height:4px;border-radius:3px;background:var(--faint);margin:0 auto 20px}
.sheet h2{font-family:var(--serif);font-weight:400;font-size:1.8rem}
.sheet .sub{color:var(--ink-soft);font-size:.95rem;margin:8px 0 22px}
.writer-close{
  position:absolute;top:14px;right:16px;background:none;border:none;
  color:var(--dim);font-size:1.6rem;cursor:pointer;line-height:1;z-index:2;
}

/* controles do form */
.form-field{margin-bottom:18px;display:block}
.form-field > span.lbl{
  display:block;color:var(--dim);font-size:.82rem;margin-bottom:7px;letter-spacing:.02em;
}
input[type=text],select,textarea{
  width:100%;background:#0a0908;color:var(--ink);
  border:1px solid var(--faint);border-radius:12px;
  padding:13px 14px;font-size:1rem;font-family:inherit;
}
textarea{
  min-height:38dvh;resize:vertical;font-family:var(--serif);
  font-size:1.15rem;line-height:1.55;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ember)}
input::placeholder,textarea::placeholder{color:#5a554d}

.idtoggle{display:flex;gap:10px;margin-bottom:20px}
.idtoggle label{flex:1;position:relative;cursor:pointer}
.idtoggle input{position:absolute;opacity:0;pointer-events:none}
.idtoggle span{
  display:block;text-align:center;padding:13px 8px;border-radius:12px;
  border:1px solid var(--faint);color:var(--ink-soft);font-size:.95rem;transition:.2s;
}
.idtoggle input:checked + span{
  border-color:var(--ember);color:var(--ink);background:rgba(195,74,64,.1);
}

details.extra{margin-bottom:18px;border-top:1px solid var(--faint);padding-top:14px}
details.extra summary{
  color:var(--dim);font-size:.9rem;cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px;
}
details.extra summary::-webkit-details-marker{display:none}
details.extra summary::before{content:"+";color:var(--ember-soft);font-size:1.1rem}
details.extra[open] summary::before{content:"–"}
details.extra .grid{margin-top:16px;display:grid;gap:14px}
@media(min-width:440px){details.extra .grid.two{grid-template-columns:1fr 1fr}}

.counter{text-align:right;color:var(--dim);font-size:.8rem;margin-top:6px}
.counter.warn{color:var(--ember-soft)}

.warnbox{
  background:rgba(195,74,64,.07);border:1px solid rgba(195,74,64,.3);
  border-radius:12px;padding:13px 15px;font-size:.85rem;color:var(--ink-soft);
  margin:4px 0 18px;line-height:1.5;
}
.terms{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;color:var(--ink-soft);margin-bottom:22px;cursor:pointer}
.terms input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--ember)}

.btn-send{
  width:100%;background:var(--ember);color:#fff;border:none;
  padding:16px;border-radius:13px;font-size:1.05rem;font-weight:600;
  cursor:pointer;transition:.2s;font-family:inherit;
}
.btn-send:active{transform:scale(.985)}
.btn-send:hover{background:#d1554a}

/* ---------- toast (flash) ---------- */
.toast{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;
  max-width:92vw;padding:13px 20px;border-radius:12px;font-size:.92rem;
  background:var(--bg-2);border:1px solid var(--faint);color:var(--ink);
  box-shadow:0 12px 40px rgba(0,0,0,.6);animation:drop .5s ease;
}
.toast.ok{border-color:rgba(120,170,120,.4)}
.toast.bad{border-color:rgba(195,74,64,.5)}
@keyframes drop{from{opacity:0;transform:translate(-50%,-14px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- rodapé ---------- */
.site-foot{
  text-align:center;padding:40px 24px calc(120px + env(safe-area-inset-bottom));
  color:var(--dim);font-size:.82rem;line-height:1.7;border-top:1px solid var(--faint);
}
.site-foot .help{color:var(--ink-soft);max-width:46ch;margin:0 auto 16px}
.site-foot a{color:var(--dim);border-bottom:1px solid var(--faint)}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .whisper{opacity:1;transform:none}
}