:root {
    --main-color: #06c;
}

html, body {
    height: 100%;
}

body {
    text-align: center;
}

#main-container {
    min-height: 100%;
    height: 100%;
}

#opponents-container .player-hand > div {
    padding-left: 10px;
    padding-right: 10px;
}

#opponents-container[players="4"] .player-hand > div {
    padding-left: 5px;
    padding-right: 5px;
}

#opponents-container[players="5"] .player-hand > div {
    padding-left: 5px;
    padding-right: 5px;
}

#opponents-container[players="6"] .player-hand > div {
    padding-left: 2px;
    padding-right: 2px;
}

#opponents-container[players="2"] {
    text-align: center;
    border-block-style: groove;
    margin: auto;
    width: 60%;
    height: 40%;
}

#opponents-container[players="3"] {
    text-align: center;
    border-block-style: groove;
    margin: auto;
    width: 85%;
    border: 2px solid;
    height: 40%;
}

#opponents-container[players="4"] {
    text-align: center;
    border-block-style: groove;
    margin: auto;
    width: 100%;
    border: 2px solid;
    height: 40%;
}

#opponents-container[players="5"] {
    text-align: center;
    border-block-style: groove;
    margin: auto;
    width: 100%;
    border: 2px solid;
    height: 40%;
}

#opponents-container[players="6"] {
    text-align: center;
    border-block-style: groove;
    margin: auto;
    width: 100%;
    border: 2px solid;
    height: 40%;
}

#actions-container {
    height: 20%;
    /*border: 2px solid;*/
    display: flex;
    justify-content: center; /* Aligns child divs horizontally at the center */
    align-items: center; /* Optional: aligns child divs vertically */
    gap: 1rem;
}

div.player-info {
    /*    background-color: azure;*/
    border: 2px solid;
    /*    padding: 4px;*/
    margin: 5px;
}

div.player-number {
    white-space: nowrap;
}

.player-hand {
    height: 70%;
}

.player-hand div.front, #exchangeModal div.front {
    /*margin: 3px 15px;*/
    background-size: 100% 100%;
    background-repeat: no-repeat;
    /*max-width: 100%;*/
    /*max-height: 100%;*/
    transition: all 600ms;
    /*width: 100%;*/
    height: 100%;
}

div.zoomed {
    transform: scale(1.2);
}

.transparent-on-hover:hover {
    opacity: 0.5 !important;
}

.transparent-on-hover {
    transition: opacity .5s ease-in-out;
}

div.zoomed:hover {
    cursor: pointer;
}

.fade-in {
    opacity: 0;
}

/*noinspection CssUnknownTarget*/
div.unknown div.front {
    background-image: url('/images/back.jpg');
}

/*noinspection CssUnknownTarget*/
div.ambassador div.front {
    background-image: url('/images/ambassador.jpg');
}

/*noinspection CssUnknownTarget*/
div.assassin div.front {
    background-image: url('/images/assassin.jpg');
}

/*noinspection CssUnknownTarget*/
div.duke div.front {
    background-image: url('/images/duke.jpg');
}

/*noinspection CssUnknownTarget*/
div.contessa div.front {
    background-image: url('/images/contessa.jpg');
}

/*noinspection CssUnknownTarget*/
div.captain div.front {
    background-image: url('/images/captain.jpg');
}

.player-number {
    height: 10%;
    /*text-align: center;*/
}

.anti-jumpy-span {
    text-align: left;
    padding-left: 40%;
}

.coins-count-container {
    height: 10%;
}

.hidden {
    display: none;
}

.you-label {
    color: var(--main-color);
}

.action-container {
    transition: transform .2s;
    margin: 2px;
    max-width: 11%;
    padding-right: 1%;
    padding-left: 1%;
    cursor: pointer;
    height: 100%;
}

.action-container:hover {
    transform: scale(1.2);
}

.action-container .image {
    background-size: 100% 100%;
    width: 100%;
    height: 73%;
    margin-left: 0;
    margin-right: 0;
}

.action-container .action-label {
    padding: 0;
}

#title-actions-history {
    margin-bottom: 0.12rem;
}

#actions-history-container {
    height: 19%;
    border: 2px solid;
    /*padding-bottom: 2%;*/
}

.action-history-container {
    /*transition: transform .2s;*/
    margin: 2px;
    /*max-width: 8.5%;*/
    max-width: 0;
    padding-right: 0;
    padding-left: 0;
    opacity: 0;
}

.action-history-divider-container {
    max-width: 0;
    opacity: 0;
    padding: 0 0;
}

.action-history-container .image {
    background-size: 100% 100%;
    width: 100%;
    height: 75%;
    margin-left: 0;
    margin-right: 0;
    background-repeat: no-repeat;
    background-position: center;
}

.action-history-container .player-label {
    padding: 0 0;
    white-space: nowrap;
}

/*Special sized for actions history containers for phones with horizontal orientation.*/
/*@media (min-aspect-ratio: 1.51) and (max-aspect-ratio: 3) and (any-hover: none)*/
/*, (min-aspect-ratio: 1.51) and (max-aspect-ratio: 3) and (pointer: coarse)*/
/*,(min-aspect-ratio: 1.51) and (max-aspect-ratio: 3) and (pointer: none) {*/
/*    .action-history-container .image {*/
/*        height: 45%;*/
/*    }*/
/*}*/

/*noinspection CssUnknownTarget*/
div.action-container.income .image, .action-history-container.income .image {
    background-image: url('/images/actions/income.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.foreign_aid .image, .action-history-container.foreign_aid .image {
    background-image: url('/images/actions/foreign_aid.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.coup .image, .action-history-container.coup .image {
    background-image: url('/images/actions/coup.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.tax .image, .action-history-container.tax .image {
    background-image: url('/images/actions/tax.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.assassinate .image, .action-history-container.assassinate .image {
    background-image: url('/images/actions/assassinate.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.exchange .image, .action-history-container.exchange .image {
    background-image: url('/images/actions/exchange.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.steal .image, .action-history-container.steal .image {
    background-image: url('/images/actions/steal.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.block_foreign_aid .image, .action-history-container.block_foreign_aid .image {
    background-image: url('/images/actions/block_foreign_aid.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.allow .image, .action-history-container.allow .image {
    background-image: url('/images/actions/allow.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.challenge .image, .action-history-container.challenge .image {
    background-image: url('/images/actions/challenge.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.influence_loos .image, .action-history-container.influence_loos .image {
    background-image: url('/images/actions/influence_loos.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.block_stealing_as_ambassador .image, .action-history-container.block_stealing_as_ambassador .image {
    background-image: url('/images/actions/block_stealing_as_ambassador.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.block_stealing_as_captain .image, .action-history-container.block_stealing_as_captain .image {
    background-image: url('/images/actions/block_stealing_as_captain.webp');
}

/*noinspection CssUnknownTarget*/
div.action-container.block_assassination .image, .action-history-container.block_assassination .image {
    background-image: url('/images/actions/block_assassination.webp');
}

#messageAreaInActionsContainer {
    opacity: 0;
    display: none;
    width: 100%;
    text-align: center;
    font-size: xxx-large;
    align-items: center;
    justify-content: center;
}

#title-available-actions {
    margin-bottom: 0.1rem;
}

/*Device without mouse (smartphone) with horizontal orientation.*/
@media (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (any-hover: none)
, (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: coarse)
,(min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: none) {
    #messageAreaInActionsContainer {
        font-size: 2.3rem;
    }

    #opponents-container:is([players="4"], [players="5"], [players="6"]) .player-info .player-number,
    #opponents-container:is([players="4"], [players="5"], [players="6"]) .player-info .coins-count {
        padding-left: 30%;
    }
}

/*Make dead influence gray.*/
div.col.dead {
    filter: grayscale(1);
    transition: all .2s;
}

.clickable {
    cursor: pointer;
}

div.pick-player-to-steal-box, div.pick-player-to-assassinate-box, div.pick-player-to-coup-box, div.pick-number-of-players-to-create-the-game-box {
    height: 20vh;
    width: 9vw;
    min-width: 20rem;
    margin: auto;
    border-style: outset;
    display: grid;
    align-items: center;
    cursor: pointer;
    font-size: 50px;
    transition: all 600ms;
    background-color: white;
}

div.pick-number-of-players-to-create-the-game-box {
    margin: 0.3rem;
}

div.pick-player-to-steal-box:hover, div.pick-player-to-assassinate-box:hover, div.pick-player-to-coup-box:hover, div.pick-number-of-players-to-create-the-game-box:hover {
    transform: scale(1.2);
    z-index: 1;
}

div.action-container.block_stealing_as_ambassador, div.action-container.block_stealing_as_captain {
    font-size: 0.90rem;
    line-height: 1rem;
}

/*I removed action-label from actions history.*/
/*.action-history-container.block_stealing_as_ambassador .action-label, .action-history-container.block_stealing_as_captain .action-label, .action-history-container.block_assassination .action-label {*/
/*    line-height: 1.2;*/
/*    font-size: 12px;*/
/*}*/

#actions-container div.action-container.block_assassination .action-label {
    line-height: 0.9rem;
}

#invite-url-container {
    font-size: small;
    cursor: pointer;
}

#invite-url:hover {
    text-decoration: underline;
}

#invite-url.copied {
    background-color: yellow;
    font-size: large;
    text-decoration: none;
    cursor: default;
}

.match-finder-selection-board, .ways-to-start {
    height: 20%;
}

.match-finder-selection-board .row {
    height: 100%;
}

.match-finder-selection-board .col {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: outset;
    font-size: 3rem;
    cursor: pointer;
    margin: 0.3rem;
}

.zoomy-button {
    transition: transform 600ms;
    background-color: white;
}

.zoomy-button:hover {
    transform: scale(1.2);
    z-index: 1;
}

.blinky {
    will-change: opacity;
}

.blinky:not(:disabled):active {
    animation: blink 0.2s linear;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.ways-to-start .col {
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: outset;
    font-size: 3rem;
    cursor: pointer;
    margin: 0 0.3rem;
}

.ways-to-start .row {
    height: 100%;
}

#join-game-with-link-button {
    font-size: 1.9rem;
}

#match-finder-information-area {
    font-size: 1.5rem;
}


.match-finder-selection-board .col:active {
    border-style: inset;
}

#waiting-room-message-area {
    font-size: 2.5rem;
}

#waiting-room-ready-button, #waiting-bot-vote-button {
    width: 99%;
    height: 100%;
    font-size: 2.6rem;
}

#waiting-room-ready-button.ready {
    background-color: palegreen;
}

.information-area {
    font-size: 1.9rem;
    padding: 1rem 1rem;
}

#pwa-info-area {
    font-size: 1.9rem;
}

.back-button {
    font-size: 3rem;
}

.header-container {
    padding-top: 0.8rem;
}

.create-new-game {
    align-content: center;
    justify-content: center;
    font-size: 3rem;
}

.container {
    max-width: 90%;
}

.instruction-screenshot-area {
    justify-content: center;
    align-items: center;
}

.instruction-screenshot-area .instruction-picture {
    background-size: 15rem 100%;
    background-repeat: no-repeat;
    max-width: 15rem;
    height: 25rem;
    min-width: 15rem;
    margin: 1rem 1rem;
}

.instruction-screenshot-area.android .instruction-picture {
    background-size: 15rem 100%;
    background-repeat: no-repeat;
    max-width: 15rem;
    height: 35rem;
    min-width: 15rem;
    margin: 1rem 1rem;
}

#add-bot{
   padding: 0 1.3rem;
}

#add-bot:active {
    background-color: grey;
}

div.link-like, button.link-like:enabled {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}

#create-new-game-information-area {
    font-size: 1.5rem;
}

/*Device with hover capability (or alike).*/
@media (any-hover: hover) {

}

.glare-sweep {
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
}

.glare-sweep::after {
    content: "";
    position: absolute;
    top: -200%;
    left: 0;
    width: 100%;
    height: 400%;
    background: linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 42%,
            rgba(255, 255, 255, 0.2) 47%,
            rgba(255, 255, 255, 0.45) 50%,
            rgba(255, 255, 255, 0.2) 53%,
            rgba(255, 255, 255, 0) 58%
    );
    animation: glare-sweep 2.5s ease-in-out infinite;
    pointer-events: none;
    will-change: transform;
    /*mix-blend-mode: screen;*/
}

/*html, body {*/
/*    overflow: hidden;*/
/*}*/

@keyframes glare-sweep {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(50%);
        opacity: 0;
    }
}

/*Device without mouse (smartphone) with vertical orientation.*/
@media (max-aspect-ratio: 0.7) and (any-hover: none)
, (max-aspect-ratio: 0.7) and (pointer: none)
, (max-aspect-ratio: 0.7) and (pointer: coarse ) {
    h1 {
        font-size: 5rem;
    }

    #waiting-room-message-area {
        font-size: 4.8rem;
    }

    #waiting-room-ready-button, #waiting-bot-vote-button {
        font-size: 4rem;
    }

    .information-area {
        font-size: 3.7rem;
        padding: 1rem 1rem;
    }

    #pwa-info-area {
        font-size: 3.5rem;
    }

    .create-new-game {
        font-size: 4.5rem;
    }

    h3 {
        font-size: 4.5rem;
    }

    .instruction-screenshot-area .instruction-picture {
        background-size: 100% 100%;
        min-width: 30rem;
        min-height: 55rem;
    }

    .instruction-screenshot-area.android .instruction-picture {
        background-size: 100% 100%;
        min-width: 30rem;
        min-height: 62rem;
    }

    .container, .container-md, .container-sm {
        max-width: 90%;
    }

    #join-game-with-link-button {
        font-size: 2.7rem;
    }

    #match-finder-information-area {
        font-size: 3.2rem;
    }

    #create-new-game-information-area {
        font-size: 3rem;
    }

    div.pick-number-of-players-to-create-the-game-box {
        height: 17rem;
    }

    .match-finder-selection-board, .ways-to-start {
        height: 15%;
    }
}

/*Device without mouse (smartphone) with horizontal orientation.*/
@media (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (any-hover: none)
, (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: coarse)
,(min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: none) {
    h3 {
        font-size: 2.8rem;
    }

    #actions-container .action-container.block_foreign_aid .action-label {
        line-height: 1rem;
        margin-top: 0.3rem;
    }

    #actions-container .action-container.block_stealing_as_ambassador .action-label,
    #actions-container .action-container.block_stealing_as_captain .action-label {
        line-height: 1rem;
        margin-top: 0.3rem;
    }

    .match-finder-selection-board, .ways-to-start {
        height: 15%;
    }

}