/*
    GLOBAL
*/

html, body, main {
    width: 100%;
    margin: 0;

    background-color: #000000;
    font-family: 'Jura';
    color: whitesmoke;
    font-size: 16pt;

    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;

    /* this is the sweet nectar to keep it full page*/
    height: 100%;
    max-height: 100%;
    min-height: 100%;
    /*padding: 0 20%;*/
}

html {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

h1 {
    font-size: 2em;
    margin: 0;
}

h2 {
    font-size: 1.5em;
    margin: 0;
}

figure {
    margin: 0;
}

main {
    padding: 0 2em;
    display: grid;
    grid-template-columns: repeat(10, minmax(min-content, 10%));
    grid-template-rows: repeat(10, minmax(min-content, 10%));

    grid-template-areas:
      "hd  hd   hd   hd   hd   hd   hd   hd   hd   hd"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "nav main main main main main main main main main"
      "ft  ft   ft   ft   ft   ft   ft   ft   ft   ft";
}

nav {
    grid-area: nav;
}

nav button {
    display: block;
    color: #888;
    flex: 1 1 100%;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    border-width: 0px;
}

nav button.active {
    color: whitesmoke;
}

nav button[disabled], nav button[disabled]:hover {
    color: #333333;
    font-size: 14pt;
    text-decoration: line-through
}

nav button:hover {
    color: whitesmoke;
}

section {
    grid-area: main;
}

tr.right:focus, tr.right:hover {
    box-shadow: inset -0.5em 0 0 0 whitesmoke;
}

tr {
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

button, input {
    font-family: 'Jura';
    color: whitesmoke;
    height: auto;
    border-width: 2px;
    border-color: whitesmoke;
    border-radius: 0;
    letter-spacing: 0.25em;
    box-sizing: border-box;

    /*the transitions */
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

button:hover, button:focus {
    /*colour necesary to bash skellington*/
    color: whitesmoke;
    border-color: whitesmoke;
}

button.right[disabled]:hover, button.left[disabled]:hover {
    box-shadow: none;
}

button.top:hover, button.top:focus {
    box-shadow: inset 0 0.25em 0 0 whitesmoke;
}

button.right:hover, button.right:focus {
    box-shadow: inset -0.5em 0 0 0 whitesmoke;
}

button.left:hover, button.left:focus {
    box-shadow: inset 0.5em 0 0 0 whitesmoke;
}

button.action {
    animation: action 1s infinite ease-in-out alternate;
}

@keyframes action {
    0% {
        box-shadow: inset 0 0 0 0 whitesmoke;
    }
    100% {
        box-shadow: inset 0.5em 0 0 0 whitesmoke;
    }
}


svg {
    flex: 1;
    fill: none;
    stroke: whitesmoke;
    stroke-width: 0;
}

img {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    pointer-events: none;
}

table {
    table-layout: fixed;
    width: 100%;
    margin-bottom: 2em;
}

table td {
    border: 1px solid whitesmoke;
    padding: 0.2em;
    text-align: center;
    height: 40px;
    text-transform: uppercase;
}

table td svg {
    stroke-width: 2px;
    height: 96%;
    vertical-align: text-bottom;
}

table .highlight {
    background: whitesmoke;
    color: black;
    font-weight: bold;
}

button[disabled] {
    color: #333;
    border-color: #333;
}

/*
    COLOURS
*/

.green {
    color: #1FF01F;
    stroke: #1FF01F;
}

.red {
    color: #a52a2a;
    stroke: #a52a2a;
}

.blue {
    color: #3498db;
    stroke: #3498db;
}

.yellow {
    color: #FFD123;
    stroke: #FFD123;
}

.purple {
    color: #A25AC1;
    stroke: #A25AC1;
}

.cyan {
    color: #6AD1BF;
    stroke: #6AD1BF;
}

.gray {
    color: #333;
    stroke: #333;
}

/*
    LOGIN
*/

.login {
    flex: 0 1 25%;
    display: flex;
    flex-flow: column;
}

.cryps input, .cryps select {
    border-color: #444;
    background-color: #333;
    border-radius: 0;
}

.cryps input:focus {
    border-color: whitesmoke;
}

/*
    HEADER
*/

header {
    display: flex;
    flex-flow: row;
    grid-area: hd;
    margin-bottom: 1.5em;
}

.header-title {
    flex: 1;
    letter-spacing: 0.05em;
}

.header-username {
    letter-spacing: 0.05em;
    display: inline;
}

.header-status {
    text-align: right;
}

.header-status svg {
    margin: 0.5em 0 0 1em;
    height: 1.5em;
    background-color: black;
    stroke: whitesmoke;
}

.ping-path {
    fill: none;
    stroke-width: 4px;
    stroke-dasharray: 121, 242;
    animation: saw 2s infinite linear;

    transition-property: stroke-color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
}

.ping-text {
    margin-left: 1em;
    min-width: 3em;
    display: inline-block;
}

@keyframes saw {
    0% {
        stroke-dashoffset: 363;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/*
    MENU
*/

.menu-cryps {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    justify-content: space-between;
}

.menu-cryp-ctr {
    flex: 0 0 30%;
    flex-flow: column;

    text-align: center;
    display: flex;
    justify-content: center;
}

.spawn-btn .menu-cryp {
    border: 1px solid #333;
    color: #333;
    display: flex;
    flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}

.spawn-btn input {
    flex: 1 1 100%;
    width: 100%;
    margin: 1em;
}

.spawn-btn button {
    flex: 1;
    margin: 0.5em 2em;
    border-color: #333
}

.spawn-btn input[disabled], .spawn-btn button[disabled] {
    opacity: 0
}

.menu-cryp {
    height: 100%;
    margin: 0.5em;
    box-sizing: border-box;
    border: 1px solid black;

    transition-property: border;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

.menu-instance-list {
    flex: 1;
    order: 99;
    flex-flow: row wrap;

    display: flex;
    align-content: flex-start;
}

.menu-instance-btn {
    flex: 1 1 100%;
    font-size: 1.2em;
}

.refresh-btn {
    border: 1px solid whitesmoke;
    float: right;
    font-size: 1.5em;
}

.create-form {
    flex: 1;

    display: flex;
    flex-flow: row wrap;
    border: 1px solid whitesmoke;
    padding: 1em;
    margin-bottom: 1.5em;
}

.create-form form {
    margin: 0;
    flex: 1 1 50%;
}

.create-form.disabled {
    border: 1px solid #333;
    color: #333;
}

/*.create-form select, .create-form input, .create-form label {
    margin: 0;
}
*/
.create-form button {
    flex: 0 1 25%;
    font-size: 1.5em;
}

.menu-btn, .nav-btn {
    flex: 1 0 25%;
}

/* nav hidden on desktop */
.nav-btn {
    display: none;
}

/*
    INFO
*/
.thresholds .spec-goals {
    display: flex;
    justify-content: space-around;
}

.info-spec {
    margin-top: 2em;
}

.spec-goals figure {
    margin: 1em 0;
}

.spec-goals figure svg {
    height: 1em;
}

.spec-goals .unmet {
    opacity: 0.5;
}

.info-cryp .skills {
    display: flex;
}

.info-cryp .skills button {
    border: 1px solid whitesmoke;
}

.info-cryp .stats, .info-cryp .specs {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}

.info-cryp .stats .speed {
    flex: 1 0 100%;
}

.info-cryp .stats figure {
    flex: 0 0 30%;
    border: 0;
    margin: 1em 0;
    text-align: center;
}

.info-cryp .stats .stat-icon {
    height: 2.5em;
}

.info-cryp .specs figure {
    border: 0;
    margin: 1em 0;
    text-align: center;
}


/* CRYP BOX */

.cryp-list {
    flex: 1 1 25%;
    display: flex;
    flex-flow: column;
    height: 94%;
    padding: 0 2em 0 2em;
    min-width: 300px;
    overflow: hidden;
}

.game-cryp {
    flex: 1 1 100%;

    display: flex;
    /*border: 1px solid whitesmoke;*/
    /*margin-bottom: 1em;*/
    justify-content: center;

    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0;
    transition-timing-function: ease;
}

.game-cryp .img {
    text-align: center;
    flex: 1 0 25%;
}

.game-cryp .stats {
    display: flex;
    flex: 1 0 20%;
    flex-flow: column;
}

.stats figure {
    width: 100%;
    border: 0;
    padding: 0.5em 0 0 0;
    text-align: center;
}

.stats figcaption {
    font-size: 75%;
}

.game-cryp .skills {
    display: flex;
    flex-flow: row wrap;
    flex: 1 0 25%;
    height: 100%;
    z-index: 10;
}

.game-cryp .effects {
    max-height: 100%;
    font-size: 1.5em;
    flex: 1;
}

.resolving .skills button {
    display: none;
}

.instance-cryp button, .info-cryp button {
    flex: 1 1 100%;
    color: whitesmoke;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    border-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 1px;
    border-right-width: 0px;
    border-top-width: 1px;
}

.instance-cryp button:first-child {
    border-top-width: 0;
}

figure.gray {
    color: #333;
    stroke-color: #333;
}

.stat-icon {
    height: 2em;
    stroke-width: 5px;
    fill: none;
}

/* GAME */
.game-btn {
    flex: 0 0 25%;
}

.game-btn:first-child {
    margin-right: 0.5em;
}

.game-cryp button {
    color: #888;
    flex: 1 1 100%;
    font-size: 16pt;
    padding: 0;
    margin: 0;
    border-width: 0px;
}

.game-cryp button.active {
    color: whitesmoke;
}

.game-cryp button[disabled], .game-cryp button[disabled]:hover {
    color: #333333;
    font-size: 14pt;
    text-decoration: line-through
}

.game-cryp button:hover {
    color: whitesmoke;
}

.game-cryp.ko {
    animation: none;
    opacity: 0.5;
    /*opacity: 0.35;*/
    filter: grayscale(100%);
}

.game-cryp.ko button:hover {
    color: #333;
}

.game-cryp.unfocus {
    /*opacity: 0.65;*/
    filter: blur(5px);
}

.combat-text {
    fill: whitesmoke;
    font-size: 2em;
    font-family: 'Jura';
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}

.team-opponent .combat-text {
    left: 40%;
    transform: translate(-50%, -50%);
}

.img {
    position: relative;
}

.team-player {
    padding: 0;
}

.stack-line {
    display: flex;
    align-items: center;
    padding-left: 2em;
    flex: 1;
}

.game .target-svg {
    flex: 1;
    height: 94%;
    max-width: 100%;
}

.game .target-svg path {
    stroke: whitesmoke;
    stroke-width: 4px;
}

.mobile-skills {
    display: none;
}

/*
CRYP DAMAGE
*/

.game-cryp.active-skill {
    filter: drop-shadow(0 0 0.2em silver);
    /*border-color: silver;*/
}

.game-cryp.red-damage {
    filter: drop-shadow(0 0 0.2em red);
    color: red;
    /*border-color: red;*/
}

.red-damage button {
    /*border: 1px solid red;*/
    color: red;
}

.red-damage text {
    fill: red;
}

.red-damage .stats {
    /*border-top: 1px solid red;*/
}

.game-cryp.blue-damage {
    filter: drop-shadow(0 0 0.2em blue);
    color: blue;
    /*border-color: blue;*/
}

.blue-damage button {
    /*border: 1px solid blue;*/
    color: blue;
}

.blue-damage text {
    fill: blue;
}

.blue-damage .stats {
    /*border-top: 1px solid blue;*/
}

.game-cryp.green-damage {
    filter: drop-shadow(0 0 0.2em green);
    color: green;
    /*border-color: green;*/
}

.green-damage button {
    /*border: 1px solid green;*/
    color: green;
}

.green-damage text {
    fill: green;
}

.green-damage .stats {
    /*border-top: 1px solid green;*/
}

.game-cryp.purple-damage {
    filter: drop-shadow(0 0 0.2em purple);
    color: purple;
    border-color: purple;
}

.purple-damage button {
    border: 1px solid purple;
    color: purple;
}

.purple-damage text {
    fill: purple;
}

.purple-damage .stats {
    border-top: 1px solid purple;
}


/*
    MOBILE
*/

@media (max-width: 800px) {
    h2 {
        font-size: 1em;
    }

    section {
        flex: 1 1 auto;
        flex-flow: column;
        overflow-x: hidden;
    }

    section.game {
        flex-flow: column-reverse;
        justify-content: space-between;
        height: 100%;
    }

    section.game .instance-hdr {
        order: 99;
    }

    .login {
        width: 100%;
    }

    header {
        font-size: 0.5em;
    }

    .header-username {
        display: none;
    }

    .menu-instance-list {
        flex: unset;
        width: 100%;
    }

    .menu-instance-btn {
        margin-right: 0;
        margin-bottom: 0.5em;
        padding: 0.2em;
    }

    .menu-btn {
        display: none;
    }

    .nav-btn {
        display: unset;
    }

    .vbox {
        flex: 1 1 100%;
    }

    .cryps {
        font-size: 0.75em;
        padding: 0 0.5em;
    }

    /*fucken beats me why needed */
    .game-cryp .skills {
        height: unset;
        flex: 1;
    }

    .menu-instance-btn {
        font-size: 1em;
    }

    .instance-hdr {
        flex: unset;
        width: 100%;
    }

    .cryp-list {
        display: flex;
        flex-flow: row;

        height: unset;
        width: 100%;

        padding: 0;
        flex: unset;
    }

    .instance-cryp .stats figure {
        padding: 0.2em 0;
    }

    .instance-cryp .skills, .instance-cryp .stats {
        display: none;
    }

    .instance-info {
        flex: 1;
    }

    .info-cryp {
        text-align: center;
    }

    .game-cryp {
        margin: 0 0.2em;
        flex-flow: column-reverse;
    }

    .spawn-btn button {
        margin: 1em;
        padding: 0.2em;
        width: 100%;
    }

    .game .timer-container {
        order: 5;
        flex: unset;
    }

    button {
        flex: 1;
        font-size: 16pt;
        padding: 0;
        margin: 0;
    }

    .game-cryp .stats {
        flex-flow: row;
        padding: 0.2em 0;
    }

    .stat-icon {
        height: 1em;
    }

    .cryp-list .stats figcaption {
        display: none;
    }

    .hidden {
        display: none;
    }

    .game .target-svg path {
        transform-origin: center;
        transform: rotate(-90deg);
    }
}