/* Crentito "neon" (teste no beta, 28/10/2026)
   Visual novo inspirado nos Duelos: degradês que ocupam a página toda, grade fina, grão,
   blocos de pixel flutuando e rótulos em fonte mono. Um modo só (sem claro/escuro):
   - Crentito (<html data-mundo="crentito" data-theme="dark">): escuro com o amarelo da marca
     e laranja, cartões de vidro escuro.
   - Galera (<html data-mundo="galera" data-theme="dark">): escuro com roxo, vermelho e azul neon,
     cartões de vidro escuro.
   Carregado por último, depois do tema.css. */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;600;700&display=swap");

/* ================= paletas ================= */
:root:root:root{
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Crentito: escuro, com o amarelo da marca (#F9BD33) em destaque */
  --n-fundo:linear-gradient(180deg,#3B352B 0%,#2A2620 50%,#2F2A23 100%);
  --luz1:rgba(249,189,51,.8);    /* amarelo Crentito no alto à esquerda */
  --luz2:rgba(255,128,40,.40);    /* laranja no alto à direita */
  --luz3:rgba(255,96,20,.46);     /* laranja-fogo embaixo */
  --luz4:rgba(249,189,51,.32);    /* amarelo à esquerda */
  --ponto:rgba(255,222,150,.08);
  --px1:#F9BD33;--px2:#FF8A1F;--px3:#FFE07A;
  --holo:linear-gradient(115deg,#FFE48A 0%,#F9BD33 40%,#FF9A1F 100%);
  --holo-loop:linear-gradient(90deg,#FFE48A,#F9BD33 25%,#FF8A1F 50%,#F9BD33 75%,#FFE48A);
  --glow:rgba(249,189,51,.5);
  --vidro:rgba(255,232,190,.065);
  --vidro-camada:rgba(47,42,35,.62);
  --vidro-forte:#2F2A23;
  --vidro-borda:rgba(255,212,140,.15);
  --sombra-cartao:0 1px 0 rgba(255,255,255,.06) inset,0 14px 36px -20px rgba(0,0,0,.9);

  --brand:#F9BD33;--brand-ink:#1F1503;
  --bg:#26221D;
  --surface:var(--vidro-forte);
  --line:rgba(255,212,140,.14);
  --ink:#FFF5E0;
  --muted:#C7B38D;
  --faixa-texto:#F3E3C0;
  --ok:#3FE08E;--ok-dark:#1E9B5C;--ok-soft:rgba(63,224,142,.15);--ok-ink:#A9F5CB;
  --bad:#FF5D5D;--bad-dark:#B8302F;--bad-soft:rgba(255,93,93,.15);--warn:#FFC23F;
  --shadow:0 0 0;
  --scrim:rgba(5,3,0,.45);
  color-scheme:dark;
}
:root:root:root[data-mundo="galera"]{
  --n-fundo:linear-gradient(180deg,#0E0622 0%,#07040F 48%,#0A0418 100%);
  --luz1:rgba(130,55,255,.85);    /* roxo no alto */
  --luz2:rgba(255,30,95,.62);     /* vermelho neon */
  --luz3:rgba(30,130,255,.72);    /* azul neon */
  --luz4:rgba(190,70,255,.30);
  --ponto:rgba(220,205,255,.1);
  --px1:#A66BFF;--px2:#FF2E6E;--px3:#2E9BFF;
  --holo:linear-gradient(115deg,#A66BFF 0%,#FF2E6E 50%,#2E9BFF 100%);
  --holo-loop:linear-gradient(90deg,#A66BFF,#FF2E6E 33%,#2E9BFF 66%,#A66BFF);
  --glow:rgba(150,80,255,.6);
  --vidro:rgba(200,185,255,.07);
  --vidro-forte:#151027;
  --vidro-camada:rgba(24,16,48,.6);
  --vidro-borda:rgba(200,180,255,.16);
  --sombra-cartao:0 1px 0 rgba(255,255,255,.06) inset,0 14px 36px -20px rgba(0,0,0,.9);

  --brand:#A66BFF;--brand-ink:#0B0618;
  --bg:#0E0A1C;
  --surface:var(--vidro-forte);
  --line:rgba(200,180,255,.14);
  --ink:#F5F1FF;
  --muted:#ADA4CC;
  --faixa-texto:#DCD3FF;
  --ok:#3FE08E;--ok-dark:#1E9B5C;--ok-soft:rgba(63,224,142,.15);--ok-ink:#A9F5CB;
  --bad:#FF4D6D;--bad-dark:#B3243F;--bad-soft:rgba(255,77,109,.16);--warn:#FFC23F;
  --shadow:0 0 0;
  --scrim:rgba(3,2,10,.4);
  color-scheme:dark;
}

/* ================= fundo da página toda ================= */
html{background:#2A2620!important;background-image:none!important}
/* (fundo do html da Galera definido mais abaixo) */
body{background:transparent!important}
/* degradês */
body::before{content:"";position:fixed;inset:-14vh -14vw;z-index:-2;pointer-events:none;
  background:
    radial-gradient(70% 45% at 14% 10%,var(--luz1),transparent 62%),
    radial-gradient(60% 42% at 94% 14%,var(--luz2),transparent 64%),
    radial-gradient(55% 40% at 0% 58%,var(--luz4),transparent 66%),
    radial-gradient(85% 55% at 78% 104%,var(--luz3),transparent 70%),
    var(--n-fundo);
  animation:n-aurora 22s ease-in-out infinite alternate}
:root[data-mundo="galera"] body::before{
  background:
    radial-gradient(46vmax 32vmax at 8% -2%,var(--luz1),transparent 66%),
    radial-gradient(40vmax 34vmax at 100% 30%,var(--luz2),transparent 64%),
    radial-gradient(56vmax 40vmax at 4% 88%,var(--luz3),transparent 64%),
    radial-gradient(40vmax 30vmax at 90% 100%,var(--luz4),transparent 62%),
    var(--n-fundo)}
@keyframes n-aurora{0%{transform:none}50%{transform:translate3d(-3vw,2vh,0) scale(1.06)}100%{transform:translate3d(2.5vw,-1.5vh,0) scale(1.1) rotate(2deg)}}
/* pontinhos + grão */
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle,var(--ponto) 1px,transparent 1.5px);
  background-size:160px 160px,28px 28px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.2) 100%)}
/* Galera: feixe de luz diagonal */
:root[data-mundo="galera"] body::after{
  background-image:
    linear-gradient(115deg,transparent 30%,rgba(255,46,110,.10) 42%,rgba(166,107,255,.12) 50%,transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle,var(--ponto) 1px,transparent 1.5px);
  background-size:100% 100%,160px 160px,28px 28px}
/* blocos de pixel flutuando (um só elemento, cópias por box-shadow) */
html::after{content:"";position:fixed;z-index:-1;pointer-events:none;top:15vh;right:7vw;width:14px;height:14px;background:var(--px1);opacity:.8;border-radius:2px;
  box-shadow:
    -80vw 26vh 0 -3px var(--px2),
    -66vw 60vh 0 -2px var(--px3),
    -3vw 48vh 0 -4px var(--px2),
    -42vw 78vh 0 -5px var(--px1),
    -88vw 2vh 0 -5px var(--px3),
    -20vw 36vh 0 -6px var(--px1);
  animation:n-float 11s ease-in-out infinite}
:root[data-mundo="galera"]::after{box-shadow:
    -80vw 26vh 0 -3px var(--px2),-66vw 60vh 0 -2px var(--px3),-3vw 48vh 0 -4px var(--px2),
    -42vw 78vh 0 -5px var(--px1),-88vw 2vh 0 -5px var(--px3),-20vw 36vh 0 -6px var(--px3),
    0 0 18px 2px var(--px1)}
@keyframes n-float{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-16px) rotate(24deg)}}
@media (prefers-reduced-motion: reduce){body::before,html::after{animation:none}}

/* ================= faixa do topo ================= */
.statuscap{display:none!important}
.band{background:transparent!important;color:var(--ink)!important;position:relative}
.band::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--holo-loop);background-size:200% 100%;opacity:.7;animation:n-slide 9s linear infinite;pointer-events:none}
@keyframes n-slide{to{background-position:200% 0}}
.band .back,.band .acct-btn{color:var(--ink)!important}

/* nome */
.brandtext h1,.band .lockup h1,.band .lockup h1.longo,.band > .band-inner > a > span{font-weight:700!important;letter-spacing:-.035em!important}
:is(.brandtext h1,.band .lockup h1,.band > .band-inner > a > span){text-shadow:none!important;
  background:var(--holo);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent!important;
  filter:drop-shadow(0 0 16px var(--glow))}
.brandtext p{font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)!important;font-weight:600!important;opacity:1!important}
.mascot{filter:drop-shadow(0 0 20px var(--glow))}

/* pílulas do topo em vidro */
.band .login,.band .hstreak,.band .streak,.band .pillbtn,.band .acct-btn,.band .icon-btn{
  background:var(--vidro)!important;border:1px solid var(--vidro-borda)!important;color:var(--ink)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:none}
.band .login .pic{background:var(--holo)!important;color:var(--brand-ink)!important}
:root[data-mundo="galera"] .band .login .pic{color:#fff!important}

/* ================= cartões de vidro ================= */
.game,.card,.card-white,.tile,.result,.verse,.grp,.theme-btn,.setup-row,details.ajustes,.player-item,.question-item,
.share-card,.jornada-hoje,.demo,.box,.rk,.papel,.word-zone,.tabu-card,.announce-box,.note,.balloon,.icon-btn,.hint-btn,.chipbtn,
.btn-outline,.btn-skip,.btn-passou,.pill:not(.selected){
  background-color:var(--vidro)!important;border-color:var(--vidro-borda)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.game,.card,.card-white,.result,.verse,.grp,.box,.rk,.share-card,.jornada-hoje,.note,.tile,.icon-btn,.hint-btn{box-shadow:var(--sombra-cartao)!important}
/* leve brilho no alto dos cartões */
:is(.game,.card,.card-white,.result,.verse,.grp,.box,.rk,.share-card,.note){background-image:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0) 50%)}
input[type=text],input[type=email],input[type=search],textarea,select{background-color:var(--vidro-forte)!important;border-color:var(--vidro-borda)!important}
.note{border-style:solid!important}
.game{border:1px solid var(--vidro-borda)!important}
.game:hover{border-color:var(--c)!important}
.game .art{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* camadas por cima de tudo: fundo firme */
.account,.sheet,.modal,.dialog,.popover,.menu,.tooltip,dialog,.qi,.cm-sheet,.sc-sheet,.sc-sug,.mod-box,.tb-box,.lg{background-color:var(--vidro-camada)!important;color:var(--ink);
  border:1px solid var(--vidro-borda);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -20px 60px -20px rgba(0,0,0,.6);
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
:root[data-mundo="galera"] :is(.account,.sheet,.modal,.dialog,.popover,.menu,.tooltip,dialog,.qi,.cm-sheet,.sc-sheet,.sc-sug,.mod-box,.tb-box,.lg){box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 -20px 60px -20px rgba(0,0,0,.6)}
/* barra fixa de baixo (Parábola e afins) em vidro */
/* Parábola: a caixa de resposta acompanha o teclado, então vira um cartão de vidro solto,
   com margem dos lados e cantos arredondados, em vez de uma barra chapada de ponta a ponta */
.dock{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  max-width:500px;margin:0 auto;border-radius:24px;padding:10px 12px 12px!important;
  background:color-mix(in srgb,var(--vidro-forte) 42%,transparent)!important;
  border:1px solid var(--vidro-borda)!important;border-top:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
.dock .guessbox input,.dock .skip{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.12)!important;
  -webkit-backdrop-filter:none;backdrop-filter:none}
.dock .guessbox input:focus{border-color:var(--brand)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)!important}

/* ================= textos ================= */
h1,h2,h3,h4{letter-spacing:-.025em}
.sec-label,.kicker,.round-tag,.slider-labels{font-family:var(--mono);letter-spacing:.08em}
.sec-label{text-transform:uppercase;font-size:11px!important;letter-spacing:.16em!important;font-weight:700!important}
.countdown{font-family:var(--mono);font-size:12px!important;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)!important}
.countdown b{color:var(--ink)!important}
footer,footer p{color:var(--muted)!important}
footer nav a{color:var(--ink)!important;text-decoration-color:color-mix(in srgb,var(--ink) 30%,transparent)!important}

/* ================= botões principais ================= */
/* Crentito: tinta escura com brilho; Galera: degradê neon */
:root[data-mundo="galera"] :is(.btn-primary,.btn-black){
  background:var(--holo)!important;background-size:160% 100%!important;color:#fff!important;border:0!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.14) inset,0 12px 30px -10px var(--glow)!important;transition:background-position .4s,transform .14s}
:root[data-mundo="galera"] :is(.btn-primary,.btn-black):hover{background-position:100% 0!important}
input:checked+.slider{background:var(--holo)!important}
:focus-visible{outline-color:#F9BD33!important}
:root[data-mundo="galera"] :focus-visible{outline-color:#A66BFF!important}

/* ================= banners de atalho ================= */
/* banner da Galera no início do Crentito: já com as cores da Galera */
.galera-box:not(.duelos-box){
  background:linear-gradient(115deg,#4A1FB8 0%,#A01E8C 50%,#1F5FD0 100%)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 14px 30px -12px rgba(90,30,200,.7)!important;color:#fff!important}
.galera-box:not(.duelos-box) .gb-ic{background:rgba(255,255,255,.16)!important}
/* "Jogos diários" na Galera: com as cores do Crentito */
.diario-box{
  background:linear-gradient(115deg,#FFE15A 0%,#FFB21E 45%,#FF7A1A 100%)!important;
  color:#2A1702!important;border:0!important;box-shadow:0 0 34px -8px rgba(255,150,30,.75)!important}
.diario-box .gb-ic{background:rgba(255,255,255,.45)!important}

html{scrollbar-color:rgba(255,255,255,.18) transparent}

/* fundos escurecidos das janelas: mais leves, para o vidro aparecer */
.cm-scrim,.sc-scrim,.qi-scrim,.lg-scrim,.mod-scrim{background:var(--scrim)!important}

/* ================= placar de bolinhas (tentativas, chances, erros) ================= */
/* bolinha cheia em tinta escura com aro claro; gasta vira só um aro */
:root[data-mundo="crentito"] .pip{background:#F9BD33!important;box-shadow:0 0 8px -1px rgba(249,189,51,.7)}
:root[data-mundo="crentito"] .pip.used{background:transparent!important;box-shadow:inset 0 0 0 1.5px rgba(255,230,180,.3);transform:scale(.8)}

/* ================= estante do Caça versículo: lombadas neon com sombra, sem caixa ================= */
.shelf-wrap{
  --s0:#FFC53D;--s1:#FF8A3D;--s2:#FF5E6C;--s3:#E56BFF;--s4:#9C7BFF;--s5:#3DB2FF;--s6:#2EE6C8;--s7:#5CF08A;--s8:#D8F04A}
.shelf{border-bottom-color:rgba(255,212,140,.22)!important}
.spine{box-shadow:0 0 7px -2px var(--sc,#fff)}
.spine.out,.spine.guessed{box-shadow:none}
/* livro escolhido (o dedo em cima) e o que acertou: acende */
.spine.lift3,.spine.hit{filter:brightness(1.2) saturate(1.3)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 10px 2px var(--sc,#fff),0 0 24px 4px color-mix(in srgb,var(--sc,#fff) 65%,transparent)!important;z-index:1;position:relative}
.spine.lift2{filter:brightness(1.1);box-shadow:0 0 9px 0 var(--sc,#fff)}

/* ================= estados selecionados (o vidro não pode apagar) ================= */
.tile.sel{background:#F9BD33!important;color:#1F1503!important;border-color:#F9BD33!important;
  box-shadow:0 0 22px -4px rgba(249,189,51,.7)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.theme-btn.selected{background:color-mix(in srgb,var(--c) 26%,transparent)!important;border-color:var(--c)!important}
.band .brandtext p,.band:not(.band-home) .brandtext p{color:var(--muted)!important}

/* ================= testes de 28/10 ================= */
/* mascote do topo em branco puxado pro creme (filtro simples, igual no Safari) */
:root[data-mundo="crentito"] .band .mascot{filter:sepia(.32) brightness(.97) drop-shadow(0 0 18px rgba(249,189,51,.35))}

/* 4 por 4: grupos acertados com o mesmo brilho da seleção, cada um na sua cor */
.group.l0{box-shadow:0 0 24px -4px var(--g0)}
.group.l1{box-shadow:0 0 24px -4px var(--g1)}
.group.l2{box-shadow:0 0 24px -4px var(--g2)}
.group.l3{box-shadow:0 0 24px -4px var(--g3)}

/* ================= jogo encerrado: vidro em degradê embaixo =================
   Bloco fixo criado pelo neon.js, no jeito do desfoque progressivo que o Safari desenha certo:
   seis camadas de altura inteira, uma sobre a outra, cada uma com um desfoque maior e uma
   máscara em faixa (transparente → cheia → transparente) mais para baixo que a anterior.
   O pai não tem opacidade nem transformação (no Safari isso quebra o desfoque dos filhos):
   o fade fica nas próprias camadas. O desfoque termina na tela útil (o Safari não desfoca por
   baixo da barra flutuante) e uma sombra em degradê comum continua até depois da barra.
   Fica abaixo dos comentários e do balão do próximo jogo (z 30/31). Some ao tocar na página. */
.fim-vidro{position:fixed;left:0;right:0;bottom:0;height:30vh;z-index:29;pointer-events:none}
.fim-vidro i{position:absolute;left:0;right:0;top:0;bottom:0;display:block;opacity:0;transition:opacity .5s}
html:has(.jornada.show) .fim-vidro:not(.off) i{opacity:1}
.fim-vidro .fv-b:nth-child(1){-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 33%,transparent 50%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 33%,transparent 50%)}
.fim-vidro .fv-b:nth-child(2){-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  -webkit-mask-image:linear-gradient(180deg,transparent 16%,#000 33%,#000 50%,transparent 66%);mask-image:linear-gradient(180deg,transparent 16%,#000 33%,#000 50%,transparent 66%)}
.fim-vidro .fv-b:nth-child(3){-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-mask-image:linear-gradient(180deg,transparent 33%,#000 50%,#000 66%,transparent 83%);mask-image:linear-gradient(180deg,transparent 33%,#000 50%,#000 66%,transparent 83%)}
.fim-vidro .fv-b:nth-child(4){-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  -webkit-mask-image:linear-gradient(180deg,transparent 50%,#000 66%,#000 83%,transparent 100%);mask-image:linear-gradient(180deg,transparent 50%,#000 66%,#000 83%,transparent 100%)}
.fim-vidro .fv-b:nth-child(5){-webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  -webkit-mask-image:linear-gradient(180deg,transparent 66%,#000 83%,#000 100%);mask-image:linear-gradient(180deg,transparent 66%,#000 83%,#000 100%)}
.fim-vidro .fv-b:nth-child(6){-webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  -webkit-mask-image:linear-gradient(180deg,transparent 83%,#000 100%);mask-image:linear-gradient(180deg,transparent 83%,#000 100%)}
.fim-vidro .fv-s{bottom:-260px;background:linear-gradient(180deg,rgba(28,26,23,0) 0,rgba(28,26,23,.5) 14vh,rgba(28,26,23,.9) 24vh,#1C1A17 30vh,#1C1A17 100%)}

/* Safari (iPhone, iPad e Mac): o desfoque com máscara sai com borda dura e a barra flutuante
   corta o que é fixo. Lá o vidro vira só um degradê (que o Safari desenha liso), indo de
   transparente até a cor exata do fundo da página, a mesma que o Safari pinta atrás da barra. */
html.safari .fim-vidro .fv-b{display:none}
html.safari .fim-vidro .fv-b:nth-child(1){display:block;top:40%;bottom:0;-webkit-mask-image:none;mask-image:none;
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%)}
html.safari .fim-vidro{height:40vh}
html.safari .fim-vidro .fv-s{bottom:0!important;background:linear-gradient(180deg,rgba(28,26,23,0) 0%,rgba(28,26,23,.45) 16%,rgba(28,26,23,.85) 30%,rgba(28,26,23,.97) 38%,rgba(28,26,23,.97) 43%,rgba(28,26,23,.72) 58%,rgba(28,26,23,.72) 82%,#1C1A17 100%)}

/* ================= proposta "holofote" (30/10): Crentito mais limpo =================
   Fundo grafite neutro e um único foco de luz amarela no alto, sem pontinhos, grão,
   blocos flutuantes nem animação. Os vidros continuam iguais. */
:root:root:root[data-mundo="crentito"]{--n-fundo:#1C1A17;--vidro-forte:#262320;--vidro-camada:rgba(38,35,32,.62);--bg:#1C1A17}
html[data-mundo="crentito"]{background:#1C1A17!important}
:root[data-mundo="crentito"] body::before{animation:none;inset:0;
  background:
    linear-gradient(0deg,#1C1A17 0,rgba(28,26,23,.88) 5vh,rgba(28,26,23,0) 18vh),
    linear-gradient(in oklch 180deg,#EF7A1A 0,#E06A12 8vh,rgba(160,70,20,.9) 18vh,rgba(64,34,18,.58) 31vh,rgba(28,26,23,0) 48vh),
    /* halos coloridos no miolo, para o vidro ter o que desfocar (ficam parados; os cartões passam por cima) */
    radial-gradient(56vmax 46vmax at 4% 44%,rgba(255,180,50,.38),rgba(255,180,50,.12) 45%,transparent 78%),
    radial-gradient(52vmax 44vmax at 98% 62%,rgba(255,100,60,.32),rgba(255,100,60,.1) 45%,transparent 78%),
    radial-gradient(48vmax 40vmax at 26% 90%,rgba(255,150,40,.28),rgba(255,150,40,.08) 45%,transparent 78%),
    radial-gradient(44vmax 36vmax at 92% 100%,rgba(236,80,170,.2),rgba(236,80,170,.06) 45%,transparent 78%),
    radial-gradient(90% 40% at 100% 108%,rgba(255,150,40,.10),transparent 70%),
    #1C1A17}
:root[data-mundo="crentito"] body::after{display:none}
/* sem blocos flutuantes em nenhuma página */
html::after,:root[data-mundo="galera"]::after{display:none!important}

/* topo: ações (ofensiva, avisos, conta) numa linha própria, sem cobrir o nome,
   e o cabeçalho acima de qualquer camada, para os toques no alto da tela pegarem */
.band{z-index:10}
.band-inner:has(> .band-actions){flex-wrap:wrap;row-gap:4px}
.band-inner > .band-actions{position:static!important;order:-1;flex:1 0 100%;justify-content:flex-end;padding-top:0}
.band-home .band-inner:has(> .band-actions),.band-inner:has(> .band-actions){min-height:0!important}

/* Topo nítido no iPhone: o Safari desenha em baixa resolução tudo que tem "filter"
   (o brilho do nome e a sombra/tom do mascote), e o topo ficava desfocado.
   Sem filtro no nome e no mascote; o tom creme do mascote vira uma camada de cor por cima. */
.brandtext h1,.band .lockup h1,.band .lockup h1.longo,.band > .band-inner > a > span{filter:none!important}
.band .mascot,:root[data-mundo="crentito"] .band .mascot,:root[data-mundo="galera"] .mascot{filter:none!important}
:root[data-mundo="crentito"] .band .mascot{content:url("/assets/mascot-creme.png")}

/* iOS 26 desfoca uma faixa logo abaixo da barra de status (no app instalado e no Safari),
   e ela "comia" o alto do mascote e dos botões. O cabeçalho desce um pouco para sair dela. */
.band:has(> .topbar){padding-top:calc(max(env(safe-area-inset-top,0px),8px) + 20px)!important;
  min-height:calc(max(env(safe-area-inset-top,0px),8px) + 74px)!important}
.band:has(.band-actions),.band-home{padding-top:calc(env(safe-area-inset-top,0px) + 14px)!important}
.band:has(> .band-inner > a > img){padding-top:calc(env(safe-area-inset-top,0px) + 14px)!important}
.band:has(> .band-inner > a > img){overflow:visible!important}.band > .band-inner:has(> a > img){height:auto!important;min-height:56px;align-items:flex-end}
/* iOS 26: o Safari pinta a área da barra de status com a cor de fundo do <html> (ignora o theme-color); usa a cor do topo da luz amarela */
:root:root[data-mundo="crentito"]{background-color:#1C1A17!important;
  background-image:linear-gradient(in oklch 180deg,#EF7A1A 0,#E06A12 8vh,#A04614 18vh,#40221A 31vh,#1C1A17 48vh,#1C1A17 100%)!important;
  background-size:100% calc(100% + 100lvh)!important;background-position:0 0!important;background-repeat:no-repeat!important;min-height:100lvh}

/* App instalado (tela cheia): a barra de status já é alta e não há a faixa desfocada do Safari;
   o cabeçalho volta para perto do topo */
html.app{}


/* no amarelo vivo do topo, nome e subtítulo em tinta escura (o degradê amarelo sumia nele) */
:root[data-mundo="crentito"] :is(.brandtext h1,.band .lockup h1,.band .lockup h1.longo,.band > .band-inner > a > span){
  background:none!important;-webkit-text-fill-color:#241503!important;color:#241503!important}
:root[data-mundo="crentito"] .band .brandtext p{color:rgba(36,21,3,.72)!important}
:root[data-mundo="crentito"] .band :is(.login,.hstreak,.streak,.pillbtn,.acct-btn,.icon-btn,.back){color:#241503!important}
:root[data-mundo="crentito"] .band :is(.login,.hstreak,.streak,.pillbtn,.acct-btn,.icon-btn){background:rgba(255,255,255,.22)!important;border-color:rgba(255,255,255,.35)!important}
:root[data-mundo="crentito"] .band::after{background:rgba(36,21,3,.18)!important;animation:none}

/* Galera no Safari (iOS 26): a área da barra de status e a de baixo usam o fundo do <html>.
   O topo e o pé da página ganham faixas de cor uniformes (roxo em cima, azul-noite embaixo),
   e o <html> usa as mesmas cores, para não aparecer bloco sólido quebrando o degradê. */
:root[data-mundo="galera"] body::before{
  background:
    linear-gradient(in oklch 180deg,#3A1A7A 0,rgba(58,26,122,.85) 8vh,rgba(50,22,104,.5) 20vh,rgba(30,14,64,.2) 34vh,rgba(14,8,32,0) 48vh),
    linear-gradient(0deg,#0B0A24 0,rgba(11,10,36,.75) 7vh,rgba(11,10,36,0) 18vh),
    radial-gradient(46vmax 32vmax at 8% -2%,var(--luz1),transparent 66%),
    radial-gradient(40vmax 34vmax at 100% 30%,var(--luz2),transparent 64%),
    radial-gradient(56vmax 40vmax at 4% 88%,var(--luz3),transparent 64%),
    radial-gradient(40vmax 30vmax at 90% 100%,var(--luz4),transparent 62%),
    var(--n-fundo)!important;inset:0!important;animation:none!important}
:root:root[data-mundo="galera"]{background-color:#0B0A24!important;
  background-image:linear-gradient(180deg,#3A1A7A 0,#07040F 40vh,#07040F calc(100% - 100lvh - 30vh),#0B0A24 calc(100% - 100lvh),#0B0A24 100%)!important;
  background-size:100% calc(100% + 100lvh)!important;background-repeat:no-repeat!important;min-height:100lvh}

/* App aberto pela tela de início (html.app, marcado pelo neon.js): cabeçalho perto da barra de status */
/* (30/10) só a página inicial sobe no app: nos jogos e nas páginas de conta o cabeçalho fica com o mesmo espaço do Safari */
html.app .band-inner:has(> .band-actions){row-gap:0}

/* ================= 30/10: laranja no lugar do amarelo, texto branco no topo ================= */
:root[data-mundo="crentito"] :is(.brandtext h1,.band .lockup h1,.band .lockup h1.longo,.band > .band-inner > a > span){-webkit-text-fill-color:#fff!important;color:#fff!important}
:root[data-mundo="crentito"] .band .brandtext p{color:rgba(255,255,255,.82)!important}
:root[data-mundo="crentito"] .band :is(.login,.hstreak,.streak,.pillbtn,.acct-btn,.icon-btn,.back){color:#fff!important}
:root[data-mundo="crentito"] .band :is(.login,.hstreak,.streak,.pillbtn,.acct-btn,.icon-btn){background:rgba(255,255,255,.18)!important;border-color:rgba(255,255,255,.32)!important}
:root[data-mundo="crentito"] .band::after{background:rgba(255,255,255,.22)!important}
/* Galera: nome em branco, sem degradê */
:root[data-mundo="galera"] :is(.brandtext h1,.band .lockup h1,.band .lockup h1.longo,.band > .band-inner > a > span){background:none!important;-webkit-text-fill-color:#fff!important;color:#fff!important}

/* ================= bordas do Safari 26 =================
   O Safari 26 ignora o theme-color e pinta a barra de status e a área da barra de baixo
   lendo a cor de fundo de um elemento FIXO, sem transparência, encostado na borda e com
   pelo menos ~80% da largura; sem ele, usa o fundo do <html>. Pseudo-elementos e degradês
   não contam (daí as faixas chapadas). O neon.js põe duas tiras fixas de 6 px com a cor
   exata em que o degradê começa (topo) e termina (pé), para o Safari tingir as barras
   com elas. */
.borda-topo,.borda-pe{position:fixed;left:0;right:0;height:6px;pointer-events:none;z-index:2}
.borda-topo{top:0;background-color:#EF7A1A}
.borda-pe{bottom:0;background-color:#1C1A17}
:root[data-mundo="galera"] .borda-topo{background-color:#3A1A7A}
:root[data-mundo="galera"] .borda-pe{background-color:#0B0A24}

/* vidro do fim do jogo fora da tela (display:none) enquanto não aparece: elemento fixo encostado no pé,
   mesmo invisível, o Safari 26 pode usá-lo para pintar a barra de baixo */
.fim-vidro{display:none}
html:has(.jornada.show) .fim-vidro:not(.off){display:block}

/* Galera sem pontilhado nem feixe (fundo só com as luzes) */
:root[data-mundo="galera"] body::after{display:none!important}

/* ================= 30/10: topo dos jogos mais compacto =================
   Número e data numa linha só, sem a frase de descrição (ela está no "Como jogar"),
   botões menores e menos espaço em cima: no Cronos o "Confirmar ordem" cabe sem rolar. */
:root[data-mundo="crentito"] main > .dayrow{gap:8px}
:root[data-mundo="crentito"] .dayrow .dayinfo{flex-wrap:nowrap;gap:8px;align-items:baseline;overflow:hidden}
:root[data-mundo="crentito"] .dayrow .num{font-size:15px;flex:none}
:root[data-mundo="crentito"] .dayrow .date{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
:root[data-mundo="crentito"] .dayrow .gdesc{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root[data-mundo="crentito"] .dayrow .icon-btn{width:38px;height:38px;border-radius:12px}
:root[data-mundo="crentito"] .dayrow .icon-btn svg{width:20px;height:20px}
:root[data-mundo="crentito"] main:has(> .dayrow){padding-top:12px;gap:14px}

/* ================= mascote recortado no cabeçalho (perfil, perfil público e páginas de conta) ================= */
.band:has(> .band-inner > a > img){overflow:hidden!important}
.band > .band-inner:has(> a > img){align-items:flex-end;min-height:0!important;height:auto!important}
.band > .band-inner > a:has(> img){align-self:stretch;display:flex;align-items:flex-end;overflow:hidden;padding-top:6px}
.band > .band-inner > a > img{margin-bottom:-12px!important}
.band > .band-inner:has(> a > img) > .acct{top:auto!important;bottom:12px}

/* ================= Radar: carta escolhida acende como a palavra escolhida no 4 por 4 ================= */
.cell:not(.r):not(.k-A):not(.k-B):not(.k-N):not(.k-X):not(.g > .cell){background:var(--vidro)!important;box-shadow:inset 0 0 0 1px var(--vidro-borda),0 6px 16px -10px rgba(0,0,0,.7)!important;
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.cell.mine:not(.r){background:#F9BD33!important;color:#1F1503!important;
  box-shadow:0 0 22px -4px rgba(249,189,51,.75),inset 0 0 0 1px rgba(255,255,255,.35)!important;-webkit-backdrop-filter:none;backdrop-filter:none}
.cell.mine:not(.r) .go{background:#1F1503!important;color:#F9BD33!important}

/* ================= Parábola: pistas em vidro ================= */
.clue.up{background:var(--vidro)!important;border:1px solid var(--vidro-borda)!important;box-shadow:var(--sombra-cartao)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.clue.up.found{border-color:var(--ok)!important}
.clue.down{background:rgba(255,255,255,.035)!important;border:1px dashed rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.clue.down .n{background:rgba(255,255,255,.08)!important}
.clue.next{border:1px solid var(--brand)!important;box-shadow:0 0 18px -6px color-mix(in srgb,var(--brand) 70%,transparent)!important}

/* balão "Salvar como app" (início e Galera): vidro escuro, como as outras janelas */
.install{background:var(--vidro-camada)!important;color:var(--ink)!important;border:1px solid var(--vidro-borda)!important;
  -webkit-backdrop-filter:blur(26px) saturate(170%);backdrop-filter:blur(26px) saturate(170%);box-shadow:0 18px 40px -14px rgba(0,0,0,.7)!important}
.install .no{color:var(--ink)!important}
/* espaço entre o último cartão e o rodapé nas páginas de conta */
main + footer{margin-top:10px}

/* ================= caixas de lembrete no visual novo ================= */
/* "Quer um lembrete?" na página inicial */
.lembrete{background:var(--vidro)!important;border:1px solid color-mix(in srgb,var(--brand) 55%,transparent)!important;box-shadow:var(--sombra-cartao),0 0 24px -10px color-mix(in srgb,var(--brand) 70%,transparent)!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.lembrete .lb-actions button:not(.no){background:var(--brand)!important;color:var(--brand-ink)!important;border:0!important}
.lembrete .lb-actions button.no{background:var(--vidro)!important;color:var(--ink)!important;border:1px solid var(--vidro-borda)!important}
/* box do fim da jornada (ofensiva + lembrete) */
.fj{background:var(--vidro-camada)!important;border:1px solid var(--vidro-borda);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 20px 60px -16px rgba(0,0,0,.75)!important;
  -webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%)}
.fj-scrim{background:var(--scrim)!important}
.mascot-link{display:flex;align-items:flex-end;flex:none;align-self:flex-end;-webkit-tap-highlight-color:transparent}
.mascot-link .mascot-w{display:flex;align-items:flex-end}

/* rodapé: ícones discretos das redes (YouTube, Instagram, TikTok) */
footer .redes{display:flex;gap:18px;align-items:center;justify-content:center;margin:4px 0 8px;width:100%}
footer .redes a{display:inline-grid;place-items:center;width:20px;height:20px;color:var(--muted)!important;opacity:.6;text-decoration:none!important;transition:opacity .2s}
footer .redes a:hover,footer .redes a:focus-visible{opacity:1}
footer .redes svg{width:18px;height:18px;display:block}

/* ===== 30/10 (tarde): cabeçalho na mesma altura em todas as páginas, no Safari e no app =====
   Referência: os jogos (Caça versículo etc.), com os botões 29px abaixo da barra de status. */
.band:has(.band-actions):not(.band-home){padding-top:calc(env(safe-area-inset-top,0px) + 29px)!important}
.band:has(.band-actions):not(.band-home) > .band-inner{padding-top:0!important;min-height:0!important}
.band:has(.band-actions):not(.band-home) .band-actions{top:0!important;padding-top:0!important}
.band:has(.band-actions):not(.band-home) > .band-inner > .login{top:0!important}
.band-home{padding-top:calc(env(safe-area-inset-top,0px) + 29px)!important}
.band-home .acct{top:calc(env(safe-area-inset-top,0px) + 29px)!important}
.band:has(> .band-inner > a > img){padding-top:calc(env(safe-area-inset-top,0px) + 33px)!important}

/* ===== Caça versículo: palpites com vidro, e os acertos voltam a preencher o box (com brilho) ===== */
.g > .cell.book,.g > .cell.sec:not(.same):not(.bookok){background:var(--vidro);border-color:var(--vidro-borda);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%)}
.g > .cell.sec.same{background:rgba(63,224,142,.2);border-color:rgba(63,224,142,.7);color:#C9FBE0}
.g > .cell.sec.bookok,.g.win > .cell{background:linear-gradient(180deg,#5BEBA2,#2FC97A)!important;border-color:#7FF5B8!important;color:#06281A!important;
  box-shadow:0 0 22px -4px rgba(63,224,142,.75),inset 0 1px 0 rgba(255,255,255,.4)}
.g > .cell.dist[class*="h-"]{box-shadow:0 0 18px -6px var(--brilho,transparent),inset 0 1px 0 rgba(255,255,255,.25)}
.g > .cell.dist.h-quase{--brilho:#F0884E}.g > .cell.dist.h-perto{--brilho:#E8B848}

/* ===== 4 por 4: "Como jogar" animado no visual novo (vidro, palavras como no jogo) ===== */
.qi-scrim{background:rgba(10,7,4,.45)!important;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.qi{border-radius:26px!important}
.qi-t{background:rgba(255,236,200,.09)!important;border:1px solid var(--vidro-borda)!important;color:var(--ink)!important;
  box-shadow:0 6px 14px -8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08)}
.qi-t.sel{background:#F9BD33!important;color:#1F1503!important;border-color:#F9BD33!important;box-shadow:0 0 16px -3px rgba(249,189,51,.75)!important}
.qi-bar{box-shadow:0 0 18px -4px var(--g0)}
.qi-lives i{background:#F9BD33}.qi-lives i.used{background:rgba(255,255,255,.15)}
.qi-go{border-radius:16px!important;box-shadow:0 0 22px -6px rgba(249,189,51,.6)!important}

/* ===== convite para apoiar (fim da jornada / ofensiva) na página inicial: vidro como o lembrete ===== */
.apoio-conv{background:var(--vidro)!important;color:var(--ink)!important;border:1px solid rgba(255,170,60,.55)!important;border-radius:20px!important;
  box-shadow:var(--sombra-cartao),0 0 26px -10px rgba(255,150,40,.7)!important;padding:14px 12px 14px 16px!important;
  -webkit-backdrop-filter:blur(22px) saturate(180%)!important;backdrop-filter:blur(22px) saturate(180%)!important}
.apoio-conv .ac-t b{color:#fff}
.apoio-conv .ac-t span{color:var(--muted);opacity:1!important}
.apoio-conv .ac-go{background:linear-gradient(115deg,#FFD34A,#FF8F1F)!important;color:#2A1703!important;padding:8px 14px!important;box-shadow:0 0 18px -6px rgba(255,160,40,.8)}
.apoio-conv .ac-x{color:var(--ink)!important}

/* ===== Mensagens (conversa): no visual novo — topo e caixa de escrever em vidro, balões com vidro e brilho ===== */
body.chat .topo{top:calc(max(env(safe-area-inset-top,0px),8px) + 6px)!important;margin:10px 0 0;padding:8px 10px!important;border:1px solid var(--vidro-borda)!important;border-radius:20px;
  background:var(--vidro-camada,rgba(30,24,18,.6))!important;box-shadow:var(--sombra-cartao);-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%)}
body.chat .topo .volta,body.chat .topo .kebab > button{background:rgba(255,255,255,.07);border-radius:12px}
body.chat .topo .menu{background:var(--vidro-camada)!important;border-color:var(--vidro-borda)!important;-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px)}
body.chat .msgs .dia{background:var(--vidro)!important;border:1px solid var(--vidro-borda);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.chat .bb{font-size:15.5px;box-shadow:0 8px 20px -14px rgba(0,0,0,.8)}
body.chat .bb.dele{background:var(--vidro)!important;border:1px solid var(--vidro-borda)!important;-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%)}
body.chat .bb.minha{background:linear-gradient(160deg,#FFC64A,#F39A2A)!important;color:#2A1703!important;box-shadow:0 0 22px -10px rgba(255,170,50,.8),inset 0 1px 0 rgba(255,255,255,.35)}
body.chat .escrever{z-index:5;background:none!important;border-top:0!important;padding:10px 0 calc(12px + env(safe-area-inset-bottom,0px))!important}
body.chat .escrever::before{content:"";position:absolute;inset:0 -16px;z-index:-1;pointer-events:none;
  background:linear-gradient(to top,rgba(20,16,12,.85),rgba(20,16,12,0));}
body.chat .escrever textarea{background:var(--vidro-camada,rgba(30,24,18,.6))!important;border:1px solid var(--vidro-borda)!important;border-radius:24px!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:var(--sombra-cartao)}
body.chat .escrever textarea:focus{border-color:rgba(255,190,80,.7)!important}
body.chat .escrever button{background:linear-gradient(160deg,#FFC64A,#F39A2A)!important;color:#2A1703!important;box-shadow:0 0 20px -6px rgba(255,170,50,.8)}
body.chat .escrever button:disabled{opacity:.4;box-shadow:none}
body.chat .aviso,body.chat .antigas{background:var(--vidro)!important;border-color:var(--vidro-borda)!important}