@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

:root {
  --modal-overlay-backdrop-filter: blur(1px);
  --block-spacing-vertical: 10px;
  /* --spacing: 0px; */
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'Pretendard';
  /* touch-action: pan-x pan-y; */
  touch-action: none;
  position: fixed;
}

body>main {
  padding: 0;
}

h1,
h2,
h3 {
  margin: 0;
}

div.page {
  height: 100vh;
  width: 100vw;
}

button {
  margin: 0;
}

dialog>article {
  padding: 30px;
}

dialog>article>p {
  padding: 20px;
}

dialog>article>footer {
  padding: 0;
  border: 0;
  border-top: 1px;
}

div.scoreboard {
  display: flex;
  /* flex: 1; */
  flex-direction: column;
  height: 100vh;
}

.scoreboard>.main {
  flex: 1 auto;
}

.scoreboard>.footer {
  display: flex;
  flex-basis: 72px;
  flex-direction: row;
}

.scoreboard button {
  margin: 0;
}


.scoreboard>.footer>button {
  margin: 3px;
}

.scoreboard .score {
  font-size: 10vh;
  /* flex: 1; */
  background-color: white;
  border: 3px solid black;
  text-align: center;
  position: relative;
}

.score>.남은서브 {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 7vh;
  height: 30px;
  visibility: hidden;
  display: block;
}

.serve .남은서브 {
  visibility: visible;
}

.scoreboard .serve {
  background-color: rgb(10, 58, 162);
  color: white;
}

.main>.score {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  flex-direction: column;
}

.scoreboard .score.set-point {
  border: 12px rgb(32, 220, 0) solid;
  border-radius: 5px;
}

.score>.name {
  flex: 1;
}

.score>.점수영역 {
  flex: 3;
  display: flex;
  position: relative;
  color: white;
}

.점수영역>.점수 {
  display: inline-block;
  font-weight: 700;
  line-height: 36vh;
  width: 23vw;
  height: 36vh;
  margin: auto;
  color: white;
  background-color: rgb(32, 32, 32);
  border-radius: 10px;
}

.점수영역>.세트 {
  line-height: 18vh;
  width: 9vw;
  height: 18vh;
  background-color: rgb(32, 32, 32);
  border-radius: 7px;
}

.scoreboard .main .score .세트 {
  left: 10px;
  right: unset;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);

}

.score>.연승기록 {
  position: absolute;
  width: 100%;
  top: 15%;
  text-align: center;
}

@media (orientation: landscape) {
  .scoreboard>.main {
    display: flex;
    flex-direction: row;
  }

  .scoreboard .점수 {
    font-size: 32vh;
  }

  .game-form .select-players>button {
    width: 30vw;
  }

  .scoreboard .main .score:first-child .세트 {
    right: 10px;
    left: unset;
  }


}

@media (orientation: portrait) {
  .scoreboard>.main {
    display: flex;
    flex: 2;
    flex-direction: column;
  }

  .scoreboard .name {
    font-size: 7vh;
  }

  .scoreboard .점수 {
    font-size: 12vh;
  }

  .scoreboard .세트 {
    font-size: 7vh;
  }

  .game-form .select-players>button {
    width: 28vw;
  }

}

.making-game {
  display: flex;
  flex: 1;
  flex-direction: column;
  height: 100vh;
}

.making-game>header {
  height: 64px;
}

.making-game>.game-form {
  flex: 1;
}

.making-game button {
  height: 64px;
}

.game-form .select-game-type {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background-color: rgb(99, 243, 86);
  border-bottom: 1px solid grey;
  padding: 10px 5px;
}

.game-form .select-players {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 5px;
}


.game-form button {
  margin: 5px;
}

.game-form>article {
  margin: 0;
}

.prevent-select {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}


@supports(height: 100dvh) {

  div.page,
  div.scoreboard,
  div.making-game {
    height: 100dvh;
  }
}

dialog footer.modal-actions {
  display: flex;
  margin: 0;
}

dialog footer>button {
  margin: 3px;
}

.세트스코어 {
  display: grid;
  grid-template-columns: 30px 20px 20px 20px 20px 20px;
  font-size: 12px;
  background-color: rgb(241, 183, 57);
}

.세트스코어>.이름 {
  width: 30px;
  height: 16px;
  overflow: hidden;
}


.세트스코어>.점수 {
  font-size: 12px;
  text-align: center;
}

.세트스코어>.점수.승 {
  background-color: rgb(32, 220, 0)
}