browser-go-proto/css/main.css

* {
  box-sizing: border-box;
  margin: 0;
}

.full-screen {
  /* positioning will be absolue */
  /* will take up whole screen */
  /* background will be ~0.5 opacity */
  /* grid-areas
    "game-info *4" <-date, komi, handicap
    "b-player-info*2 w-player-info*2" <- name, rank, rank-certainty
    "record record record options" <- displays numbered record (stretch!), new game, get game record(stretch!)
    pre-game record will display instructions
   */
}

content {
  background-color: #61a6c2;
  display: grid;
  grid-template-columns: 100vmin;
  grid-template-rows: 1fr 100vmin 1fr;
  grid-template-areas:
    "white-pos"
    "board-space"
    "black-pos"
}

.player-pos {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
}

.player-pos#white-pos {
  grid-area: white-pos;
}

.player-pos#black-pos {
  grid-area: black-pos;
  flex-direction: row-reverse;
}

#kifu {
  order: 0;
}

.bowl {
  order: -1;
  margin: 20px;
  height: 8vh;
  width: 8vh;
  border: solid black;
  border-radius: 50%;
}

.caps {
  order: 1;
}

#board-space {
  margin: 0 auto;
  grid-area: board-space;
  display: flex;
  flex-direction: column;
  background-color: #EAB24E;
  width: 90vmin;
  height: 90vmin;
  padding: 1vmin;
}

table {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: 81vmin;
  width: 81min;
  margin: auto;
}

td {
  height: 9vmin;
  width: 9vmin;
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
  border-radius: 50% solid black;
  color: black;
}

td[id^="1,"] {
  background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%);
}

#row-9 td {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); 
}

td[id$="1"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 99%, #000 100%);
}

td[id$="9"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}

td[id="1,1"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%);
}

td[id="1,9"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}
td[id="9,1"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}
td[id="9,9"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
}

td .stone {
  width: 85%;
  height: 85%;
  border-radius: 50%;
  margin: auto;
}
td .stone .dot {
  width: 35%;
  height: 35%;
  border-radius: 50%;
  margin: auto;
}

td .stone .ko {
  
}
td .stone .white {
  
}
td .stone .black {
  background-color: black;
}
td .stone .transparent {

}
td .dot .white {

}
td .dot .black {

}
td .dot .transparent {

}
td .dot .dame {

}
td .dot .seki {

}