html{
-moz-box-sizing:border-box;
box-sizing:border-box;
}


*,*:before,*:after{
-moz-box-sizing:inherit;
box-sizing:inherit;
}


body{
width:100%;
height:100%;
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%;
text-align: center;
}

a:link {
color:#fff;
text-decoration: none;
}
a:visited {
color:#fff;
text-decoration: none;
}

.game {
position:absolute;
    width: 90vw;
    height: 90vw;
margin-left:5vw;
margin-top:5vw;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
tap-highlight-color:transparent;
z-index: 20;
}

.txt{
text-align: left;
font:2.5vw "Menlo","DejaVu Sans Mono", monospace;
line-height:1;
display:inline-block;
margin:5px;
padding:0px 0 0 0;
position:absolute;
right:0px;
top:100vh;
width:95vw;
height:80vw;
z-index: 18;
white-space: pre-wrap;
}

.add{
text-align: left;
font:4vw "Helvetica","Arial","DejaVu Sans",sans-serif;
line-height:1;
display:inline-block;
margin:10px 5px 150px;
padding:10px;
position:absolute;
right:5vw;
top:120vh;
width:90vw;
height:45vw;
z-index: 16;
white-space: pre-wrap;
 border-style: solid;
border-color: #fff;
border-width: 1px;
}

.scores{
position:absolute;
/*left:0;*/
bottom:10px;
width:100vw;
text-align:center;
z-index: 18;
/*background-color:#000;*/
}

.scores p{
font:4.5vw "Helvetica","Arial","DejaVu Sans",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);
padding:10px 0 0 0;
}
.scores .swap{
display:inline-block;
vertical-align:top;
width:30px;
height:30px;
margin:-5px -0px 0 0;
opacity:0.4;
-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:10vw;
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:2.5vw;
height:2.5vw;
border-width:0.5vw;
margin-top:1vw;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.scores .x{
display:inline-block;
width:3vw;
height:3vw;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.scores .x:before,.scores .x:after{
margin-top:0px;
top:0.3vw;
left:0.3vw;
margin-left:1vw;
width:0.5vw;
height:3vw;
}
.player1,.player2{
width:30vw;
white-space:nowrap;
/*background-color: #f00;*/
}
.ties{
width:30vw;
white-space:nowrap;
/*background-color: #f00;*/
}
.scores.p1 .p2{
display:none;
}
.scores.p2 .p1{
display:none;
}
.scores .turn{
opacity:0.4;
}



@media only screen and (orientation: landscape) {
    body {
    /*    background-color: lightblue;*/
    }
.game {
position:absolute;
    width: 90vh;
    height: 90vh;
margin-left:5vh;
margin-top:5vh;
-webkit-user-select:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
tap-highlight-color:transparent;
z-index: 20;
}

.txt{
text-align: left;
font:2.5vh "Menlo","DejaVu Sans Mono", monospace;
line-height:1;
display:inline-block;
margin:5px;
padding:10px 0 0 0;
position:absolute;
right:0px;
top:30vh;
width:35vw;
height: 35vh;
z-index: 18;
white-space: pre-wrap;
}

.add{
text-align: left;
font:4vh  "Helvetica","Arial","DejaVu Sans",sans-serif;
line-height:1;
display:inline-block;
margin:5px;
padding:10px;
position:absolute;
right:5vw;
top:60vh;
width:30vw;
height:30vh;
z-index: 16;
white-space: pre-wrap;
border-style: solid;
border-width: 1px;
border-color: #fff;
}

.scores{
position:absolute;
right:5px;
top:0;
width:44vw;
height:20vh;
text-align:center;
z-index: 19;
/*background-color:#000;*/
}

.scores p{
font:2.0vw "Helvetica","Arial","DejaVu Sans",sans-serif;
/*font-weight:400;*/
text-transform:uppercase;
line-height:1;
display:inline-block;
margin:0;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
padding:10px 0 0 0;
text-align: center;
z-index: 160;
}
.scores .swap{
display:inline-block;
vertical-align:top;
width:30px;
height:30px;
margin:-15px -0px 0 0;
opacity:0.4;
-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:7.0vw "Helvetica","Arial","DejaVu Sans",sans-serif;
/*font-size:7.0vw;*/
letter-spacing: 1px;
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:1.2vw;
height:1.2vw;
border-width:0.20vw;
margin-top:0.6vw;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.scores .x{
display:inline-block;
width:1.5vw;
height:1.5vw;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
}
.scores .x:before,.scores .x:after{
margin-top:0px;
top:0.15vw;
left:0.15vw;
margin-left:0.5vw;
width:0.25vw;
height:1.5vw;
}
.player1,.player2{
width:14vw;
white-space:nowrap;
/*background-color: #f00;*/
}
.ties{
width:13vw;
white-space:nowrap;
/*background-color: #f00;*/
}
.scores.p1 .p2{
display:none;
}
.scores.p2 .p1{
display:none;
}
.scores .turn{
opacity:0.4;
}
}

.alt{
display:none;
}
.board{
position:absolute;
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.5%;
top:16.5%;
width:66.65%;
height:66.65%;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
border:1px solid #fff;
border-width: 2.5vh;
}
.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);
/*background-color:#000; */
}
.x:before,.x:after{
position:absolute;
content:"";
display:block;
background-color:#fff;
margin-left: -1.5vh;
margin-top: -1.5vh;
left:50%;
top:3vh;
width:3vh;
height:90%;
-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);
}


/*

.flash-wrapper{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
#flash,#flash object{
width:100%;
height:100%;
}
*/