body {
    color: black;
    background-color: #f3f3f3;
}

#xr { font-weight: bold;}

#ready {
    text-decoration: none;
    font-size: xx-large;
    color: yellow;
    background-color: green;
    padding: .5em 1.5em;
    -moz-border-radius: .8em;
    -webkit-border-radius: .8em;
    border-radius: .8em;
}
#ready:disabled {
    color: #777;
    background-color: #999;
}

.board {
    font-size: xx-large;
    text-align: center;
    line-height: 2;
    font-family: Symbola, "DejaVu Sans", "Segoe UI Symbol", OpenSymbol, "MS Gothic", Meiryo, FreeSans, Cantarell;
}
.board > * {
    display: inline-block;
    width: 2em;
    height: 2em;
    margin: .1em;
    padding: .1em;
    border: 2px solid #333;
    -moz-border-radius: .2em;
    -webkit-border-radius: .2em;
    border-radius: .2em;
    background-color: #ccc;
    text-decoration: none;
}
.board > *:hover {
    border-color: #f96;
    background-color: #fec;
}
.board > *.open {
    border-color: #ccc;
    background-color: #eee;
    cursor: auto;
}
.board > *.used {
    cursor: auto;
}

.board > *.won {
    color: #060;
    background-color: #eef3ee;
}
.board > *.lost {
    color: #900;
    background-color: #eeeaee;
}
.board > *.used.won {
    border-color: #9f9;
    background-color: #cfc;
}
.board > *.used.lost {
    border-color: #c9c;
    background-color: #fcf;
}