/* Gradients */

/*
Gradients below are from https://codepen.io/billyysea/pen/whjbK
with is MIT licensed:

Permission is hereby granted, free of charge, to any person 
obtaining a copy of this software and associated documentation 
files (the "Software"), to deal in the Software without restriction,
 including without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell copies of 
the Software, and to permit persons to whom the Software is 
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall 
be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES 
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER 
DEALINGS IN THE SOFTWARE.
*/
.sky-gradient-00, .sky-gradient-24 { background: #00000c; }
.sky-gradient-01 { background: linear-gradient(to bottom, #020111 85%,#191621 100%); }
.sky-gradient-02 { background: linear-gradient(to bottom, #020111 60%,#20202c 100%); }
.sky-gradient-03 { background: linear-gradient(to bottom, #020111 10%,#3a3a52 100%); }
.sky-gradient-04 { background: linear-gradient(to bottom, #20202c 0%,#515175 100%); }
.sky-gradient-05 { background: linear-gradient(to bottom, #40405c 0%,#6f71aa 80%,#8a76ab 100%); }
.sky-gradient-06 { background: linear-gradient(to bottom, #4a4969 0%,#7072ab 50%,#cd82a0 100%); }
.sky-gradient-07 { background: linear-gradient(to bottom, #757abf 0%,#8583be 60%,#eab0d1 100%); }
.sky-gradient-08 { background: linear-gradient(to bottom, #82addb 0%,#ebb2b1 100%); }
.sky-gradient-09 { background: linear-gradient(to bottom, #94c5f8 1%,#a6e6ff 70%,#b1b5ea 100%); }
.sky-gradient-10 { background: linear-gradient(to bottom, #b7eaff 0%,#94dfff 100%); }
.sky-gradient-11 { background: linear-gradient(to bottom, #9be2fe 0%,#67d1fb 100%); }
.sky-gradient-12 { background: linear-gradient(to bottom, #90dffe 0%,#38a3d1 100%); }
.sky-gradient-13 { background: linear-gradient(to bottom, #57c1eb 0%,#246fa8 100%); }
.sky-gradient-14 { background: linear-gradient(to bottom, #2d91c2 0%,#1e528e 100%); }
.sky-gradient-15 { background: linear-gradient(to bottom, #2473ab 0%,#1e528e 70%,#5b7983 100%); }
.sky-gradient-16 { background: linear-gradient(to bottom, #1e528e 0%,#265889 50%,#9da671 100%); }
.sky-gradient-17 { background: linear-gradient(to bottom, #1e528e 0%,#728a7c 50%,#e9ce5d 100%); }
.sky-gradient-18 { background: linear-gradient(to bottom, #154277 0%,#576e71 30%,#e1c45e 70%,#b26339 100%); }
.sky-gradient-19 { background: linear-gradient(to bottom, #163C52 0%,#4F4F47 30%,#C5752D 60%,#B7490F 80%, #2F1107 100%); }
.sky-gradient-20 { background: linear-gradient(to bottom, #071B26 0%,#071B26 30%,#8A3B12 80%,#240E03 100%); }
.sky-gradient-21 { background: linear-gradient(to bottom, #010A10 30%,#59230B 80%,#2F1107 100%); }
.sky-gradient-22 { background: linear-gradient(to bottom, #090401 50%,#4B1D06 100%); }
.sky-gradient-23 { background: linear-gradient(to bottom, #00000c 80%,#150800 100%); }

/* end gradients */

@keyframes shrink-late {
    0%, 50%   {
	max-height: 200px;
	overflow: hidden;
	opacity: 1;
	//margin: 2vw 2vw 2vw 2vw;
    }
    100%  {max-height: 0px; margin: 2vw 2vw; overflow: hidden; opacity: 0}
}

@keyframes pulse {
    0%, 90% { transform: scale(1.0, 1.0); }
    92% { transform: scale(0.95, 0.95); }
    100%    { transform: scale(1.2, 1.2); }
}

.centered-flex {
    display: flex;
    align-items: center;
}

.lobby-area {
    display: flex;
    align-items:center;
    flex-direction: column;
    overflow-y:auto;
    overflow-x:hidden;
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 14vw;
}

.play-area {
    overflow-x:hidden;
    position:absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 14vw;
}

.roster-header-bar {
    position:fixed;
    top:0;
    height: 24vw;
    width: 100%;
    background-color: #172426;
    z-index: 1;
}

.roster-area {
    overflow-x:hidden;
    position:absolute;
    left: 0;
    right: 0;
    top: 24vw;
    bottom: 14vw;
}

.action-select {
    position: absolute;
    right: 20vw;
}

.utility-bar {
    position:fixed;
    bottom:0;
    height: 14vw;
    width: 100%;
    background-color: #172426;
    z-index: 1;
}
.game-utility-bar {
    position:fixed;
    bottom:0;
    height: 14vw;
    width: 100%;
    background-color: rgba(0%,0%,0%,0%);
    z-index: 1;
}
.game-utility-backdrop {
    background-color: #172426;
    justify-content:center;
    transition: transform 1s ease-out;
    position:fixed;
    bottom:0;
    height: 28vw;
    width: 100%;
    z-index: -3;
}
.right-button {
    display: block;
    float:right;
    position: relative;
    //font-size: 2vw;
    right: 5vw;
}
.left-tray {
    position: fixed;
    bottom: 2vw;
    left: 2vw;
    height: 10vw;
}
.center-tray {
    position: fixed;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 2vw;
    height: 10vw;
}
.right-tray {
    position: fixed;
    bottom: 2vw;
    right: 2vw;
    height: 10vw;
}


.round-notification {
    pointer-events:none;
    z-index:2;
    border-radius:8vw;
    position:fixed;
    top:30vh;
    left:20vw;
    width:60vw;
    height:40vh;
    justify-content:center;
    background-color: #172426;
    font-size: 10vh;
    filter: opacity(0%);
}
.fadeout-enter-active {
    transition: all 1.3s ease;
}
.fadeout-enter {
    filter: opacity(100%);
    transform: translate(0, 10vh);
}

.popin-enter-active {
    transition: transform 1s ease;
}
.popin-enter {
    transform: scale(1.4, 1.4);
}

.slide-right-enter-active, .slide-right-leave-active {
    transition: all 0.4s ease;
}

.slide-right-enter, .slide-right-leave-to {
    right: -25vw;
}

.dark {
    background-color: #000;
    color: #eee;
}

.fullscreen {
    position: absolute;
    overflow-x: hidden;
    left:0;
    right:-1px;
    top:0;
    bottom:0;
    z-index: -2;
}

.screen-right-enter-active, .screen-right-leave-active {
    transition: transform 0.7s;
}

.screen-right-enter {
    transform: translate(100vw);
}
.screen-right-leave-to {
    transform: translate(-100vw);
}

.unit-bar-item {
    margin: 1vw 2vw 1vw 2vw;
    display: block;
    padding:0.2em;
    border-radius: 5vw;
    position: relative;
    transition: transform 0.5s linear;
}
.unit-bar-enter {
    transform: scale(1.0, 0.0);
}
.unit-bar-leave-active {
    animation-name: shrink-late;
    animation-duration: 1.2s;
    animation-timing-function: linear;
    animation-fill-mode: both;
}

.emoji-icon-item {
    font-size: 3.5vw;
    display: inline-block;
    //transform: scale(1.0, 1.0);
    transition: all .5s ease;
}
.emoji-icon-leave-active {
    position: absolute;
    display: none;
}
.emoji-icon-move, .emoji-icon-enter-active, .emoji-icon-leave-active {
}
.emoji-icon-enter {
    transform: scale(1.5, 1.5);
}
.emoji-icon-leave-to {
}

.ability-button {
    border-radius: 0.4em;
    border: 1px solid #111;
    display: inline-block;
    color: #eee;
    padding: 1.8vw 5vw;
    text-decoration: none;
}
.brighter-ability {
    background: linear-gradient(to top, #52837b 0%, #52837b 100%);
}
.highlight {
    animation: pulse 2.0s linear -.75s infinite alternate;
}

.big-button-container {
    margin: 5vw;
    font-size: 5vh;
}

.tall-and-fat {
    padding: 1vw 3vw;
    font-size: 130%; 
}
.roster-index-selector {
    display:inline-block;
    border-style:solid;
    padding: 1vw 3vw;
    font-size: 130%; 
    border-color:transparent;
}

.my-ability:disabled {
    background: linear-gradient(to top, #111 0%, #333 100%);
    background-color:#172426;
}
.my-ability {
    //linear-gradient(to top, rgb(17,71,133) 0%, 51%,rgb(58,157,232) 100%)
    //background: linear-gradient(to top, #111 0%, #678 100%);
    background: linear-gradient(to top, #223633 0%, #52837b 100%);
    background-color:#08c;
    //box-shadow: 1px 2px 2px #111;
    //position: relative;
    //top: -2px;
}
.my-ability-in-use {
    background: linear-gradient(to bottom, #444 0%, #ccc 100%);
    background-color:#08c;
    border: 1px solid #fff;
}
.opponent-ability-in-use {
    background: linear-gradient(to bottom, #444 0%, #ccc 100%);
    //background: linear-gradient(to bottom, #111 0%, #611 100%);
    background-color:#622;
    border: 1px solid #fff;
}
.opponent-enabled-ability {
    background: linear-gradient(to top, #111 0%, #611 100%);
    background-color:#622;
    border: 1px solid #611;
    //border: 0px;
    //box-shadow: 1px 2px 2px #111;
    //position: relative;
    //top: -2px;
}
.opponent-disabled-ability {
    background: linear-gradient(to top, #111 0%, #333 100%);
    background-color:#172426;
    border: 1px solid #611;
    //border: 0px;
    //box-shadow: 1px 2px 2px #111;
    //position: relative;
    //top: -2px;
}

.story-text {
    text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
    color: white;
    //font: 1.5em Georgia, serif;
}