/* VAR */
:root{
    --link_color: rgb(37, 37, 37);
}


/* general */
html, body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    outline: 0;
    overflow: hidden;
    color:rgb(0, 48, 80);
}
img{
    display: block;
}
*:focus {
    outline: none;
}
a{
    color: var(--link_color);
    text-decoration: none;
}
a:hover, a:focus, input[type='submit']:hover{
    cursor: pointer;
}


/* body */
.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #74dfff, #7d7bfe,#74dfff, #7d7bfe,#74dfff, #7d7bfe,#74dfff, #7d7bfe);
    background-size: 400% 400%;
    animation: gradientAnimation 30s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* playground */
.container {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    flex-direction: column;
}

#playground{
    background-color: rgb(209, 209, 209);
    border-radius: 6px;
    overflow: hidden;
    padding: 1em;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    z-index:400;
}

.field{
    background-color: rgb(255, 255, 255);
    margin: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    position: relative;
    transition: 0.2s;
    cursor: pointer;
}
.field:hover{
    background-color: rgb(233, 233, 233);
}

.field_a{
    color: rgb(255, 0, 0);
}

.field_b{
    color: rgb(0, 128, 0);
}

.field_win{
    background: linear-gradient(45deg, #EECE1C, #d67906);
    background-size: 400% 400%;
    animation: win 0.9s ease infinite;
}
@keyframes win {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.field_block, .field_block:hover{
    cursor:default;
    background-color: rgb(255, 255, 255);
}

.field img{
    height:80%;
    position: absolute;
}


/* textline */
.textline{
    height:5vh;
    display:absolute;
    margin:2vh;
    padding:1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size:3em;
    font-weight: bold;
    text-align: center;
    float: left;
    z-index:200;
}
.textline img{
    height:0.8em;
    display:inline-block;
}

/* head */
#head{
    text-decoration: none;
}

/* player */
#player{
    text-decoration: none;
}


/* nav */
#nav{
    z-index:600;
    position: absolute;
    top:1em;
    right:1em;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1em;
}
.menupoint{
    background-color: #74dfff;
    border: 2px solid #7d7bfe;
    border-radius: 50%;
    height:3em;
    width:3em;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.35s;
    position: relative;
    cursor: pointer;
}
.menupoint:focus{
    cursor:pointer;
    background-color: #7d7bfe;
    border: 2px solid #74dfff;
}
.menupoint img{
    height:2em;
}
#anz{
    color:white;
    background-color: black;
    border-radius: 50%;
    height:1.5em;
    width:1.5em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom:-0.4em;
    right:-0.4em;
}
#server{
    font-weight: bold;
}


/* refresh */
#refresh{
    background-color: #00000093;
    color:white;
    position: absolute;
    height:100%;
    width:100%;
    z-index:500;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 3em;
    display: none;
    cursor: pointer;
}

#refresh p:hover{
    text-decoration: underline;
}

.p{
    display: flex;
    justify-content: center;
    align-items: center;
    gap:0.5em;
}

#player{
    display: flex;
    justify-content: center;
    align-items: center;
}

#minus{
    white-space: nowrap;
}

#player .p{
    border-radius: 0.5em;
    padding:0.2em;
    border:1px solid rgba(0, 0, 0, 0);
}

#player .selected{
    border:1px solid rgba(128, 128, 128, 0.336);
    background-color: rgba(94, 94, 94, 0.336);
}

#player .name{
    font-size: 0.4em;
    color:rgb(54, 54, 54);
}





/* ////////////////////////////// Multiplayer ////////////////////////////// */

#form{
text-align: center;
}

.input{
    background-color: aliceblue;
    border:2px solid #acb4ff;
    font-size:1.4em;
    width:90%;
    border-radius: 0.2em;
    margin:0.5em;
    padding:0.2em;
    box-sizing:border-box;
    text-align: center;
    cursor:pointer;
    transition: 0.3s;
}
.input:hover, .input:focus{
    box-shadow: 0 0 5px 5px #74dfff;
    border:2px solid #7d7bfe;
}
.input[type=text]:focus::placeholder{
    color: aliceblue;
}

.server_id_input:focus {
    user-select: text; /* Markiert den gesamten Text beim Fokussieren */
}




/* Media */
@media (min-width: 1000px){/*DESKTOP---------------------------------*/
	.phone{
		display:none;
	}
    #playground{
        width: 65vmin; /* vmin: 1% der kleineren Bildschirmdimension (Breite oder Höhe) */
        height: 65vmin;
    }
    .menupoint:hover{
        cursor:pointer;
        background-color: #7d7bfe;
        border: 2px solid #74dfff;
    }
}
@media (max-width: 1000px){/*PHONE---------------------------------*/
	.desktop{
		display:none;
	}
    #playground{
        width: 75vmin; /* vmin: 1% der kleineren Bildschirmdimension (Breite oder Höhe) */
        height: 75vmin;
    }
}

@media (max-height: 500px){/*PHONE---------------------------------*/
	#head{
		display:none;
	}
    #player{
        position: absolute;
        justify-content:space-between;
        width: 100%;
    }
    #minus{
        display: none;
    }
    .p{
        margin: 0.5em;
    }
}