:root{
  --bg0:#06040a;
  --bg1:#1b0b24;
  --card: rgba(255,255,255,0.06);
  --line: rgba(255,255,255,0.12);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --pink: #ff4fd8;
  --pink2:#ff88ee;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 18% 18%, rgba(205,164,76,0.20), transparent 62%),
    radial-gradient(900px 700px at 82% 28%, rgba(255,255,255,0.06), transparent 55%),
    radial-gradient(900px 700px at 58% 84%, rgba(255,79,216,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow:hidden;
}

#fx{position:fixed;inset:0;width:100%;height:100%;}

.wrap{
  position:relative;
  z-index:1;
  height:100%;
  display:grid;
  place-items:center;
  padding:22px;
}

.card{
  width:min(560px, 100%);
  border-radius: 24px;
  border: 1px solid var(--line);
  background: var(--card);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 110px rgba(0,0,0,0.55);
  padding: 26px 22px;
  text-align:center;
}

.kicker{font-weight:900;font-size:11px;letter-spacing:0.28px;text-transform:uppercase;color:rgba(255,255,255,0.62)}
.title{margin:12px 0 0;font-size:44px;letter-spacing:-0.9px;}
.sub{margin:10px auto 0; max-width:44ch; color:var(--muted); line-height:1.55; font-size:14px}

.row{margin-top:18px; display:flex; justify-content:center; gap:14px; align-items:center; flex-wrap:wrap;}

.btn{
  cursor:pointer;
  border:none;
  border-radius: 16px;
  padding: 12px 18px;
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 14px;
  color: rgba(255,255,255,0.90);
  background: linear-gradient(180deg, rgba(18,16,22,0.92), rgba(6,5,8,0.92));
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 40px rgba(0,0,0,0.40);
  transform: translateY(0);
  transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease;
}
.btn:hover{filter:brightness(1.08); border-color: rgba(255,255,255,0.22)}
.btn:active{transform: translateY(1px)}
.btn[disabled]{opacity:0.5; cursor:not-allowed}

.result{margin-top:18px;}
.big{font-size:38px; font-weight: 900; letter-spacing:-0.6px;}
.pink{color:var(--pink)}
.fine{margin-top:8px; color:rgba(255,255,255,0.65); font-size:13px}

.revealed .title{opacity:0.85}

@media (max-width:420px){
  .title{font-size:38px}
  .big{font-size:34px}
}