/* ==================================================================
   KONSEPT 7 - "Reward Multiplier / Kazanc Carki"  |  300 x 600 sabit
   Zemin gercek gece stadyum fotografi; uzerinde pie diagram cark.
   ================================================================== */

#stage { background: #0a0e10; }

.bg {
  position: absolute;
  inset: 0;
  background: url('../assets/bg.jpg') center top / cover no-repeat;
  filter: saturate(.55) brightness(.62) contrast(1.06);
}
.veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 30% at 50% 50%, rgba(0,150,70,.26), transparent 66%),
    linear-gradient(180deg, rgba(8,12,14,.5) 0%, rgba(8,12,14,.76) 28%, rgba(8,12,14,.9) 60%, #090d0f 90%);
}

/* ---------------- baslik ---------------- */
.head {
  position: absolute;
  top: 56px; left: 0; right: 0;
  z-index: 10;
  text-align: center;
  padding: 0 16px;
}
.head h1 { margin: 0; font-size: 31px; font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.head h1 em { font-style: normal; color: var(--yellow); }
.head p { margin: 7px 0 0; font-size: 11px; font-weight: 500; color: #a2adb1; }

/* ---------------- kupon ozeti ---------------- */
.coupon {
  position: absolute;
  top: 108px; left: 16px; right: 16px;
  z-index: 10;
  height: 42px;
  display: flex;
  align-items: center;
  border-radius: 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
}
.cc { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.cc em { font-style: normal; font-size: 7.5px; font-weight: 800; letter-spacing: .1em; color: var(--muted); }
.cc b { font-size: 13px; font-weight: 800; }
.cc.hi b { color: var(--yellow); }
.cs { width: 1px; height: 24px; background: rgba(255,255,255,.15); }

/* ---------------- cark ---------------- */
.wheelbox {
  position: absolute;
  left: 26px; top: 156px;
  width: 248px; height: 248px;
  z-index: 10;
  touch-action: none;
}
#wheel { display: block; width: 248px; height: 248px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.65)); }
.needle {
  position: absolute;
  left: 50%; top: -9px;
  width: 0; height: 0;
  margin-left: -9px;
  z-index: 4;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 26px solid var(--yellow);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.75));
}
.needle::after {
  content: '';
  position: absolute;
  left: -6px; top: -14px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--yellow);
}
.hub {
  position: absolute;
  left: 50%; top: 50%;
  width: 84px; height: 84px;
  margin: -42px 0 0 -42px;
  z-index: 3;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(170deg, #00a149, var(--green-deep) 72%, #00572a);
  box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 6px 14px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.22);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  animation: hubPulse 1.7s var(--ease-both) infinite;
}
.hub img { width: 44px; display: block; }
.hub span { font-size: 12px; font-weight: 900; letter-spacing: .09em; }
.hub:active { transform: scale(.96); }
.hub.spun { animation: none; }
@keyframes hubPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 4px rgba(0,210,102,.55), 0 6px 14px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.22); }
  55%      { box-shadow: 0 0 0 4px rgba(255,255,255,.95), 0 0 0 17px rgba(0,210,102,0),  0 6px 14px rgba(0,0,0,.6), inset 0 -3px 0 rgba(0,0,0,.22); }
}

/* ---------------- sonuc ---------------- */
.result {
  position: absolute;
  top: 410px; left: 0; right: 0;
  z-index: 10;
  text-align: center;
  padding: 0 16px;
}
.rmult {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 5px;
  background: linear-gradient(180deg, #00b350, var(--green-dark));
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.22), 0 4px 10px rgba(0,134,65,.5);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  opacity: 0;
  transform: scale(.6);
}
.rmult img { width: 14px; height: 14px; }
.rmult.on { animation: multIn .55s var(--pop) forwards; }
@keyframes multIn { to { opacity: 1; transform: scale(1); } }
.ramt { margin-top: 6px; font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -.045em; }
.ramt.hot { color: var(--yellow); }
.rnote { margin-top: 5px; font-size: 10px; font-weight: 500; color: var(--muted); }

/* ---------------- alt ---------------- */
.bottom {
  position: absolute;
  left: 16px; right: 16px;
  bottom: 24px;
  z-index: 10;
  opacity: .32;
  pointer-events: none;
  transition: opacity .4s linear;
}
.bottom.on { opacity: 1; pointer-events: auto; }
.bottom .cta { margin-bottom: 8px; }

#conf { position: absolute; inset: 0; z-index: 40; pointer-events: none; }

.bottom .store-row img { height: 24px; }