/* Boot premiado (eletrônicos, informática e smartphones; setup gamer).
 *
 * Cores de MARCA como var(--jg-<hex>, #<hex>): papel de parede, rótulo e
 * botões; monitor, mesa, RGB (vermelho, laranja, dourado, verde, magenta — sem
 * azul) e ouro em hex direto.
 *
 * Contrato:
 *  - Estado FINAL por classe estática ou @keyframes … forwards.
 *  - Movimento reduzido: cada coisa para num estado VISÍVEL.
 *  - Barra e linhas do boot são JS, pelo relógio; aqui a área de trabalho (nas
 *    duas, depois da resposta) e o aviso: pop-up dourado ou aviso discreto.
 */

.bo__palco {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 16 / 11;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, #1C1F22 0%, #121416 70%, #0C0D0E 100%);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .45);
    user-select: none;
    font-family: Arial, sans-serif;
}

/* fita de LED na parede (o RGB é enfeite: corre igual nas duas) */
.bo__parede { position: absolute; inset: 0; pointer-events: none; }
.bo__parede i {
    position: absolute; left: 8%; right: 8%; top: 6%; height: 70%;
    border-radius: 10px;
    background: linear-gradient(90deg, #FF3B5C, #FF8A00, #FFD400, var(--jg-4ade80, #4ADE80), #E879F9, #FF3B5C);
    background-size: 300% 100%;
    filter: blur(22px);
    opacity: .28;
}
.bo--ligado .bo__parede i { animation: bo-rgb 4s linear infinite; opacity: .45; }
@keyframes bo-rgb { to { background-position: 300% 0; } }

.bo__monitor {
    position: absolute;
    left: 50%; top: 40%;
    width: 72%; aspect-ratio: 16 / 9;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: 1.2%;
    border-radius: 8px;
    background: linear-gradient(180deg, #2A2E31, #16181A);
    box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .8), inset 0 0 0 1px #3A3F43;
    z-index: 2;
}
.bo__pe { position: absolute; left: 50%; top: 66%; width: 14%; height: 10%; transform: translateX(-50%); background: linear-gradient(180deg, #2A2E31, #1A1C1E); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); z-index: 1; }
.bo__mesa { position: absolute; left: 0; right: 0; top: 75%; bottom: 0; background: linear-gradient(180deg, #2B2520, #1A1512); border-top: 1px solid #4A3E34; }
.bo__teclado { position: absolute; left: 30%; top: 22%; width: 34%; height: 18%; border-radius: 4px; background: #111; box-shadow: 0 0 0 1px #2A2A2A, 0 0 10px rgba(255, 138, 0, .35); }
.bo__mouse { position: absolute; left: 68%; top: 24%; width: 5%; height: 22%; border-radius: 40%; background: #111; box-shadow: 0 0 0 1px #2A2A2A, 0 0 8px rgba(232, 121, 249, .4); }

.bo__tela { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #050607; }

/* boot */
.bo__boot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5%; opacity: .15; }
.bo--ligado .bo__boot { opacity: 1; }
.bo__logo { width: 16%; aspect-ratio: 1; filter: drop-shadow(0 0 8px rgba(255, 255, 255, .25)); }
.bo__barra { width: 56%; height: 5px; border-radius: 3px; background: #1C1F22; overflow: hidden; }
.bo__barra i {
    display: block; height: 100%; width: 0;
    background: linear-gradient(90deg, #FF3B5C, #FF8A00, #FFD400, var(--jg-4ade80, #4ADE80), #E879F9, #FF3B5C);
    background-size: 300px 100%;
    box-shadow: 0 0 8px rgba(255, 212, 0, .6);
}
.bo__status { font: 700 clamp(8px, 2.2vw, 11px)/1 Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #C8CDD0; }
.bo__log { position: absolute; left: 3%; top: 5%; font: 400 clamp(6px, 1.6vw, 8px)/1.35 Consolas, 'Courier New', monospace; color: var(--jg-7cf0b0, #7CF0B0); }
.bo__linha { opacity: 0; white-space: pre; }

/* área de trabalho (nas duas, depois da resposta) */
.bo__desktop {
    position: absolute; inset: 0;
    background:
        radial-gradient(circle at 75% 30%, rgba(244, 196, 48, .35), rgba(244, 196, 48, 0) 45%),
        radial-gradient(circle at 20% 80%, rgba(var(--jg-rgb-2aa152, 42,161,82), .55), rgba(var(--jg-rgb-2aa152, 42,161,82), 0) 55%),
        linear-gradient(135deg, var(--jg-14532d, #14532d), var(--jg-0b1a12, #0B1A12));
    opacity: 0;
}
.bo--desktop .bo__desktop { animation: bo-entra var(--bo-desktop, .5s) ease-out forwards; }
@keyframes bo-entra { to { opacity: 1; } }
.bo__icones { position: absolute; left: 3%; top: 5%; display: grid; gap: 8px; }
.bo__icones i { display: block; width: 14px; height: 14px; border-radius: 3px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .4); }
.bo__icones i:nth-child(2) { background: #F4C430; }
.bo__icones i:nth-child(3) { background: #FB7185; }
.bo__barra-tarefas {
    position: absolute; left: 0; right: 0; bottom: 0; height: 9%;
    display: flex; align-items: center; gap: 6px; padding: 0 2%;
    background: rgba(var(--jg-rgb-0a0e0c, 10,14,12), .75);
}
.bo__barra-tarefas img { height: 70%; }
.bo__barra-tarefas span { width: 12px; height: 50%; border-radius: 2px; background: rgba(255, 255, 255, .35); }
.bo__barra-tarefas em { margin-left: auto; font: 400 clamp(6px, 1.6vw, 8px)/1 Arial, sans-serif; color: var(--jg-e9fbef, #E9FBEF); font-style: normal; }

/* ---------------- aviso do sistema (escrito só no desfecho) ---------------- */

.bo__resultado { position: absolute; inset: 0; pointer-events: none; }
.bo__popup {
    position: absolute; left: 50%; top: 46%;
    width: 78%;
    border-radius: 6px;
    overflow: hidden;
    background: linear-gradient(160deg, #FFF8DC, #F4E3A6);
    border: 2px solid #D4AF37;
    box-shadow: 0 0 0 1px #9A7414, 0 14px 24px -8px rgba(0, 0, 0, .7), 0 0 24px 6px rgba(255, 214, 90, .55);
    transform: translate(-50%, -50%) scale(.5);
    opacity: 0;
    animation: bo-popup .45s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
@keyframes bo-popup { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.bo__popup-topo { display: flex; align-items: center; gap: 4px; padding: 3px 8px; background: linear-gradient(90deg, #C98E0E, #F4C430); }
.bo__popup-topo b { flex: 1; font: 700 clamp(7px, 1.9vw, 9px)/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3A2A06; }
.bo__popup-topo i { width: 7px; height: 7px; border-radius: 50%; background: rgba(58, 42, 6, .45); }
.bo__popup-corpo { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px; }
.bo__popup-corpo img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; border: 2px solid #D4AF37; background: #fff; flex: none; }
.bo__popup-corpo strong { display: block; font: 700 clamp(9px, 2.5vw, 12px)/1.15 Georgia, 'Times New Roman', serif; color: var(--jg-14532d, #14532d); }
.bo__popup-corpo small { display: block; margin-top: 3px; font: 700 clamp(6px, 1.7vw, 8px)/1 Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #8A6D1F; }
.bo__popup-corpo span { display: block; font: 700 clamp(9px, 2.5vw, 12px)/1.15 Georgia, serif; color: #3A2A06; overflow-wrap: anywhere; }

.bo__toast {
    position: absolute; right: 3%; bottom: 13%;
    display: flex; align-items: center; gap: 6px;
    padding: 5px 9px;
    border-radius: 5px;
    background: rgba(20, 26, 23, .9);
    border: 1px solid rgba(255, 255, 255, .12);
    transform: translateY(8px);
    opacity: 0;
    animation: bo-toast .4s ease-out forwards;
}
@keyframes bo-toast { to { transform: none; opacity: 1; } }
.bo__toast i { width: 8px; height: 8px; border-radius: 50%; background: var(--jg-4ade80, #4ADE80); flex: none; }
.bo__toast b { display: block; font: 700 clamp(7px, 1.9vw, 9px)/1.2 Arial, sans-serif; color: var(--jg-e9fbef, #E9FBEF); }
.bo__toast span { display: block; font: 400 clamp(7px, 1.8vw, 9px)/1.2 Arial, sans-serif; color: var(--jg-9fe3ba, #9FE3BA); }

.bo__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;
}
.bo__rotulo img { width: 12px; height: 12px; }

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

.bo__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);
}
.bo__botao:hover:not(:disabled) { filter: brightness(1.06); }
.bo__botao:disabled { opacity: .55; cursor: default; }

.bo__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);
}
.bo__msg--premiado { background: var(--jg-e3f5e6, #E3F5E6); border-color: var(--jg-9fd8ab, #9FD8AB); color: var(--jg-14532d, #14532d); }
.bo__msg--consolo  { background: #F1F3F1; border-color: #CDD5CE; color: #4F5A52; }
.bo__msg b { color: var(--jg-0a7a00, #0A7A00); }
.bo__msg--consolo b { color: #5C6B60; }

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

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

/* ---------------- movimento reduzido ---------------- */
@media (prefers-reduced-motion: reduce) {
    .bo--ligado .bo__parede i { animation: none; }
    .bo--desktop .bo__desktop { animation: none; opacity: 1; }
    .bo__popup { animation: none; transform: translate(-50%, -50%) scale(1); opacity: 1; }
    .bo__toast { animation: none; transform: none; opacity: 1; }
}