body {
    margin: 0px;
    overflow: hidden;
    background-color: #d9e4cd;
    background-size: 100% 100%;
}


/*div { box-sizing: border-box; }  */
/* Remove annoying blue shadow border around buttons post-click - TODO: what to do for accessability */
button:focus { outline:0 !important; }
button {
    font-family: 'Open Sans Light';
    cursor: pointer;
	text-decoration:none;
    white-space: nowrap;
}

@keyframes neonGreen {
  from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; }
    to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; }
}
@keyframes neonPurple {
    from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de; }
      to { text-shadow: 0 0  5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff00de, 0 0 35px #ff00de, 0 0 40px #ff00de, 0 0  50px #ff00de, 0 0 75px #ff00de; }
}

/* Pulse Grow */
@-webkit-keyframes hvr-pulse-grow { to { transform: scale(1.1); } }
@keyframes hvr-pulse-grow { to { transform: scale(1.1); } }
.hvr-pulse-grow {
    display: inline-block;
    transform: translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
}
.hvr-pulse-grow-hover {
    animation-name: hvr-pulse-grow;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
/* --- */

/* --------------------------------------------------------------------------------------------- */

div.tableRows { display: table; width: 100%; }
div.tableRows > div { display: table-row; }
div.tableRows > div > div { display: table-cell; padding: 5px; width: 99%; }
div.tableRows > div > div:first-child { width: 1%; }

/* jQuery UI Dialog */
.ui-dialog-titlebar { display: none; }
.ui-widget-overlay { background: rgba(0,0,0,0.9); }


/* --------------------------------------------------------------------------------------------- */

#playArea { padding:0px 0px; }
#playArea > div { width: 100%; }

/* ---------- Top Area ---------- */
#topArea { display:table; margin-bottom:1em; }
#topArea > div { display:table-cell; vertical-align:top; text-align:center; }
#topArea > div:first-child { text-align: left;  }
#topArea > div:last-child  { text-align: right; }

#topArea > #cardOpen > div:last-child { margin-right: 0; }

#cardFoun > div > div { text-align: left; }
#cardFoun > div > div:last-child { margin-right: 0; }
#cardFoun .slot h1 {
    margin: 0;
    text-align: center;
    font-family: Segoe UI;
    font-weight: bold;
    font-size: 7em;
    color: rgba(130,130,130,0.25);
}
#cardFounCont { display:table; width:100%; }
#cardFounCont > div { display:table-cell; width:25%; text-align:left; }

#cardOpenCont { display:table; width:100%; }
#cardOpenCont > div { display:table-cell; width:25%; text-align:right; }

/* ---------- Card Casc ---------- */
#cardCasc { display:table; width: 100%; }
#cardCasc > div { display:table-cell; width:14%; text-align:left; vertical-align:top; }
#cardCasc > div:last-child { width:10%; text-align:right; }

/* ---------- Card/Slot ---------- */
.card {
    cursor: move;
    display: inline-block;
    margin: 0; /* for droppabel - WIP */
    position: relative; /* so z-index works */
    transform: translateZ(0); /* well-known perf fix for mobile browsers */
}
.card .corner span { font-size: 2.5em; }
.slot {
    position: relative;
    display: inline-block;
    margin: 0;
    border-radius: 1.4em;
    background: rgba(0, 50, 0, 0.75);
    /*box-shadow: inset 0px 0px 20px 0px rgba(0,0,0, 0.5); */
    border: 1px solid black;
    font-size: 7px;
}
.slotHover { border: 1px solid #a7a7a7; opacity: 1; transform: scale(1.1); transition: .25s ease-in; }
.cascHover { opacity: .5; transition: .25s ease-in; }

/* All noselect obejcts */
h1, .card, div#gameTitle {
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

/* --------------------------------------------------------------------------------------------- */

/* Responsive Rules: 1400+=PC */
@media only screen and (max-width: 1400px) {
    #playArea { padding: 0px; }
    
}

/* Responsive Rules: 1280-1399=PC */
@media only screen and (max-width: 1280px) {
    #playArea { padding: 0px; }
    /*#topArea > #cardFoun .slot h1 { line-height:133px; } */


    .card .face, .card .face img, .card .suit.top_center, .card .suit.middle_center, .card .suit.bottom_center { visibility: hidden !important; }
    .card .corner                    { font-size: 1.5em; }
    .card .corner span               { font-size: 4.5em; }
    .card .corner.top                { top:    1em; left:  1em; text-align: left;  }
    .card .corner.bottom             { bottom: 1em; right: 1em; text-align: right; }
    .card .corner.top    span        { font-family: Suit;   font-size: 3em; margin-bottom: 2.25em; transform:rotate(180deg); }
    .card .corner.bottom span        { font-family: Suit;   font-size: 3em; margin-bottom: 2.25em; transform:rotate(180deg); text-align:center; }
    .card .corner.top    span.number { font-family: Roboto; font-size: 2em; transform:rotate(0deg); }
    .card .corner.bottom span.number { font-family: Roboto; font-size: 2em; text-align:left; padding-top:0em; transform:rotate(0deg); }
}

/* Responsive Rules: 1080=tablets (iPad landscape=1024) */
@media only screen and (max-width: 1080px) {

    .hBtnTab > div:nth-child(2) button { font-size: 2em; }
    .hBtnTab button { font-size: 1em; }

    #playArea { padding: 0px; }
    #topArea > #cardFoun .slot h1 { line-height:96px; }

    .card .corner.top    span,
    /*.card .corner.bottom span { margin-bottom: 1.6em; }  */
    .card .corner.top    span.number,
    .card .corner.bottom span.number { font-size: 2.3em; }
}

@media only screen and (max-width: 1020px) {

    #topArea > #cardFoun .slot h1 { line-height:92px; }
}

@media only screen and (max-width: 900px) {
    #topArea > #cardFoun .slot h1 { line-height:76px; }

    .card .corner        { font-size: 1.3em; }
    .card .corner.top    span,
    .card .corner.bottom span { margin-bottom: 1.5em; }
    .card .corner.top    span.number,
    .card .corner.bottom span.number { font-size: 2em; }
}

@media only screen and (max-width: 800px) {
    #topArea { margin-bottom: 1em; }
    #topArea > #cardFoun .slot h1 { line-height:76px; }
    
    .card .corner        { font-size: 1.3em; }
    .card .corner.top    span,
    .card .corner.bottom span { margin-bottom: 1.5em; }
    .card .corner.top    span.number,
    .card .corner.bottom span.number { font-size: 2em; }
}

@media only screen and (max-width: 700px) {
    #topArea > #cardFoun .slot h1 { line-height:68px; }
    
    #playArea { padding:0px; }
    #topArea { margin-bottom: 10px; }

    .card .corner { font-size:1.75em; }
    .card .face, .card .face img, .card .suit.top_center, .card .suit.middle_center, .card .suit.bottom_center { visibility: hidden; }
    .card .corner.top    span,
    .card .corner.bottom span { margin-bottom: 3em; }
    .card .corner.top    span.number,
    .card .corner.bottom span.number { font-size: 2em; }
}

@media only screen and (max-width: 600px) {
    #topArea > #cardFoun .slot h1 { line-height:60px; }
    .card .ten { margin-left: 0px; }

    .card .corner        { font-size: 1.75em; }
    .card .corner.top    span,
    .card .corner.bottom span { margin-bottom: 3em; }
    .card .corner.top    span.number,
    .card .corner.bottom span.number { font-size: 2em; }
}

@media only screen and (max-width: 550px) {
    #topArea > #cardFoun .slot h1 { line-height:52px; }
}

@media only screen and (max-width: 425px) {
    #topArea > #cardFoun .slot h1 { line-height:40px; }
}

@media only screen and (max-width: 375px) {
}