:root {
    --pip-boy-black: #000;
    --pip-boy-light-green: #0c0;
    --pip-boy-medium-green: #090;
    --pip-boy-dark-green: #060;

    --pip-boy-primary-color: #18dc0c;
    --pip-boy-secondary-color: #11291b;
    --pip-boy-background-color: #10170f;
}

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

body {
    background-color: var(--pip-boy-black);
    margin: 0;
    overflow: hidden;
    padding: 0;
}

a {
    cursor: pointer;
}

.screen, .screen a:not(.noanimate) {
    animation: colorPulse 5s infinite ease-in-out;
}

.screen {
    background-image: radial-gradient(#444, #111);
    box-shadow: 0 0 10vmin 1vmin var(--pip-boy-black) inset;
    box-sizing: border-box;
    font-family: 'Fira Mono', monospace;
    font-size: 20px;
    height: 100dvh;
    overflow: hidden;
    padding: 10vmin;
    width: 100vw;
}

.screen:before {
    animation: wave 10s infinite ease-in-out;
    content: "";
    height: 20vh;
    left: 0;
    opacity: .5;
    position: absolute;
    right: 0;
    z-index: 1;
    pointer-events:none;
}

.screen:after {
    background-image: linear-gradient(transparent, transparent 3px, #222);
    background-size: 4px 4px;
    bottom: 0;
    content: "";
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

p.deco:after {
    animation: blink 1s infinite;
    content: "_";
}

@keyframes colorPulse {
    0%, 100% {
        color: var(--pip-boy-light-green);
    }
    48%, 52% {
        color: var(--pip-boy-medium-green);
    }
    50% {
        color: var(--pip-boy-dark-green);
    }
}

@keyframes elementPulse {
    0%, 100% {
        opacity: 1;
    }
    48%, 52% {
        opacity: 0.8;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes wave {
    0% {
        box-shadow: 0 -10vh 20vh var(--pip-boy-light-green);
        top: -100vh;
    }
    48%, 52% {
        box-shadow: 0 -10vh 20vh var(--pip-boy-medium-green);
    }
    50% {
        box-shadow: 0 -10vh 20vh var(--pip-boy-dark-green);
    }
    100% {
        box-shadow: 0 -10vh 20vh var(--pip-boy-light-green);
        top: 200vh;
    }
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.screen img, .screen .progress-bar {
    animation: elementPulse 5s infinite ease-in-out;
}

/* ===== Scanlines contrôlables (ON par défaut) ===== */
.screen{
    --scanlines-enabled: 1;        /* 1 = ON, 0 = OFF */
    --scanlines-opacity-veil: .12; /* intensité du VOILE (grain) */
    --scanlines-alpha-lines: 1;    /* intensité des LIGNES (#222) */
}

.screen::before{
    /* ton wave reste, on ne change que l’opacité */
    opacity: calc(var(--scanlines-enabled) * var(--scanlines-opacity-veil)) !important;
    pointer-events: none;
}

.screen::after{
    /* tes lignes horizontales d’origine (#222), opacité pilotée */
    background-image: linear-gradient(transparent, transparent 3px, #222) !important;
    opacity: calc(var(--scanlines-enabled) * var(--scanlines-alpha-lines)) !important;
    pointer-events: none;
}