* {
    box-sizing:border-box;
}
body {
    background-color:#eee;
}
.container {
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
@media (max-width:800px) {
    .container {
        width:initial;
    }
}
.view-gameboard,.view-controls {
    float:left;
    position:relative;
}
.view-gameboard {
    width:70%;

}
.view-controls {
    width:30%;
}
.view-cards {
    position:relative;
    font-size:30px;
}
.view-titles,.view-cards {
    position:absolute;
    left:0;
    top:0;
}

.row {
    margin-bottom:1em;
}
.row:after {
    clear:both;
    display:table;
    content:"";
}
.card-row {
    font-size:30px;
    height:2.3333em;
    line-height:1em;
}
.card-row-large {
    font-size:60px;
    line-height:1em;
}
.card, .card-stack {
    height:2.3333em;
}
.card {
    font-family:sans-serif;
    display:inline-block;
    border:.06em solid black;
    background-color:white;
    font-size:1em;
    margin:1px;
    padding:.16666em;
    border-radius:.16666em;
    width:1.6666em;
    line-height:1em;
    text-align:center;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor:default;
    vertical-align: middle;
    position:absolute;
    -webkit-transition:top .3s, left .3s, transform .3s;
    -moz-transition:top .3s, left .3s, transform .3s;
    transition:top .3s, left .3s, transform .3s;
    background-image:none;
}
.card-back,.facedown {
    transform:rotateY(180deg);

    background-color: #4C6694;
    background-image:
    repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 48%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 2px, transparent 2px, transparent 48%),
    linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: .4em .8em;
}
.facedown .card-icon-top, .facedown .card-icon-bottom {
    display:none;
}
.ondeck {
    display:none;
}

.card-icon-top, .card-icon-bottom {
    position:absolute;
    /*font-size:.4em;*/
    line-height:1em;
    display:block;
}
.card-icon-top {
    font-size:.4em;
    top:.2em;
    left:.06em;
}
.card-icon-bottom {
    font-size:.8em;
    bottom:.1em;
    right:.1em;
    /*-ms-transform: rotate(180deg);*/ /* IE 9 */
    /*-webkit-transform: rotate(180deg);*/ /* Chrome, Safari, Opera */
    /*transform: rotate(180deg);*/
}

.card-stack {
    position:relative;
    display:inline-block;
}
.card-stack>.card {
    position:absolute;
}
.card-stack>.card:nth-child(1) {
    bottom:0;
    left:0;
}
.card-stack>.card:nth-child(2) {
    bottom:2px;
    left:2px;
}
.card-stack>.card:nth-child(3) {
    bottom:4px;
    left:4px;
}
.card-stack>.card:nth-child(4) {
    bottom:6px;
    left:6px;
}
.card-stack>.card:nth-child(5) {
    bottom:8px;
    left:8px;
}
.card-stack>.card:nth-child(6) {
    bottom:10px;
    left:10px;
}


.title-dealer,.title-player {
    position:absolute;
    left:30px;
    font-size:1.3em;
    line-height:1em;
    font-weight:bold;
    white-space: nowrap;
}
.title-dealer {
    top:97px;
}
.title-player {
    top:197px;
}
.engagement {
    margin-top:1em;
}

.column {
    float:left;
    padding-left:1%;
    padding-right:1%;
}
.col-3 {
    width:25%;
}
.col-4 {
    width:33.3333%;
}
.col-6 {
    width:50%;
}
.col-8 {
    width:66.6666%;
}
.col-9 {
    width:75%;
}
.col-12 {
    width:100%;
}


.btn-ctrl {
    font-size:inherit;
    float:left;
    width:100%;
    display:block;
    height:1.6em;
    padding:.20em .5em;
    text-align:center;
    border:.1em solid #ddd;
    background-color:white;
    color:#333;
    cursor:pointer;
    border-radius:4px;
    margin-top:1%;
    margin-bottom:1%;
    outline:0;
}
.btn-ctrl:nth-child(even) {
    /*margin-left:2%;*/
}
.btn-ctrl:hover {
    background-color:#ffe;
}