:root{
  --bg: #14140f;
  --bg-card: #1c1c15;
  --sage: #8ca063;
  --sage-hover: #96ab72;
  --sage-glow: rgba(140,160,99,0.16);
  --smoke: #d9d6c9;
  --smoke-dim: #8b897c;
  --smoke-faint: #4a493f;
  --line: #2c2b22;
  --danger: #b0654f;
}

*{ box-sizing: border-box; }
html, body{ margin: 0; padding: 0; }

body{
  background: var(--bg);
  color: var(--smoke);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 48px 20px 80px;
}

.wrap{ width: 100%; max-width: 480px; }

header{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
  text-align: center;
}

.logo{ width: 52px; height: 52px; margin-bottom: 14px; }
.logo path{ fill: var(--sage); }

header .eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage);
  margin: 0 0 8px;
}

header h1{
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 34px;
  margin: 0;
  color: var(--smoke);
}

.stage{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0 36px;
}

.count-display{ text-align: center; margin-bottom: 30px; }

.count-number{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 1;
  color: var(--smoke);
  letter-spacing: -0.02em;
  display: inline-block;
}

/* Animação do número */
.count-number.pop-anim {
  animation: popNumber 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popNumber {
  0% { transform: scale(1); }
  50% { 
    transform: scale(1.3); 
    color: var(--sage); 
    text-shadow: 0 0 24px var(--sage-glow); 
  }
  100% { transform: scale(1); }
}

.count-label{
  font-size: 13px;
  color: var(--smoke-dim);
  letter-spacing: 0.04em;
  margin-top: 6px;
}

button.smoke-btn{
  appearance: none;
  border: none;
  cursor: pointer;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  background: var(--sage);
  color: #14140f;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 8px var(--sage-glow);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.15s ease;
}
button.smoke-btn:hover{ background: var(--sage-hover); }
button.smoke-btn:active{ transform: scale(0.96); }
button.smoke-btn:focus-visible{ outline: 2px solid var(--smoke); outline-offset: 4px; }
button.smoke-btn.pulse{ animation: pulse 0.4s ease; }

@keyframes pulse{
  0%{ box-shadow: 0 0 0 8px var(--sage-glow); }
  50%{ box-shadow: 0 0 0 16px var(--sage-glow); }
  100%{ box-shadow: 0 0 0 8px var(--sage-glow); }
}

.undo-row{ margin-top: 18px; height: 20px; }
.undo-btn{
  appearance: none;
  background: none;
  border: none;
  color: var(--smoke-dim);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.undo-btn.visible{ opacity: 1; }
.undo-btn:hover{ color: var(--smoke); }

.stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 40px;
}
.stat{ background: var(--bg-card); padding: 16px 18px; }
.stat .n{
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--smoke);
}
.stat .l{ font-size: 12px; color: var(--smoke-dim); margin-top: 2px; }

.history h2{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--smoke-dim);
  font-weight: 500;
  margin: 0 0 14px;
}

.day-group{ margin-bottom: 22px; }
.day-heading{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--sage);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

.entry{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.entry:last-child{ border-bottom: none; }
.entry .time{
  font-family: 'JetBrains Mono', monospace;
  color: var(--smoke-dim);
  font-size: 13px;
}
.entry .remove{
  appearance: none;
  background: none;
  border: none;
  color: var(--smoke-faint);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
}
.entry .remove:hover{ color: var(--danger); }

.empty{
  text-align: center;
  color: var(--smoke-faint);
  font-size: 13px;
  padding: 30px 0;
}

.status{
  text-align: center;
  color: var(--smoke-faint);
  font-size: 12px;
  margin-top: 40px;
  font-family: 'JetBrains Mono', monospace;
}

/* Animação de chuva de ícones */
.icon-particle {
  position: fixed;
  bottom: -80px; 
  pointer-events: none; 
  z-index: 9999;
  animation: floatUp linear forwards;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-particle svg {
  width: 42px;
  height: 42px;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) rotate(-15deg) scale(0.6);
    opacity: 0.85;
  }
  100% {
    transform: translateY(-110vh) rotate(45deg) scale(1.1);
    opacity: 0;
  }
}

button.smoke-btn:disabled {
  background: var(--smoke-faint); /* Fica cinza escuro */
  color: var(--smoke-dim);
  box-shadow: none;
  cursor: not-allowed;
  transform: scale(0.98);
}

.cooldown-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--danger); /* Fica vermelho para chamar atenção */
  margin-top: 12px;
  min-height: 16px; /* Mantém o espaço reservado para não "pular" a tela */
  opacity: 0;
  transition: opacity 0.2s ease;
}

.cooldown-text.visible {
  opacity: 1;
}