browser-go-proto/css/main.css

* {
  box-sizing: border-box;
  margin: 0;
  vertical-align: middle;
}
body {
  height: vh;
  width: vw;
}

.modal {
  display: flex;
  position: fixed;
  z-index: 2;
  display: none;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.3);
  align-items: center;
  justify-content: center;
}

#menu {
  background-color: #fff;
  padding: 1vmin;

}

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"; */
  display: flex !important;
  flex-direction: column; 
  /* justify-content: flex-end; */
  justify-content: space-between !important;
  /* justify-items: stretch !important; */
  height: 100vh;
  width: 100vw;
}

.player-pos {
  /* flex-grow: 2; */
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex: 5;
}

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

.player-pos#black-pos {
  /* grid-area: black-pos; */
  flex-direction: row-reverse;
  justify-self: flex-end;
}

#kifu {
  order: 0;
  height: 10vh;
  width: 8vh;
  background-color: #FFF;
  transform: rotate(-20deg);
}

#kifu table {
  
}

.bowl {
  order: -1;
  margin: 1vh;
  height: 10vh;
  width: 10vh;
  /* border: solid black; */
  border-radius: 50%;
  background-color: rgb(116, 48, 17);
  box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61);
}

.caps-space {
  color: #FFF;
  order: 1;
  margin: 1vh;
  height: 6vh;
  width: 6vh;
  border-radius: 50%;
  background-color: rgb(116, 48, 17);
  box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61);
  display: flex;
  align-items: center;
  justify-content: center;
}

#board-space {
  margin: 0 auto;
  /* grid-area: board-space; */
  display: flex;
  flex-direction: column;
  background-color: #EAB24E;
  /* width: 90vmin; */
  /* height: 90vmin; */
  padding: 1vmin;
  z-index: 1;
  box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
  flex: 1;
}

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

#board-space 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;
  margin: auto;
  padding: 0;
  vertical-align: middle;
}

#board-space 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%);
}

#board-space td[id^="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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); 
}

#board-space 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%);
}

#board-space 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%);
}

#board-space td[id="1,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%);
}

#board-space td[id="1,9"] {
  background: conic-gradient( 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% );
}

#board-space 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) 99%, #000 100%);
}

#board-space td[id="9,9"] {
  background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, 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;
  vertical-align: middle;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
td .stone .dot {
  width: 35%;
  height: 35%;
  border-radius: 50%;
  margin: auto;
  vertical-align: middle;
}

td .stone[data-stone="ko"] {
  background-color: transparent;
  border: 1vmin solid red;
}
td .stone[data-stone="white"] {
  background-color: white;
}
td .stone[data-stone="black"] {
  background-color: black;
}
td .stone[data-stone="none"] {
  background-color: transparent;
}
td .dot[data-dot="white"] {
  background-color: white;
}
td .dot[data-dot="black"] {
  background-color: black;
}
td .dot[data-dot="none"] {
  background-color: transparent;
}
td .dot .dame {

}
td .dot .seki {

}