html {
    --global-background: rgba(15, 30, 15, 1);
    user-select: none;
    height: 100%;
    background: var(--global-background);
}

.pref_card_table
{
    --trans_delta: 0.3s; /* duration of generic transitions */
    --trans_delta_opacity: 0.3s; /* opacity should change a bit faster */
    --trans_delay: 0.05s; /* generic transition delay */
    --intercard_skip: 40px; /* horizontal distance between cards */
    --blank_intercard_skip: calc(1/2*var(--intercard_skip)); /* horizontal distance between flipped cards */
    --intersuit_skip: 60px; /* vertical distance between cards */
    --card_width: 63px;
    --pot-scale: calc(45/63);
    --pot-card_width: 45px;
    --card_indent: 0px; /* space before the hand starts */
    --card_protrude: 16px; /* the amount by which cards in alternating suits stick out */
    --card_pick_angle: -5deg; /* the angle of rotation for a selected card */
    --card_protrude_selected: 8px;
    --hand-header-height: 38px;
    --hand-footer-height: 38px;
    --play-table-footer-skip: 30px;
    --play-table-bottom-skip: 30px;
    --info-field-diam: 24px;
    --stash-factor: .5;
    --stash-scale: calc(var(--stash-factor) * 100%);
    
    /* settings for neumorphic buttons */
    --neu-bg-dark: rgba(5, 10, 5, 1);
    --neu-bg-light: rgba(15, 40, 15, 1);
    --neu-bg-light: rgba(20, 45, 15, 1);
    
    --neu-gd-dark: rgba(15, 20, 15, 1);
    --neu-gd-light: rgba(15, 40, 15, 1);
    --neu-gd-light: rgba(250, 250, 250, 1);

    --neu-border-dormant: rgba(40, 40, 40, 1);
    
    --neu-border-receptive: rgba(70, 30, 30, 1);
    --neu-border-focused: rgba(90, 30, 30, 1);
    --neu-border-active: rgba(220, 70, 70, 1);
    
    --neu-border-receptive: rgba(220, 68, 25, 1);
    --neu-border-focused: rgba(200, 90, 30, 1);
    --neu-border-active: rgba(190, 120, 70, 1);
    
    --neu-text-color: rgba(100, 100, 100, 1);
    --neu-text-color: black;
    --neu-round-diam: 60px;
    --neu-font-size: 13px;    
    --neu-round-bd-width: 5px;
    --neu-round-light-spread: 6px;
    --neu-round-dark-spread: 5px;
    --neu-round-light-disp: -4px;
    --neu-round-margin: 6px;
    --neu-trans-delta: 0.5s;
    --neu-push-trans-delta: 0.25s;
    display: flex;
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    perspective: 800px;
}

.anchored_deck
{
    height: 100%;
    width: 0px;
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pot_spacer
{
    width: 0px;
    height: 20px;
}

.pref_hand_left,
.pref_hand_right
{
    display: flex;
    flex-direction: column;
}

.pref_hand_middle
{
    display: flex;
    flex-direction: row;
    position: relative;
    min-height: var(--intersuit_skip);
}

.left_landing_area,
.right_landing_area
{
    display: grid;
    height: 100%;
    margin-left: 30px;
    margin-right: 30px;
    gap: 10px;
    grid-template-areas:     'space_ul space_um space_ur'
                             'space_ll space_lm space_lr';
    grid-template-columns: calc(var(--stash-factor)*var(--card_width))
                               calc(var(--stash-factor)*var(--card_width))
                               calc(var(--stash-factor)*var(--card_width));
    grid-template-rows: 50% 50%;
    opacity: 0;
    background: radial-gradient(black, rgba(15, 30, 15, 1), rgba(15, 30, 15, 1));
    transition: opacity 0.5s;
    transition-delay: 0.2s;
}


.left_landing_area.area_active
{
    opacity: 1;
}

.card_ul
{
    grid-area: space_ul;
}

.card_ur
{
    grid-area: space_ur;
}

.card_um
{
    grid-area: space_um;
}

.pot_card_stash
{
    width: calc(var(--stash-scale)*var(--pot-card_width));
    width: 100%;
    margin-top: -50%;
}

.card_lm
{
    grid-area: space_lm;
}

.card_ll
{
    grid-area: space_ll;
}

.card_lr
{
    grid-area: space_lr;
}


.card_ul,
.card_ur,
.card_um,
.card_lm,
.card_ll,
.card_lr
{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
}



.pref_hand_left,
.pref_hand_right
{
    flex-grow: 2;
    justify-content: space-between;
    flex-basis: calc(6*var(--intercard_skip));
    min-height: calc(var(--intersuit_skip)*5 + var(--hand-header-height) + var(--hand-footer-height));
}

.hand_header_left,
.hand_header_right,
.hand_footer_left,
.hand_footer_right
{
    height: var(--hand-header-height);
    display: flex;
    flex-direction: row;
    align-items: center;
}

.hand_footer_left
{
    justify-content: flex-end;
}

.hand_footer_right
{
    justify-content: flex-start;
}

.pref_hand_left
{
    align-items: flex-end;
}

.pref_play_space
{
    flex-grow: 12;
    display: grid;
    width: calc(6*var(--card_width));
    gap: 10px;
    grid-template-columns: auto var(--card_width) auto var(--card_width) auto;
    grid-template-rows: calc(4/3*var(--intersuit_skip)) calc(3/2*var(--intersuit_skip)) auto calc(var(--intersuit_skip));
    grid-template-areas:
        'header     header    header      header     header'
        'space_left card_left ic_skip     card_right space_right'
        'space_left skip_left card_middle skip_right space_right'
        'footer     footer    footer      footer     footer';    
}

.left_card,
.right_card,
.middle_card,
.pot_card0,
.pot_card1
{
    background: pink;
    background: none;
}

.space_left,
.space_right
{
    position: relative;
    min-width: calc(var(--card_width));
}

.space_left
{
    grid-area: space_left;
}

.space_right
{
    grid-area: space_right;
}

.left_card
{
    grid-area: card_left;
    background: green;
    background: none;
}

.right_card
{
    grid-area: card_right;
    background: green;
    background: none;
}

.middle_card_area
{
    grid-area: card_middle;
    display: flex;
    justify-content: center;
}

.center_card
{
    width: var(--card_width);
    background: brown;
    background: none;
}

.center_card
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.play_space_footer
{
    grid-area: footer;
    display: flex;
    background: rgba(10, 110, 110, 1);
    background: none;
}

.middle_footer_area
{
    flex-grow: 8;
    display: flex;
    align-self: flex-end;
    justify-content: center;
    align-items: center;
}

.left_player_area,
.right_player_area
{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.left_player_area
{
    align-items: flex-end;
}

.right_player_area
{
    align-items: flex-start;
}

.player_name
{
    width: fit-content;
    margin-left: 5px;
    margin-right: 5px;   
}

.player_name,
.player_numeric
{
    color: white;
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
}

.player_numeric
{
    --pnumeric-bd-width: 3px;
    width: calc(var(--info-field-diam) + 6px);
    height: calc(var(--info-field-diam) + 6px);
    border-radius: calc( 1/2*var(--info-field-diam) + var(--pnumeric-bd-width));
    border-radius: calc( 1/2*var(--info-field-diam) + var(--pnumeric-bd-width) + 3px);
    border: var(--pnumeric-bd-width) solid white;
    box-shadow: -1px -1px 4px 1px rgba(5, 10, 10, 1) inset, 2px 2px 4px 1px  rgba(15, 80, 15, 1) inset ;
    color: black;
    background: rgba(15, 40, 15, 1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.player_name,
.player_numeric
{
    color: white;
    text-shadow: 1px 1px 2px black, 0 0 1em black, 0 0 0.2em black;
}

.player_bid
{
    min-width: var(--info-field-diam);
    width: fit-content;
    height: var(--info-field-diam);
    border-radius: calc(1/5*var(--info-field-diam) + 3px);
    border: 3px solid gray;
    color: black;
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    padding-left: 2px;
    padding-right: 2px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

.player_numeric,
.player_bid
{
    visibility: hidden;
}

.player_numeric.display_area_active,
.player_bid.display_area_active
{
    visibility: visible;
}

.skip_right
{
    grid-area: skip_right;
}

.skip_right
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.skip_left
{
    grid-area: skip_left;
}

.skip_left
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

.play_space_header
{
    grid-area: header;
    height: 100%;
    display: flex;
    background: rgba(110, 110, 10, 1);
    background: none;
    justify-content: center;
    align-items: center;
}

.pot_place
{
    grid-area: ic_skip;
    display: flex;
    justify-content: center;
}

.pot_card0,
.pot_card1
{
    width: var(--card_width);
}

.pref_hand_right
{
    align-items: flex-start;
}

.pref_hand_middle
{
    width: 100%;
    align-items: center;
    justify-content: center;
}

.pref_hand_middle_above,
.pref_hand_middle_below,
.pref_hand_header
{
    display: flex;
    width: 100%;
    align-items: center;
    height: calc(var(--play-table-footer-skip));
}

.pref_hand_middle_below,
.pref_hand_header
{
    justify-content: flex-start;
}

.pref_hand_header
{
    flex-direction: column;
}

.pref_hand_middle_above
{
    flex-direction: row;
    justify-content: center;
    z-index: 8;
}

.virtual_hand
{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}

.anchored_deck.flat_hand
{
    margin-top: calc(-8.5*var(--intersuit_skip));
    
}

.anchored_deck.virtual_hand .card_control.card_active .card_front img
{
    transform: translate(0px, 0px);
    transition: transform 0.3s;
}

.anchored_deck.virtual_hand .card_control.card_active.card_stashed .card_front img:hover
{
    transform: scale(2);
}

.anchored_deck.virtual_hand .card_control:hover
{
    z-index: 10;
}

.pref_hand_left_spacer,
.pref_hand_right_spacer
{
    flex-grow: 1;
    min-width: 10px;
}

.player_name.round_anchor
{
    color: rgb(250, 0, 50);
}

.player_name.round_anchor1
{
    text-shadow: 0px 0px 5px white;
    color: rgb(120,250,100);
}

.breathing_text {
    animation: 1000ms pulse1;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes pulse1 {
  0% {
    transform: scale(0.5);
    opacity: .1;
  }

  35% {
    opacity: .7;
  }

  67% {
    transform: scale(0.9);
    opacity: .8;
  }

  80% {
    opacity: .9;
  }

  95% {
    transform: scale(1);
  }

  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* 3d transform testing */

.test_vector_container {
    position: absolute;
    transform-style: preserve-3d;
}

.test_vector_shell {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: fit-content;
    height: fit-content;
    transform: rotateY(90deg);
}

.test_vector_north {
    width: 100px;
    height: 100px;
    background: gray;
}

.test_vector_south {
    width: 100px;
    height: 100px;
    background: red;
}

.trick_count_window
{
    display: flex;
    justify-content: flex-start;
    width: 34px;
    overflow: hidden;
    border: 1px solid black;
    box-shadow: 3px 3px 3px 0px rgba(50, 50, 50, 1) inset;
    background: gray;

}

.trick_count_frame
{
    position: relative;
}

.tricks_left,
.tricks_right
{
    width: 34px;
    flex-shrink: 0;
    margin-left: 0px;
    color: rgba(250, 250, 250, .8)
}

.tricks_label
{
    position: absolute;
    width: fit-content;
    transform: translate(calc(0px - 100% - 5px), 0px);
    color:rgba(250, 250, 250, .5)
}

.text_board
{
    background: white;
    border-radius: 8px;
    border: 1px dashed black;
    transform: translate(-45%, -45%) scale(0.2);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    row-gap: 10px;
    left: 0px;
    top: 0px;
    min-width: 300px;
    opacity: 0.05;
    font-size: 12px;
    font-family: courier;
    transition: opacity 0.5s, transform 0.5s;
    z-index: 10;
}

.text_board:hover
{
    opacity: 1;
    transform: translate(0px, 0px);
}
                
.scores_info
{
    padding-left: 5px;
    width: fit-content;
}

.suit_color0
{
    color: black;
}

.suit_color1
{
    color: black;
}

.suit_color2
{
    color: red;
}

.suit_color3
{
    color: red;
}

.suit_color4
{
    color: green;
}