@import url(baza.css);

html {
    background: var(--colorCrust);
    overflow: hidden !important;
}

header {
    padding: 1rem 1.5rem;
    height: 1.5rem;
    border-bottom: solid 3px var(--colorBase);
}

a {
    color: var(--colorText) !important;
    text-decoration-color: transparent !important;
}

a:hover {
    text-decoration-color: var(--colorText) !important;
}


/* Tytułowe */
#ekrantytulowy {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 2rem;
    width: 100vw;
    height: calc(100vh - 2rem);
    text-align: center;

    background: linear-gradient(180deg,
        transparent 0%,
        var(--colorSurface0) 20%,
        var(--colorSurface1) 30%,
        var(--colorSurface0) 90%,
        transparent 100%
    );
}

#ekrantytulowy div h1 {
    font-size: 96pt !important;
    margin-top: 13rem;
}

#ekrantytulowy div button {
    position: relative;
    color: var(--colorText);
    text-shadow: 1px 1px 2px var(--colorBase), 0 0 1px var(--colorBase), 0 0 0.2px var(--colorBase);
    box-shadow: 4px 10px 10px var(--colorBase);
    background-color: var(--colorPeach);
    background: linear-gradient(180deg,
        var(--colorPeach) 0%,
        var(--colorYellow) 35%,
        var(--colorPeach) 65%,
        var(--colorPeach) 100%
    );
    border-color: var(--colorText);
    padding: 1rem;
    border-width: .5rem;
    font-size: 56pt;
    margin-bottom: 10rem;

    animation: ZacznijTracic 5s ease-in-out infinite;
}

@keyframes ZacznijTracic {
    0% {
        top: 0;
    }
    40% {
        top: -2rem;
        scale: 1.01;
    }
    60% {
        top: -2rem;
        scale: 1.01;
    }
    100% {
        top: 0;
    }
}



/* Formsy */
fieldset {
    border: none;
}

legend {
    font-size: 1rem;
    font-weight: bold;
}

input[type="submit"] {
    text-align: center;
    font-size: 1.5rem;
    padding: .3rem;
    margin: auto;
    display: block;
}

input[type="number"] {
    width: 100%;
    font-size: 22pt;
}


/* Animacje */
/* AI WYGENEROWAŁO TE KLASY I KEYFRAMEY */
.pokaz, .dialog-pokaz .okno {
    animation: Pokaz 0.35s ease-in-out forwards;
}

.ukryj, .dialog-ukryj .okno {
    animation: Ukryj 0.35s ease-in-out forwards;
    display: none !important;
}

.dialog-pokaz {
    animation: PokazDialog 0.35s ease-in-out forwards;
}

.dialog-ukryj {
    animation: UkryjDialog 0.35s ease-in-out forwards;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.ukryte, .ukryte * {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

@keyframes Pokaz {
    0% {
        opacity: 0;
        transform: translateY(2rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes Ukryj {
    0% {
        opacity: 1;
        transform: translateY(0);
        display: initial;
    }
    100% {
        opacity: 0;
        transform: translateY(2rem);
        display: initial;
    }
}

@keyframes PokazDialog {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes UkryjDialog {
    0% {
        opacity: 1;
        display: initial;
    }
    100% {
        opacity: 0;
        display: initial;
    }
}


/* Dialog */
.dialog {
    position: fixed;
    top: 3rem;
    left: 0;
    z-index: 100002;
    background-color: rgba(30, 30, 46, 0.9);
    width: 100vw;
    height: calc(100vh - 3rem);
    display: flex;
}

.okno {
    padding: .5rem;
    padding-bottom: 1rem;
    border: .4rem solid var(--colorSurface1);
    border-right-color: var(--colorSurface0);
    border-bottom-color: var(--colorSurface0);
    background: var(--colorMantle);
    margin: auto;
    width: 40rem;
}

.okno h2 {
    margin-top: .3rem;
    margin-left: .3rem;
}



/* Gra */
#gra {
    overflow-y: auto;
    display: flex;
    max-height: calc(100vh - 4rem);
}

#gra table {
    margin: auto;
    border-radius: .3rem;
    background: var(--colorBase);
}

#gra aside {
    border-radius: .3rem;
    background: var(--colorBase);
    position: fixed;
    margin: 1rem;
    padding: 1rem;
    width: 15rem;
}

#gra aside div {
    font-size: 1.25rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#gra h2 {
    text-align: center;
}

#gra table {
    margin: auto;
}

#gra td {
    cursor: pointer;
}

#gra button {
    width: 3.5rem;
    height: 3.5rem;
}

#gra button:hover {
    scale: 1.1;
    box-shadow: 0px 7px 10px var(--colorSubtext0);
}

.bledna {
    background: var(--colorRed);
    color: var(--colorSurface2);
}

.poprawna {
    background: var(--colorGreen);
    color: var(--colorSurface2);
}

.bledna:hover {
    scale: 1 !important;
    box-shadow: 0px 0px 0px #000 !important;
    background: var(--colorRed) !important;
    color: var(--colorSurface2) !important;
    cursor: not-allowed;
}