/* ==========================================
   EFEITOS DE MONITOR CRT E BASE
   ========================================== */
body::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%); background-size: 100% 3px; z-index: 99999; pointer-events: none; }
body::before { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: radial-gradient(circle, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%); z-index: 99998; pointer-events: none; }
@keyframes flicker { 0% { opacity: 0.98; } 5% { opacity: 0.95; } 10% { opacity: 0.99; } 100% { opacity: 1; } }

body { 
    animation: flicker 0.15s infinite; background-color: #000; color: #d4d4d4; 
    font-family: 'Pixelated', 'Courier New', Tahoma, sans-serif; 
    margin: 0; height: 100vh; overflow: hidden; display: flex; user-select: none; position: relative; 
    cursor: url('cursor.png'), default;
}

button, .btn-os, .icone, .usuario-btn, .item-arquivo, a, .janela-header, .discord-link, label, .menu-item {
    cursor: url('pointer.png'), pointer !important;
}

body.crt-off::after, body.crt-off::before { display: none !important; }
body.crt-off { animation: none !important; }

#tela-boot, #tela-login, #tela-carregando, #tela-os { width: 100%; height: 100%; display: none; position: absolute; top: 0; left: 0; }

#tela-boot { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #000; z-index: 5000; cursor: url('glass.png'), wait !important; }
#tela-login { background-color: #008080; justify-content: center; align-items: center; z-index: 4000; }
#tela-carregando { background-color: #008080; justify-content: center; align-items: center; z-index: 3500; cursor: url('glass.png'), wait !important; }
#tela-os { flex-direction: column; background-color: #008080; z-index: 3000; overflow: hidden; }

#bios-text { position: absolute; top: 20px; left: 20px; color: #ccc; font-size: 1rem; line-height: 1.4; }
#boot-logo-container { display: none; flex-direction: column; align-items: center; gap: 20px; }
.boot-logo { width: 150px; filter: grayscale(100%) contrast(1.5) brightness(1.2); }
.loading-bar-container { width: 200px; height: 15px; border: 2px solid #555; padding: 2px; }
.loading-bar { height: 100%; background-color: #dfdfdf; width: 0%; animation: carregarBoot 3s forwards; }
@keyframes carregarBoot { 0% { width: 0%; } 50% { width: 60%; } 100% { width: 100%; } }

.linha-bios { opacity: 0; animation: aparecerTexto 0.1s forwards; margin-bottom: 3px; }
@keyframes aparecerTexto { to { opacity: 1; } }

.btn-os { background: #c0c0c0; border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; cursor: pointer; padding: 5px 15px; font-weight: bold; font-family: inherit; color: #000; }
.btn-os:active { border-color: #000 #dfdfdf #dfdfdf #000; }
.login-box { background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; width: 380px; display: flex; flex-direction: column; box-shadow: 5px 5px 0px rgba(0,0,0,0.5); }
.login-header { background-color: #000080; color: white; padding: 5px 10px; font-weight: bold; letter-spacing: 1px; }
.login-content { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 15px; color: #000; }

.usuario-btn { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; border: 2px solid transparent; width: 90%; background: #fff; box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2); }
.usuario-btn:hover { background-color: #000080; color: #fff; }
.usuario-info { display: flex; align-items: center; gap: 15px; }
.usuario-icone { font-size: 2.5rem; }
.usuario-avatar { width: 40px; height: 40px; filter: grayscale(100%) contrast(1.2); background: #000; }
.usuario-nome { font-weight: bold; font-size: 1.1rem; }
.senha-input { padding: 8px; font-family: inherit; font-size: 1.2rem; border: 2px solid; border-color: #888 #fff #fff #888; width: 70%; text-align: center; outline: none; }
.ampulheta { font-size: 2.5rem; animation: girarAmpulheta 1.5s infinite; }
@keyframes girarAmpulheta { 0% { transform: rotate(0deg); } 50%, 100% { transform: rotate(180deg); } }

/* ==========================================
   ÁREA DE TRABALHO E ÍCONES
   ========================================== */
.desktop { 
    flex: 1; 
    position: relative; 
    overflow: hidden; 
}

.icone { 
    position: absolute; 
    display: flex; flex-direction: column; align-items: center; width: 80px; text-align: center; cursor: pointer; 
    transition: top 0.15s ease, left 0.15s ease;
}
.icone.dragging {
    transition: none !important; 
    z-index: 1000;
}
.icone-img { font-size: 3rem; margin-bottom: 5px; text-shadow: 2px 2px 0px rgba(0,0,0,0.5); }
.icone-texto { color: white; padding: 2px 5px; font-size: 0.9rem; }
.icone:hover .icone-texto { background-color: #000080; border: 1px dotted white; }

.taskbar { height: 40px; background-color: #c0c0c0; border-top: 2px solid #dfdfdf; display: flex; align-items: center; padding: 0 5px; z-index: 9999; }
.btn-iniciar { display: flex; align-items: center; gap: 5px; font-weight: bold; padding: 4px 10px; cursor: pointer; margin-right: 10px; }
#janelas-abertas { display: flex; gap: 5px; flex: 1; overflow-x: hidden; }
.btn-taskbar { padding: 4px 10px; font-size: 0.85rem; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.btn-taskbar.active { border-color: #000 #dfdfdf #dfdfdf #000; background: #ddd; box-shadow: inset 1px 1px 2px #000; }
.relogio { border: 2px solid; border-color: #888 #fff #fff #888; padding: 4px 10px; color: #000; margin-left: auto; }

#menu-iniciar { position: absolute; bottom: 40px; left: 0; width: 220px; background: #c0c0c0; border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; display: none; flex-direction: row; z-index: 10000; box-shadow: 5px 5px 0px rgba(0,0,0,0.5); }
.menu-sidebar { background: #000080; color: white; width: 30px; writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; padding: 5px 2px; font-weight: bold; font-size: 1.1rem; letter-spacing: 2px; }
.menu-lista { flex: 1; display: flex; flex-direction: column; padding: 2px; color: #000;}
.menu-item { padding: 8px 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 0.9rem;}
.menu-item:hover { background: #000080; color: white; }

.janela { position: absolute; background-color: #c0c0c0; border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; width: 420px; display: none; flex-direction: column; box-shadow: 5px 5px 0px rgba(0,0,0,0.5); color: #000; }
.janela-header { background-color: #000080; color: white; padding: 3px 5px; display: flex; justify-content: space-between; font-weight: bold; cursor: grab; align-items: center;}
.janela-header:active { cursor: grabbing; }
.janela-header.inativa { background-color: #888; }
.btn-janela { background: #c0c0c0; border: 2px solid; border-color: #dfdfdf #000 #000 #dfdfdf; cursor: pointer; padding: 0 5px; font-weight: bold; }
.btn-janela:active { border-color: #000 #dfdfdf #dfdfdf #000; }
.janela-conteudo { padding: 15px; background: #fff; margin: 5px; border: 2px solid; border-color: #888 #dfdfdf #dfdfdf #888; height: 250px; overflow-y: auto; }
.item-arquivo { display: flex; align-items: center; gap: 15px; padding: 5px; color: #000; text-decoration: none; border: 1px solid transparent; }
.item-arquivo:hover { background-color: #000080; color: #fff; border: 1px dotted #fff; }
.item-arquivo.bloqueado { color: #888; cursor: url('cursor.png'), not-allowed !important; }
.item-arquivo.bloqueado:hover { background-color: transparent; color: #888; border-color: transparent; }
.item-icone { font-size: 2.2rem; }
.item-info { display: flex; flex-direction: column; }
.item-titulo { font-weight: bold; }
.item-desc { font-size: 0.8rem; line-height: 1.3; margin-top: 3px;}
.status-completado { color: #00a000; font-weight: bold; font-size: 0.8rem; }
.status-bloqueado { color: #a00000; font-weight: bold; font-size: 0.8rem; margin-top: 3px;}
.texto-lore { font-size: 0.95rem; line-height: 1.5; }
.discord-link { color: #0000ff; text-decoration: underline; }

@keyframes blinker { 50% { opacity: 0; } }

/* ==========================================
   ESTILOS DO PARADOX PAINT
   ========================================== */
.paint-layout {
    display: flex;
    height: 400px; /* Aumentado para o papel ficar gigante */
    border: 2px solid;
    border-color: #888 #fff #fff #888;
    background: #c0c0c0;
}

.paint-toolbar {
    width: 45px;
    padding: 3px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 2px;
    border-right: 1px solid #888;
}

.paint-tool {
    width: 18px;
    height: 18px;
    border: 2px solid;
    border-color: #fff #888 #888 #fff;
    background: #c0c0c0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.7rem;
    cursor: pointer;
}

.paint-tool.active {
    border-color: #888 #fff #fff #888;
    background: #dfdfdf;
}

.paint-canvas-container {
    flex: 1;
    padding: 3px;
    background: #888; 
    overflow: hidden;
}

#paint-canvas {
    background: #ffffff;
    cursor: crosshair;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.5); 
}

.paint-colors {
    height: 35px;
    background: #c0c0c0;
    border: 2px solid;
    border-color: #888 #fff #fff #888;
    margin-top: 5px;
    display: flex;
    align-items: center;
    padding: 0 5px;
    gap: 4px;
}

.color-swatch {
    width: 14px;
    height: 14px;
    border: 1px solid #888;
    box-shadow: inset 1px 1px 0px #000;
    cursor: pointer;
}

.color-swatch.active {
    border: 1px dotted #fff;
}