@font-face{
  font-family:'Boblox';
  src:url('../fonts/Boblox.woff2') format('woff2'),
      url('../fonts/Boblox.ttf') format('truetype');
}
IL{
  display:inline;
}
IB{
  display:inline-block;
}
BL{
  display:block;
}
INPUT,PROGRESS,LABEL{
  font-family:Boblox;
  font-size:28px;
  line-height:1.9;
  margin:12px 0 12px;
  border:none;
  border-radius:8px;
  padding:32px;
  min-width:256px;
  max-width:576px;
  width:100%;
  box-shadow:0 2px 4px #aba0a0; /*0 0 6px #b1a6a6*/
  box-sizing:border-box;
}
INPUT[type=text]{
  background:#FFF;
  color:#a8b4bd;
}
INPUT[type=text]::placeholder{
  overflow:visible;
  color:#CCC;
}
INPUT[type=button],INPUT[type=submit]{
  font-size:32px;
  cursor:pointer;
  background:#a97171;
  color:#723737;
  /*box-shadow:0 2px 2px #747474;*/
  border-bottom:3px solid #935858;
}
INPUT[type=button]:hover,INPUT[type=submit]:hover{
  background:#B97E7E;
}
INPUT[type=button]:disabled,INPUT[type=submit]:disabled{
  background:#d3bbbb;
  color:#b39191;
  box-shadow:none;
}
PROGRESS{
  background:#FFF;
  box-shadow:none;
  margin:0;
  padding:12px 0 32px;
  height:98px;
}
PROGRESS::-webkit-progress-bar{
  border-radius:4px;
  background-color:#fcf2f2; /*#e5d6d6*/
}
PROGRESS::-moz-progress-bar{
  border-radius:4px;
  background-color:#fcf2f2;
}
PROGRESS::-moz-progress-value{
  border-radius:4px;
  background-color:#9b4848;
}
PROGRESS::-webkit-progress-value{
  border-radius:4px;
  background-color:#9b4848;
}
LABEL{
  display:inline-block;
  box-shadow:none;
  height:auto;
}
BODY{
  font-family:Boblox;
  margin:0;
  background:#e3d0d0;
}
@supports (font: -apple-system-body) {
  BODY{
    line-height:1;
  }
}
HEADER{
  position:relative;
  /*box-shadow:0 0 6px #5a5a5a;*/
  text-align:center;
  padding:48px;
  background-image:url('../images/background.webp'); /*background:#542727;*/
}
IMG.logo{
  width:80px;
  vertical-align:middle;
}
II.title{
  font-size:80px;
  color:#ffffff;
  vertical-align:middle;
  text-shadow:2px 2px 8px #2c0303;
}
II.description{
  font-size:26px;
  color:#b17070;
  text-shadow:1px 1px 8px #260b0b;
}
IB.attention{
  background:#617c97;
  color:#FFF;
  padding:8px;
  border-radius:8px;
}
MAIN{
  background:#e3d0d0;
  padding:48px;
  text-align:center;
  font-size:32px;
}
LABEL.error{
  color:#b34d4d;
  border:4px solid #b34d4d;
}
IB.status{
  background:#FFF;
  min-width:256px;
  max-width:576px;
  width:100%;
  border-radius:8px;
  box-shadow:0 2px 4px #aba0a0;
  margin:12px 0 12px;
  padding:0 32px;
  box-sizing:border-box;
  line-height:1;
}
IB.step{
  margin-top:32px;
  font-size:28px;
  color:#ae6e6e;
  padding:0 24px;
}
IB.stride{
  font-size:32px;
  color:#7d8c9b;
  border-bottom:3px dotted #bcc6d0;
  padding-bottom:3px;
  margin-bottom:12px;
}
IB.query{
  text-align:left;
  background:#FFF;
  min-width:256px;
  max-width:576px;
  width:100%;
  border-radius:8px;
  box-shadow:0 2px 4px #aba0a0;
  margin:12px 0 12px;
  padding:0;
  box-sizing:border-box;
}
IMG.player,IMG.game{
  vertical-align:middle;
  border-radius:6px;
  width:48px;
  height:48px;
  box-shadow:0px 1px 4px #cbcbcb;
}
IMG.player{
  border-bottom:2px solid #ae6e6e;
}
IMG.game{
  border-bottom:2px solid #7d8c9b;
}
LABEL.player{
  color:#ae6e6e;
  font-size:24px;
  margin:0;
  padding-bottom:8px;
  display:flex;
  gap:16px;
}
LABEL.game{
  color:#7d8c9b;
  border:none;
  font-size:24px;
  vertical-align:middle;
  margin:0;
  padding-top:8px;
  display:flex;
  gap:16px;
}
INPUT[type=button].join{
  background:#8DA1B5;
  color:#445b73;
  min-width:128px;
  width:calc(50% - 12px);
  margin-right:12px;
  box-shadow:0 2px 4px #aba0a0;
  border-bottom:3px solid #61859b;
}
INPUT[type=button].join:hover{
  background:#B5C3D0;
}
INPUT[type=button].join:disabled{
  box-shadow:none;
  border-bottom:none;
  background:#d3bbbb;
  color:#b39191;
  cursor:not-allowed;
}
INPUT[type=button].back{
  min-width:128px;
  width:calc(50% - 12px);
  margin-left:12px;
  box-shadow:0 2px 4px #aba0a0;
}
INPUT[type=button].back:disabled{
  box-shadow:none;
  border-bottom:none;
  cursor:not-allowed;
}
IMG.discord{
  width:64px;
  position:fixed;
  bottom:48px;
  left:48px;
  border-radius:8px;
  transition:1s;
}
IMG.discord:hover{
  transition:1s;
  transform:rotate(360deg);
}