@import "variables";
#head {
    display: block;
    height: $head_height;
    margin: 0;
    padding: 0;
    overflow:scroll;
}

@media screen and (max-width: $screen-transition-width) {
    #head {
        height: $head_height_mob;
        margin-top: calc(#{$head_top_vh} - #{$head_top_vw});
    }
}

@mixin player-image {
    position: absolute;
    display: inline-block;
    z-index: 1;

    height: $head_height * 0.6;
    margin: $head_height * 0.2;
    
    top: 0;
}

img.player-image-left {
    left: calc(50% - #{$board_size / 2 + $board_border});
    @include player-image;
}

img.player-image-right {
    left: calc(50% + #{$board_size / 2 + $board_border - $head_height});
    @include player-image;
}

@media screen and (max-width: $screen-transition-width) {
    @mixin player-image-mob {
        height: $head_height_mob * 0.4;
        margin: $head_height_mob * 0.3;
        top: calc(#{$head_top_vh} - #{$head_top_vw});
    }

    img.player-image-left {
        left: calc(50% - #{$board_size_mob / 2 + $board_border_mob + $label_width_mob * 0.3});
        @include player-image-mob;
    }
    
    img.player-image-right {
        left: calc(50% + #{$board_size_mob / 2 + $board_border_mob - $head_height_mob + $label_width_mob * 0.3});
        @include player-image-mob;
    }
}

.turn {
    width: 20vh;
    height: $label_height;

    margin: 0 auto;
    margin-top: calc(#{$head_height / 2} - #{$label_height});
    background-color: black;
    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

.turn h2 {
    font-size: $label_height - 1;
}

.turn .border {
    height: $label_height;

    margin: 0 auto;
    margin-top: 4vh;
    background-color: black;
    clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%);
}

.turn .inner {
    height:100%;
    width: 100%;
    text-align: center;
    background-color: $background-color;
    clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%);
}

@mixin player-label {
    width: $label_width;
    height: $label_height;

    font-size: 3vh;
    text-align: center;

    background-color: #000b;
    color: white;
    position: absolute;
    top: calc(#{$head_height / 2 - $label_height / 2});
}

div.player-label-left {
    clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%);
    left: calc(50% - #{$board_size / 2 + $board_border - $label_width * $label_margin});
    @include player-label;
}

div.player-label-right {
    clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%);
    left: calc(50% + #{$board_size / 2 + $board_border - $label_width * ($label_margin + 1)});
    @include player-label;
}

@media screen and (max-width: $screen-transition-width) {
    @mixin player-label-mob {
        width: $label_width_mob;
        height: $label_height_mob;
        font-size: $label_height_mob - 1;

        top: #{calc(#{$head_top_vh} - #{$head_top_vw} + #{$head_height_mob / 2} - #{$label_height_mob / 2})};
    }
    div.player-label-left {
        left: calc(50% - #{$board_size_mob / 2 + $board_border_mob - $label_width_mob * $label_margin_mob});
        @include player-label-mob;
    }
    
    div.player-label-right {
        left: calc(50% + #{$board_size_mob / 2 + $board_border_mob} - #{$label_width_mob * ($label_margin_mob + 1)});
        @include player-label-mob;
    }
}