/* ==========================================================================
   MÓDULO 0: VARIÁVEIS GLOBAIS & CONFIGURAÇÃO DO HUD
   ========================================================================== */

:root {
    /* Cores do HUD */
    --hud-bg: var(--bg-400);
    --hud-border-bg: var(--fg-tinted);
    --hud-content-bg: var(--fg-tinted);
    --hud-text: var(--fg-tinted);
    --hud-overlay-icon: hsl(0 0% 100% / .075);

    /* Fontes para HUDs */
    --hud-font-fantasy: 'Cinzel', serif;
    --hud-font-gotica: 'Pirata One', cursive;
    --hud-font-decorativa: 'Bilbo Swash Caps', cursive;
    --hud-font-digital: 'Chakra Petch', sans-serif;
    --hud-font-retro: 'Press Start 2P', monospace;
    --hud-font-futurista: 'Audiowide', sans-serif;
    --hud-font-limpa: 'Rubik', sans-serif;

    /* Fonte base usada neste HUD específico */
    --hud-font: var(--hud-font-fantasy);


    /* ── TOKENS LITRPG (respondem ao hue-rotate do Fictioneer) ─────────────
     * Cores temáticas viram HSL com calc(BASE_HUE + var(--illusia-hue-offset)).
     * Cores neutras (preto/branco/cinza) ficam estáticas (não têm hue real).
     * Em hue=0 (padrão), a aparência é idêntica ao hardcoded original.
     * ──────────────────────────────────────────────────────────────────── */

    /* Sombras / texto base */
    --lit-shadow:        hsl(0 0% 0%);
    --lit-shadow-50:     hsl(0 0% 0% / .5);
    --lit-text-light:    hsl(0 0% 100%);
    --lit-text-cyan:     hsl(180 100% 73%);  /* azul/over text */
    --lit-text-yellow:   hsl(60 100% 65%);   /* ouro text */
    --lit-text-red-soft: hsl(0 100% 84%);    /* vermelho text */
    --lit-text-bg-glass: hsl(calc(58deg + var(--illusia-hue-offset)) calc(30% * var(--illusia-saturation)) 23% / .42);

    /* Família escuro (cinzas — estáticos) */
    --lit-escuro-1: hsl(0 0% 24%);
    --lit-escuro-2: hsl(0 0% 13%);

    /* Família âmbar/dourado (draco, ouro) */
    --lit-draco-1: hsl(calc(28deg  + var(--illusia-hue-offset)) calc(30%  * var(--illusia-saturation)) 33%);
    --lit-draco-2: hsl(calc(34deg  + var(--illusia-hue-offset)) calc(68%  * var(--illusia-saturation)) 42%);
    --lit-draco-3: hsl(calc(40deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 49%);
    --lit-ouro-border: hsl(calc(53deg + var(--illusia-hue-offset)) calc(63% * var(--illusia-saturation)) 49%);

    /* Família vermelho/sen */
    --lit-sen-1:            hsl(calc(0deg + var(--illusia-hue-offset)) calc(63% * var(--illusia-saturation)) 22%);
    --lit-sen-2:            hsl(calc(0deg + var(--illusia-hue-offset)) calc(67% * var(--illusia-saturation)) 37%);
    --lit-sen-3:            hsl(calc(0deg + var(--illusia-hue-offset)) calc(64% * var(--illusia-saturation)) 39%);
    --lit-vermelho-1:       hsl(calc(0deg + var(--illusia-hue-offset)) calc(96% * var(--illusia-saturation)) 18%);
    --lit-vermelho-2:       hsl(calc(0deg + var(--illusia-hue-offset)) calc(61% * var(--illusia-saturation)) 29%);
    --lit-vermelho-3:       hsl(calc(0deg + var(--illusia-hue-offset)) calc(63% * var(--illusia-saturation)) 40%);
    --lit-vermelho-border:  hsl(calc(8deg + var(--illusia-hue-offset)) calc(85% * var(--illusia-saturation)) 41%);
    --lit-vermelho3-border: hsl(calc(0deg + var(--illusia-hue-offset)) calc(75% * var(--illusia-saturation)) 40%);
    --lit-over2-1:          hsl(calc(0deg + var(--illusia-hue-offset)) calc(87% * var(--illusia-saturation)) 30% / .6);
    --lit-over2-2:          hsl(calc(0deg + var(--illusia-hue-offset)) calc(65% * var(--illusia-saturation)) 28% / .4);
    --lit-vermelho3-1:      hsl(calc(0deg  + var(--illusia-hue-offset)) calc(87% * var(--illusia-saturation)) 30%);
    --lit-vermelho3-2:      hsl(calc(0deg  + var(--illusia-hue-offset)) calc(65% * var(--illusia-saturation)) 28%);
    --lit-red-1:            hsl(calc(352deg + var(--illusia-hue-offset)) calc(60% * var(--illusia-saturation)) 51%);
    --lit-red-2:            hsl(calc(14deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);

    /* Família azul (azul, over, cell) */
    --lit-azul-1:      hsl(calc(202deg + var(--illusia-hue-offset)) calc(87% * var(--illusia-saturation)) 30%);
    --lit-azul-2:      hsl(calc(210deg + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 28%);
    --lit-azul-border: hsl(calc(192deg + var(--illusia-hue-offset)) calc(91% * var(--illusia-saturation)) 44%);
    --lit-over-1:      hsl(calc(202deg + var(--illusia-hue-offset)) calc(87% * var(--illusia-saturation)) 30% / .6);
    --lit-over-2:      hsl(calc(210deg + var(--illusia-hue-offset)) calc(65% * var(--illusia-saturation)) 28% / .4);
    --lit-over-3:      hsl(calc(210deg + var(--illusia-hue-offset)) calc(65% * var(--illusia-saturation)) 28% / .2);
    --lit-cell-bg:     hsl(calc(229deg + var(--illusia-hue-offset)) calc(86% * var(--illusia-saturation)) 11%);

    /* Família roxo/violeta/indigo */
    --lit-violeta-1: hsl(calc(276deg + var(--illusia-hue-offset)) calc(38%  * var(--illusia-saturation)) 49%);
    --lit-violeta-2: hsl(calc(276deg + var(--illusia-hue-offset)) calc(75%  * var(--illusia-saturation)) 84%);
    --lit-violet-1:  hsl(calc(276deg + var(--illusia-hue-offset)) calc(86%  * var(--illusia-saturation)) 36%);
    --lit-violet-2:  hsl(calc(300deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-indigo-1:  hsl(calc(248deg + var(--illusia-hue-offset)) calc(53%  * var(--illusia-saturation)) 58%);
    --lit-indigo-2:  hsl(calc(275deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 25%);

    /* Família laranja */
    --lit-laranja-1: hsl(calc(20deg + var(--illusia-hue-offset)) calc(54%  * var(--illusia-saturation)) 57%);
    --lit-laranja-2: hsl(calc(14deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 57%);
    --lit-orange-1:  hsl(calc(30deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 63%);
    --lit-orange-2:  hsl(calc(21deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 56%);

    /* Família amarelo */
    --lit-yellow-1: hsl(calc(54deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 88%);
    --lit-yellow-2: hsl(calc(43deg + var(--illusia-hue-offset)) calc(96%  * var(--illusia-saturation)) 58%);

    /* Família verde */
    --lit-verde-1: hsl(calc(122deg + var(--illusia-hue-offset)) calc(63% * var(--illusia-saturation)) 26%);
    --lit-verde-2: hsl(calc(124deg + var(--illusia-hue-offset)) calc(47% * var(--illusia-saturation)) 55%);

    /* Família marrom */
    --lit-marrom-1: hsl(calc(35deg + var(--illusia-hue-offset)) calc(38% * var(--illusia-saturation)) 69%);
    --lit-marrom-2: hsl(calc(25deg + var(--illusia-hue-offset)) calc(75% * var(--illusia-saturation)) 31%);

    /* Família default (azul-claro) */
    --lit-default-1: hsl(calc(206deg + var(--illusia-hue-offset)) calc(93% * var(--illusia-saturation)) 86%);
    --lit-default-2: hsl(calc(208deg + var(--illusia-hue-offset)) calc(80% * var(--illusia-saturation)) 51%);

    /* Tela-fundo (gradients de borda animada) */
    --lit-fundo-1a: hsl(calc(45deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 32%);
    --lit-fundo-1b: hsl(calc(53deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 78%);
    --lit-fundo-2a: hsl(calc(123deg + var(--illusia-hue-offset)) calc(40%  * var(--illusia-saturation)) 50%);
    --lit-fundo-2b: hsl(calc(115deg + var(--illusia-hue-offset)) calc(78%  * var(--illusia-saturation)) 19%);
    --lit-fundo-3a: hsl(calc(4deg   + var(--illusia-hue-offset)) calc(86%  * var(--illusia-saturation)) 31%);
    --lit-fundo-3b: hsl(calc(5deg   + var(--illusia-hue-offset)) calc(96%  * var(--illusia-saturation)) 53%);
    --lit-fundo-4a: hsl(calc(330deg + var(--illusia-hue-offset)) calc(78%  * var(--illusia-saturation)) 28%);
    --lit-fundo-4b: hsl(calc(330deg + var(--illusia-hue-offset)) calc(96%  * var(--illusia-saturation)) 53%);
    --lit-fundo-6a: hsl(calc(259deg + var(--illusia-hue-offset)) calc(49%  * var(--illusia-saturation)) 32%);
    --lit-fundo-6b: hsl(calc(259deg + var(--illusia-hue-offset)) calc(91%  * var(--illusia-saturation)) 65%);
    --lit-fundo-7a: hsl(calc(54deg  + var(--illusia-hue-offset)) calc(38%  * var(--illusia-saturation)) 57%);
    --lit-fundo-7b: hsl(calc(54deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 77%);
    --lit-fundo-8a: hsl(calc(177deg + var(--illusia-hue-offset)) calc(39%  * var(--illusia-saturation)) 44%);
    --lit-fundo-8b: hsl(calc(177deg + var(--illusia-hue-offset)) calc(92%  * var(--illusia-saturation)) 82%);
    --lit-fundo-9a: hsl(calc(14deg  + var(--illusia-hue-offset)) calc(84%  * var(--illusia-saturation)) 40%);
    --lit-fundo-9b: hsl(calc(13deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 54%);
    --lit-fundo-10a: hsl(calc(298deg + var(--illusia-hue-offset)) calc(86%  * var(--illusia-saturation)) 31%);
    --lit-fundo-10b: hsl(calc(298deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 54%);
    --lit-fundo-11a: hsl(0 1% 80%);   /* cinza neutro */
    --lit-fundo-11b: hsl(180 4% 9%);  /* cinza neutro */
    --lit-fundo-12a: hsl(0 0% 100%);  /* neutro */
    --lit-fundo-12b: hsl(0 0% 0%);    /* neutro */
    --lit-fundo-13a: hsl(calc(335deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-fundo-13b: hsl(calc(48deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-fundo-13c: hsl(calc(96deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-fundo-13d: hsl(calc(192deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-fundo-13e: hsl(calc(216deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);

    /* Telas específicas */
    --lit-prata-1: hsl(0 0% 54%);  /* cinza */
    --lit-prata-2: hsl(0 0% 69%);  /* cinza */
    --lit-prata-3: hsl(0 0% 83%);  /* cinza */
    --lit-escura-glow:  hsl(calc(190deg + var(--illusia-hue-offset)) calc(32%  * var(--illusia-saturation)) 47%);
    --lit-escura2-glow: hsl(calc(273deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-escura3-glow: hsl(calc(120deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-escura4-glow: hsl(calc(358deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 52%);
    --lit-escura5-glow: hsl(calc(56deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-brosa-glow:   hsl(calc(290deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 76%);
    --lit-roxa-1: hsl(calc(269deg + var(--illusia-hue-offset)) calc(36%  * var(--illusia-saturation)) 35%);
    --lit-roxa-2: hsl(calc(276deg + var(--illusia-hue-offset)) calc(38%  * var(--illusia-saturation)) 49%);
    --lit-roxa-3: hsl(calc(269deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    --lit-neko-overlay:  hsl(60 31% 95% / .78);  /* quase-branco neutro */
    --lit-arkus-overlay: hsl(calc(358deg + var(--illusia-hue-offset)) calc(54% * var(--illusia-saturation)) 64% / .38);
    --lit-arkus-shadow:  hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50% / .63);

    /* Displays */
    --lit-display-bg:        hsl(calc(234deg + var(--illusia-hue-offset)) calc(20% * var(--illusia-saturation)) 9% / .86);
    --lit-display-light:     hsl(calc(189deg + var(--illusia-hue-offset)) calc(48% * var(--illusia-saturation)) 24%);
    --lit-display-glow:      hsl(calc(189deg + var(--illusia-hue-offset)) calc(63% * var(--illusia-saturation)) 66% / .42);
    --lit-display-red-bg:    hsl(calc(0deg + var(--illusia-hue-offset)) calc(28% * var(--illusia-saturation)) 7%);
    --lit-display-red-bord:  hsl(calc(0deg + var(--illusia-hue-offset)) calc(94% * var(--illusia-saturation)) 51% / .35);
    --lit-display-red-light: hsl(calc(0deg + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 47%);
    --lit-display-dark:      hsl(0 0% 0% / .91);

    /* Elementos físicos (carta, folha, quadro) */
    --lit-carta-bg:    hsl(0 0% 98%);  /* creme neutro */
    --lit-carta-glow:  hsl(calc(48deg + var(--illusia-hue-offset)) calc(60% * var(--illusia-saturation)) 67% / .7);
    --lit-folha-1:     hsl(calc(53deg + var(--illusia-hue-offset)) calc(96% * var(--illusia-saturation)) 76%);
    --lit-folha-2:     hsl(calc(86deg + var(--illusia-hue-offset)) calc(62% * var(--illusia-saturation)) 73%);
    --lit-folha-line:  hsl(calc(12deg + var(--illusia-hue-offset)) calc(98% * var(--illusia-saturation)) 71% / .6);
    --lit-folha-text:  hsl(0 0% 20%);
    --lit-quadro-border-light: hsl(calc(45deg + var(--illusia-hue-offset)) calc(50% * var(--illusia-saturation)) 47%);

    /* Balões gradient */
    --lit-balao-esq-1: hsl(calc(266deg + var(--illusia-hue-offset)) calc(34% * var(--illusia-saturation)) 53%);
    --lit-balao-esq-2: hsl(calc(199deg + var(--illusia-hue-offset)) calc(74% * var(--illusia-saturation)) 44%);
    --lit-balao-dir-1: hsl(calc(28deg  + var(--illusia-hue-offset)) calc(89% * var(--illusia-saturation)) 62%);
    --lit-balao-dir-2: hsl(calc(48deg  + var(--illusia-hue-offset)) calc(88% * var(--illusia-saturation)) 62%);

    /* Tela-sangue */
    --lit-sangue-text: hsl(calc(43deg + var(--illusia-hue-offset)) calc(86% * var(--illusia-saturation)) 70%);
    --lit-sangue-bg:   hsl(calc(0deg  + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 3%);

    /* Prata modo claro (cinzas) */
    --lit-prata-light-1: hsl(0 0% 90%);
    --lit-prata-light-3: hsl(0 0% 85%);

    /* Neko overlay claro (quase-branco neutro) */
    --lit-neko-overlay-soft: hsl(60 31% 96% / .5);
}

/* OVERRIDES GERAIS DE MODO CLARO (Que não se encaixam em módulos específicos) */
:root[data-mode=light] {
    --hud-overlay-icon: hsl(0 0% 42% / .15);
}


/* ==========================================================================
   MÓDULO 1: SISTEMAS BASE (RPG - Draco, Sen, Chifre, Gradients)
   ========================================================================== */

/* --- Classes Base --- */
.sistema-base {
    min-width: min(20rem, 100%);
    max-width: min(max-content, 100%);
    border-radius: 1rem;
    filter: drop-shadow(2px 4px 2px var(--lit-shadow));
    font-family: 'Chakra Petch';
    background-size: cover !important;
}

.sistema-base::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 20px;
    background: url(../../img/divisores/141.webp) center no-repeat;
    left: 0;
    bottom: 0;
    margin-bottom: 5px;
    background-size: contain;
    opacity: .5;
}

/* --- Texto --- */
.texto-sistema {padding: 0rem 1rem 2rem 1rem; font-weight: 500; font-size: 1.1rem; color: var(--lit-text-light); text-shadow: var(--lit-shadow) .1em .1em .2em;}
.azul-text, .over-text {padding: 0 1rem; font-weight: 500; font-size: 1.1rem; color: var(--lit-text-cyan); text-shadow: var(--lit-shadow) .1em .1em .2em, var(--lit-shadow) .1em .1em .2em; border-radius:1rem;}
.avermelhado-text, .esverdeado-text {padding: 1rem; font-weight: 500; font-size: 1.1rem; color: var(--lit-text-light); text-shadow: var(--lit-shadow) .1em .1em .2em, var(--lit-shadow) .1em .1em .2em; background: var(--lit-text-bg-glass);}
.ouro-text { padding: 1rem; font-weight: 500; font-size: 1.1rem; color: var(--lit-text-yellow); text-shadow: var(--lit-shadow) .1em .1em .2em, var(--lit-shadow) .1em .1em .2em; background: var(--lit-text-bg-glass); border-radius:1rem;}
.vermelho-text { padding: 0 1rem; font-weight: 500; font-size: 1.1rem; color: var(--lit-text-red-soft); text-shadow: var(--lit-shadow) .1em .1em .2em, var(--lit-shadow) .1em .1em .2em;}

/* --- Draco & Sen Base --- */
.draco-sen-base {
    min-width: min(20rem, 100%);
    max-width: min(max-content, 100%);
    border-radius: 1rem;
    filter: drop-shadow(2px 4px 2px var(--lit-shadow));
    font-family: 'Chakra Petch';
}

.draco-sen-base::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 30px;
    background: url(../../img/divisores/ouro2.webp) center no-repeat;
    left: 0;
    bottom: 0;
    margin-bottom: 5px;
    background-size: contain;
    filter: drop-shadow(1px 3px 1px var(--lit-shadow));
}

.sistema-draco { background: linear-gradient(156deg, var(--lit-draco-1), var(--lit-draco-2), var(--lit-draco-3), var(--lit-draco-2)); }
.sistema-sen { background: linear-gradient(156deg, var(--lit-sen-1), var(--lit-sen-2), var(--lit-sen-3), var(--lit-sen-1)); }

#hr-draco, #hr-sen {
    background: transparent url(../../img/divisores/ouro1.webp) center no-repeat;
    filter: drop-shadow(1px 3px 1px var(--lit-shadow));
    position: relative;
    background-size: contain;
    height: 3rem;
    top: 0.5rem;
}

/* --- Chifre Base & Variações --- */
.chifre-base {
    min-width: min(20rem, 100%);
    max-width: min(max-content, 100%);
    filter: var(--drop-shadow-xl);
    font-family: 'Chakra Petch';
    border-top: ridge 7px;
    border-bottom: groove 6px;
    margin-top: 30px;
    border-radius: 1rem;
}

.sistema-over {background: radial-gradient(circle, var(--lit-over-1) 0%, var(--lit-over-2) 51%, var(--lit-over-3) 92%); border-color: var(--lit-azul-border);}
.sistema-over2 {background: radial-gradient(circle, var(--lit-over2-1) 0%, var(--lit-over2-2) 51%, var(--lit-over-3) 92%); border-color: var(--lit-vermelho3-border);}
.sistema-ouro {background: transparent url(../../img/telas-sistema/tela-ouro.webp) center no-repeat; background-size: cover; border-color: var(--lit-ouro-border);}
.sistema-ouro2 {background: transparent url(../../img/telas-sistema/tela-ouro.webp) center no-repeat; background-size: cover; border-color: var(--lit-ouro-border);}
.sistema-vermelho {background: linear-gradient(var(--lit-vermelho-1) 0%, var(--lit-vermelho-2) 51%, var(--lit-vermelho-3) 92%); border-color: var(--lit-vermelho-border);}
.sistema-azul {background-image: radial-gradient(circle, var(--lit-azul-1) 0, var(--lit-azul-2) 51%, var(--lit-azul-2) 92%); border-color: var(--lit-azul-border);}
.sistema-vermelho3 {background-image: radial-gradient(circle, var(--lit-vermelho3-1) 0, var(--lit-vermelho3-2) 51%, var(--lit-vermelho3-2) 92%); border-color: var(--lit-vermelho3-border);}

.sistema-avermelhado {
    background: transparent url(../../img/telas-sistema/tela-esverdeado.webp) center no-repeat;
    background-size: cover;
    background-color: hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
    background-blend-mode: darken;
    border-color: hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 50%);
}

.sistema-esverdeado {
    background: transparent url(../../img/telas-sistema/tela-esverdeado.webp) center no-repeat;
    background-size: cover;
    background-color: hsl(calc(120deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 25%);
    background-blend-mode: darken;
    border-color: hsl(calc(120deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 25%);
}

/* --- Skins e Gradients Adicionais --- */
.sistema-avalon {background: url(../../img/telas-sistema/tela-avalon.webp);}
.sistema-sangrento {background: url(../../img/telas-sistema/tela-sangrento.webp) #00000057; background-blend-mode: color-burn;}
.sistema-azulado {background: url(../../img/telas-sistema/tela-azulado.webp) #00000057; background-blend-mode: color-burn;}
.sistema-roxo { background: url(../../img/telas-sistema/tela-roxo.webp); background-color: #0000008a; background-blend-mode: color-burn;}
.sistema-violeta { background: linear-gradient(135deg, var(--lit-violeta-1), var(--lit-violeta-2)); }
.sistema-marrom { background: linear-gradient(135deg, var(--lit-marrom-1), var(--lit-marrom-2)); }
.sistema-laranja { background: linear-gradient(135deg, var(--lit-laranja-1), var(--lit-laranja-2)); }
.sistema-violet { background: linear-gradient(135deg, var(--lit-violet-1), var(--lit-violet-2)); }
.sistema-indigo { background: linear-gradient(135deg, var(--lit-indigo-1), var(--lit-indigo-2)); }
.sistema-orange { background: linear-gradient(135deg, var(--lit-orange-1), var(--lit-orange-2)); }
.sistema-yellow { background: linear-gradient(135deg, var(--lit-yellow-1), var(--lit-yellow-2)); }
.sistema-escuro { background: linear-gradient(250deg, var(--lit-escuro-1), var(--lit-escuro-2)); }
.sistema-cell { background: var(--lit-cell-bg); }
.sistema-red { background: linear-gradient(135deg, var(--lit-red-1), var(--lit-red-2)); }
.sistema-verde { background: linear-gradient(135deg, var(--lit-verde-1), var(--lit-verde-2)); }
.sistema-cor { background: var(--wp--preset--gradient--luminous-dusk);}
.sistema-default { background: linear-gradient(135deg, var(--lit-default-1), var(--lit-default-2));}

/* --- Filtros de Imagem (Before) --- */
.sistema-yellow::before, .sistema-orange::before, .sistema-red::before, .sistema::before { filter: invert(1); }

/* --- Divisores de Sistemas (HR) --- */
#hr-azul, #hr-over, #hr-over2, #hr-vermelho, #hr-vermelho3, #hr-ouro, #hr-ouro2, #hr-avermelhado, #hr-esverdeado {
    height: 48px;
    filter: drop-shadow(1px 3px 1px var(--lit-shadow));
    position: absolute;
    border-color: transparent;
    width: 100%;
}

#hr-azul, #hr-vermelho3, #hr-over, #hr-over2, #hr-ouro, #hr-ouro2, #hr-avermelhado, #hr-esverdeado {
    background: transparent url(../../img/divisores/topo11.webp) center no-repeat;
    background-size: contain;
    margin: -40px 0;
}

#hr-vermelho {
    background: transparent url(../../img/divisores/topo12.webp) center no-repeat;
    background-size: contain;
    margin: -30px 0;
}

#hr-avalon, #hr-sangrento, #hr-violeta, #hr-azulado, #hr-marrom, #hr-laranja, #hr-violet, 
#hr-indigo, #hr-orange, #hr-yellow, #hr-escuro, #hr-cell, #hr-red, #hr-verde, #hr-default, 
#hr-cor, #hr-roxo {
    background: transparent url(../../img/divisores/135.webp) center no-repeat;
    opacity: .5;
    position: relative;
    background-size: contain;
    height: 2rem;
    top: 0.5rem;
    border-color: transparent;
}

/* Filtros específicos de HR */
#hr-avermelhado, #hr-vermelho3, #hr-over2 {filter: invert(1)}
#hr-esverdeado {filter: drop-shadow(1px 3px 1px var(--lit-shadow)) hue-rotate(273deg);}
#hr-ouro {filter: drop-shadow(1px 3px 1px var(--lit-shadow)) hue-rotate(222deg);}
#hr-ouro2 {filter: drop-shadow(1px 3px 1px var(--lit-shadow)) hue-rotate(222deg);}
#hr-orange { filter: invert(1) drop-shadow(1px -3px 1px var(--lit-orange-2)); }
#hr-yellow { filter: invert(1) drop-shadow(1px -3px 1px var(--lit-yellow-2)); }
#hr-red { filter: invert(1) drop-shadow(1px -3px 1px var(--lit-red-2)); }
#hr-default { filter: invert(1) drop-shadow(1px -3px 1px var(--lit-default-2)); }

/* --- Modo Claro (RPG) --- */
:root[data-mode=light] .sistema-over {background: radial-gradient(circle, var(--lit-over-1) 0%, var(--lit-over-2) 51%, var(--lit-over-3) 92%);}
:root[data-mode=light] .sistema-over2 {background: radial-gradient(circle, var(--lit-over2-1) 0%, var(--lit-over2-2) 51%, var(--lit-over-3) 92%);}


/* ==========================================================================
   MÓDULO 2: DISPLAYS (SCI-FI)
   ========================================================================== */

.display-1,.display-2,.display-3,.display-4,.display-5,.display-6,.display-ia,.display-7{min-width: -webkit-fill-available; min-width: fit-content; max-width: -webkit-fill-available; max-width: fit-content; position: relative; border-radius: 15px; z-index: 1;}
.display-red {min-width: -webkit-fill-available; min-width: fit-content; max-width: -webkit-fill-available; max-width: fit-content; position: relative; background: var(--lit-display-red-bg); border: 2px solid var(--lit-display-red-bord); border-radius: 10px; z-index: 1;}

.display-1::before,.display-2::before,.display-3::before,.display-4::before,.display-5::before,.display-6::before,.display-ia::before,.display-7::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.3); z-index: -1; border-radius: 15px;}
.display-red:before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.06); background: url(../../img/telas-sistema/display-4.webp) center; background-size: contain; background-position: center;}

.display-1::before {background: url(../../img/telas-sistema/display-4.webp) center; background-size: contain; background-position: center;}
.display-2::before {background: url(../../img/telas-sistema/display-5.webp) center; background-size: contain; background-position: center;}
.display-3::before {background: url(../../img/telas-sistema/display-6.webp) center; background-size: contain; background-position: center; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.2);}
.display-4::before {background: url(../../img/telas-sistema/display-7.webp) center; background-size: contain; background-position: center; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.1);}
.display-5::before {background: url(../../img/telas-sistema/display-8.webp) center; background-size: contain; background-position: center; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.2);}
.display-6::before { background: url(../../img/telas-sistema/display-9.webp) center; background-size: contain; background-position: center;}
.display-ia::before {background: url(../../img/telas-sistema/display-10.webp) center; background-size: contain; background-position: center; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.06) invert(1);}
.display-7::before {background: url(../../img/telas-sistema/display-11.webp) center; background-size: contain; background-position: center; filter: drop-shadow(1px 2px 2px var(--lit-display-glow)) opacity(0.3) invert(1);}

.display-text {color: var(--fg-500); text-shadow: 0 0 1px var(--lit-shadow), 2px 2px 2px var(--lit-shadow); font-family: Assistant; padding: 2ch; background: var(--lit-display-bg); border-radius: 15px;}
.display-text-red {color: var(--fg-500); text-shadow: 0 0 1px var(--lit-shadow), 2px 2px 2px var(--lit-shadow); font-family: Assistant; padding: 2ch; background: var(--lit-display-bg); border-radius: 15px;}

/* --- Modo Claro (Displays) --- */
:root[data-mode=light] .display-1 {background: var(--lit-display-light);}
:root[data-mode=light] .display-2 {background: var(--lit-display-light);}
:root[data-mode=light] .display-3 {background: var(--lit-display-light);}
:root[data-mode=light] .display-4 {background: var(--lit-display-light);}
:root[data-mode=light] .display-5 {background: var(--lit-display-light);}
:root[data-mode=light] .display-6 {background: var(--lit-display-light);}
:root[data-mode=light] .display-ia {background: var(--lit-display-light);}
:root[data-mode=light] .display-7 {background: var(--lit-display-light);}
:root[data-mode=light] .display-red {background: var(--lit-display-dark); border: 3px solid var(--lit-display-red-light);}
:root[data-mode=light] .display-text {color: var(--card-frame-border-color)}


/* ==========================================================================
   MÓDULO 3: ELEMENTOS FÍSICOS (Cartas, Folhas, Quadro)
   ========================================================================== */

/* --- Carta --- */
.carta H3 {
    margin: 55px 0 0;
    text-align: right;
    transform: rotate(-10deg);
    font-family: "SchoolBell";
    color: black;
    font-size: larger;
}

.carta {
    background: var(--lit-carta-bg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3), 0 0 300px 25px var(--lit-carta-glow) inset;
    width: fit-content;
    height: fit-content;
    min-width: min(20rem, 100%);
    max-width: 100%;
    min-height: 10rem;
    padding: 12px 24px;
    position: relative;
    font-style: italic;
    font-family: auto;
    font-size: medium;
    color: black;
}

.carta:before, .carta:after {
    content: "";
    background: var(--lit-carta-bg);
    box-shadow: 0 0 8px rgba(0,0,0,0.2), inset 0 0 300px var(--lit-carta-glow);
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: -2;
    transition: .5s;
}

.carta:before {
    left: -5px;
    top: 2px;  
    transform: rotate(-1.5deg);
}

.carta:after {
    right: -3px;
    top: 0px;
    transform: rotate(2.4deg);
}

.carta:hover:before {
    transform: rotate(0deg);
    border: solid rgba(111,99,61,0.4);
    border-width: 0px 0px 0px 1px;
    left: -6px;
    top: -6px; 
}

.carta:hover:after {
    transform: rotate(0deg);
    border: solid rgba(111,99,61,0.4);
    border-width: 0px 0px 0px 1px;
    right: 3px;
    top: -3px;
}

/* --- Folha --- */
.folha {
    position: relative;
    background-image: linear-gradient(to bottom, var(--lit-folha-1), var(--lit-folha-1) 90%, var(--lit-folha-2), var(--lit-folha-2));
    background-size: 100% 26px;
    min-width: 210px;
    min-height: 70px;
    width: fit-content;
    height: fit-content;
    font-size: var(--fs-em-s);
    margin: 8px;
    color: var(--lit-folha-text);
    font-family: 'Coming Soon', cursive;
    line-height: var(--fs-em-s);
}

.folha::after {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    height: 100%;
    width: 5px;
    border-left: 1px solid var(--lit-folha-line);
    border-right: 1px solid var(--lit-folha-line);
}

.folha p {
  padding-left: var(--fs-em-xl);
  color: var(--lit-folha-text);
}
.folha-text {padding: 0.1px;}

/* --- Quadro Negro --- */
.quadro {
    background-color: var(--green-600);
    border: 5px solid var(--primary-600);
    padding: 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.5);
    width: fit-content;
    height: fit-content;
    position: relative;
}

.quadro p {
    color: var(--bg-100);
    font-size: var(--wp--preset--font-size--medium) !important;
    font-family: 'Schoolbell', cursive;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2), -2px -2px 0px rgba(255, 255, 255, 0.1);
    white-space: pre-wrap;
}

.quadro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    pointer-events: none;
}

/* --- Modo Claro (Físicos) --- */
:root[data-mode=light] .quadro { border: 5px solid var(--lit-quadro-border-light);}


/* ==========================================================================
   MÓDULO 4: RETRO 8-BITS
   ========================================================================== */

._8b {
    margin: 1rem 2rem;
    min-width: min(20ch, 100%);
    max-width: min(max-content, 100%);
    padding: 1ch 2ch;
    position: relative;
    border-width: 8px;
    border-style: solid;
    border-image-slice: 8;
}

._8bAzul {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%230038FF'/%3E%3C/svg%3E") 8 stretch;}
._8bVerde {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%2300FF38'/%3E%3C/svg%3E") 8 stretch;}
._8bVermelho {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FF0038'/%3E%3C/svg%3E") 8 stretch;}
._8bAmarelo {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FFCC00'/%3E%3C/svg%3E") 8 stretch;}
._8bLaranja {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FF7F00'/%3E%3C/svg%3E") 8 stretch;}
._8bRoxo {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23800080'/%3E%3C/svg%3E") 8 stretch;}
._8bCiano {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%2300FFFF'/%3E%3C/svg%3E") 8 stretch;}
._8bMagenta {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FF00FF'/%3E%3C/svg%3E") 8 stretch;}
._8bCinza {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23808080'/%3E%3C/svg%3E") 8 stretch;}
._8bMarrom {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%238B4513'/%3E%3C/svg%3E") 8 stretch;}
._8bAzulClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23A0C4FF'/%3E%3C/svg%3E") 8 stretch;}
._8bVerdeClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23A0FF9D'/%3E%3C/svg%3E") 8 stretch;}
._8bVermelhoClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FFB0B0'/%3E%3C/svg%3E") 8 stretch;}
._8bAmareloClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FFF7A0'/%3E%3C/svg%3E") 8 stretch;}
._8bRoxoClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23D4A0FF'/%3E%3C/svg%3E") 8 stretch;}
._8bLaranjaClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23FFB0A0'/%3E%3C/svg%3E") 8 stretch;}
._8bRoxoClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23B39DCE'/%3E%3C/svg%3E") 8 stretch;}
._8bCianoClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%238AD8E6'/%3E%3C/svg%3E") 8 stretch;}
._8bMagentaClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23D45D9B'/%3E%3C/svg%3E") 8 stretch;}
._8bCinzaClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23A9A9A9'/%3E%3C/svg%3E") 8 stretch;}
._8bMarromClaro {border-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16 0H8v4H4v4H0v8h4v4h4v4h8v-4h4v-4h4V8h-4V4h-4V0zm0 4v4h4v8h-4v4H8v-4H4V8h4V4h8z' fill='%23C9B69D'/%3E%3C/svg%3E") 8 stretch;}

._8b-text {font: 9px 'Press Start 2P';  color: var(--bg-100);}

/* --- Modo Claro (8b) --- */
:root[data-mode=light] ._8b-text {color: var(--fg-50);}


/* ==========================================================================
   MÓDULO 5: COMUNICAÇÃO (Balões)
   ========================================================================== */

._balao-simples {
  position: relative;
  max-width: 75%;
  width: fit-content;
}

._b-dir { margin-left: auto; }
._b-dir ._b-text {
  background-color: ivory;
  color: dimgrey;
  margin-left: 1em;
}
._b-dir ._b-text::after {
  border-top-color: ivory;
  right: 1.5em;
}

._b-esq { margin-right: auto; }
._b-esq ._b-text {
  background-color: lightgrey;
  color: dimgrey;
  margin-right: 1em;
}
._b-esq ._b-text::after {
  border-top-color: lightgrey;
  left: 1.5em;
}

._b-text {
  border-radius: 1rem;
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, .3), 0 0.0625rem 0.125rem rgba(0, 0, 0, .2);
  padding: 0 1.2em;
  position: relative;
  display: inline-block;
}
._b-text::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 100%;
  border: .75rem solid transparent;
  border-bottom: none;
  filter: drop-shadow(0 0.0625rem 0.0625rem rgba(0, 0, 0, .1));
}

._balao-gradient {
  --r: 1em;
  --t: 1.5em;
  max-width: 75%;
  padding: 0.1em 1em;
  border-inline: var(--t) solid #0000;
  border-radius: calc(var(--r) + var(--t))/var(--r);
  mask: 
  radial-gradient(100% 100% at var(--_p) 0, #0000 99%, #000 102%) 
  var(--_p) 100%/var(--t) var(--t) no-repeat,
  linear-gradient(#000 0 0) padding-box;
}

._bg-esq {
  --_p: 0;
  border-bottom-left-radius: 0;
  margin: 0 10ch 0 0;
  place-self: start;
  background: linear-gradient(135deg, var(--lit-balao-esq-1), var(--lit-balao-esq-2)) border-box;
  color: lightcyan;
}

._bg-dir {
  --_p: 100%;
  margin: 0 0 0 10ch;
  border-bottom-right-radius: 0 0;
  place-self: end;
  background: linear-gradient(135deg, var(--lit-balao-dir-1), var(--lit-balao-dir-2)) border-box;
  color: maroon;
}


/* ==========================================================================
   MÓDULO 6: TELAS DE FUNDO & NARRATIVAS (Neko, Arkus, Sangue, etc)
   ========================================================================== */

/* --- Base --- */
.fundo-base {
    --border-width-fundo: 2px;
    position: relative;
    width: fit-content;
    height: fit-content;
    background: var(--bg-600);
    background-blend-mode: color-burn;
    background-position: center;
    border-radius: var(--border-width-fundo);
    padding: 3px;
    color: var(--fg-200);
    font-family: Assistant;
}

.fundo-base::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width-fundo));
    left: calc(-1 * var(--border-width-fundo));
    z-index: -1;
    width: calc(100% + var(--border-width-fundo) * 2);
    height: calc(100% + var(--border-width-fundo) * 2);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width-fundo));
    filter: drop-shadow(4px 5px 1px var(--bg-900));
}

.tela-base {
    --border-width: 2px;
    border-radius: 8px;
    position: relative;
    width: fit-content;
    height: fit-content;
    margin: initial;
    padding: 1px 8px;
    background-blend-mode: color-burn;
    background-position: center;
    background: var(--bg-800);
    color: var(--fg-200);
    font-family: Assistant, sans-serif;
}

.tela-base::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--border-width));
    left: calc(-1 * var(--border-width));
    z-index: -1;
    width: calc(100% + var(--border-width) * 2);
    height: calc(100% + var(--border-width) * 2);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width));
    filter: drop-shadow(1px 4px 1px black);
}

/* --- Variantes de Fundo Base --- */
.tela-fundo::after {background: linear-gradient(30deg, var(--lit-fundo-1a),var(--lit-fundo-1b),var(--lit-fundo-1a),var(--lit-fundo-1b));}
.tela-fundo2::after {background: linear-gradient(30deg, var(--lit-fundo-2a), var(--lit-fundo-2b), var(--lit-fundo-2a), var(--lit-fundo-2b));}
.tela-fundo3::after { background: linear-gradient(30deg, var(--lit-fundo-3a),var(--lit-fundo-3b),var(--lit-fundo-3a),var(--lit-fundo-3b));}
.tela-fundo4::after {background: linear-gradient(30deg, var(--lit-fundo-4a), var(--lit-fundo-4b), var(--lit-fundo-4a), var(--lit-fundo-4b));}
.tela-fundo5::after {background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple);}
.tela-fundo6::after {background: linear-gradient(30deg, var(--lit-fundo-6a), var(--lit-fundo-6b), var(--lit-fundo-6a), var(--lit-fundo-6b));}
.tela-fundo7::after {background: linear-gradient(30deg, var(--lit-fundo-7a), var(--lit-fundo-7b), var(--lit-fundo-7a), var(--lit-fundo-7b));}
.tela-fundo8::after {background: linear-gradient(30deg, var(--lit-fundo-8a), var(--lit-fundo-8b), var(--lit-fundo-8a), var(--lit-fundo-8b));}
.tela-fundo9::after {background: linear-gradient(30deg, var(--lit-fundo-9a), var(--lit-fundo-9b), var(--lit-fundo-9a), var(--lit-fundo-9b));}
.tela-fundo10::after {background: linear-gradient(30deg, var(--lit-fundo-10a), var(--lit-fundo-10b), var(--lit-fundo-10a), var(--lit-fundo-10b));}
.tela-fundo11::after {background: linear-gradient(60deg, var(--lit-fundo-11a), var(--lit-fundo-11b), var(--lit-fundo-11a), var(--lit-fundo-11b));}
.tela-fundo12::after {background: linear-gradient(174deg, var(--lit-fundo-12a), var(--lit-fundo-12b), var(--lit-fundo-12a), var(--lit-fundo-12b));}
.tela-fundo13::after {background: linear-gradient(45deg, var(--lit-fundo-13a), var(--lit-fundo-13b), var(--lit-fundo-13c), var(--lit-fundo-13d), var(--lit-fundo-13e)); background-size: 300% 300%; will-change: background-position; animation: BordaAnimada 8s infinite;}

/* --- Telas Específicas (Preta, Neutra, Roxa, Prata, Escura, Brosa) --- */
.tela-neutra {
    background-color: rgba(255, 255, 255, 0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background-blend-mode: normal;
}
.tela-neutra::after { background: rgba(255, 255, 255, 0.05); }

.tela-preta {background: var(--bg-950);}
.tela-roxa {background:url(../../img/telas-sistema/halo.webp); background-size: cover; font-family: 'Quantico'; padding: 0px 8px 0px 8px;}
.tela-prata {background: linear-gradient(135deg, var(--lit-prata-1), var(--lit-prata-2), var(--lit-prata-3));}
.tela-prata::after {background: transparent;}
.tela-roxa::after{background: linear-gradient(350deg, var(--lit-roxa-1) 0%, var(--lit-roxa-2) 50%, var(--lit-roxa-3) 100%);}
.tela-preta::after {background: var(--bg-300);}
.tela-escura::after {background: var(--lit-escura-glow);}
.tela-escura2::after {background: var(--lit-escura2-glow);}
.tela-escura3::after {background: var(--lit-escura3-glow);}
.tela-escura4::after {background: var(--lit-escura4-glow);}
.tela-escura5::after {background: var(--lit-escura5-glow);}
.tela-brosa::after {background: var(--lit-brosa-glow);}

/* --- Neko --- */
.tela-neko, .tela-neko2 {
    background-size: contain !important;
    background-blend-mode: luminosity;
    background-position: center, center !important;
    --border-width-fundo: 2px;
    border-radius: 8px;
    position: relative;
    width: fit-content;
    height: fit-content;
    padding: 8px;
    color: #e7e7e7;
    font: 18px atma;
    text-shadow: 0 0 2px black, 0 1px 6px black, 2px 2px 2px black;
}

.tela-neko { background: url(../../img/telas-sistema/tela-neko.webp) #000000; }
.tela-neko2 { background: url(../../img/telas-sistema/tela-neko-2.webp) #000000; }

.tela-neko::before, .tela-neko2::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 20px;
    background: url(../../img/divisores/76.webp);
    left: 0;
    bottom: 3px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: contrast(.6);
}

.tela-neko::after, .tela-neko2::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width-fundo));
    left: calc(-1 * var(--border-width-fundo));
    z-index: -1;
    width: calc(100% + var(--border-width-fundo) * 2);
    height: calc(100% + var(--border-width-fundo) * 2);
    background: linear-gradient(to right, var(--lit-neko-overlay-soft), var(--lit-neko-overlay));
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width-fundo));
    filter: drop-shadow(1px 4px 1px black);
}

#hr-neko, #hr-neko2 {
    display: block;
    position: relative;
    width: 100%;
    height: 2.8rem;
    overflow: hidden;
    filter: contrast(1);
    margin-bottom: -18px;
    margin-top: -8px;
    background: url(../../img/divisores/neko-hr.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#hr-neko::before, #hr-neko2::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../../img/divisores/neko-lua.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: contrast(1);
}

/* --- Arkus --- */
.tela-arkus, .tela-arkus2 {
    background: linear-gradient(180deg, black 59px, var(--bg-800));
    background-size: 360px;
    background-blend-mode: color-burn;
    background-position: initial;
    --border-width-fundo: 2px;
    border-radius: 8px;
    position: relative;
    width: fit-content;
    height: fit-content;
    padding: 8px;
    color: wheat;
    font-family: 'Emilys Candy';
    text-shadow: 1px 3px 5px var(--lit-arkus-shadow);
}

.tela-arkus::before, .tela-arkus2::before {
    content: "";
    width: 100%;
    position: absolute;
    height: 20px;
    background: url(../../img/divisores/arkus-baixo.webp);
    left: 0;
    bottom: 3px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: sepia(1) hue-rotate(310deg) saturate(2.5);
    opacity: 0.5;
}

.tela-arkus::after, .tela-arkus2::after {
    position: absolute;
    content: "";
    top: calc(-1 * var(--border-width-fundo));
    left: calc(-1 * var(--border-width-fundo));
    z-index: -1;
    width: calc(100% + var(--border-width-fundo) * 2);
    height: calc(100% + var(--border-width-fundo) * 2);
    background: var(--lit-arkus-overlay);
    background-size: 300% 300%;
    background-position: 0 50%;
    border-radius: calc(2 * var(--border-width-fundo));
    filter: drop-shadow(1px 4px 1px black);
}

#hr-arkus, #hr-arkus2 {
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
    filter: sepia(1) hue-rotate(310deg) saturate(2.5);
    margin-bottom: -18px;
    margin-top: -8px;
    background: url(../../img/divisores/arkus-cima.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8; 
}

#hr-arkus::before {
    content: '';
    position: absolute;
    width: 6rem;
    height: 3rem;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../../img/telas-sistema/tela-arkus.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.8;
}

.arkus2-text::before {
    content: '';
    position: absolute;
    width: 6rem;
    height: 5rem;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url(../../img/telas-sistema/tela-arkus-2.gif);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    filter: sepia(1) hue-rotate(310deg) saturate(2.5);
    z-index: -1;
}

/* --- Sangue --- */
.tela-sangue {color: var(--lit-sangue-text); background: url(../../img/telas-sistema/tela-sangue.webp) var(--lit-sangue-bg); background-size: cover; text-shadow: 0 0 1px var(--lit-shadow), 2px 2px 2px var(--lit-shadow); background-blend-mode: color-dodge; font-family: 'Fredericka the Great';}
.tela-sangue::after {background: linear-gradient(1deg,
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 32%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(88%  * var(--illusia-saturation)) 19%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 32%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(60%  * var(--illusia-saturation)) 9%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 32%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(60%  * var(--illusia-saturation)) 36%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(100% * var(--illusia-saturation)) 32%),
    hsl(calc(0deg + var(--illusia-hue-offset)) calc(90%  * var(--illusia-saturation)) 30%));}

/* --- Textos de Telas --- */
.roxa-text {padding: 2rem;}
.prata-text {color: #3d3d3d; font-weight: 500; font-family: 'Chakra Petch'; font-size: 1.1rem; text-shadow: #ffffff .1em .1em .2em, #000000 .1em .1em .2em;}
.neko-text, .neko2-text {margin: 2rem 0;}
.arkus-text, .arkus2-text {margin: 1rem 0 2rem 0; position: relative; z-index: 10;}
.fundo-text, .sangue-text {padding: 0 1ch;}

/* --- Modo Claro (Telas) --- */
:root[data-mode=light] .fundo-base {background: var(--bg-200);}
:root[data-mode=light] .fundo-base::after { filter: drop-shadow(5px 5px 1px var(--bg-500));}
:root[data-mode=light] .tela-sangue {background: url(../../img/telas-sistema/tela-sangue.webp) hsl(calc(0deg + var(--illusia-hue-offset)) calc(60% * var(--illusia-saturation)) 6%);}
:root[data-mode=light] .tela-neko::after, :root[data-mode=light] .tela-neko2::after, :root[data-mode=light] .tela-arkus::after, :root[data-mode=light] .tela-arkus2::after {filter: drop-shadow(5px 5px 1px var(--bg-400));}
:root[data-mode=light] .tela-arkus, :root[data-mode=light] .tela-arkus2 {background: black;}
:root[data-mode=light] .preta-text { color: var(--bg-200);}
:root[data-mode=light] .neutra-text { color: var(--fg-600);}
:root[data-mode=light] .tela-preta::after {background: var(--bg-800);}
:root[data-mode=light] .tela-base.tela-preta {--border-width: 2px;  background: var(--bg-950);}
:root[data-mode=light] .tela-base.tela-neutra {--border-width: 2px; background-color: rgba(0, 0, 0, 0.08);}
:root[data-mode=light] .tela-neutra::after {background: rgba(0, 0, 0, 0.08);}
:root[data-mode=light] .tela-base {--border-width: 2px;  background: var(--bg-200);}
:root[data-mode=light] .tela-base::after { filter: drop-shadow(4px 4px 1px var(--bg-400));}
:root[data-mode=light] .tela-roxa {background: url(../../img/telas-sistema/halo.webp); background-size: cover;}
:root[data-mode=light] .roxa-text {color: var(--bg-200);}
:root[data-mode=light] .tela-prata {background: linear-gradient(135deg, var(--lit-prata-light-1), var(--lit-prata-2), var(--lit-prata-light-3));}


/* ==========================================================================
   MÓDULO 7: HUD
   ========================================================================== */

.hud-caixa {
    position: relative;
    width: fit-content;
    min-height: fit-content;
    margin: auto;
    mask: radial-gradient(19px at 19px 19px, #0000 98%, #000) -19px -19px;
    background: var(--hud-bg);
}

.hud-caixa::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hud-border-bg);
    margin: 1px;
    mask:
        radial-gradient(21px at 21px 21px, #0000 calc(98% - 3px), #000 calc(100% - 3px) 98%, #0000) -21px -21px,
        linear-gradient(90deg, #000 6px, #0000 0) -3px 50% / 100% calc(100% - 38px + 3px) repeat-x,
        linear-gradient(#000 6px, #0000 0) 50% -3px / calc(100% - 38px + 3px) 100% repeat-y;
   opacity: .3;
}

.hud-conteudo {
    position: relative;
    padding: 1.5rem 1.5rem 2.5rem;
    color: var(--hud-text);
    font-family: var(--hud-font);
    text-align: center;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="28" height="49" viewBox="0 0 28 49"%3E%3Cg fill-rule="evenodd"%3E%3Cg id="hexagons" fill="%239C92AC" fill-opacity="0.05" fill-rule="nonzero"%3E%3Cpath d="M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    background-size: 14px 24px;
    background-repeat: repeat;
}

.hud-conteudo::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--hud-content-bg);
    margin: 7px;
    mask:
        radial-gradient(19px at 19px 19px, #0000 calc(98% - 1px), #000 calc(100% - 1px) 98%, #0000) -19px -19px,
        linear-gradient(90deg, #000 2px, #0000 0) -1px 50% / 100% calc(100% - 38px + 1px) repeat-x,
        linear-gradient(#000 2px, #0000 0) 50% -1px / calc(100% - 38px + 1px) 100% repeat-y;
}

.hud-conteudo::after {
    content: "!";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--hud-font);
    font-size: 7em;
    color: var(--hud-overlay-icon);
    line-height: 1;
    pointer-events: none;
    z-index: 0;
}

.hud-text .hud-label {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.7em;
    color: var(--hud-text);
}

.hud-text .hud-titulo {
    font-size: 1em;
    font-weight: bold;
    margin-top: 15px;
    line-height: 1.2;
    color: var(--hud-text);
}

.hud-text .hud-divisor {
    height: 1px;
    background: var(--hud-content-bg);
    margin: 0 auto 15px;
    width: 100%;
}


/* ==========================================================================
   MÓDULO 8: FILTROS & EFEITOS
   ========================================================================== */

/* ===== DESFOQUE ===== */
._blur-1 {filter: blur(1px);}
._blur-2 {filter: blur(2px);}
._blur-3 {filter: blur(3px);}
._blur-4 {filter: blur(4px);}
._blur-5 {filter: blur(5px);}
._blur-6 {filter: blur(6px);}
._blur-7 {filter: blur(7px);}
._blur-8 {filter: blur(8px);}
._blur-9 {filter: blur(9px);}
._blur-10 {filter: blur(10px);}

/* ===== BRILHO ===== */
._brit-1 {filter: brightness(0.5);}
._brit-2 {filter: brightness(0.75);}
._brit-3 {filter: brightness(1);}
._brit-4 {filter: brightness(1.5);}
._brit-5 {filter: brightness(2);}
._brit-6 {filter: brightness(3);}
._brit-7 {filter: brightness(4);}
._brit-8 {filter: brightness(5);}

/* ===== CONTRASTE ===== */
._cont-1 {filter: contrast(0.5);}
._cont-2 {filter: contrast(0.8);}
._cont-3 {filter: contrast(1);}
._cont-4 {filter: contrast(1.5);}
._cont-5 {filter: contrast(2);}
._cont-6 {filter: contrast(3);}
._cont-7 {filter: contrast(4);}
._cont-8 {filter: contrast(5);}

/* ===== SATURAÇÃO ===== */
._sat-1 {filter: saturate(0);}
._sat-2 {filter: saturate(0.5);}
._sat-3 {filter: saturate(1);}
._sat-4 {filter: saturate(1.5);}
._sat-5 {filter: saturate(2);}
._sat-6 {filter: saturate(3);}
._sat-7 {filter: saturate(4);}
._sat-8 {filter: saturate(5);}

/* ===== HUE ROTATE ===== */
._hue-1 {filter: hue-rotate(30deg);}
._hue-2 {filter: hue-rotate(60deg);}
._hue-3 {filter: hue-rotate(90deg);}
._hue-4 {filter: hue-rotate(120deg);}
._hue-5 {filter: hue-rotate(150deg);}
._hue-6 {filter: hue-rotate(180deg);}
._hue-7 {filter: hue-rotate(210deg);}
._hue-8 {filter: hue-rotate(240deg);}
._hue-9 {filter: hue-rotate(270deg);}
._hue-10 {filter: hue-rotate(300deg);}
._hue-11 {filter: hue-rotate(330deg);}
._hue-12 {filter: hue-rotate(360deg);}

/* ===== OPACIDADE ===== */
._op-10 {opacity: 0.1;}
._op-25 {opacity: 0.25;}
._op-50 {opacity: 0.5;}
._op-75 {opacity: 0.75;}
._op-90 {opacity: 0.9;}
._op-100 {opacity: 1;}

/* ===== ESPECIAIS ===== */
._cinzento {filter: grayscale(1);}
._invertido {filter: invert(1);}
._sepia-1 {filter: sepia(1);}
._sepia-2 {filter: sepia(0.5);}

/* ===== COMBINAÇÕES ÚTEIS ===== */
._darken {filter: brightness(0.5) saturate(0.8);}
._lighten {filter: brightness(1.2) saturate(1.2);}
._vintage {filter: sepia(0.5) contrast(1.2) brightness(0.9);}
._washed {filter: grayscale(0.2) brightness(1.1) saturate(0.8);}
._fantasma {filter: grayscale(1) opacity(0.5);}
._brilho-max {filter: brightness(1.3) saturate(2);}
._dourado {filter: sepia(1) saturate(3) brightness(1.1);}
._noir {filter: grayscale(1) contrast(1.5);}
._visao-noturna {filter: hue-rotate(120deg) brightness(1.2) contrast(1.5);}
._vazio {filter: brightness(0.1) contrast(2) saturate(0.2);}

/* ===== VISUAIS TEMÁTICOS ===== */
._alerta       {filter: brightness(1.1) contrast(1.3) hue-rotate(15deg);}
._frio         {filter: hue-rotate(210deg) saturate(1.5) brightness(0.9);}
._quente       {filter: hue-rotate(30deg) saturate(2) brightness(1.1);}
._neutro       {filter: grayscale(0.1) brightness(1);}
._distorcido   {filter: invert(0.5) contrast(2);}
._batida       {filter: hue-rotate(180deg) blur(1px) contrast(1.2);}
._sonho        {filter: brightness(1.3) blur(2px) saturate(1.2);}
._caos         {filter: hue-rotate(270deg) invert(0.3) contrast(2);}
._pesadelo     {filter: grayscale(0.8) brightness(0.5) blur(1px);}
._prisma       {filter: hue-rotate(360deg) saturate(4);}
._solarizado   {filter: contrast(2.5) brightness(1.2) hue-rotate(45deg);}
._oculto       {filter: brightness(0.3) saturate(0.3) grayscale(1);}
._corrompido   {filter: invert(0.9) hue-rotate(135deg) saturate(1.2);}
._radiante     {filter: brightness(1.6) saturate(2.5);}
._cinza-profundo {filter: grayscale(1) brightness(0.6);}
._vivido       {filter: contrast(1.5) saturate(3);}
._antigo       {filter: sepia(0.9) brightness(0.95) contrast(1.1);}
._liquido      {filter: hue-rotate(300deg) blur(1px) saturate(1.8);}
._plasma       {filter: hue-rotate(180deg) brightness(1.3) saturate(2);}
._etereo       {filter: opacity(0.6) blur(2px) saturate(1.5);}


/* ==========================================================================
   MÓDULO 9: UTILITÁRIOS, ANIMAÇÕES & RESETS
   ========================================================================== */

/* CENTRALIZA A TELA DE SISTEMA */
.centro {
    display: grid;
    align-items: center;
    text-align: center;
    align-content: space-around;
    justify-content: center;
}

/* CAIXA DO AUTOR */
.autor-box {
    text-align: center;
    display: block;
    width: 100%;
    border-top: 1px solid rgba(150, 150, 150, 0.5);
    border-bottom: 1px solid rgba(150, 150, 150, 0.5);
    padding: 15px 0;
    margin: 25px auto;
    font-weight: 500;
    font-style: italic;
    color: inherit;
}

.autor-box p {
    margin: 0;
    padding: 0;
}

/* Animação Genérica */
@keyframes BordaAnimada {
    0% { background-position: 0% 0%; }
    20% { background-position: 100% 0%; }
    40% { background-position: 100% 100%; }
    60% { background-position: 0% 100%; }
    80% { background-position: 50% 50%; }
    100% { background-position: 0% 0%; }
}

/* REMOVER O ESPAÇAMENTO EXTRA (RESETS) */
.fundo-base br, .tela-base br, .tela-sangue br,  .tela-neko br, .tela-neko2 br, .tela-arkus br, .tela-arkus2 br, .quadro br, .folha br, .folha-text br, ._8b br, .balao-simples br, ._hex br {
    display: none;
}

[data-author-id="60"] .fundo-text br, .fundo-text br {
  display: block !important;
}
[data-author-id="60"] .fundo-text > br:first-child {
  display: none !important;
}

.fundo-base p, .tela-base p, .tela-sangue p, .tela-neko p, .tela-neko2 p, .tela-arkus p, .tela-arkus2 p, .quadro p, .folha p, .folha-text p, ._8b p, .balao-simples p, ._hex p {
    margin-bottom: 0.6rem !important;
}

.preta-text kbd {--kbd-background: rgb(85 85 85 / 17%); border: .5px solid var(--badge-color-002); border-radius: 6px;}
:root[data-mode=light] .preta-text kbd {--kbd-background:rgb(0 0 0 / 9%);}


/* ==========================================================================
   MÓDULO 9.5: ANINHAMENTO (BBCode dentro de BBCode)
   Suporta combinações tipo:
     #tela-preta# #tela-fundo# texto #tela-fim# #tela-fim#
   O PHP já gera o HTML aninhado balanceado; aqui garantimos respiro visual
   e previnimos overflow quando um container LitRPG está dentro de outro.
   ========================================================================== */

/* Qualquer container LitRPG aninhado dentro de outro: respiro + sem overflow */
.fundo-base .fundo-base,
.fundo-base .tela-base,
.fundo-base .chifre-base,
.fundo-base .draco-sen-base,
.tela-base .fundo-base,
.tela-base .tela-base,
.tela-base .chifre-base,
.tela-base .draco-sen-base,
.chifre-base .fundo-base,
.chifre-base .tela-base,
.chifre-base .chifre-base,
.chifre-base .draco-sen-base,
.draco-sen-base .fundo-base,
.draco-sen-base .tela-base,
.draco-sen-base .chifre-base,
.draco-sen-base .draco-sen-base {
    max-width: 100%;
    margin-block: 0.75rem;
}

/* Primeiro/último filho aninhado: remove margem dupla nas bordas */
.fundo-text > :first-child,
.preta-text > :first-child,
.texto-sistema > :first-child { margin-top: 0; }

.fundo-text > :last-child,
.preta-text > :last-child,
.texto-sistema > :last-child { margin-bottom: 0; }


/* ==========================================================================
   MÓDULO 10: RESPONSIVIDADE (mobile)
   Ajustes finos pra telas estreitas. Os min-width já usam min(Xrem, 100%)
   pra não estourar o viewport; aqui reduzimos margens/paddings exagerados.
   ========================================================================== */

@media (max-width: 600px) {

    /* 8-bits: margem lateral de 2rem come espaço demais em mobile */
    ._8b {
        margin: 1rem 0.5rem;
        padding: 1ch 1.5ch;
    }

    /* Sistemas/chifre: reduzir o respiro lateral interno do texto */
    .texto-sistema {
        padding: 0 0.75rem 1.5rem;
    }

    /* Carta: padding e min-height menores em telas pequenas */
    .carta {
        padding: 12px 16px;
        min-height: 8rem;
    }

    /* Quadro negro: padding interno menor */
    .quadro {
        padding: 14px;
    }

    /* Balões: ampliar largura máxima (75% fica apertado em mobile) */
    ._balao-simples,
    ._balao-gradient {
        max-width: 90%;
    }

    /* Displays: padding do texto menor */
    .display-text,
    .display-text-red {
        padding: 1.25ch;
    }
}


/* ==========================================================================
   MÓDULO 11: ACESSIBILIDADE — Movimento reduzido
   tela-fundo13 tem borda animada (BordaAnimada). Respeitamos a preferência
   do sistema operacional por movimento reduzido (WCAG 2.3.3).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .tela-fundo13::after {
        animation: none;
        will-change: auto;
        /* Congela num frame estável (gradiente visível, sem rotação) */
        background-position: 0 50%;
    }
}