/* Copyright (C) 2023 Jan-Dirk van Dingenen */

html {
    background-color: #101010;
}

body {
    margin:0;    
}

#game {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: calc(var(--baseSize) * var(--maxWidth));
    height: calc(var(--baseSize) * var(--maxHeight));
    font-size: calc(var(--baseSize) * 2.5);
    background-color: #a0b0b0;
    box-shadow: inset 0 0 calc(var(--baseSize) * 1) #000;
    padding:calc(var(--baseSize) * 1);
    border-radius: calc(var(--baseSize) * 1);
    box-sizing: border-box;
    overflow:hidden;
}

.fighter {
    position: relative;
}

.card {    
    width: calc(var(--cardSize) * 3);
    height: calc(var(--cardSize) * 4);
    border-radius: calc(var(--cardSize) / 2.5);
    background-image: url(img/cardback.jpg);
    background-position: center;
    background-size: cover;
    box-shadow: inset 0 0 calc(var(--cardSize) * 0.2) #000, calc(var(--cardSize) * 0.1) calc(var(--cardSize) * 0.1) calc(var(--cardSize) * 0.1) #00000050;
    box-sizing: border-box;
    transition: all 0.5s;
}

.card .innerCard {
    width: calc(var(--cardSize) * 3);
    height: calc(var(--cardSize) * 4);
    font-size: calc(var(--cardSize) * 0.225);
    overflow:hidden;
    border-radius: calc(var(--cardSize) / 2.5);
    padding: calc(var(--cardSize) * 0.1);
    text-align: center;
    box-shadow: inset 0 0 2px #000;    
    background-color: #ffffff;
    background-size:calc(var(--cardSize) * 1.5);
    background-repeat: no-repeat;
    background-position:bottom center;
    box-sizing: border-box;
    transition: all 0.5s;
}

.playerSide .card:hover {
    box-shadow: inset 0 0 calc(var(--cardSize) * 0.2) #000, calc(var(--cardSize) * 0.2) calc(var(--cardSize) * 0.2) calc(var(--cardSize) * 0.3) #00000050;
}

.playerSide .card:hover .innerCard {
    box-shadow: inset 0 0 2px #000, inset 0 0 calc(var(--cardSize) * 0.1) #000;
    border-style: dashed;
}

.card .cardTitle {
    width: 100%;
    text-align: center;
    font-size: 1.5em;
}

.card .cardEffect {
    text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #fff;
    background-color: #ffffff50;
}

.cardAttack { background-image:url(img/attack.jpg); border: solid calc(var(--cardSize) / 2.5) #f0e0e0;}
.cardCounter { background-image:url(img/counter.jpg); border: solid calc(var(--cardSize) / 2.5) #f0e0f0;}
.cardDefend { background-image:url(img/defend.jpg); border: solid calc(var(--cardSize) / 2.5) #e0e0f0;}
.cardParry { background-image:url(img/parry.jpg); border: solid calc(var(--cardSize) / 2.5) #e0f0e0;}

.handCards {
    --cardSize: calc(var(--baseSize) * 7);
    display: flex;
    justify-content: space-around;
    width: 100%;
    flex-wrap: nowrap;
    overflow-y:hidden;
    overflow-x:auto;
    box-sizing: border-box;
}

.handCards.enemyHand {
    --cardSize: calc(var(--baseSize) * 4);
    justify-content: center;
    min-height: calc(var(--baseSize) * 16);
}

.handCards.playerHand {
    height: calc(var(--cardSize) * 4.2);
}

.handCards.enemyHand .card {
    margin: 0 calc(var(--cardSize) * 0.2);
}

.combatCards {
    --cardSize: calc(var(--baseSize) * 6);
    display: flex;
    justify-content: space-around;
    box-sizing: border-box;
    width: calc(var(--baseSize) * 160);
    margin: calc(var(--baseSize) * 1) 0;
}

.slot {
    position: relative;
    width: calc(var(--cardSize) * 3);
    height: calc(var(--cardSize) * 4);
    border: solid 1px #000;
    border-radius: calc(var(--cardSize) / 2.5);
    background-color: #fff;
}

.playerFighter .slot.activeSlot {
    border: solid 1px #00abff;
    box-shadow: 0 0 0 calc(var(--cardSize) * 0.05) #00f8ff, inset 0 0 calc(var(--cardSize) * 0.25) #00abff;
}

.enemyFighter .slot.activeSlot {
    border: solid 1px #ff0030;
    box-shadow: 0 0 0 calc(var(--cardSize) * 0.05) #a00030, inset 0 0 calc(var(--cardSize) * 0.25) #a00030;
}

.slot .slotNum {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
}

.slot .cardHolder {
    z-index: 1;
    position: relative;
}

.slot .cardHolder .card {
    position: absolute;
}

.slot .cardHolder .card.stackedCard {
    left: calc(var(--stack) * var(--cardSize) * 0.25);
}

.fighter .stats {
    position: relative;
    width: calc(var(--baseSize) * 40);
    height: calc(var(--baseSize) * 24);
    background: #ffffff30;
    position: absolute;
    top: 0;
    right: calc(var(--baseSize) * 5);
    border-radius: calc(var(--baseSize) * 1);
    box-sizing: border-box;
    padding: calc(var(--baseSize) * 1);
}

.fighter .stats.enemyStats {
    top: unset;
    bottom: 0;
}

.stats .health {
    
}

.stats .deck {
    --cardSize: calc(var( --baseSize) * 2);
    color: #fff;
    text-align: center;
    line-height: calc(var(--cardSize) * 4);
    font-size: calc(var(--cardSize) * 2);
    text-shadow: 1px 1px 2px #000;
}

.stats .round {
    position: absolute;
    top: calc(var(--baseSize) * -0.5);
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #797979;
    padding: calc(var(--baseSize) * 1);
    border-radius: calc(var(--baseSize) * 1);
    border: solid 1px #000;
    color: #f0f0f0;
    text-shadow: 1px 1px 2px #000;
    box-shadow: inset 0 0 calc(var(--baseSize) * 2) #2a2a2a;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: calc(var(--baseSize) * 2.3);
}

.stats .advantage {
    position: absolute;
    display: flex;
    flex-direction: column;
    right: calc(var(--baseSize) * 1);
    top: calc(var(--baseSize) * 4);
}

.stats .advantage .advantageLine {
    height: calc(var(--baseSize) * 1);
    width: calc(var(--baseSize) * 10);
    background: #a0a0a0;
    border: solid 1px #303030;
    border-radius: calc(var(--baseSize) * 0.5);
    margin-bottom: calc(var(--baseSize) * 0.25);
    box-shadow: inset 0 0 calc(var(--baseSize) * 0.5) #303030;
    transition: all 1s;
}

.stats .advantage .advantageLine.advantageLine_on {
    background: #63ff00;
}

.healthbar {
    position: relative;
    width: calc(20 * var(--baseSize));
    height: calc(2.5 * var(--baseSize));
    background-image: url(img/redGrunge.jpg);
    background-position: left center;
    background-size: calc(var(--val) / var(--max) * 100%);
    background-repeat: no-repeat;
    transition: all 1000ms;
    box-shadow: inset 0 0 0 calc(0.2 * var(--baseSize)) rgb(117 117 117 / 90%), inset calc(0.1 * var(--baseSize)) calc(0.1 * var(--baseSize)) 0 calc(0.3 * var(--baseSize)) rgb(0 0 0 / 25%);
    border-radius: calc(1 * var(--baseSize));
}

.healthbarValue {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: calc(1.5 * var(--baseSize));
}

.healthbarValue:before {
    counter-reset: variable var(--val);
    content: counter(variable);
}

.healthbarValue:after {
    counter-reset: variable var(--max);
    content: counter(variable);
}

.button {
    height: calc(4 * var(--baseSize));
    width: calc(14 * var(--baseSize));
    padding: calc(1 * var(--baseSize)) calc(2 * var(--baseSize));
    position: relative;
    word-wrap: break-word;
    background-image: url(img/purpleButton.png);
    background-size: 100%;
    background-repeat: no-repeat;
    color: #f0f0f0;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
    font-weight: 500;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none;
    touch-action: manipulation;
    vertical-align: middle;
    white-space: nowrap;
    font-family: 'Cinzel Decorative', cursive;
    font-size: calc(1.6 * var(--baseSize));
    filter: drop-shadow(calc(0.2 * var(--baseSize)) calc(0.4 * var(--baseSize)) calc(0.6 * var(--baseSize)) black);
    text-shadow: calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) calc(0.4 * var(--baseSize)) #000, calc(0.2 * var(--baseSize)) calc(0.2 * var(--baseSize)) calc(0.4 * var(--baseSize)) #000;
    flex-wrap: nowrap;
    cursor:pointer;
}

.button:focus {
    outline: 1px transparent;
}
.button:active {
    filter: unset;
    transform: translate(0, calc(0.5 * var(--baseSize)));
}
.button:hover {
    text-shadow: 0 0 10px #fff;
    color: #fff;
}