:root {
  --blue: #2457f5;
  --blue-2: #347cff;
  --cyan: #27b7df;
  --navy: #071b49;
  --navy-2: #123a8a;
  --gold: #ffc83d;
  --gold-2: #ff9f1c;
  --white: #ffffff;
  --muted: #6177a8;
  --line: #dbe7ff;
  --success: #16a34a;
  --danger: #dc2626;
  --shadow: 0 24px 70px rgba(20, 68, 151, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Poppins", sans-serif;
  color: var(--navy);
  background:
    radial-gradient(circle at 7% 8%, rgba(36,87,245,.28), transparent 19rem),
    radial-gradient(circle at 94% 20%, rgba(39,183,223,.28), transparent 22rem),
    linear-gradient(135deg, #f8fbff 0%, #eef7ff 48%, #f7fcff 100%);
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(36,87,245,.25); outline-offset: 3px; }

#confettiCanvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100; }
.page-shell { width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 30px 0 26px; }
.brand { display: flex; justify-content: center; margin-bottom: 18px; }
.brand-logo-link { display: inline-flex; }
.brand-logo { width: clamp(170px, 20vw, 240px); height: auto; display: block; }

.game-card, .sponsor-section {
  position: relative;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 34px;
  background: rgba(255,255,255,.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.game-card { padding: clamp(26px, 5vw, 54px); overflow: hidden; }
.game-card::before { content:""; position:absolute; inset:0 0 auto; height:6px; background:linear-gradient(90deg,var(--blue),var(--cyan),var(--navy)); }
.intro { text-align: center; margin-bottom: 28px; }
.eyebrow { display:inline-flex; padding:8px 16px; border-radius:999px; background:#eaf1ff; color:var(--blue); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.intro h1 { margin:14px 0 4px; font-size:clamp(2rem,5vw,3.25rem); line-height:1.05; letter-spacing:-.055em; }
.intro p { margin:0; color:var(--muted); font-size:clamp(.95rem,2vw,1.08rem); }

.player-fields { width:min(720px,100%); margin:0 auto 36px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.input-field label { display:block; margin:0 0 8px 4px; font-size:.9rem; font-weight:700; }
.input-field label span:not(.required-mark) { color:#8a9bc1; font-weight:500; }
.required-mark { color:var(--danger); }
.input-field input { width:100%; min-height:60px; border:1px solid #cbdcff; border-radius:18px; padding:0 18px; color:var(--navy); background:rgba(255,255,255,.96); box-shadow:0 10px 28px rgba(36,87,245,.06); transition:.2s ease; }
.input-field input:hover { border-color:#9bbaff; }
.input-field input:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(36,87,245,.1); }
.input-field input[aria-invalid="true"] { border-color:var(--danger); box-shadow:0 0 0 4px rgba(220,38,38,.09); }
.field-error { display:block; min-height:20px; margin:6px 4px 0; color:var(--danger); font-size:.78rem; font-weight:600; }

.wheel-area { text-align:center; }
.wheel-stage { position:relative; width:min(610px,92vw); margin:8px auto 26px; padding-top:20px; }
.wheel-frame { position:relative; width:100%; aspect-ratio:1; padding:clamp(12px,2vw,20px); border-radius:50%; background:linear-gradient(145deg,#80dfff 0%,#2868ff 50%,#09245e 100%); box-shadow:0 28px 70px rgba(20,77,185,.28), inset 0 0 0 5px rgba(255,255,255,.88), inset 0 0 0 12px rgba(255,255,255,.18); }
.wheel-frame::before { content:""; position:absolute; inset:2.8%; border:2px solid rgba(255,255,255,.78); border-radius:50%; pointer-events:none; z-index:2; }
.wheel { position:relative; width:100%; height:100%; border-radius:50%; overflow:hidden; background:conic-gradient(from -20deg,
  #2457f5 0 40deg,
  #ffffff 40deg 80deg,
  #27b7df 80deg 120deg,
  #ffffff 120deg 160deg,
  #123a8a 160deg 200deg,
  #ffffff 200deg 240deg,
  #347cff 240deg 280deg,
  #ffffff 280deg 320deg,
  #22a9d5 320deg 360deg);
  box-shadow:inset 0 0 32px rgba(4,27,75,.2); will-change:transform; }
.wheel::after { content:""; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 34% 25%,rgba(255,255,255,.4),transparent 25%); pointer-events:none; }
.wheel-numbers { position:absolute; inset:0; }
.wheel-number { position:absolute; z-index:1; width:52px; height:52px; display:grid; place-items:center; color:#fff; font-size:clamp(1.45rem,5vw,2.35rem); font-weight:800; text-shadow:0 2px 8px rgba(0,20,70,.25); }
.wheel-number.light { color:var(--navy); text-shadow:none; }

.pointer { position:absolute; z-index:10; top:-5px; left:50%; width:clamp(42px,9vw,62px); transform:translateX(-50%); filter:drop-shadow(0 9px 10px rgba(9,36,94,.3)); }
.pointer svg { width:100%; fill:var(--blue); }
.pointer-glow { position:absolute; inset:-8px; border-radius:50%; background:rgba(36,87,245,.38); filter:blur(12px); animation:pulse 1.8s infinite; }
@keyframes pulse { 50% { transform:scale(1.16); opacity:.55; } }

.wheel-center.spin-button { position:absolute; z-index:6; top:50%; left:50%; width:clamp(108px,25%,150px); aspect-ratio:1; transform:translate(-50%,-50%); border:clamp(7px,1.4vw,11px) solid rgba(255,255,255,.95); border-radius:50%; padding:0; min-width:0; height:auto; display:grid; place-items:center; cursor:pointer; overflow:hidden; isolation:isolate; background:linear-gradient(145deg,#ffe986 0%,var(--gold) 48%,var(--gold-2) 100%); color:#30137b; box-shadow:0 16px 28px rgba(6,29,83,.35), inset 0 4px 8px rgba(255,255,255,.65), inset 0 -7px 13px rgba(207,111,0,.25); transition:transform .18s ease, filter .18s ease, box-shadow .18s ease; }
.wheel-center.spin-button:hover { transform:translate(-50%,-50%) scale(1.055); filter:saturate(1.06); box-shadow:0 20px 36px rgba(6,29,83,.38), inset 0 4px 8px rgba(255,255,255,.65), inset 0 -7px 13px rgba(207,111,0,.25); }
.wheel-center.spin-button:active { transform:translate(-50%,-50%) scale(.98); }
.wheel-center.spin-button:disabled { cursor:not-allowed; filter:grayscale(.25); opacity:.78; }
.button-shine { position:absolute; z-index:-1; inset:-40% 45% -40% -45%; transform:rotate(20deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:shine 2.3s infinite; }
@keyframes shine { 0% { translate:-180% 0; } 70%,100% { translate:260% 0; } }
.button-label { font-size:clamp(1.45rem,4vw,2.35rem); line-height:1; font-weight:900; letter-spacing:.02em; }
.status-text { min-height:24px; margin:0; color:var(--muted); font-weight:600; }
.status-text.error { color:var(--danger); }

.sponsor-section { margin-top:22px; padding:26px; text-align:center; }
.sponsor-kicker { margin:0; color:var(--cyan); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.sponsor-section h2 { margin:4px 0 18px; font-size:1.35rem; }
.sponsor-list { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.sponsor-item { min-width:150px; min-height:82px; padding:14px 18px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 9px 24px rgba(27,71,151,.08); color:var(--navy); font-weight:700; text-decoration:none; }
.sponsor-item img { max-width:130px; max-height:54px; object-fit:contain; }
footer { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; padding:22px 8px 0; color:#7890bd; font-size:.86rem; }
footer a { color:var(--blue); font-weight:700; text-decoration:none; }

.loading-overlay { position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; background:rgba(3,18,53,.7); backdrop-filter:blur(8px); opacity:0; visibility:hidden; transition:.2s; }
.loading-overlay.show { opacity:1; visibility:visible; }
.loader-card { width:min(360px,100%); padding:34px; border-radius:26px; background:#fff; text-align:center; box-shadow:var(--shadow); }
.loader-card strong,.loader-card span { display:block; }
.loader-card span { margin-top:7px; color:var(--muted); font-size:.85rem; }
.loader-ring { width:54px; height:54px; margin:0 auto 18px; border:6px solid #e8efff; border-top-color:var(--blue); border-radius:50%; animation:spin .85s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.modal { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:22px; opacity:0; visibility:hidden; transition:.2s; }
.modal.show { opacity:1; visibility:visible; }
.modal-backdrop { position:absolute; inset:0; background:rgba(7,16,38,.72); backdrop-filter:blur(8px); }
.modal-card { position:relative; z-index:1; width:min(660px,100%); max-height:calc(100vh - 44px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:clamp(28px,5vw,48px); border-radius:30px; background:#fff; text-align:center; box-shadow:0 34px 90px rgba(0,18,62,.38); }
.modal-close-x { position:sticky; top:0; float:right; z-index:5; width:44px; height:44px; margin:-10px -10px 0 0; border:0; border-radius:50%; background:#eef4ff; color:#6177a8; font-size:1.7rem; cursor:pointer; }
.win-badge { font-size:3rem; }
.congrats { margin:8px 0; color:var(--blue); font-weight:900; letter-spacing:.09em; }
.modal-card h2 { margin:0 0 24px; font-size:clamp(1.5rem,4vw,2.15rem); }
.coupon-box { position:relative; min-height:190px; padding:30px 26px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:2px dashed rgba(255,255,255,.65); border-radius:24px; color:#fff; background:linear-gradient(135deg,var(--blue),var(--cyan)); box-shadow:0 18px 35px rgba(36,87,245,.25); }
.coupon-box small { font-weight:800; letter-spacing:.15em; }
.coupon-box strong { margin:10px 0; font-size:clamp(2rem,8vw,3.35rem); line-height:1.05; word-break:break-word; }
.coupon-business { font-weight:700; }
.coupon-cut { position:absolute; top:50%; width:30px; height:30px; border-radius:50%; background:#fff; transform:translateY(-50%); }
.coupon-cut-left { left:-16px; }.coupon-cut-right { right:-16px; }
.copy-button,.close-button { width:100%; min-height:60px; border:0; border-radius:18px; font-weight:800; cursor:pointer; transition:.2s; }
.copy-button { margin-top:18px; color:#fff; background:linear-gradient(135deg,var(--navy),var(--blue)); box-shadow:0 12px 24px rgba(7,27,73,.18); }
.copy-button:hover,.close-button:hover { transform:translateY(-2px); }
.copy-status { min-height:24px; color:var(--success); font-weight:700; }
.claim-section { margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
.claim-section h3 { margin:0 0 6px; font-size:1.35rem; }
.claim-section > p { margin:0 0 20px; color:var(--muted); }
.social-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.social-button { min-height:70px; padding:12px 16px; border-radius:17px; display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; text-align:left; box-shadow:0 10px 20px rgba(10,32,88,.12); transition:.2s; }
.social-button:hover { transform:translateY(-2px); }
.social-button strong,.social-button small { display:block; }.social-button small { opacity:.9; }
.social-icon { font-size:1.35rem; }
.whatsapp { background:linear-gradient(135deg,#15b94f,#2bd56a); }.instagram { background:linear-gradient(135deg,#ff6a43,#d629b7,#7b20e8); }.facebook { background:linear-gradient(135deg,#1877f2,#2457f5); }.youtube { background:linear-gradient(135deg,#f52222,#ff0000); }
.send-code { margin-top:18px; padding:18px; border:2px dashed #9ebcff; border-radius:18px; background:#f5f9ff; }
.send-code span,.send-code strong { display:block; }.send-code span { color:var(--navy-2); font-weight:700; }.send-code strong { margin-top:6px; color:var(--blue); font-size:1.8rem; word-break:break-word; }
.close-button { margin-top:20px; color:var(--navy); background:#eaf1ff; }

@media (max-width: 720px) {
  .page-shell { width:min(100% - 20px,1120px); padding-top:18px; }
  .brand-logo { width:170px; }
  .game-card { border-radius:26px; padding:28px 18px; }
  .player-fields { grid-template-columns:1fr; gap:10px; margin-bottom:28px; }
  .input-field input { min-height:56px; }
  .wheel-stage { width:min(95vw,520px); }
  .social-grid { grid-template-columns:1fr; }
  .modal { padding:10px; }
  .modal-card { max-height:calc(100vh - 20px); border-radius:24px; padding:26px 18px; }
}

@media (max-width: 420px) {
  .brand-logo { width:150px; }
  .intro h1 { font-size:2rem; }
  .wheel-frame { padding:10px; }
  .wheel-number { width:42px; height:42px; font-size:1.35rem; }
  .wheel-center.spin-button { width:104px; }
  .button-label { font-size:1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* Shared sponsor presentation: home page and result popup */
.modal-sponsor-section {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  text-align: center;
}
.modal-sponsor-section h3 {
  margin: 4px 0 16px;
  font-size: 1.18rem;
}
.sponsor-list-modal {
  gap: 10px;
}
.sponsor-list-modal .sponsor-item {
  min-width: 128px;
  min-height: 68px;
  padding: 10px 14px;
  border-radius: 15px;
  font-size: .88rem;
}
.sponsor-list-modal .sponsor-item img {
  max-width: 108px;
  max-height: 44px;
}
.sponsor-item {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
a.sponsor-item:hover {
  transform: translateY(-2px);
  border-color: #a9c2ff;
  box-shadow: 0 13px 28px rgba(27,71,151,.14);
}
.sponsor-empty {
  margin: 0;
  color: var(--muted);
  font-size: .9rem;
}
@media (max-width: 560px) {
  .sponsor-section { padding: 22px 16px; }
  .sponsor-list { gap: 10px; }
  .sponsor-item { min-width: 125px; min-height: 68px; padding: 10px 12px; }
  .sponsor-item img { max-width: 105px; max-height: 44px; }
  .sponsor-list-modal .sponsor-item { min-width: 112px; }
}


/* Per-coupon promoted GroDeals link */
.watch-deal-section {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid #c9dcff;
  border-radius: 22px;
  background: linear-gradient(145deg, #f7fbff, #eaf3ff);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.watch-deal-badge {
  display: inline-flex;
  padding: 6px 11px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.watch-deal-section h3 { margin: 10px 0 6px; font-size: 1.3rem; }
.watch-deal-section > p { margin: 0 0 16px; color: var(--muted); font-size: .92rem; }
.watch-deal-button {
  width: 100%;
  min-height: 60px;
  border: 0;
  border-radius: 17px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--cyan));
  box-shadow: 0 13px 26px rgba(36,87,245,.22);
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease;
}
.watch-deal-button:hover { transform: translateY(-2px); box-shadow: 0 17px 31px rgba(36,87,245,.28); }
.watch-deal-button span { margin-right: 7px; }
.watch-deal-status { min-height: 22px; margin: 12px 0 0 !important; color: var(--success) !important; font-size: .82rem !important; font-weight: 700; }