html,body {padding: 0;margin: 0;background: #212223;font-family: system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;}
body {padding:5px 50px;}
#game {width:728px;max-width: 100%;margin:0 auto;}
.controls {height:115px;width:100%;color:#ddd;position:relative;}
.rotate {-webkit-transform: rotate(180deg);transform: rotate(180deg);}
.btn {width:100px;background:#111;opacity:0.6;padding:15px;text-align: center;cursor: pointer;font-weight: bold;z-index: 999;display:inline-block}
.controls .btn {position:absolute;top:10px;}
#undo {color:#6ad;left:10px;}
#endturn {color:#af8;right:10px;}
.btn-available {opacity: 1;}
.lives {font-size:40px;top:36px;text-align: center;position:relative}
.round {font-size:14px;top:36px;text-align: center;position:relative;color:#bbb}

#player0 .lives {color:#d24219}
#player1 .lives {color:#6da0d2}

#board {width:100%;position:relative}
#board table {width:100%;box-sizing: border-box;border-width: 0;}
#board td {width:12.5%;padding: 2px 0;border-width: 0;text-align:center;vertical-align: middle;}
#board td::before {content:"";display:inline-block;border-radius: 50%;height:84px;width:84px;border:2px inset #bbbbbbbb;background-color:black;}

#summary {position:absolute;top:20px;bottom:20px;left:20px;right:20px;text-align:center;color: #aaa;
    background-image: url(icons.png);
    background-blend-mode: multiply;
    background-color: #0f1c38;
    border: 4px #666 double;
	min-height:600px;}
#winner {position:absolute;width:100%;top:100px;color: #eee;font-size:5em;}
#info {position:absolute;width:100%;bottom:100px;}
/*#log {position: fixed;right:0;width:200px;background:#222;color:#39b;top:0;padding:10px}*/

#board td.c0::before {border-color: transparent;background-color:transparent;}

#board td.c2::before,#board td.c4::before {background-image: url(icons.png);background-repeat: no-repeat;}
#board td.c2::before {background-position: -3px 2px;}
#board td.c4::before {background-position:-3px -93px;}

#board td.c2::before,#board td.c3::before {border:1px solid #d24219;background-color:#d24219;}
#board td.c4::before,#board td.c5::before {border:1px solid #6da0d2;background-color:#6da0d2;}
#board td.c3::before,#board td.c5::before {opacity:0.6;}

#board table#pl0 td.legit::before {border:2px solid #b27260;}
#board table#pl1 td.legit:before {border:2px solid #6da0d2;}

/* ####################################### MQs ######################################## */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
	
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

@media all and (max-width: 767px) {
	#board td::before {height:80px;width: 80px;}
	#summary {min-height:500px}
	#board td.c4::before {background-position: -5px -95px;}
	#board td.c2::before {background-position: -5px 0;}
	#info {bottom:80px}
}

@media all and (max-width: 730px) {
	#board td::before {height:60px;width: 60px;}
	#summary {min-height:400px}
	#board td.c4::before {background-position: -15px -101px;}
	#board td.c2::before {background-position: -15px -7px;}
	#info {bottom:50px}
}

@media all and (max-width: 640px) {
	#board td::before {height:44px;width: 44px;}
	#summary {min-height:380px}
	#board td.c4::before {background-position: -22px -111px;}
	#board td.c2::before {background-position: -22px -17px;}
	body {padding:5px 15px;}
	#info {bottom:20px}
	.controls .btn {top:-10px}
	.lives {font-size:32px;}
}

@media all and (max-width: 420px) {
	#board td::before {height:36px;width: 36px;}
	#summary {min-height:320px}
	#board td.c4::before {background-position: -26px -115px;}
	#board td.c2::before {background-position: -26px -21px;}
	body {padding:5px 10px;}
	#info {bottom:15px}

}