/* ===========================================================
   TopWin — splash-лендинг «забери бонус» (казино, Латам, исп.)
   Одно полноэкранное окно: лого → заголовок → бонус → кнопка.
   =========================================================== */

:root {
  --bg:        #0a0414;   /* почти чёрный фиолетовый */
  --ink:       #ffffff;
  --blue:      #38a8ff;   /* заголовок */
  --blue-deep: #1f6fd6;
  --pink:      #ff2e88;   /* бонус + кнопка */
  --pink-2:    #ff5ea8;
  --gold:      #ffc436;
  --maxw:      640px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; }

/* ---------- Сцена ---------- */
.splash {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 5vw, 48px) 20px;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 38%, rgba(124, 60, 220, .45), transparent 60%),
    radial-gradient(90% 70% at 50% 30%, rgba(255, 46, 136, .22), transparent 55%),
    linear-gradient(180deg, #160a2e 0%, var(--bg) 70%);
}

/* Лучи из центра за логотипом */
.rays {
  position: absolute;
  top: 30%;
  left: 50%;
  width: 180vmax;
  height: 180vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 255, 255, .10) 0deg 5deg,
    transparent 5deg 13deg
  );
  -webkit-mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 32%, transparent 62%);
  mask: radial-gradient(closest-side, #000 0%, rgba(0,0,0,.55) 32%, transparent 62%);
  animation: spin 90s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Затемнение по краям, чтобы текст читался */
.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(75% 60% at 50% 45%, transparent 40%, rgba(5, 2, 12, .72) 100%);
  pointer-events: none;
}

/* ---------- Контент ---------- */
.splash-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  text-align: center;
}

/* Лого-бейдж (заглушка под реальный логотип казино) */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  padding: .55rem 1.4rem;
  margin-bottom: clamp(18px, 4vw, 30px);
  border: 2px solid rgba(255, 196, 54, .8);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,196,54,.18), rgba(255,196,54,.04));
  box-shadow: 0 0 30px -6px rgba(255, 196, 54, .6);
}
.logo-brand {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  font-size: clamp(1.9rem, 7vw, 2.8rem);
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3c4, var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-tag {
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .5em;
  margin-left: .5em;
  color: var(--gold);
}
.logo-img { max-width: min(70vw, 320px); height: auto; margin-bottom: clamp(18px,4vw,30px); }

/* Заголовок — крупный, синий, со свечением */
.headline {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.1rem, 9vw, 3.6rem);
  line-height: 1.05;
  margin: 0 0 .5rem;
  color: var(--blue);
  text-shadow:
    0 0 1px #fff,
    0 2px 0 var(--blue-deep),
    0 0 22px rgba(56, 168, 255, .75);
}

/* Бонус — розовый, со свечением */
.bonus {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.15rem, 4.6vw, 1.7rem);
  line-height: 1.15;
  margin: 0 0 clamp(26px, 5vw, 40px);
  color: var(--pink-2);
  text-shadow: 0 0 16px rgba(255, 46, 136, .7);
}

/* Кнопка RECIBIR */
.btn {
  display: inline-block;
  font-family: "Sora", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
  color: #fff;
  text-decoration: none;
  padding: clamp(.9rem, 3vw, 1.15rem) clamp(2.4rem, 9vw, 3.6rem);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pink-2) 0%, var(--pink) 100%);
  border: 2px solid #ffd1e6;
  box-shadow:
    0 0 0 3px rgba(255, 46, 136, .25),
    0 14px 36px -10px rgba(255, 46, 136, .9);
  animation: pulse 1.8s ease-in-out infinite;
  transition: transform .12s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

.legal {
  margin: clamp(22px, 5vw, 34px) 0 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .55);
}
.legal a { color: rgba(255, 255, 255, .75); text-decoration: underline; }

/* ---------- Слот-крутилка ---------- */
.slot {
  display: flex;
  justify-content: center;
  gap: clamp(8px, 2.5vw, 14px);
  margin: clamp(14px, 3vw, 22px) 0 clamp(20px, 4vw, 30px);
  padding: clamp(10px, 2.5vw, 16px);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.25));
  border: 2px solid rgba(255, 196, 54, .55);
  box-shadow: inset 0 0 24px rgba(0,0,0,.6), 0 0 30px -10px rgba(255,196,54,.5);
}
.reel {
  --h: clamp(70px, 21vw, 92px);
  width: var(--h);
  height: var(--h);
  overflow: hidden;
  border-radius: 12px;
  background: #0c0820;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.7), inset 0 -6px 14px rgba(0,0,0,.7);
}
.reel-strip {
  display: flex;
  flex-direction: column;
  transform: translateY(0);
  will-change: transform;
}
.reel-strip span {
  width: var(--h);
  height: var(--h);
  display: grid;
  place-items: center;
  font-size: clamp(2.2rem, 11vw, 3.2rem);
  line-height: 1;
}
.slot.is-win {
  border-color: var(--gold);
  box-shadow: inset 0 0 24px rgba(0,0,0,.6), 0 0 46px -6px var(--gold);
  animation: winflash .5s ease 2;
}
@keyframes winflash { 50% { box-shadow: inset 0 0 24px rgba(0,0,0,.6), 0 0 70px 0 var(--gold); } }

/* ---------- Этапы (крутилка / выигрыш) ---------- */
.stage-win[hidden] { display: none; }
.stage-win.reveal { animation: pop .45s cubic-bezier(.2,1.2,.35,1) both; }
@keyframes pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

.btn-spin {
  background: linear-gradient(180deg, #ffe08a 0%, var(--gold) 100%);
  color: #3a2a00;
  border: 2px solid #fff3c4;
  box-shadow: 0 0 0 3px rgba(255,196,54,.25), 0 14px 36px -10px rgba(255,196,54,.9);
}

.win-title {
  font-family: "Sora", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 6vw, 2.1rem);
  margin: 0 0 .35rem;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(255,196,54,.7);
}

/* Промокод */
.promo {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: .5rem;
  max-width: 340px;
  margin: .8rem auto .3rem;
  padding: .4rem .4rem .4rem 1rem;
  border: 1.5px dashed var(--gold);
  border-radius: 12px;
  background: rgba(255,196,54,.08);
}
.promo code {
  display: flex;
  align-items: center;
  flex: 1;
  font-family: "Sora", monospace;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: .14em;
  color: var(--gold);
}
.promo-copy {
  border: 0;
  border-radius: 9px;
  padding: .55rem 1rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--gold);
  color: #3a2a00;
}
.promo-copy.is-copied { background: #2ecf86; color: #04210f; }
.promo-note { margin: .5rem 0 0; font-size: .85rem; color: rgba(255,255,255,.6); }

@media (prefers-reduced-motion: reduce) {
  .rays { animation: none; }
  .btn { animation: none; }
  .reel-strip { transition-duration: .6s !important; }
}