/* GERADO de site/index.html por ferramentas/gerar-comum.js. CONGELADO: o protótipo não se mexe mais e este
   gerador não se roda mais (ver ../../CLAUDE.md). Para mudar o que está aqui, sobrescreva em tela.css,
   que carrega depois deste arquivo. */
:root{
  --ground:#EEEFF1; --surface:#FFFFFF; --ink:#121418; --ink2:#575D68; --rule:#D5D8DD;
  --acc:#A65F00; --ok:#0F8A4B; --warn:#C8372D; --soft:#FFF0D6;
  /* mundo do jogo: visual único, igual nos dois temas */
  --g-bg:#0B0C0E; --g-panel:#16181C; --g-panel2:#23262C; --g-rule:#2C3038; --g-text:#F1F2F4; --g-dim:#949BA7;
  --g-haz:#FFD400; --g-btc:#F7931A; --g-led:#35E07A; --g-red:#FF5A4D;
  --display:"Saira Stencil One","Arial Black",Impact,sans-serif;
  --body:"Saira","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0B0C0E; --surface:#15171B; --ink:#EEF0F3; --ink2:#A1A8B3; --rule:#262A31;
    --acc:#F7931A; --ok:#35E07A; --warn:#FF6B5E; --soft:#33260F;
  }
}
:root[data-theme="dark"]{
  --ground:#0B0C0E; --surface:#15171B; --ink:#EEF0F3; --ink2:#A1A8B3; --rule:#262A31;
  --acc:#F7931A; --ok:#35E07A; --warn:#FF6B5E; --soft:#33260F;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
h1,h2,h3,h4,h5,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
button,input{font-family:inherit}
/* ---------- celular ---------- */
.phone{width:min(340px,100%);height:712px;border-radius:40px;padding:10px;background:#020203;box-shadow:0 30px 60px -30px rgba(0,0,0,.6),inset 0 0 0 2px #2C3038;flex:none}
.p-screen{height:100%;border-radius:30px;overflow:hidden;background:var(--g-bg);color:var(--g-text);display:flex;flex-direction:column;font:500 13px/1.3 var(--body);position:relative}
.p-top{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 8px;font-size:12px;color:var(--g-dim);flex:none}
.p-top b{color:var(--g-text);font-weight:700;font-variant-numeric:tabular-nums}
.p-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--g-led);margin-right:6px}
.p-wallet{background:var(--g-panel);border-radius:6px;padding:5px 10px}
.p-game{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.p-scene{position:relative;height:180px;flex:none;overflow:hidden;background:#000 center/cover no-repeat}
.p-scene canvas{display:block;position:relative;width:100%;height:100%}
.ph-l{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.ph-l[data-on]{opacity:1}
.tag{all:unset;box-sizing:border-box;position:absolute;top:8px;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:6px 8px;border-radius:5px;background:rgba(11,12,14,.84);color:#fff;box-shadow:inset 0 0 0 1px var(--g-rule);white-space:nowrap}
.tag.l{left:8px}
.p-strip{position:absolute;left:8px;right:8px;bottom:10px;display:flex;gap:5px;flex-wrap:wrap}
.mchip{display:inline-flex;align-items:center;gap:5px;padding:3px 7px 3px 3px;border-radius:7px;background:rgba(11,12,14,.84);box-shadow:inset 0 0 0 1px var(--g-rule);font:700 11px/1 var(--body);color:#fff}
.mchip i{display:block;width:34px;height:22px;border-radius:4px;background:#23262C center/cover no-repeat}
.mchip i.mi-hyd{background-image:radial-gradient(circle at 30% 55%,#2F7BFF 0 4px,transparent 5px),radial-gradient(circle at 70% 55%,#FF4D42 0 4px,transparent 5px),linear-gradient(#B9C1C9,#8D96A0)}
.mchip u{width:6px;height:6px;border-radius:50%;background:var(--g-led);text-decoration:none}
.mchip[data-off]{opacity:.7}.mchip[data-off] u{background:#FFB020}
.p-next{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.p-next i{display:block;height:100%;width:0;background:var(--g-btc)}
.p-pop{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);white-space:nowrap;font:700 12px/1 var(--mono);background:var(--g-btc);color:#1B0F00;padding:7px 10px;border-radius:6px;animation:rise 1.6s ease-out forwards;pointer-events:none}
.p-mined{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;padding:0 14px;flex:none}
.p-mined small{display:block;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--g-dim)}
.p-mined b{display:block;font:400 28px/1 var(--display);color:var(--g-btc);font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:.02em}
.p-mined b span{font:600 12px/1 var(--body);color:var(--g-dim);letter-spacing:0;margin-left:4px}
.p-mined em{font:600 12px/1.2 var(--body);font-style:normal;color:var(--g-text);white-space:nowrap}
.p-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 12px;flex:none}
.p-kpi div{background:var(--g-panel);border-radius:8px;padding:7px 8px}
.p-kpi small{display:block;font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.p-kpi b{display:block;font:700 14px/1.1 var(--body);margin-top:4px;font-variant-numeric:tabular-nums;white-space:nowrap}
.p-day{margin:0 12px;background:var(--g-panel);border-radius:10px;padding:4px 10px;flex:none}
.p-day div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline;padding:5px 0;font-size:12px;color:var(--g-dim);border-bottom:1px solid var(--g-rule);font-variant-numeric:tabular-nums}
.p-day div:last-child{border-bottom:0;color:var(--g-text);font-weight:700}
.p-day b{font:500 12px/1 var(--mono);color:var(--g-text);white-space:nowrap}
.p-day i{font:500 11px/1 var(--mono);font-style:normal;min-width:62px;text-align:right;white-space:nowrap}
.p-day .net b,.p-day .net i{color:var(--g-led)} .p-day .net[data-neg] b,.p-day .net[data-neg] i{color:var(--g-red)}
.p-phase{margin:0 12px;display:flex;flex-direction:column;gap:5px;flex:none;font:500 11px/1.25 var(--body);color:var(--g-dim)}
.p-phase b{color:var(--g-haz);font-weight:700}
.p-phase u{display:block;height:6px;border-radius:3px;background:var(--g-panel2);overflow:hidden;text-decoration:none}
.p-phase u i{display:block;height:100%;width:0;background:repeating-linear-gradient(135deg,#FFD400 0 6px,#8A7300 6px 12px)}
.p-cta{all:unset;box-sizing:border-box;margin:0 12px;text-align:center;font:400 16px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;padding:12px;border-radius:9px;background:var(--g-btc);color:#1B0F00;cursor:pointer;flex:none}
.p-screen :focus-visible{outline:2px solid var(--g-haz);outline-offset:2px}
.p-feed{flex:1;min-height:0;overflow:hidden;padding:8px 14px 0;display:flex;flex-direction:column;gap:5px;font:500 11px/1.3 var(--mono);color:var(--g-dim);border-top:1px solid var(--g-rule)}
.p-feed li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-feed b{color:var(--g-text);font-weight:500} .p-feed .ok{color:var(--g-led)} .p-feed .ev{color:var(--g-haz)} .p-feed .bad{color:var(--g-red)}
.p-tabs{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--g-rule);background:var(--g-bg);flex:none}
.p-tabs button{all:unset;box-sizing:border-box;text-align:center;padding:13px 0 15px;font:600 11px/1 var(--body);color:var(--g-dim);cursor:pointer;border-top:2px solid transparent;margin-top:-1px}
.p-tabs button[data-on]{color:var(--g-text);border-top-color:var(--g-btc)}
/* telas secundárias */
.p-alt{flex:1;min-height:0;overflow:auto;padding:6px 12px 14px;scrollbar-width:none}
.p-alt::-webkit-scrollbar{display:none}
.scr{display:flex;flex-direction:column;gap:9px}
.scr h3{font:400 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.scr h4{font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--g-dim);margin-top:6px}
.scr .fine{font-size:11.5px;color:var(--g-dim);line-height:1.4}
.scr button{all:unset;box-sizing:border-box;text-align:center;font:700 12px/1 var(--body);padding:10px 12px;border-radius:8px;background:var(--g-panel2);color:var(--g-text);cursor:pointer}
.scr button.primary{background:var(--g-btc);color:#1B0F00}
.scr button:disabled{opacity:.4;cursor:default}
.item{background:var(--g-panel);border-radius:12px;padding:10px;display:grid;grid-template-columns:84px 1fr;gap:10px}
.item .thumb{position:relative;width:84px;height:64px;border-radius:8px;overflow:hidden;background:#000 center/cover no-repeat}
.item .thumb canvas{display:block;width:100%;height:100%}
.item h5{margin:0;font:700 13.5px/1.2 var(--body)}
.item h5 small{display:block;font:500 10px/1.3 var(--mono);color:var(--g-dim);margin-top:2px}
.item dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;font-variant-numeric:tabular-nums}
.item dl div{background:var(--g-panel2);border-radius:6px;padding:5px 6px}
.item dt{font:500 8.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--g-dim)}
.item dd{font:700 11.5px/1.2 var(--body);margin-top:3px;white-space:nowrap}
.item dd.pos{color:var(--g-led)} .item dd.neg{color:var(--g-red)}
.item .buy{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;font:500 10.5px/1.3 var(--body);color:var(--g-dim)}
.kv{background:var(--g-panel);border-radius:10px;padding:9px 11px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.kv small{font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.kv b{font:700 15px/1.1 var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.kv span{grid-column:1/-1;font-size:11px;color:var(--g-dim);line-height:1.35}
.w-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* vídeo */
.p-video{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column}
/* janela do saque: cobre a tela do celular, fecha no botão, no Esc e tocando fora.
   Ela ROLA: com o "?" do prazo aberto a caixa passa de 580 px e não cabe em celular pequeno. Centrada por margin auto (que
   some quando falta espaço, em vez de cortar o topo como align-items:center faria) e com overflow no fundo escuro */
.p-jan{position:absolute;inset:0;z-index:8;display:flex;align-items:flex-start;justify-content:center;overflow:auto;overscroll-behavior:contain;padding:24px 24px 32px;background:rgba(6,8,11,.72);backdrop-filter:blur(3px)}
.p-jan .cx{margin:auto 0;background:var(--g-card,#14171d);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 20px;max-width:300px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.p-jan h4{font:400 22px/1.1 var(--display);text-transform:uppercase;letter-spacing:.03em;margin:0 0 10px}
.p-jan p{font-size:13px;line-height:1.5;color:var(--g-dim);margin:0 0 18px}
.p-jan button{width:100%;padding:13px;border:0;border-radius:10px;background:var(--g-haz);color:#121418;font:700 14px/1 var(--ui);cursor:pointer}
.p-jan .cx button + button{margin-top:8px;background:transparent;color:var(--g-dim);border:1px solid rgba(255,255,255,.14)}
/* janela do Pix */
.p-jan .px{max-width:320px}
.p-jan .px img{width:210px;height:210px;display:block;margin:10px auto 12px;border-radius:12px;background:#fff;padding:8px}
.p-jan .px .cod{font:400 10px/1.35 var(--mono);word-break:break-all;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px;max-height:56px;overflow:auto;color:var(--g-dim);margin-bottom:12px;text-align:left}
.p-jan .px .val{font:400 30px/1 var(--display);color:var(--g-haz);margin:2px 0 6px}
.p-jan .px .esp{font-size:12px;color:var(--g-dim);margin:12px 0 0;display:flex;align-items:center;justify-content:center;gap:8px}
.p-jan .px .esp i{width:9px;height:9px;border-radius:50%;background:var(--g-haz);animation:pulse 1.1s ease-in-out infinite}
.p-jan .px .ok{font:400 26px/1.1 var(--display);color:#49d17d;text-transform:uppercase}
.p-jan .px input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.25);color:inherit;font:400 20px/1 var(--display);text-align:center;margin-bottom:12px}
@media (prefers-reduced-motion:reduce){.p-jan .px .esp i{animation:none}}
.p-video{background:#000;justify-content:flex-end;cursor:pointer}
.p-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.v-ph{background-size:cover!important;background-position:center!important;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:repeating-linear-gradient(135deg,#121418 0 22px,#0B0C0E 22px 44px)}
.v-ph i{width:64px;height:64px;border-radius:50%;background:var(--g-haz);position:relative;animation:pulse 1s ease-in-out infinite}
.v-ph i::after{content:"";position:absolute;left:25px;top:18px;border:14px solid transparent;border-left:22px solid #121418;border-right:0}
.v-ph small{font:500 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--g-haz)}
.v-ph strong{font:400 30px/1.05 var(--display);text-transform:uppercase;letter-spacing:.04em}
.v-ph p{font-size:12px;color:var(--g-dim);max-width:30ch;line-height:1.4}
/* vídeo de verdade tocando: o cartaz vira legenda, embaixo, por cima do vídeo */
.v-ph[data-real]{background:linear-gradient(to top,rgba(0,0,0,.85) 0,rgba(0,0,0,.4) 24%,transparent 44%)!important;justify-content:flex-end;gap:6px;padding:24px 20px 48px;pointer-events:none}
.v-ph[data-real] i,.v-ph[data-real] small{display:none}
.v-ph[data-real] strong{font-size:26px;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.v-ph[data-real] p{color:#fff;font-size:13px;text-shadow:0 1px 8px rgba(0,0,0,.85)}
/* marca do jogo por cima do vídeo (o gerador de vídeo não escreve texto direito; aqui sai nítido) */
.v-marca{position:absolute;top:0;left:0;right:0;z-index:2;display:none;padding:13% 16px 0;padding-top:calc(13% + env(safe-area-inset-top,0px));text-align:center;font:400 26px/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 3px 14px rgba(0,0,0,.85);pointer-events:none;background:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 70%)}
.v-marca b{color:var(--g-haz);font-weight:400}
.v-ph[data-real] ~ .v-marca,.p-video:has(.v-ph[data-real]) .v-marca{display:block}
.v-bar{position:relative;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px 16px;background:linear-gradient(transparent,rgba(0,0,0,.85));font:500 11px/1 var(--body);color:#fff}
.v-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}
.v-prog i{display:block;height:100%;width:0;background:var(--g-haz)}

.tag.r2{right:8px}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.scr .packs button[data-on]{box-shadow:inset 0 0 0 2px var(--g-haz);color:var(--g-haz)}
.ext{display:flex;flex-direction:column;background:var(--g-panel);border-radius:10px;padding:2px 11px;font:500 11.5px/1 var(--mono);color:var(--g-dim)}
.ext li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--g-rule)}
.ext li:last-child{border-bottom:0}
.ext b{color:var(--g-led);font-weight:500;white-space:nowrap}
.ext b.neg{color:var(--g-dim)}
.p-mined b{white-space:nowrap}
.p-scene canvas.p-cubo{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transition:opacity .6s}
.p-cubo-pct{position:absolute;right:8px;bottom:12px;font:400 16px/1 var(--display);letter-spacing:.04em;color:var(--g-btc);text-shadow:0 0 10px rgba(247,147,26,.7),0 1px 2px #000;pointer-events:none;font-variant-numeric:tabular-nums}
.p-cubo-pct small{display:block;font:500 8.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:3px;text-align:right}
.p-day .inv{color:var(--g-text)}
.p-day .inv b{color:var(--g-btc);font-size:13px}
.p-day i{color:var(--g-dim)}
/* ---- quem está logado ---- */
.p-top{gap:8px}
/* ajuda: a luz que percorre a tela */
.p-aj{position:absolute;inset:0;z-index:9;pointer-events:auto}
.p-aj .luz{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(4,6,9,.78);transition:all .45s cubic-bezier(.4,0,.2,1);pointer-events:none;border:1px solid rgba(247,147,26,.55)}
.p-aj .bal{position:absolute;left:14px;right:14px;background:var(--g-card,#14171d);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:16px 16px 12px;box-shadow:0 16px 44px rgba(0,0,0,.6);transition:top .45s cubic-bezier(.4,0,.2,1),opacity .2s}
.p-aj .bal h5{font:400 18px/1.15 var(--display);text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px}
.p-aj .bal p{font-size:13px;line-height:1.5;color:var(--g-dim);margin:0 0 12px}
.p-aj .bar2{display:flex;align-items:center;gap:8px}
.p-aj .bar2 .pontos{display:flex;gap:5px;flex:1}
.p-aj .bar2 .pontos i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22)}
.p-aj .bar2 .pontos i[data-on]{background:var(--g-haz)}
.p-aj .bar2 button{border:0;border-radius:9px;padding:10px 14px;font:700 13px/1 var(--ui);cursor:pointer;background:var(--g-haz);color:#121418}
.p-aj .bar2 button[data-aj-volta],.p-aj .bar2 button[data-aj-sair]{background:transparent;color:var(--g-dim);border:1px solid rgba(255,255,255,.14);font-weight:400}
.p-help{border:1px solid rgba(247,147,26,.45);background:transparent;color:var(--g-haz);width:22px;height:22px;border-radius:50%;font:700 12px/1 var(--ui);cursor:pointer;flex:none;padding:0;animation:acende 2.6s ease-in-out infinite}
/* porta de saída, ao lado do "?": mesmo tamanho e mesma forma, mas apagada e SEM o pisca-pisca do "?" —
   sair da conta não é convite, é só uma saída que precisa estar à mão. Fica escondida no protótipo (não há conta). */
.p-sair{margin-left:7px;border:1px solid var(--g-rule);background:transparent;color:var(--g-dim);width:22px;height:22px;border-radius:50%;cursor:pointer;flex:none;padding:0;display:inline-flex;align-items:center;justify-content:center}
.p-sair svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.p-sair:hover,.p-sair:focus-visible{color:var(--g-text);border-color:var(--g-dim)}
/* o "?" acende e apaga devagar, para o jogador achar a ajuda sem que isso incomode */
@keyframes acende{0%,100%{opacity:.5;box-shadow:0 0 0 0 rgba(247,147,26,0);border-color:rgba(247,147,26,.35)}50%{opacity:1;box-shadow:0 0 10px 2px rgba(247,147,26,.35);border-color:rgba(247,147,26,.9)}}
.p-help:hover,.p-help:focus-visible{color:#fff;border-color:var(--g-haz);animation:none;box-shadow:0 0 12px 3px rgba(247,147,26,.45);opacity:1}
@media (prefers-reduced-motion:reduce){.p-aj .luz,.p-aj .bal{transition:none}.p-help{animation:none;opacity:1}}
.p-live,.p-wallet{flex:none;white-space:nowrap}
.p-user{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--g-text);font:600 11.5px/1 var(--body)}
.p-user i{flex:none;width:18px;height:18px;border-radius:50%;background:var(--g-btc);color:#1B0F00;font:700 10.5px/18px var(--body);font-style:normal;text-align:center;text-transform:uppercase}
.p-user span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ---- relógio do próximo crédito ---- */
.p-relogio{display:flex;align-items:center;gap:11px;padding:0 14px;flex:none;min-height:50px}
.r-anel{width:50px;height:50px;flex:none;position:relative;border-radius:50%;background:radial-gradient(circle,rgba(247,147,26,.2),rgba(247,147,26,0) 68%)}
.r-anel canvas{position:absolute;inset:0;width:100%;height:100%}
.r-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.r-txt small{font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--g-dim);white-space:nowrap}
.r-dig{font:400 27px/1 var(--display);letter-spacing:.05em;color:var(--g-text);font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(247,147,26,.5);white-space:nowrap}
.r-dig i{font:500 15px/1 var(--mono);font-style:normal;letter-spacing:0;color:var(--g-btc);margin-left:3px}
.p-game{overflow-y:auto;scrollbar-width:none}
.p-game::-webkit-scrollbar{display:none}
/* ---- movimento: a fazenda trabalhando ---- */
.p-live i{animation:vivo 1.6s ease-in-out infinite}
.mchip u{animation:led 1.1s ease-in-out infinite}
.p-next i{background-image:linear-gradient(90deg,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);background-size:70px 100%;background-repeat:no-repeat;animation:corre 1.7s linear infinite}
.p-acc{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 14px;font:500 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim);flex:none;white-space:nowrap;min-height:40px}
.p-acc b{font:400 24px/1 var(--display);letter-spacing:.02em;text-transform:none;color:var(--g-led);font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(53,224,122,.35)}
.p-acc[data-parada] b{color:var(--g-dim)}
.p-hash{position:absolute;right:8px;top:34px;font:500 8.5px/1 var(--mono);color:rgba(255,255,255,.6);background:rgba(11,12,14,.62);padding:4px 6px;border-radius:4px;pointer-events:none;font-variant-numeric:tabular-nums}
.p-alt.entrando .scr{animation:entra .28s ease-out}
.p-alt.entrando .item,.p-alt.entrando .kv{animation:entra .34s ease-out backwards}
.p-alt.entrando .item:nth-child(3),.p-alt.entrando .kv:nth-child(3){animation-delay:.04s}
.p-alt.entrando .item:nth-child(4),.p-alt.entrando .kv:nth-child(4){animation-delay:.08s}
.p-alt.entrando .item:nth-child(n+5),.p-alt.entrando .kv:nth-child(n+5){animation-delay:.12s}
.p-game.entrando{animation:entra .28s ease-out}
.p-cta:active,.scr button:active,.p-tabs button:active,.enter:active{transform:scale(.97)}
@keyframes vivo{50%{opacity:.35;transform:scale(.75)}}
@keyframes led{50%{opacity:.2}}
@keyframes corre{from{background-position:-70px 0}to{background-position:calc(100% + 70px) 0}}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
@media (prefers-reduced-motion:reduce){.p-live i,.mchip u,.p-next i,.p-alt.entrando .scr,.p-alt.entrando .item,.p-alt.entrando .kv,.p-game.entrando{animation:none}}
/* ---- seu ciclo: a história contada em ordem. O valor que o jogador pôs nas máquinas fica girando em 4 passos numerados (energiza, minera,
   recebe, reinveste), com seta entre eles e um ponto de luz andando pelo caminho; embaixo, onde está cada parte agora; separado, o lucro por dia ---- */
.p-ciclo{margin:0 12px;background:var(--g-panel);border-radius:10px;padding:10px 10px 11px;display:flex;flex-direction:column;gap:9px;flex:none;font:500 11px/1.35 var(--body);color:var(--g-dim)}
.c-top{display:flex;flex-direction:column;gap:4px}
.c-top b{font:400 15px/1 var(--display);letter-spacing:.05em;text-transform:uppercase;color:var(--g-text)}
.c-gira{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 7px;font:600 12px/1.2 var(--body);color:var(--g-text)}
.c-gira b{font:400 20px/1 var(--display);letter-spacing:.02em;color:var(--g-btc);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(247,147,26,.3)}
.p-ciclo [data-c="compra"]{--c:var(--g-haz)}
.p-ciclo [data-c="minerando"]{--c:var(--g-btc)}
.p-ciclo [data-c="pagamento"]{--c:#5AA9FF}
.p-ciclo [data-c="volta"]{--c:var(--g-led)}
/* o caminho e os valores usam a MESMA grade de 4 colunas: cada valor cai embaixo do seu passo */
.c-cam,.c-val{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 4px;text-align:center}
.c-cam{position:relative;z-index:0}
.c-cam li{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
.c-cam i{position:relative;z-index:2;flex:none;width:20px;height:20px;border-radius:50%;background:var(--c);color:#0B0C0E;font:700 11px/20px var(--mono);font-style:normal;animation:cicloPasso 5s linear infinite}
.c-cam b{max-width:100%;font:700 10.5px/1.15 var(--body);color:var(--g-text);overflow-wrap:anywhere}
/* a seta: um traço que sai do número anterior e chega neste, com a ponta */
.c-cam li+li::before{content:"";position:absolute;top:9px;left:calc(-50% + 9px);right:calc(50% + 14px);height:2px;border-radius:1px;background:var(--g-rule)}
.c-cam li+li::after{content:"";position:absolute;top:7px;right:calc(50% + 14px);width:6px;height:6px;box-sizing:border-box;border-top:2px solid var(--g-dim);border-right:2px solid var(--g-dim);transform:rotate(45deg)}
/* o ponto de luz: vai do 1 ao 4 por baixo dos números e recomeça; cada número acende quando ele chega */
.c-cam::after{content:"";position:absolute;z-index:1;top:3px;height:14px;left:calc(12.5% - 8.5px);right:calc(12.5% - 8.5px);pointer-events:none;background:radial-gradient(circle,#fff 0,#fff 2px,rgba(247,147,26,.85) 3.5px,rgba(247,147,26,0) 7px) 0 50%/14px 14px no-repeat;animation:cicloLuz 5s linear infinite}
.c-cam li:nth-child(1) i{animation-delay:-.15s}
.c-cam li:nth-child(2) i{animation-delay:1.27s}
.c-cam li:nth-child(3) i{animation-delay:2.68s}
.c-cam li:nth-child(4) i{animation-delay:4.1s}
@keyframes cicloLuz{0%{background-position:0 50%;opacity:0}3%{opacity:1}82%{opacity:1}85%,100%{background-position:100% 50%;opacity:0}}
@keyframes cicloPasso{0%,14%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}3%{box-shadow:0 0 9px 2px var(--c)}}
.c-onde{display:flex;align-items:center;gap:7px;font:500 8.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim);text-align:center}
.c-onde::before,.c-onde::after{content:"";flex:1 1 8px;height:1px;background:var(--g-rule)}
.c-val{margin-top:-3px}
.c-val li{min-width:0;padding-top:5px;border-top:2px solid var(--c);font:700 11px/1.2 var(--body);color:var(--g-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
/* o resultado, separado do resto */
.c-lucro{display:flex;flex-direction:column;gap:4px;padding:9px 10px;border-radius:8px;background:rgba(53,224,122,.09);box-shadow:inset 3px 0 0 var(--g-led)}
.c-lucro p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 6px;font:600 12px/1.25 var(--body);color:var(--g-text)}
.c-lucro p span:first-child{flex:1 0 100%;font-weight:700}
.c-lucro b{font:400 18px/1 var(--display);letter-spacing:.02em;color:var(--g-led);white-space:nowrap;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(53,224,122,.35)}
.c-lucro small{font:500 10px/1.3 var(--body);color:var(--g-dim)}
.c-val[data-aperto] li{font-size:9.5px;letter-spacing:-.02em}
.c-conv{font:500 12px/1.4 var(--body);color:var(--g-text)}
.c-rod{font:500 10px/1.3 var(--mono);color:var(--g-dim)}
/* sem máquina: o caminho fica apagado, como amostra, e o convite entra no lugar dos valores e do lucro */
.p-ciclo[data-vazio] .c-gira,.p-ciclo[data-vazio] .c-onde,.p-ciclo[data-vazio] .c-val,.p-ciclo[data-vazio] .c-lucro,.p-ciclo:not([data-vazio]) .c-conv{display:none}
.p-ciclo[data-vazio] .c-cam{opacity:.45}
.p-ciclo[data-vazio] .c-cam::after{display:none}
.p-ciclo[data-vazio] .c-cam i{animation:none}
/* com o cartão antes do histórico, o histórico (onde saem os avisos) guarda um mínimo de altura e a tela da fazenda rola.
   A base do flex é o CONTEÚDO (1 0 auto) e as linhas não encolhem: com flex:1 (base 0) e overflow:hidden, em tela baixa
   o histórico ficava preso nos 64px e o flex esmagava as linhas, cortando o texto ao meio em vez de deixar a tela rolar. */
.p-feed{flex:1 0 auto;min-height:64px;overflow:visible;padding-bottom:10px}
.p-feed li{flex:none}
/* a ficha é um BOTÃO (entra na ordem do teclado e o leitor de tela lê o nome da máquina): tira a cara de botão do navegador */
.mchip{cursor:pointer;border:0;margin:0;-webkit-appearance:none;appearance:none;text-align:left}
.mchip:focus-visible{outline:2px solid var(--g-led);outline-offset:2px}
/* aviso (compra recusada, preço que mudou): o texto é comprido e não pode sair cortado com reticências */
.p-feed li.aviso{white-space:normal;overflow:visible;cursor:pointer}
/* movimento reduzido: o ponto de luz fica parado no começo do caminho e os números não piscam */
@media (prefers-reduced-motion:reduce){.c-cam::after{animation:none;opacity:1;background-position:16.67% 50%}.c-cam i{animation:none}}
/* ---- saque em USDT na rede Tron: o bloco da carteira do jogador na Carteira, a janela do pedido e a lista dos pedidos.
   O jogo só REGISTRA o pedido e tira o dinheiro do saldo na hora; quem confere e paga é o dono, à mão, para o endereço cadastrado ---- */
.sq-bl{display:flex;flex-direction:column;gap:8px;background:var(--g-panel);border-radius:10px;padding:10px 11px}
.scr .sq-bl h4{margin:0;color:var(--g-haz)}
.sq-f{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.sq-f input{min-width:0;font:500 12px/1.2 var(--mono);padding:10px;border-radius:8px;border:1px solid var(--g-rule);background:rgba(0,0,0,.28);color:var(--g-text)}
.sq-f input:focus-visible{outline:2px solid var(--g-haz);outline-offset:1px}
.sq-end{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
/* o endereço e o comprovante: um toque troca o encurtado pelo inteiro */
.scr .sq-cod,.p-jan .sq-cod{width:auto;border:0;text-align:left;cursor:pointer;background:var(--g-panel2);color:var(--g-text);border-radius:6px;padding:6px 8px;font:500 12px/1.2 var(--mono);text-transform:none;letter-spacing:0;overflow-wrap:anywhere}
.sq-cod.inteiro{font-size:10.5px}
.scr .sq-tr{padding:6px 9px;font-size:11px}
.sq-msg{font:600 11.5px/1.4 var(--body);color:var(--g-led)}
.sq-msg.bad{color:var(--g-red)}
.sq-prazo{display:flex;align-items:center;gap:8px;font:500 10px/1.3 var(--mono);color:var(--g-dim)}
.sq-prazo span{flex:1;min-width:0}
/* a lista de pedidos, no formato do extrato */
.sqs{display:flex;flex-direction:column;background:var(--g-panel);border-radius:10px;padding:2px 11px}
.sqs li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;padding:8px 0;border-bottom:1px solid var(--g-rule);font:500 11.5px/1.2 var(--mono);color:var(--g-dim)}
.sqs li:last-child{border-bottom:0}
.sqs b{font-weight:500;color:var(--g-text);white-space:nowrap;text-align:right}
.sqs small{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:4px 7px;font:500 10px/1.35 var(--body);color:var(--g-dim)}
.sqs li[data-st="pedido"] u,.sqs li[data-st="enviando"] u,.sqs li[data-st="pago"] u,.sqs li[data-st="cancelado"] u{text-decoration:none;font-weight:700}
.sqs li[data-st="pedido"] u{color:var(--g-haz)}
.sqs li[data-st="enviando"] u{color:#5AA9FF}
.sqs li[data-st="pago"] u{color:var(--g-led)}
.sqs .sq-cod{padding:3px 6px;font-size:10.5px}
/* o motivo que o dono escreveu ao cancelar: é o único jeito de o jogador saber que o endereço não serviu */
.sqs .sq-mot{flex-basis:100%;color:var(--g-red);font-style:italic;overflow-wrap:anywhere}
/* a janela do pedido */
.p-jan .sq{max-width:330px;text-align:left}
.p-jan .sq p:empty{display:none}
.p-jan .sq .sq-disp{margin:0 0 12px;font:500 12px/1.35 var(--body);color:var(--g-text)}
.p-jan .sq .sq-disp span{color:var(--g-dim)}
.p-jan .sq .sq-q{display:block;margin-bottom:6px;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.p-jan .sq .sq-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:12px;padding:0 10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(0,0,0,.25)}
.p-jan .sq .sq-in i{font:500 12px/1 var(--mono);font-style:normal;color:var(--g-dim)}
.p-jan .sq .sq-in input{width:100%;margin:0;padding:12px 0;border:0;background:transparent;color:inherit;text-align:left;font:400 20px/1 var(--display)}
.p-jan .sq .sq-in button{width:auto;padding:6px 10px;background:var(--g-panel2);color:var(--g-text);font:700 11px/1 var(--ui)}
.p-jan .sq .sq-conta{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;font:500 12px/1.25 var(--body);color:var(--g-dim)}
.p-jan .sq .sq-conta li{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.p-jan .sq .sq-conta b{color:var(--g-text);font-variant-numeric:tabular-nums}
.p-jan .sq .sq-conta b.neg{color:var(--g-red)}
.p-jan .sq .sq-conta .rec{padding-top:7px;border-top:1px solid var(--g-rule);color:var(--g-text);font-weight:700}
.p-jan .sq .sq-conta .rec b{font:400 20px/1 var(--display);color:var(--g-led)}
.p-jan .sq .sq-moeda{margin:-6px 0 10px;font:500 11px/1.2 var(--body);color:var(--g-dim)}
.p-jan .sq .sq-entendi{margin:-6px 0 10px;font:600 11.5px/1.25 var(--body);color:var(--g-haz)}
.p-jan .sq .sq-entendi:empty{display:none}
.p-jan .sq .sq-end,.p-jan .sq .sq-prazo{margin-bottom:10px}
.p-jan .sq .sq-ajuda{margin-bottom:12px;padding:9px 10px;border-left:3px solid var(--g-haz);border-radius:8px;background:rgba(247,147,26,.08);font:500 11.5px/1.5 var(--body);color:var(--g-dim)}
.p-jan .sq .sq-err{margin:0 0 10px;font:600 12px/1.4 var(--body);color:var(--g-red)}
.p-jan .sq .sq-err:empty{display:none}
.p-jan .sq .ok{margin-bottom:12px;font:400 24px/1.1 var(--display);color:#49d17d;text-transform:uppercase}
.p-jan .sq button:disabled{opacity:.45;cursor:default}
.p-jan .sq>div+button{background:transparent;color:var(--g-dim);border:1px solid rgba(255,255,255,.14)}
.p-jan .sq .p-help{width:22px;height:22px;padding:0;background:transparent;color:var(--g-haz);border:1px solid rgba(247,147,26,.45)}
/* ---- os dois blocos do fim da Carteira: "Indique e ganhe" (o link que o jogador manda para os amigos) e "Ajuda e contato"
   (a conversa dele com a gente). Os dois moram na MESMA caixa do bloco da carteira USDT (.sq-bl): aqui fica só o que é deles ---- */
.ind-nums{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ind-nums div{background:var(--g-panel2);border-radius:8px;padding:7px 9px;min-width:0}
.ind-nums small{display:block;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.ind-nums b{display:block;margin-top:5px;font:700 14px/1.1 var(--body);color:var(--g-text);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.scr .ind-lk{width:100%;text-align:left;font-size:11px}
/* o ponto vermelho no "?" da barra do alto: há resposta nova esperando num chamado */
.p-top .p-help{position:relative}
.p-help[data-novo]{animation:none;opacity:1;border-color:var(--g-haz)}
.p-help[data-novo]::after{content:"";position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;background:var(--g-red);border:1px solid #121418}
/* a lista de chamados do jogador */
.chs{display:flex;flex-direction:column;gap:6px}
.scr .chs button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:baseline;text-align:left;background:var(--g-panel2);padding:8px 10px;font:500 11.5px/1.25 var(--body)}
.chs b{min-width:0;font-weight:600;color:var(--g-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chs u{text-decoration:none;font:500 9px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim);white-space:nowrap}
.chs u[data-st="aberto"]{color:var(--g-haz)}
.chs u[data-st="respondido"]{color:var(--g-led)}
.chs small{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 8px;font:500 10px/1.3 var(--mono);color:var(--g-dim)}
.chs .novo{color:var(--g-red);font-weight:700}
/* a conversa e o formulário, dentro da janela. O texto do jogador e o nosso vão em pre-wrap: é texto puro, nunca HTML */
.p-jan .ch{max-width:330px;text-align:left}
.p-jan .ch p:empty{display:none}
.p-jan .ch .ch-as{margin:0 0 10px;font:600 13px/1.35 var(--body);color:var(--g-text);overflow-wrap:anywhere}
.p-jan .ch .ch-msgs{display:flex;flex-direction:column;gap:8px;max-height:230px;overflow:auto;overscroll-behavior:contain;margin-bottom:12px}
.p-jan .ch .ch-msgs li{padding:8px 10px;border-radius:9px;background:var(--g-panel2);font:500 12px/1.45 var(--body);color:var(--g-text);white-space:pre-wrap;overflow-wrap:anywhere}
.p-jan .ch .ch-msgs li[data-de="dono"]{background:rgba(247,147,26,.12);border-left:3px solid var(--g-btc)}
.p-jan .ch .ch-msgs small{display:block;margin-bottom:4px;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.p-jan .ch input,.p-jan .ch textarea{width:100%;margin:0 0 8px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;background:rgba(0,0,0,.25);color:var(--g-text);font:500 12.5px/1.4 var(--body);text-align:left}
.p-jan .ch textarea{min-height:92px;resize:vertical}
.p-jan .ch .ch-q{display:block;margin-bottom:5px;font:500 9.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--g-dim)}
.p-jan .ch .ch-err{margin:0 0 10px;font:600 12px/1.4 var(--body);color:var(--g-red)}
.p-jan .ch .ch-err:empty{display:none}
.p-jan .ch .ch-fim{margin:0 0 10px;font:500 11.5px/1.4 var(--body);color:var(--g-dim)}
.p-jan .ch button:disabled{opacity:.45;cursor:default}
@keyframes pulse{50%{transform:scale(1.06);filter:brightness(1.1)}}
@keyframes rise{0%{opacity:0;transform:translate(-50%,8px)}15%{opacity:1;transform:translate(-50%,0)}75%{opacity:1}100%{opacity:0;transform:translate(-50%,-26px)}}
@media (prefers-reduced-motion:reduce){.ph-l{transition:none}.v-ph i{animation:none}.p-pop{animation-duration:.01s;animation-fill-mode:none}}

