/* =============================================================================
   TugLife Sim - Splash screen de carregamento
   =============================================================================
   AUTOR: Jossian Brito | ANO: 2026 | DATA: 22/10/2026 | HORA: 03:30 (GMT-3)
   VERSÃO: 0.10.8-beta  [TAG-UI-020] [TAG-3D-026]

   LAYOUT
   - Celular (retrato): uma coluna — marca, vitrine 3D, progresso, log,
     dica, botões INICIAR / MANUAL e rodapé (autor, WhatsApp, visitas).
   - Tela larga (>= 900 px): duas colunas — vitrine 3D à esquerda (grande),
     painel de progresso e botões à direita.

   - Usa os tokens do tema Console Verde (--cv-*) com valores de reserva, para
     funcionar mesmo se tuglife_theme_console.css não carregar.
   - Barra segmentada em 10 divisões: leitura de bargraph de painel (cada
     divisão = 10 %), como os indicadores de nível dos tanques no console.
   - html.tug-splash-lock impede a rolagem da página por trás da splash.
   ============================================================================= */

html.tug-splash-lock,
html.tug-splash-lock body {
    overflow: hidden;
}

.tug-splash {
    position: fixed;
    inset: 0;
    z-index: 100000;                    /* acima de modais (3000) e tour */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: radial-gradient(ellipse at center, var(--cv-page-1, #1f6d34) 0%, var(--cv-page-2, #164f26) 70%, #0e3a1b 100%);
    color: var(--cv-text, #eef8ef);
    font-family: var(--cv-font, system-ui, "Segoe UI", Roboto, Arial, sans-serif);
    transition: opacity 0.45s ease;
}

.tug-splash.is-leaving {
    opacity: 0;
    pointer-events: none;
}

.tug-splash__card {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
    overflow: auto;
    background: var(--cv-well, #0c2715);
    border-radius: 14px;
    padding: 22px 20px 18px;
    box-shadow: var(--cv-shadow-panel, 0 16px 32px rgba(0, 0, 0, 0.35));
}

.tug-splash__brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.tug-splash__brand svg {
    flex: 0 0 auto;
}

.tug-splash__brand h1 {
    margin: 0;
    font-size: 1.55rem;
    letter-spacing: 0.06em;
}

.tug-splash__brand h1 span {
    color: var(--cv-accent, #b6ff9c);
}

.tug-splash__brand p {
    margin: 2px 0 0;
    color: var(--cv-text-muted, #a8c8ae);
    font-size: 0.8rem;
}

.tug-splash__version {
    margin-left: auto;
    align-self: flex-start;
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.7rem;
    color: var(--cv-text-dim, #7fa587);
    border: 1px solid var(--cv-hairline, rgba(255, 255, 255, 0.08));
    padding: 3px 7px;
    border-radius: 6px;
}

.tug-splash__stage {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--cv-text-muted, #a8c8ae);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tug-splash__stage b {
    color: var(--cv-text, #eef8ef);
}

.tug-splash__pct {
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
    color: var(--cv-value, #ffe14d);
    font-size: 1.05rem;
}

.tug-splash__bar {
    position: relative;
    margin-top: 8px;
    height: 16px;
    border-radius: 8px;
    background: var(--cv-deep, #050d08);
    box-shadow: var(--cv-shadow-inset-deep, inset 0 2px 5px rgba(0, 0, 0, 0.75));
    overflow: hidden;
}

.tug-splash__fill {
    height: 100%;
    width: 0;
    border-radius: 8px;
    background: linear-gradient(90deg, #3fae5a, var(--cv-accent, #b6ff9c));
    box-shadow: 0 0 10px rgba(182, 255, 156, 0.45);
    transition: width 0.12s linear;
}

/* 10 divisões: uma linha escura a cada 10 % */
.tug-splash__ticks {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, 0.35) calc(10% - 1px) 10%);
    pointer-events: none;
}

.tug-splash__sub {
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.7rem;
    color: var(--cv-text-dim, #7fa587);
}

.tug-splash__log {
    position: relative;                 /* referência do offsetTop das linhas */
    margin-top: 12px;
    height: 140px;
    overflow: hidden;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cv-deep, #050d08);
    box-shadow: var(--cv-shadow-inset-deep, inset 0 2px 5px rgba(0, 0, 0, 0.75));
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.76rem;
    line-height: 1.55;
}

/* O tema aplica "* { font-family: var(--cv-font) }" a TODO elemento, então os
   filhos não herdam a fonte mono do pai: ela precisa ser declarada neles. */
.tug-splash__line,
.tug-splash__sub span,
.tug-splash__viewer-status {
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
}

.tug-splash__line {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Vitrine 3D [TAG-3D-026] ------------------------------------------- */
.tug-splash__body {
    display: flex;
    flex-direction: column;
}

.tug-splash__viewer {
    position: relative;
    margin-top: 14px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 70%, #17402a 0%, var(--cv-deep, #050d08) 75%);
    box-shadow: var(--cv-shadow-inset-deep, inset 0 2px 5px rgba(0, 0, 0, 0.75));
}

.tug-splash__canvas {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: pan-y;               /* arrasto horizontal gira; vertical rola a página */
}

.tug-splash__viewer.is-dragging .tug-splash__canvas { cursor: grabbing; }

.tug-splash__viewer-status {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    font-family: var(--cv-mono, ui-monospace, Menlo, Consolas, monospace);
    font-size: 0.75rem;
    color: var(--cv-text-dim, #7fa587);
    pointer-events: none;
}

.tug-splash__viewer-hint {
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 0.68rem;
    color: var(--cv-text-dim, #7fa587);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

.tug-splash__viewer.is-loaded .tug-splash__viewer-hint { opacity: 0.85; }

/* Prefixo de status estilo console de inicialização */
.tug-splash__line::before { white-space: pre; }
.tug-splash__line.is-ok   { color: var(--cv-accent, #b6ff9c); }
.tug-splash__line.is-ok::before   { content: "[ OK ] "; }
.tug-splash__line.is-run  { color: var(--cv-value, #ffe14d); }
.tug-splash__line.is-run::before  { content: "[ >> ] "; }
.tug-splash__line.is-wait { color: #4b6b53; }
.tug-splash__line.is-wait::before { content: "[ .. ] "; }
.tug-splash__line.is-warn { color: #ffb74d; }
.tug-splash__line.is-warn::before { content: "[AVISO] "; }
.tug-splash__line.is-fail { color: #ff8a80; }
.tug-splash__line.is-fail::before { content: "[FALHA] "; }

.tug-splash__tip {
    margin-top: 12px;
    font-size: 0.74rem;
    line-height: 1.35;
    color: var(--cv-text-muted, #a8c8ae);
    min-height: 2.7em;
}

.tug-splash__actions {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

/* Rodapé: autor, WhatsApp e contador de visitas (vindos da antiga apresentação) */
.tug-splash__foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cv-hairline, rgba(255, 255, 255, 0.08));
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: var(--cv-text-muted, #a8c8ae);
}

.tug-splash__author strong { color: var(--cv-text, #eef8ef); }

.tug-splash__wa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(37, 211, 102, 0.3);
    background: rgba(37, 211, 102, 0.1);
    color: #25d366;
    font-weight: 700;
    text-decoration: none;
}

.tug-splash__wa:hover,
.tug-splash__wa:focus-visible { background: rgba(37, 211, 102, 0.22); }

.tug-splash__visits {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tug-splash__visits img {
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 188, 212, 0.3);
}

.tug-splash__tip b {
    color: var(--cv-accent, #b6ff9c);
}

.tug-splash__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font: inherit;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    padding: 10px 14px;
    border: 0;
    border-radius: 9px;
    color: #5c7a62;
    background: #173a22;
    cursor: not-allowed;
}

.tug-splash.is-ready [data-splash="enter"] {
    color: #082010;
    background: linear-gradient(180deg, #c9ffb5 0%, var(--cv-accent, #b6ff9c) 100%);
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(182, 255, 156, 0.35);
    cursor: pointer;
    animation: tug-splash-pulse 1.6s ease-in-out infinite;
}

.tug-splash.is-ready [data-splash="enter"]:focus-visible {
    outline: 2px solid var(--cv-value, #ffe14d);
    outline-offset: 3px;
}

.tug-splash__btn--manual {
    color: var(--cv-text, #eef8ef);
    background: var(--cv-pill, linear-gradient(180deg, #2a5e3b 0%, #1d4529 100%));
    box-shadow: var(--cv-shadow-pill, 0 1px 2px rgba(0, 0, 0, 0.45));
    cursor: pointer;
}

.tug-splash__btn--manual:hover,
.tug-splash__btn--manual:focus-visible {
    background: var(--cv-pill-hover, linear-gradient(180deg, #316b44 0%, #225032 100%));
    outline: none;
}

.tug-splash.is-slow [data-splash="enter"] {
    background: linear-gradient(180deg, #ffe08a 0%, #ffb74d 100%);
}

@keyframes tug-splash-pulse {
    0%, 100% { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(182, 255, 156, 0.25); }
    50%      { box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 4px 22px rgba(182, 255, 156, 0.6); }
}

/* Tela larga: vitrine 3D grande à esquerda, painel à direita */
@media (min-width: 900px) {
    .tug-splash__card { width: min(1040px, 100%); }
    .tug-splash__body {
        flex-direction: row;
        gap: 18px;
        align-items: stretch;
    }
    .tug-splash__viewer {
        flex: 1.2 1 0;
        height: auto;
        min-height: 420px;
    }
    .tug-splash__panel { flex: 1 1 0; min-width: 0; }
    .tug-splash__stage { margin-top: 14px; }
}

/* Celular em retrato: cabeçalho compacto */
@media (max-width: 520px) {
    .tug-splash__brand h1 { font-size: 1.25rem; }
    .tug-splash__brand p { font-size: 0.72rem; }
    .tug-splash__brand svg { width: 44px; height: 44px; }
    .tug-splash__version { display: none; }
    .tug-splash__stage { font-size: 0.7rem; }
    .tug-splash__log { font-size: 0.68rem; height: 118px; }
    .tug-splash__viewer { height: 200px; }
    .tug-splash__btn { padding: 12px; }
    .tug-splash__foot { justify-content: center; }
}

/* Celular em paisagem (pouca altura): log mais baixo */
@media (max-height: 480px) {
    .tug-splash__log { height: 90px; }
    .tug-splash__viewer { min-height: 0; height: 160px; }
    .tug-splash__stage { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .tug-splash,
    .tug-splash__fill { transition: none; }
    .tug-splash.is-ready [data-splash="enter"] { animation: none; }
}

.tug-splash__visits[hidden] { display: none; }