/* ==========================================================================
   WIN MODAL — PREMIUM ("Indique e Ganhe" brand system)
   Full-screen viewport overlay, crisp contrast text, no broken images.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --void:        #04120a;
  --bg-deep:     #081f10;
  --surface:     #0f2a16;
  --surface-2:   #163a1d;
  --brick-edge:  #2c5c33;
  --brick-edge-lit: #3f7a47;

  --gold:        #ffd23f;
  --gold-deep:   #d99a1c;
  --gold-shadow: #7a5308;

  --neon:        #39ff8a;
  --neon-dim:    #1f7a49;

  --brick-blue:  #2f6fed;
  --brick-red:   #e5384a;

  --ivory:       #f5f2e6;
  --text:        #f6f7ef;
  --text-dim:    #9fc0a4;

  --radius-lg: 26px;
  --radius-sm: 12px;

  --font-display: "Baloo 2", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* ---------------------------------------------------------------------- */
/* FORCE FULL-SCREEN OVERLAY ON DESKTOP AND MOBILE                         */
/* ---------------------------------------------------------------------- */

body .modal, html .modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(4, 18, 10, 0.88) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  margin: 0 !important;
  padding: 20px !important;
  box-sizing: border-box !important;
}

/* Drifting spark background */
body .modal::before {
  content: "";
  position: fixed;
  inset: -10%;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,210,63,.55), transparent 60%),
    radial-gradient(2px 2px at 80% 30%, rgba(57,255,138,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 75%, rgba(255,210,63,.4), transparent 60%),
    radial-gradient(1.5px 1.5px at 30% 85%, rgba(57,255,138,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 65%, rgba(255,255,255,.3), transparent 60%);
  animation: spark-drift 9s ease-in-out infinite alternate;
}
@keyframes spark-drift{
  from{ transform: translateY(0) scale(1); opacity:.9; }
  to{ transform: translateY(-14px) scale(1.03); opacity:.55; }
}

/* ---------------------------------------------------------------------- */
/* PLAQUE CARD SHELL                                                      */
/* ---------------------------------------------------------------------- */

.result-modal {
  position: relative !important;
  width: min(400px, 92vw) !important;
  max-width: 400px !important;
  margin: auto !important;
  padding: 46px 32px 32px !important;
  border-radius: var(--radius-lg) !important;
  text-align: center !important;
  color: var(--text) !important;
  background: linear-gradient(180deg, var(--surface-2), var(--surface) 65%) !important;
  border: 2px solid var(--brick-edge) !important;
  box-shadow:
    0 0 0 6px rgba(4,18,10,.6),
    0 0 60px rgba(57,255,138,.14),
    0 30px 60px -20px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  overflow: hidden !important;
  animation: plaque-in .5s cubic-bezier(.2,.9,.25,1.2) both !important;
  z-index: 1000000 !important;
}

@keyframes plaque-in{
  from{ opacity:0; transform: translateY(18px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* Brick stud top strip */
.result-modal::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 22px !important;
  background:
    radial-gradient(circle at 50% 40%, var(--gold) 0 4px, transparent 4.5px) repeat-x,
    linear-gradient(180deg, var(--gold-deep), var(--gold-shadow)) !important;
  background-size: 34px 22px, 100% 100% !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.35) !important;
}

/* Hide broken banner image */
.result-modal img, .result-modal--win img {
  display: none !important;
}

/* ---------------------------------------------------------------------- */
/* TROPHY BADGE                                                           */
/* ---------------------------------------------------------------------- */

.win-trophy{
  position: relative !important;
  z-index: 1 !important;
  width: 84px !important;
  height: 84px !important;
  margin: 6px auto 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 38px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 35% 30%, #ffe98a, var(--gold) 55%, var(--gold-deep) 100%) !important;
  box-shadow:
    0 0 0 4px var(--void),
    0 0 0 7px var(--gold-deep),
    0 0 28px rgba(255,210,63,.55) !important;
  animation: badge-pop .55s .1s cubic-bezier(.3,1.4,.4,1) both !important;
}
@keyframes badge-pop{
  from{ transform: scale(.4) rotate(-12deg); opacity:0; }
  to{ transform: scale(1) rotate(0); opacity:1; }
}

.win-trophy::before{
  content:"" !important;
  position: absolute !important;
  inset: -34px !important;
  z-index: -1 !important;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(255,210,63,.35) 4deg, transparent 10deg,
    transparent 40deg, rgba(255,210,63,.35) 44deg, transparent 50deg,
    transparent 80deg, rgba(255,210,63,.35) 84deg, transparent 90deg,
    transparent 120deg, rgba(255,210,63,.35) 124deg, transparent 130deg,
    transparent 160deg, rgba(255,210,63,.35) 164deg, transparent 170deg,
    transparent 200deg, rgba(255,210,63,.35) 204deg, transparent 210deg,
    transparent 240deg, rgba(255,210,63,.35) 244deg, transparent 250deg,
    transparent 280deg, rgba(255,210,63,.35) 284deg, transparent 290deg,
    transparent 320deg, rgba(255,210,63,.35) 324deg, transparent 330deg) !important;
  animation: rays-spin 12s linear infinite !important;
}
@keyframes rays-spin{ to{ transform: rotate(360deg); } }

/* ---------------------------------------------------------------------- */
/* TYPOGRAPHY & VALUE                                                     */
/* ---------------------------------------------------------------------- */

.result-modal h2{
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 2px !important;
  font-family: var(--font-display) !important;
  font-weight: 800 !important;
  font-size: 28px !important;
  letter-spacing: .3px !important;
  color: var(--ivory) !important;
  text-shadow: 0 2px 0 rgba(0,0,0,.4) !important;
}

.win-note-top{
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 10px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--neon) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
}

.result-value.win{
  position: relative !important;
  z-index: 10 !important;
  display: inline-block !important;
  margin: 6px auto 16px !important;
  padding: 8px 24px !important;
  font-family: var(--font-display) !important;
  font-weight: 900 !important;
  font-size: 38px !important;
  line-height: 1.1 !important;
  
  /* CRITICAL FIX: Reset transparent text fill and background clip from index-CeLeKf3F.css */
  -webkit-text-fill-color: #04120a !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: #04120a !important;
  
  background: linear-gradient(180deg, #ffe98a, var(--gold) 55%, var(--gold-deep)) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.3) inset,
    0 10px 24px -8px rgba(255,210,63,.55) !important;
  min-height: 48px !important;
  text-shadow: none !important;
  filter: none !important;
}

.win-note{
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 24px !important;
  padding: 0 6px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--text-dim) !important;
}

/* ---------------------------------------------------------------------- */
/* BUTTON ACTIONS                                                         */
/* ---------------------------------------------------------------------- */

.win-actions{
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.btn{
  padding: 15px 20px !important;
  border-radius: var(--radius-sm) !important;
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: .2px !important;
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease !important;
}

.btn-accent{
  color: var(--void) !important;
  background: linear-gradient(180deg, #4dffa0, var(--neon) 55%, var(--neon-dim)) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 10px 22px -8px rgba(57,255,138,.55) !important;
  border: none !important;
}

.btn-ghost{
  color: var(--text) !important;
  background: transparent !important;
  border: 1.5px solid var(--brick-edge-lit) !important;
}

/* ---------------------------------------------------------------------- */
/* CONFETTI PIECES                                                        */
/* ---------------------------------------------------------------------- */

.win-confetti-piece{
  position: absolute !important;
  top: -20px !important;
  left: calc(6% + (var(--i) * 11%)) !important;
  width: 10px !important;
  height: 10px !important;
  background: var(--gold) !important;
  opacity: .9 !important;
  border-radius: 2px !important;
  animation: confetti-fall 2.6s ease-in calc(var(--i) * .12s) infinite !important;
}
.win-confetti-piece:nth-child(5n+1){ background: var(--gold) !important; }
.win-confetti-piece:nth-child(5n+2){ background: var(--neon) !important; border-radius: 50% !important; }
.win-confetti-piece:nth-child(5n+3){ background: var(--brick-blue) !important; }
.win-confetti-piece:nth-child(5n+4){ background: var(--brick-red) !important; border-radius: 50% !important; }
.win-confetti-piece:nth-child(5n+5){ background: var(--ivory) !important; }

@keyframes confetti-fall{
  0%{ transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10%{ opacity: 1; }
  100%{ transform: translateY(340px) rotate(340deg); opacity: 0; }
}

@media (max-width: 420px){
  .result-modal{ padding: 40px 22px 26px !important; }
  .result-value.win{ font-size: 32px !important; }
}