/*
 * For Glory — Placas de nome VIP (v40.16)
 * O fundo decorado atrás do nome em chats, comentários, perfil e listas.
 *
 * Estrutura (montada por FG.np em core.js):
 *   <span class="msg-name" data-np="cyber">
 *     <i class="np-bg"></i><i class="np-fx"></i><span class="np-t">Nome</span>
 *   </span>
 * .np-bg = arte parada (+ ::before/::after para os enfeites das pontas)
 * .np-fx = camada animada (+ ::before/::after). Tudo em em: a placa acompanha o
 * tamanho do nome. As animações só mexem em transform/opacity (a placa não é
 * redesenhada a cada quadro) e param com "reduzir movimento" e economia de dados.
 * O app desenha as mesmas placas em lib/widgets/name_plate.dart.
 */

[data-np] {
    --np-px: .72em;
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .16em var(--np-px);
    border-radius: 999px;
    overflow: hidden;
    line-height: 1.3;
    vertical-align: middle;
    text-decoration: none !important;
    word-break: normal;
}
[data-np] > .np-bg,
[data-np] > .np-fx {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
}
[data-np] > .np-fx { overflow: hidden; }
[data-np] > .np-bg::before, [data-np] > .np-bg::after,
[data-np] > .np-fx::before, [data-np] > .np-fx::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
}
[data-np] > .np-t {
    position: relative;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-np]:hover > .np-t { text-decoration: underline; }

/* ── Estáticas ─────────────────────────────────────────────────────────── */

/* Brasão do Reino: estandarte de veludo bordô com rabo de andorinha e filetes de ouro */
[data-np="medieval"] {
    --np-px: 1.15em;
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, calc(100% - .42em) 50%, 100% 100%, 0 100%, .42em 50%);
}
[data-np="medieval"] > .np-bg {
    background:
        linear-gradient(#d9a93e, #d9a93e) 0 2px / 100% 1px no-repeat,
        linear-gradient(#d9a93e, #d9a93e) 0 calc(100% - 2px) / 100% 1px no-repeat,
        repeating-linear-gradient(45deg, rgba(255, 215, 140, .06) 0 1px, transparent 1px 5px),
        linear-gradient(180deg, #74162a, #4a0a1c 55%, #300612);
    box-shadow: inset 0 1px #8a5a12, inset 0 -1px #8a5a12;
}
[data-np="medieval"] > .np-bg::before,
[data-np="medieval"] > .np-bg::after {
    top: 50%;
    width: .34em;
    height: .34em;
    margin-top: -.17em;
    background: linear-gradient(135deg, #fff1b8, #e0a83a 55%, #8a5a12);
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(40, 10, 0, .55);
}
[data-np="medieval"] > .np-bg::before { left: .62em; }
[data-np="medieval"] > .np-bg::after { right: .62em; }

/* Runas Nórdicas: madeira escura com runas gravadas e cintas de ferro rebitadas */
[data-np="runas"] { --np-px: .95em; border-radius: .22em; }
[data-np="runas"] > .np-bg {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.42' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v10M3 3l4 3M3 6.5l4 3M12 3v10M12 3l3.2 2.4L12 8l3.6 5M22 3v10M22 7.5L19 3.4M22 7.5l3-4.1'/%3E%3C/g%3E%3C/svg%3E") 0 50% / auto 100% repeat-x,
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(180deg, rgba(255, 220, 170, .06) 0 1px, transparent 1px 7px),
        linear-gradient(180deg, #6e4628, #4f3019 60%, #3a2211);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px rgba(255, 220, 170, .2);
}
[data-np="runas"] > .np-bg::before,
[data-np="runas"] > .np-bg::after {
    top: 0;
    bottom: 0;
    width: .32em;
    background:
        radial-gradient(circle at 50% 24%, #eef1f4 0 .045em, #8d949b .065em, transparent .08em),
        radial-gradient(circle at 50% 76%, #eef1f4 0 .045em, #8d949b .065em, transparent .08em),
        linear-gradient(90deg, #4a4f55, #a2a9b0 45%, #5d636a 70%, #393d42);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .45);
}
[data-np="runas"] > .np-bg::before { left: .2em; }
[data-np="runas"] > .np-bg::after { right: .2em; }

/* 16-bit: janela de RPG clássico — azul em faixas, cantos em degrau e cursor ▶ */
[data-np="pixel"] {
    --np-px: .95em;
    border-radius: 0;
    clip-path: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
        100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
        4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
}
[data-np="pixel"] > .np-bg {
    background: linear-gradient(180deg, #3446d8 0 30%, #2938b8 30% 62%, #1e2a94 62%);
    box-shadow: inset 0 0 0 1px #0b1040, inset 0 0 0 3px #eef1ff, inset 0 0 0 4px #10175c;
}
[data-np="pixel"] > .np-bg::before {
    left: .38em;
    top: 50%;
    width: .27em;
    height: .45em;
    margin-top: -.225em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23fff' d='M0 0h1v5H0zM1 1h1v3H1zM2 2h1v1H2z'/%3E%3C/svg%3E") center / 100% 100%;
}
[data-np="pixel"] > .np-bg::after {
    right: .36em;
    top: 50%;
    width: .38em;
    height: .38em;
    margin-top: -.19em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffd23f' d='M2 0h1v5H2zM0 2h5v1H0z'/%3E%3Cpath fill='%23fff6c8' d='M2 2h1v1H2z'/%3E%3C/svg%3E") center / 100% 100%;
}

/* Sol Nascente: laca preta, sol vermelho e um traço de pincel */
[data-np="samurai"] { --np-px: .8em; padding-right: 1.5em; border-radius: .18em; }
[data-np="samurai"] > .np-bg {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .09), transparent 45%),
        linear-gradient(transparent 56%, rgba(18, 13, 15, .92) 56% 61%, transparent 61% 70%, rgba(18, 13, 15, .92) 70% 74%, transparent 74%) right .05em center / 1.4em 100% no-repeat,
        radial-gradient(circle at calc(100% - .74em) 50%, #f0484e 0 .3em, #c3141c .56em, rgba(195, 20, 28, 0) .6em),
        linear-gradient(90deg, #0e0b0c, #1d1517 60%, #120d0f);
    box-shadow: inset 0 0 0 1px rgba(212, 165, 55, .6);
}
[data-np="samurai"] > .np-bg::before {
    left: .3em;
    top: 18%;
    bottom: 18%;
    width: .16em;
    background: linear-gradient(180deg, #e2242c, #a50d14);
    border-radius: 1px;
    transform: skewX(-16deg);
}

/* Bosque Élfico: verde profundo, folhas e ramos dourados nas pontas */
[data-np="bosque"] { --np-px: 1.05em; }
[data-np="bosque"] > .np-bg {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cg fill='%239be38f' fill-opacity='.17'%3E%3Cpath d='M4 10c2-4 6-5 8-5-1 3-4 6-8 5z'/%3E%3Cpath d='M16 3c2 2 3 5 2 8-3-1-4-5-2-8z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 1.6em 1.07em,
        radial-gradient(ellipse at 50% 125%, rgba(160, 230, 140, .24), transparent 62%),
        linear-gradient(90deg, #0c3122, #13492f 50%, #0c3122);
    box-shadow: inset 0 0 0 1px rgba(214, 196, 110, .75), inset 0 0 0 2px rgba(0, 0, 0, .3);
}
[data-np="bosque"] > .np-bg::before,
[data-np="bosque"] > .np-bg::after {
    top: 50%;
    width: .72em;
    height: 1em;
    margin-top: -.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 16'%3E%3Cpath d='M9.5 15C6 12 4.5 8 6.5 2' fill='none' stroke='%23d6c46e' stroke-width='1' stroke-linecap='round'/%3E%3Cpath fill='%2380d27a' d='M6 6.5C2.5 6.8 1 3.5 1 3.5 4.2 2.6 6 4.6 6 6.5z'/%3E%3Cpath fill='%235fb85a' d='M6.8 10.5c3.6-.1 4.8-3.3 4.8-3.3-3.2-.8-4.9 1.3-4.8 3.3z'/%3E%3C/svg%3E") center / 100% 100%;
}
[data-np="bosque"] > .np-bg::before { left: .22em; }
[data-np="bosque"] > .np-bg::after { right: .22em; transform: scaleX(-1); }

/* Synthwave: céu roxo, sol listrado no horizonte e grade neon */
[data-np="synthwave"] { --np-px: .85em; padding-right: 1.55em; border-radius: .26em; }
[data-np="synthwave"] > .np-bg {
    background:
        linear-gradient(transparent calc(70% - 1px), rgba(255, 110, 220, .9) calc(70% - 1px) 70%, transparent 70%),
        linear-gradient(180deg, #13062a 0%, #2c0b4f 45%, #5d1772 70%, #12051f 70%);
    box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .6);
}
[data-np="synthwave"] > .np-bg::after {
    right: .24em;
    top: calc(70% - .56em);
    width: 1.06em;
    height: 1.06em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffe066'/%3E%3Cstop offset='1' stop-color='%23ff3d8b'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='20' height='20' fill='%23fff'/%3E%3Crect y='10.6' width='20' height='1.1' fill='%23000'/%3E%3Crect y='13.2' width='20' height='1.4' fill='%23000'/%3E%3Crect y='16' width='20' height='1.8' fill='%23000'/%3E%3C/mask%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% 100%;
}
/* a grade cobre a metade de baixo do sol (horizonte) */
[data-np="synthwave"] > .np-fx::before {
    left: 0;
    right: 0;
    bottom: 0;
    height: 30%;
    opacity: .7;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cg stroke='%23ff4fd8' stroke-opacity='.75' stroke-width='1' vector-effect='non-scaling-stroke' fill='none'%3E%3Cpath vector-effect='non-scaling-stroke' d='M0 7H100M0 16H100M0 28H100M50 -12L-60 40M50 -12L-12 40M50 -12L20 40M50 -12L50 40M50 -12L80 40M50 -12L112 40M50 -12L160 40'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat,
        #12051f;
}

/* ── Animadas ──────────────────────────────────────────────────────────── */

/* Cyberpunk: cantos cortados, borda magenta→ciano, trilhas de circuito, varredura e falha */
[data-np="cyber"] {
    --np-px: .95em;
    padding-right: 1.25em;
    border-radius: 0;
    clip-path: polygon(.5em 0, 100% 0, 100% calc(100% - .5em), calc(100% - .5em) 100%, 0 100%, 0 .5em);
}
[data-np="cyber"] > .np-bg { background: linear-gradient(90deg, #ff2bd6, #19f0ff); }
[data-np="cyber"] > .np-bg::before {
    inset: 1px;
    clip-path: polygon(calc(.5em - .5px) 0, 100% 0, 100% calc(100% - .5em + .5px), calc(100% - .5em + .5px) 100%, 0 100%, 0 calc(.5em - .5px));
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cg fill='none' stroke='%2319f0ff' stroke-opacity='.3' stroke-width='.8'%3E%3Cpath d='M0 5h12l4 4h12M20 20v-6l4-4h16M6 20v-5h4'/%3E%3C/g%3E%3Cg fill='%2319f0ff' fill-opacity='.5'%3E%3Ccircle cx='28' cy='9' r='1'/%3E%3Ccircle cx='10' cy='15' r='1'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 2.6em 1.3em,
        linear-gradient(180deg, #111a3d, #070b1c);
}
[data-np="cyber"] > .np-bg::after {
    right: .3em;
    top: 30%;
    height: 40%;
    width: .5em;
    background: repeating-linear-gradient(110deg, #fcee0a 0 .07em, transparent .07em .15em);
}
[data-np="cyber"] > .np-fx::before {
    inset: 0;
    background: linear-gradient(90deg, transparent 40%, rgba(25, 240, 255, .32) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: npSweep 3.25s linear infinite;
}
[data-np="cyber"] > .np-fx::after {
    inset: 0;
    background: linear-gradient(180deg, transparent 20%, rgba(255, 43, 214, .6) 20% 33%, transparent 33% 62%, rgba(25, 240, 255, .55) 62% 72%, transparent 72%);
    mix-blend-mode: screen;
    opacity: 0;
    animation: npGlitch 4.333s steps(1) infinite;
}

/* Fliperama: letreiro com lâmpadas que piscam alternadas */
[data-np="fliperama"] { --np-px: .8em; padding-top: .22em; padding-bottom: .22em; border-radius: .4em; }
[data-np="fliperama"] > .np-bg {
    background:
        radial-gradient(circle, #6e4a1d 0 .045em, transparent .065em) .125em 0 / .25em .26em repeat-x,
        radial-gradient(circle, #6e4a1d 0 .045em, transparent .065em) .125em 100% / .25em .26em repeat-x,
        linear-gradient(180deg, #8c1236, #5e0a24);
}
[data-np="fliperama"] > .np-bg::before {
    inset: .26em .2em;
    border-radius: .22em;
    background: linear-gradient(180deg, #2d0f52, #190633);
    box-shadow: 0 0 0 1px #ffc94a, inset 0 0 .4em rgba(255, 201, 74, .18);
}
[data-np="fliperama"] > .np-fx::before,
[data-np="fliperama"] > .np-fx::after {
    inset: 0;
    background:
        radial-gradient(circle, #fff8d6 0 .04em, #ffcc33 .065em, rgba(255, 204, 51, 0) .12em) var(--o, 0) 0 / .5em .26em repeat-x,
        radial-gradient(circle, #fff8d6 0 .04em, #ffcc33 .065em, rgba(255, 204, 51, 0) .12em) var(--o, 0) 100% / .5em .26em repeat-x;
    animation: npBlink .9s infinite;
}
[data-np="fliperama"] > .np-fx::after { --o: .25em; animation-delay: -.45s; }

/* Inferno: brasa por baixo, línguas de fogo e fagulhas subindo */
[data-np="inferno"] > .np-bg {
    background:
        radial-gradient(ellipse 70% 95% at 50% 128%, rgba(255, 120, 30, .75), rgba(200, 40, 10, .32) 55%, transparent 76%),
        linear-gradient(180deg, #1c0604, #2e0a05 60%, #3f0d05);
    box-shadow: inset 0 0 0 1px rgba(255, 120, 40, .55), inset 0 -1px rgba(255, 200, 80, .65);
}
[data-np="inferno"] > .np-bg::after {
    left: 0;
    right: 0;
    bottom: 0;
    height: 50%;
    opacity: .55;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 10' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffd25a'/%3E%3Cstop offset='1' stop-color='%23ff3d12'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M0 10C2 6 3 7 4 3c1 4 3 3 4 6 1-4 3-3 4-7 1 4 3 5 4 2 1 3 3 2 4 6z'/%3E%3C/svg%3E") 0 100% / 1.6em 100% repeat-x;
}
[data-np="inferno"] > .np-fx {
    -webkit-mask-image: linear-gradient(to top, #000 25%, transparent 100%);
    mask-image: linear-gradient(to top, #000 25%, transparent 100%);
}
[data-np="inferno"] > .np-fx::before {
    left: 0;
    right: 0;
    top: 0;
    height: calc(100% + 2.4em);
    background:
        radial-gradient(circle at 20% 30%, #ffd27a 0 .05em, transparent .08em),
        radial-gradient(circle at 72% 62%, #ff9a3d 0 .045em, transparent .075em),
        radial-gradient(circle at 46% 88%, #ffe3a0 0 .035em, transparent .06em);
    background-size: 1.3em 1.1em;
    background-repeat: repeat;
    animation: npRise 3.25s linear infinite;
}
[data-np="inferno"] > .np-fx::after {
    inset: 0;
    background: radial-gradient(ellipse 60% 75% at 50% 120%, rgba(255, 170, 60, .5), transparent 70%);
    animation: npFlicker 1.3s linear infinite;
}

/* Sakura: ameixa escura, flor de cerejeira e pétalas caindo */
[data-np="sakura"] { --np-px: .8em; padding-right: 1.5em; }
[data-np="sakura"] > .np-bg {
    background:
        radial-gradient(ellipse at 0% 50%, rgba(255, 150, 200, .3), transparent 60%),
        linear-gradient(90deg, #3c1332, #2a0d25 60%, #3d1433);
    box-shadow: inset 0 0 0 1px rgba(255, 183, 213, .6);
}
[data-np="sakura"] > .np-bg::after {
    right: .26em;
    top: 50%;
    width: 1em;
    height: 1em;
    margin-top: -.5em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cg fill='%23ffb7d5'%3E%3Cellipse cy='-5' rx='3.4' ry='4.7'/%3E%3Cellipse cy='-5' rx='3.4' ry='4.7' transform='rotate(72)'/%3E%3Cellipse cy='-5' rx='3.4' ry='4.7' transform='rotate(144)'/%3E%3Cellipse cy='-5' rx='3.4' ry='4.7' transform='rotate(216)'/%3E%3Cellipse cy='-5' rx='3.4' ry='4.7' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='2.5' fill='%23ff5f9e'/%3E%3Ccircle r='1' fill='%23ffe08a'/%3E%3C/svg%3E") center / 100% 100%;
}
[data-np="sakura"] > .np-fx::before {
    left: 0;
    top: -2.4em;
    width: calc(100% + 1.6em);
    height: calc(100% + 2.4em);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23ffc1dc' d='M3 3c1.4-.8 2.8 0 2.8 1.4-1.4.7-2.8 0-2.8-1.4z'/%3E%3C/svg%3E") 0 0 / 1.6em 1.2em repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath fill='%23ff9cc8' d='M11 8c1.1-.9 2.6-.4 2.7.9-1.3.6-2.6.1-2.7-.9z'/%3E%3C/svg%3E") .5em .45em / 1.6em 2.4em repeat;
    opacity: .6;
    animation: npDrift 4.333s linear infinite;
}

/* Galáxia: nebulosa violeta e turquesa, planeta com anel e estrelas piscando */
[data-np="galaxia"] { --np-px: .8em; padding-right: 1.45em; }
[data-np="galaxia"] > .np-bg {
    background:
        radial-gradient(ellipse 60% 120% at 18% 40%, rgba(150, 90, 255, .55), transparent 70%),
        radial-gradient(ellipse 55% 110% at 80% 72%, rgba(40, 200, 230, .36), transparent 70%),
        linear-gradient(90deg, #070a22, #0b0f33 50%, #070a22);
    box-shadow: inset 0 0 0 1px rgba(170, 150, 255, .5);
}
[data-np="galaxia"] > .np-bg::before {
    right: .48em;
    top: 50%;
    width: .5em;
    height: .5em;
    margin-top: -.25em;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffe1b8, #e3825f 58%, #6b2d3a);
}
[data-np="galaxia"] > .np-bg::after {
    right: .3em;
    top: 50%;
    width: .86em;
    height: .26em;
    margin-top: -.13em;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 220, 180, .8);
    transform: rotate(-20deg);
}
[data-np="galaxia"] > .np-fx::before,
[data-np="galaxia"] > .np-fx::after {
    inset: 0;
    background-repeat: repeat;
    animation: npTwinkle 2.6s ease-in-out infinite alternate;
}
[data-np="galaxia"] > .np-fx::before {
    background-image:
        radial-gradient(circle at 15% 25%, #fff 0 .03em, transparent .05em),
        radial-gradient(circle at 60% 70%, #fff 0 .025em, transparent .045em),
        radial-gradient(circle at 85% 15%, #cfe6ff 0 .03em, transparent .05em);
    background-size: 1.1em .9em;
}
[data-np="galaxia"] > .np-fx::after {
    background-image:
        radial-gradient(circle at 35% 60%, #fff 0 .035em, transparent .06em),
        radial-gradient(circle at 75% 35%, #e8d6ff 0 .025em, transparent .045em);
    background-size: 1.5em 1.2em;
    animation-delay: -1.3s;
}

/* Glacial: gelo azul, cristais nos cantos e um reflexo que passa */
[data-np="glacial"] { --np-px: .85em; border-radius: .3em; }
[data-np="glacial"] > .np-bg {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 42%),
        linear-gradient(90deg, #0a2a44, #0f4066 50%, #0a2a44);
    box-shadow: inset 0 0 0 1px rgba(170, 230, 255, .8), inset 0 0 .5em rgba(120, 200, 255, .28);
}
[data-np="glacial"] > .np-bg::before,
[data-np="glacial"] > .np-bg::after {
    width: .8em;
    height: .8em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.8' stroke-width='.75' stroke-linecap='round'%3E%3Cpath d='M0 0l8 8M0 0l10 2M0 0l2 10M3 3l3-1M3 3l-1 3M5.5 5.5l3-1M5.5 5.5l-1 3'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100%;
}
[data-np="glacial"] > .np-bg::before { left: 0; top: 0; }
[data-np="glacial"] > .np-bg::after { right: 0; bottom: 0; transform: rotate(180deg); }
[data-np="glacial"] > .np-fx::before {
    inset: 0;
    background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .55) 50%, transparent 56%);
    transform: translateX(-100%);
    animation: npSweepPause 4.333s ease-in-out infinite;
}
[data-np="glacial"] > .np-fx::after {
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23fff' d='M0-5l1 4 4 1-4 1-1 4-1-4-4-1 4-1z'/%3E%3C/svg%3E") 78% 18% / .36em .36em no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23dff6ff' d='M0-5l1 4 4 1-4 1-1 4-1-4-4-1 4-1z'/%3E%3C/svg%3E") 26% 84% / .28em .28em no-repeat;
    animation: npTwinkle 2.167s ease-in-out infinite alternate;
}

/* Terminal: tela de fósforo verde, código caindo e cursor piscando */
[data-np="terminal"] { --np-px: .75em; padding-right: 1.3em; border-radius: .16em; }
[data-np="terminal"] > .np-bg {
    background:
        repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, rgba(57, 255, 120, .08), transparent),
        #020d05;
    box-shadow: inset 0 0 0 1px rgba(57, 255, 120, .6), inset 0 0 .6em rgba(57, 255, 120, .14);
}
[data-np="terminal"] > .np-bg::after {
    right: .36em;
    top: 24%;
    bottom: 24%;
    width: .42em;
    background: #39ff78;
    box-shadow: 0 0 .3em rgba(57, 255, 120, .7);
    animation: npBlink 1.083s infinite;
}
[data-np="terminal"] > .np-fx::before {
    left: 0;
    right: 0;
    top: -1.8em;
    height: calc(100% + 1.8em);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 18'%3E%3Cg fill='%2339ff78'%3E%3Crect x='1' y='1' width='1.4' height='1.6' opacity='.15'/%3E%3Crect x='1' y='3.4' width='1.4' height='1.6' opacity='.3'/%3E%3Crect x='1' y='5.8' width='1.4' height='1.6' opacity='.55'/%3E%3Crect x='1' y='8.2' width='1.4' height='1.6'/%3E%3Crect x='5.6' y='10' width='1.4' height='1.6' opacity='.15'/%3E%3Crect x='5.6' y='12.4' width='1.4' height='1.6' opacity='.3'/%3E%3Crect x='5.6' y='14.8' width='1.4' height='1.6' opacity='.55'/%3E%3Crect x='5.6' y='17.2' width='1.4' height='.8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / .9em 1.8em repeat;
    opacity: .5;
    animation: npFall 2.6s linear infinite;
}
[data-np="terminal"] > .np-fx::after {
    left: .45em;
    right: 0;
    top: -2.7em;
    height: calc(100% + 2.7em);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 27'%3E%3Cg fill='%2339ff78'%3E%3Crect x='3.4' y='3' width='1.4' height='1.6' opacity='.2'/%3E%3Crect x='3.4' y='5.4' width='1.4' height='1.6' opacity='.45'/%3E%3Crect x='3.4' y='7.8' width='1.4' height='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / .9em 2.7em repeat;
    opacity: .35;
    animation: npFall2 3.9s linear infinite;
}

/* Ouro Real: preto e ouro, filete duplo, coroa, joia e um brilho que atravessa */
[data-np="realeza"] { --np-px: 1.15em; border-radius: .42em; }
[data-np="realeza"] > .np-bg {
    background:
        linear-gradient(180deg, rgba(255, 230, 160, .13), transparent 45%),
        linear-gradient(90deg, #1b1305, #2d1f08 50%, #1b1305);
    box-shadow: inset 0 0 0 1px #f2cf6b, inset 0 0 0 2px #1b1305, inset 0 0 0 3px rgba(194, 141, 32, .9);
}
[data-np="realeza"] > .np-bg::before {
    left: .3em;
    top: 50%;
    width: .62em;
    height: .5em;
    margin-top: -.27em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1b8'/%3E%3Cstop offset='.55' stop-color='%23e9b949'/%3E%3Cstop offset='1' stop-color='%239a6a14'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' d='M1 10V3.5l3 3 3-5.5 3 5.5 3-3V10z'/%3E%3Cg fill='%23fff3c4'%3E%3Ccircle cx='1' cy='2.6' r='1'/%3E%3Ccircle cx='7' cy='1' r='1'/%3E%3Ccircle cx='13' cy='2.6' r='1'/%3E%3C/g%3E%3Ccircle cx='7' cy='7.4' r='1.2' fill='%23d6283a'/%3E%3C/svg%3E") center / 100% 100%;
}
[data-np="realeza"] > .np-bg::after {
    right: .42em;
    top: 50%;
    width: .32em;
    height: .32em;
    margin-top: -.16em;
    background: linear-gradient(135deg, #fff1b8, #e9b949 50%, #9a6a14);
    transform: rotate(45deg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
[data-np="realeza"] > .np-fx::before {
    inset: 0;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 236, 170, .5) 50%, transparent 58%);
    transform: translateX(-100%);
    animation: npSweepPause 5.2s ease-in-out infinite;
}
[data-np="realeza"] > .np-fx::after {
    inset: 0;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23fff6d6' d='M0-5l1 4 4 1-4 1-1 4-1-4-4-1 4-1z'/%3E%3C/svg%3E") 12% 20% / .34em .34em no-repeat,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -5 10 10'%3E%3Cpath fill='%23ffe08a' d='M0-5l1 4 4 1-4 1-1 4-1-4-4-1 4-1z'/%3E%3C/svg%3E") 90% 80% / .3em .3em no-repeat;
    animation: npTwinkle 1.733s ease-in-out infinite alternate;
}

/* ── Movimentos (ciclos que fecham em 26 s, como no app) ──────────────── */
@keyframes npSweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes npSweepPause { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
@keyframes npGlitch {
    0% { opacity: 0; transform: none; }
    90% { opacity: 1; transform: translateX(.16em); }
    93% { opacity: 1; transform: translateX(-.22em); }
    96% { opacity: 0; transform: none; }
}
@keyframes npBlink { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes npRise { to { transform: translateY(-2.2em); } }
@keyframes npFall { to { transform: translateY(1.8em); } }
@keyframes npFall2 { to { transform: translateY(2.7em); } }
@keyframes npDrift { to { transform: translate(-1.6em, 2.4em); } }
@keyframes npFlicker { 0%, 100% { opacity: .55; } 20% { opacity: .9; } 40% { opacity: .62; } 60% { opacity: 1; } 80% { opacity: .7; } }
@keyframes npTwinkle { from { opacity: .2; } to { opacity: 1; } }

/* parado: reduzir movimento e economia de dados */
@media (prefers-reduced-motion: reduce) {
    [data-np] > i::before, [data-np] > i::after { animation: none !important; }
}
.fg-data-saver [data-np] > i::before, .fg-data-saver [data-np] > i::after { animation: none !important; }