:root {
    --bs-body-bg:rgb(243, 246, 252);
    --bs-secondary-bg:rgb(68, 71, 70);
    --nav:4rem;
}
html,body {
    overflow-x: hidden;
    overflow-y: hidden;
    max-width: 100%;
    max-height: 100%;
    line-height:1.5 !important;
}
body {
    background-color: var(--bs-body-bg);
    font-size: 2.3vmin!important;
    color:var(--bs-secondary-bg) !important; ;
    user-select: none;

}
:root{
    --field:min(100vmin,calc(100vh - var(--nav)));
}
#field{
    width:var(--field) ;
    height: var(--field);
    position: relative;
    display: block;
    background-color: var(--bs-secondary-bg);
    word-spacing: 1vmin;
    text-align: justify;


}
#field-container {
    left: 50%;
    top:calc(var(--nav) + (100% - var(--nav) - var(--field))/2);
    position: fixed;
    translate: -50%;
    z-index: -99;

}
#candelabra {
    top:var(--nav);
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: calc(100% - var(--nav)) ;
    object-fit: cover;
}
.player {
    width: 100%;
    height: 100%;
    position: absolute;
    top:-3px;
}
.player:nth-child(2) {
    rotate: 90deg;
    left: calc(25% + 3px);
    top:calc(25%);
}
.player:nth-child(3) {
    rotate: 180deg;
    top:calc(50% + 3px);

}
.player:nth-child(4) {
    rotate: 270deg;
    top:calc(25% );
    left: calc(-25% - 3px);
}
.player {
    width: calc(100% - 1px);
    left:0.5px;
    height: calc(50% - 0.5px);
    clip-path:polygon(0% 0%,50% 100%,100% 0%);

}
#cover {
    background-color: var(--bs-body-bg);
}
.whists{
    width: 100%;
    height: 20%;
    position: relative;
}
.whist-field{
    height: 100%;
    background-color: var(--bs-body-bg);
    position: absolute;
}
.whist1 {
    padding-left: 1%;
    padding-right: 10%;
    width: calc((80% - 1px)/3 + 10%);

}
.whist2 {
    left: calc(80%/3 + 0.5px + 10%);
    padding-left: 1%;
    padding-right: 1%;
    width: calc((80% - 1px)/3);

}
.whist3 {
    left: calc(80%/3*2 + 1px + 10%);
    padding-left: 10%;
    padding-right: 1%;
    width: calc((80% - 1px)/3 + 10%);

}
.pool {
    width: 100%;
    height: 20%;
    background-color: var(--bs-body-bg);
    position: relative;
    top:1px;
    padding-left:21%;
    padding-right:21%;
}
.mountain {
    width: 100%;
    height: 25%;
    background-color: var(--bs-body-bg);
    position: relative;
    top:2px;
    padding-left:33%;
    padding-right:33%;
}
.entry:not(:last-child) {
    text-decoration: line-through;

}
.name {
    width: 100%;
    height: 30%;
    background-color: var(--bs-body-bg);
    position: relative;
    top:3px
}
#target-container {
    position: absolute;
    background-color: var(--bs-body-bg);
    width: 10%;
    height: 10%;
    left: 45%;
    top: 45%;
    border-radius:50%;
    border:1px solid var(--bs-secondary-bg);

}
.name-input-container {
    left: 50%;
    top:5%;
    transform: translate(-50%,0);
    position: absolute;


}
.name-input {
    font-size: 2.5vmin!important;
    width: 4vmin !important;
    height: 3.5vmin !important;
    margin: 0!important;
}

.score {
    height: 100%;
    width: 30%;
    left: 50%;
    position: absolute;
    translate: -50% 0;
    text-align: center;
}
.score p {
    width: 100%;
    font-weight: bold;
    line-height: 1!important;
    translate: 0 -0.75vmin;
}
.score p>span:nth-child(1) {
    font-size: 3vmin;
}
.score p>span:nth-child(3) {
    font-size: 1.75vmin;
}

.australia {
    transform: rotate(180deg);
}
.center-text {
    display: flex;
    align-items: center;
}
#edit {
    bottom: 94px;
}
#controls {

}

nav {
    height: var(--nav) !important;
}
#nav-content {
    display:inline-block;
    height: 100%;
}

#dealer-info {
    position: absolute; /* To control exact placement */
    left: 60px; /* Add a 60px margin from the left side of the screen */
    top: 50%; /* Vertically center it within the parent container */
    transform: translateY(-50%); /* Adjust vertical alignment */
    color: white; /* Set the text color to white */
    font-weight: bold; /* Make the text bold for better visibility */
    font-size: 1.2em; /* Adjust the font size if necessary */
}

#raspasi-info {
    position: absolute; /* To control placement */
    right: 60px; /* Add margin from the right edge */
    top: 50%; /* Vertically center within the parent container */
    transform: translateY(-50%); /* Adjust vertical alignment */
    color: white; /* White text color */
    font-weight: bold; /* Bold text for visibility */
    font-size: 1.2em; /* Same size as dealer info */
    display: none; /* Initially hidden */
}

#logo-container {
    height: 70%;
    top: 15%;
    left: 50%;
    translate: -50% 0;
    vertical-align: middle;
    width: auto !important;

    position: absolute;

}
#logo {
    height: 100%;
}

#name {
    position: static;
    vertical-align: middle;

}

#title {
    position: static !important;
}

.fixed-action-btn {
}

#overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    backdrop-filter: blur(3px);
    z-index: 1000;
}

.collection {
    position: fixed;
    top:50%;
    left:50%;
    translate:-50% -50%;
    display: block;
    z-index: 1001;
    width:80vmin;
    border: 0 !important;
}



.minicard {
    border-radius: 5vmin !important;

}
.option {
    height: 10vh !important;
}
.option, .question {
    text-align: center !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    font-size: 5vmin;
}


.minicard:not(:first-child) {
    margin-top: 4vh !important;
}

.question {
    color: black !important;
    background-color: transparent !important;
    border: 0 !important;
    font-weight: bolder;
    height: auto !important;
}

#tricks .minicard {

}

.tricks-number{
    font-size: 5vmin;
    text-align: center;
    line-height: normal!important;
    border-radius: 9vmin;
}

.tricks-number-selected {

}
.force-hide {
    display: none !important;
}
#value .row {
    margin-bottom: 0!important;
}
#value .input-field {
    margin-top: 3vmin!important;
    margin-bottom: 3vmin!important;
}

#value .card {
    box-shadow: none!important;

}


#target {
    width: 100%;
    height: 100%;
    position: relative;
}
#target-input {
    left: 50%;
    top: 50%;
    position: absolute;
    translate: -50% -50%;
    width: 4ch;
    text-align: center;
    font-size: 2.5vmin;
    height: 5vmin;
}

#target-input::-webkit-outer-spin-button,
#target-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#target-input[type=number] {
    -moz-appearance: textfield;
}

#about {
    box-shadow: none;
    -webkit-box-shadow: none;
    z-index: 1001;
    font-size: initial;
}

.modal-close {
    margin-right: 1vmin !important;
}
#copyright{
    position: fixed;
    right: 0;
    bottom: 0;
    font-size: 1vmin;
    margin: 5px;
}