/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background:
        repeating-linear-gradient(
            transparent 0px,
            transparent 1px,
            rgba(93, 45, 145, 0.2) 2px
        ),
        #241d27; /* Roxo fundo */
    color: #FFFDD0; /* Texto creme */
    font-family: 'VT323', monospace;
    line-height: 1.6;
    padding: 20px;
    min-height: 100vh;
    position: relative;
}

/* ESTILO DA JANELA */
.window {
    position: absolute;
    background: #241d27; /* Fundo roxo (mesmo do body) */
    color: #FFFDD0;      /* Texto creme dentro da janela */
    border: 4px solid #FFFDD0; /* Borda branca */
    box-shadow: 
        6px 6px 0 #0a070b, /* Sombra deslocada */
        inset -2px -2px 0 #4f4454; /* Efeito 3D interno em roxo mais claro */
    width: 300px;
    max-width: 90%;
    cursor: default;
}

.title-bar {
    background: #FFFDD0; /* Barra do título branca */
    color: #241d27;      /* Texto roxo na barra */
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #FFFDD0;
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    user-select: none;
    cursor: move;
}

.window-controls button {
    background: #241d27; /* Botões com fundo roxo */
    color: #FFFDD0;      /* Texto creme nos botões */
    border: 2px solid #FFFDD0;
    width: 20px;
    height: 20px;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    margin-left: 4px;
    cursor: pointer;
}

.window-controls button:hover {
    background: #5D2D91; /* Roxo mais claro no hover */
    color: #FFFDD0;
}

.content {
    padding: 15px;
    min-height: 100px;
    font-size: 14px;
}

/* BOTÕES RETRÔ */
.btn {
    background: #241d27;  /* Fundo roxo nos botões */
    color: #FFFDD0;       /* Texto creme */
    border: 3px solid #FFFDD0;
    padding: 8px 15px;
    margin: 10px 0;
    font-family: 'Press Start 2P', monospace;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 3px 3px 0 #FFFDD0;
}

.btn:hover {
    background: #5D2D91;  /* Roxo mais claro no hover */
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #FFFDD0;
}