@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --ink:#0f241e;
  --glass:#173229;
  --glass-2:#1e3d32;
  --brass:#d9a94e;
  --brass-2:#f0c674;
  --paper:#f4efdd;
  --sage:#7fa88a;
  --rust:#c1613b;
  --line: rgba(244,239,221,0.14);
}
*{box-sizing:border-box;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(120% 90% at 50% -10%, #1a3a2f 0%, var(--ink) 60%);
  color:var(--paper);
  font-family:'Poppins', sans-serif;
  /* font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; */
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
}
.card{
  width:100%;
  max-width:420px;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:22px;
  padding:28px 26px 22px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.55);
  position:relative;
}
.eyebrow{
  /* font-family:'IBM Plex Mono',monospace; */
  font-family:'Poppins', sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--brass-2);
  text-align:center;
  margin:0 0 6px;
}
h1{
    font-family:'Poppins', sans-serif;
  /* font-family:'Fraunces',serif; */
  font-weight:600;
  font-size:26px;
  text-align:center;
  margin:0 0 18px;
  letter-spacing:-0.01em;
}
h1 .addr{ color:var(--brass-2); }

/* jar */
.jar-wrap{ display:flex; justify-content:center; margin:6px 0 10px; }
svg#jar{ width:150px; height:180px; overflow:visible; }
#fillRect{ transition: transform .9s cubic-bezier(.34,1.56,.64,1); }
.coin{
  opacity:0;
  transform:translateY(0);
}
.coin.drop{
  animation: coindrop 0.85s cubic-bezier(.55,0,.85,.35) forwards;
}
@keyframes coindrop{
  0%{ opacity:1; transform:translateY(-58px) scale(1);}
  75%{ opacity:1; transform:translateY(28px) scale(0.9);}
  100%{ opacity:0; transform:translateY(34px) scale(0.7);}
}

.stats{
  font-family:'IBM Plex Mono',monospace;
  text-align:center;
  font-size:13px;
  color:var(--paper);
  opacity:.85;
  margin-bottom:20px;
}
.stats b{ color:var(--brass-2); font-weight:600; }

.panel{
  background:var(--glass-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:16px;
  margin-bottom:12px;
}
.row{ display:flex; gap:8px; }
label{
  display:block;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--brass-2);
  margin-bottom:6px;
}
input[type=number]{
  width:100%;
  background:var(--ink);
  border:1px solid var(--line);
  border-radius:9px;
  color:var(--paper);
  /* font-family:'IBM Plex Mono',monospace; */
  font-family:'Poppins', sans-serif;
  font-size:15px;
  padding:10px 12px;
}
input[type=number]:focus, button:focus-visible{
  outline:2px solid var(--brass-2);
  outline-offset:2px;
}
button{
  /* font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; */
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:14px;
  border:none;
  border-radius:10px;
  padding:12px 16px;
  cursor:pointer;
  transition:transform .12s ease, filter .12s ease;
}
button:active{ transform:scale(.97); }
button:disabled{ opacity:.5; cursor:not-allowed; }
.btn-brass{ background:var(--brass); color:#20180a; }
.btn-brass:hover:not(:disabled){ filter:brightness(1.08); }
.btn-ghost{
  background:transparent; color:var(--paper);
  border:1px solid var(--line); width:100%;
}
.btn-ghost:hover:not(:disabled){ border-color:var(--brass-2); color:var(--brass-2); }
.btn-wide{ width:100%; }

.wallet-pill{
  /* font-family:'IBM Plex Mono',monospace; */
  font-family:'Poppins', sans-serif;
  font-size:12px;
  text-align:center;
  color:var(--sage);
  margin-bottom:14px;
}
.muted{ color:var(--paper); opacity:.6; font-size:13px; text-align:center; }

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--paper); color:#1a1a1a;
  font-family:'IBM Plex Mono',monospace; font-size:13px;
  padding:10px 16px; border-radius:10px;
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.toast a{ color:var(--rust); }

a{ color:var(--brass-2); }