:root {
  --bg: #0b0613;
  --bg-2: #150a24;
  --pink: #ff2d78;
  --purple: #a13df0;
  --gold: #ffc43d;
  --gold-2: #ff9a1f;
  --gold-pale: #fff3cf;
  --text: #f6eefc;
  --muted: #9f90b8;
  /* --tg-top / --tg-bottom sont posees par app.js quand Telegram les fournit
     (mode plein ecran) ; sinon on retombe sur les marges natives du systeme. */
  --safe-top: var(--tg-top, env(safe-area-inset-top, 0px));
  --safe-bottom: var(--tg-bottom, env(safe-area-inset-bottom, 0px));
}

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

/* l'attribut hidden doit toujours gagner sur les display: grid/flex ci-dessous */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; overflow: hidden; }

body {
  background: radial-gradient(125% 85% at 50% -5%, var(--bg-2) 0%, var(--bg) 62%);
  color: var(--text);
  font-family: Outfit, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.icon { display: block; flex: none; }

/* ---------- fond anime ---------- */

.aurora { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.aurora span {
  position: absolute;
  width: 62vmax; height: 62vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .3;
  animation: drift 20s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: var(--pink); top: -26vmax; left: -22vmax; }
.aurora span:nth-child(2) { background: var(--purple); top: 8vmax; right: -30vmax; animation-delay: -7s; }
.aurora span:nth-child(3) { background: #2b1b6b; bottom: -32vmax; left: 8vmax; animation-delay: -13s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4vmax, 6vmax, 0) scale(1.14); }
}

/* ---------- mise en page ---------- */

.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: calc(14px + var(--safe-top)) 16px calc(18px + var(--safe-bottom));
  max-width: 520px;
  margin: 0 auto;
}

.head { text-align: center; flex: 0 0 auto; }

.title {
  margin: 0;
  font-size: clamp(25px, 7.4vw, 35px);
  font-weight: 800;
  letter-spacing: -0.025em;
  background: linear-gradient(100deg, #fff 0%, var(--gold) 46%, var(--pink) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}

@keyframes shimmer {
  from { background-position: 0% 50%; }
  to { background-position: 220% 50%; }
}

.subtitle {
  margin: 7px 0 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------- la roue ---------- */

.stage {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
}

.glow {
  position: absolute;
  width: min(104vw, 62vh, 500px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 160, 60, .2) 0%, rgba(255, 45, 120, .12) 42%, transparent 68%);
  pointer-events: none;
}

#wheel {
  position: relative;
  width: min(90vw, 54vh, 430px);
  height: auto;
  aspect-ratio: 1;
  display: block;
  filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .55));
}

.pointer {
  position: absolute;
  top: calc(50% - min(45vw, 27vh, 215px) - 7px);
  left: 50%;
  width: 26px;
  height: 34px;
  margin-left: -13px;
  background: linear-gradient(178deg, var(--gold-pale) 0%, var(--gold) 42%, #e08c12 100%);
  clip-path: polygon(50% 100%, 0% 8%, 12% 0%, 88% 0%, 100% 8%);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .65));
  z-index: 3;
  transform-origin: 50% 12%;
}

.pointer::after {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 7px; height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7a5520, #3a2508);
}

.pointer.tick { animation: tick .13s ease-out; }
@keyframes tick {
  0% { transform: rotate(0deg); }
  40% { transform: rotate(-12deg); }
  100% { transform: rotate(0deg); }
}

.hub {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(21vw, 12.4vh, 100px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  padding: 0;
  background: conic-gradient(from -90deg,
    #6b4a18, #e8c266 8%, #fff3cf 16%, #c79a3c 26%, #7a5520 38%,
    #e8c266 50%, #fff3cf 62%, #b98c33 74%, #6b4a18 86%, #e8c266 94%, #6b4a18 100%);
  box-shadow: 0 7px 20px rgba(0, 0, 0, .55);
  z-index: 2;
  cursor: pointer;
  transition: transform .15s ease;
}
.hub:active:not([disabled]) { transform: translate(-50%, -50%) scale(.94); }
.hub[disabled] { cursor: default; }

.hub-ring {
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 28%, #33184d, #0f0619 72%);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 224, 150, .3);
}

.hub-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: min(4.6vw, 2.7vh, 22px);
  letter-spacing: .06em;
  color: var(--gold);
  text-shadow: 0 1px 6px rgba(255, 180, 40, .55);
}

/* ---------- panneau bas ---------- */

.panel { width: 100%; flex: 0 0 auto; display: grid; gap: 13px; justify-items: center; }

.tickets { display: flex; gap: 8px; }

.ticket {
  width: 36px; height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  transition: background .3s ease, box-shadow .3s ease;
}
.ticket.on {
  background: linear-gradient(90deg, var(--gold), var(--pink));
  box-shadow: 0 0 12px rgba(255, 196, 61, .55);
}

.spin-btn {
  width: 100%;
  border: none;
  border-radius: 18px;
  padding: 17px 20px;
  font-family: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #35190a;
  background: linear-gradient(135deg, #ffe8a8, var(--gold) 38%, var(--gold-2));
  box-shadow: 0 10px 26px rgba(255, 154, 31, .32), inset 0 -3px 0 rgba(140, 74, 0, .28);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: transform .12s ease, opacity .2s ease;
}
.spin-btn::after {
  content: "";
  position: absolute;
  top: -60%; left: -30%;
  width: 38%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: rotate(18deg);
  animation: sweep 3.4s ease-in-out infinite;
}
@keyframes sweep {
  0%, 62% { left: -40%; }
  100% { left: 120%; }
}
.spin-btn:active:not([disabled]) { transform: scale(.98); }
.spin-btn[disabled] { opacity: .42; cursor: default; box-shadow: none; }
.spin-btn[disabled]::after { display: none; }

.spin-btn.win-state {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--purple));
  box-shadow: 0 10px 26px rgba(161, 61, 240, .38);
}

.hint { margin: 0; font-size: 13px; color: var(--muted); text-align: center; min-height: 18px; }

/* ---------- confettis ---------- */

.confetti {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 50; /* au-dessus de la feuille : les confettis pleuvent sur tout */
  opacity: 0;
  transition: opacity .4s ease;
}
.confetti.on { opacity: 1; }

/* ---------- feuille de resultat ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: end center;
  background: rgba(6, 2, 12, .74);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 28px 22px calc(22px + var(--safe-bottom));
  border-radius: 30px 30px 0 0;
  background: linear-gradient(180deg, #241238, #120722);
  border-top: 1px solid rgba(255, 224, 150, .22);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .6);
  text-align: center;
  animation: rise .35s cubic-bezier(.2, .9, .25, 1);
}
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }

.sheet-badge {
  width: 72px; height: 72px;
  margin: 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1);
}
.sheet-badge.win {
  color: #3a2000;
  background: linear-gradient(150deg, var(--gold-pale), var(--gold) 45%, var(--gold-2));
  border-color: rgba(255, 243, 207, .8);
  box-shadow: 0 0 34px rgba(255, 180, 40, .45);
}
.sheet-badge.loss { color: #8a7aa5; }
@keyframes pop { from { transform: scale(0); } to { transform: scale(1); } }

.sheet-title { margin: 15px 0 6px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sheet-text { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.45; }

.sheet-prize {
  margin: 18px 0 4px;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 196, 61, .14), rgba(255, 45, 120, .14));
  border: 1px solid rgba(255, 196, 61, .32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.sheet-prize-icon { display: grid; place-items: center; color: var(--gold); }
.sheet-prize-label { font-size: 19px; font-weight: 800; }

.sheet-btn {
  margin-top: 20px;
  width: 100%;
  border: none;
  border-radius: 16px;
  padding: 16px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  color: #35190a;
  background: linear-gradient(135deg, #ffe8a8, var(--gold) 38%, var(--gold-2));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.sheet-btn:active:not([disabled]) { transform: scale(.98); }
.sheet-btn[disabled] { opacity: .5; cursor: default; }

.sheet-close {
  margin-top: 10px;
  width: 100%;
  border: none;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--safe-bottom));
  transform: translateX(-50%);
  z-index: 60;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(22, 9, 36, .96);
  border: 1px solid rgba(255, 255, 255, .14);
  font-size: 14px;
  max-width: 88vw;
  text-align: center;
  animation: rise-toast .25s ease;
}
@keyframes rise-toast {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora span, .title, .spin-btn::after { animation: none; }
}

/* ==========================================================================
   Ecran de reclamation : page "acces VIP"
   ========================================================================== */

.claim {
  position: fixed;
  inset: 0;
  z-index: 55; /* au-dessus des confettis : le formulaire reste lisible */
  background: #0b0613;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .38s cubic-bezier(.2, .9, .25, 1), visibility 0s linear .38s;
}
.claim.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }

/* --- barre de profil, sur une seule ligne --- */

.claim-top {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: calc(11px + var(--safe-top)) 16px 11px;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  overflow: hidden;
}

.claim-cover {
  position: absolute;
  inset: 0;
  background: url('/img/alycia.jpg') center 30% / cover no-repeat;
  filter: blur(22px) saturate(1.2);
  transform: scale(1.3);
  opacity: .5;
}
.claim-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 6, 19, .55), rgba(11, 6, 19, .85));
}
.claim-top > *:not(.claim-cover) { position: relative; z-index: 1; }

.claim-back {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
}
.claim-back:active { transform: scale(.92); }
.claim-back svg { width: 18px; height: 18px; }

.avatar {
  position: relative;
  flex: none;
  display: block;
  width: 44px; height: 44px;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(from -60deg, var(--gold), var(--pink), var(--purple), var(--gold));
}
.avatar img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0b0613;
}
.avatar-dot {
  position: absolute;
  right: 0; bottom: 1px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #3ddc7f;
  border: 2px solid #0b0613;
}

.claim-who {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.claim-who b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.claim-who i {
  font-size: 11.5px;
  font-style: normal;
  color: #3ddc7f;
}

.vip-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px 6px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  color: #35190a;
  background: linear-gradient(135deg, var(--gold-pale), var(--gold) 45%, var(--gold-2));
}
.vip-pill span { display: grid; }
.vip-pill svg { width: 13px; height: 13px; }

/* --- corps --- */

.claim-body {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 20px calc(34px + var(--safe-bottom));
}

.claim-prize {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 13px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255, 196, 61, .12), rgba(255, 45, 120, .12));
  border: 1px solid rgba(255, 196, 61, .26);
}
.claim-prize-icon {
  width: 34px; height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #35190a;
  background: linear-gradient(150deg, var(--gold-pale), var(--gold) 48%, var(--gold-2));
}
.claim-prize-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.claim-prize-text i {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.claim-prize-text b { font-size: 15px; font-weight: 800; }

.claim-lead {
  margin: 16px 0 20px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
  color: #cdbde0;
}

/* --- zone du formulaire partenaire --- */

.form-wrap { min-height: 130px; }

.form-state {
  display: grid;
  place-items: center;
  gap: 12px;
  padding: 26px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.form-state p { margin: 0; }

.spinner {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: var(--gold);
  animation: spin 0.85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-retry {
  border: none;
  border-radius: 12px;
  padding: 11px 22px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #35190a;
  background: linear-gradient(135deg, #ffe8a8, var(--gold) 38%, var(--gold-2));
  cursor: pointer;
}

/* ==========================================================================
   Habillage du formulaire injecte par le script partenaire.
   Les !important sont necessaires : le script pose ses propres styles inline.
   ========================================================================== */

#selector-top, #selector-bottom, #selector-left, #selector-right {
  display: none !important;
}

/* Le script imbrique plusieurs conteneurs qui ajoutent leurs propres marges :
   on les neutralise pour que les champs s'alignent avec le reste de la page. */
.ptprelinker--box,
.ptprelinker--box > div,
.ptprelinker-content,
.ptprelinker-content-inner,
.ptprelinker-content-content,
.ptprelinker-register-form,
.ptprelinker-register-form > form,
.ptprelinker--box form {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  inset: auto !important;
  transform: none !important;
  box-sizing: border-box !important;
}

.ptprelinker-input,
#selector .ptprelinker-input,
input.ptprelinker-input,
input[type="email"].ptprelinker-input,
input[type="text"].ptprelinker-input,
input[type="password"].ptprelinker-input {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  background: rgba(255, 255, 255, .07) !important;
  border: 1.5px solid rgba(255, 255, 255, .14) !important;
  border-radius: 15px !important;
  padding: 15px 17px !important;
  color: #fff !important;
  font-family: Outfit, sans-serif !important;
  font-size: 15px !important;
  margin: 0 0 10px !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.ptprelinker-input:focus,
#selector .ptprelinker-input:focus {
  border-color: var(--gold) !important;
  background: rgba(255, 255, 255, .1) !important;
  box-shadow: 0 0 0 3px rgba(255, 196, 61, .18) !important;
}

.ptprelinker-input::placeholder { color: rgba(255, 255, 255, .42) !important; opacity: 1 !important; }

.ptprelinker-input-group { display: block !important; width: 100% !important; margin: 0 !important; }

/* --- case a cocher legale (age + CGU) --- */

.ptprelinker-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin: 6px 0 14px !important;
  padding: 0 2px !important;
  width: 100% !important;
}

.ptprelinker-input-checkbox,
input[type="checkbox"].ptprelinker-input-checkbox {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: none !important;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 1.5px solid rgba(255, 255, 255, .26) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .06) !important;
  cursor: pointer !important;
  transition: background .15s ease, border-color .15s ease !important;
}

.ptprelinker-input-checkbox:checked,
input[type="checkbox"].ptprelinker-input-checkbox:checked {
  border-color: transparent !important;
  background: #ffc43d url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2335190a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5 9.5 17 4 11.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat !important;
}

.ptprelinker-label-checkbox {
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .58) !important;
  font-family: Outfit, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.ptprelinker-label-checkbox a,
.ptprelinker-cgu-link,
#selector a.ptprelinker-cgu-link {
  color: var(--gold) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* --- bouton d'envoi --- */

.ptprelinker-buttons { display: block !important; width: 100% !important; margin: 0 !important; }

.ptprelinker-button,
.ptprelinker-button-success,
#selector .ptprelinker-button,
#selector input[type="submit"],
#selector button,
input.ptprelinker-button-success,
.ptprelinker--box button,
.ptprelinker--box input[type="submit"],
.ptprelinker-register-form button,
.ptprelinker-register-form input[type="submit"] {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 16px 24px !important;
  font-family: Outfit, sans-serif !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  letter-spacing: .01em !important;
  color: #35190a !important;
  background: linear-gradient(135deg, #ffe8a8, #ffc43d 38%, #ff9a1f) !important;
  box-shadow: 0 8px 22px rgba(255, 154, 31, .3) !important;
  cursor: pointer !important;
  text-transform: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.ptprelinker-button:active,
#selector input[type="submit"]:active,
#selector button:active,
.ptprelinker--box button:active { transform: scale(.98) !important; }

.ptprelinker-label:empty { display: none !important; }
.cgu-couple, .ptprelinker-checkbox.cgu-couple { display: none !important; }

.error-register {
  color: #ff6b6b !important;
  font-family: Outfit, sans-serif !important;
  font-size: 13px !important;
  margin: 8px 0 !important;
  text-align: center !important;
}