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

body{
    background:#000;
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    font-family:Arial, Helvetica, sans-serif;
}


/* ================================
   WRAPPER
================================ */

.urna-wrapper{
    width:min(95vw,1400px);
}


/* ================================
   URNA BASE
================================ */

.urna{
    position:relative;
    width:100%;
    aspect-ratio:3750/2109;
}

.urna-img{
    width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}


/* ================================
   DISPLAY (TELA)
================================ */

.display{
    position:absolute;
    left:6.2%;
    top:32%;
    width:56%;
    height:47%;

    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;

    z-index:10;

    /* NÃO BLOQUEIA CLIQUES DO TECLADO */
    pointer-events:none;
}

.boot-screen{
    pointer-events:none;
}


/* ================================
   CAMADA DO TECLADO
================================ */

.keys{
    position:absolute;
    inset:0;
    z-index:50;
}


/* ================================
   TECLAS INVISÍVEIS
================================ */

.key{
    position:absolute;
    cursor:pointer;
    z-index:60;
}

/* efeito físico */
.key:active{
    transform:translateY(3px);
}


/* ================================
   TECLAS NUMÉRICAS (CALIBRADO)
================================ */

/* coluna esquerda */
[data-key="1"]{ left:69.6%; top:33%; width:6%; height:7%; }
[data-key="4"]{ left:69.6%; top:43%; width:6%; height:7%; }
[data-key="7"]{ left:69.6%; top:53%; width:6%; height:7%; }

/* coluna central */
[data-key="2"]{ left:78.8%; top:33%; width:6%; height:7%; }
[data-key="5"]{ left:78.8%; top:43%; width:6%; height:7%; }
[data-key="8"]{ left:78.8%; top:53%; width:6%; height:7%; }

/* coluna direita */
[data-key="3"]{ left:87.7%; top:33%; width:6%; height:7%; }
[data-key="6"]{ left:87.7%; top:43%; width:6%; height:7%; }
[data-key="9"]{ left:87.7%; top:53%; width:6%; height:7%; }

/* zero */
.key-zero{
    left:78.8%;
    top:63%;
    width:6%;
    height:7%;
}


/* ================================
   BOTÕES FUNCIONAIS
================================ */

.branco{
    left:72%;
    top:75%;
    width:7%;
    height:8%;
}

.corrige{
    left:81%;
    top:75%;
    width:8%;
    height:8%;
}

.confirma{
    left:90%;
    top:75%;
    width:8%;
    height:8%;
}