:root {
  --lcd-bg: #c7d1af; 
  --lcd-pixel: #283018; 
  --text-size: 1.6rem;
}

*{
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: Panton-BlackCaps;
    src: url(./fonts/Panton-BlackCaps.otf);
}

@font-face {
    font-family: nokia;
    src: url(./fonts/nokiafc22.ttf);
}

.container{
    background: linear-gradient(
    180deg,
    #8e161d 0%,    /* Parte superior (más oscura) */
    #d12d36 25%,   /* Punto de luz superior */
    #a51d24 70%,   /* Cuerpo medio */
    #7a1118 100%   /* Base (sombra final) */
    );
    width: 100%;
    height: 100vh;
    display: flex;                /* 1. Activar Flexbox */
    justify-content: center;      /* 2. Centrado Horizontal */
    align-items: center;          /* 3. Centrado Vertical */
    flex-direction: row;
}

.screen-container{
    background-color: antiquewhite;
    background: linear-gradient(145deg, #f0e6d2, #d9cfb8);
    border-radius: 1rem 1rem 3rem 3rem;
    padding: 0.5rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
    
.screen-container .screen{
    aspect-ratio: 3 / 4;
    height: 30.5rem;
    background-color: var(--lcd-bg);
    color: var(--lcd-pixel);
    image-rendering: pixelated;
    border: 2px solid rgba(0, 0, 0, 0.1);
    padding: 10px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.4);
    border: 4px solid #d1c7a7;
}

.screen-container .logo{
    margin-top: 2em;
}

.screen-container .logo p{
    font-family: Panton-BlackCaps;
    font-size: 2rem;
}

.screen p,
.bar,
.item-option,
.screen textarea{
    font-family: nokia;
    font-size: var(--text-size);
}

/* --------- Pantalla principal ------ */
.flex-screen{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

.main-screen .state-bar{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.main-screen .state-bar img{
    height: 2em;
    margin: 0 0.3em;
}

.main-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-content #time{
    font-size: 4em;
}

.softkeys{
    width: auto;
    height: 8%;
    background-color: var(--lcd-pixel);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 1em;
}

.softkeys button{
    border: none;
    background-color: transparent;
    font-family: nokia;
    color: var(--lcd-bg);
}

.bar{
    width: auto;
    text-align: center;
    font-family: nokia;
    color: var(--lcd-bg);
    background-color: var(--lcd-pixel);
    padding: 0 10px;
}

.menu-select{
    margin-top: 0.5em;
    overflow-y: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    flex: 1
}

.menu-screen{
    justify-content: flex-start;
}

.item-option{
    border: none;
    text-align: left;
    font-family: nokia;
    color: var(--lcd-pixel);
    background-color: transparent;
    padding: 0 10px;
}

.item-option:active{
    color: var(--lcd-bg);
    background-color: var(--lcd-pixel);
}

.item-option.selected{
    color: var(--lcd-bg);
    background-color: var(--lcd-pixel);
}

.item-option:focus{
    border: none;
}

.flex-menu-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.screen textarea{
    border: none;
    width: 100%;
    background: none;
    color: var(--lcd-pixel);
    resize: none;
    overflow-y: auto;
    scrollbar-width: none;
    flex: 1;
    outline: none;
}

.screen textarea::-webkit-scrollbar,
.menu-select::-webkit-scrollbar{
    display: none;
}

.screen button{
    outline: none;
}

.text-center{
    text-align: center;
}

#js-keyboard li{
    border-radius: 0 !important;
}

@media (max-width: 1024px) and (orientation: portrait){ 
    .screen-container .screen{
        height: clamp(27.5rem, 70vh, 95vh);
    }

    .screen-container .logo{
        margin-top: 2rem;
    }

    .screen-container .logo p{
        font-size: clamp(2rem, 3rem, 3.5em);
    }

    .screen p,
    .bar,
    .item-option,
    .screen textarea{
        font-size: clamp(0.9rem, 6vw, 8.6rem);
    }

    .main-screen .state-bar img{
        height: 4em;
    }

    .main-content #time{
        font-size: clamp(4em, 9em, 6.5em);
    }
}

@media (max-width: 540px) {
    .screen-container{
        width: 100%;
        border-radius: 0;
        padding: 0.5rem 0.2rem;
    }

    .screen-container .screen{
        height: clamp(27.5rem, 57vh, 95vh);
        width: auto;
    }

    .screen-container .logo{
        font-size: clamp(1rem, 2rem, 2.5em);
    }

    .screen-container .logo p{
        font-size: clamp(1rem, 2rem, 2.5em);
    }

    .screen p,
    .bar,
    .item-option,
    .screen textarea{
        font-size: clamp(0.9rem, 8vw, 8.6rem);
    }

    .main-screen .state-bar img{
        height: 2.5em;
    }

    .main-content #time{
        font-size: clamp(4em, 9em, 4.5em);
    }
}

@media (max-height:430px) and (orientation: landscape){
    .screen p,
    .bar,
    .item-option,
    .screen textarea{
        font-size: clamp(1.5rem, 2vw, 8.6rem);
    }
}

@media (max-height:430px){
    .screen-container{
        border-radius: 0;
        padding: 0.5rem 0.2rem;
    }

    .screen-container .screen{
        height: clamp(22.6rem, 57vh, 95vh);
    }

    .screen-container .logo{
        display: none;
    }

    .screen p,
    .bar,
    .item-option,
    .screen textarea{
        font-size: clamp(1.5rem, 2vw, 8.6rem);
    }

    .main-screen .state-bar img{
        height: 1.9em;
    }

    .main-content #time{
        font-size: clamp(1em, 8em, 3.5em);
    }
}