/*
 * name: FreecellJS.css
 * file: css/FreecellJS.css
 *
 * Copyright (c) 2015-2016. Brent Ely;
 * https://github.com/gitbrent/
 *
 * Licences: MIT
 * http://www.opensource.org/licenses/mit-license.php
 */

@font-face { font-family: 'Playfair';        src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Open Sans Light'; src: url('../fonts/OpenSans-Light.ttf') format('truetype'); }
@font-face { font-family: 'Roboto Thin';     src: url('../fonts/Roboto-Thin.ttf')    format('truetype'); }
@font-face { font-family: 'Roboto';          src: url('../fonts/Roboto-Light.ttf')   format('truetype'); }

body {
    margin: 0px;
    overflow: hidden;
    background: url('../img/table_pattern.jpg');
    background-size: 100% 100%;

}

/* Patterns from https://codepen.io/andrewdavid11/pen/ycqrz/ */
.bkgd1 {
    /* Thanks to Lea Verou, creator of 'Japanese Cube' gradient pattern from css3pie.com. Used here as original, with some color mods. */
    background-color: #3A9C45;
    background-size: 80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
    background-image:
        -webkit-linear-gradient( 60deg, #3A7C25 12%, transparent 12.5%, transparent 87%, #3A7C25 87.5%, #3A7C25),
        -webkit-linear-gradient(-60deg, #3A7C25 12%, transparent 12.5%, transparent 87%, #3A7C25 87.5%, #3A7C25),
        -webkit-linear-gradient( 60deg, #3A7C25 12%, transparent 12.5%, transparent 87%, #3A7C25 87.5%, #3A7C25),
        -webkit-linear-gradient(-60deg, #3A7C25 12%, transparent 12.5%, transparent 87%, #3A7C25 87.5%, #3A7C25),
        -webkit-linear-gradient( 30deg, #2A6C15 25%, transparent 25.5%, transparent 75%, #2A6C15 75.0%, #2A6C15),
        -webkit-linear-gradient( 30deg, #2A6C15 25%, transparent 25.5%, transparent 75%, #2A6C15 75.0%, #2A6C15);
}
.bkgd2 {
    /* Thanks to Nicolas Gallagher, creator of 'Steps' gradient pattern altered here from css3pie.com */
    background-color: #6D9EE3;
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
    background-image:
        -webkit-linear-gradient(115deg, #0F3E7F 23px, transparent 23px),
        -webkit-linear-gradient(295deg, #0F3E7F 23px, transparent 23px),
        -webkit-linear-gradient(115deg, #0F3E7F 23px, transparent 23px),
        -webkit-linear-gradient(295deg, #0F3E7F 23px, transparent 23px),
        -webkit-linear-gradient(115deg, #0F3E7F 10px, transparent 10px),
        -webkit-linear-gradient(295deg, #0F3E7F 10px, transparent 10px),
        -webkit-linear-gradient(115deg, #0F3E7F 10px, transparent 10px),
        -webkit-linear-gradient(295deg, #0F3E7F 10px, transparent 10px);
}

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); }

button.coolBtn {
    width: 100%; height: 80px;
    padding: 0; margin: 0;
    vertical-align: middle;
    font-family: 'Open Sans Light'; font-size: 1.5em; color: white; text-transform: uppercase;
    border: 0; border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}
button.coolBtn:hover { transform: scale(1.05); transition: .25s ease-in; }
button.coolBtn.small {
    height: auto;
    padding: 10px;
    font-size: 1.2em;
}

/* */
.hBtnTab { display: table; width: 100%; position: absolute; left: 0; bottom: 30px; }
.hBtnTab > div { display: table-cell; padding:0 30px; text-align:left; vertical-align: bottom; }
.hBtnTab > div:nth-child(1) { width:25%; }
.hBtnTab > div:nth-child(2) { width:50%; }
.hBtnTab > div:nth-child(3) { width:25%; }
.hBtnTab button {
    width: 100%; height: 80px;
    padding: 0; margin: 0;
    vertical-align: middle;
    font-family: 'Open Sans Light'; font-size: 1.5em; color: white; text-transform: uppercase;
    border: 0;
    border-radius: 10px;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}
.hBtnTab button:hover { transform: scale(1.05); transition: .25s ease-in; }
.hBtnTab > div:nth-child(1) button { background:linear-gradient(to bottom, #03BBE5 0%,#0288D4 100%); }
.hBtnTab > div:nth-child(2) button { background:linear-gradient(to bottom, #15D418 0%,#17BC14 100%);
    border:3px solid #e7e7e7;
    font-size: 3em;
    letter-spacing: 0.1em;
}
.hBtnTab > div:nth-child(3) button { background:linear-gradient(to bottom, #921AD3 0%,#8415C4 100%); }

#dialogStart { text-align: center; }
#dialogStart .title {
    font-family: Playfair; font-size: 6em; color: white;
    letter-spacing: .03em; white-space: nowrap;
    text-shadow: 5px 5px 10px rgba(0,0,0,0.7);
}

#dialogOptions { font-family: 'Open Sans Light'; color: white; padding:20px; }
#dialogOptions button.coolBtn { background:linear-gradient(to bottom, #03BBE5 0%,#0288D4 100%); }

#dialogOptions div.label {
    font-size: 1.5em;
    color: white;
    text-align: left;
    margin-top: 20px;
}
#dialogOptions div.label:first-child { margin-top: 0; }
#dialogOptions fieldset {
    border-color: #5b8a3c;
    text-align: left;
    padding: 10px;
}
#dialogOptions #optBkgds > div > div:first-child { vertical-align: middle; }

.dialogYouWon {
    background-color: #222222;
    background: repeating-linear-gradient(45deg, #d7d7d7 0%, #d7d7d7 10%, #eee 0%, #eee 50%) 0 / 15px 15px;
    border-radius: 50px;
    border-width: 20px;
}

.dialogCool {
    background-color: #00f700;
    background: repeating-linear-gradient( 45deg, #2A6C15 0px, #2A6C15 20px, #3A7C25 20px, #3A7C25 40px );
    border-radius: 30px; border-width: 15px;
}
.dialogCool .menuTitle {
    text-align: center;
    font-family: Calibri;
    font-size: 48px;
    color: white;
    text-shadow:0px 1px 0px #5b8a3c;
}

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

.bigText {
    font-size: 10em;
    text-align: center;
    color: #BA01FF;
    font-family: Roboto; font-weight: 400;
    animation: neonPurple 1.5s ease-in-out infinite alternate;
}
.bigBtnBar {
    padding: 10px;
    text-align: center;
}
.bigBtnBar button {
    width: 85%;
    margin: 30px 0;
    font-size:1.5em; color:white; letter-spacing: 0.1em;
    box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
	background-color:#77b55a; background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	border-radius:10px; border:1px solid #4b8f29;
	padding:20px 10px;
	text-shadow:0px 1px 0px #5b8a3c;
}
.bigBtnBar button:hover { transform: scale(1.05); transition: .25s ease-in; }
.bigBtnBar button:nth-child(1) { background:linear-gradient(to bottom, #D21615 0%,#BC1317 100%); border-color: #BC1317; }
.bigBtnBar button:nth-child(2) { background:linear-gradient(to bottom, #03BBE5 0%,#0288D4 100%); border-color: #0288D4; }
.bigBtnBar button:nth-child(3) { background:linear-gradient(to bottom, #15D418 0%,#17BC14 100%); border-color: #17BC14; }
.bigBtnBar button:nth-child(4) { background:linear-gradient(to bottom, #921AD3 0%,#8415C4 100%); border-color: #8415C4; }

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

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

/* ---------- Top Area ---------- */
#topArea { display:table; margin-bottom:2em; }
#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; }

#topArea > div#gameTitle {
    position: relative;
    padding: 5px 10px;
    font-family: Suit; font-size: 2.2em; font-weight: 100;
    text-shadow: 2px 2px 3px #333;
    color: #88dd88;
    vertical-align: top;
}
#topArea > div#gameTitle > div#title { font-family: Roboto; margin: 2px 0 0 0; }
#topArea > div#gameTitle > div > div {
    display: inline-block; width: 50%;
    font-size: 1em; line-height: 1em;
    vertical-align: middle;
    text-shadow: 0px 0px 10px #aade7c;
}
#topArea > div#gameTitle div.blk { color:black;   }
#topArea > div#gameTitle div.red { color:#df0000; }

#cardFoun > div > div { text-align: left; }
#cardFoun > div > div:last-child { margin-right: 0; }
#cardFoun .slot h1 {
    margin: 0;
    text-align: center;
    font-family: 'Open Sans Light'; font-size: 15em; color:rgba(130,130,130,0.25);
    line-height:168px; vertical-align:middle;
}
#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; }

#btnMenu {
    position: absolute;
    bottom: 5px; left:10px;
    display:inline-block;
    cursor:pointer;
    width: 95%; width: calc(100% - 20px);
    margin-top: 10px; padding: 4px 24px;
	background: linear-gradient(to bottom, #77d42a 5%, #5cb811 100%); background-color:#77d42a;
    border:1px solid #268a16; border-radius:6px;
    box-shadow: inset 0px 1px 0px 0px #caefab;
    font-size: 0.5em; color: #306108; text-decoration: none; text-shadow:0px 2px 0px #aade7c;
}
#btnMenu:hover { background:linear-gradient(to bottom, #5cb811 5%, #77d42a 100%); background-color:#5cb811; }

/* ---------- 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;
    background: linear-gradient(#fff,#c7c7c7);
    width: 120px; height: 168px;
    font-size: 7.5px; /* 7.5px = 120px */
    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;
    width: 120px; height: 168px;
    margin: 0;
    border-radius: 0.8em;
    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: 7.5px;
}
.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: 30px; }
    #topArea > div#gameTitle { font-size: 1.5em; }
    #topArea > div#gameTitle > div#title { margin: 4px 0; }
    #topArea > div#gameTitle > div > div { font-size: 2em; }
}

/* Responsive Rules: 1280-1399=PC */
@media only screen and (max-width: 1280px) {
    #playArea { padding: 30px; }
    #topArea > #cardFoun .slot h1 { line-height:133px; }
    .card, .slot { width:95px; height:133px; font-size:8px; }
    .card .ten { margin-left: -6px; }

    #topArea > div#gameTitle { font-size: 1.5em; }
    #topArea > div#gameTitle > div#title { margin: 3px 0; }
    #topArea > div#gameTitle > div > div { font-size: 1.2em; }
    #topArea > div#gameTitle #btnMenu { font-size: 0.6em; padding: 2px; }

    .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) {
    #dialogStart .title { font-size: 5em; }
    .hBtnTab > div:nth-child(2) button { font-size: 2em; }
    .hBtnTab button { font-size: 1em; }

    #playArea { padding: 20px; }
    #topArea > #cardFoun .slot h1 { line-height:126px; }
    .card, .slot { width:90px; height:126px; font-size:8px; }

    #topArea > div#gameTitle > div#title { margin: -2px 0; }
    #topArea > div#gameTitle > div > div { font-size: 1.5em; text-shadow:none; }

    .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 > div#gameTitle { display: none; }
    /* ^^^ TODO ^^^ */

    #topArea > #cardFoun .slot h1 { line-height:126px; }
    .card, .slot { width:90px; height:126px; font-size:8px; }
}

@media only screen and (max-width: 900px) {
    #topArea > #cardFoun .slot h1 { line-height:98px; font-size: 11em; }
    .card, .slot { height:98px; width:70px; font-size:8px; }

    .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:99px; }
    .card, .slot { width:70px; height:98px; font-size:8px; }

    .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:91px; }
    .card, .slot { width:65px; height:91px; font-size:4px; }

    #playArea { padding:15px; }
    #topArea { margin-bottom: 15px; }
    #topArea > div#gameTitle { font-size: 1.25em; }
    #topArea > div#gameTitle > div#title { margin: 1px 0; }
    #topArea > div#gameTitle > div > div { font-size: 1em; text-shadow:none; }

    .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:84px; }
    .card, .slot { width:60px; height:84px; font-size:4px; }
    .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:70px; }
    .card, .slot { width:50px; height:70px; font-size:4px; }
}

@media only screen and (max-width: 425px) {
    #topArea > #cardFoun .slot h1 { line-height:70px; }
    .card, .slot { width:50px; height:70px; font-size:4px; }
}

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