@font-face {
    font-family: 'Shaston';
    src: url('fonts/Shaston320.ttf') format('truetype');
}
@font-face {
    font-family: 'ShastonHi';
    src: url('fonts/ShastonHi320.ttf') format('truetype');
}
@font-face {
    font-family: 'PrintChar21';
    src: url('fonts/PrintChar21.ttf') format('truetype');
}

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

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
    font-family: 'Shaston', 'PrintChar21', monospace;
    letter-spacing: 1px;
}

#canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.15) 2px,
        rgba(0, 0, 0, 0.15) 4px
    );
    z-index: 10;
}

#crt-flicker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 11;
    animation: flicker 0.08s infinite alternate;
    background: transparent;
}

@keyframes flicker {
    0% { opacity: 0.97; }
    50% { opacity: 1; }
    100% { opacity: 0.98; }
}