@font-face {
	font-family: LeagueGothic;
	src: url(/fonts/LeagueGothic-Regular.ttf);
}
html,body{
  background-color:rgb(0, 129, 61);
}
*{
  box-sizing:border-box;
}
#demo{
  position:relative;
  left:0;
  top:0;
  font-family: LeagueGothic, Meiryo;
  text-align:center;
  user-select:none;
  color:#fff;
}
#stage,
#board{
  position:relative;
  left:0;
  top:0;
  min-height:100vh;
}
#stage{
  display: grid;
  place-items: center;
}

#rule{
  font-family: LeagueGothic, Meiryo;
}

#bar{
  position:absolute;
  left:0;
  bottom:-5vh;
  width:100%;
  font-size:40px;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
  z-index:5;
}
#bar.down{
  left:0;
  bottom:0;
}
#bar:hover{
  background-color:rgba(255,255,255,0.2);
}

#board{
  padding-top:5vh;
}

#demo p{
  display:block;
  position:absolute;
  left:0;
  top:0;
}
#demo svg{
  display:inline-block;
  margin-top:20px;
}
#demo p{
  left:calc(50% - 20px);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 48px 20px 0 20px;
  border-color: #000000 transparent transparent transparent;
  z-index:3;
}

svg textPath{
  text-indent:-2em;
  text-anchor:middle;
  dominant-baseline: middle;
}

#result{
  position:absolute;
  z-index:3;
  top:0px;
  left:0;
  width:100%;
  height:100vh;
  line-height:100vh;
  color:#fff;
  font-size:20vmin;
  font-weight:bold;
  text-align:center;
  cursor:pointer;
}
#result small{
  font-size:32px;
}

#score{
  color:#fff;
  font-size:160px;
  font-weight:bold;
  text-align:center;
}

#tableImg{
  width:100%;
}

#table{
  position:relative;
  left:0;
  top:0;
  height:480px;
  user-select:none;
}
#table div{
  position:absolute;
  width:calc(100% / 14);
  height:90px;
  border:2px solid rgba(255,255,255,0.6);
  text-align:center;
  line-height:90px;
  overflow:hidden;
}
#table b{
  display:block;
  position:absolute;
  width:calc(100% / 14 / 3);
  height:calc(90px / 3);
  text-align:center;
  line-height:30px;
  border-radius:50%;
}
#table div:hover{
  border:4px solid rgba(255,255,255,1);
}
#table b:hover{
  background-color:rgba(255,255,255,0.4);
}

#table div.hit{
  border:4px solid rgb(255, 255, 0);
}


#table div.column0{
  height:135px;
  line-height:135px;
}
#table div.column2{
  width:calc(100% / 14 * 2);
}
#table div.column4{
  width:calc(100% / 14 * 4);
}

#table div i{
  color:#fff;
  font-size: 32px;
  font-family: LeagueGothic, Meiryo;
}


#table div.black{
  background-color: rgb(16, 16, 18);
}
#table div.red{
  background-color: rgb(221, 31, 38);
}
o{
  display:none;
}
c{
  display:inline-block;
  width:16px;
  height:12px;
  background-image:url(../js-game-dice-sicbo/chip.png);
  background-size:cover;
  position:absolute;
  left:calc(50% - 16px / 2);
  bottom:8px;
  border-radius:50%;
}
c:nth-of-type(1){
  bottom:8px;
}
c:nth-of-type(2){
  bottom:12px;
}
c:nth-of-type(3){
  bottom:16px;
}
c:nth-of-type(4){
  bottom:20px;
}
c:nth-of-type(5){
  bottom:24px;
}

#rule{
  padding:5vh;
}
/*
@media (max-width: 600px) {
  #demo{
    transform:scale(0.5);
  }
}
*/

#other{
  padding:8px;
  background-color:rgb(0, 129, 61);
}
#rule{
  margin:2px;
  padding:8px;
  background-color:#fff;
  border-radius:8px;
}
#rule *{
  padding:8px;
}