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

body {
    background-color: #050505;
    color: #00ff00;
    font-family: 'Share Tech Mono', monospace;
    overflow: hidden;
    touch-action: none;
}

.crt::before {
    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.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
    z-index: 2;
    background-size: 100% 2px, 3px 100%;
    pointer-events: none;
}

.scanline {
    width: 100%; height: 100px; z-index: 10;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0, 255, 0, 0.1) 50%, rgba(0,0,0,0) 100%);
    opacity: 0.1; position: absolute; bottom: 100%;
    animation: scanline 10s linear infinite; pointer-events: none;
}
@keyframes scanline { 0% { bottom: 100%; } 100% { bottom: -100px; } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: #333; }

.glow-text { text-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; }
.alert-text { color: #ff3333; text-shadow: 0 0 5px #ff0000; }

#gameCanvas {
    background-color: #0a0a0a;
    background-image: linear-gradient(rgba(0, 50, 0, 0.2) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 50, 0, 0.2) 1px, transparent 1px);
    background-size: 20px 20px; border: 2px solid #333; box-shadow: 0 0 20px rgba(0, 255, 0, 0.1);
}
.d-pad-btn { background: rgba(0, 255, 0, 0.1); border: 1px solid #00ff00; color: #00ff00; user-select: none; }
.d-pad-btn:active { background: rgba(0, 255, 0, 0.4); }