body {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    margin: 0;
    padding: 0;
    font-size: 14px;
}

header {
    background-color: #999;
    color: #eee;
    height: 5vh;
}

nav {
    display: inline-block;
    width: 20em;
    float: left;
    position:relative;
}

main {
    background-color: #333;
    color: #ddd;
    height: 90vh;
    width: 100%;
    text-align: center;
    display: inline-block;
    position:relative;
}

footer {
    background-color: #666;
    color: #eee;
    height: 5vh;
}

section {
    max-width: 70rem;
    position: relative;
    margin: 0px auto;
}

#inventory {
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-top: 3.5rem;
}

#opponent_inventory {
    padding-top: 0px;
    padding-bottom: .5rem;
    margin-left: 1.5rem;
    margin-top: 0px;
    text-align:left;
    display:inline-block;
    width:8rem;
}

.opponent_invItem {
    position: absolute;
    background-clip: content-box;
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 32px;
    box-sizing: content-box;
    top: 0.2rem;
    left: 0.1rem;
}

.invItem {
    position: absolute;
    background-clip: content-box;
    width: 65px;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    padding-top: 65px;
    box-sizing: content-box;
    top: 0.3rem;
    left: 0.4rem;
}

.inventory span {
    display: inline-block;
    background-color: #090;
    border-radius: 50%;
    font-size: 1.3em;
    font-family: "Liberation Mono", "Lucida Console", sans-serif;
    border: 1px solid #fff;
    width: 1.3rem;
    height: 1.3rem;
    position: relative;
    left: 1rem;
}

.opponent_inventory span {
    display: inline-block;
    background-color: #090;
    border-radius: 50%;
    font-size: .8em;
    font-family: "Liberation Mono", "Lucida Console", sans-serif;
    border: 1px solid #fff;
    width: 1rem;
    height: 1rem;
    position: relative;
    left: 1rem;
    text-align:center;
}

.inventory {
    position: relative;
    white-space: nowrap;
    width: 5rem;
    height: 5rem;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

.opponent_inventory {
    position: relative;
    white-space: nowrap;
    width: 2.5rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    background-size: contain;
    display: inline-block;
}

#board {
    margin: 1rem auto;
    display: inline-block;
    position: relative;
    float: left;
}

.row {
    white-space: nowrap;
}

.item:hover,
.cell:hover {
    background-color: #aef;
    top: -3px;
    box-shadow: 2px 3px 3px #0009;
    transform: scale(1.2);
    z-index: 9999;
}

.selected.item:hover,
.selected.cell:hover {
    background-color: #ff6;
}

#board div.box {
    background-image: linear-gradient(-45deg, #4facfe 0%, #00f2fe 100%);
    /* background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%); */
    height: 65px;
    width: 65px;
    display: inline-block;
    float: left;
}

.cell {
    width: 65px;
    height: 65px;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    transition: top 300ms, left 300ms, box-shadow 250ms, transform 250ms;

}

.item {
    width: 65px;
    height: 65px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    transition: top 300ms, left 300ms, box-shadow 250ms, transform 250ms;
    border-top: 1px solid #000;
    border-left: 1px solid #000;

}

.selected {
    background-color: #ff0;
}

.moveto {
    background-color: #f0f;
}

@keyframes explosion {
    10% {
        content: "1";
        color: white;
        font-size: 20px;
    }

    20% {
        content: "2";
        color: white;
        font-size: 40px;
    }

    30% {
        content: "3";
        color: white;
        font-size: 60px;
    }

    40% {
        content: "4";
        color: white;
        font-size: 80px;
    }

    50% {
        content: "5";
        color: white;
        font-size: 100px;
    }

    60% {
        content: "6";
        color: white;
        font-size: 120px;
    }

    70% {
        content: "7";
        color: white;
        font-size: 140px;
    }

    80% {
        content: "8";
        color: white;
        font-size: 160px;
    }

    90% {
        content: "9";
        color: white;
        font-size: 180px;
    }

    100% {
        content: "10";
        color: white;
        font-size: 200px;
    }
}

.bomb {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bomb:after {
    font-size: 300px;
    content: "BOOM!";
    display: block;
    color: red;
    text-align: center;
    animation: explosion 7s linear infinite reverse;
    transition: color 0.1s ease;
}

/*
#countdown::after {
    color: #fff;
    content: "☠";
    font-size: 72px;
    font-family: "Roboto Mono", monospace;
    animation: counter 10s linear infinite 3s;
    position: relative;
    z-index: 2001;
}
*/
@keyframes counter {
    0% {
        content: "10";
        color: #fff;
    }

    10% {
        content: "9";

        color: #fff;
    }

    20% {
        content: "8";
        color: #fff;
    }

    30% {
        content: "7";
        color: #fff;
    }

    40% {
        content: "6";
        color: #fff;
    }

    50% {
        content: "5";

        color: #fff;
    }

    60% {
        content: "4";
        color: #fff;
    }

    70% {
        content: "3";
        color: #fff;
    }

    80% {
        content: "2";
        color: #fff;
    }

    90% {
        content: "1";
        color: #fff;
    }

    100% {
        content: "☠";
        color: #fff;
    }

}

#countdown {
    position: absolute;
    font-size: 72px;
    color:#fff;
    line-height: 1.6em;
    font-family: "Roboto Mono", monospace;
    border-radius: 100px;
    background-color: #000;
    border: 15px solid #eee;
    right: 4rem;
    color: #0e0;
    width: 150px;
    height: 150px;
    box-sizing: border-box;
    margin-top: 1em;
}

.blank_bobber {
    background-image: url("img/bobber-blank.png");
}

.blank_fish {
    background-image: url("img/fish-blank.png");
}

.blank_hook {
    background-image: url("img/hook-blank.png");
}

.blank_net {
    background-image: url("img/net-blank.png");
}

.blank_pole {
    background-image: url("img/pole-blank.png");
}

.blank_trap {
    background-image: url("img/trap-blank.png");
}

.blank_worm {
    background-image: url("img/worm-blank.png");
}

.bobber {
    background-image: url("img/bobber.png");
}

.fish {
    background-image: url("img/fish.png");
}

.hook {
    background-image: url("img/hook.png");
}

.net {
    background-image: url("img/net.png");
}

.pole {
    background-image: url("img/pole.png");
}

.trap {
    background-image: url("img/trap.png");
}

.worm {
    background-image: url("img/worm.png");
}

.attack {
    border-radius: 2em;
    border: 3px ridge #ccc;
    background-color: #3c70e2;
    margin-right: .5rem;
    margin-left: 1.3rem;
    margin-bottom: .5rem;
    box-sizing: content-box;
    width: 15rem;
    position: relative;
}

#opponentScore {
    font-family: "Liberation Mono", "Lucida Console", sans-serif;
    font-size: 26px;
    text-shadow: 1px 1px 1px #0009, -1px -1px 1px #0009, 1px -1px 1px #0009, -1px 1px 1px #0009;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    z-index: 1001;
    position: relative;
    margin-left: 2rem;
}

#fishcount {
    font-family: "Liberation Mono", "Lucida Console", sans-serif;
    font-size: 26px;
    text-shadow: 1px 1px 1px #0009, -1px -1px 1px #0009, 1px -1px 1px #0009, -1px 1px 1px #0009;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    z-index: 1001;
    position: relative;
}

aside {
    float: left;
    width: 15rem;
    height: 20rem;
    position:relative;
}

#opponent {
    position: absolute;
    height: 32px;
    border-radius: 1em;
    background-color: #222;
    overflow: visible;
    width: 12rem;
    margin-top: 1rem;
    margin-left: 1rem;
}

#score {
    position: absolute;
    height: 32px;
    border-radius: 1em;
    background-color: #222;
    overflow: visible;
    width: 14rem;
    margin-top: 1rem;
    margin-left: 2rem;
}

.anifish {
    width: 4rem;
    height: 4rem;
    position: relative;
    left: -1.6rem;
    top: -1rem;
    float: left;
    filter: drop-shadow(2px 2px 2px #0009);
    z-index: 1001;
}

.evilfish {
    width: 4rem;
    height: 4rem;
    position: relative;
    left: 1rem;
    top: -1rem;
    float: right;
    filter: drop-shadow(2px 2px 2px #0009);
    transform: scaleX(-1);
    z-index: 1001;
}


#opponentProgress {
    position: absolute;
    background-color: #f30;
    width: 0px;
    border-radius: 2rem;
    height: 2rem;
    z-index: 1;
    left: 0px;
}

#fishProgress {
    position: absolute;
    background-color: #ca0;
    width: 0px;
    border-radius: 2rem;
    height: 2rem;
    z-index: 1;
    left: 2rem;
}

.attackVal {
    font-family: "Liberation Mono", "Lucida Console", monospace;
    border-radius: 2rem;
    font-size: 1.3em;
    color: #fff;
    background-color: #900;
    border: 1px solid #fff;
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    position: relative;
    left: 1em;
    top: -.5em;
}

.attackReq {
    width: 3rem;
    height: 3rem;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}

.attackIcon {
    width: 3rem;
    height: 3rem;
    float: left;
    margin: .7em;
    padding: 4px;
    transform: scale(1.5);
}

.attack::before {
    display: inline-block;
    content: "";
    height: 4rem;
    width: 4rem;
    position: absolute;
    top: 0.5rem;
    left: 0.3rem;
    color: #ff0;
    float: left;
    background-color: #ff0;
    border-radius: 50%;
}

.attack h2 {
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    font-family: "Helvetica Neue", "Arial", sans-serif;
    text-shadow: 2px 2px 2px #000a;
    text-transform: uppercase;
}

.blank {
    background-color: #ffff00;
}

.explosion {
    position: absolute;
    height: 300px;
    width: 300px;
    top: 0px;
    left: 0px;
    pointer-events: none;
}

.explosion .particle {
    position: absolute;
    width: 50px;
    height: 50px;

}

.explode {
    position: absolute;
    animation: shrink 250ms linear forwards;
}

@keyframes shrink {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}

.explosion .bs0 {
    box-shadow: .5em .5em .5em #fffa, -.5em -.5em .5em #fffa, -.5em 0px .5em #fffa, 0px -.5em .5em #fffa;
}

.explosion .bs1 {
    box-shadow: .5em .5em .5em #fcca, -.5em -.5em .5em #fccc, -.5em 0px .5em #fccc, 0px -.5em .5em #fccc;
}

.explosion .bs2 {
    box-shadow: .5em .5em .5em #ff0a, -.5em -.5em .5em #ff09, -.5em 0px .5em #ff09, 0px -.5em .5em #ff09;
}

.explosion .spin0 {
    animation: spinner0 1000ms linear reverse forwards;
    box-shadow: 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0;
}

.explosion .spin1 {
    animation: spinner1 1000ms linear reverse forwards;
    box-shadow: 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0;
}

@keyframes spinner0 {
    0% {
        transform: rotate3d(1, -1, 1, 1440deg);
        opacity: 0;
        height: 0px;
        width: 0px;
    }

    100% {
        transform: rotate3d(1, -1, 1, -1440deg);
        top: 50%;
        left: 50%;
        opacity: 1;
    }
}

@keyframes spinner1 {
    0% {
        transform: rotate3d(-1, 1, -1, -2880deg);
        opacity: 0;
        height: 0px;
        width: 0px;
        box-shadow: 2em 2em 2em #fffa, -2em -2em 2em #fffa, -2em 0px 2em #fffa, 0px -2em 2em #fffa;
    }

    100% {
        transform: rotate3d(-1, 1, -1, 2880deg);
        top: 50%;
        left: 50%;
        opacity: 1;
        box-shadow: 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0, 0px 0px 0px #fff0;
    }
}

.complete {
    background-color: #0a0;
}

.playerUp {
    font-size: 24px;
    margin-top: 10rem;
}

.attack {
    box-shadow: 3px 3px 3px #000a;
}

.attack:active {
    border-style: inset;
    top: 3px;
    background-color: #5aa5e4;
}
.netattack {
    position:absolute;
    top: 0px;
    right: 0px;
    bottom:0px;
    left:0px;
    height:100%;
    width:100%;
    opacity: .7;
    background-image: url("img/fishingnet-big.png");
    background-size: contain;
    background-repeat: no-repeat;
    transform-origin: 50% 50%;
    transition: transform 200ms ease-out 500ms, margin 300ms ease-in 1000ms;
    transform: scale(0);
    border:0px;
}
.arrow {
    position: absolute;
    top: 1em;
    margin-left: 0px;
    width: 40px;
    height: 40px;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=);
    background-size: contain;
    display: none;
}

.player0 nav .arrow {
     animation: bounce0 2s infinite;
     right:0px;
     display:inline-block;
}
.player1 aside .arrow {
     animation: bounce1 2s infinite;
    left:0px;
     display:inline-block;
}

@keyframes bounce0 {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0) rotate(90deg);
    }

    40% {
        transform: translateX(-20px) rotate(90deg);
    }

    60% {
        transform: translateX(-10px) rotate(90deg);
    }
}

@keyframes bounce1 {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(0) rotate(-90deg);
    }

    40% {
        transform: translateX(20px) rotate(-90deg);
    }

    60% {
        transform: translateX(10px) rotate(-90deg);
    }
}