/*
 Copyright (C) 2018 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/>.
*/  

:root {
    --bullWidth :calc(100vw - 15px);
    --bullHeight :calc(100vw - 15px);
}

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

#joined {
    display:none;
}

#game {
    display:flex;
    flex-wrap: wrap;
}

#newGame {
    position: absolute;
    top: calc(100vh - 20px);
    width: 100%;
    text-align: center;
}

.bull {
    background-color:#363636;
    width:  var(--bullWidth);
    height: var(--bullHeight);
    max-width: 600px;
    max-height: 600px;
    border: solid 1px #000;
    background-repeat: no-repeat;
    background-size:contain;
    margin-left:10px;
    margin-top:10px;
    border-radius: 15px;
    background-position: bottom;
    padding-top: 15px;
    position: relative;
}

.bull .bullName {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translate(-50%,0);
    font-size: 20px;
    font-weight: bold;
    background: #000;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    font-family: sans-serif;
    white-space: nowrap;
    z-index: 2;
}

#interface {
    width:  var(--bullWidth);
    height: var(--bullHeight);
    margin:10px;
    border-radius: 15px;
    background: #363636;
    padding-top: 15px;
    position: relative;    
    max-width: 600px;
    max-height: 600px;
}

#interface #traitBox {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr;
    grid-gap: 6px 12px;
    width: calc(100% - 20px);
    text-align: center;
    margin: 0px auto;
}

#interface #traitBox .traitValue, #interface #traitBox .traitName {
    max-height: 25px;
    cursor: default;
    font-family: sans-serif;
    line-height: 30px;
}

#interface #traitBox .traitName {
    text-align: right;
    color: #cccccc;
}

#interface #traitBox .traitValue {
    background: #f0f0f0;
    border-radius: 10px;
    height: 20px;
    font-size: 13px;
    margin-top: 5px;
    background: #f0f0f0;
    border-radius: 10px;
    height: 20px;
    line-height: 19px;
    font-size: 13px;
    margin-top: 5px;
    box-sizing: border-box;
    color: #460f0f;
    box-shadow: 0 0 0px 1px #a52626;
    background-color: #b18b8b;
    transition: all 1s ease;
}

#interface #traitBox .traitValue.traitStatus_goal {
    box-shadow: 0 0 6px 2px #72A526;
    background-color: #72aa00;
    background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
    background: linear-gradient(to bottom, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
    color: #fff !important;
    text-shadow: 1px 1px 2px #000;
}

#interface #traitBox .traitValue.traitStatus_current {
    box-shadow: 0 0 0 1px #fb733c;
    background-color: #fff3ee;
    background: -webkit-linear-gradient(top, rgba(255,243,238,1) 0%,rgba(255,153,58,1) 50%,rgba(255,124,0,1) 53%,rgba(251,115,60,1) 100%); 
    background: linear-gradient(to bottom, rgba(255,243,238,1) 0%,rgba(255,153,58,1) 50%,rgba(255,124,0,1) 53%,rgba(251,115,60,1) 100%);   
    color:#67311b;
}

#interface #traitBox .traitValue.traitStatus_target {
    box-shadow: 0 0 0px 1px #72A526;
    background-color: #b3c56c;
    color:#354c12;
}

#gameTitle {
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    left: 0px;
    font-size: 20px;
    font-weight: bold;
    background: rgba(255, 73, 0, 0.75);
    color: #fff;
    padding: 5px;
    font-family: sans-serif;
    white-space: nowrap;
    text-align: center;
    width: 100%;
    z-index: 4;
}

#gameTitle #bullCode {
    float: left;
}

#gameTitle #help {
    position: absolute;
    top: 4px;
    right: 3px;
    cursor: pointer;
    border: solid 1px #fff;
    padding: 0 5px;
    border-radius: 100%;
    background: #fff;
    color: #fb733c;
    outline:none;
}

#gameTitle #help.helpOpen {
    color: #fff;
    background: transparent;
}

#interface #codeSender {
    display: flex;
    justify-content: space-evenly;
    margin-top: 20px;
    font-size: 20px;
    font-family: sans-serif;
    position:relative;
}

#interface #codeSender input#codeInput {
    width: 60px;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    outline: none;
    text-align: center;
    font-size: 25px;
    height: 30px;
}

#interface #codeSender input#codeInput:focus, #interface #codeSender input#codeInput:active {
    box-shadow: 0 0 0 2px rgba(255, 73, 0, 1);
}

#interface #codeSender label {
    line-height: 38px;
    color: #f0f0f0;
}

#interface #codeSender button#codeButton {
    background-color: rgb(241, 91, 0);
    border-bottom: 5px solid rgb(158, 60, 0);
    text-shadow: 0px -2px rgb(158, 60, 0);
    padding: 6px 25px;
    border-radius: 10px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    outline: none;
    cursor: pointer;
    background-position: -152px -85px, 0 0;
    background-size: 250% 250%, 100% 100%;
    transition: background-position 0s ease;
    background-image: -webkit-linear-gradient( top left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.2) 37%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.0) 50% ), -webkit-linear-gradient(rgb(241, 91, 0), rgb(241, 91, 0) );
}

#interface #codeSender  button#codeButton:hover, #interface #codeSender  button#codeButton:active, #interface #codeSender  button#codeButton:focus {
    background-position: 0 0, 0 0;
    transition-duration: 0.5s;
}

#interface #codeSender  button#codeButton:active {
    border-bottom: 1px solid;    
}

#game #gamerules {
    width: calc(100vw - 40px);
    position: absolute;
    left: 20px;
    top: 50px;
    background-color: rgba(240, 240, 240, 0.95);
    padding: 10px;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 3;
    max-width: 1195px;
    pointer-events: none;
    display:none;
}

#gameJoiner {
    background-color:#363636;
    width:calc(100vw - 20px);
    box-sizing: border-box;
    margin: 10px auto;
    max-width: 600px;
    max-height: 600px;
    border: solid 1px #000;
    border-radius: 15px;
    position: relative;
    text-align: center;
    padding: 50px 0px;
}

#gameJoiner input, #gamepinRead {
    border: .125rem solid #ccc;
    height: 50px;
    line-height: 50px;
    color: #333;
    text-align: center;
    width: 93.34%;
    max-width: 300px;
    margin: 10px auto;
    font-size: 20px;   
    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;
}

#gameJoiner button {
    outline: none;
    margin: 10px auto;
    border: 1px solid #c5c5c5;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 14px;
    min-width: 100px;
    height: 50px;
    font-weight: 700;
    font-size: 20px;
    border-radius: 2px;
    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%;
    max-width: 300px;
    box-sizing:border-box;
}

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

.joinerTitle {
    text-align: center;
    max-width: 600px;
    margin: 10px auto;
    filter: drop-shadow(0vw 1vw 0.5vw #000) drop-shadow(0 0 1vw white);
}

.joinerTitle img {
    max-width: 600px;
    width: calc(100vw - 20px);
}

#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(-0.5vw, 0);}
    20%, 80% { transform: translate(1vw, 0);}
    30%, 50%, 70% { transform: translate(-2vw, 0);}
    40%, 60% { transform: translate(2vw, 0);}
}

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

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

#newGame {
    color:#363636;
    cursor:pointer;
}

#newGame:hover {
    text-decoration: underline;
}


#mainScreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: fixed;
    width: 100%;
    top: 0px;
    font-size:20px;
}

#mainScreen #gamecode {
    text-align: center;
    color: #fff;
    background: #303030;
    border-radius: 25px;
    padding: 30px;
    font-size: 75px;
    margin: 10px auto;
    max-width: 100vw;
    position: relative;
}

#mainScreen #rules {
    text-align:center;
}

#mainScreen #gamecode span {
    font-size: 35px;
}

#mainScreen #gamecode #urlTag {
    position: absolute;
    top: 0;
    left: 50%;
    font-size: 25px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 10px;
    color: #ff7200;
    transform: translate(-50%,-50%);
    text-shadow: 1px 1px 1px #000;
}

@media only screen and (max-width: 600px) {
    #mainScreen #gamecode {
        font-size: 18vw;
    }
}

#mainScreen #extraControls {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
}

#mainScreen #extraInfo {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 10px;
    display: none;
    background: #303030;
    color: #f0f0f0;
    margin: 10px;
    border-radius: 5px;
}

#mainScreen #playerCount {
    font-size: 4vw;
    text-align: center;
}

#mainScreen .controlButton {
    display: none;
    float: right;
    outline: none;
    margin: 0px auto 10px;
    border: 1px solid #ffffff;
    vertical-align: middle;
    cursor: pointer;
    padding: 4px 14px;
    min-width: 100px;
    height: 50px;
    font-weight: 700;
    font-size: 20px;
    border-radius: 2px;
    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;
    width: 93.34%;
    max-width: 300px;
    box-sizing: border-box;
}

#mainScreen .controlButton:hover {
    border: .125rem solid #000;
}

#mainScreen .controlButton:focus, #mainScreen .controlButton:active {
    border: .125rem solid #FC752F;
}

#mainScreen #playStats {
    display:none;
    overflow-y: auto;
    height: calc(100vh - 241px);
}

#mainScreen #playStats::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

#mainScreen #playStats::-webkit-scrollbar-thumb {
    border-radius: 10px 0px 0px 10px;
    background-color: #303030;
}

#mainScreen #playStats::-webkit-scrollbar-track {
}

#playerList {
    width: calc(100vw - 40px);
    margin: 15px;
    margin-top: 420px;
    height: calc(100vh - 440px);
    overflow: hidden;
}

#playerList .playerJoined {
    margin: 10px;
    padding: 10px 40px;
    display: inline-block;
    line-height: 30px;
    box-sizing: border-box;
    border-radius: 20px;
    font-weight: bold;
    color: #000000;
    background: #FF7200;
    background: -webkit-linear-gradient(top, rgba(255,243,238,1) 0%,rgba(255,153,58,1) 50%,rgba(255,124,0,1) 53%,rgba(251,115,60,1) 100%);
    background: linear-gradient(to bottom, rgba(255,243,238,1) 0%,rgba(255,153,58,1) 50%,rgba(255,124,0,1) 53%,rgba(251,115,60,1) 100%);
    box-shadow: 0 0 0 1px #bf5d00, 1px 2px 2px #000000a3;
    text-shadow: 0 0 1px #fff;
    opacity: 0;
    animation: showup 1s both;
    font-size: 35px;
}

@keyframes showup {
    10%, 90% { opacity: 0.2}
    20%, 80% { opacity: 0.4}
    30%, 50%, 70% { opacity: 0.6}
    40%, 60% { opacity: 0.8}
    100% { opacity: 1}
}

#interface #codeSender #poller {
    position: absolute;
    background: rgba(54, 54, 54, 0.8);
    width: 100%;
    font-size: 16px;
    font-family: sans-serif;
    top:-10px;
    height: calc(100% + 20px);
    text-align: center;
    color:#fff;
    font-weight: 700;
    line-height: 20px;
    padding:10px;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, #363636, #f36d0a, #363636);
    background-position-x: 0;
    background-repeat-x: no-repeat;
    background-size: 0%;
    animation: loadingBar 0.8s;
}

@keyframes loadingBar {
    0% { background-size: 0%;}
    100% { background-size: 100%;}
}

#interface #codeSender #cancelButton {
    position: absolute;
    bottom: -26px;
    left: 50%;
    transform: translate(-50%,0);
    font-weight: bold;
    padding: 5px;
    border-radius: 5px;
    font-family: sans-serif;
    z-index: 2;
}

#bull .breedResult {
    display: grid;
    grid-template-columns: 1fr 2fr 0.5fr 2fr;
    grid-gap: 6px 12px;
    width: calc(100% - 60px);
    text-align: center;
    margin: 0px auto;
    background: rgba(213, 212, 212, 0.9);
    padding: 20px;
    border-radius: 10px;
    top: 50%;
    position: absolute;
    left: 50%;
    transform: translate(-50%,-50%);
    border: solid 1px #000;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

#bull .breedResult .close {
    position: absolute;
    top: -15px;
    right: -15px;
    padding: 10px 15px;
    background-color: #000;
    border-radius: 100%;
    color: #fff;
    cursor: pointer;
}

#bull .breedResult .breedFrom.breedCell.breedChanged, #bull .breedTo.breedCell.breedChanged {
    font-weight: bold;
}

#bull .breedResult .breedFrom.breedCell.breedMutation, #bull .breedTo.breedCell.breedMutation {    
    text-shadow: 1px 1px 1px #b4ff00;
    color: #7c00ff;
}

#playStats .stat {
    height: 50px;
    line-height: 50px;
    font-size: 25px;
}

#playStats  .statImg {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#playStats .playerRanking {
    display: grid;
    grid-template-columns: 100px 1fr 100px 100px 50px;
    grid-gap: 0px 12px;
    width: 600px;
    margin: 0 auto;
}

#playStats .playerRanking .header {
    font-weight: bold;
    color: #F0852F;
    text-shadow: 0px 0px 1px #fff;
}

#playStats .playerRanking .stat.rank0 {
    font-size: 32px;
    font-weight: 900;
}
#playStats .playerRanking .stat.rank1 {
    font-size: 30px;
    font-weight: 700;
}

#playStats .playerRanking .stat.rank2 {
    font-size: 28px;
    font-weight: 600;
}

#playStats .gameTimer {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 10px;
    background: #303030;
    color: #f0f0f0;
    margin: 10px;
    border-radius: 5px;
    text-align: center;    
    font-size: 24px;
}
#playStats .gameTimer div {
    font-family: clock;
    font-size: 50px;
    color:#fff;
    text-shadow:0 0 10px #fff;
}

#playStats .gameTimer.gameTimer6 div, #playStats .gameTimer.gameTimer7 div, #playStats .gameTimer.gameTimer8 div, #playStats .gameTimer.gameTimer9 div, #playStats .gameTimer.gameTimer10 div {    
    color: #fff200;
    text-shadow: 0 0 10px #fff200;
}

#playStats .gameTimer.gameTimer4 div, #playStats .gameTimer.gameTimer5 div {    
    color: #ff6a00;
    text-shadow:0 0 10px #ff6a00;
}

#playStats .gameTimer.gameTimer1 div, #playStats .gameTimer.gameTimer2 div, #playStats .gameTimer.gameTimer3 div {
    color: #d00;
    text-shadow:0 0 10px #f00;
}

#playStats .mutationCount, #playStats .totalBred, #playStats .totalTraits, #playStats .totalPlayers {
    position: absolute;
    top: 80px;
    right: 0px;
    padding: 10px;
    background: #303030;
    color: #f0f0f0;
    margin: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    min-width: 150px;
}

#playStats .mutationCount  {
    top:200px;
}

#playStats .totalBred {
    top:320px;
}

#playStats .totalTraits {
    top:440px;
}

.statRank {
    position:relative;
}

.gameover #playStats .gameTimer div {
    color: #f00;
    text-shadow:0 0 10px #f00;
}

.gameover .joinerTitle:after {
    content: "OVER";
    position: absolute;
    top: 67px;
    right: 15px;
    color: #f00;
    font-weight: bold;
    font-size: 75px;
    text-shadow: 0 0 1px #000;
    transform: rotate(-17deg);
    background: #f0f0f0;
    padding: 0px 5px;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 1px #000;
}

.gameover .statRank.rank0:after {
    content: "WINNER";
    left: -35px;
    position: absolute;
    color: #f00;
    font-weight: bold;
    font-size: 25px;
    text-shadow: 0 0 1px #000;
    transform: rotate(7deg);
    background: #f0f0f0;
    padding: 0px 5px;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 1px #000;
    top: 2px;
    line-height: 36px;

}

.gameover .statRank.rank1:after {
    content: "RUNNER UP";
    left: -75px;
    position: absolute;
    color: #f00;
    font-weight: bold;
    font-size: 25px;
    text-shadow: 0 0 1px #000;
    transform: rotate(1deg);
    background: #f0f0f0;
    padding: 0px 5px;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 1px #000;
    top: -2px;
    white-space: nowrap;
    line-height: 36px;
}

.gameover .statRank.rank2:after {
    content: "CHALLENGER";
    left: -92px;
    position: absolute;
    color: #f00;
    font-weight: bold;
    font-size: 25px;
    text-shadow: 0 0 1px #000;
    transform: rotate(9deg);
    background: #f0f0f0;
    padding: 0px 5px;
    border-radius: 5px;
    box-shadow: 0.5px 0.5px 1px #000;
    top: 2px;
    line-height: 36px;

}