/* BRASLOL 2 - complementos. O visual do menu e das configuracoes vem de style.css (identico ao modelo). */

/* ---- area do jogo (telas depois do menu) ---- */
#app{position:fixed;inset:0;z-index:1;display:none;flex-direction:column;background:linear-gradient(#232323 0,#121212 380px,#121212);color:#fff;font-family:var(--ui);padding:env(safe-area-inset-top,0px) 0 env(safe-area-inset-bottom,0px);overflow:auto;touch-action:pan-y}
#app .hmain{padding-top:56px}
#app .hmain p{max-width:44ch}
.hstats{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:30px}
.hstats div{display:flex;flex-direction:column;gap:5px}
.hstats span{font-size:12px;font-weight:700;color:#b3b3b3}
.hstats b{font-size:28px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

/* ---- fundo da tela inicial: a arte oficial, atras do menu de sempre ----
   Coloque a imagem em: assets/img/backgrounds/tela-inicial2.png  (so do menu inicial; o dashboard continua usando tela-inicial.png em career.css) */
#home::before{background:url(../assets/img/backgrounds/tela-inicial2.webp) center/cover no-repeat;opacity:.5}


/* ---- escurecimento em degrade sobre o fundo da tela inicial ----
   Fica entre a imagem (::before) e o conteudo. Mais escuro a esquerda (onde esta o titulo) e embaixo; a arte aparece mais a direita.
   Para ajustar a forca: mude os numeros de opacidade (0 a 1) nos rgba(...) abaixo. */
#home::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(18,18,18,.96) 0%,rgba(18,18,18,.78) 38%,rgba(18,18,18,.3) 72%,rgba(18,18,18,.05) 100%),
    linear-gradient(0deg,rgba(18,18,18,.95) 0%,rgba(18,18,18,.55) 22%,rgba(18,18,18,0) 55%),
    linear-gradient(180deg,rgba(18,18,18,.55) 0%,rgba(18,18,18,0) 22%)}
@media (max-width:700px){
  /* no celular o texto ocupa a largura toda: escurece de cima a baixo */
  #home::after{background:linear-gradient(180deg,rgba(18,18,18,.65) 0%,rgba(18,18,18,.5) 40%,rgba(18,18,18,.92) 100%)}}

/* ---- titulo da tela inicial: texto "BRASLOL 2" na fonte Hegarown ----
   A fonte fica em: assets/fonts/Hegarown.woff2 (o .otf e reserva; o servidor.ps1 precisa liberar .otf para a reserva; o CSP ja libera font-src 'self').
   O titulo e TEXTO normal (nao imagem): textContent/HTML estatico, sem nenhum risco de injecao.
   - Tamanho: mude o clamp(minimo, proporcional a tela, maximo) em font-size.
   - Cor: mude "color". - Espacamento entre letras: letter-spacing. */
@font-face{font-family:"Hegarown";src:url(../assets/fonts/Hegarown.woff2) format("woff2"),url(../assets/fonts/Hegarown.otf) format("opentype");font-weight:400;font-style:normal;font-display:block}
/* ---- medidas da tela inicial (titulo, espacamento, boneco) ----
   --tfs  tamanho do titulo (minimo, proporcional a tela, maximo)
   --gap  distancia VISUAL igual acima e abaixo de "Faca acontecer." (titulo -> frase -> botao Jogar)
   --jinx-escala  tamanho do boneco 3D em relacao ao tamanho da fonte (1 = igual a fonte; .8 = um pouco menor) */
#hv-home{--tfs:clamp(38px,8vw,96px);--gap:clamp(22px,3vw,38px);--jinx-escala:1.5}
.hmain h1.htitle{display:flex;align-items:center;gap:.05em;margin:0;font-family:"Hegarown",Georgia,"Times New Roman",serif;font-weight:400;font-synthesis:none;font-size:var(--tfs);line-height:1;letter-spacing:0;color:#fff;white-space:nowrap;user-select:none;-webkit-user-select:none}
/* .172em = espaco vazio da caixa do titulo abaixo das letras (metricas da Hegarown); descontado para a distancia ser igual dos dois lados */
#hv-home p{margin-top:calc(var(--gap) - var(--tfs) * .172)}
#hv-home .hbtns{margin-top:var(--gap)}
/* alinhamento do inicio das letras do titulo com a frase e o botao: o valor --tl e calculado em js/game/home.js (alignTitle) para a fonte em uso */
#hv-home h1.htitle{margin-left:var(--tl,0)}

/* ---- boneco 3D (js/vendor/jinx3d.js) ao lado do "2" ----
   Comeca escondido; o script so o mostra (.ok) depois de carregar o modelo. Sem WebGL/modelo, o titulo fica como estava. */
.hjinx{display:none;position:relative;flex:none;width:calc(1em * var(--jinx-escala));height:calc(1em * var(--jinx-escala));margin:calc(.5em * (1 - var(--jinx-escala))) 0 calc(.5em * (1 - var(--jinx-escala))) -.04em;transform:translateY(-.02em)}  
.hjinx.ok{display:block;animation:hin .6s ease both}
/* o canvas e 3x mais largo que a caixa e fica centralizado nela: e a area onde ela anda, sem ser cortada, e nao muda o layout */
.hjinx canvas{position:absolute;top:0;left:50%;width:300%;height:100%;transform:translateX(-50%);cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent}   /* arraste para girar; pan-y deixa a rolagem vertical funcionar no celular */
.hjinx.gira canvas{cursor:grabbing}

/* ---- transicao entre telas (menu inicial -> criar carreira -> dashboard) ----
   #home.hout: o menu desvanece por cima da proxima tela. #app.sout/.sin: a tela atual some e a nova aparece (js/core/app.js). */
@keyframes scrout{to{opacity:0}}
@keyframes scrin{from{opacity:0}}
@keyframes hfade{to{opacity:0}}
#home.hout{animation:hfade .16s ease both;pointer-events:none}
#app.sout{animation:scrout .08s ease both;pointer-events:none}
#app.nofx *,#app.nofx *::before,#app.nofx *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}   /* sem blur so durante a animacao de entrada (app.js) */
#app.hold *,#app.hold *::before,#app.hold *::after{animation-play-state:paused!important}   /* tela nova montada: animacoes esperam o fundo/1a pintura (app.js) */
/* ---- Configuracoes > "Animacoes de transicao" desligada (settings.js grava data-trans-anim="0" no <html>): so a entrada/troca de telas; nao mexe no clique (.tap) nem nos modais ---- */
html[data-trans-anim="0"] #home.hout,
html[data-trans-anim="0"] #app .c-bg,html[data-trans-anim="0"] #app .c-shade,html[data-trans-anim="0"] #app .c-nav>*,html[data-trans-anim="0"] #app .c-main>*,html[data-trans-anim="0"] #app .c-pc,html[data-trans-anim="0"] #app .c-tw,html[data-trans-anim="0"] #app .c-tr,html[data-trans-anim="0"] #app .c-grp,
html[data-trans-anim="0"] #app .r-main>*,html[data-trans-anim="0"] #app .r-card,
html[data-trans-anim="0"] #app .t-main>*,html[data-trans-anim="0"] #app .t-pc,
html[data-trans-anim="0"] #app .mz-main>*,html[data-trans-anim="0"] #app .mz-sp,
html[data-trans-anim="0"] #app .sx-main>*,html[data-trans-anim="0"] #app .sx-row,
html[data-trans-anim="0"] #app .pt-main>*,html[data-trans-anim="0"] #app .pt-it,
html[data-trans-anim="0"] #app .sq-main>*,html[data-trans-anim="0"] #app .sq-card,
html[data-trans-anim="0"] #app .nc-bg::before,html[data-trans-anim="0"] #app .nc-bg::after,html[data-trans-anim="0"] #app .nc-panel,html[data-trans-anim="0"] #app .nc-panel.ent>*,html[data-trans-anim="0"] #app .nc-panel.ent .nc-rp,html[data-trans-anim="0"] #app .nc-panel.ent .nc-team,
html[data-trans-anim="0"] #app .d-bg,html[data-trans-anim="0"] #app .d-panel,html[data-trans-anim="0"] #app .d-bans,html[data-trans-anim="0"] #app .d-timer,html[data-trans-anim="0"] #app .d-pks,html[data-trans-anim="0"] #app .d-fl{animation:none!important}
html[data-trans-anim="0"] #app .c-brk>*{animation:none!important}