/* WI Roleta — Midnight Pro v1.2
   Dark profundo, contraste alto, neon sutil e animações suaves.
*/

:root{
  /* Paleta base (bem escura) */
  --wi-bg: #05070f;              /* fundo da página */
  --wi-bg-2: #0a0f1f;            /* painéis grandes */
  --wi-panel: rgba(255,255,255,0.05);
  --wi-panel-2: rgba(255,255,255,0.08);

  /* Tipografia */
  --wi-text: #eef2ff;
  --wi-muted: #97a0c2;

  /* Acentos */
  --wi-accent: #65e1ff;          /* ciano neon */
  --wi-accent-2: #7c4dff;        /* roxo neon */
  --wi-gold: #ffd76a;            /* dourado */
  --wi-success: #2fd070;
  --wi-danger: #ff6a83;

  /* UI */
  --wi-stroke: rgba(255,255,255,0.10);
  --wi-stroke-2: rgba(255,255,255,0.16);
  --wi-shadow: 0 24px 80px rgba(0,0,0,.55);
  --wi-radius: 20px;

  /* Wheel */
  --wi-wheel-outer: #0e1430;
  --wi-wheel-inner: #0a0f24;
}

/* ---------- Page background ---------- */
html, body{ background: radial-gradient(120% 100% at 50% -10%, #0a1028 0%, #060914 34%, #05070f 70%) fixed; }
body{ color: var(--wi-text); }

/* ---------- Shell ---------- */
.wirr-wrapper{
  max-width: 1180px;
  margin: clamp(8px, 2.2vw, 28px) auto;
  padding: clamp(16px, 2.6vw, 28px);
  background: #081425;
  border: 1px solid var(--wi-stroke);
  border-radius: var(--wi-radius);
  box-shadow: var(--wi-shadow);
  backdrop-filter: blur(6px);
}

.wirr-buy-form label {
  color: #fff; /* branco */
  font-weight: 600;
}

/* ---------- Topbar ---------- */
.wirr-topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  justify-content:space-between; margin-bottom: 16px;
}
.wirr-title{
  font-weight: 900; letter-spacing: .2px;
  font-size: clamp(22px, 2.6vw, 34px);
  color: var(--wi-text);
  text-shadow: 0 2px 18px rgba(124,77,255,.35);
}
.wirr-countdown, .wirr-pot{
  padding: 8px 12px; border-radius: 12px;
  background: var(--wi-panel);
  border: 1px solid var(--wi-stroke);
  font-weight: 800;
}
.wirr-countdown{ color: var(--wi-gold); }
.wirr-pot{ color: var(--wi-accent); }

.wirr-potpre{
  padding: 8px 12px; border-radius: 12px;
  background: green;
  border: 1px solid var(--wi-stroke);
  font-weight: 800;
}
.wirr-countdown{ color: var(--wi-gold); }
.wirr-potpre{ color:#fff; }

/* ---------- Compra ---------- */
.wirr-purchase-box{ display:flex; justify-content:flex-end; }
.wirr-buy-form{
  display:flex; align-items:center; gap:12px;
  background: var(--wi-panel);
  border: 1px solid var(--wi-stroke);
  padding: 12px 14px;
  border-radius: 14px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.wirr-buy-form input[type="number"]{
  width: 92px; text-align:center;
  border-radius: 10px; border: 1px solid var(--wi-stroke-2); padding: 8px 10px;
  background: #d9d9d9; color: #000;
  outline: none;
}
.wirr-buy-form input[type="number"]:focus{
  border-color: var(--wi-accent);
  box-shadow: 0 0 0 3px rgba(101,225,255,.20);
}

/* ---------- Botões ---------- */
.wirr-btn{
  --g1: #ffe27a; --g2: #ffb24d;
  background: linear-gradient(180deg, var(--g1), var(--g2));
  color:#11162e; border:0; padding:12px 18px;
  border-radius: 12px; cursor:pointer; font-weight:900;
  letter-spacing:.2px; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 -2px 0 rgba(0,0,0,.2);
}
.wirr-btn:hover{ transform: translateY(-1px); filter: brightness(1.03); }
.wirr-btn:active{ transform: translateY(0); }
.wirr-btn[disabled]{ filter: grayscale(.55) brightness(.9); opacity:.7; cursor:not-allowed; }

/* secundário */
.wirr-btn--sec{ --g1: #8bd3ff; --g2: #65e1ff; }

/* ---------- Grid de rostos ---------- */
.wirr-grid{
  display:grid; grid-template-columns: repeat(8,1fr);
  gap:12px; background: var(--wi-panel); padding:14px;
  border-radius:14px; min-height:120px; margin: 10px 0 18px;
  border: 1px solid var(--wi-stroke);
}
@media (max-width: 1024px){ .wirr-grid{ grid-template-columns: repeat(6,1fr); } }
@media (max-width: 720px){  .wirr-grid{ grid-template-columns: repeat(4,1fr); } }

.wirr-face{
  background: #111733; border-radius: 14px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding:6px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.22);
}
.wirr-face img{ width:100%; height:auto; border-radius:10px; }

/* ---------- Ações ---------- */
.wirr-actions{ text-align:center; margin: 16px 0; }

/* ---------- Wheel ---------- */
.wirr-wheel{ display:flex; justify-content:center; }
.wirr-wheel-wrap{
  position:relative;
  width:min(92vw,580px);
  height:min(92vw,580px);
  min-width:260px; min-height:260px;
  margin: 12px auto 6px;
}
.wirr-pointer{
  position:absolute; left:50%; top:-12px; transform:translateX(-50%);
  width:0; height:0; border-left:18px solid transparent; border-right:18px solid transparent; border-bottom:32px solid var(--wi-gold);
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.5)); z-index:5; border-radius:2px;
}
.wirr-plate{
  position:absolute; inset:0; border-radius:50%;
  background: none;
  box-shadow:
    inset 0 0 0 16px rgba(255,255,255,.10),
    inset 0 0 28px rgba(124,77,255,.15),
    0 18px 42px rgba(0,0,0,.55);
}
.wirr-rotor svg{ width:100%; height:100%; display:block }
.wirr-center{
  position:absolute; inset:0; margin:auto; width:28%; height:28%; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--wi-gold) 60%, #ffb24d);
  border:10px solid rgba(255,255,255,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.45); z-index:4;
}
.wirr-star{
  position:absolute; inset:0; margin:auto; --s:44px; width:var(--s); height:var(--s);
  clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 71%,21% 91%,32% 57%,2% 35%,39% 35%);
  background:#0c1130; top:calc(50% - var(--s)/2); left:calc(50% - var(--s)/2);
}

/* Lâmpadas com glow */
.wirr-bulbs circle{
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  animation: bulbGlow 2.6s ease-in-out infinite;
}
@keyframes bulbGlow{
  0%,100%{ opacity: .95 }
  50%{ opacity: .55 }
}

/* Avatares no disco */
.wirr-avatar{
  stroke:#fff;
  stroke-width:3px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
  /* 🔽 rotação fixa */
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  transform-box: fill-box; /* necessário em SVG */
}

/* Transform correto para animar por CSS */
.wirr-rotor #gRotor{ transform-box: fill-box; transform-origin: 50% 50%; }

/* ---------- Card do Vencedor ---------- */
.wirr-winner{ margin-top: 12px; }
.wirr-winner-card{
  margin:20px auto; max-width:760px; background: #0b122e;
  color:#eaf0ff; border-radius:16px; display:flex; gap:16px; align-items:center;
  box-shadow: 0 16px 38px rgba(0,0,0,.45); padding:16px 18px;
  border: 1px solid var(--wi-stroke-2);
}
.wirr-winner-photo img{
  width:92px; height:92px; border-radius:50%; object-fit:cover;
  box-shadow: 0 10px 22px rgba(0,0,0,.45), 0 0 0 3px rgba(124,77,255,.35);
}
.wirr-winner-info{ display:flex; flex-direction:column; gap:4px }
.wirr-winner-title{ font-size:12px; opacity:.7; color: var(--wi-muted); }
.wirr-winner-name{ font-weight:900; font-size:22px }
.wirr-winner-payout{ font-weight:800; font-size:18px; color: var(--wi-success) }
.wirr-winner-time{ font-size:12px; opacity:.7 }

/* ---------- Links / utilidades ---------- */
a{ color: var(--wi-accent); }
a:hover{ color: #9ee8ff; }
.container{ max-width:1180px; margin:0 auto; padding: 0 14px; }

/* ---------- Acessibilidade de foco ---------- */
.wirr-btn:focus,
.wirr-buy-form input[type="number"]:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,77,255,.25), 0 0 0 6px rgba(101,225,255,.18);
}

/* ---------- Reduções em telas menores ---------- */
@media (max-width:560px){
  .wirr-buy-form{ flex-wrap:wrap; justify-content:center; }
  .wirr-winner-photo img{ width:78px; height:78px; }
  .wirr-winner-name{ font-size:20px; }
}

/* ===== Finance UI ===== */
.wirr-finance-wrapper{
  max-width: 760px;
  margin: 24px auto;
  display: grid;
  gap: 18px;
}

.wirr-card{
  background: #ffffff;
  border: 1px solid #e8edf3;
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(16,24,40,.06);
  padding: 18px;
}

.wirr-card-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}

.wirr-card-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #0b2535;
}

.wirr-badge{
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: #1e64b7;
  border: 1px solid #d7e7ff;
}

.wirr-balance-line{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 8px 0;
}

.wirr-balance-label{ color: #5b6b79; font-weight: 700; }
.wirr-balance-amount{ font-size: 24px; font-weight: 900; color: #0a3148; }

.wirr-alert{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 600;
}
.wirr-alert--warn{
  background: #fff3f0;
  border: 1px solid #ffd3c8;
  color: #a63b1d;
}

.wirr-hint{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f6fbff;
  border: 1px solid #d8eaf6;
  color: #0e3c58;
  font-weight: 600;
}

/* Form */
.wirr-form{ display: grid; gap: 14px; }
.wirr-form-row{ display: grid; gap: 8px; }
.wirr-label{ font-weight: 800; color: #244558; }

.wirr-input-wrap{ display: flex; gap: 10px; align-items: center; }

.wirr-form input[type="number"],
.wirr-form input[type="text"]{
  width: 100%;
  background: #f6fbff;
  border: 1px solid #dbe9f5;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  color: #0a2030;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.wirr-form input[type="number"]:focus,
.wirr-form input[type="text"]:focus{
  outline: none;
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.wirr-help{
  color: #5b6b79;
  font-size: 12px;
}

.wirr-link{
  background: none; border: none; padding: 0 6px;
  color: #0a7a52; font-weight: 800; cursor: pointer;
}
.wirr-link:disabled{ color: #93a0a7; cursor: not-allowed; }

/* Buttons */
.wirr-actions{ margin-top: 4px; display: flex; justify-content: flex-end; }
.wirr-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 12px 16px; border-radius: 12px; border: 0;
  font-weight: 900; cursor: pointer; transition: transform .06s ease, filter .2s ease;
}
.wirr-btn-primary{
  background: linear-gradient(180deg, #19c37d, #07a76a);
  color: #052317;
  box-shadow: 0 8px 18px rgba(25,195,125,.25);
}
.wirr-btn-primary:hover{ filter: brightness(1.02); transform: translateY(-1px); }
.wirr-btn:disabled{ opacity: .55; cursor: not-allowed; }

.wirr-fin-box.wirr-card {}
.wirr-fin-box__row{ display:flex; align-items:center; justify-content:space-between; }
.wirr-fin-box__title{ font-weight:800; color:#0b2535; }
.wirr-fin-box__amount{ font-weight:900; font-size:20px; color:#0a3148; }

/* ====== [NOVO] Efeitos de luz durante o giro ====== */
@keyframes wirrPlatePulse {
  0%,100% { box-shadow:
      inset 0 0 0 16px rgba(255,255,255,.12),
      inset 0 0 46px rgba(124,77,255,.35),
      0 26px 70px rgba(0,0,0,.65); }
  50% { box-shadow:
      inset 0 0 0 16px rgba(255,255,255,.18),
      inset 0 0 70px rgba(124,77,255,.55),
      0 36px 90px rgba(0,0,0,.75); }
}

.wirr-wheel-wrap.spinning .wirr-plate{
  animation: wirrPlatePulse .8s ease-in-out infinite;
}

.wirr-wheel-wrap.spinning .wirr-bulbs circle{
  animation-duration: 1.1s;
  filter:
    drop-shadow(0 0 6px rgba(124,77,255,.75))
    drop-shadow(0 0 12px rgba(101,225,255,.55));
}

/* ====== [NOVO] Destaque do ganhador ====== */
@keyframes wirrWinnerGlow {
  0%,100% { box-shadow:
    0 10px 22px rgba(0,0,0,.45),
    0 0 0 3px rgba(124,77,255,.35),
    0 0 16px rgba(255,215,106,.35),
    0 0 32px rgba(101,225,255,.25); }
  50% { box-shadow:
    0 12px 26px rgba(0,0,0,.55),
    0 0 0 3px rgba(124,77,255,.50),
    0 0 24px rgba(255,215,106,.55),
    0 0 42px rgba(101,225,255,.38); }
}

.wirr-winner-photo img.winner-glow{
  animation: wirrWinnerGlow 1.6s ease-in-out 3; /* 3 ciclos e para */
}


/* ===========================================================
   ROLETAR MAIS E MAIS DEVAGAR + AVATAR 90°
   Cole abaixo do seu CSS atual
   =========================================================== */

/* 1) Variáveis de controle do giro */
:root{
  /* Duração total do giro (aumente pra “mais devagar”) */
  --wirr-spin-duration: 11s;
  /* Quantos giros completos quando usar a animação CSS (opcional) */
  --wirr-spin-rotations: 9.5turn;
  /* Curva de desaceleração (ease-out “macio”) */
  --wirr-spin-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 2) Se o JS troca o transform do #gRotor, alongamos a transição */
.wirr-rotor #gRotor{
  /* garante desempenho e transição longa com desaceleração */
  will-change: transform;
  transition: transform var(--wirr-spin-duration) var(--wirr-spin-ease);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* 3) (Opcional) Se você usa a classe .spinning, força uma animação longa
      Mesmo que o JS só adicione/remova a classe, isso já dá vários giros */
.wirr-wheel-wrap.spinning .wirr-rotor #gRotor{
  animation: wirrSpin var(--wirr-spin-duration) var(--wirr-spin-ease) forwards;
}
@keyframes wirrSpin{
  from { transform: rotate(0turn); }
  to   { transform: rotate(var(--wirr-spin-rotations)); }
}

/* 4) Deixa as luzes e o “plate” acompanharem o ritmo mais lento */
.wirr-wheel-wrap.spinning .wirr-bulbs circle{
  animation-duration: 1.4s; /* antes era 1.1s */
}
.wirr-wheel-wrap.spinning .wirr-plate{
  animation-duration: 1.1s; /* suaviza o pulso enquanto gira */
}