/* DEZENINHAS — base compartilhada */
:root{
  --gold:#ffcc66;
  --red:#ff2b2b;
  --dark:#140000;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:
    radial-gradient(circle at 20% 10%, rgba(255,204,102,.22), transparent 40%),
    radial-gradient(circle at 80% 15%, rgba(255,60,60,.22), transparent 45%),
    radial-gradient(circle at bottom, #ff2b2b 0%, #5a0000 48%, #140000 100%);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#fff;padding:16px;
}
.brand{
  font-weight:950;letter-spacing:-.02em;font-size:28px;color:var(--gold);
  text-shadow:0 0 18px rgba(255,204,102,.75),0 2px 0 rgba(0,0,0,.35);
  margin:0 0 4px;text-align:center;
  animation:brandGlow 2.8s ease-in-out infinite;
}
@keyframes brandGlow{
  0%,100%{text-shadow:0 0 14px rgba(255,204,102,.55),0 2px 0 rgba(0,0,0,.35)}
  50%{text-shadow:0 0 26px rgba(255,204,102,.95),0 0 60px rgba(255,204,102,.35),0 2px 0 rgba(0,0,0,.35)}
}
.brand small{display:block;font-size:12px;color:rgba(255,255,255,.85);font-weight:600;letter-spacing:.06em}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.35);border:1px solid rgba(255,204,102,.5);
  border-radius:999px;padding:8px 16px;font-weight:900;font-size:14px;color:var(--gold);
  box-shadow:0 0 14px rgba(255,204,102,.25);
  transition:.2s;
}
.chip.pop{animation:chipPop .45s ease}
@keyframes chipPop{35%{transform:scale(1.22)}70%{transform:scale(.95)}}
.chip.low{border-color:#ff8a5c;color:#ffb08a;animation:lowBlink 1.1s ease-in-out infinite}
@keyframes lowBlink{50%{box-shadow:0 0 18px rgba(255,120,60,.6)}}
.card{
  background:linear-gradient(180deg,#ff3b3b 0%,#b80000 45%,#5c0000 100%);
  border-radius:28px;padding:20px 18px;
  width:min(400px,100%);
  box-shadow:0 34px 90px rgba(0,0,0,.72),inset 0 0 0 4px rgba(255,90,90,.9),inset 0 -20px 40px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
.btn{
  display:block;width:100%;text-align:center;
  background:linear-gradient(180deg,#ffd36a,#ffb300);
  color:#3a0000;font-weight:950;font-size:16px;
  padding:14px;border-radius:16px;border:none;cursor:pointer;
  text-decoration:none;min-height:52px;touch-action:manipulation;
  box-shadow:0 8px 0 #7a5200,0 16px 26px rgba(0,0,0,.5);
  transition:.15s;
  position:relative;overflow:hidden;
}
.btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  animation:shine 2.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shine{0%,60%{left:-80%}100%{left:130%}}
.btn:active{transform:translateY(5px);box-shadow:0 3px 0 #7a5200,0 8px 14px rgba(0,0,0,.5)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.red{background:linear-gradient(180deg,#ff4b4b,#8b0000);color:#fff;box-shadow:0 8px 0 #4a0000,0 16px 26px rgba(0,0,0,.5)}
.btn.red:active{box-shadow:0 3px 0 #4a0000,0 8px 14px rgba(0,0,0,.5)}
input.field{
  width:100%;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);color:#fff;font-size:16px;font-weight:600;outline:none;
}
input.field:focus{border-color:var(--gold);box-shadow:0 0 10px rgba(255,204,102,.35)}
label.lbl{display:block;font-size:12px;font-weight:800;margin:12px 0 6px;color:rgba(255,255,255,.85);letter-spacing:.04em}
.note{
  margin-top:12px;font-size:12px;color:rgba(255,255,255,.85);text-align:center;
  padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.10);
}
/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.show{display:flex}
.modal{
  background:linear-gradient(180deg,#ff1f1f,#7a0000);
  padding:24px 18px 18px;border-radius:22px;width:min(350px,100%);text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.14);
  animation:pop .22s ease;
}
@keyframes pop{from{transform:scale(.88);opacity:0}to{transform:scale(1);opacity:1}}
.modal h2{margin:0 0 6px;font-size:22px;font-weight:950;color:var(--gold);text-shadow:0 0 14px rgba(255,204,102,.7)}
.modal .big{font-size:26px;font-weight:950;margin:10px 0 14px}
.modal .sub2{font-size:13px;color:rgba(255,255,255,.9);margin:0 0 14px}
.modal .close{
  margin-top:10px;display:inline-block;font-size:12px;color:rgba(255,255,255,.85);
  text-decoration:none;padding:10px 14px;border-radius:12px;background:rgba(0,0,0,.20);
  border:1px solid rgba(255,255,255,.12);cursor:pointer;
}
.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{50%{transform:scale(1.05)}}
.backlink{margin-top:14px;font-size:13px;color:rgba(255,255,255,.8);text-decoration:none}
.backlink:hover{color:#fff}
/* botão Instagram bem visível */
.igbtn{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  background:linear-gradient(45deg,#f9ce34,#ee2a7b 55%,#6228d7);
  color:#fff;font-weight:950;font-size:14px;text-decoration:none;
  padding:12px 22px;border-radius:999px;
  box-shadow:0 8px 22px rgba(238,42,123,.45),0 0 0 2px rgba(255,255,255,.25);
  transition:.15s;
}
.igbtn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(238,42,123,.6),0 0 0 2px rgba(255,255,255,.4)}
.igbtn:active{transform:scale(.97)}
.iglink{display:inline-block;margin-top:12px;font-size:12.5px;font-weight:800;color:#fff;text-decoration:underline}
.btn.mini{font-size:13px;padding:11px;min-height:44px;margin-top:10px;box-shadow:0 5px 0 #7a5200,0 10px 18px rgba(0,0,0,.4)}
/* banner do sorteio atual */
.acao{
  display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;
  width:min(400px,100%);margin:14px 0 0;padding:14px 16px;border-radius:18px;
  background:linear-gradient(120deg,#3a1d00,#6b3a00 45%,#3a1d00);
  border:2px solid var(--gold);
  box-shadow:0 0 22px rgba(255,204,102,.35),inset 0 0 30px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
.acao::after{
  content:"";position:absolute;top:0;bottom:0;left:-80%;width:40%;
  background:linear-gradient(105deg,transparent,rgba(255,220,130,.35),transparent);
  transform:skewX(-18deg);animation:shine 3.4s ease-in-out infinite;
}
.acao .tk{font-size:34px;flex:none;animation:icoBob 2.6s ease-in-out infinite}
.acao b{display:block;font-size:15px;color:var(--gold)}
.acao span{font-size:12px;color:rgba(255,255,255,.85)}
.acao .go{
  margin-left:auto;flex:none;font-size:11px;font-weight:950;color:#3a0000;
  background:linear-gradient(180deg,#ffd36a,#ffb300);border-radius:999px;padding:8px 12px;
  box-shadow:0 3px 0 #7a5200;white-space:nowrap;
}
@media (prefers-reduced-motion: reduce){.acao::after,.acao .tk,.igbtn{animation:none !important}}
/* hub */
.games{display:grid;gap:12px;margin-top:16px}
.game-card{
  display:flex;align-items:center;gap:14px;text-decoration:none;color:#fff;
  background:rgba(0,0,0,.30);border:1px solid rgba(255,204,102,.35);border-radius:18px;padding:14px 16px;
  transition:transform .18s, box-shadow .18s, border-color .18s;
  animation:cardIn .5s ease backwards;
}
.game-card:nth-child(2){animation-delay:.08s}
.game-card:nth-child(3){animation-delay:.16s}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}}
.game-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 16px rgba(255,204,102,.25)}
.game-card:active{transform:scale(.98)}
.game-card .ico{font-size:34px;animation:icoBob 2.4s ease-in-out infinite}
.game-card:nth-child(2) .ico{animation-delay:.4s}
.game-card:nth-child(3) .ico{animation-delay:.8s}
@keyframes icoBob{50%{transform:translateY(-4px) rotate(-6deg)}}
.game-card b{font-size:16px;display:block}
.game-card span{font-size:12px;color:rgba(255,255,255,.75)}
.game-card .go{
  margin-left:auto;flex:none;font-size:11px;font-weight:950;color:#3a0000;
  background:linear-gradient(180deg,#ffd36a,#ffb300);border-radius:999px;padding:7px 12px;
  box-shadow:0 3px 0 #7a5200;
}
.game-card.off{opacity:.45;pointer-events:none;filter:grayscale(.7)}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:10px;height:14px;opacity:.95;animation:fall linear forwards}
.confetti b{position:absolute;top:-30px;font-size:22px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.flashWin{position:fixed;inset:0;background:rgba(255,204,102,.28);pointer-events:none;z-index:55;animation:flashOut .5s ease forwards}
@keyframes flashOut{to{opacity:0}}
@media (prefers-reduced-motion: reduce){
  .brand,.chip.low,.btn::after,.game-card,.game-card .ico,.pulse{animation:none !important}
  .confetti,.flashWin{display:none}
  *{transition-duration:.01s !important}
}