/* Start Full Size Monopoly Cards */
/* These cards used to be authored at full size (250x210) and shrunk to 75% with
 * `zoom: 0.75`.  That per-element zoom is removed (only whole-page scaling
 * remains), so the 0.75 factor is baked directly into every dimension here -
 * the rendered result is identical, but there is no second scaling layer to
 * fight the card-movement animation. */
.mExpandedContainer {
    width: 187.5px;
    height: 157.5px;
    overflow: hidden;
    float: left;
}

.mExpandedOuter {
    width: 187.5px;
    height: 157.5px;
    border-radius: 11.25px;
}

.mExpandedInner {
    display: block;
    position: relative;
    top: 3.75px;
    left: 3.75px;
    height: 150px;
    width: 180px;
    border-radius: 11.25px;
}

.mExpandedCost {
    display: block;
    position: relative;
    top: 3.75px;
    left: 3.75px;
    height: 30px;
    width: 37.5px;
    text-align: center;
    border-radius: 3.75px 0px 0px 3.75px;
    margin: 0px;
    padding: 0px;
    font-size: 26.25px;
}

.mExpandedName {
    display: block;
    position: relative;
    top: -26.25px;
    left: 33.75px;
    height: 30px;
    width: 138.75px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 14.25px;
    line-height: 22.5px;
}

.mExpandedText {
    display: block;
    position: relative;
    top: -26.25px;
    left: 3.75px;
    height: 105px;
    width: 172.5px;
    border-radius: 3.75px;
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 15px;
    overflow: hidden;
}

.mExpandedType {
    display: block;
    position: relative;
    top: -30px;
    left: 3.75px;
    height: 15px;
    width: 172.5px;
    text-align: center;
    border-radius: 7.5px;
    margin: 0px;
    padding: 0px;
    font-size: 7.5pt;
}

.mExpandedButton {
    display: block;
    position: relative;
    top: -180px;
    left: 0px;
    height: 150px;
    width: 180px;
    opacity: 0;
    text-align: center;
    border-radius: 7.5px;
}
/* Stop Full Size Monopoly Cards*/

/* Start Played Property Cards */
.mPropertyFullOuter {
    width: 200px;
    height: 90px;
    display: block;
    border-radius: 5px;
    overflow: hidden;
}

.mPropertyFullInner {
    width: 190px;
    height: 80px;
    overflow: hidden;
    position: relative;
    top: 5px;
    left: 5px;
    background-color: #202020;
    border-radius: 5px;
}

.mPropertyFullCost {
    display: block;
    position: relative;
    top: 0px;
    left: 0px;
    width: 15px;
    height: 20px;
}

.mPropertyFullName {
    display: block;
    position: relative;
    top: -20px;
    left: 15px;
    width: 175px;
    height: 20px;
    text-align: center;
    cursor: pointer;
}

.mPropertyFullText {
    display: block;
    position: relative;
    top: -25px;
    left: 0px;
    width: 190px;
    height: 65px;
    text-align: center;
}

.mPropertyFullButton {
    display: block;
    position: relative;
    top: -105px;
    left: -5px;
    width: 200px;
    height: 90px;
    text-align: center;
    opacity: 0;
}
/* End Played Property Cards */

/* Start Minimized Played Property Cards */
.mPropertyMiniOuter {
    width: 200px;
    height: 30px;
    overflow: hidden;
    margin-bottom: -5px;
    display: block;
    border-radius: 5px;
}

.mPropertyMiniInner {
    width: 190px;
    height: 20px;
    overflow: hidden;
    top: 5px;
    left: 5px;
    background-color: #202020;
    border-radius: 5px;
    position: relative;
}

.mPropertyMiniCost {
    width: 15px;
    height: 20px;
    position: relative;
}

.mPropertyMiniName {
    width: 170px;
    height: 20px;
    text-align: center;
    position: relative;
    top: -20px;
    left: 15px;
}

.mPropertyMiniButton {
    width: 190px;
    height: 20px;
    opacity: 0.0;
    position: relative;
    top: -40px;
}
/* End Minimized Played Property Cards */

.mPropertyColorOptionButton {
    width: 200px;
    opacity: 0.0;
    position: relative;
}

/* Start Money Token */

.mMoneyTokenOuter {
    width: 50px;
    height: 50px;
    float: left;
    border-radius: 50%;
    position: relative;
}

.mMoneyTokenInner {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #202020;
}

.mMoneyTokenText {
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-weight: 1000;
}

.mMoneyTokenImage {
    font-size: 30px;
    text-align: center;
    line-height: 40px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    opacity: 0.4;
    position: relative;
    top: -45px;
    left: 0px;
}

.mMoneyTokenButton {
    width: 45px;
    height: 45px;
    top: 0px;
    left: 0px;
    opacity: 0.0;
    border-radius: 50%;
    position: absolute;
}
/* End Money Token */

/* Start Monopoly House/Hotel Token -- a scaled-down money token shown on a
 * completed monopoly's text.  The outer span takes a color class (VictoryDark /
 * DefenseDark) for the ring, exactly like the money token. */
.mMonopolyToken {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0px 1px;
}

.mMonopolyTokenInner {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #202020;
}

.mMonopolyTokenIcon {
    display: block;
    width: 19px;
    height: 19px;
    line-height: 19px;
    text-align: center;
    font-size: 12px;
}
/* End Monopoly House/Hotel Token */


.monopolyFade {
    /*appearance: none;
    -webkit-appearance: none;
    border: none;
    border-radius: 0;
    outline: none;
    background-color: white;*/
    animation: fade 1s;
}

/* A completed monopoly gets a light "shimmer" sweep across the pile (instead of
 * the old opacity fade in/out).  The sweep is a translucent diagonal band drawn
 * by an ::after overlay that slides across the container and back. */
.monopolyShimmer {
    position: relative;
}

.monopolyShimmer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    border-radius: 5px;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
    transform: translateX(-150%);
    animation: shimmer 2.5s infinite;
}

.monopolyBlueGreenBackground {
    background-image: linear-gradient(to right, dodgerblue, #65DA65);
}

.monopolyGreenWhiteBackground {
    background-image: linear-gradient(to right, #65DA65, whitesmoke);
}

.monopolyLightblueWhiteBackground {
    background-image: linear-gradient(to right, #00EAEA, whitesmoke);
}

.monopolyLightblueBrownBackground {
    background-image: linear-gradient(to right, #00EAEA, #b35900);
}

.monopolyOrangePurpleBackground {
    background-image: linear-gradient(to right, #FFCB6A, #DCA9E9);
}

.monopolyPinkWhiteBackground {
    background-image: linear-gradient(to right, lightpink, whitesmoke);
}

.monopolyYellowRedBackground {
    background-image: linear-gradient(to right, #FFDF2B, #FF4040);
}

.monopolyRainbowBackground {
    background-image: linear-gradient(to bottom right, #b827fc 0%, #2c90fc 25%, #b8fd33 50%, #fec837 75%, #fd1892 100%);
}






@keyframes shimmer {
    0% {
        transform: translateX(-150%);
    }

    60% {
        transform: translateX(150%);
    }

    100% {
        transform: translateX(150%);
    }
}

/* Top-left corner badge on hand cards (Just Say No, Rent, House, Hotel).  It
 * sits in the same top-left slot the cost would occupy, so every card shows
 * EITHER a symbol or a cost there. */
.mCardCornerIcon {
    position: absolute;
    top: 4px;
    left: 5px;
    font-size: 26px;
    line-height: 30px;
    z-index: 5;
    pointer-events: none;
}

.mNoSymbol {
    color: #ff1a1a;
}

.mRentSymbol {
    color: #00e000;
    font-weight: 1000;
    font-size: 30px;
    text-shadow: 0px 0px 2px #003300;
}

@keyframes fade {
    0% {
        opacity: 0;
        top: -300px;
        position: relative;
    }

    100% {
        opacity: 1;
        top: 0px;
        position: relative;
    }
}

.mDrawCardAnimation {
    animation: drawnCard 1s;
}

.mDiscardCardAnimation {
    animation: discardCard 1s;
    /*opacity: 0;*/
    z-index: 100;
}

.mFadeInAnimation {
    animation: cardFadeIn 1s;
}

.mSelected {
    opacity: 0.5;
}

.mCardGainFadeIn {
    animation: cardGainFadeIn;
}


@keyframes cardGainFadeIn {
    0% {
        opacity: 0.0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes cardFadeIn {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

@keyframes drawnCard {
    0% {
        position: relative;
        left: 1300px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        left: 0px;
        opacity: 1;
    }
}

@keyframes discardCard {
    0% {
        position: relative;
        top: -300px;
        opacity: 0.5;
    }

    100% {
        position: relative;
        top: 0px;
        opacity: 1;
    }
}

/* A card cloned mid-flight by mSlideCard().  It is positioned/animated entirely
 * with inline styles (fixed position + transform transition); this class is the
 * stable hook tests use and guarantees it never eats clicks. */
.mFlyingCard {
    pointer-events: none;
}

/* Full-screen, transparent overlay shown while any card is sliding.  It blocks
 * all pointer input so the player cannot act mid-animation.  It is added when
 * the first slide starts and removed when the last one finishes (with a
 * watchdog safety net), so it can never strand the UI. */
#mAnimationBlocker {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99990;
    background: transparent;
    cursor: progress;
}