:root {
  --bg:#061022;
  --card:#0b1b2b;
  --accent:#0ea5ff;
  --accent2:#ffd166;
  --glass:rgba(255,255,255,0.04);
}

* {
  box-sizing:border-box;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial;
}

body {
  margin:0;
  min-height:100vh;
  background:linear-gradient(160deg,#021026 0%, #04243a 50%, #08121b 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.wrap {
  width:100%;
  max-width:460px;
  background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent);
  border-radius:16px;
  padding:20px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
}

.logo {
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}

.logo img {
  width:100px;
  height:auto;
}

.how {
  background:var(--glass);
  padding:12px;
  border-radius:10px;
  margin-bottom:14px;
  color:#e9f6ff;
  font-size:14px;
}

.form-row {
  display:flex;
  gap:8px;
  margin-bottom:12px;
}

input[type="text"] {
  flex:1;
  padding:12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.06);
  background:transparent;
  color:inherit;
  font-size:15px;
}

.btn-row {
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
}

.btn {
  padding:10px 14px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:700;
  color:#061022;
}

.btn.login {
  background:linear-gradient(120deg,#ff6b6b,#ffb86b);
  animation:blink 1.05s infinite;
}

.btn.register {
  background:linear-gradient(120deg,#6bffb8,#6bb9ff);
  animation:blink 1.25s infinite;
}

@keyframes blink {
  0%{filter:brightness(1)}
  50%{filter:brightness(1.35)}
  100%{filter:brightness(1)}
}

.box {
  margin-top:8px;
  padding:14px;
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);
  text-align:center;
  border:1px solid rgba(255,255,255,0.03);
}

.box-actions {
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  margin-top:12px;
}

.start {
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  background:linear-gradient(90deg,#8b5cf6,#06b6d4);
  font-weight:800;
  cursor:pointer;
}

.loader {
  display:none;
  align-items:center;
  gap:12px;
  margin-top:12px;
}

.spinner {
  width:38px;
  height:38px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,0.08);
  border-top-color:var(--accent);
  animation:spin 0.9s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.prize-modal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
}

.prize-card {
  width:100%;
  max-width:520px;
  background:linear-gradient(180deg,#08121b,#062034);
  padding:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.04);
  text-align:center;
}

.prize-title {
  font-size:13px;
  color:rgba(255,255,255,0.85);
}

.prize-amount {
  font-size:34px;
  margin:6px 0 12px;
}

.small {
  font-size:13px;
  color:rgba(255,255,255,0.8);
}

.claim-btn {
  margin-top:16px;
  display:flex;
  gap:10px;
  justify-content:center;
}

.claim-btn .btn {
  background:linear-gradient(90deg,#f97316,#ef4444);
}

.prize-id {
  margin-top:10px;
  font-size:12px;
  color:rgba(255,255,255,0.7);
}

.note {
  font-size:12px;
  color:rgba(255,255,255,0.6);
  margin-top:12px;
}

@media (max-width:520px){.wrap{padding:16px}}
.confetti{position:absolute;pointer-events:none;inset:0}