:root {
    --light-blue: #58acdf;
}

#preload-wrapper {
    width: 100%;
    border-radius: .25rem;
    font-family: var(--chatting-font);
    padding: 2rem 1rem;  
    margin: 0 0 .5rem 0;
    color: #fff;
    }
#preload-wrapper #progress-bar-wrapper{
    position: relative;
    border: 2px solid #fff;
    width: 100%;
    height: 2rem;
    border-radius: .25rem;
    overflow: hidden;
    margin-top: .5rem;
    }
#preload-wrapper #progress-bar{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #64ae08;
    background-color: var(--light-blue);
    }



.trophic-color-1, #overlay-header.trophic-color-1{ background-color: var(--ecochains-green); }
.trophic-color-2, #overlay-header.trophic-color-2{ background-color: var(--ecochains-purple); }
.trophic-color-3, #overlay-header.trophic-color-3{ background-color: var(--ecochains-orange); }
.trophic-color-4, #overlay-header.trophic-color-4{ background-color: var(--ecochains-blue); }
.trophic-color-5, #overlay-header.trophic-color-5{ background-color: var(--ecochains-red); }


#game-menu .img-right-wrapper > div{ text-align: center; }
#game-menu .img-right-wrapper h2{ padding-bottom: 0; }

body.play{
    background: -webkit-gradient(linear, left top, left bottom, from(#375b7c), to(#122534)) fixed;
    display: grid;
    grid-template-rows: 1fr auto;
    }

.play #outer-wrapper, .play #header{ max-width:1200px; }
.play #outer-wrapper{ padding-bottom: 0; }


#game-wrapper{
    width: 100%;
    border-radius: .25rem;
    padding: 0 0 .5rem 0;   
    } 



#ui-wrapper{
    background-color: rgba(18, 37, 52, .7);
    padding: .5rem 1rem;
    margin-bottom: .4rem;
    color: #58acdf;
    display: flex;
    gap: 1rem;
    }
#ui-wrapper > div{
    display: grid;
    gap: .15rem;
    text-align: center;
    line-height: 1rem;
    }
#ui-wrapper > div .label{ font-size: .9rem; }        
#ui-wrapper > div .value{ font-size: 1.1rem; }    
#ui-wrapper > div:nth-last-child(2){ border: none; }    
#ui-wrapper > div:last-child{ 
    margin-left: auto; 
    border: none;
    }    
#ui-wrapper .link { 
    color: #98d8ff; 
    border-color: #98d8ff;
    }
#ui-wrapper .link:hover{ 
    color: #fff;
    border-color: #98d8ff; 
    }
#ui-wrapper > div.link .label{ font-weight: normal; }      



#game-board-wrapper{
    background-color: rgba(18, 37, 52, .7);
    padding: .5rem .5rem 0 .5rem;  
    color: #58acdf;
    }
#game-board-wrapper .board-title{
    font-size: 1rem;
    text-align: center;
    border-bottom: 2px solid;
    padding: 0;
    line-height: 1.5rem;
    width: 100%;
    margin-bottom: .6rem;
    font-size: .9rem;
    cursor: pointer;
    border-color: #2a78a7;
    }
#game-board-wrapper .board-title:hover{
    color: #fff;
    border-color: #2a78a7;
    }
#game-board-wrapper #top-row{
    display: flex;
    gap: min(3vw, 40px);
    }


#game-complete-button{
    font-size: .9rem;
    font-weight: 500;
    display: block;
    margin: .25rem auto .5rem auto;
    padding: .5rem .75rem;
    animation: pulse-complete-button 1s ease-in-out infinite alternate;
    min-width: 50%;
    z-index: 1;
    }
@keyframes pulse-complete-button {
    0% {
        transform: translateY(.12rem);
        background-color: #64ae08; }
    100% { 
        transform: translateY(-.1rem);
        background-color: #4a8600; } 
    }   
#game-complete-button.hidden{ display:none; }

#game-complete-button:hover{
    animation: none;
    background-color: #64ae08;
    transform: scale(1);
    }

#game-board-wrapper #feedback > div{
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem 1rem;
    text-align: center;
    margin: 0 0 .3rem 0;
    border-radius: .25rem;
    line-height: 1.25rem;
    }
#game-board-wrapper #feedback > div:first-child{ margin-top: .5rem; }  
#game-board-wrapper #feedback > div:last-child{ margin-bottom: 1rem; }
#game-board-wrapper #feedback .incorrect{ 
    font-weight: 400;
    background-color: #9f3131; 
    color: #fff; 
    }
#game-board-wrapper #feedback .correct{     
    background-color: #fff;
    color: #000;
    }


.deck-wrapper{
    width: 13vw;
    min-height: 5rem;
    background-size: cover;
    background-position: center;
    border-radius: .15rem;
    display: flex;
    flex-direction: column;
    position: relative;
    }
.deck-wrapper .card{ box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); }    
.prey-stack {
    position: absolute;
    top: 1rem;
    left: 0;
    transform: scale(.85);
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 50%);
    }
.prey-stack > div { pointer-events: none; }
.prey-stack > div:last-child{ 
    pointer-events: auto; 
    cursor: pointer;
    }
.deck-wrapper > div, 
.prey-stack.deck-wrapper > div{
    position: relative;
    margin-top: calc(-6.4rem + .25px);
    }

.deck-wrapper > div:first-child,
.prey-stack.deck-wrapper > div:first-child { margin-top: 0; }    

#draw-deck-wrapper .card.active{ cursor: pointer; }
#draw-deck-wrapper .card.placeholder.active { 
    cursor: pointer; 
    outline: none;
    }
#draw-deck-wrapper.inactive > div{ 
    pointer-events: none;
    filter: saturate(0); 
    }
#draw-deck-wrapper.inactive{ 
    pointer-events: auto; 
    cursor: pointer;
    }

#play-deck-wrapper .card.active{ cursor: grab; }
#play-deck-wrapper .card.placeholder.active { 
    cursor: pointer; 
    outline: none;
    }




#hunter-wrapper{ margin-left: auto; }
#hunter-wrapper .section-wrapper{ gap: min(1vw, 20px); }
.hunter-chain{ 
    width: 13vw; 
    position: relative;
    }
.hunter-chain > div:first-child { position:relative; }    
.hunter-chain .active{ cursor: pointer; }




#environment-wrapper{
    padding-top: .75rem;
    grid-column: 1/3;
    text-align: center;
    }
#environment-wrapper .food-chain { 
    display: flex;
    flex-direction: column;
    position: relative;
    width: 13vw;
    padding-bottom: 5rem;
    }
#environment-wrapper .food-chain > div{ 
    position: relative;
    margin-top: -4.4rem; 
    }
#environment-wrapper .food-chain > div:first-child { margin-top: 0; }

#environment-wrapper .food-chain .card.ice-changed { 
    transform-origin: center;
    animation: iceChangeFeedback .5s ease-in-out 1; 
    }
@keyframes iceChangeFeedback {
        0% { 
            transform: scale(0); 
            rotate: -360deg;
        }    
        100% { 
            transform: scale(1);
            rotate: 0; 
        }
    }


#environment-wrapper .food-chain .sea-ice, #environment-wrapper .food-chain .open-ocean { cursor: pointer; }     

#environment-wrapper .card.active{ cursor: grab; }
#environment-wrapper .card.sea-ice.active,
#environment-wrapper .card.open-ocean.active { cursor: pointer; }

#environment-wrapper .section-wrapper.ice-loss .species, 
#environment-wrapper .section-wrapper.ice-loss .open-ocean { filter: brightness(.25); }
#environment-wrapper .section-wrapper.ice-loss .sea-ice{ z-index: 20; }

#environment-wrapper .section-wrapper.ice-gain .species, 
#environment-wrapper .section-wrapper.ice-gain .sea-ice { filter: brightness(.25); }
#environment-wrapper .section-wrapper.ice-gain .open-ocean{ z-index: 20; }
    

.section-wrapper{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    }


.play footer{ 
    max-width:1200px;
    margin: 0 auto 1rem auto; 
    border: none; 
    padding-top: 0;
    }

.play footer li, .play footer a:link, .play footer a:visited, .play footer li::after{ color: #58acdf; }
.play footer a:hover{ color: #75cbff; }    


#ice-background{
    grid-row-start: 2;
    grid-row-end: 3;
    background-image: url(../images/background/ice-background-left.png), url(../images/background/ice-background-right.png);
    background-position: bottom left, bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    height: 38px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: -10;
    }



#game-complete-wrapper{
    background-color: #fff;
    margin: 0 0 .5rem 0;
    padding: 0 1rem 4rem 1rem;
    } 
#game-complete-wrapper .top-row{ 
    display: grid;  
    margin-bottom: 2rem; 
    }     
#game-complete-wrapper .top-row img{ width: min(14rem, 70%); }

#game-complete-wrapper h1{
    padding-top: 1.5rem;
    color: #64ae08;
    }
#game-complete-wrapper section{
    border: 2px solid #badf4b;
    overflow: hidden;
    }   
#game-complete-wrapper #score-rank-wrapper{
    display: grid;
    gap: 1rem;
    padding-bottom: 1rem;
    }
#game-complete-wrapper #score-rank-wrapper .title{
    background-color: #badf4b;
    padding: .5rem 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
    }    
#game-complete-wrapper ul{ margin: 1rem 2rem; }
#game-complete-wrapper li{ padding: .4rem 0; }
#game-complete-wrapper .rank-list .active{ font-weight:bold; }
#game-complete-wrapper .rank-list span{ display: block; }




@media print, (min-width:700px) {

    #ui-wrapper { 
        padding: 1rem;
        border-radius: 0 0 .5rem .5rem; 
        }
    #ui-wrapper > div{ 
        display: flex; 
        gap: .25rem;
        padding-right: 1rem;
        border-right: 1px solid #fff;
        }
    #ui-wrapper > div .value, #ui-wrapper > div .label{ font-size: 1rem; }      
    #ui-wrapper > div .label:after{ content: ':' }
    #ui-wrapper > div.link .label{ font-weight: bold; }   

    #game-menu .img-right-wrapper > div{ text-align: left; }
    #game-menu .img-right-wrapper h2{ padding-bottom: 1rem; }

    #game-board-wrapper{ 
        border-radius: .5rem; 
        padding: 1rem; 
        min-height: 50rem;
        }
    #game-board-wrapper .board-title{
        font-size: 1.15rem;
        margin-bottom: .8rem;
        }    

    #game-complete-button{ 
        font-size: 1rem;
        min-width: 30%; 
        margin: .25rem auto 1rem auto;
        padding: .75rem 1rem;
        }
        
    #game-board-wrapper #feedback > div{ 
        font-size: 1rem; 
        padding: 1rem ;
        }
    

    #top-row{ margin: 0 0 2rem 0; }    


    #game-board-wrapper #environment-wrapper .board-title{ margin-bottom: 1rem; }
    
    #environment-wrapper .food-chain, #hunter-wrapper .hunter-chain{ max-width: 9rem; }

   
    .deck-wrapper > div{ margin-top: calc(-11rem + .5px); }
    .prey-stack.deck-wrapper > div{ margin-top: calc(-11rem + 3px); }
    #environment-wrapper .food-chain > div{  margin-top: -8rem; }

    .card, .deck-wrapper{ 
        max-width: 9rem; 
        border-radius: .25rem;
        }

    .prey-stack { top: 2rem; }

    .shadow{ box-shadow: 0 1px 15px 0 rgb(0 0 0 / 100%); }

    #ice-background{ height: 100px; }

    #game-complete-wrapper{
        margin: 1.5rem 1rem .5rem 1rem;
        border-radius: .5rem; 
        padding: 1rem 2rem 4rem 2rem; 
        }
    #game-complete-wrapper .top-row{ 
        gap: 1rem; 
        grid-template-columns: 1fr 1fr; 
        }      
    #game-complete-wrapper .top-row img{ justify-self: center; }    
    #game-complete-wrapper #score-rank-wrapper { grid-template-columns: repeat(auto-fit, minMax(300px, 1fr)); }

}    




@media print, (min-width:950px) {
    .deck-wrapper > div{ margin-top: calc(-14rem + .5px) }
    .prey-stack.deck-wrapper > div { margin-top: calc(-14rem + 3px) }

    #environment-wrapper .food-chain > div{  margin-top: -11rem; }
}


@media print {

    #ice-background { display: none; }

    #ui-wrapper { 
        background-color: transparent; 
        padding: 0;
        margin-bottom: .75rem;
        }
    #ui-wrapper .link {
        color: #000;
        border-color: #000;
        }    
    #game-board-wrapper { 
        background-color: transparent; 
        padding: 0 0 1rem 0;
        min-height: unset;
        color: #000;
        }    

    #top-row { margin-bottom: 0; }
    
    #game-board-wrapper #environment-wrapper .board-title, #game-board-wrapper .board-title { 
        margin-bottom: .5rem; 
        font-size: 1rem;
        border-color: #000;
        }

    #environment-wrapper .food-chain { padding-bottom: 0; }

    .play footer{ 
        padding: .4rem 0 0 0;
        border-top: solid 1px #000; 
        margin: 0;
        }   
    .play footer li, .play footer a:link, .play footer a:visited, .play footer li::after { color: #000; }

    #game-complete-wrapper{ 
        margin: 0; 
        padding: 0;
        }
    #game-complete-wrapper h1{ padding-top: 0; } 
    
}