/* Pyramid game - embedded override */
/* Scope everything under #pyramid-game */

@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto-regular.woff);
}
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/roboto-bold.woff);
    font-weight: bold;
}

#pyramid-game {
    --table-color: transparent;
    --back-color: #b8912e;
    --card-width: calc(min(97vw, 800px) / 7 * 0.82);
    --card-height: calc((var(--card-width) * 3.5 / 2.5));
    --table-width: calc(var(--card-width) * 7 + 44px);
    --table-height: calc(var(--table-width));
    --border-width: 1px;
    font-family: 'Roboto', sans-serif;
    position: relative;
    min-height: 600px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

#pyramid-game .table {
    display: flex;
    position: relative;
    flex-direction: column;
    width: var(--table-width);
    height: var(--table-height);
    margin: 20px auto;
}

#pyramid-game .row {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: var(--table-width);
    height: var(--card-height);
}

#pyramid-game .row:not(:first-child) {
    margin-top: calc(var(--card-height) / -2);
}

#pyramid-game .row:nth-child(8) {
    margin-top: 40px;
}

#pyramid-game .cell {
    display: grid;
    place-items: center;
    box-sizing: border-box;
    width: calc(var(--card-width) + var(--border-width) * 2);
    height: calc(var(--card-height) + var(--border-width) * 2);
    border: var(--border-width) solid transparent;
    border-radius: calc(var(--card-width) / 10);
}

#pyramid-game .cell:not(:first-child) {
    margin-left: 5px;
}

#pyramid-game .stock {
    width: calc(var(--card-width) + var(--border-width) * 2);
    height: calc(var(--card-height) + var(--border-width) * 2);
    margin-left: 27px;
    border-radius: calc(var(--card-width) / 10);
}

#pyramid-game .pile {
    width: calc(var(--card-width) + var(--border-width) * 2);
    height: calc(var(--card-height) + var(--border-width) * 2);
    border-radius: calc(var(--card-width) / 10);
}

#pyramid-game .card-wrap {
    position: absolute;
    cursor: pointer;
    background-color: transparent;
    opacity: 0;
    left: -300px;
    perspective: 1000px;
}

#pyramid-game .card {
    position: relative;
    width: calc(var(--card-width) + var(--border-width) * 2);
    height: calc(var(--card-height) + var(--border-width) * 2);
    transform-style: preserve-3d;
}

#pyramid-game .card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.5s linear;
    transform-style: preserve-3d;
}

#pyramid-game .front, #pyramid-game .back {
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--card-width) / 10);
    box-sizing: border-box;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

#pyramid-game .front {
    background-color: white;
    border: var(--border-width) solid rgba(0,0,0,0.1);
    transform: rotateY(-180deg);
}

#pyramid-game .back {
    background: linear-gradient(135deg, #b8912e, #d4a843);
    border: var(--border-width) solid #d4a843;
}

#pyramid-game .card-wrap.flip .card-inner {
    transform: rotateY(-180deg);
}

#pyramid-game .top {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: var(--card-width);
    height: calc(var(--card-height) / 3);
}

#pyramid-game .rank {
    font-weight: bold;
    font-size: calc(var(--card-width) / 1.9);
    color: #1a1a1a;
}

#pyramid-game .ten {
    letter-spacing: calc(var(--card-width) / -10);
    text-indent: calc(var(--card-width) / -40);
}

#pyramid-game .suit {
    display: flex;
    justify-content: center;
    align-items: center;
}

#pyramid-game .suit img {
    width: calc(var(--card-height) / 3 * 0.8);
    height: calc(var(--card-height) / 3 * 0.8);
}

#pyramid-game .main {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--card-width);
    height: calc(var(--card-height) / 3 * 2);
}

#pyramid-game .main img {
    margin-top: calc(var(--card-width) * 0.05);
    width: calc(var(--card-width) * 0.8);
    height: calc(var(--card-width) * 0.8);
}

#pyramid-game img {
    pointer-events: none;
}

#pyramid-game .red {
    color: #c0392b;
}

#pyramid-game .red .rank {
    color: #c0392b;
}

#pyramid-game #designed {
    display: none !important;
}

#pyramid-game .hidden {
    pointer-events: none;
}

#pyramid-game .show {
    animation: pyramid-show 3.0s 2 ease-in-out forwards alternate;
}

#pyramid-game .zoom {
    animation: pyramid-zoom 0.25s 2 linear forwards alternate;
}

@keyframes pyramid-show {
    0% { opacity: 0; }
    100% { opacity: 0.5; }
}

@keyframes pyramid-zoom {
    0% { transform: scale(1.0); }
    100% { transform: scale(1.2); }
}

@media (max-width: 768px) {
    #pyramid-game {
        --card-width: calc(95vw / 7 * 0.82);
        min-height: 450px;
    }
    #pyramid-game .table {
        margin-top: 10px;
    }
    #pyramid-game .row:nth-child(8) {
        margin-top: 20px;
    }
}

@media (min-width: 460px) and (min-height: 460px) {
    #pyramid-game {
        --table-width: calc(var(--card-width) * 7 + 88px);
        --border-width: 2px;
    }
    #pyramid-game .stock {
        margin-left: 50px;
    }
    #pyramid-game .row:nth-child(8) {
        margin-top: 60px;
    }
    #pyramid-game .cell:not(:first-child) {
        margin-left: 10px;
    }
    #pyramid-game .rank {
        font-size: calc(var(--card-width) / 2.3);
        letter-spacing: calc(var(--card-width) / -12);
    }
    #pyramid-game .ten {
        letter-spacing: calc(var(--card-width) / -12);
    }
    #pyramid-game .suit img {
        width: calc(var(--card-height) / 3 * 0.70);
        height: calc(var(--card-height) / 3 * 0.70);
    }
    #pyramid-game .main img {
        margin-top: 0;
        width: calc(var(--card-width) * 0.75);
        height: calc(var(--card-width) * 0.75);
    }
}