@import url('https://fonts.googleapis.com/css?family=Oswald|Bowlby+One|Overpass+Mono|Noto+Serif|Noto+Sans');
body { background-color:#1c4271; color:#fff; font-size:36px; font-family:"Helvetica Neue",Helvetica,sans-serif; }
#main { 
    background: rgb(91,128,178);
    background: -moz-radial-gradient(center, ellipse farthest-corner at 45px 45px,  rgba(91,128,178,1) 0%, rgba(14,64,104,1) 100%);
    background: -webkit-radial-gradient(center, ellipse farthest-corner at 45px 45px,  rgba(91,128,178,1) 0%,rgba(14,64,104,1) 100%);
    background: radial-gradient(ellipse at 45px 45px,  rgba(91,128,178,1) 0%,rgba(14,64,104,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b80b2', endColorstr='#0e4068',GradientType=1 );
    background-image:url(img/felt.png);
    position:absolute; top:0px; left:0px; right:0px; bottom:0px; overflow:hidden; display:inline-block; text-align:center; 
}
#dealer { 
	position: absolute;
	display: block;
	height: 23vh;
	top: 2vh;
	left: 15vw;
	width:18vw; 
	background-color: rgba(0,0,0,.5);
	border-radius: 1vw;
	box-shadow: 0.125em 0.25em 0.5em rgba(0,0,0,.4);
	border: 0.3vw groove #d00;
	padding: 0 2vw 2vw 2vw;
}
#river { position:absolute; display:block; height:35vh; top:35vh; left:32vw; width:68vw;  }
#player { 
	position: absolute;
	display: inline-block;
	height: 28vh;
	bottom: 4vh;
	width: 16vw;
	right: 4vw;
	z-index: 1000;
	padding: 0 1vw 1vw 1vw;
	background-color: rgba(0,0,0,.5);
	border-radius: 1vw;
	box-shadow: 0.125em 0.25em 0.5em rgba(0,0,0,.4);
	border: 0.3vw groove #0af;
}
.card {
	font-family:"Noto Serif","Noto Sans","Helvetica Neue","Arial",cursive;
   display:inline-block;
   width:5em;
   height:7em;
   border-radius:8px;
   background-color:#fff;
   border:1px solid rgba(0,0,0,.8);
   text-align:center;
   position:relative;
   margin-left:.5em;
   box-shadow: .125em .125em 4px rgba(0,0,0,.4);
}
.cardwrap {
   transform-style: preserve-3d;
   transition: transform 400ms;
   width:7vw;
   height:16vh;
   display:inline-block;
   border-radius: .5em;
}
.cardwrap:before { 
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    height:7em;
    width:5em;
    border:.25em solid #fff;
}
#holds {
    font-size:36px;
    height:1em;
    margin:.5em 0;
}
.hold {
    color:#ff0;
    width:7em;
    text-align:center;
    display:inline-block;
    font-weight:bold;
}
.cardwrap .card {
  margin: 0;
  display: inline-block;
  position: absolute;
  width: 12vw;
  height: 32vh;
  transform-style:preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.cardwrap .cardback {
  transform-style:preserve-3d;
  -webkit-backface-visibility: hidden;
	backface-visibility: hidden;
   transform: rotateY(180deg);
}
.cardwrap.flipped  {
   transform: rotateY(-180deg); 
}
.cards {
   position: relative;
   perspective: 800px;
}
.card:before {
   line-height: 1em;
   font-size: 3vw;
   white-space: pre;
   text-align: center;
   display: inline-block;
   padding: .125em .125em .25em .05em;
   position:absolute;
   left:0px;
   top:0px;
   font-weight:bold;
	transform-style:preserve-3d;
	-webkit-backface-visibility: hidden;
}
.card2D:before { color:#c00; content: "2\A\2666"; }
.card3D:before { color:#c00; content: "3\A\2666"; }
.card4D:before { color:#c00; content: "4\A\2666"; }
.card5D:before { color:#c00; content: "5\A\2666"; }
.card6D:before { color:#c00; content: "6\A\2666"; }
.card7D:before { color:#c00; content: "7\A\2666"; }
.card8D:before { color:#c00; content: "8\A\2666"; }
.card9D:before { color:#c00; content: "9\A\2666"; }
.card10D:before { color:#c00; content: "10\A\2666"; }
.card11D:before { color:#c00; content: "J\A\2666"; }
.card12D:before { color:#c00; content: "Q\A\2666"; }
.card13D:before { color:#c00; content: "K\A\2666"; }
.card1D:before { color:#c00; content: "A\A\2666"; }
.card2H:before { color:#c00; content: "2\A\2665"; }
.card3H:before { color:#c00; content: "3\A\2665"; }
.card4H:before { color:#c00; content: "4\A\2665"; }
.card5H:before { color:#c00; content: "5\A\2665"; }
.card6H:before { color:#c00; content: "6\A\2665"; }
.card7H:before { color:#c00; content: "7\A\2665"; }
.card8H:before { color:#c00; content: "8\A\2665"; }
.card9H:before { color:#c00; content: "9\A\2665"; }
.card10H:before { color:#c00; content: "10\A\2665"; }
.card11H:before { color:#c00; content: "J\A\2665"; }
.card12H:before { color:#c00; content: "Q\A\2665"; }
.card13H:before { color:#c00; content: "K\A\2665"; }
.card1H:before {color:#c00; content: "A\A\2665"; }

.card2S:before { color:#000; content: "2\A\2660"; }
.card3S:before { color:#000; content: "3\A\2660"; }
.card4S:before { color:#000; content: "4\A\2660"; }
.card5S:before { color:#000; content: "5\A\2660"; }
.card6S:before { color:#000; content: "6\A\2660"; }
.card7S:before { color:#000; content: "7\A\2660"; }
.card8S:before { color:#000; content: "8\A\2660"; }
.card9S:before { color:#000; content: "9\A\2660"; }
.card10S:before { color:#000; content: "10\A\2660"; }
.card11S:before { color:#000; content: "J\A\2660"; }
.card12S:before { color:#000; content: "Q\A\2660"; }
.card13S:before { color:#000; content: "K\A\2660"; }
.card1S:before { color:#000; content: "A\A\2660"; }
.card2C:before { color:#000; content: "2\A\2665"; }
.card3C:before { color:#000; content: "3\A\2663"; }
.card4C:before { color:#000; content: "4\A\2663"; }
.card5C:before { color:#000; content: "5\A\2663"; }
.card6C:before { color:#000; content: "6\A\2663"; }
.card7C:before { color:#000; content: "7\A\2663"; }
.card8C:before { color:#000; content: "8\A\2663"; }
.card9C:before { color:#000; content: "9\A\2663"; }
.card10C:before { color:#000; content: "10\A\2663"; }
.card11C:before { color:#000; content: "J\A\2663"; }
.card12C:before { color:#000; content: "Q\A\2663"; }
.card13C:before { color:#000; content: "K\A\2663"; }
.card1C:before {color:#000; content: "A\A\2663"; }


.card:after {
   line-height: 1em;
   font-size: 3vw;
   font-weight:bold;
   white-space: pre;
   text-align: center;
   display: inline-block;
   padding: .125em .125em .25em .05em;
   transform: rotate(180deg);
   position:absolute;
   right:0px;
   bottom:0px;
	transform-style:preserve-3d;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
#dealer .card:before, #player .card:before, #dealer .card:after, #player .card:after, #results .card:after, #results .card:before { font-size:2vw; }
.card2D:after { color:#c00; content: "2\A\2666"; }
.card3D:after { color:#c00; content: "3\A\2666"; }
.card4D:after { color:#c00; content: "4\A\2666"; }
.card5D:after { color:#c00; content: "5\A\2666"; }
.card6D:after { color:#c00; content: "6\A\2666"; }
.card7D:after { color:#c00; content: "7\A\2666"; }
.card8D:after { color:#c00; content: "8\A\2666"; }
.card9D:after { color:#c00; content: "9\A\2666"; }
.card10D:after { color:#c00; content: "10\A\2666"; }
.card11D:after { color:#c00; content: "J\A\2666"; }
.card12D:after { color:#c00; content: "Q\A\2666"; }
.card13D:after { color:#c00; content: "K\A\2666"; }
.card1D:after { color:#c00; content: "A\A\2666"; }
.card2H:after { color:#c00; content: "2\A\2665"; }
.card3H:after { color:#c00; content: "3\A\2665"; }
.card4H:after { color:#c00; content: "4\A\2665"; }
.card5H:after { color:#c00; content: "5\A\2665"; }
.card6H:after { color:#c00; content: "6\A\2665"; }
.card7H:after { color:#c00; content: "7\A\2665"; }
.card8H:after { color:#c00; content: "8\A\2665"; }
.card9H:after { color:#c00; content: "9\A\2665"; }
.card10H:after { color:#c00; content: "10\A\2665"; }
.card11H:after { color:#c00; content: "J\A\2665"; }
.card12H:after { color:#c00; content: "Q\A\2665"; }
.card13H:after { color:#c00; content: "K\A\2665"; }
.card1H:after {color:#c00; content: "A\A\2665"; }

.card2S:after { color:#000; content: "2\A\2660"; }
.card3S:after { color:#000; content: "3\A\2660"; }
.card4S:after { color:#000; content: "4\A\2660"; }
.card5S:after { color:#000; content: "5\A\2660"; }
.card6S:after { color:#000; content: "6\A\2660"; }
.card7S:after { color:#000; content: "7\A\2660"; }
.card8S:after { color:#000; content: "8\A\2660"; }
.card9S:after { color:#000; content: "9\A\2660"; }
.card10S:after { color:#000; content: "10\A\2660"; }
.card11S:after { color:#000; content: "J\A\2660"; }
.card12S:after { color:#000; content: "Q\A\2660"; }
.card13S:after { color:#000; content: "K\A\2660"; }
.card1S:after { color:#000; content: "A\A\2660"; }
.card2C:after { color:#000; content: "2\A\2663"; }
.card3C:after { color:#000; content: "3\A\2663"; }
.card4C:after { color:#000; content: "4\A\2663"; }
.card5C:after { color:#000; content: "5\A\2663"; }
.card6C:after { color:#000; content: "6\A\2663"; }
.card7C:after { color:#000; content: "7\A\2663"; }
.card8C:after { color:#000; content: "8\A\2663"; }
.card9C:after { color:#000; content: "9\A\2663"; }
.card10C:after { color:#000; content: "10\A\2663"; }
.card11C:after { color:#000; content: "J\A\2663"; }
.card12C:after { color:#000; content: "Q\A\2663"; }
.card13C:after { color:#000; content: "K\A\2663"; }
.card1C:after {color:#000; content: "A\A\2663"; }
.card .suitC figure:after { left:0.5vw; }
.card figure {
    pointer-events: none;
   position:absolute;
   left:1.5vw;
   top:4vh;
   width:6.3vw;
   height:19vh;
	transform-style:preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	margin:0;padding:0;
}
#dealer figure, #player figure, #results figure {
  width:3vw;
  height:8.5vh;
  left:1.95vw;
  top:4vh;
}
.card10C figure,.card10S figure,.card10D figure, .card10H figure { width:14vw; }
.card11H figure { background-image: url(img/JH.png); }
.card11D figure { background-image: url(img/JD.png); }
.card11C figure { background-image: url(img/JC.png); }
.card11S figure { background-image: url(img/JS.png); }
.card12H figure { background-image: url(img/QH.png); }
.card12D figure { background-image: url(img/QD.png); }
.card12C figure { background-image: url(img/QC.png); }
.card12S figure { background-image: url(img/QS.png); }
.card13H figure { background-image: url(img/KH.png); }
.card13D figure { background-image: url(img/KD.png); }
.card13C figure { background-image: url(img/KC.png); }
.card13S figure { background-image: url(img/KS.png); }

.card figure:after { display:inline-block; position:absolute; top:8.6vh; left:3.8vw; font-size:12vw; top:-6vh; left:1.2vw; }
.suitH figure:after { content:"\A\2665"; color:#c00; }
.suitD figure:after { content:"\A\2666"; color:#c00; }
.suitC figure:after { content:"\A\2663"; color:#000; }
.suitS figure:after { content:"\A\2660"; color:#000; }
div.face figure:after { content:" "; }
div.face figure { background-size:100% 100%; border:1px solid #000; top:6.3vh; width:7.1vw; left:2.4vw;}

#results .suitH figure:after,#dealer .suitH figure:after,#player .suitH figure:after { font-size:5vw; top:-3vh; left:.2vw; }
#results .suitD figure:after,#dealer .suitD figure:after,#player .suitD figure:after { font-size:5vw; top:-3vh; left:.2vw; }
#results .suitC figure:after,#dealer .suitC figure:after,#player .suitC figure:after { font-size:5vw; top:-3vh; left:.2vw; }
#results .suitS figure:after,#dealer .suitS figure:after,#player .suitS figure:after { font-size:5vw; top:-3vh; left:.2vw; }

#player .card, #results .card, #dealer .card { width:7vw; height:17vh; }
.diamond { color: #cc0000; }
.cardback { 
    background: -webkit-radial-gradient(circle, rgb(255,255,255) 25%, rgba(255,255,255,0) 25%), -webkit-radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), -webkit-radial-gradient(circle, rgb(35,29,24) 25%, rgba(255,255,255,0) 25%), -webkit-radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), rgba(200,57,0,1);
    background: -moz-radial-gradient(circle, rgb(255,255,255) 25%, rgba(255,255,255,0) 25%), -moz-radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), -moz-radial-gradient(circle, rgb(35,29,24) 25%, rgba(255,255,255,0) 25%), -moz-radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), rgba(200,57,0,1);
    background: radial-gradient(circle, rgb(255,255,255) 25%, rgba(255,255,255,0) 25%), radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), radial-gradient(circle, rgb(35,29,24) 25%, rgba(255,255,255,0) 25%), radial-gradient(circle, rgb(63,57,50) 25%, rgba(255,255,255,0) 25%), rgba(200,57,0,1);
    background-position: 3em 3em, 3em 4em, auto auto, 0 1em;
    background-size:7px 7px;
    border: .6vw solid #fff;
    border-radius:0.4vw;
    width:12vw;
    height:32vh;
    display:inline-block;
   box-shadow: .125em .125em 4px rgba(0,0,0,.4);
}
#results .cardback, #dealer .cardback, #player .cardback { width:6vw; height:16vh; }
.cardback figure { border: none; }
#dealer.hidden .cardwrap { transform:  rotateY(180deg); }
#player.hidden .cardwrap { transform:  rotateY(180deg); }
#river.hidden .cardwrap {  transform: rotateY(180deg); width:12.7vw; height:32vh;}

#player .card { width:7vw; height:17vh; }
#dealer.hidden .undealt.cardwrap { transform: translateX(150em) translateY(20em) rotateY(180deg) rotateZ(360deg); }
#player.hidden .undealt.cardwrap { transform: translateX(50em) translateY(-20em) rotateY(180deg) rotateZ(360deg); }
#river.hidden .undealt.cardwrap {  transform: translateX(100em) translateY(0em) rotateY(180deg) rotateZ(360deg); }

#toolbar { position:absolute; height:20vh; bottom:0px; left:0px; right:0px; background-color:rgba(0,0,0,.5); color:#fff; font-weight:900; }

#river.hidden .undealt { transform: translateX(100em) translateY(-20em); }

select { font-size:1em; height:1.25em; background-color:#000; color:#fff; border: 1px inset #ccc;}
#betwrap { position:relative; left:1em; display:inline-block; }
h1 { font-size:1em; margin:0; padding:0; line-height:1.75; }
#info { display:inline-block; width:20vw; position: absolute; left:1vw; top:0vh; z-index:9999; height:10vh; padding-top:7vh;}
#buttons { 
display: inline-block;
    width: 80%;
    text-align: center;
    position: relative;
    top: .6em;
    z-index: 1;
}
#betButton { left:60%; position:absolute; top:0; }
button {
height: 16vh;
    width: 9vw;
    cursor: pointer;
    margin: auto 1em;
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    outline: none;
    position: relative;
    top: -1.5em;
}
.button .outer {
display: inline-block;
    position: absolute;
    top: -1em;
    left: -1em;
    width: 100%;
    height: 100%;
    padding: 1em;
    background: #abc;
    border-radius: 5vw;
    box-shadow: inset rgba(0,0,0,0.85) 0px 1px 7px;
    content: " ";
}
.button .outer .height {
	position: relative;
	height: 100%;
	margin-top: -15px;
	padding-bottom: 15px;
	background: #a0a02d;
	border-radius: 5vw;
	background: rgba(0,0,0,0.85) 0px 1px 1px, inset rgba(0,0,0,0.5) 0px -0.8em 8px;
	transition: all 0.1s ease-in-out;
    filter:brightness(.9);
}  

.button .outer .height .inner {
    line-height: 2em;
    font-size: 2.3vw;
    font-weight: 900;
    color: #000;
    text-transform: uppercase;
    letter-spacing: .05em;
    position: relative;
    height: 69%;
    padding-top: 1em;
    text-align: center;
    text-shadow: #ffff7b 0px 0px 1px;
    background: #d1d135;
    background: linear-gradient(to bottom, #f4e130 0%,#fff460 50%,#e5da02 60%,#d1ca00 100%);
    border-radius: 5em;
    box-shadow: inset rgba(255,255,255,0.85) 0px 0px 1px;
    transition: all 0.1s ease-in-out;
}
  
.button:hover .outer .height {
	margin-top: -15px;
	padding-bottom: 15px;
	background: #afaf2d;
	box-shadow: rgba(0,0,0,0.25) 0px 1px 1px, inset rgba(0,0,0,0.35) 0px -2px 6px;
    filter:brightness(1);
}
.button:not(.disabled):active .outer .height {
	margin-top: -8px;
	padding-bottom: 8px;
  background-color:#660; 
}
button.button.disabled:active .outer .height {
	margin-top: -15px;
	padding-bottom: 15px;
}

.button:hover .outer .height .inner {
	text-shadow: #f4f48d 0px 0px 1px;
    background: #d1d135;
    background: linear-gradient(to bottom, #f4e130 0%,#fff460 50%,#e5da02 60%,#d1ca00 100%);
}
.button:not(.disabled):active .outer .height .inner{
	text-shadow: #999926 0px 1px 0px;
	border-radius: 5em;
	box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-webkit-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	-moz-box-shadow: inset rgba(0,0,0,0.9) 0px 0px 8px;
	background: #7d7d12; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7d12 0%, #d3d342 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7d12), color-stop(100%,#d3d342)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #7d7d12 0%,#d3d342 100%); /* Chrome10+,Safari5.1+ */
	background: linear-gradient(top, #7d7d12 0%,#d3d342 100%); /* W3C */
}
button.disabled.button:active .outer .height .inner {

}
button.disabled.button .outer .height { filter:brightness(.5); }
button { transition: transform 400ms cubic-bezier(.25, .99, .71, 1.23); }
#results { text-align:center; position:absolute; display:none; top:10%; width:50%; left:25%; background-color:rgba(0,0,0,.5); border-radius:1em; box-shadow:.25em .25em .5em rgba(0,0,0,.4); border:.125em solid #fff; z-index:99999; padding: 0 0 1em 0; transform:scale(0); transition:all 1s cubic-bezier(.25, .99, .71, 1.23); min-height:5em; }
.results { text-align:left; margin-left:0em; white-space:nowrap; }
h2 { text-align:left; font-size:1em; margin:0; padding:0; line-height:1.75; }

.chip span { pointer-events: none; }
.chip {
font-family: "Oswald",cursive;
    position: relative;
    display: inline-block;
    font-size: 0.8vw;
    height: 3vw;
    width: 3.2vw;
    border-radius: 5vw;
    border: 0.8vw dashed #666;
    background-color: #006600;
    margin: 0;
    box-shadow: 0.25em 0.25em 0.25em rgba(0,0,0,.5);
    transition: all 80ms ease-in;
    filter: brightness(0.75);
}
 
.chip:after {
height: 4.2vh;
    width: 3.3vw;
    padding-top: 1em;
    display: inline-block;
    background-color: #00cc00;
    font-weight: 900;
    color: #000;
    text-shadow: 0px 0px 0px rgba(0,0,0,0);
    border-radius: 5em;
    transform: rotate(15deg);
    position: absolute;
    top: -2.2vh;
    left: -1vw;
    border: 0.9em dashed #fff;
    text-align: center;
 }
.chip span { 
display: inline-block;
    position: relative;
    width: 2.8vw;
    height: 4.6vh;
    background-color: #fff;
    border-radius: 8em;
    z-index: 9990;
    left: -0.2vw;
    top: -1vh;
    text-align: center;
    padding-top: 0.4vh;
    border: 0.2vw solid rgba(0,0,0,0.5);
    color: #000;
    font-family: "Bowlby One", cursive;
    font-size: 1.8em;
	letter-spacing:0px;
}
#chip1.chip span { content: "$1"; color:#000; } 
#chip1.chip:after { content:" "; background-color:#aa00aa; }
#chip1.chip {  background-color:#660066; }
#chip2.chip:after { content:"$2"; background-color:#cccc00; }
#chip2.chip {   background-color:#666600; }
#chip5.chip:after { content:"$5"; background-color:#00aa00; }
#chip5.chip {  background-color:#006600; }
#chip10.chip:after { content:"$10"; background-color:#aa00aa; }
#chip10.chip {   background-color:#660066; }
#chip25.chip:after { content:"$25"; background-color:#00aaaa; }
#chip25.chip { background-color:#006666; }
#chip50.chip:after { content:"$50"; background-color:#ccaa00; }
#chip50.chip {  background-color:#996600; }
#chip100.chip:after { content:"$100"; background-color:#00aacc; }
#chip100.chip {  background-color:#006699; }
#chip250.chip:after { content:"$250"; background-color:#cc00cc; }
#chip250.chip {  background-color:#990099; }
#chip500.chip:after { content:"$500"; background-color:#000; }
#chip500.chip {  background-color:#000000; }


#chipscroll {
display: inline-block;
    position: absolute;
    width: 30vw;
    left: 17vw;
    height: 16vh;
    overflow: hidden;
    /* border: 1px inset #666; */
    border-top: 2px solid rgba(255,255,255,.8);
    top: 0px;
    background-color: #000;
    padding-top: 2vw;
    white-space: nowrap;
    z-index: 9999;
    transition: all 400ms cubic-bezier(.25, .99, .71, 1.23);
}
#chips { display:inline-block; white-space:nowrap; transform:scale(1.5); position:absolute; left:0.5vw; padding-top:1vw;transition: all 900ms cubic-bezier(.25, .99, .71, 1.23); }
div#chipscroll:after {
display: inline-block;
    position: absolute;
    top: 0;
    background-color: #369;
    height: 12.5vh;
    content: " \A\25B6";
    width: 2.5vw;
    border: 1px inset #6ac;
    padding-top: 7vh;
	 padding-left: 0.3vw;
    right: 0;
    box-shadow:-3px 0px 2px rgba(0,0,0,.4); 
}
div#chipscroll:before {
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #369;
    height: 12.5vh;
    content: " \A\25C0";
    width: 2.5vw;
    border: 1px outset #6ac;
    padding-top: 7vh;
    padding-left: 0.3vw;
    left: 0px;
    z-index: 9999;
    box-shadow: 3px 0px 2px rgba(0,0,0,.4);
}

#results button { 
font-size: 2vw;
    background: linear-gradient(to bottom, #f4e130 0%,#fff460 50%,#e5da02 60%,#d1ca00 100%);
    border-radius: 2vw;
    border: .125em outset #ee0;
    height: 7vh;
    top: 0px;
    width: 15vw;
    font-weight: bold;
    text-shadow: 1px 1px 0px #fff;
}
#status { 
    position: absolute;
    display: inline-block;
    width: 14vw;
    height: 18vh;
    background-color: rgba(0,0,0,.5);
    border-radius: .5vw;
    border: 0.2vw groove #fff;
    bottom: 0vh;
	 z-index:9999;
    left: 0.5vw;
    font-size: 2vw;
    padding: 0.35vw 0 0 1vw;
    font-weight: normal;
    text-transform: uppercase;
}
h3 { font-size:.9em; margin:0 0 .125em 0; padding:0; }
#gameBet:before { content: "$"; }
#gamePot:before { content: "$"; }
#status label { font-size:.8em; width:5vw; display:inline-block;}
#playerBalance, #credits, #gameBet, #gamePot { font-size:.9em; }
#playerBalance:before, #betinfo:before, #potinfo:before, #credits:before { content:"$"; }
.chip.selected { outline: 4px solid #ff0; filter:brightness(1.5) drop-shadow(0px 0px 1em #fff); z-index:999; transform:scale(1.3); }
#pot { 
	display: inline-block;
	position: absolute;
	width: 20vw;
	height: 34.5vh;
	left: 9.9vw;
	top: 32.8vh;
	border: 0.6vw solid #ddefff;
	border-radius: 10vw;
}
#pot div.chip span { left:0px; top:-8px; }
h1#result { animation:glow 1s infinite; font-size:1.6em; color:#ff0; text-shadow: 0px 0px 1em rgba(0,100,255,1), 3px 3px 0px #0cf, -3px 3px 0px #0cf, 3px -3px 0px #0cf, -3px -3px 0px #0cf, 0px 3px 0px #0cf, 0px -3px 0px #0cf, 3px 0px 0px #0cf, -3px 0px 0px #0cf; }
#playarea { 
	position: absolute;
	height: 42vh;
	width: 150vw;
	border: 0.9vw solid #eef;
	border-radius: 15vw;
	top: 28.6vh;
	left: 7vw;
}
#fold-result {
    display:none;
    text-align:center;
    color:#fff;
}
#results h1 { font-size:4vw; color:#ff0; }
#results h2 { text-align:center; font-size:3vw; }
#results h3 { text-align:left; font-size:2vw; display:inline-block;margin-left:-1em;}
.winthrob { display:inline-block; animation: winthrob 2s 5; color:#ff0; }
@keyframes winthrob {
    0% { transform:scale(1.5); filter:hue-rotate(0deg); }
    20% { transform:scale(.5); filter:hue-rotate(180deg); }
    40% { transform:scale(1.5); filter:hue-rotate(360deg); }
    60% { transform:scale(.5); filter:hue-rotate(180deg); }
    80% { transform:scale(1.5); filter:hue-rotate(360deg); }
    100% { transform:scale(1.5); filter:hue-rotate(0deg); }
}
@keyframes glow {
	0% { filter:drop-shadow(0px 0px 0vw #fff); }
	50% { filter:drop-shadow(0px 0px 3vw #fff); } 
	100% { filter:drop-shadow(0px 0px 0vw #fff); }
}
#dealerAvatar { position:absolute; top:-2vh; left:-2vw; height:13vh; width:7vw; z-index:9999; filter:drop-shadow(0.1vw 0.1vw 1.09vw rgba(230,230,0,0.7)); }
.gameover { filter:brightness(.5); }
#player-hand, #dealer-hand { font-size:.8em; font-weight:400; text-align:right; display:inline-block; }
#player-hand { margin-bottom:0.5em; }
div#player-handinfo { position: relative; top: 2vh; width: 12vw; height: 5vh; left: 2vw; }
#results button { margin-top:4vh; }