* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #38425c;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}


/* Üst bant */

.head-bar {
  float: left;
  width: 100%;
  height: 6%;
  text-shadow: #000 2px 2px 0;
}

.head-bar .left,
.head-bar .right {
  float: left;
  display: flex;
  align-items: center;
  width: 70%;
  height: 100%;
  padding: .4vw .8vw 0 .8vw;
  font-size: 2vw;
}

.head-bar .right {
  width: 30%;
  justify-content: flex-end;
  font-size: 2.8vw;
}


/* Izgara */

.boards {
  float: left;
  width: 100%;
  height: 94%;
  padding: .3vw;
}

.board-cnt {
  float: left;
  width: 33.333333%;
  height: 33.333333%;
  padding: .3vw;
}

.matrix-4 .board-cnt {
  width: 50%;
  height: 50%;
}

.matrix-1 .board-cnt {
  width: 100%;
  height: 100%;
}

.board {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

.board.ad {
  background: #000 no-repeat center / contain;
}


/* Mola ve maç sonu */

.board .break,
.board .finish {
  position: absolute;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 85%;
  background: url('images/black-overlay.png');
  font-size: 1.8vw;
}

.board .break {
  height: 42%;
  font-size: 2.5vw;
}

.board .finish div {
  width: 100%;
  line-height: 1.4;
  font-weight: normal;
  text-align: center;
}

.board .finish div b.yellow {
  color: #ffde00;
}

.board .finish div label {
  padding: .8vw;
  background: white;
  color: #000;
  font-size: 3vw;
  font-weight: bold;
  line-height: 2.2;
}

.board .finish div label.innings {
  background: none;
  color: white;
  font-size: 2.6vw;
}

.board .finish div label.yellow {
  background: #ffde00;
}


/* İsimler */

.board .names {
  float: left;
  width: 100%;
  height: 15%;
  background: #132749;
}

.board .names .name {
  float: left;
  display: flex;
  align-items: center;
  width: 49.7%;
  height: 100%;
  margin: 0 .3% 0 0;
  padding: .2vw .8vw 0 .8vw;
  overflow: hidden;
  white-space: nowrap;
  background: white;
  color: #000;
  font-size: 1.4vw;
}

.board .names .name.right {
  justify-content: flex-end;
  margin: 0 0 0 .3%;
  background: #ffde00;
}


/* Skorlar */

.board .content {
  float: left;
  width: 100%;
  height: 85%;
  padding: .5vw;
}

.board .player {
  float: left;
  width: 40%;
  height: 85%;
}

.board .player.right {
  color: #ffde00;
}

.board .player .score {
  position: relative;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 64%;
  margin-bottom: 2%;
  background: #0f254f;
  font-size: 5.5vw;
  text-shadow: #000 2px 2px 0;
}

.board .player .score .ball {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 1.6vw;
}

.board .player.right .score .ball {
  right: auto;
  left: 5%;
}

.board .player .score .timeouts {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 5.5%;
}

.board .player.right .score .timeouts {
  left: auto;
  right: 5%;
}

.board .player .score .timeouts span {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-bottom: 50%;
  border-radius: 50%;
  background: #4eb81a;
}

.board .player .score .timeouts span.fill {
  background: #fff;
  opacity: .3;
}

.board .player .line1,
.board .player .line2 {
  position: relative;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 15%;
  margin-bottom: 2%;
  padding: .8vw;
  background: #0f254f;
  font-size: 1.5vw;
}

.board .player .line2 {
  padding: 0;
  background: none;
}

.board .player .line2 div {
  position: relative;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 49%;
  height: 100%;
  margin: 0 1% 0 0;
  background: #0f254f;
}

.board .player .line2 div.right {
  margin: 0 0 0 1%;
}

.board .player .line1 small,
.board .player .line2 small {
  position: absolute;
  top: 15%;
  left: 3%;
  font-size: .7vw;
  font-weight: normal;
}

.board .player .line2 small {
  left: 6%;
}

.board .middle {
  float: left;
  width: 20%;
  height: 85%;
}

.board .middle .innings,
.board .middle .run {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56%;
}

.board .middle .run {
  height: 44%;
}

.board .middle .run.yellow {
  color: #ffde00;
}

.board .middle .run div,
.board .middle .innings div {
  text-align: center;
}

.board .middle .run small,
.board .middle .innings small {
  font-size: .8vw;
  line-height: 1;
}

.board .middle .run b {
  font-size: 2.8vw;
  line-height: 1;
}

.board .middle .innings b {
  border-bottom: 1px solid #fff;
  font-size: 3.6vw;
  font-weight: normal;
  line-height: 1;
}


/* Masa no ve limitler */

.board .header {
  position: relative;
  float: left;
  width: 100%;
  height: 15%;
  background: #0f254f;
  font-size: 1.5vw;
}

.board .header .left {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: .1vw .8vw 0 .8vw;
  background: #cc2727;
  letter-spacing: .15vw;
  text-shadow: #000 1px 1px 0;
}

.board .header .right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  padding: .1vw .8vw 0 .8vw;
  font-size: 1.3vw;
  font-weight: normal;
}


/* Tek masa düzeni */

.matrix-1 .board .names .name {
  font-size: 4.3vw;
}

.matrix-1 .board .player .score {
  font-size: 19vw;
}

.matrix-1 .board .player .score .ball {
  width: 2.6vw;
}

.matrix-1 .board .player .line1,
.matrix-1 .board .player .line2 {
  font-size: 4vw;
}

.matrix-1 .board .player .line1 small,
.matrix-1 .board .player .line2 small {
  font-size: 1.5vw;
}

.matrix-1 .board .middle .run small,
.matrix-1 .board .middle .innings small {
  font-size: 2.2vw;
}

.matrix-1 .board .middle .run b {
  font-size: 8vw;
}

.matrix-1 .board .middle .innings b {
  font-size: 10vw;
}

.matrix-1 .board .header {
  font-size: 4.5vw;
}

.matrix-1 .board .header .right {
  font-size: 4vw;
}

.matrix-1 .board .break,
.matrix-1 .board .finish {
  font-size: 3.5vw;
}