/* =========================================================================
   Galadh — tela de arranque.

   Vale para os DOIS hosts: o front web e o WebView do cliente instalado
   linkam este mesmo arquivo. Antes eram dois splashes desenhados à mão,
   um em cada index.html, e nenhum parecido com o outro nem com o app:
   o web em azul-marinho #0f1c2e com spinner verde Material #4caf50, o
   terminal em texto puro #03173d, e antes deles o splash nativo roxo
   #512BD4 que veio do template do .NET. Quatro identidades em sequência.

   As cores entram antes do Blazor. Os valores espelham os tokens da paleta
   em Galadh.Componentes/galadh.css para evitar uma mudança de cor ao carregar.
   ========================================================================= */

:root {
    --ga-fundo: #F4F7F5;
    --ga-texto: #17271E;
    --ga-secundario: #52645A;
    --ga-marca: #0F7A37;
    --ga-trilho: #CEDBD2;
    --ga-perigo: #AA2831;
}

/* Os atributos entram antes da primeira pintura com as mesmas chaves de
   localStorage que o TemaGaladh usa. */
:root[data-tema="escuro"] {
    --ga-fundo: #15191C;
    --ga-texto: #F0F3F4;
    --ga-secundario: #BDC8CE;
    --ga-marca: #4ADE80;
    --ga-trilho: #4A565D;
    --ga-perigo: #FFAFB5;
}
:root[data-paleta="oceano"] {
    --ga-fundo: #F3F6F8; --ga-texto: #192832; --ga-secundario: #526672;
    --ga-marca: #155D80; --ga-trilho: #CCD9E0;
}
:root[data-paleta="oceano"][data-tema="escuro"] {
    --ga-fundo: #121B21; --ga-texto: #EDF4F7; --ga-secundario: #B6CAD4;
    --ga-marca: #91CEE9; --ga-trilho: #405966;
}
:root[data-paleta="ametista"] {
    --ga-fundo: #F6F5F8; --ga-texto: #282330; --ga-secundario: #665C70;
    --ga-marca: #684A83; --ga-trilho: #DDD5E3;
}
:root[data-paleta="ametista"][data-tema="escuro"] {
    --ga-fundo: #19161E; --ga-texto: #F3EFF5; --ga-secundario: #C9BDD1;
    --ga-marca: #D4B8E5; --ga-trilho: #594C62;
}
:root[data-paleta="terracota"] {
    --ga-fundo: #F8F6F3; --ga-texto: #30261F; --ga-secundario: #6E5D52;
    --ga-marca: #95502F; --ga-trilho: #E1D5CA;
}
:root[data-paleta="terracota"][data-tema="escuro"] {
    --ga-fundo: #1B1815; --ga-texto: #F7F0E9; --ga-secundario: #D1C0B2;
    --ga-marca: #E9B48D; --ga-trilho: #5C4A3D;
}
:root[data-paleta="grafite"] {
    --ga-fundo: #F5F6F7; --ga-texto: #22272B; --ga-secundario: #5C656C;
    --ga-marca: #353E45; --ga-trilho: #D4D9DE;
}
:root[data-paleta="grafite"][data-tema="escuro"] {
    --ga-fundo: #16181A; --ga-texto: #F0F2F3; --ga-secundario: #C0C7CB;
    --ga-marca: #D8E0E4; --ga-trilho: #4B5358;
}

/* Sobreposição, e não conteúdo de #app: o Blazor APAGA o conteúdo de #app
   quando monta o componente raiz. Um splash dentro dele desapareceria no
   instante em que o runtime subisse — muito antes de a sessão estar
   resolvida — e é justamente essa janela que precisa ficar coberta. */
.galadh-arranque {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ga-fundo);
    color: var(--ga-texto);
    font: 400 1rem/1.5 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    transition: opacity 240ms ease;
}

.galadh-arranque[data-saindo="1"] {
    opacity: 0;
    pointer-events: none;
}

/* A regra [hidden] vem da folha do user-agent e PERDE para qualquer classe do
   autor que declare display. Sem este !important, chamar falhar() escondia o
   miolo no DOM e ele continuava na tela, com o painel de erro ao lado. E a
   armadilha 11 do CLAUDE.md, no mesmo lugar de sempre. */
.galadh-arranque [hidden] {
    display: none !important;
}

.galadh-arranque__miolo {
    width: min(320px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

/* A marca é tipográfica porque a marca do app é tipográfica: é o mesmo
   wordmark que o NavMenu desenha em .g-app-marca. Nada de imagem — um PNG
   aqui seria mais um arquivo no caminho crítico. */
.galadh-arranque__marca {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ga-marca);
}

.galadh-arranque__trilho {
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: var(--ga-trilho);
    overflow: hidden;
}

.galadh-arranque__barra {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--ga-marca);
    /* A largura é escrita quadro a quadro pelo JS, que já suaviza o avanço.
       Uma transição de largura aqui brigaria com ele e faria a barra
       tremer. */
}

.galadh-arranque__estado {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
    color: var(--ga-secundario);
}

.galadh-arranque__pct {
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;  /* sem isto o número dança ao trocar de dígito */
    color: var(--ga-texto);
}

.galadh-arranque__fase {
    min-height: 1.5em;  /* reserva a linha: sem isto o texto da fase empurra o layout */
}

/* ----- Estado de falha ------------------------------------------------- */

.galadh-arranque__falha {
    width: min(360px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}


.galadh-arranque__falha-titulo {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ga-texto);
}

.galadh-arranque__falha-texto {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ga-secundario);
}

.galadh-arranque__botao {
    margin-top: 8px;
    padding: 10px 20px;
    border: 0;
    border-radius: 8px;
    background: var(--ga-marca);
    color: var(--ga-fundo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.galadh-arranque__botao:focus-visible {
    outline: 2px solid var(--ga-texto);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .galadh-arranque {
        transition: none;
    }
}