/*
 Copyright (C) 2019 Jan-Dirk van Dingenen
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/  

@import url('https://fonts.googleapis.com/css?family=Alfa+Slab+One');

html {
    --scale :calc(10vw);
}

body {
    margin:0;
    background: #f0f0f0;
    font-family: sans-serif;
}

#joined {
    display:none;
}

#gameJoiner {
    background-color:#363636;
    width:calc(var(--scale) * 9);
    box-sizing: border-box;
    margin: calc(var(--scale) * 0.3) auto;
    max-width: 600px;
    max-height: 600px;
    border: solid 1px #000;
    border-radius: calc(var(--scale) * 0.3);
    position: relative;
    text-align: center;
    padding: calc(var(--scale) * 0.3) 0px;
}

#gameJoiner input, #gamepinRead {
    border: .125rem solid #ccc;
    height: calc(var(--scale) * 1.5);
    line-height: calc(var(--scale) * 1.5);
    color: #333;
    text-align: center;
    width: 93.34%;
    margin: calc(var(--scale) * 0.3) auto;
    font-size: calc(var(--scale) * 0.6);   
    outline:#000;
    box-sizing:border-box;
}

#gamepinRead {
    display:none;
    color:#fff;
    font-family: sans-serif;
    cursor:pointer;
}

#gameJoiner input::placeholder {
    color: #D0D0D0;
    opacity: 1;
    font-weight: 700;
}

#gameJoiner input:focus {
    border: .125rem solid #ff7000;
}

#gameJoiner input:focus::placeholder {
    opacity: 0;
}

button {
    outline: none;
    margin: calc(var(--scale) * 0.3) auto;
    border: 1px solid #c5c5c5;
    vertical-align: middle;
    cursor: pointer;
    padding: calc(var(--scale) * 0.1) calc(var(--scale) * 0.4);
    min-width: 100px;
    height: calc(var(--scale) * 1.5);
    font-weight: 700;
    font-size: calc(var(--scale) * 0.6);  ;
    border-radius: calc(var(--scale) * 0.1);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(167, 167, 167, 0.25);
    background-color: #151515;
    background-image: linear-gradient(to bottom,#333,#151515);
    background-repeat: repeat-x;
    font-family: sans-serif;
    display: block;
    width: 93.34%;
    box-sizing:border-box;
}

button:focus, button:active {
    border: .125rem solid #fff;
}

.joinerTitle {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    width: calc(var(--scale) * 9);
    height: 50vh;
    pointer-events: none;
    animation: shadow 4s linear infinite;
}

.joinerText {
    font-size: calc(var(--scale) * 1.8);
    position: absolute;
    width: 100%;
    text-align: center;
    font-family: 'Alfa Slab One', cursive;
    top:0px;
    animation: mover 11s linear infinite;
}

.joinerTitle img {    
    animation: sizer 14s linear infinite;
}

#gameJoiner input.error {
    color: #f00;
    box-shadow: 0 0 1px 2px #f00;
    animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate(0,0);
}

@keyframes shake {
    10%, 90% { transform: translate(calc(var(--scale) * -0.1), 0);}
    20%, 80% { transform: translate(calc(var(--scale) * 0.05), 0);}
    30%, 50%, 70% { transform: translate(calc(var(--scale) * -0.1), 0);}
    40%, 60% { transform: translate(calc(var(--scale) * 0.1), 0);}
}

@keyframes sizer {
    0%,100% { width:90%;}
    50%     { width:100%;}
}

@keyframes mover {
    10%,90% { top:0; opacity: 1;}
    50%     { top:80%; opacity:0.5; color:#440b44;}
    55%     { top:80%; opacity:0.3;}
}

@keyframes shadow {
    0%,100% { 
        filter: drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));                
    }
    12% { 
        filter: drop-shadow(calc(var(--scale) * -0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * 0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * 0.7) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));
    }
    25% { 
        filter: drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));
    }
    37% { 
        filter: drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * 0.7) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * -0.7) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * 0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));
    }
    50% { 
        filter: drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));                
    }
    62% { 
        filter: drop-shadow(calc(var(--scale) * 0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * -0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * -0.7) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));
    }
    75% { 
        filter: drop-shadow(calc(var(--scale) * 0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * 0.5) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * -0.5) calc(var(--scale) * -0.5) calc(var(--scale) * 0.1) rgba(0,0,255,0.75));
    }
    87% { 
        filter: drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * -0.7) calc(var(--scale) * 0.1) rgba(255,0,0,0.75))
                drop-shadow(calc(var(--scale) * 0) calc(var(--scale) * 0.7) calc(var(--scale) * 0.1) rgba(0,255,0,0.75))
                drop-shadow(calc(var(--scale) * -0.7) calc(var(--scale) * 0) calc(var(--scale) * 0.1) rgba(0,0,255,0.75))
                ;
    }
}

#gameJoiner .followupField {
    display:none;
    height:0px;
}

#gameJoiner .nameField {
    transition:all 1s;
}

#gameTitle {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: calc(var(--scale) * 3);
    background: radial-gradient(ellipse at center, rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%);
    color: #ff6000;
    text-align: center;
    padding: calc(var(--scale) * 0.3) 0 calc(var(--scale) * 0.5) 0;
    border-radius: 0 0 100% 100%;
    font-size: calc(var(--scale) * 1);
    font-family: 'Alfa Slab One', cursive;
    text-shadow: 1px 1px 0px #fff;
    box-sizing: border-box;
}

#gameTitle img {
    width: calc(var(--scale) * 2);
    vertical-align: middle;
    filter: drop-shadow(0px 1px 0 #ff6000) drop-shadow(0px 1px 5px #fff);
}

#gameTitle #littleGameCode {
    position: absolute;
    color: #f5f5f5;
    font-size: calc(var(--scale) * 0.3);
    top: calc(var(--scale) * 0.05);
    right: calc(var(--scale) * 0.1);
    font-family: sans-serif;
    text-shadow: 0 0 0 #000;
}

#gameTitle #littleName {
    position: absolute;
    color: #f5f5f5;
    font-size: calc(var(--scale) * 0.3);
    top: calc(var(--scale) * 0.05);
    left: calc(var(--scale) * 0.1);
    font-family: sans-serif;
    text-shadow: 0 0 0 #000;
}

#yourAnswer {
    display:none;
    width: 100%;
    margin-top: calc(var(--scale) * 3.2);
}

#theirAnswers {
    display:none;
    width: 100%;
    margin-top: calc(var(--scale) * 3.2);
}

.explanation {
    padding: calc(var(--scale) * 0.4) calc(var(--scale) * 0.2);
    text-align: center;
    width: 100vw;
    box-sizing: border-box;
}

.buttonContainer {
    text-align: center;
    margin-top: calc(var(--scale) * 1);
}

#myAnswer {
    border: .125rem solid #ccc;
    height: calc(var(--scale) * 1.5);
    line-height: calc(var(--scale) * 1.5);
    color: #333;
    text-align: center;
    width: 90vw;
    margin: calc(var(--scale) * 0.3) 5vw calc(var(--scale) * 0.1) 5vw;
    font-size: calc(var(--scale) * 0.6);
    outline: #000;
    box-sizing: border-box;
}

#myAnswerInputCount {
    text-align: center;
    font-size: calc(var(--scale) * 0.3);
}

#sendMyAnwer {
    width:90vw;
}

ol#answersList {
    padding-left: calc(var(--scale) * 0.7);
}

li.answer {
    background-color: #ff6000;
    margin: calc(var(--scale) * 0.7) 0;
    width: 80%;
    padding: calc(var(--scale) * 0.25);
    padding-left: calc(var(--scale) * 0.5);
    border-radius: calc(var(--scale) * 0.25) 0;
    font-weight: 700;
    font-size: calc(var(--scale) * 0.5);
    overflow-wrap: break-word;
    text-transform: capitalize;
}

li.answer a {
    display: block;
    cursor: pointer;
}

#toasts {
    position: fixed;
    top:0px;
    left:0px;
    width:100vw;
    display:flex;
    flex-direction: column;
    align-items:center;
    z-index:10;
}

.toast {
    margin-top: calc(var(--scale) * 0.2);
    width: 75vw;
    padding: 5vw;
    border-radius: calc(var(--scale) * 0.2);
    text-align: center;
}

.toastError_true {
    background-color: #a00;
    color: #ff9494;
    font-weight: 700;
}

.toastError_false {
    background-color: #0a0;
    color: #c4ffbf;
}

div#waiting {
    width: 100%;
    text-align: center;
    padding-right: calc(var(--scale) * 0.7);
    box-sizing: border-box;
    padding-top: calc(var(--scale) * 2);
    font-weight: 700;
    animation: shadow 2s linear infinite;
}