html { -moz-box-sizing: border-box; box-sizing: border-box; }
*, *:before, *:after { -moz-box-sizing: inherit; box-sizing: inherit; }
body { margin: 0px; background-color: #000; color: #fff; font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; }
.game { position: absolute; top: 50%; left: 50%; width: 600px; height: 600px; margin-left: -300px; margin-top: -360px; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; tap-highlight-color: transparent; }
.alt { display: none; }
.board { width: 100%; height: 100%; }
@-webkit-keyframes border-blink {
50% {
border-color:#000;
}
}
@-moz-keyframes border-blink {
50% {
border-color:#000;
}
}
@keyframes border-blink {
50% {
border-color:#000;
}
}
@-webkit-keyframes blink {
50% {
visibility:hidden;
}
}
@-moz-keyframes blink {
50% {
visibility:hidden;
}
}
@keyframes blink {
50% {
visibility:hidden;
}
}
@-webkit-keyframes appear {
from {
-webkit-transform:scale(0.3);
transform:scale(0.3);
}
to {
-webkit-transform:scale(1);
transform:scale(1);
}
}
@-moz-keyframes appear {
from {
-moz-transform:scale(0.3);
transform:scale(0.3);
}
to {
-moz-transform:scale(1);
transform:scale(1);
}
}
@keyframes appear {
from {
transform:scale(0.3);
}
to {
transform:scale(1);
}
}
.square { float: left; width: 33.333333333%; height: 33.333333333%; cursor: pointer; border-width: 2px; border-color: #fff; will-change: border-color; }
.square.top { border-bottom-style: solid; }
.square.bottom { border-top-style: solid; }
.square.left { clear: both; border-right-style: solid; }
.square.right { border-left-style: solid; }
.board.blink .square { -webkit-animation: border-blink 0.3s steps(1) 2; -moz-animation: border-blink 0.3s steps(1) 2; animation: border-blink 0.3s steps(1) 2; }
.square .o.blink, .square .x.blink { -webkit-animation: blink 0.3s steps(1) 2; -moz-animation: blink 0.3s steps(1) 2; animation: blink 0.3s steps(1) 2; }
.o { left: 16.666666667%; top: 16.666666667%; width: 66.666666667%; height: 66.666666667%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 20px solid #fff; }
.x { width: 100%; height: 100%; }
.square .x, .square .o { position: relative; will-change: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-animation: appear 0.15s cubic-bezier(0.5, 1.8, 0.1, 1.1); -moz-animation: appear 0.15s cubic-bezier(0.5, 1.8, 0.1, 1.1); animation: appear 0.15s cubic-bezier(0.5, 1.8, 0.1, 1.1); }
.x:before, .x:after { position: absolute; content: ""; display: block; background-color: #fff; left: 90px; top: 20px; width: 20px; height: 160px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.x:before { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
.x:after { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
.restart { position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer; background-color: rgba(0,0,0,0); }
.scores { position: absolute; left: 50%; top: 50%; width: 600px; margin-left: -300px; margin-top: 290px; text-align: center; cursor: pointer; -webkit-user-select: none; user-select: none; }
.scores p { font: 20px "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; line-height: 1; display: inline-block; margin: 0; padding: 0; -webkit-transform: translate3d(0, 0, 0); ; transform: translate3d(0, 0, 0); }
.scores .swap { display: inline-block; vertical-align: top; width: 30px; height: 30px; margin: -5px -30px 0 0; opacity: 0.4; cursor: pointer; -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; }
.scores:hover .swap { opacity: 1; }
.scores .score { font-size: 50px; display: block; height: 60px; padding: 10px 0 0 0; will-change: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.scores .score.appear { -webkit-animation: appear 0.3s cubic-bezier(0.5, 4, 0.1, 1.1); -moz-animation: appear 0.3s cubic-bezier(0.5, 4, 0.1, 1.1); animation: appear 0.3s cubic-bezier(0.5, 4, 0.1, 1.1); }
.scores .o { display: inline-block; width: 13px; height: 13px; border-width: 2px; margin: 1px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.scores .x { display: inline-block; width: 17px; height: 17px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.scores .x:before, .scores .x:after { top: 2px; left: auto; margin-left: 8px; width: 2px; height: 17px; }
.player1, .player2 { width: 230px; white-space: nowrap; }
.scores.p1 .p2 { display: none; }
.scores.p2 .p1 { display: none; }
.scores .turn { opacity: 0.4; }
.mute { position: absolute; width: 38px; height: 38px; right: 15px; top: 15px; opacity: 0.4; cursor: pointer; -webkit-user-select: none; user-select: none; -webkit-transition: opacity 0.1s linear; -moz-transition: opacity 0.1s linear; transition: opacity 0.1s linear; }
.mute:hover { opacity: 1; }
.flash-wrapper { position: absolute; left: 0; top: 0; right: 0; bottom: 0; width: 100%; height: 100%; }
#flash, #flash object { width: 100%; height: 100%; }

@media (max-width: 630px), (max-height: 760px) {
.game { width: 450px; height: 450px; margin-left: -225px; margin-top: -265px; }
.square .o { border-width: 15px; }
.square .x:before, .square .x:after { left: 67.5px; top: 16px; width: 15px; height: 118px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; }
.scores { width: 450px; margin-left: -225px; margin-top: 215px; }
.scores p { font-size: 17px; letter-spacing: 0; }
.scores .score { font-size: 40px; padding-top: 8px; height: 50px; }
.scores .o { width: 12px; height: 12px; border-width: 2px; margin: 0 1px; }
.scores .x { width: 12px; height: 12px; }
.scores .x:before, .scores .x:after { top: 0; margin-left: 5px; width: 2px; height: 14px; }
.player1, .player2 { width: 180px; }
}

@media (max-width: 540px), (max-height: 550px) {
.game { width: 300px; height: 300px; margin-left: -150px; margin-top: -180px; }
.square { border-width: 2px; }
.square .o { border-width: 10px; }
.square .x:before, .square .x:after { left: 45px; top: 13px; width: 10px; height: 74px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }
.scores { width: 300px; margin-left: -150px; margin-top: 160px; }
.scores .swap { display: none; }
.scores p { font-size: 14px; }
.scores .score { font-size: 25px; padding-top: 9px; height: 50px; }
.scores .o { width: 9px; height: 9px; margin: 0; }
.scores .x { width: 10px; height: 10px; }
.scores .x:before, .scores .x:after { margin-left: 4px; height: 11px; }
.player1, .player2 { width: 130px; }
}

@media (max-height: 480px) {
.game { top: 60px; margin-top: 0; }
.scores { top: 400px; margin-top: 0; padding-bottom: 20px; }
}