/*
    These styles are meant for specific components and classes for the game.
    Only ID and Class selectors are used.
*/

/* CLASS */

.player-stats-bar{
    position: absolute;
    top: 16px;
    display: flex;
    width: 1024px;
    justify-content: space-between;
    align-items: center;
    padding: 0px 43px;
    z-index: 1;
}

.player-stats-bar p,
.game-menu p,
.player-dig-progress-bar p{
    font-family: 'comfortaa', sans-serif;
}

.player-stats-bar p,
.game-menu p{
    color: white;
}

.player-action-bar{
    position: absolute;
    bottom: 32px;
    display: flex;
    width: 1024px;
    justify-content: space-between;
    align-items: center;
    padding: 11px 48px;
    z-index: 1;
}

.player-action-bar p,
.player-action-bar button{
    font-family: 'Wire One', sans-serif;
    color: white;
    font-weight: 400;
    opacity: 1;
    font-size: 34px;
    text-transform: uppercase;
    margin: 0;
    background-color: transparent;
    border: none;
}

.player-action-bar p.selected,
.player-action-bar button.selected {
    color: gold;
    font-weight: bold;
}

.player-action-bar p:hover,
.player-action-bar button:hover {
    color: darkslategray;
    cursor: pointer;
}

.player-action-bar.hidden{
    display: none;
}

.ui-island{
    background: grey;
    border-radius: 45px;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.modal-content button {
    margin: 10px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background-color: white;
    cursor: pointer;
}

.treasure-field{
    /* background-color: cyan; */
    /* opacity: 0.61; */
    width: 100%;
    height: 480px;
    position: relative;
    top: 89px;
    cursor: cell;
}

.treasure-field.hidden{
    display: none;
    z-index: -1;
}

.treasure-point{
    width: 4px;
    height: 4px;
    /* background-color: red; */

    position: absolute;
}

.treasure-found {
    position: absolute;
}

/* goldrush slots */
.slot-box {
    font-size: 55px;
    margin: 21px auto;
}

.reel {
    display: inline-block;
    width: 144px;
    height: 144px;
    border: 2px solid  var(--silver-grey);
    margin: 5px;
    text-align: center;
    object-fit: contain;
}

.spin-button {
    border-color: white;
    background-color: var(--golden-orange);
    padding: 21px;
    font-size: 21px;
}

.win-msg {
    font-size: 34px;
    color: var(--silver-grey);
    margin-top: 34px;
}

.win-msg.jackpot {
    color: gold;
}

.win-msg.near-miss{
    color: cyan;
}

.spacer-21{
    height: 21px;
}

.spacer-34{
    height: 34px;
}

.spacer-55{
    height: 55px;
}

.spacer-89{
    height: 89px;
}


.action-modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color:black;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.action-modal p {
    font-family: 'Bitter', serif;
    color:black;
}

.action-modal.hidden {
    display: none;
}

.action-modal button {
    border: 1px solid black;
}

/* 
    ID 
*/

#distance-div {
    background: rgba(255, 255, 255, 0.61);
    padding: 13px  21px;
    border-radius: 13px;
    opacity: 1;
    transition: opacity 0.61s, visibility 0.61s;
}

#distance-div.hidden {
    visibility: hidden;
    opacity: 0;
}

#distance-div.jackpot {
    background-color: gold;
}

#preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: grey;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    /* Add logo as background image */
    background-image: url(../img/loading-hiker.gif); 
    background-repeat: no-repeat;
    background-position: center;
    background-size: 256px; 
}

#preloader h1{
    position: fixed;
    top: 256px;
}

#preloader.loaded{
    display: none;
}

/* goldrush slots */
#credits {
    margin-top: 10px;
    font-size: 21px;
    color: white;  
}

/*
    Pixel ratios: 2582, 1596, 987, 610, 377, 233, 144, 89, 55, 34, 21, 13, 9, 5, 4, 2
    Opacity ratios: 100, 62, 38, 24, 15, 9, 6, 3, 2, 1
    Resolutions: (desktop) 1536, 1440, 1366, 1280, 1114(tablet) 1024, 1000, 768, 640, 504, (phone) 480, 390, 360, 320
*/