/* reset */

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0;vertical-align:top;display:inline-block;}address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}form{display:inline}

/* common */

html, body {
  font: 16px sans-serif;
  color: #333333;
  margin: 0;
  padding: 0;
}

.hide {
  display: none;
}

.input {
  width: 300px;
  max-width: 100%;
  padding: 0 10px;
  border: 1px solid #777777;
  border-radius: 5px;
  font-family: inherit;
  font-size: inherit;
  line-height: 40px;
}

.button {
  display: inline-block;
  padding: 0 40px;
  border: 0;
  border-radius: 5px;
  margin-top: 20px;
  background-color: #FFE65D;
  color: #303030;
  font-family: inherit;
  font-size: inherit;
  line-height: 40px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

.button:hover {
  background-color: #333333;
  color: #FFFFFF;
}

.button:disabled, .buttonDisabled, .buttonDisabled:hover {
  background-color: #BBBBBB;
  color: #303030;
}

.input + .button {
  margin-left: 10px;
}

/* dialog */

.freezeOverlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" preserveAspectRatio="xMidYMid" style="margin:auto;background:0 0;display:block;shape-rendering:auto"><circle cx="50" cy="50" r="32" fill="none" stroke="rgba(255,255,255,0.8)" stroke-dasharray="150.79644737231007 52.26548245743669" stroke-width="16"><animateTransform attributeName="transform" dur="1s" keyTimes="0;1" repeatCount="indefinite" type="rotate" values="0 50 50;360 50 50"/></circle></svg>');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 5vw 5vw;
  background-color: rgba(0,0,0,0.8);
}

.dialogOverlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.dialog {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  min-width: 40%;
  padding: 20px;
  background-color: #FFFFFF;
  border-radius: 5px;
}

.dialogTitle {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 5px;
  background-color: #333333;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 40px;
  font-size: 1.2em;
}

.dialogButtons {
  display: flex;
  justify-content: space-around;
}

.dialogButtons > * + * {
  margin-left: 20px;
}

/* game start */

.gameStart {
  padding: 20px;
  background-color: #E0E0E0;
}

.gameStart p, .gameShare p {
  margin-bottom: 10px;
}

/* game config */

.gameConfig {
  padding: 20px;
  background-color: #E0E0E0;
}

.gameConfig .label:not(:first-child) {
  margin-top: 20px;
}

.gameConfig .label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.gameConfig input[type=radio] {
  display: none;
}

.gameConfig div, .gameShare div {
  display: flex;
  align-items: center;
}

.gameConfig .chip {
  display: block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
  box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.2);
  cursor: pointer;
}

.gameConfig .chipWhite {
  background-color: #FFFFFF;
}

.gameConfig .chipBlack {
  background-color: #303030;
}

.gameConfig input[type=radio]:checked + .chip {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.1 2.4L8.8 13.7 4.1 9 0 12.9l4.7 4.7 3.8 3.8.2.2L24 6.4l-3.9-4z" fill="%23fecf0a"/></svg>');
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 20px 20px;
}

/* game share */

.gameShare {
  padding: 20px;
  background-color: #E0E0E0;
}

.gameShare a {
  cursor: pointer;
}

/* game */

.game {
  padding: 20px;
  background-color: #E0E0E0;
}

.gameChat {
  height: 50vh;
  border: 1px solid #777777;
  border-radius: 5px;
  padding: 10px;
  overflow-y: auto;
}

.gameChatMsg + .gameChatMsg {
  margin-top: 10px;
}

.gameChatPlayer {
  margin-bottom: 5px;
  font-size: 0.65em;
}

.gameChatText {
  display: table;
  padding: 10px;
  border-radius: 5px;
  background-color: #FFFFFF;
}

.gameChatBlack {
  background-color: #303030;
  color: #FFFFFF;
}

.gameChatMsgOther > .gameChatPlayer {
  text-align: right;
}

.gameChatMsgOther > .gameChatText {
  margin-left: auto;
}

/* icons */

i {
  display: inline-block;
}

.iconCopy {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16.9 0H3.8C2.6 0 1.6 1 1.6 2.2v15.3h2.2V2.2h13.1V0zm3.3 4.4h-12C7 4.4 6 5.3 6 6.5v15.3C6 23 7 24 8.2 24h12c1.2 0 2.2-1 2.2-2.2V6.5c0-1.2-1-2.1-2.2-2.1zm0 17.4h-12V6.5h12v15.3z"/></svg>');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 24px 24px;
}

.iconOK {
  width: 24px;
  height: 24px;
  margin-left: 10px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M24 12c0 6.6-5.4 12-12 12S0 18.6 0 12 5.4 0 12 0s12 5.4 12 12z" fill="%232ecc71"/><path d="M17.1 5.9l-7.2 7.2-3-3-2.6 2.5 3 3L9.7 18l.1.1 9.8-9.7-2.5-2.5z" fill="%23ecf0f1"/></svg>');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 24px 24px;
}

.iconShare {
  width: 24px;
  height: 24px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.7 14.7c-1.4 0-2.7.6-3.5 1.7l-5.3-3.2c.2-.8.2-1.5 0-2.3l5.3-3.2c1.7 1.9 4.6 2.2 6.5.5s2.2-4.6.5-6.5c-1.7-1.9-4.6-2.2-6.5-.5C14.6 2 14 3.3 14 4.7c0 .2 0 .4.1.5L8.5 8.6c-1.9-1.8-4.9-1.7-6.6.2-1.7 1.9-1.6 4.8.3 6.6C4 17 6.7 17 8.5 15.4l5.6 3.4c0 .2 0 .4-.1.5 0 2.6 2.1 4.7 4.7 4.7s4.7-2.1 4.7-4.7-2.1-4.6-4.7-4.6z"/></svg>');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 24px 24px;
}