/* ============================================================
   Tower Slot — Pacote visual (animações, banner, depósito, tutorial)
   Arquivo adicional: não substitui css/style.css
   ============================================================ */

:root{
  --tsx-blue:#1f6bff;
  --tsx-blue-2:#00c2ff;
  --tsx-gold:#ffc82e;
  --tsx-gold-2:#ffe083;
  --tsx-green:#18c964;
  --tsx-pink:#ff3d8b;
  --tsx-violet:#7c3aed;
  --tsx-ink:#0b1020;
}

/* ---------- 1. CAPA ANIMADA DO JOGO (hero) ---------------- */
.tsx-hero{
  position:relative;margin:14px 12px 0;border-radius:20px;overflow:hidden;
  box-shadow:0 18px 40px rgba(12,30,80,.28);
  isolation:isolate;
}
.tsx-hero-img{
  width:100%;display:block;aspect-ratio:16/8;object-fit:cover;
  animation:tsxHeroZoom 18s ease-in-out infinite alternate;
}
@keyframes tsxHeroZoom{from{transform:scale(1.02)}to{transform:scale(1.12)}}

.tsx-hero::after{ /* brilho passando */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
  transform:translateX(-120%);animation:tsxShine 5.5s ease-in-out infinite;
}
@keyframes tsxShine{0%,65%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* nuvens flutuando por cima da capa */
.tsx-hero-clouds{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tsx-cloud{
  position:absolute;background:#fff;border-radius:999px;filter:blur(.4px);
  box-shadow:26px 6px 0 -6px #fff, 54px 0 0 -3px #fff, -24px 6px 0 -5px #fff;
}
.tsx-cloud.c1{width:54px;height:20px;top:14%;left:-25%;opacity:.85;animation:tsxDrift 26s linear infinite}
.tsx-cloud.c2{width:38px;height:14px;top:38%;left:-30%;opacity:.6;animation:tsxDrift 40s linear infinite 4s}
.tsx-cloud.c3{width:70px;height:24px;top:6%;left:-40%;opacity:.5;animation:tsxDrift 55s linear infinite 10s}
@keyframes tsxDrift{from{transform:translateX(0)}to{transform:translateX(190vw)}}

/* moldura de LEDs correndo */
.tsx-leds{position:absolute;inset:0;border-radius:20px;pointer-events:none;overflow:hidden;z-index:3}
.tsx-leds::before{
  content:"";position:absolute;inset:0;border-radius:20px;padding:3px;
  background:linear-gradient(90deg,var(--tsx-gold),var(--tsx-pink),var(--tsx-blue-2),var(--tsx-green),var(--tsx-gold));
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:tsxLeds 4s linear infinite;
}
@keyframes tsxLeds{from{background-position:0% 50%}to{background-position:300% 50%}}
@keyframes tsxSpin{to{transform:rotate(1turn)}}

.tsx-hero-content{
  position:absolute;inset:auto 0 0 0;padding:16px 16px 14px;z-index:2;
  background:linear-gradient(180deg,rgba(6,12,32,0) 0%,rgba(6,12,32,.78) 60%,rgba(6,12,32,.92) 100%);
  color:#fff;
}
.tsx-hero-kicker{
  display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:900;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);
}
.tsx-hero-kicker i{width:7px;height:7px;border-radius:50%;background:var(--tsx-green);animation:tsxPulse 1.4s infinite}
@keyframes tsxPulse{0%{box-shadow:0 0 0 0 rgba(24,201,100,.7)}70%{box-shadow:0 0 0 9px rgba(24,201,100,0)}100%{box-shadow:0 0 0 0 rgba(24,201,100,0)}}
.tsx-hero-title{
  margin:8px 0 2px;font-size:clamp(22px,6.4vw,34px);font-weight:900;line-height:1;letter-spacing:-.5px;
  text-shadow:0 3px 0 rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.5);
}
.tsx-hero-title span{
  background:linear-gradient(180deg,var(--tsx-gold-2),var(--tsx-gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tsx-hero-sub{font-size:12.5px;font-weight:600;opacity:.9;margin-bottom:10px}
.tsx-hero-cta{
  display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;font:inherit;
  padding:12px 22px;border-radius:999px;font-weight:900;font-size:14px;letter-spacing:.4px;
  text-transform:uppercase;color:#06210f;
  background:linear-gradient(180deg,#38f08a,#0fa85a);
  box-shadow:0 10px 24px rgba(15,168,90,.45);
  animation:tsxBeat 1.9s ease-in-out infinite;
}
@keyframes tsxBeat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03)}}

/* moedas subindo no hero */
.tsx-coin{
  position:absolute;bottom:-24px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffc82e 60%,#e59b00);
  box-shadow:0 0 10px rgba(255,200,46,.8);opacity:0;z-index:1;
  animation:tsxCoinUp 6s ease-in infinite;
}
@keyframes tsxCoinUp{
  0%{opacity:0;transform:translateY(0) scale(.6)}
  15%{opacity:1}
  100%{opacity:0;transform:translateY(-190px) scale(1.1) rotate(240deg)}
}

/* ---------- 2. LEDs no card principal do jogo -------------- */
.pnl-game-card{position:relative}
.pnl-game-card::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;z-index:0;
  background:linear-gradient(90deg,rgba(31,107,255,.95),rgba(0,194,255,.95),rgba(255,200,46,.95),rgba(255,61,139,.95),rgba(31,107,255,.95));
  background-size:300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;opacity:.85;animation:tsxLeds 5s linear infinite;
}
.pnl-game-card > *{position:relative;z-index:1}

/* ---------- 3. DEPÓSITO ------------------------------------ */
#modal-deposito .pnl-modal{
  background:linear-gradient(170deg,#121a33 0%,#0a0f1f 100%)!important;
  border:1px solid rgba(255,255,255,.10)!important;color:#eef2ff!important;
  box-shadow:0 30px 80px rgba(0,0,0,.6)!important;
}
#modal-deposito .pnl-modal-title,
#modal-deposito .pnl-modal-close,
#modal-deposito label,
#modal-deposito .pnl-input,
#modal-deposito .pnl-input-prefix{color:#eef2ff!important}
#modal-deposito .pnl-input-wrap{
  background:rgba(255,255,255,.05)!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:14px!important;
}
#modal-deposito .pnl-input::placeholder{color:rgba(238,242,255,.45)}

/* banner topo do depósito */
.tsx-dep-banner{
  position:relative;border-radius:16px;overflow:hidden;margin-bottom:14px;
  border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,60,160,.35);
}
.tsx-dep-banner img{width:100%;display:block;aspect-ratio:16/7;object-fit:cover}
.tsx-dep-banner .tsx-dep-copy{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:12px 14px;color:#fff;
  background:linear-gradient(90deg,rgba(4,10,30,.88) 0%,rgba(4,10,30,.6) 45%,rgba(4,10,30,0) 80%);
}
.tsx-dep-copy b{font-size:clamp(15px,4.6vw,20px);font-weight:900;line-height:1.05;text-transform:uppercase}
.tsx-dep-copy b em{font-style:normal;color:var(--tsx-gold)}
.tsx-dep-copy small{font-size:11px;font-weight:700;opacity:.85}
.tsx-dep-banner::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);
  transform:translateX(-120%);animation:tsxShine 4.5s ease-in-out infinite;
}

/* grade de valores rápidos estilo "premium" */
#dep-quick-row{display:grid!important;grid-template-columns:repeat(3,1fr);gap:12px 10px!important;margin-top:18px!important}
#dep-quick-row .pnl-quick{
  position:relative;background:rgba(255,255,255,.04)!important;color:#fff!important;
  border:1.5px solid rgba(255,200,46,.35)!important;border-radius:14px!important;
  padding:18px 6px 14px!important;font-size:17px!important;font-weight:900!important;
  box-shadow:0 0 14px rgba(255,200,46,.12), inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;
}
#dep-quick-row .pnl-quick:hover{transform:translateY(-2px)}
#dep-quick-row .pnl-quick.active,
#dep-quick-row .pnl-quick.selected{
  border-color:var(--tsx-gold)!important;
  box-shadow:0 0 0 2px rgba(255,200,46,.35),0 0 26px rgba(255,200,46,.45)!important;
}
#dep-quick-row .pnl-quick[data-tag]::before{
  content:attr(data-tag);position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:3px 12px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.1em;
  color:#fff;white-space:nowrap;box-shadow:0 4px 12px rgba(0,0,0,.4);
}
#dep-quick-row .pnl-quick[data-tone="min"]::before{background:linear-gradient(180deg,#3ef08a,#12b45c);color:#04240f}
#dep-quick-row .pnl-quick[data-tone="bom"]::before{background:linear-gradient(180deg,#ffc247,#f59e0b);color:#3a2300}
#dep-quick-row .pnl-quick[data-tone="otimo"]::before{background:linear-gradient(180deg,#ff8a4c,#f0532b)}
#dep-quick-row .pnl-quick[data-tone="exc"]::before{background:linear-gradient(180deg,#ff4d4d,#d61f1f)}
#dep-quick-row .pnl-quick[data-tone="super"]::before{background:linear-gradient(180deg,#a855f7,#7c3aed)}

#dep-confirmar{
  background:linear-gradient(180deg,#22e07e,#0f9d55)!important;color:#04250f!important;
  border-radius:999px!important;font-weight:900!important;letter-spacing:.5px;
  box-shadow:0 12px 30px rgba(20,200,110,.4)!important;animation:tsxBeat 2s ease-in-out infinite;
}

/* selo de 1º depósito */
.tsx-first-dep{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:10px 12px;border-radius:14px;
  background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(31,107,255,.25));
  border:1px solid rgba(168,85,247,.45);color:#fff;font-size:12px;font-weight:700;
}
.tsx-first-dep .tsx-fd-ico{
  width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:15px;
  background:linear-gradient(180deg,#ffd76a,#f59e0b);animation:tsxBeat 1.8s ease-in-out infinite;
}
.tsx-first-dep b{color:var(--tsx-gold)}

/* ---------- 4. Notificação de promoção 1º depósito --------- */
.tsx-promo-toast{
  position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(140%);
  width:min(420px,calc(100vw - 24px));z-index:99990;
  display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  background:linear-gradient(135deg,#1b1040 0%,#0d1b3d 100%);
  border:1px solid rgba(255,200,46,.4);box-shadow:0 20px 50px rgba(0,0,0,.5);
  color:#fff;font-size:12.5px;font-weight:700;transition:transform .45s cubic-bezier(.34,1.4,.64,1);
}
.tsx-promo-toast.show{transform:translateX(-50%) translateY(0)}
.tsx-promo-toast .tsx-pt-ico{
  width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(180deg,#ffd76a,#f59e0b);box-shadow:0 0 18px rgba(245,158,11,.5);
}
.tsx-promo-toast .tsx-pt-t{font-size:13px;font-weight:900;color:var(--tsx-gold);margin-bottom:2px}
.tsx-promo-toast .tsx-pt-cta{
  margin-left:auto;flex:none;border:none;cursor:pointer;font:inherit;font-weight:900;font-size:12px;
  padding:9px 14px;border-radius:999px;color:#04250f;background:linear-gradient(180deg,#38f08a,#0fa85a);
}
.tsx-promo-toast .tsx-pt-x{
  position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:none;cursor:pointer;
  background:#26304d;color:#fff;font-weight:900;line-height:1;
}

/* ---------- 5. TUTORIAL legível (centralizado e contido) --- */
#ts-coach{display:block}
#ts-coach-bubble{
  position:fixed!important;left:0!important;right:0!important;top:50%!important;
  transform:translateY(-50%)!important;
  margin:0 auto!important;
  width:min(440px,calc(100vw - 32px))!important;
  max-width:calc(100vw - 32px)!important;
  max-height:min(76vh,620px)!important;overflow-y:auto!important;
  padding:22px 20px 18px!important;
  font-size:clamp(15px,4.3vw,18px)!important;line-height:1.6!important;
  box-sizing:border-box!important;
  background:linear-gradient(170deg,#151033 0%,#0a0a1c 100%)!important;
  border:1px solid rgba(255,213,79,.45)!important;
  box-shadow:0 26px 80px rgba(0,0,0,.8)!important;
  word-break:break-word;
  color:#fff!important;
}
#ts-coach-bubble b{color:#ffd54f!important}
#ts-coach-bubble .ts-coach-step{color:#ffd54f!important}
#ts-coach-bubble .ts-coach-next{position:sticky;bottom:0}
@media (max-width:420px){
  #ts-coach-bubble{font-size:15.5px!important;padding:18px 16px 14px!important}
}