@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:#000;
    color:#00ff00;
    font-family:'VT323', monospace;
    font-size:24px;
    line-height:1.3;
    overflow:hidden;
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}
.terminal {
    width:100%; max-width:900px;
    height:95vh;
    background:#001100;
    border:4px solid #00cc00;
    box-shadow:0 0 0 8px #002200, 0 0 30px rgba(0,255,0,.3);
    display:flex;
    flex-direction:column;
    padding:15px;
    position:relative;
}
.terminal-header {
    background:#002200;
    padding:8px 15px;
    border-bottom:3px solid #00cc00;
    font-size:22px;
    text-align:center;
    letter-spacing:2px;
}
#output { flex:1; overflow-y:auto; padding:10px; }
.line { margin-bottom:8px; white-space:pre-wrap; }
.input-line { display:flex; align-items:center; padding:5px 10px; background:rgba(0,30,0,.8); }
.prompt { color:#00ff00; margin-right:8px; flex-shrink:0; }
#command-input {
    background:transparent; border:none; color:#00ff00;
    font-family:'VT323', monospace; font-size:24px;
    flex:1; outline:none; caret-color:#00ff88;
}
.terminal::before {
    content:''; position:absolute; top:0; left:0; width:100%; height:100%;
    background:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, rgba(0,255,0,.03) 3px, rgba(0,255,0,.03) 6px);
    pointer-events:none; z-index:2;
}

/* GAME CONTAINERS */
#pong-container, #matrix-container {
    display:none; position:absolute; top:0; left:0; width:100%; height:100%;
    background:#001100; flex-direction:column; align-items:center; justify-content:center;
    border:4px solid #00cc00; box-shadow:0 0 0 8px #002200;
}
#pong-canvas, #matrix-canvas { background:#001100; border:3px solid #00cc00; image-rendering:pixelated; }
.game-header {
    width:100%; background:#002200; padding:8px; text-align:center;
    font-size:22px; border-bottom:3px solid #00cc00;
}
.game-instructions {
    position:absolute; bottom:15px; font-size:18px; color:#00ff88;
    text-align:center; width:100%;
}
#cybercube-video {
    filter: contrast(1.15) brightness(1.1);
    image-rendering: pixelated;
}

#cybercube-container::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 3px,
        rgba(0, 255, 0, 0.08) 3px,
        rgba(0, 255, 0, 0.08) 6px
    );
    pointer-events: none;
    z-index: 2;
}