:root { --bg: #0b0b0f; --amber: #ffb020; --dim: #8a8a96; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: #fff; }
body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; display: grid; place-items: center; }
main { text-align: center; padding: 16px; width: 100%; }
.label { color: var(--dim); text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; margin: 1.5rem 0 .5rem; }
.pump {
  font-size: clamp(2rem, 11vw, 6rem); font-weight: 700; color: var(--amber);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  text-shadow: 0 0 12px rgba(255,176,32,.6), 0 0 40px rgba(255,176,32,.3);
}
.unit { font-size: .4em; color: var(--dim); text-shadow: none; }
.elapsed { font-size: clamp(1.1rem, 5vw, 2rem); font-variant-numeric: tabular-nums; }
.status { color: #c55; font-size: .8rem; min-height: 1em; }

/* Botão Sacar: aparece no hover (mouse) ou no toque (celular), abaixo do valor */
.pump-wrap { display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.sacar-btn {
  margin-top: 1rem;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
  background: var(--amber); color: #1a1200; border: none; border-radius: 999px;
  padding: .6rem 1.8rem; font-weight: 700; font-size: 1.05rem;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(255,176,32,.5);
}
.pump-wrap:hover .sacar-btn,
.pump-wrap.show-btn .sacar-btn {
  opacity: 1; pointer-events: auto;
}
/* Sem mouse de verdade (celular/tablet): botão sempre visível, sem precisar
   de nenhum toque pra revelar — :hover não é confiável em touchscreens. */
@media (hover: none) {
  .sacar-btn { opacity: 1; pointer-events: auto; }
}

/* Modais */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.75);
  display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10;
}
.modal-overlay.hidden { display: none; }
.modal {
  background: #16161d; border: 1px solid #2a2a35; border-radius: 12px;
  padding: 1.5rem; width: 100%; max-width: 360px;
  display: flex; flex-direction: column; gap: 1rem;
}
.modal h2 { margin: 0; font-size: 1.1rem; color: var(--amber); text-align: center; }
.modal label { display: flex; flex-direction: column; gap: .4rem; font-size: .85rem; color: var(--dim); text-align: left; }
.modal input {
  background: #0b0b0f; border: 1px solid #2a2a35; border-radius: 8px; color: #fff;
  padding: .6rem .7rem; font-size: 1rem; font-family: inherit;
}
.modal input:focus { outline: none; border-color: var(--amber); }
.modal-error { color: #ff6b6b; font-size: .8rem; min-height: 1em; margin: 0; text-align: center; }
#turnstileContainer { display: flex; justify-content: center; }
.modal-actions { display: flex; gap: .6rem; justify-content: center; }
.btn-primary, .btn-secondary {
  flex: 1; border: none; border-radius: 8px; padding: .65rem 1rem;
  font-family: inherit; font-weight: 700; font-size: .95rem; cursor: pointer;
}
.btn-primary { background: var(--amber); color: #1a1200; }
.btn-secondary { background: transparent; color: var(--dim); border: 1px solid #2a2a35; }
.thanks-text { text-align: center; color: #fff; font-size: 1rem; margin: 0; }