*{
  margin: 0;
  -webkit-text-size-adjust:none;
}
#DownPerson{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  bottom: 0;
  right: 50%;
  margin: 0 -140px 0 0;
  transform: translate(0px,5px);
}
#RightPerson{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 50%;
  right: 0;
  margin: -70px 0 0 0;
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg) translate(0,78px);
}
#UpPerson{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 0;
  right: 50%;
  margin: 0 -140px 0 0;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg) translate(0px,5px);
}
#LeftPerson{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 50%;
  left: 0;
  margin: -70px 0 0 0;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg) translate(0,78px);
}
#Mid{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#Roll_Dice{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  bottom: 5px;
  right: 5px;
}
#Show_Option{
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 5px;
  left: 5px;
}
.circle{
  background-color:red;
  width:15px;
  height:15px;
  border-radius:50%;
  margin: 3px auto 3px auto;
}
.blackcircle{
  display: inline-block;
  background-color:black;
  width:3px;
  height:3px;
  border-radius:50%;
  margin: 3px 0px auto 0px;
}
.circle_dice{
  background-color:black;
  width:5px;
  height:5px;
  border-radius:50%;
}
.circle_button{
  background-color:black;
  width:25px;
  height:5px;
}
.riichi_stick{
  visibility: hidden;
  border: 1px solid black;
  grid-area: stick;
  transform: translate(0,20px);
}
.riichi_stick_mini{
  border: 1px solid black;
  width: 50px;
  height: 10px;
  transform: rotate(-50deg) translate(-52px,-10px);
}

.container{
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, auto);
  grid-template-areas: 
    "stick stick ."
    "wind score change";
  vertical-align: middle;
  text-align: center;
}
.container_mid{
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-template-columns: repeat(3, 150px);
  grid-template-areas: 
    "now now ron"
    "now now tsumo"
    "riichi renjang ryuukyoku";
  vertical-align: middle;
  text-align: center;
}
.container_choose{
  display: grid;
  grid-template-rows: auto repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  grid-template-areas: 
    "explain explain explain"
    ". upcheck ."
    "leftcheck ok rightcheck"
    ". downcheck .";
  vertical-align: middle;
  text-align: center;
}
.container_showscore{
  display: grid;
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(3, 100px);
  grid-template-areas:
    ". upscore ."
    "leftscore ok rightscore"
    ". downscore .";
  vertical-align: middle;
  text-align: center;
}

.container_roll{
  display: grid;
  grid-template-rows: 15px 86px 15px;
  grid-template-columns: repeat(3, 15px 86px) 15px;
  grid-template-areas:
    ". dice_1 . updice . dice_2 ."
    ". dice_1 leftdice sum rightdice dice_2 ."
    ". dice_1 . downdice . dice_2 .";
  vertical-align: middle;
  text-align: center;
}
.container_tile{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 86px 15px) 86px;
  grid-template-areas:
    "tile_1 . tile_2 . tile_3 . tile_4";
  vertical-align: middle;
  text-align: center;
  font-size: 80px;
  margin: 15px;
}

.container_dice{
  display: grid;
  width:35px;
  height:35px;
  grid-template-rows: repeat(7, 5px);
  grid-template-columns: repeat(7, 5px);
  grid-template-areas: 
  ". . . . . . ."
  ". _1 . . . _2 ."
  ". . . . . . ."
  ". _3 . _4 . _5 ."
  ". . . . . . ."
  ". _6 . . . _7 ."
  ". . . . . . ."
  ;
  vertical-align: middle;
  text-align: center;
  border: 3px solid black;
  border-radius:5px;
  margin: auto;
}

.container_option{
  display: grid;
  width:35px;
  height:35px;
  grid-template-rows: repeat(7, 5px);
  grid-template-columns: 5px 25px 5px;
  grid-template-areas: 
  ". . ."
  ". _1 ."
  ". . ."
  ". _2 ."
  ". . ."
  ". _3 ."
  ". . ."
  ;
  vertical-align: middle;
  text-align: center;
  border: 3px solid black ;
  border-radius:5px;
  margin: auto;
}

.container_record{
  display: grid;
  grid-template-rows: 35px 200px;
  grid-template-columns: 120px repeat(4, 100px);
  grid-template-areas: 
  "rollback downname rightname upname leftname"
  "scroll scroll scroll scroll scroll";
  vertical-align: middle;
  text-align: center;
}

.container_recordscroll{
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: 120px auto;
  grid-template-areas: 
  "when downrecord rightrecord uprecord leftrecord";
  vertical-align: middle;
  text-align: center;
}

.container_modify{
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-template-columns: repeat(4, auto);
  grid-template-areas:
  "name name name name"
  "name0 name1 name2 name3"
  "score score score score"
  "score0 score1 score2 score3"
  "ok ok ok ok";
  vertical-align: middle;
  text-align: center;
}

.container_inputscore{
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: 60px auto;
  grid-template-areas:
  "fan fancnt"
  "bu bucnt";
  vertical-align: middle;
  text-align: center;
}

.wind{
  grid-area: wind;
  margin: auto;
  font-size: 80px;
}
.score{
  grid-area: score;
  width: 200px;
  margin: auto;
}
.change{
  grid-area: change;
  width: 0px;
  visibility: hidden;
  font-size: 30px;
  padding-top: 30px;
  text-align: left;
  transform: translate(-30px,-15px);
}
.now{
  grid-area: now;
  font-size: 70px;
}
.riichi{
  grid-area: riichi;
  margin: 0 auto 0 auto;
  font-size: 0px;
  transform: translate(20px,-10px);
}
.renjang{
  grid-area: renjang;
  margin: auto;
  font-size: 0px;
  transform: translate(20px,-10px);
}
.ron{
  grid-area: ron;
  font-size: 40px;
}
.tsumo{
  grid-area: tsumo;
  font-size: 40px;
}
.ryuukyoku{
  grid-area: ryuukyoku;
  font-size: 40px;
}

.explain{
  grid-area: explain;
  font-size: 20px;
}
.downcheck{
  grid-area: downcheck;
  font-size: 70px;
  color: black;
}
.rightcheck{
  grid-area: rightcheck;
  font-size: 70px;
  color: black;
}
.upcheck{
  grid-area: upcheck;
  font-size: 70px;
  color: black;
}
.leftcheck{
  grid-area: leftcheck;
  font-size: 70px;
  color: black;
}
.ok{
  grid-area: ok;
  font-size: 60px;
  line-height: 100px;
}
.sum{
  grid-area: sum;
  font-size: 50px;
  line-height: 82px;
  vertical-align: middle;
  text-underline-position: under;
}
.downdice{
  grid-area: downdice;
  visibility: hidden;
  font-size: 15px;
  line-height: 15px;
  vertical-align: middle;
  color: red;
}
.rightdice{
  grid-area: rightdice;
  visibility: hidden;
  font-size: 15px;
  line-height: 82px;
  vertical-align: middle;
  color: red;
}
.updice{
  grid-area: updice;
  visibility: hidden;
  font-size: 15px;
  line-height: 15px;
  vertical-align: middle;
  color: red;
}
.leftdice{
  grid-area: leftdice;
  visibility: hidden;
  font-size: 15px;
  line-height: 82px;
  vertical-align: middle;
  color: red;
}

.downscore{
  grid-area: downscore;
  font-size: 30px;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  transform: rotate(0deg);
}
.rightscore{
  grid-area: rightscore;
  font-size: 30px;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  transform: rotate(270deg);
}
.upscore{
  grid-area: upscore;
  font-size: 30px;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  transform: rotate(180deg);
}
.leftscore{
  grid-area: leftscore;
  font-size: 30px;
  line-height: 100px;
  vertical-align: middle;
  text-align: center;
  transform: rotate(90deg);
}

.modal {
  display: none;
  position: fixed;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}
.modal_content {
  background-color: #ffffff;
  position: fixed;
  text-align: center;
  vertical-align: bottom;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  padding: 5px;
  z-index: 2;
}

html, body{
  overflow: hidden;
  position: relative;
  height: 100%;
  width: 100%;
  font-family: 'Noto Serif KR', serif;
  /* Anti-drag */
  -ms-user-select: none; 
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
select {
  background-color: white;
  font-size: 40px;
  border: 0px solid black;
  border-radius: 0px;
  width: 160px;
  font-family: 'Noto Serif KR', serif;
}
option{
  font-size: 20px;
  border: 0px solid black;
  border-radius: 0px;
  font-family: 'Noto Serif KR', serif;
}
input[type='text'], input[type='number']{
  font-size: 15px;
  width: 100px;
  font-family: 'Noto Serif KR', serif;
  text-align: center;
}


input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="radio"]{
  appearance: none;
}
input[type="radio"]:checked + span{
  color: red;
}
input[type="radio"]:disabled + span{
  color: gray;
}
@media (orientation: portrait) {
	html {
		transform: rotate(-90deg);
		transform-origin: top left;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100vh;
    height: 100vw;
	}
}