/* ПоліДеп — «Опівнічний оксамит» (Midnight Velvet) casino theme */
:root{
  --bg-0:#0A0714;      /* near-black plum */
  --bg-1:#1E1140;      /* deep violet (radial center) */
  --cabinet:#17102E;   /* cabinet body */
  --cabinet-2:#241645; /* cabinet highlight */
  --well:#0B0720;      /* reel well (darkest) */
  --gold:#F6C945;
  --gold-2:#C9971F;
  --gold-3:#8A6410;
  --crimson:#E23A55;
  --crimson-2:#A21630;
  --ink:#F7EFD8;       /* warm off-white text */
  --muted:#9C8FC4;     /* lavender-gray */
  --money:#7CF2B0;     /* green cash readout */
  --chip-1:#FAF7EF;    /* symbol tile top */
  --chip-2:#E7E1CF;    /* symbol tile bottom */
  --shadow:0 22px 60px -14px rgba(0,0,0,.85);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  min-height:100%;
  font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:radial-gradient(125% 90% at 50% -8%, var(--bg-1) 0%, var(--bg-0) 55%, #05030B 100%);
  background-attachment:fixed;
}
button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer}
button:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ── Loader ─────────────────────────────────────────────── */
.loader{
  position:fixed;inset:0;z-index:9999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  background:radial-gradient(120% 90% at 50% 30%, var(--bg-1), var(--bg-0));
}
.loader.hidden{display:none}
.spinner{
  width:58px;height:58px;border-radius:50%;
  border:5px solid rgba(246,201,69,.18);border-top-color:var(--gold);
  animation:spin .9s linear infinite;
  filter:drop-shadow(0 0 10px rgba(246,201,69,.5));
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{color:var(--gold);font-weight:700;letter-spacing:.2em;text-transform:uppercase;font-size:.8rem}

/* ── Header + marquee bulbs ─────────────────────────────── */
.app-header{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:26px 22px;
  background:linear-gradient(180deg, rgba(36,22,69,.92), rgba(14,9,28,.55));
  border-bottom:1px solid rgba(246,201,69,.28);
}
.app-header::before,
.app-header::after{
  content:"";position:absolute;left:0;right:0;height:12px;
  background-image:radial-gradient(circle, var(--gold) 0 2.4px, rgba(246,201,69,.10) 3px, transparent 3.6px);
  background-size:24px 12px;background-position:center;
  filter:drop-shadow(0 0 4px rgba(246,201,69,.7));
}
.app-header::before{top:5px;animation:twinkle 2.4s ease-in-out infinite}
.app-header::after{bottom:5px;animation:twinkle 2.4s ease-in-out infinite .8s}
@keyframes twinkle{0%,100%{opacity:.5}50%{opacity:1}}

.app-title,
.app-header h1{
  margin:0;
  font-family:Unbounded,Manrope,sans-serif;
  font-weight:800;
  font-size:clamp(2.1rem,7vw,3.6rem);
  line-height:1;letter-spacing:.01em;text-align:center;
  color:var(--gold); /* fallback */
  background:linear-gradient(180deg,#FFE9A0 0%, var(--gold) 45%, #B8860B 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.45)) drop-shadow(0 0 18px rgba(246,201,69,.35));
}

.brand-left,.brand-right{display:flex;align-items:center;gap:8px}
.brand-left{justify-content:flex-start}
.brand-right{justify-content:flex-end}
.brand-left img,.brand-right img{max-height:46px;max-width:150px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}

/* ── Cabinet ────────────────────────────────────────────── */
.app-main{max-width:720px;margin:28px auto 44px;padding:0 16px}

.machine{
  position:relative;
  padding:clamp(12px,3vw,22px);
  border-radius:22px;
  background:linear-gradient(180deg, var(--cabinet-2), var(--cabinet));
  border:2px solid rgba(246,201,69,.38);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
}
.machine::before{
  content:"";position:absolute;inset:6px;border-radius:16px;
  border:1px solid rgba(246,201,69,.28);pointer-events:none;
}

.reels{
  position:relative;
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:clamp(6px,1.6vw,12px);
  padding:clamp(8px,2vw,14px);
  border-radius:12px;
  background:linear-gradient(180deg,#0E0824,#080516);
  isolation:isolate;overflow:hidden;
}
/* static inner frame + vignette (kept OFF box-shadow so JS win-flash owns #reels' box-shadow) */
.reels::after{
  content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:3;
  box-shadow:
    inset 0 0 0 1px rgba(246,201,69,.22),
    inset 0 12px 30px rgba(0,0,0,.6),
    inset 0 -12px 30px rgba(0,0,0,.6);
}
/* light sweep while spinning */
.reels::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.10) 50%, transparent 68%);
}
.reels.spinning::before{opacity:1;animation:sheen 1.1s linear infinite}
@keyframes sheen{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* Each reel is a clipped viewport; the strip inside is translated to spin.
   Height, gap and tile heights are set in JS from live layout metrics. */
.reel{position:relative;overflow:hidden;border-radius:10px}
.strip{display:flex;flex-direction:column;will-change:transform;transform:translateY(0)}
.cell{
  position:relative;width:100%;flex:0 0 auto;border-radius:10px;
  background:linear-gradient(160deg,var(--chip-1),var(--chip-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 6px rgba(0,0,0,.12),
    0 2px 4px rgba(0,0,0,.4);
  display:grid;place-items:center;overflow:hidden;
}
.symbol{width:86%;height:86%;object-fit:contain;filter:drop-shadow(0 1px 1px rgba(0,0,0,.15))}
.placeholder{display:grid;place-items:center;color:#6b7280;font-weight:600;font-size:14px;padding:8px;text-align:center}

/* ── Winning payline: highlighted center row ────────────── */
/* Lit band across the center row so it clearly reads as the row that pays. */
.winrow{
  position:absolute;z-index:4;pointer-events:none;
  left:clamp(14px,4.2vw,26px);right:clamp(14px,4.2vw,26px);
  top:33.5%;height:33%;border-radius:10px;
  background:linear-gradient(90deg, rgba(246,201,69,.16), rgba(246,201,69,.05) 22%, rgba(246,201,69,.05) 78%, rgba(246,201,69,.16));
  box-shadow:inset 0 0 26px rgba(246,201,69,.20);
  animation:winglow 2.4s ease-in-out infinite;
}
@keyframes winglow{0%,100%{box-shadow:inset 0 0 20px rgba(246,201,69,.13)}50%{box-shadow:inset 0 0 30px rgba(246,201,69,.26)}}
/* Side chevrons pointing at the pay row. */
.winrow::before,.winrow::after{
  content:"";position:absolute;top:50%;width:0;height:0;
  border-top:9px solid transparent;border-bottom:9px solid transparent;
  filter:drop-shadow(0 0 5px rgba(246,201,69,.9));
  animation:chevpulse 2.4s ease-in-out infinite;
}
.winrow::before{left:-11px;border-left:13px solid var(--gold);transform:translateY(-50%)}
.winrow::after{right:-11px;border-right:13px solid var(--gold);transform:translateY(-50%)}
@keyframes chevpulse{0%,100%{opacity:.65}50%{opacity:1}}

/* Gold rails framing the top and bottom of the pay row. */
.payline{
  position:absolute;left:clamp(14px,4.2vw,26px);right:clamp(14px,4.2vw,26px);
  height:3px;border-radius:2px;z-index:5;pointer-events:none;
  background:linear-gradient(90deg, rgba(246,201,69,0), var(--gold) 16%, #FFF7D6 50%, var(--gold) 84%, rgba(246,201,69,0));
  box-shadow:0 0 12px 2px rgba(246,201,69,.9);
  animation:paypulse 2.2s ease-in-out infinite;
}
@keyframes paypulse{0%,100%{opacity:.75}50%{opacity:1}}
.payline-top{top:33.5%}
.payline-bottom{top:66.5%}

/* Win celebration: briefly supercharge the pay-row highlight. */
.machine.win .winrow{animation:winflash .5s ease-out 2}
@keyframes winflash{
  0%{background:linear-gradient(90deg, rgba(246,201,69,.5), rgba(246,201,69,.22) 50%, rgba(246,201,69,.5));box-shadow:inset 0 0 42px rgba(246,201,69,.6)}
  100%{background:linear-gradient(90deg, rgba(246,201,69,.16), rgba(246,201,69,.05) 22%, rgba(246,201,69,.05) 78%, rgba(246,201,69,.16));box-shadow:inset 0 0 26px rgba(246,201,69,.2)}
}

/* ── Win banner (pop-up) ────────────────────────────────── */
.winbanner{
  position:absolute;z-index:7;left:50%;top:47%;
  width:min(88%,460px);
  transform:translate(-50%,-50%) scale(.82);
  opacity:0;pointer-events:none;
  transition:opacity .22s ease, transform .34s cubic-bezier(.2,.9,.25,1.28);
}
.winbanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wb-card{
  text-align:center;padding:18px 22px;border-radius:18px;
  background:linear-gradient(180deg, rgba(40,24,78,.97), rgba(12,7,26,.97));
  border:2px solid var(--gold);
  box-shadow:0 18px 50px -10px rgba(0,0,0,.85), 0 0 30px rgba(246,201,69,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
.wb-tier{
  font-family:Unbounded,Manrope,sans-serif;font-weight:800;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
}
.wb-msg{margin-top:9px;font-weight:700;font-size:1.02rem;line-height:1.38;color:var(--ink);overflow-wrap:anywhere}
.wb-amount{
  margin-top:12px;font-family:Unbounded,Manrope,sans-serif;font-weight:900;font-size:1.7rem;
  color:var(--money);text-shadow:0 0 14px color-mix(in srgb, var(--money) 55%, transparent);
  font-variant-numeric:tabular-nums;
}
/* Combo = crimson accent */
.winbanner.combo .wb-card{border-color:var(--crimson);box-shadow:0 18px 50px -10px rgba(0,0,0,.85), 0 0 30px rgba(226,58,85,.4), inset 0 1px 0 rgba(255,255,255,.12)}
.winbanner.combo .wb-tier{color:var(--crimson)}
/* Депозит (стипендія) = зелений грошовий акцент */
.winbanner.depo .wb-card{border-color:var(--money);box-shadow:0 18px 50px -10px rgba(0,0,0,.85), 0 0 30px color-mix(in srgb, var(--money) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.12)}
.winbanner.depo .wb-tier{color:var(--money)}
/* Jackpot = brighter gold, pulsing */
.winbanner.jackpot .wb-card{border-color:#FFE9A0;animation:jackpotPulse 1.1s ease-in-out infinite}
.winbanner.jackpot .wb-tier{font-size:.98rem;color:#FFE9A0}
.winbanner.jackpot .wb-amount{font-size:2.1rem}
@keyframes jackpotPulse{
  0%,100%{box-shadow:0 18px 50px -10px rgba(0,0,0,.85), 0 0 28px rgba(246,201,69,.45), inset 0 1px 0 rgba(255,255,255,.14)}
  50%{box-shadow:0 18px 50px -10px rgba(0,0,0,.85), 0 0 56px rgba(246,201,69,.8), inset 0 1px 0 rgba(255,255,255,.14)}
}

/* ── Confetti / coins ───────────────────────────────────── */
.confetti{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:hidden;border-radius:12px}
.confetti .coin{
  position:absolute;top:-26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFF2B0, var(--gold) 55%, var(--gold-2));
  box-shadow:0 0 6px rgba(246,201,69,.7);
  animation-name:coinfall;animation-timing-function:linear;animation-fill-mode:forwards;
}
.confetti .coin.crimson{
  background:radial-gradient(circle at 35% 30%, #FF9AA9, var(--crimson) 55%, var(--crimson-2));
  box-shadow:0 0 6px rgba(226,58,85,.7);
}
@keyframes coinfall{
  0%{transform:translate(0,0) rotate(0);opacity:0}
  12%{opacity:1}
  100%{transform:translate(var(--dx,0), 360px) rotate(540deg);opacity:0}
}

/* ── Controls ───────────────────────────────────────────── */
.controls{
  margin-top:20px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  padding:16px clamp(12px,3vw,22px);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(36,22,69,.92), rgba(14,9,28,.9));
  border:1px solid rgba(246,201,69,.22);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}

.bet{display:flex;align-items:center;gap:12px;justify-self:start}
.circle{
  flex:0 0 auto;aspect-ratio:1/1;
  width:clamp(42px,10vw,50px);height:clamp(42px,10vw,50px);
  border-radius:50%;border:1px solid var(--gold-2);
  background:radial-gradient(120% 120% at 30% 25%, #2E1D55, #150C2C);
  color:var(--gold);font-size:26px;font-weight:800;line-height:1;
  box-shadow:0 3px 8px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .08s, filter .12s;
}
.circle:hover:not(:disabled){filter:brightness(1.15)}
.circle:active:not(:disabled){transform:translateY(1px)}
.circle:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}

.label{
  --led:var(--gold);
  min-width:118px;padding:8px 14px;border-radius:12px;text-align:center;
  background:linear-gradient(180deg,#0A0618,#120A28);
  border:1px solid rgba(246,201,69,.25);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.7);
}
.label .title{font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:700}
.label .value{
  margin-top:3px;font-weight:800;font-size:1.35rem;font-variant-numeric:tabular-nums;
  color:var(--led);text-shadow:0 0 10px color-mix(in srgb, var(--led) 55%, transparent);
}
/* Ставка — редагований інпут: прибираємо дефолтну обводку/фон браузера */
.label input.value{
  width:100%;min-width:0;box-sizing:border-box;padding:0;
  background:transparent;border:0;outline:0;border-radius:0;
  text-align:center;font-family:inherit;-webkit-appearance:none;appearance:none;
  cursor:text;
}
.label input.value:focus{text-shadow:0 0 15px color-mix(in srgb, var(--led) 75%, transparent)}
.label input.value::selection{background:color-mix(in srgb, var(--led) 30%, transparent)}
.label.balance{--led:var(--money);min-width:150px}
/* Баланс може стати великим — не даємо числу вилазити за коробку:
   один рядок, зайве ховається під край віконця (як у формі).
   За замовчуванням число по центру; коли не вміщається — JS додає .num-clip
   і воно притискається зліва, щоб під обрізку йшов саме правий край. */
.label.balance .value{max-width:100%;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:clip}
.label.balance .value.num-clip{text-align:left}

.spin{
  justify-self:center;
  min-width:clamp(118px,30vw,148px);height:clamp(118px,30vw,148px);
  border-radius:50%;border:3px solid var(--gold);
  background:radial-gradient(120% 120% at 35% 28%, #FF6B7E 0%, var(--crimson) 42%, var(--crimson-2) 100%);
  color:#fff;font-family:Unbounded,Manrope,sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:.06em;
  box-shadow:
    0 12px 28px -6px rgba(226,58,85,.6),
    0 0 0 6px rgba(246,201,69,.12),
    inset 0 3px 8px rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(0,0,0,.35);
  text-shadow:0 2px 4px rgba(0,0,0,.45);
  transition:transform .08s, filter .15s, box-shadow .15s;
}
.spin:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 16px 34px -6px rgba(226,58,85,.78), 0 0 0 9px rgba(246,201,69,.18), inset 0 3px 8px rgba(255,255,255,.35), inset 0 -8px 14px rgba(0,0,0,.35)}
.spin:active:not(:disabled){transform:translateY(3px) scale(.985)}
.spin:disabled{filter:grayscale(.55) brightness(.72);cursor:not-allowed;box-shadow:0 6px 16px -8px rgba(0,0,0,.6), inset 0 -6px 12px rgba(0,0,0,.3)}

.right-panel{display:flex;flex-direction:column;align-items:stretch;gap:10px;justify-self:end;min-width:150px}
.auto{
  height:46px;padding:0 16px;border-radius:12px;
  border:1px solid var(--gold-2);
  background:linear-gradient(180deg,#241645,#160D2E);
  color:var(--gold);font-weight:700;font-size:.9rem;letter-spacing:.05em;
  transition:filter .12s, box-shadow .15s, background .15s, color .15s;
}
.auto:hover{filter:brightness(1.12)}
.auto.active{
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#1a1206;border-color:#FFE9A0;
  box-shadow:0 0 18px rgba(246,201,69,.55), inset 0 1px 0 rgba(255,255,255,.5);
}

.credit{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin:22px auto 12px;color:var(--muted);
}
.credit-line{
  display:flex;align-items:center;gap:8px;
  font-family:"Times New Roman",Times,Georgia,serif;
  font-size:.98rem;letter-spacing:.01em;
}
.credit-by{opacity:.7;font-style:italic}
.credit-name{color:var(--ink);font-weight:700}
.credit-logo{
  width:40px;height:40px;border-radius:50%;object-fit:contain;
  padding:2px;background:radial-gradient(circle at 50% 35%,#fff,#EDE7FF);
  box-shadow:0 1px 8px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.4);
}
.credit-social{display:flex;align-items:center;gap:12px}
.credit-social a{
  display:inline-flex;color:var(--muted);
  transition:color .15s, transform .15s;
}
.credit-social a:hover{color:var(--gold);transform:translateY(-1px)}
.credit-social svg{width:20px;height:20px;display:block}
.credit-sep{color:var(--muted);opacity:.4}

.disclaimer{
  max-width:60ch;margin:8px auto 22px;
  color:var(--muted);font-size:.62rem;line-height:1.5;text-align:center;opacity:.85;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:600px){
  .app-header{padding:22px 16px}
  .app-main{margin:16px auto 0;padding:0 12px calc(196px + env(safe-area-inset-bottom))}
  .brand-left img,.brand-right img{max-height:30px}

  .controls{
    position:fixed;left:0;right:0;bottom:0;z-index:1000;margin:0;
    border-radius:20px 20px 0 0;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"bet spin" "right spin";
    align-items:center;
    gap:12px 14px;
    padding:14px 16px calc(14px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(30,17,60,.97), rgba(10,6,20,.98));
    backdrop-filter:blur(6px) saturate(120%);
    -webkit-backdrop-filter:blur(6px) saturate(120%);
  }
  /* Ліва колонка — два рівновисоких ряди (54px кожен) */
  .bet{
    grid-area:bet;justify-self:stretch;
    display:grid;grid-template-columns:46px minmax(0,1fr) 46px;align-items:center;gap:10px;
  }
  .bet .circle{width:46px;height:46px;font-size:24px}
  .bet .label{
    min-width:0;height:54px;padding:6px 12px;
    display:flex;flex-direction:column;justify-content:center;
  }
  .right-panel{
    grid-area:right;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;
    justify-self:stretch;min-width:0;
  }
  .right-panel .auto{height:54px;margin:0;font-size:.82rem;letter-spacing:.02em;white-space:nowrap;padding:0 8px}
  .right-panel .balance{
    min-width:0;height:54px;padding:6px 12px;
    display:flex;flex-direction:column;justify-content:center;
  }
  /* value трохи менший, щоб точно вміщався у 54px разом із title */
  .label .value{font-size:1.18rem}
  /* SPIN = висота обох рядів + gap (54+12+54), точно вирівняна по краях стека */
  .spin{grid-area:spin;align-self:center;width:120px;min-width:120px;height:120px;font-size:1.2rem}
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important}
  .spinner{animation-duration:.9s !important;animation-iteration-count:infinite !important}
  .app-header::before,.app-header::after{opacity:.85}
  .payline{opacity:.8}
}