: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%; }

.logo {
  position: fixed; top: 1rem; left: 1.1rem; z-index: 5;
  display: flex; align-items: center;
  font-size: clamp(.95rem, 4vw, 1.15rem); font-weight: 800; letter-spacing: .01em;
  color: #fff; text-decoration: none;
}
.logo-bolt { color: var(--amber); font-size: 1.1em; margin-right: .3rem; filter: drop-shadow(0 0 6px rgba(255,176,32,.6)); }
.logo-tld { color: var(--dim); font-weight: 600; }

.lang-dropdown { position: fixed; top: 1rem; right: 1.1rem; z-index: 5; }
.lang-button {
  background: #16161d; color: #fff; border: 1px solid #2a2a35; border-radius: 8px;
  padding: .4rem .6rem; font-family: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
}
.lang-button:focus { outline: none; border-color: var(--amber); }
.lang-list {
  position: absolute; top: calc(100% + .4rem); right: 0; z-index: 6;
  background: #16161d; border: 1px solid #2a2a35; border-radius: 8px;
  list-style: none; margin: 0; padding: .3rem; min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.lang-list.hidden { display: none; }
.lang-list li {
  padding: .5rem .6rem; border-radius: 6px; cursor: pointer;
  font-size: .85rem; color: #fff; white-space: nowrap;
}
.lang-list li:hover { background: #2a2a35; }
.lang-list li.active { color: var(--amber); font-weight: 700; }
.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; }

.recent { width: 100%; max-width: 420px; margin: 2rem auto 0; padding: 0 1rem; }
/* Em telas largas, vira uma coluna fixa do lado direito, abaixo do seletor
   de idioma, em vez de empilhar embaixo do conteúdo central. Em telas
   estreitas (celular) não tem espaço pra isso, então mantém embaixo. */
@media (min-width: 820px) {
  .recent {
    position: fixed; top: 4.3rem; right: 1.1rem; z-index: 4;
    width: 260px; max-width: 260px; margin: 0; padding: 0;
    max-height: calc(100vh - 5.5rem); overflow-y: auto;
  }
}
.recent-list { display: flex; flex-direction: column; gap: .5rem; }
.recent-empty { color: var(--dim); font-size: .85rem; text-align: center; padding: .5rem 0; }
.recent-item {
  background: #14141a; border: 1px solid #22222c; border-radius: 10px;
  padding: .7rem .9rem; font-size: .8rem; text-align: left;
}
.recent-item .recent-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .3rem; }
.recent-item .recent-amount { color: var(--amber); font-weight: 700; font-variant-numeric: tabular-nums; }
.recent-item .recent-date { color: var(--dim); font-size: .7rem; }
.recent-item .recent-fields { color: var(--dim); font-variant-numeric: tabular-nums; word-break: break-all; }
.recent-item .recent-fields span { color: #cfcfd6; }