*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

body{

    background:#120b08;

    color:#ffe0b0;

    font-family:'VT323', monospace;

    position:relative;

}

/* ========================================
   FUNDO CRT
======================================== */

body::before{

    content:'';

    position:fixed;

    inset:0;

    background:

        radial-gradient(
            circle at top,
            rgba(255,140,0,.18),
            transparent 45%
        ),

        linear-gradient(
            180deg,
            #2b1b12 0%,
            #140c08 100%
        );

    z-index:-3;

}

body::after{

    content:'';

    position:fixed;

    inset:0;

    background:

        repeating-linear-gradient(

            to bottom,

            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,

            transparent 2px,
            transparent 4px

        );

    pointer-events:none;

    z-index:999999;

}

/* ========================================
   NOISE
======================================== */

.noise{

    position:fixed;

    inset:-50%;

    opacity:.07;

    pointer-events:none;

    background:

        repeating-radial-gradient(

            circle at center,

            rgba(255,255,255,.08) 0,

            rgba(255,255,255,0) 2px,

            transparent 4px

        );

    background-size:3px 3px;

    animation:
        noise .18s infinite,
        flicker .08s infinite;

    z-index:9999;

}

@keyframes noise{

    0%{
        transform:translate(0,0);
    }

    25%{
        transform:translate(-5%,3%);
    }

    50%{
        transform:translate(4%,-2%);
    }

    75%{
        transform:translate(-3%,5%);
    }

    100%{
        transform:translate(0,0);
    }

}

@keyframes flicker{

    0%{
        opacity:.06;
    }

    50%{
        opacity:.09;
    }

    100%{
        opacity:.05;
    }

}

/* ========================================
   BOOT SCREEN
======================================== */

#boot-screen{

    position:fixed;

    inset:0;

    background:black;

    color:#67ff67;

    z-index:999999999;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:50px;

}

.boot-logo{

    font-family:'Press Start 2P', cursive;

    font-size:52px;

    color:#ffb347;

    margin-bottom:40px;

    text-shadow:
        0 0 20px rgba(255,180,0,.8);

}

.boot-text{

    font-size:34px;

    line-height:1.5;

}

/* ========================================
   SISTEMA
======================================== */

.hidden{
    display:none !important;
}

#system{

    width:100vw;

    height:100vh;

    display:flex;

    flex-direction:column;

}

/* ========================================
   TOPBAR
======================================== */

.topbar{

    height:72px;

    background:

        linear-gradient(
            to bottom,
            #6b3811,
            #3b1f0a
        );

    border-bottom:4px solid #c67a24;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 24px;

    flex-shrink:0;

}

.logo{

    font-family:'Press Start 2P', cursive;

    font-size:18px;

    color:#ffd08a;

}

.clock{

    font-size:34px;

    color:#74ff84;

}

/* ========================================
   TABS
======================================== */

.console-tabs{

    height:84px;

    background:#1f120a;

    border-bottom:3px solid #7b4516;

    display:flex;

    align-items:center;

    gap:16px;

    padding:0 24px;

    overflow-x:auto;

    overflow-y:hidden;

    flex-shrink:0;

}

.console-tabs::-webkit-scrollbar{
    display:none;
}

.console-tab{

    min-width:max-content;

    padding:14px 24px;

    background:#3a1e0d;

    border:2px solid #8c4a16;

    border-radius:14px;

    font-size:28px;

    color:#ffcf9b;

    transition:.15s;

}

.console-tab.active{

    background:#ff8e1f;

    color:white;

    transform:scale(1.05);

    border-color:#ffe08a;

    box-shadow:

        0 0 20px rgba(255,160,0,.8),

        0 0 50px rgba(255,120,0,.4);

}

/* ========================================
   MAIN
======================================== */

.main{

    flex:1;

    overflow-y:auto;

    padding:30px;

}

/* ========================================
   GRID
======================================== */

.games-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(240px,1fr));

    gap:24px;

}

/* ========================================
   CARD
======================================== */

.game-card{

    background:#31190c;

    border:3px solid #7d4315;

    border-radius:16px;

    overflow:hidden;

    transition:.12s;

    transform-origin:center;

}

.game-card.selected{

    transform:
        translateY(-6px)
        scale(1.05);

    border-color:#ffe08a;

    box-shadow:

        0 0 30px rgba(255,220,0,.7),

        0 0 60px rgba(255,120,0,.4);

}

.game-cover{

    width:100%;

    height:300px;

    background-size:cover;

    background-position:center;

    background-color:black;

}

.game-info{

    padding:16px;

}

.game-title{

    font-size:30px;

    line-height:1.2;

    color:#fff0d0;

}

.game-console{

    margin-top:8px;

    font-size:22px;

    color:#f2bf75;

}

/* ========================================
   FOOTER
======================================== */

.footer{

    height:38px;

    background:#1a1008;

    border-top:2px solid #744116;

    display:flex;

    align-items:center;

    padding:0 16px;

    font-size:22px;

    color:#ffcb8a;

    flex-shrink:0;

}

/* ========================================
   EMULADOR
======================================== */

#emulator-modal{

    position:fixed;

    inset:0;

    background:black;

    z-index:999999999;

}

#game{

    width:100vw;

    height:100vh;

    background:black;

}

/* ========================================
   CRT FLASH
======================================== */

#crt-transition{

    position:fixed;

    inset:0;

    background:white;

    opacity:0;

    pointer-events:none;

    z-index:999999999;

}

#crt-transition.active{

    animation:crtFlash .25s;

}

@keyframes crtFlash{

    0%{
        opacity:0;
    }

    40%{
        opacity:.85;
    }

    100%{
        opacity:0;
    }

}

/* ========================================
   RESPONSIVO
======================================== */

@media(max-width:900px){

    .games-grid{

        grid-template-columns:
            repeat(auto-fill,minmax(180px,1fr));

    }

    .game-cover{

        height:220px;

    }

    .console-tab{

        font-size:22px;

    }

    .game-title{

        font-size:24px;

    }

}
/* ========================================
   AJUSTES DE ESTADO / USABILIDADE
======================================== */

body{
    user-select:none;
}

.console-tab,
.game-card{
    cursor:pointer;
}

.games-status{
    grid-column:1 / -1;
    min-height:220px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:34px;
    color:#eecb91;
    letter-spacing:1px;
}

.games-status.error,
.boot-error{
    color:#ff7a68;
    text-shadow:0 0 12px rgba(255,80,50,.35);
}

/* A transição simula o fechamento e a reabertura vertical de um CRT. */
#crt-transition{
    background:#070503;
    transform:scaleY(1);
    transform-origin:center;
}

#crt-transition.active{
    animation:crtSwitch .30s ease-in-out;
}

@keyframes crtSwitch{
    0%{
        opacity:0;
        transform:scaleY(1);
    }

    28%{
        opacity:.95;
        transform:scaleY(1);
    }

    48%{
        opacity:1;
        transform:scaleY(.018);
        box-shadow:0 0 38px rgba(255,235,190,.9);
        background:#fff3cf;
    }

    58%{
        opacity:1;
        transform:scaleY(.018);
        background:#fff3cf;
    }

    100%{
        opacity:0;
        transform:scaleY(1);
        background:#070503;
    }
}