:root {
  --bg: #070a13; --bg-2: #0e1424; --card: #121a2f; --card-2: #0f1629;
  --text: #e7eaf6; --muted: #9aa4bf; --accent: #7c5cff; --accent-2: #5dd6ff;
  --ok: #2dd4bf; --warn: #f59e0b; --danger: #ef4444; --ring: rgba(124,92,255,.35);
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:radial-gradient(1200px 700px at 10% -10%, #141a33 0%, var(--bg) 60%), linear-gradient(180deg, #0b1120, #0b0f19);
  color:var(--text)}
.container{max-width:1160px;margin:0 auto;padding:20px}
.hero{padding-top:32px;padding-bottom:8px}
.hero-text h1{font-size:clamp(28px,3vw,44px);margin:10px 0;letter-spacing:-.02em}
.hero-text p{color:var(--muted);margin:0;font-size:16px}
.grid{display:grid;grid-template-columns:minmax(280px,1fr) minmax(280px,1fr);gap:22px;align-items:start}
.card{background:linear-gradient(180deg,var(--card),var(--card-2));border:1px solid #1c2546;border-radius:16px;padding:20px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02)}
.card:focus-within{outline:2px solid var(--ring)}
.field{margin-bottom:14px} label{display:block;margin:10px 0 6px;font-weight:600}
input[type="text"],input[type="tel"],select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #2a355a;background:var(--bg-2);color:var(--text);outline:none;box-shadow:0 1px 0 rgba(255,255,255,.02)}
input:focus,select:focus{border-color:#394a7a;box-shadow:0 0 0 4px rgba(61,116,242,.18)}
.consent{display:flex;gap:10px;align-items:start;margin-top:12px;font-size:14px;color:var(--muted)}

/* ===== Beautiful primary button ===== */
button{
  --btn-glow: rgba(124,92,255,.35);
  --btn-start: #7c5cff;
  --btn-end:   #5dd6ff;
  margin-top:14px;padding:12px 18px;border:none;border-radius:12px;color:#fff;font-weight:800;letter-spacing:.2px;cursor:pointer;
  background:linear-gradient(90deg,var(--btn-start),var(--btn-end));
  box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 0px transparent,inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .15s ease,filter .2s ease,box-shadow .25s ease
}
button:hover:not([disabled]){filter:brightness(1.08) saturate(1.05);box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 6px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.12)}
button:active:not([disabled]){transform:translateY(1px);filter:brightness(.98)}
button[disabled]{opacity:.55;cursor:not-allowed;filter:grayscale(.3);box-shadow:none}

.muted{color:var(--muted)} .small{font-size:13px}

/* ===== Wheel & pointer ===== */
.wheel-wrap{position:relative;width:min(520px,90vw);height:min(520px,90vw);margin:2px auto 12px}
.pointer{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:16px solid #ffb020;filter:drop-shadow(0 3px 6px rgba(0,0,0,.45))}
.pointer::after{content:'';position:absolute;left:50%;top:14px;transform:translateX(-50%);width:20px;height:8px;border-radius:4px;background:radial-gradient(circle at 50% 50%, rgba(255,176,32,.65), transparent 70%);pointer-events:none}
#wheelCanvas{width:100%;height:100%;display:block;border-radius:50%;box-shadow:inset 0 0 16px rgba(0,0,0,.5),0 20px 60px rgba(0,0,0,.3);background:#0e1424}
.result{text-align:center;font-weight:800;padding:6px 0;font-size:18px}

/* Segment list */
.segments summary{cursor:pointer}
.segment-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;padding-left:18px}
.segment-list li{list-style:disc;display:flex;gap:10px;align-items:center}
.segment-list img{width:36px;height:36px;object-fit:cover;border-radius:8px;border:1px solid #273156}

/* ===== Prize preview (kept hidden by default) ===== */
.prize-media{display:grid;place-items:center;gap:8px;margin:14px auto}
#prizeImg{width:180px;height:180px;object-fit:cover;border-radius:14px;border:1px solid #28325a;box-shadow:0 10px 30px rgba(0,0,0,.35);background:#0e1424}
.caption{color:var(--muted);font-size:14px}

.footer{padding-top:8px;padding-bottom:26px}

/* ===== Modal styles ===== */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1000}
.modal[aria-hidden="false"]{display:flex}
.modal__overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.modal__card{position:relative;z-index:1;width:min(520px,92vw);background:linear-gradient(180deg,#121a2f,#0f1629);border:1px solid #1c2546;border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:hidden;animation:popIn .18s ease-out}
@keyframes popIn{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}
.modal__header{padding:16px 18px;border-bottom:1px solid #1f2745}
.modal__header h3{margin:0;letter-spacing:-.2px}
.modal__body{padding:18px;display:grid;place-items:center;gap:10px}
.modal__body img{width:180px;height:180px;object-fit:cover;border-radius:14px;border:1px solid #28325a;background:#0e1424;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.modal__text{margin:0;font-size:16px}
.modal__footer{padding:14px 18px;border-top:1px solid #1f2745;display:flex;justify-content:flex-end;gap:10px}
.btn-primary{--btn-start:#22c55e;--btn-end:#16a34a;--btn-glow:rgba(34,197,94,.25);background:linear-gradient(90deg,var(--btn-start),var(--btn-end));padding:10px 16px;color:#fff;font-weight:800;border:none;border-radius:10px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.35),0 0 0 0px transparent,inset 0 1px 0 rgba(255,255,255,.08);transition:transform .15s ease,filter .2s ease,box-shadow .25s ease}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 6px var(--btn-glow),inset 0 1px 0 rgba(255,255,255,.12)}
.btn-primary:active{transform:translateY(1px)}

@media (max-width:960px){.grid{grid-template-columns:1fr}.hero{padding-top:24px}}