/* https://codeberg.org/Dmian/font-cpc464 thanks to https://damianvila.com/ :) */
@font-face {
    font-family: 'Webcpc464';
    src: url('fonts/cpc464.woff2') format('woff2');
}

/* Styles généraux */
body {
    font-family: 'Webcpc464', 'Courier New', Courier, monospace;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    width: 100vw;
    margin: 0;
}

.screen-container {
    background-color: #0000FF;
    color: #FFFF00;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;

    /* Taille principale basée sur la largeur (95vw max) */
    width: 95vw;
    aspect-ratio: 4 / 3; /* Respecte le ratio 4:3 */

    /* Empêche la hauteur de dépasser 95vh */
    max-height: 95vh;

    /* La bordure bleue fait toujours 20% de la taille de l'écran */
    padding: 10%; /* 10% de chaque côté pour obtenir 20% au total */
    box-sizing: border-box;

    border-radius: 5vw; /* l'utilisation de vh permet d'agrandir l'arrondi si l'écran s'agrandit */

    box-shadow: 0vw 0vw 3vw 0px rgba(0,0,0,1) inset;
    -webkit-box-shadow: 0vw 0vw 3vw 0px rgba(0,0,0,1) inset;
    -moz-box-shadow: 0vw 0vw 3vw 0px rgba(0,0,0,1) inset;
}

.screen {
    width: 40ch; /* les 40 caractères de large du mode 1 */
    height: 25ch; /* les 25 caractères de haut du CPC */
    white-space: pre-wrap;
    text-align: left;
    padding: 0;

    /* Définition du nombre de caractères fixes en largeur et hauteur */
    font-size: calc(1.75vw); /* Ajusté pour correspondre à la largeur du conteneur */

    /* Forcer le retour à la ligne */
    word-break: break-word;
    overflow-wrap: break-word;

    overflow-y: auto; /* Permet le défilement */
    scrollbar-width: none; /* Cache la barre de défilement sur Firefox */
    -ms-overflow-style: none; /* Cache la barre sur Edge/IE */

    caret-color: transparent; /* Rend le curseur texte invisible */
}

.screen::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Si l'écran est très large (plus large que 4/3) */
@media (min-aspect-ratio: 4/3) {
    .screen-container {
        width: auto;   /* Supprime width: 95vw */
        height: 95vh;  /* Définit la hauteur à 95% de l'écran */
    }
}

.texte-etire {
    display: inline-block; /* Nécessaire pour que transform fonctionne */
    transform: scaleX(2); /* Mode 0 */
    width: 50%;
}

.texte-compress {
    display: inline-block; /* Nécessaire pour que transform fonctionne */
    transform: scaleX(0.5); /* Mode 2 */
    transform-origin: left; /* Évite que le texte ne se décale */
    width: 200%;
}

input {
    border: none;
    background-color: #0000FF;
    color: #FFFF00;
    width: 14ch;
    font-family: 'Webcpc464', 'Courier New', Courier, monospace;
    font-size: inherit; /* S'adapte à la taille du texte */
}