#what,#bord,#audi { width:600px; text-align:center; position:absolute; 
                      left:50%; margin-left:-300px; }
#what { height:36px; top:18px; }
#bord { height:600px; position:absolute; top:111px; opacity:.3; }
#audi { top:760px; }
.turn #bord { opacity:1; }
#message { position:absolute; left:0; top:0; width:100%; height:90px; 
           line-height:90px; background-color:#000;  color:#fff; 
           text-align:center; }
#message .ship { display:inline; }
#what { font-family:"bau"; }
#what div { display:inline-block; }
.ship { padding:.3rem; font-weight:400; letter-spacing:1px; 
        text-transform:uppercase; line-height:2rem; }
.ship:before { content:"~"; font-weight:500; font-size:1rem; }
.waiting.ship:before { content:"Waiting"; color:#ccc; }
#what #x,#what #o { border:2px solid #fff; }
.x #what #x,.o #what #o { border:2px solid red; }
#what #ship,#what #user { padding:.6rem; }
#what .as { width:1.6rem; } 
#audi h1,#vs { margin:0 1rem; padding:.3rem; color:#fff; 
               background-color:#000; }
#audi h1 { font-size:.9rem; text-transform:uppercase; 
           display:inline-block; background-color:#ccc; }
#audi h1:after { content:""; margin:0; }
#audi .ship { color:#ccc; } 
.spac { font-size:100px; line-height:200px; }
.spac { width:198px; height:198px; border:1px solid #000; 
        text-align:center; float:left; cursor:pointer; }
.spac[data-index="0-0"],.spac[data-index="1-0"],.spac[data-index="2-0"] 
  { border-left:0; }
.spac[data-index="0-0"],.spac[data-index="0-1"],.spac[data-index="0-2"] 
  { border-top:0; }
.spac[data-index="2-0"],.spac[data-index="2-1"],.spac[data-index="2-2"] 
  { border-bottom:0; }
.spac[data-index="0-2"],.spac[data-index="1-2"],.spac[data-index="2-2"] 
  { border-right:0; }