@import "arrows.css";
@import "avatar.css";
@import "box.css";
@import "cards.css";
@import "deck.css";
@import "options.css";
@import "players.css";
@import "suits.css";
@import "timer.css";

:root {
    --red-suit      : #c41010;
    --black-suit    : #444444;
    --box-height: 200px;
    --box-width: 400px;
    --box-opacity: 0.9;
    --text-color: rgba(255,223,0,1);
    --line-color: var(--sand-color);
    --single-height: 40px;
    --log-transition: 1s;
    --card-transition: 2s;
    --log-height: 21.5vh;
    --log-up: calc(-1 * (var(--line-width)));
    --log-down: calc(-1 * (var(--message-up) + var(--line-width)));
    --message-up: 22.5vh;
    --message-down: 14px;
    --placeholder-color: lightgrey;
    --line-width: 5px;
    --line-tail: 10px;
    --suit-size : 1.4px;
    --timer-width: 50px;
    --edge-pos: calc(-1 * var(--line-width));
    --small-font: 0.8em;
    --large-font: 1.2em;
    --font-size: 12;
    --card-font: 20pt;
    --sand-color: 
        radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
        radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
}
.error {
    z-index: 10 !important;
    box-shadow: 30px 30px 30px black;
}
body {
    background-color: #111111;
    background-image: url('../img/bg.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: color-dodge;
    font-family: Verdana;
    font-size: var(--font-size);
    color: var(--text-color);
}
.blocker {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: black;
    opacity: 0.4;
    z-index: 4;
    pointer-events: auto;
}
main, #logo, .info, .actionbar {
    position: fixed;
}
main {
    z-index: 1;
    left: 0;
    width: 100%;
    height: calc(100% - 20vh);
    pointer-events: none;
}
main, #logo, .info_user_name {
    top: var(--edge-pos);
}
.room_name {
    top: calc(2 *var(--box-height) - var(--line-width) * 3);
}
.info_activities, .info_message, .info_points {
    right: var(--edge-pos);
}
#logo, .info_user_name, .info_points, .info_message, .room_name {
    --box-height: var(--single-height);
}
#logo {
    --logo-size: calc(18vh - 2*var(--line-width));
    --suit-size: 0.17vh;
    --box-width: var(--logo-size);
    --box-height: var(--logo-size);
    left: var(--edge-pos);
    cursor: pointer;
    font-size: 0;
    z-index: 1;
    .content {
        background-image: url("/img/ib-logo.png");
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
}
.info {
    width: var(--box-width);
    height: var(--box-height);
}
.room_name, .info_user_name {
    cursor: pointer;
    pointer-events: auto;
}
.room_name, .info_user_name, .info_points {
    --box-width: 250px;
    right: var(--edge-pos);
    transition: top var(--log-transition), left var(--log-transition);
}

.info_points {
    top: calc(var(--box-height)  - 2 * var(--line-width));
    justify-content: right;
}
.info_message, .info_activities {
    z-index: 5;
    --box-width: 400px;
    pointer-events: auto;
}
.info_message {
    bottom: var(--message-down);
    cursor: pointer;
    transition: bottom var(--log-transition) linear;
    .message {
        color: lightgray;
        text-align: right;
        margin-right: var(--line-width);
    }
    .content span:last-child {
        position: absolute;
        right: calc(2 * var(--line-width));
    }
}
.info-container {
    width: 0;
    top: 0;
    right: 0;
    height: 0;
    .content > div {
        padding-top: 20px;
    }
    .content > div:last-child {
        padding-bottom: 20px;
    }
}
.info_activities {
    --box-height: calc(1*(var(--message-up) + 2*var(--line-width)));
    bottom: var(--log-down);
    .content div {
        padding-top: 20px;
    }
    .content div:last-child {
        padding-bottom: 20px;
    }
    &.compress {
        .box__line--right {
            height: 0;
        }
        .box__line--top, .box__line--bottom, .box__line--bottom::before, .box__line--bottom::after, .box__line--top::before, .box__line--top::after {
            height: 0;
        }
        .box__line--bottom::before, .box__line--bottom::after {
            top: 0;
        }
    }
}
.info_activities, .info_activities .box__line, .box__line--bottom::before, .box__line--bottom::after, .box__line--top::before, .box__line--top::after {
    transition: bottom var(--log-transition) linear;
}
.actionbar {
    right: -1vh;
    bottom: -1vh;
    max-width: 40vw;
    .button {
        margin-left: 1.8vw;
        margin-top: 3vh;
    }
}
.playbar {
    position: fixed;
    top: 75vh;
    right: 10vw;
    z-index: 4;
    pointer-events: none;;
    >* {
        pointer-events: auto;
        margin-bottom: 2vh;
        >* {
            margin-right: 20px;
        }
    }
    /*
    >div:last-child {
        margin-left: 19.4vw;
    }
    */
}
.modal .buttons {
    bottom: 5vh;
}
.buttons {
    padding: 0px 10px;
    .button {
        margin-left: 20px;
        margin-top: 10px;
    }
}
.bet.input, .button {
    --box-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--box-height);
    width: var(--box-width);
    font-weight: bold;
    border: 0;
    margin-bottom: 0;
}
.input {
    --box-width: 160px;
    margin-bottom: 20px;
    .message {
        margin-top: 10px;
        color: grey;
        font-style: italic;
        padding-left: 20px;
        + input {
            margin-top: 10px;
        }
    }
    input + input{
        margin-top: 10px;
    }
}
input {
    pointer-events: auto;
    background: black;
    color: white;
    outline: none;
    border: 0;
    padding: 2vh 2vw;
    font-size: var(--large-font);
}
.bet input {
    width: 100%;
    height: 100%;
    text-align: right;
    padding-right: 2vw;
}
.bet input:focus, .bet input:active, .bet input:hover {
    border: 0;
    outline: none;
}
/* Chrome, Safari, Edge, Opera */
.bet input::-webkit-outer-spin-button,
.bet input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.login {
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    white-space: normal;
    &.bottom {
        top: 90%;
    }
    .button {
        margin-bottom: 10px;
    }
}

div.login {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
}

.button {
    --box-width: 200px;
    cursor: pointer;
    pointer-events: auto;
    &.login {
        --box-height: 50px;
        --box-width: 180px;
    }
    &.short .box, &.medium .box, &.short .content, &.medium .content {
        overflow: hidden;
    }
    &.short {
        --box-width: 70px;
        
    }
    &.medium {
        --box-width: 120px;
    }
    &.bottom {
        position: fixed;
        bottom: var(--edge-pos);
        right: calc(400px + var(--line-width));
    }
}
.button:active {
    .box {
        background: yellow;
        color: #111111;
    }
}
.pot, .deck, .hidden, .discards {
    --deck-distance: 1;
    position: fixed;
    top: 50%;
    left: 42%;
    color: white;
    font-weight: bold;
}
.pot {
    top: 70%;
    z-index: 3
}
.deck {
    --deck-distance: 1.2;
    top: 62%;
    left: 50%;
    z-index: 2;
}
.hidden {
    --deck-distance: 1.1;
    top: 59.6%;
    left: 59%;
    z-index: 1;
}
.discards {
    --deck-distance: 1.1;
    top: 60%;
    left: 70%;
    cursor: pointer;
    z-index: 2;
}
.roomlist {
    --box-width: 80%;
    --box-height: 60vh;
    position: fixed;
    top: 20vh;
    left: 10%;
    height: var(--box-height);
    width: var(--box-width); 
    pointer-events: auto;
    .content {
        overflow-y: auto;
        overflow-x: hidden;
    }
    .content > div {
        position: relative;
        width: 100%;
        padding: 20px;
        margin-left: -15px;
        border-bottom: 1px solid yellow;
        cursor: pointer;
    }
    .content > div:hover {
        background-color: darkolivegreen;
    }
    .content > div:last-child {
        padding-bottom: 20px;
    }
}

.modal {
    --box-height: 90%;
    --box-width: 90%;
    --box-opacity: 1;
    z-index: 7;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: var(--box-height);
    width: var(--box-width);
    pointer-events: auto;
    >.box >.content {
        padding: var(--content-pad);
        top: 1px;
        height: calc(100% - 2 * var(--content-pad) - var(--line-width));
    }
    &.half {
        --box-height: auto;
        --box-width: 70vw;
    }
    &.quarter {
        --box-height: auto;
        --box-width: 40vw;
    }
    &.long {
        --box-width: 70vw;
    }
    &.square {
        --box-height: var(--box-width);
    }
    &.login {
        --box-height: auto;
    }
    &.room {
        --box-height: 60vh;
    }
}

figure > img {
    max-height: 140px;
    max-width: 100%;
}

figure > img.large {
    max-height: 400px;
}

.form input {
    width: 100%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--placeholder-color);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--placeholder-color);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--placeholder-color);
}

.discards, .deck, .hidden, .hand {
    transition: top var(--log-transition), left var(--log-transition), right var(--log-transition);
}

.closeX {
    color: red;
    font-size: var(--large-font);
    float: right;
    margin-left : 5px;
}
  
@media only screen and (max-width: 900px) {
    body {
        background-position-x: -514px;
        background-size: 1390px;
    }
    .players {
        top: 19vh;
        overflow-y: hidden;
        pointer-events: auto;
        justify-content: left;
        overflow-x: auto;
    }
    .pot {
        left: 100px;
    }
    .deck {
        left: 167px;
    }
    .hidden {
        left: 262px;
    }
    .discards {
        left: 370px;
        --discard-top: 30vh;
        >.count {
            margin-top: -30px;
        }
    }
    .modal.quarter {
        --box-width: 90%;
    }
    .player {
        --box-height: 170px;
        > .box > .content {
            width: 150px;
        }
    }
    .playbar {
        right: 0;
    }
}
@media only screen and (max-height: 650px) {
    body {
        background-position-y: -160px;
    }
    .playbar {
        top: 70vh;
    }
    .hand {
        left: 3vw;
    }
}
@media only screen and (max-width: 500px) {
    body {
        background-position-y: -128px;
    }
    .pot {
        top: 53%;
        left: 60px;
    }
    .deck {
        top: 350px;
        left: 187px;
    }
    .hidden {
        top: 336px;
        right: 80px;
    }
    .discards {
        top: 390px;
        left: 220px;
    }
    .hand {
        top: 58vh;
    }
    .timer {
        transform: rotate(90deg) translateX(-50px) scaleX(0.2);
        transform-origin: bottom;
    }
    .info_message,.info_activities {
        --box-width: calc(100vw - 1px);
    }
}
@media only screen and (max-width: 460px) {
    .roomlist {
        --box-height: 55vh;
    }
    .login.bottom {
        top: 85%;
    }
    .modal:not(.half,.quarter) {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        width: auto;
        transform: none;
    };
}
@media only screen and (max-width: 360px) {
    .room_name, .info_user_name, .info_points {
        --box-width: 60vw;
    }
}
@media only screen and (max-height: 400px) {
    body {
        background-position-y: -230px;
    }
    .players {
        top: 22vh;
    }
    .pot {
        top: 300px;
    }
    .deck {
        top: 247px;
    }
    .hidden {
        top: 222px;
        left: 335px;
    }
    .discards {
        top: 244px;
        left: 402px;
    }
    .room_name, .info_user_name, .info_points {
        top: var(--edge-pos);
    }
    .info_user_name {
        left: calc(100vw - 3 * var(--box-width) + 4 * var(--line-width));
    }
    .info_points {
        left: calc(100vw - 2 * var(--box-width) + 2 * var(--line-width));
    }
    .hand {
        left: 20vw;
    }
    .playbar {
        top: 64vh;
    }
}