/* APOIO-SLOTS — Sete de Ouro (6º jogo). Caça-níquel clássico: gabinete de madeira escura e latão, 3 rolos de marfim,
   lâmpadas que correm em volta, alavanca de verdade. Tela cheia, celular primeiro. */
.sete{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;overflow-y:auto;color:#f4ecdd;font-family:var(--font);
  background:radial-gradient(90% 55% at 50% 30%,#3a1414,#140707 60%,#080404);padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.sete[hidden]{display:none}
.sete>*{flex-shrink:0}
@media (min-width:700px){.sete{padding-left:max(0px,calc(50% - 260px));padding-right:max(0px,calc(50% - 260px))}}

.seTopo{display:flex;align-items:center;gap:10px;padding:18px 18px 10px}
.seMarca{font-family:var(--serif);font-size:20px;font-weight:700;color:#f2d79a;letter-spacing:-.01em;line-height:1}
.seMarca span{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:6px;border-radius:8px;background:#b0201f;color:#fff3cf;font-size:20px;box-shadow:inset 0 -2px 0 #6e0f0f}
.seMarca small{display:block;margin-top:6px;font-family:var(--font);font-size:8px;font-weight:600;letter-spacing:.3em;color:#a98a62}
.seSaldo{margin-left:auto;text-align:right;line-height:1.1}
.seSaldo small{display:block;font-size:10px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.12em}
.seSaldo strong{font-size:18px;font-weight:800;font-feature-settings:"tnum" 1}
.seFechar{width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:26px;line-height:1;color:#f1d3a0}

/* o gabinete */
.seMaquina{position:relative;margin:6px 14px 0;padding:58px 18px 26px;border-radius:30px;
  background:linear-gradient(180deg,#5a1a14,#2c0c09 45%,#1b0706);
  box-shadow:inset 0 0 0 2px #c9a45c,inset 0 0 0 6px #2a0b08,inset 0 0 0 8px #8a6a33,0 30px 60px rgba(0,0,0,.55)}
.seLuzes{position:absolute;inset:10px;pointer-events:none;border-radius:24px}
.seLuzes i{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffe39a;box-shadow:0 0 8px #ffcf5a;opacity:.35;animation:seLampada 1.4s linear infinite}
/* 22 lâmpadas em volta (topo, lados) */
.seLuzes i:nth-child(-n+8){top:0}
.seLuzes i:nth-child(1){left:8%}.seLuzes i:nth-child(2){left:20%}.seLuzes i:nth-child(3){left:32%}.seLuzes i:nth-child(4){left:44%}
.seLuzes i:nth-child(5){left:56%}.seLuzes i:nth-child(6){left:68%}.seLuzes i:nth-child(7){left:80%}.seLuzes i:nth-child(8){left:92%}
.seLuzes i:nth-child(n+9):nth-child(-n+15){right:0}
.seLuzes i:nth-child(9){top:14%}.seLuzes i:nth-child(10){top:27%}.seLuzes i:nth-child(11){top:40%}.seLuzes i:nth-child(12){top:53%}.seLuzes i:nth-child(13){top:66%}.seLuzes i:nth-child(14){top:79%}.seLuzes i:nth-child(15){top:92%}
.seLuzes i:nth-child(n+16){left:0}
.seLuzes i:nth-child(16){top:92%}.seLuzes i:nth-child(17){top:79%}.seLuzes i:nth-child(18){top:66%}.seLuzes i:nth-child(19){top:53%}.seLuzes i:nth-child(20){top:40%}.seLuzes i:nth-child(21){top:27%}.seLuzes i:nth-child(22){top:14%}
.seLuzes i:nth-child(odd){animation-delay:-.7s}
@keyframes seLampada{0%,100%{opacity:.25}50%{opacity:1}}
.sete[data-girando="sim"] .seLuzes i{animation-duration:.35s}
.seGanhou .seLuzes i,.seDisfarce .seLuzes i{animation:seFesta .18s linear infinite;background:#fff6d6}
@keyframes seFesta{50%{opacity:.2}}

.seLetreiro{position:absolute;left:50%;top:22px;transform:translateX(-50%);padding:5px 16px;border-radius:999px;white-space:nowrap;
  font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:.16em;color:#2a1300;background:linear-gradient(180deg,#ffe3a0,#d6a648);box-shadow:0 4px 14px rgba(214,166,72,.35)}

/* a janela dos rolos: 3 símbolos visíveis, a linha no meio */
.seJanela{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:252px;padding:0;border-radius:16px;overflow:hidden;
  background:#0b0303;box-shadow:inset 0 0 0 3px #1d0807,inset 0 10px 24px rgba(0,0,0,.8)}
.seRolo{position:relative;overflow:hidden;background:linear-gradient(180deg,#bfb5a3,#fffaf0 22%,#fffaf0 78%,#bfb5a3)}
.seFita{position:absolute;left:0;right:0;top:0;will-change:transform}
.seFita b{display:grid;place-items:center;height:84px;font-family:var(--serif);font-size:52px;font-weight:700;line-height:1;color:#1d1b17}
.seFita b.s0{color:#b0201f;text-shadow:0 2px 0 #f2c060}
.seFita b.s1{color:#c78f1e}.seFita b.s2{color:#b0201f}.seFita b.s3{color:#1d1b17}.seFita b.s4{color:#1f5a43}
.seLinha{position:absolute;left:-4px;right:-4px;top:50%;height:3px;margin-top:-1.5px;background:#e8463f;box-shadow:0 0 10px rgba(232,70,63,.8);pointer-events:none}
.seLinha::before,.seLinha::after{content:"";position:absolute;top:50%;width:0;height:0;border:9px solid transparent;margin-top:-9px}
.seLinha::before{left:0;border-left-color:#e8463f}.seLinha::after{right:0;border-right-color:#e8463f}
.seVidro{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent 26%,transparent 74%,rgba(0,0,0,.55)),
  linear-gradient(115deg,rgba(255,255,255,.14),transparent 30%)}
.seSuspense .seRolo:nth-child(3){box-shadow:inset 0 0 0 3px #ffd36a,0 0 26px #ffcf5a;animation:seTreme .12s linear infinite}
@keyframes seTreme{50%{transform:translateX(1px)}}
.seQuase .seRolo:nth-child(-n+2){box-shadow:inset 0 0 0 3px #ffd36a}
.seGanhou .seJanela{box-shadow:inset 0 0 0 3px #ffd36a,0 0 40px rgba(255,211,106,.5)}

/* resultado */
.seResultado{min-height:64px;margin-top:14px;text-align:center}
.seResultado small{display:block;font-size:11px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.6)}
.seResultado strong{display:block;margin-top:4px;font-family:var(--serif);font-size:30px;font-weight:700;font-feature-settings:"tnum" 1}
.seGanhou .seResultado,.seDisfarce .seResultado{animation:seRevela .6s cubic-bezier(.34,1.56,.64,1)}
.seGanhou .seResultado strong,.seDisfarce .seResultado strong{color:#ffe39a;text-shadow:0 0 22px rgba(255,211,106,.6)}
.seDisfarce .seResultado small{color:#ffe39a;font-size:15px}
.seQuase .seResultado small{color:#ffd36a}.seQuase .seResultado strong{color:#ffb3a8;font-size:22px}
.sePerdeu .seResultado strong{color:#ff8a90}
@keyframes seRevela{0%{transform:scale(.6);opacity:0}100%{transform:none;opacity:1}}

/* a alavanca */
.seAlavanca{position:absolute;right:-10px;top:90px;width:26px;height:150px;padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 100%}
.seAlavanca i{position:absolute;left:10px;bottom:0;width:7px;height:120px;border-radius:4px;background:linear-gradient(90deg,#8a8f96,#e9edf1,#8a8f96);transform-origin:50% 100%}
.seAlavanca b{position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a7a,#b0201f 60%,#5e0d0d);box-shadow:0 4px 8px rgba(0,0,0,.5)}
.seAlavanca.puxou{animation:sePuxa .7s cubic-bezier(.3,1.4,.5,1)}
@keyframes sePuxa{30%{transform:scaleY(-.55)}}
.seAlavanca:disabled{cursor:default}

/* painel */
.sePainel{display:grid;gap:10px;margin:14px 14px 0;padding:12px;border-radius:20px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.seValor{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:center}
.seValor small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.seValor strong{font-size:22px;font-weight:800;font-feature-settings:"tnum" 1}
.seValor button{width:52px;height:46px;border-radius:12px;font-size:24px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.seBotao{min-height:64px;border-radius:18px;font-size:19px;font-weight:800;letter-spacing:.05em;color:#2a1300;
  background:linear-gradient(180deg,#ffe3a0,#d6a648);box-shadow:0 0 0 1px #fff0c7 inset,0 6px 0 #8a6a33,0 14px 30px rgba(214,166,72,.3);transition:transform .1s,box-shadow .1s}
.seBotao:active{transform:translateY(5px);box-shadow:0 0 0 1px #fff0c7 inset,0 1px 0 #8a6a33}
.seBotao:disabled,.seValor button:disabled{opacity:.55}
.seHistorico{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-height:26px}
.seHistorico::-webkit-scrollbar{display:none}
.seHistorico span{flex:none;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5)}
.seHistorico .ganho{color:#7fe0a8}.seHistorico .jackpot{color:#fff;background:#b0201f}.seHistorico .meia{color:#ffe39a}.seHistorico .quase{color:#ffb3a8}

.seTabela{margin:10px 14px 18px;padding:10px 14px;border-radius:16px;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:14px}
.seTabela summary{cursor:pointer;font-weight:700;color:#f2d79a}
.seTabela ul{list-style:none;margin:10px 0 6px;padding:0;display:grid;gap:6px}
.seTabela li{display:flex;justify-content:space-between;gap:10px;color:rgba(255,255,255,.75)}
.seTabela li span{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.08em}
.seTabela .s0,.seTabela .s2{color:#ff6b6b}.seTabela .s1{color:#f2c060}.seTabela .s3{color:#e9e4da}.seTabela .s4{color:#7fe0a8}
.seTabela p{margin:6px 0 0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.5)}
/* "reduzir movimento" do sistema não desliga as animações: a experiência é o produto (decisão do usuário) */

/* ---------- o drama do giro (efeitos.js faz as faíscas, o tremor e os raios de luz) ---------- */
.sete{overflow-x:hidden}
.seMaquina{isolation:isolate}
.seRolo.seGira .seFita{filter:blur(1.6px)}
.sete.seRodando .seMaquina{box-shadow:0 0 0 2px rgba(255,211,106,.5),0 0 60px rgba(255,190,80,.45)}
.seRolo.seImpacto::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,246,214,.85) 50%,rgba(255,255,255,0));animation:seImpacto .4s ease-out forwards}
@keyframes seImpacto{from{opacity:1;transform:scaleY(.2)}to{opacity:0;transform:scaleY(1.2)}}
.seSuspense .seRolo:nth-child(-n+2){filter:brightness(.55);transition:filter .3s}
.seSuspense .seRolo:nth-child(-n+2) .seFita b.s0{filter:brightness(1.9) drop-shadow(0 0 10px #ffcf5a)}
.sete.seSuspense::before{content:"";position:fixed;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 38%,transparent 28%,rgba(20,0,0,.7) 80%);animation:seVinheta .6s ease-in-out infinite alternate}
@keyframes seVinheta{to{opacity:.6}}
.seBotao.seConvida{animation:seConvida 1.15s ease-in-out infinite}
@keyframes seConvida{50%{transform:scale(1.03);box-shadow:0 0 0 1px #fff0c7 inset,0 6px 0 #8a6a33,0 0 34px rgba(255,211,106,.85)}}

/* ---------- a festa: holofotes, globo de discoteca, figurinhas e o gatinho da sorte (sete.js) ---------- */
.seFesta{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sete>*:not(.seFesta){position:relative;z-index:1}
.seHolofotes{position:absolute;left:50%;top:-10%;width:220vmax;height:220vmax;margin-left:-110vmax;margin-top:-110vmax;opacity:.32;
  background:conic-gradient(from 0deg,transparent 0 6%,#ff4f7b55 7% 9%,transparent 10% 22%,#3ee0ff4d 23% 25%,transparent 26% 40%,#ffd23f55 41% 43%,transparent 44% 58%,#7dff6a40 59% 61%,transparent 62% 76%,#c47bff55 77% 79%,transparent 80%);
  animation:seGiraLuz 14s linear infinite}
.sete.seGanhou .seHolofotes,.sete.seDisfarce .seHolofotes{opacity:.7;animation-duration:3s}
.sete.seRodando .seHolofotes{animation-duration:6s;opacity:.45}
@keyframes seGiraLuz{to{transform:rotate(360deg)}}
.seGlobo{position:absolute;top:-18px;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:50%;
  background:repeating-linear-gradient(90deg,#cfd6e6 0 7px,#7c8599 7px 8px),#cfd6e6;box-shadow:0 0 24px #fff8,inset -10px -10px 20px #0006;overflow:hidden}
.seGlobo i{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,#5b6375 7px 8px);animation:seGlobo 2.4s linear infinite}
.seGlobo::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,#fff 0 6%,transparent 14%);animation:seBrilhoGlobo 1.2s steps(4) infinite}
@keyframes seGlobo{to{transform:translateX(8px)}}
@keyframes seBrilhoGlobo{25%{background-position:12px 8px}50%{background-position:24px 2px}75%{background-position:6px 18px}}
.seFigurinhas span{position:absolute;left:calc(4% + var(--i) * 9.6%);bottom:-60px;font-size:28px;opacity:.5;filter:saturate(1.4);
  animation:seSobe calc(9s + var(--i) * 1.3s) linear infinite;animation-delay:calc(var(--i) * -1.7s)}
.sete.seGanhou .seFigurinhas span{opacity:.95;animation-duration:2.6s}
@keyframes seSobe{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-55vh) translateX(18px) rotate(160deg)}100%{transform:translateY(-115vh) rotate(360deg)}}

.seGato{position:absolute;right:-6px;top:-62px;width:92px;height:100px;padding:0;border:0;background:none;z-index:6;cursor:pointer;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.5));transform-origin:50% 100%;animation:seRespira 2.6s ease-in-out infinite}
.seGatoSvg{width:100%;height:100%;overflow:visible}
@keyframes seRespira{50%{transform:scale(1.03,.97)}}
.seGato .sePata{transform-origin:92px 70px;animation:seAcena 1.1s ease-in-out infinite}
@keyframes seAcena{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
.seGato .seRabo{transform-origin:92px 112px;animation:seRabo 1.6s ease-in-out infinite}
@keyframes seRabo{50%{transform:rotate(14deg)}}
.seOlhos{display:none}
.sete[data-gato="normal"] .seOlhoNormal,.sete[data-gato="girando"] .seOlhoNormal{display:inline;animation:sePisca 4s infinite}
@keyframes sePisca{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
.seOlhoNormal{transform-origin:60px 44px}
.sete[data-gato="festa"] .seOlhoEstrela{display:inline;transform-origin:60px 44px;animation:seEstrela .5s ease-in-out infinite alternate}
@keyframes seEstrela{to{transform:scale(1.15)}}
.sete[data-gato="tonto"] .seOlhoTonto{display:inline}
.sete[data-gato="tonto"] .seOlhoTonto path{transform-box:fill-box;transform-origin:center;animation:seGiraOlho .6s linear infinite}
@keyframes seGiraOlho{to{transform:rotate(360deg)}}
.sete[data-gato="triste"] .seOlhoTriste{display:inline}
.sete[data-gato="tenso"] .seOlhoTenso{display:inline}
.sete[data-gato="girando"] .seGato .sePata{animation-duration:.28s}
.sete[data-gato="girando"] .seGato .seRabo{animation-duration:.5s}
.sete[data-gato="tenso"] .seGato{animation:seTreme .09s linear infinite}
@keyframes seTreme{0%{transform:translate(1px,0)}50%{transform:translate(-1px,1px)}100%{transform:translate(0,-1px)}}
.sete[data-gato="festa"] .seGato{animation:sePula .55s cubic-bezier(.3,1.6,.5,1) infinite}
@keyframes sePula{0%,100%{transform:translateY(0) rotate(0)}40%{transform:translateY(-26px) rotate(-10deg) scale(1.08)}70%{transform:translateY(-8px) rotate(8deg)}}
.sete[data-gato="festa"] .seGato .sePata{animation-duration:.22s}
.sete[data-gato="tonto"] .seGato{animation:seTonto 1.3s ease-in-out infinite}
@keyframes seTonto{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg) translateX(-4px)}}
.sete[data-gato="triste"] .seGato{animation:none;transform:translateY(5px) scale(.95,1.02)}
.sete[data-gato="triste"] .seGato .sePata{animation:none;transform:rotate(30deg) translateY(10px)}
.sete[data-gato="triste"] .seBoca{d:path("M52 63q8-6 16 0")}
.sete[data-gato="tenso"] .seBoca{d:path("M54 61h12")}
.sete[data-gato="festa"] .seBoca{d:path("M50 58q10 12 20 0z");fill:#f08aa0}
.seFala{position:absolute;right:76px;top:-56px;max-width:190px;margin:0;padding:8px 12px;border-radius:14px 14px 4px 14px;background:#fff;color:#2a1b14;
  font-weight:800;font-size:14px;line-height:1.2;box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:7;opacity:0;transform:scale(.6) translateY(8px);transform-origin:100% 100%;
  transition:opacity .2s,transform .3s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.seFala.on{opacity:1;transform:none}
.seMaquina{margin-top:74px}
.sete>.seTopo{z-index:8}