:root {
  --bg: #06060f;
  --panel: rgba(20, 20, 40, 0.55);
  --stroke: rgba(140, 140, 255, 0.18);
  --neon: #7b5cff;
  --neon2: #14e0ff;
  --win: #37f5a0;
  --lose: #ff5470;
  --text: #eef0ff;
  --muted: #9aa0c8;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  background: radial-gradient(1200px 800px at 50% -10%, #1a1442 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
}

.stars {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 20% 30%, #fff 50%, transparent),
    radial-gradient(1px 1px at 70% 60%, #cbd 50%, transparent),
    radial-gradient(1.5px 1.5px at 40% 80%, #fff 50%, transparent),
    radial-gradient(1px 1px at 85% 20%, #aef 50%, transparent),
    radial-gradient(1px 1px at 55% 15%, #fff 50%, transparent);
  opacity: 0.5;
}

.app {
  position: relative; z-index: 1;
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.screen {
  display: none;
  width: 100%; max-width: 440px;
  flex-direction: column; align-items: center; gap: 18px;
  text-align: center;
  animation: rise .45s cubic-bezier(.2,.8,.2,1);
}
.screen.active { display: flex; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.logo {
  font-weight: 800; letter-spacing: 3px; font-size: 15px; color: var(--muted);
}
.logo span { color: var(--neon2); margin-left: 6px; }

h1 { font-size: clamp(30px, 8vw, 44px); font-weight: 800; line-height: 1.05; }
h2 { font-size: 26px; font-weight: 700; }
.lead-txt { color: var(--muted); font-size: 17px; line-height: 1.5; }
.lead-txt strong { color: var(--text); }

.btn {
  border: 0; border-radius: 16px; padding: 16px 22px;
  font-size: 16px; font-weight: 700; cursor: pointer;
  width: 100%; transition: transform .12s ease, box-shadow .2s ease, background .2s;
  color: var(--text);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.btn-primary {
  background: linear-gradient(135deg, var(--neon), var(--neon2));
  color: #07071a;
  box-shadow: 0 8px 30px rgba(123, 92, 255, .45);
}
.btn-action {
  background: var(--panel);
  border: 1px solid var(--stroke);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-action em { color: var(--neon2); font-style: normal; font-weight: 800; }
.btn-action.done { opacity: .5; }

form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.row { display: flex; gap: 12px; }
input {
  width: 100%; padding: 15px 16px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--stroke);
  color: var(--text); font-size: 16px; backdrop-filter: blur(12px);
}
input::placeholder { color: var(--muted); }
input:focus { outline: none; border-color: var(--neon); }
input[type="date"] { color-scheme: dark; }
.field-label { text-align: left; font-size: 13px; color: var(--muted); margin: 2px 0 -6px 4px; }

.consent { display: flex; gap: 10px; text-align: left; font-size: 13px; color: var(--muted); align-items: flex-start; }
.consent input { width: auto; margin-top: 2px; }

.form-error { color: var(--lose); font-size: 14px; min-height: 18px; }

.chances-badge { color: var(--muted); font-size: 15px; }
.chances-badge strong { color: var(--neon2); font-size: 20px; }
.actions { display: flex; flex-direction: column; gap: 12px; width: 100%; }

#lane {
  width: 100%; max-width: 360px; aspect-ratio: 480/640; height: auto;
  border-radius: 20px;
  background: linear-gradient(180deg, #0b0a1f 0%, #050414 100%);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 60px rgba(123, 92, 255, .12);
}

.lane-video { width: 100%; max-width: 360px; aspect-ratio: 480/640; height: auto;
  border-radius: 20px; border: 1px solid var(--stroke); object-fit: cover; background: #000; }

#result-title.win { color: var(--win); text-shadow: 0 0 30px rgba(55,245,160,.6); }
#result-title.lose { color: var(--lose); }
#result-sub { color: var(--muted); font-size: 17px; }
#result-actions { display: flex; flex-direction: column; gap: 12px; width: 100%; margin-top: 8px; }