/* Película de fábrica (eletrônicos, informática e smartphones).
 *
 * Cores de MARCA como var(--jg-<hex>, #<hex>): rótulo, botões e detalhes da
 * película; aparelho grafite, película fosca, fogos e ouro em hex direto. Nunca
 * azul.
 *
 * Contrato:
 *  - Estado FINAL por classe estática ou @keyframes … forwards.
 *  - Movimento reduzido: cada coisa para num estado VISÍVEL.
 *  - A película (clip-path) e a dobra são JS, pelo relógio; aqui o que a tela
 *    mostra ao acender: fogos e prêmio, ou a configuração inicial.
 */

.pe__palco {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 40%, #F4F6F5, #DCE2DF 70%, #C9D0CC);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
    user-select: none;
    font-family: Arial, sans-serif;
}
.pe__fundo { position: absolute; left: 0; right: 0; bottom: 0; height: 14%; background: linear-gradient(180deg, #CBD2CE, #B7BFBA); }

.pe__celular {
    position: absolute;
    left: 50%; top: 50%;
    height: 92%;
    aspect-ratio: 9 / 18.5;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 2.6%;
    border-radius: 22px;
    background: linear-gradient(135deg, #3D4441, #15191A);
    box-shadow: 0 18px 28px -12px rgba(0, 0, 0, .6), inset 0 0 0 1.5px #5A625E;
    z-index: 2;
}
.pe__botao-lado { position: absolute; right: -2.5%; top: 22%; width: 2.5%; height: 12%; border-radius: 0 3px 3px 0; background: #2A302D; }
.pe__tela { position: relative; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; background: #050607; }
.pe__camera { position: absolute; left: 50%; top: 2.4%; width: 5%; aspect-ratio: 1; margin-left: -2.5%; border-radius: 50%; background: #1A1F1D; box-shadow: inset 0 0 0 1px #2E3532; z-index: 5; }

/* a película fosca com os desenhos das funções */
.pe__pelicula {
    position: absolute; inset: 0;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .22) 40%, rgba(255, 255, 255, .38)),
        #D8DEDB;
    z-index: 3;
}
.pe__desenhos { position: absolute; inset: 0; }
.pe__d-camera { position: absolute; left: 50%; top: 1.6%; width: 9%; aspect-ratio: 1; margin-left: -4.5%; border: 1.5px solid #8E9894; border-radius: 50%; }
.pe__d-lateral { position: absolute; right: 3%; top: 20%; width: 8%; height: 9%; border: 1.5px solid #8E9894; border-left: 0; border-radius: 0 3px 3px 0; }
.pe__d-lateral--2 { left: 3%; right: auto; transform: scaleX(-1); top: 26%; }
.pe__d-tela { position: absolute; left: 8%; right: 8%; top: 10%; bottom: 8%; border: 1.5px dashed #9AA3A0; border-radius: 10px; }
.pe__desenhos img { position: absolute; left: 50%; top: 40%; width: 22%; aspect-ratio: 1; margin-left: -11%; opacity: .35; filter: grayscale(1); }
.pe__desenhos b { position: absolute; left: 0; right: 0; top: 56%; text-align: center; font: 700 clamp(8px, 2.2vw, 11px)/1.2 Arial, sans-serif; color: #56615C; }
.pe__aba {
    position: absolute; left: 50%; top: -1px;
    width: 26%; height: 5%;
    margin-left: -13%;
    border-radius: 0 0 6px 6px;
    background: var(--jg-2aa152, #2AA152);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
/* a dobra enrolada na linha em que a película está descolando */
.pe__rolo {
    position: absolute; left: -2%; right: -2%; top: 0;
    height: 5%;
    margin-top: -2.5%;
    border-radius: 6px;
    background: linear-gradient(180deg, #F4F6F5, #C9D0CC 50%, #9AA3A0);
    box-shadow: 0 3px 6px rgba(0, 0, 0, .35);
    opacity: 0;
    z-index: 4;
}

/* ---------------- o que a tela mostra ao acender (escrito só no desfecho) ---------------- */

.pe__resultado { position: absolute; inset: 0; z-index: 2; }
.pe__festa, .pe__setup {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4%;
    padding: 0 8%;
    text-align: center;
    opacity: 0;
    animation: pe-acende .35s ease-out forwards;
}
@keyframes pe-acende { from { opacity: 0; filter: brightness(2.2); } to { opacity: 1; filter: brightness(1); } }

.pe__festa {
    background:
        radial-gradient(circle at 50% 35%, rgba(255, 236, 160, .55), rgba(255, 236, 160, 0) 55%),
        linear-gradient(180deg, #1B1406, #3A2A06 60%, #120C02);
}
.pe__titulo { font: 700 clamp(12px, 3.3vw, 16px)/1.15 Georgia, 'Times New Roman', serif; background: linear-gradient(180deg, #FFF3B0, #F4C430 55%, #C98E0E); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pe__festa img { width: 52%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid #D4AF37; box-shadow: 0 0 16px 4px rgba(255, 214, 90, .6); background: #fff; }
.pe__festa small { font: 700 clamp(7px, 1.9vw, 9px)/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #F4D77A; }
.pe__festa b { font: 700 clamp(11px, 3vw, 15px)/1.15 Georgia, serif; color: #FFF6D8; overflow-wrap: anywhere; }
.pe__fogos { position: absolute; inset: 0; pointer-events: none; }
.pe__fogos i {
    position: absolute; width: 38%; aspect-ratio: 1;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255, 230, 150, .95) 0 4deg, rgba(255, 230, 150, 0) 4deg 22deg);
    -webkit-mask: radial-gradient(circle, transparent 28%, #000 30%, #000 60%, transparent 62%);
    mask: radial-gradient(circle, transparent 28%, #000 30%, #000 60%, transparent 62%);
    transform: scale(.1);
    opacity: 0;
    animation: pe-fogo 1.1s ease-out forwards;
}
.pe__fogos i:nth-child(1) { left: 2%; top: 4%; }
.pe__fogos i:nth-child(2) { right: 2%; top: 10%; animation-delay: .25s; background: repeating-conic-gradient(from 0deg, rgba(251, 113, 133, .95) 0 4deg, rgba(251, 113, 133, 0) 4deg 22deg); }
.pe__fogos i:nth-child(3) { left: 8%; bottom: 12%; animation-delay: .5s; background: repeating-conic-gradient(from 0deg, rgba(var(--jg-rgb-4ade80, 74,222,128), .95) 0 4deg, rgba(var(--jg-rgb-4ade80, 74,222,128), 0) 4deg 22deg); }
.pe__fogos i:nth-child(4) { right: 6%; bottom: 6%; animation-delay: .75s; }
@keyframes pe-fogo { 0% { transform: scale(.1); opacity: 0; } 25% { opacity: 1; } 100% { transform: scale(1.1); opacity: .7; } }

.pe__setup { background: linear-gradient(180deg, #FFFFFF, #EEF2F0); gap: 7%; }
.pe__setup b { font: 300 clamp(22px, 6vw, 32px)/1 Arial, sans-serif; color: var(--jg-1e2a22, #1E2A22); letter-spacing: .02em; }
.pe__setup span { font: 400 clamp(8px, 2.2vw, 11px)/1.2 Arial, sans-serif; color: #5C6B60; }
.pe__idiomas { display: flex; gap: 6px; }
.pe__idiomas i { width: 7px; height: 7px; border-radius: 50%; background: #C9D0CC; }
.pe__idiomas i:first-child { background: var(--jg-0a7a00, #0A7A00); }

.pe__rotulo {
    position: absolute;
    left: 2%; bottom: 2%;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--jg-14532d, #14532d);
    border: 1px solid #C9A227;
    font: 700 10px/1 Arial, sans-serif;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FFF3C4;
    white-space: nowrap;
    z-index: 8;
}
.pe__rotulo img { width: 12px; height: 12px; }

/* ---------------- botão e mensagem ---------------- */

.pe__botao {
    display: block;
    width: 100%;
    max-width: 480px;
    margin: 10px auto 0;
    padding: 12px 10px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--jg-2aa152, #2AA152), var(--jg-0a7a00, #0A7A00));
    color: #fff;
    font: 700 15px/1.2 Arial, sans-serif;
    letter-spacing: .02em;
    cursor: pointer;
    touch-action: manipulation;
    box-shadow: 0 6px 14px -6px rgba(var(--jg-rgb-0a7a00, 10,122,0), .8), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.pe__botao:hover:not(:disabled) { filter: brightness(1.06); }
.pe__botao:disabled { opacity: .55; cursor: default; }

.pe__msg {
    max-width: 480px;
    min-height: 56px;
    margin: 10px auto 0;
    padding: 8px 12px;
    box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    text-align: center;
    font: 700 clamp(11px, 3vw, 14px)/1.35 Arial, sans-serif;
    color: #46564c;
    background: var(--jg-eef4ef, #EEF4EF);
    border: 1px solid var(--jg-dce6de, #DCE6DE);
}
.pe__msg--premiado { background: var(--jg-e3f5e6, #E3F5E6); border-color: var(--jg-9fd8ab, #9FD8AB); color: var(--jg-14532d, #14532d); }
.pe__msg--consolo  { background: #F1F3F1; border-color: #CDD5CE; color: #4F5A52; }
.pe__msg b { color: var(--jg-0a7a00, #0A7A00); }
.pe__msg--consolo b { color: #5C6B60; }

/* ---------------- vitrine ---------------- */

.pe__premios {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
    margin: 14px auto 0; max-width: 640px;
}
.pe__titulo-vitrine {
    width: 100%; text-align: center;
    font: 700 13px/1.3 Arial, sans-serif; color: var(--jg-14532d, #14532d); margin-bottom: 2px;
}
.pe__premio { width: 74px; text-align: center; font: 600 10px/1.2 Arial, sans-serif; color: #46564c; }
.pe__premio img { width: 100%; border-radius: 6px; display: block; margin-bottom: 3px; }

/* ---------------- movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
    .pe__festa, .pe__setup { animation: none; opacity: 1; }
    .pe__fogos i { animation: none; transform: scale(1); opacity: .7; }
}