:root {
    --turn-indicator-green: #50C878; /* was rgba(0, 255, 0)*/
    --turn-indicator-yellow: #e4cb79; /* was rgb(255, 187, 0) */

    --jass-mat-background: #3BB143; /* was green #008000*/
    --jass-mat-border: #4F7942; /* was darkolivegreen #556B2F */

    --table-background:  #C99C61; /* was rgb(196, 143, 0) */

    --scoreboard-background: var(--jass-mat-background);
    --scoreboard-border: #55342B; /* was #884422 */

    --ui-color-1: #d3d3d3;
    --ui-color-2: #00A86B;
    --ui-color-3: var(--jass-mat-background);
    --ui-color-4: var(--jass-mat-border);
    --ui-color-5: var(--scoreboard-border);
    
    --player-hand-size: 35vh;
}

html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
    padding: 0;
    margin: 0;
}

body {
    background-color: var(--table-background);
    color: var(--ui-color-1);
    position: fixed;
    font-family: 'Roboto';
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

/**
 * A slightly ligher piece of the table which is used to indicate which player's turn it is
 */
.turnindicator {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vmax; /* any number >= half the diagonal */
    height: 100vmax; /* any number >= half the diagonal */
    z-index: -1;
    transform-origin: 0% 0%;
}

/**
 * Container flexbox.
 * Splits body into three parts, .player2.hand, #innergamecontent and .player0.hand
 */
#gamecontent {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
}

/**
 * Specify size of .player0.hand
 */
#gamecontent > .player0.hand {
    height: var(--player-hand-size);
} 

/**
 * Specify size of .player2.hand
 */
#gamecontent > .player2.hand {
    height: 10%; /* if we change this, also change size of #gamecontent > #innergamecontent > #table > #jassmatwrap and #gamecontent > #innergamecontent > .hand:not(.player0) */
}

/**
 * Container flexbox.
 * Splits middle part of body into three parts, .player1.hand, #table and .player3.hand
 */
#gamecontent > #innergamecontent {
    flex-grow: 1;

    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: stretch;
}

/**
 * Specify size for .player1.hand and .player3.hand (but not .player2.hand)
 */
#gamecontent > #innergamecontent > .hand:not(.player0) {
    width: 10vh; /* if we change this, also change size of #gamecontent > #innergamecontent > #table > #jassmatwrap and #gamecontent > .hand:not(.player0) */
}

/**
 * Container flexbox for the table, or just the jassmat in this case.
 * Used to center the jassmat.
 */
#gamecontent > #innergamecontent > #table {
    flex-grow: 1;

    display: flex;
    justify-content: center;
}

/**
 * Container whose width is the smaller of max available width and max available height.
 *
 *     max-width = 55% * viewport.height   // max available height
 *     width = parent.width                // max available width
 *     calculatedWidth = min(width, max-width)
 *
 * The width of this container is the side length of the largest fitting square. We need this length in #jassmatborder.
 */
#gamecontent > #innergamecontent > #table > #jassmatwrap {
    max-width: calc(100vh - var(--player-hand-size) - 10vh);    /* 100vw - ownhand.height - otherhandtop.width */
    width: 100%;
    
    display: flex;
    align-items: center;
}

/**
 * The maximum size square container that fits into #table.
 * Due to a weirdness in the specification, using percentages in padding-bottom (and top) actually refers to the parent
 * width instead of height. This way, we can "translate" widths to heights.
 * 
 * Essentially, what we want is something like this:
 *
 *     calculatedWidth = calculatedHeight = min(maxAvailableWidth, maxAvailableHeight)
 *
 * While replicating the min function is not particularly hard (by setting both maxWidth and width), feeding it both a
 * width and a height argument turns out to be somewhat tricky, as there are only a few ways to set the height of an
 * element to another element's width. One of the ways to do so is the viewport-based units (vw, vh, vmin and vmax),
 * which allow us to set the width of an element to the height of the entire page. Another is padding-bottom, thanks to
 * the weirdness detailed above. So, essentially, what our CSS does is:
 *     
 *     #jassmatwrap.max-width = 55% * viewport.height
 *     #jassmatwrap.width = #table.calculatedWidth
 *     #jassmatwrap.calculatedWidth = min(#jassmatwrap.width, #jassmatwrap.max-width) // + padding, but that's 0 here
 *     
 *     #jassmatborder.width = 100% * #jassmatwrap.calculatedWidth
 *     #jassmatborder.height = 0
 *     #jassmatborder.padding-bottom = 100% * #jassmatwrap.calculatedWidth
 *     #jassmatborder.calculatedHeight = #jassmatborder.height + #jassmatborder.padding-bottom
 *
 * For reference, another way to achieve the same result is to scale up a 1x1 image (or SVG element).
 */
#gamecontent > #innergamecontent > #table > #jassmatwrap > #jassmatborder {
    position: relative;
    width: 100%;
    padding-bottom: 100%;

    background-color: var(--jass-mat-border);
    border-radius: 20px;
}


/**
 * GUI elements should have z-index 10000
 */
#gui * {
    z-index: 10000;
}

/**
 * The container which contains the slider and its label. It's a column flexbox
 */
.slidercontainer {
    width: 100%;
    padding-bottom: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/**
 * The Slider element itself
 */
#slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;   
    background: var(--ui-color-1);
    outline: none;
    opacity: 1;
    transition: opacity .2s;
}
  
/**
 * The slider thumb that is used to drag the slider around. Needs definitions for Webkit/Blink, Firefox and IE resp.
 */
#slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background: var(--ui-color-2);
    cursor: pointer;
}
#slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background: var(--ui-color-2);
    cursor: pointer;
}
#slider::-ms-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: none;
    background: var(--ui-color-2);
    cursor: pointer;
}

/**
 * A fullscreen container div containing the popup container.
 */
.pop-up-window-container {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.5);   
    transition: 0.2s background-color;   
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: scroll;
}

.pop-up-window-container#diff, .pop-up-window-container#trumpf-container {
    padding-bottom: var(--player-hand-size);
}

/**
 * A popup window. Flexbox container containing the window's content
 */
.pop-up-window {
    width: 85%;
    max-width: 600px;
    background-color: var(--ui-color-3);
    padding: 2%;

    
    border: 1vmin solid var(--ui-color-1);
    border-radius: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/** Styling for select gui elements
*/

.select {
    width: 24%;

    border-radius: 20px;
    background-color: var(--ui-color-4);

    background-image: url(assets/sprites/ui/select.png);

    border: 0.8vmin solid var(--ui-color-1);
    border-width: 0px 0px 0.8vmin 0px;
    
    color: var(--ui-color-1);
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;

    padding: 10px;
    margin: 10px;
    text-align: center;
    font-size: 20px;
}

.select::-ms-expand {
	display: none;
}

.select:hover {
    color: var(--ui-color-4);
    background-color: var(--ui-color-1);
}

.select:focus {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.select-option {
    border: 0.8vmin solid var(--ui-color-1);
    border-width: 0px 0px 0.8vmin 0px;
    background-color: var(--ui-color-4);
    color: var(--ui-color-1);
}
	

/**
* Styling for Button gui Elements
*/

.info-field {
    text-align: center;
    background-color: var(--ui-color-4);

    border: 0.8vmin solid var(--ui-color-1);
    border-radius: 20px;

    padding: 40px;
    margin: 20px;
}

.button {
    width: 20%;
    border-radius: 20px;
    background-color: var(--ui-color-4);
    border-bottom: 0.8vmin solid var(--ui-color-1);
    color: var(--ui-color-1);
    padding: 10px;
    margin: 10px;
    text-align: center;
    font-size: 20px;
}

.button:hover {
    color: var(--ui-color-4);
    background-color: var(--ui-color-1);
}

.title-1 {
    font-size: 70px;
}

.title-2 {
    font-size: 40px;
}

#waiting-player-container {
    white-space: pre-wrap;
}

/**
 * Wrapper for scoreboard and last stich card
 */
#top-right-button-wrapper {
    position: absolute;
    display: flex;
    top: 2%;
    right: 2%;
}

@media (max-aspect-ratio: 3/4) {
    #top-right-button-wrapper {
        flex-direction: column-reverse;
    }
}

@media (min-aspect-ratio: 3/4) {
    #top-right-button-wrapper {
        flex-direction: row-reverse;
    }
}

#top-right-button-wrapper > div {
    margin: 1vmin;
    
    width: 14.5vmin;
    height: 18vmin;
    max-width: calc(75px + 1.5vmin);
    max-height: calc(100px + 1.5vmin);

    border: 1.5vmin solid blanchedalmond;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 4px;
    box-sizing: border-box;
    overflow: hidden;
}

/**
 * The button that displays the scoreboard.
 */
 #top-right-button-wrapper > .toggle-scoreboard {
    background-color: var(--scoreboard-background);
    border-color: var(--scoreboard-border);

    font-size: 2px;
}

/**
 * Make the scoreboard a tiny bit bigger on hover.
 */
 #top-right-button-wrapper > .toggle-scoreboard:hover {
    transform: scale(1.1);
}

/**
 * The button that displays the last stich.
 */
 #top-right-button-wrapper > .toggle-last-stich {
    background-image: url(assets/sprites/jass/cardset.png);
    background-size: 1000% 400%;
    background-position: -900% 0%;
    border-color: white;
}

/**
* Make last Stich Button bigger
*/
#top-right-button-wrapper > .toggle-last-stich:hover {
    transform: scale(1.1);
}

/**
 * Card to show in the last stich GUI
 */
#gui .last-stich-cardholder {
    --actual-width: 10vmin;
    width: var(--actual-width);
    height: calc(var(--actual-width) * 178 / 127);
    display: inline-block;

}

#gui .last-stich-cardholder > .card {
    width: 100%;
    height: 100%;
}

.stichtable-entry {
    text-align:center;
}


.stichtable {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
}

/**
 * The scoreboard window should have a green background and brown border
 */
#score-window {
    background-color: var(--scoreboard-background);
    border: 2.5vmin solid var(--scoreboard-border);
    border-radius: 25px;
}

/**
 * Collapse the score table's borders
 */
.scoretable {
    border-collapse: collapse;
}

/**
 * Score table cells should have some padding
 */
.scoretable > * > * > th, .scoretable > * > * > td {
    padding: 20px;
}

/**
 * Border between every two columns of the scoreboard (but not on the sides)
 */
.scoretable > * > * > th:not(:first-child), .scoretable > * > * > td:not(:first-child) {
    border-left: 2px solid var(--ui-color-1);
}

/**
 * Border between the head and the body of the scoreboard
 */
.scoretable > thead {
    border-bottom: 2px solid var(--ui-color-1);
}

/**
 * Align the numbers on the scoreboard
 */
.scoretable > * > * > td:not(:first-child) {
    text-align: center;
}


/**
 * Border thickness can't be a percentage, so we replicate the behaviour by just creating a slightly smaller and
 * differently colored #jassmat element inside of #jassmatborder.
 */
#jassmat {
    position: absolute;
    top: 2.5%;
    left: 2.5%;
    bottom: 2.5%;
    right: 2.5%;

    background-color: var(--jass-mat-background);
    border-radius: 20px;
}

/**
 * Container div for all cards on the jass mat. We use the following formulas to find the hard-coded values:
 *
 *     #matcardwrap.width = 40% * #jassmat.width
 *     #matcardwrap.height = 178/127 * #matcardwrap.width
 *     #matcardwrap.top = 100% - #matcardwrap.height
 *
 * Note that #jassmat.width == #jassmat.height.
 */
#jassmat > #matcardwrap {
    position: absolute;
    top: 43.93700787%;
    bottom: 0%;
    width: 40%;
    left: 50%;
    transform: translate(-50%, 0%);
}

/**
 * The jass cards on the jass mat. Their rotation origin is the center of the jass mat, which can be determined as
 * follows:
 *
 *     .card.transform-origin-y = (100% - 50% * jassmat.height / #matcardwrap.height) * #matcardwrap.height
 *
 * However, since animations with non-center origin look weird, we instead transform the cards down below in
 * #jassmat .card.playerX.
 *
 * We need to specify left and top coordinates so the animation works.
 */
#jassmat .card {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transition: 0.3s ease left, 0.3s ease top, 0.3s ease transform, 0.3s ease transform-origin, 0.3s ease width, 0.3s ease height;
    z-index: 2;
}

/*
 * Rotations for each of the four players
 */
#jassmat .card.player0 { transform: translateY(-39.18539326%) rotate(0deg) translateY(39.18539326%); }
#jassmat .card.player1 { transform: translateY(-39.18539326%) rotate(-90deg) translateY(39.18539326%); }
#jassmat .card.player2 { transform: translateY(-39.18539326%) rotate(-180deg) translateY(39.18539326%); }
#jassmat .card.player3 { transform: translateY(-39.18539326%) rotate(-270deg) translateY(39.18539326%); }

/**
 * Cards in any hand should have z-index 1
 */
.hand > :not(.stiche) .card {
    z-index: 1;
}

/**
 * A player hand. Flexbox containing .cardholderwrap and .stiche (both centered horizontally and vertically)
 */
.hand {
    position: relative;
    z-index: 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

/**
 * The own player's hand should always have 100% of the size of the parent (the other hands are managed by a flexbox)
 */
.player0.hand {
    width: 100%;
    height: 100%;
}

/**
 * The stiche container should be positioned beyond the screen in one coordinate, and its other coordinate is centered
 * (see .hand)
 */
.hand > .stiche {
    position: fixed;
    width: 0;
    height: 0;
}
.player0.hand > .stiche { top: 150vh; }
.player1.hand > .stiche { left: 150vw; }
.player2.hand > .stiche { top: -50vh; }
.player3.hand > .stiche { left: -50vw; }

/**
 * Cards inside the stiche container should have 0 width, 0 height.
 */
.hand > .stiche > .card {
    position: absolute;
    left: 0;
    top: 0;
    transform: none;
    width: 0;
    height: 0;
    transition: 0.6s ease left, 0.6s ease top, 0.6s ease transform, 0.6s ease transform-origin, 0.6s ease width, 0.6s ease height;
}

/**
 * Container whose width is min(20% * viewport.height, 30% * viewport.width)
 * See #jassmatwrap and #jassmatborder
 */
.hand > .cardholderwrap {
    position: absolute;
    width: 20vh;
    max-width: 30vw;
}

/**
* Move the player name fields in front of the cards. 
* Also ads a rounded border and transparent background
*/
.hand > .namefield {
    z-index: 3;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 25px;
    padding: 10px;
    white-space: nowrap;
}

@media only screen and (max-width: 750px) {
    /** 
    * rotate the namefield of the right and left player
    */
    .player1.hand > .namefield {transform: rotate(90deg);}
    .player3.hand > .namefield {transform: rotate(-90deg);}
}

/**
 * The wraps on top and bottom should have a height of 100% the container's height. The wraps on left and right should
 * have a height of 100% the container's width 
 */
.player0.hand > .cardholderwrap, .player2.hand > .cardholderwrap { height: 100%; }
.player1.hand > .cardholderwrap, .player3.hand > .cardholderwrap { padding-bottom: 100%; }

/**
 * Rotate the card holders depending on their position
 */
.player0.hand > .cardholderwrap { transform: rotate(0deg); }
.player1.hand > .cardholderwrap { transform: rotate(-90deg); }
.player2.hand > .cardholderwrap { transform: rotate(-180deg); }
.player3.hand > .cardholderwrap { transform: rotate(-270deg); }

/**
 * Container with the size of a card, aspect ratio 127/178 (a card).
 *
 *     calculatedWidth = min(20% * viewport.height, 30% * viewport.width)
 *     calculatedHeight = 178/127 * min(20% * viewport.height, 30% * viewport.width)
 *
 * See #jassmatborder.
 */
.hand > .cardholderwrap > .cardholder {
    position: absolute;
    width: 100%;
    padding-bottom: 140.15748%;
}

.player0.hand > .cardholderwrap > .cardholder { bottom: 10%; }
.player1.hand > .cardholderwrap > .cardholder { top: 10%; }
.player2.hand > .cardholderwrap > .cardholder { top: 10%; }
.player3.hand > .cardholderwrap > .cardholder { top: 10%; }

/**
 * The cards should take the same width as .cardholder, rotate around a point 15% below their bottom center, and not
 * receive the ugly grey frame when tapped on iOS.
 */
.hand > .cardholderwrap .card {
    position: absolute;
    transform-origin: 50% 115%;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    transition: transform 0.2s, filter 0.2s;
}

/**
 * If the user hovers over a card, move the underlying image up by 5%.
 */
body:not(.spectating) .player0.hand .card:not(.unselectable):hover > .cardimg {
    transform: translate(0%, -5%);
}

/**
 * Darken out cards that can't be selected
 */
.player0.hand .card.unselectable {
    filter: brightness(0.65);
}

/**
 * Background of each card is the spritesheet. Border radius 3.5%, and a tiny shadow
 */
.card > .cardimg {
    background-color: white;
    background-image: url(assets/sprites/jass/cardset.png);
    background-size: 1000% 400%;
    background-position: -900% 0%;
    width: 100%;
    height: 100%;
    border-radius: 3.5%;
    box-shadow: 0px 0px 2px 0px grey;
}


/**
 * Cards
 */
.card.schelle.sechs > .cardimg      { background-position:    0%    0%; }
.card.schelle.sieben > .cardimg     { background-position: -100%    0%; }
.card.schelle.acht > .cardimg       { background-position: -200%    0%; }
.card.schelle.neun > .cardimg       { background-position: -300%    0%; }
.card.schelle.zehn > .cardimg       { background-position: -400%    0%; }
.card.schelle.under > .cardimg      { background-position: -500%    0%; }
.card.schelle.ober > .cardimg       { background-position: -600%    0%; }
.card.schelle.koenig > .cardimg     { background-position: -700%    0%; }
.card.schelle.ass > .cardimg        { background-position: -800%    0%; }

.card.eichel.sechs > .cardimg       { background-position:    0% -100%; }
.card.eichel.sieben > .cardimg      { background-position: -100% -100%; }
.card.eichel.acht > .cardimg        { background-position: -200% -100%; }
.card.eichel.neun > .cardimg        { background-position: -300% -100%; }
.card.eichel.zehn > .cardimg        { background-position: -400% -100%; }
.card.eichel.under > .cardimg       { background-position: -500% -100%; }
.card.eichel.ober > .cardimg        { background-position: -600% -100%; }
.card.eichel.koenig > .cardimg      { background-position: -700% -100%; }
.card.eichel.ass > .cardimg         { background-position: -800% -100%; }

.card.roesle.sechs > .cardimg       { background-position:    0% -200%; }
.card.roesle.sieben > .cardimg      { background-position: -100% -200%; }
.card.roesle.acht > .cardimg        { background-position: -200% -200%; }
.card.roesle.neun > .cardimg        { background-position: -300% -200%; }
.card.roesle.zehn > .cardimg        { background-position: -400% -200%; }
.card.roesle.under > .cardimg       { background-position: -500% -200%; }
.card.roesle.ober > .cardimg        { background-position: -600% -200%; }
.card.roesle.koenig > .cardimg      { background-position: -700% -200%; }
.card.roesle.ass > .cardimg         { background-position: -800% -200%; }

.card.schilte.sechs > .cardimg      { background-position:    0% -300%; }
.card.schilte.sieben > .cardimg     { background-position: -100% -300%; }
.card.schilte.acht > .cardimg       { background-position: -200% -300%; }
.card.schilte.neun > .cardimg       { background-position: -300% -300%; }
.card.schilte.zehn > .cardimg       { background-position: -400% -300%; }
.card.schilte.under > .cardimg      { background-position: -500% -300%; }
.card.schilte.ober > .cardimg       { background-position: -600% -300%; }
.card.schilte.koenig > .cardimg     { background-position: -700% -300%; }
.card.schilte.ass > .cardimg        { background-position: -800% -300%; }

/*
* order the different trumpf options
*/

#trumpf-window-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 400px;
    justify-content: center;
}

/**
 * The buttons to select the trump.
 */
 .trumpf-choose {
    background-repeat: no-repeat;
    background-size: cover;
    width: 10vmin;
    height: 10vmin;
    max-width: 50px;
    max-height: 50px;
}

/**
 * The trumpf indicator should be at the bottom right. Additionally, you should bea ble to click through it.
 */
#trumpf {
    position: absolute;
    right: 24px;
    bottom: 24px;
    background-repeat: no-repeat;
    background-size: cover;
    width: 10vmin;
    height: 10vmin;
    max-width: 150px;
    max-height: 150px;
    pointer-events: none;
}

/**
 * Trumpf selection screen icons
 */
.trumpf-choose.schieb  { background-image: url(assets/sprites/jass/schieb.png); }
.trumpf-choose.roesle { background-image: url(assets/sprites/jass/roesle.png); }
.trumpf-choose.schilte { background-image: url(assets/sprites/jass/schilte.png); }
.trumpf-choose.eichel { background-image: url(assets/sprites/jass/eichel.png); }
.trumpf-choose.schelle { background-image: url(assets/sprites/jass/schelle.png); }
.trumpf-choose.obe { background-image: url(assets/sprites/jass/obe_abe.png); }
.trumpf-choose.une { background-image: url(assets/sprites/jass/une_ufe.png); }

/**
 * Trumpf indicator symbols
 */
#trumpf.schieb                      { background-image: url(assets/sprites/jass/schieb.png); }
#trumpf.roesle                      { background-image: url(assets/sprites/jass/roesle.png); }
#trumpf.schilte                     { background-image: url(assets/sprites/jass/schilte.png); }
#trumpf.eichel                      { background-image: url(assets/sprites/jass/eichel.png); }
#trumpf.schelle                     { background-image: url(assets/sprites/jass/schelle.png); }
#trumpf.obe                         { background-image: url(assets/sprites/jass/obe_abe.png); }
#trumpf.une                         { background-image: url(assets/sprites/jass/une_ufe.png); }