#app {
  width: 100vw;
  height: 100vh;
  /* display: flex;
  justify-content: center;
  align-items: center; */

  #timer, #touch {
    width: 100% !important;
    left: 0 !important;
    position: relative;
  }
  #container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2 !important;

    /* > div {
      max-width: 100%;
      max-height: 100%;
      width: 500px;
      height: 500px;
    } */
  }
}

#rtimer {
  position: absolute;
  right: 0;
  top: 50%;
  bottom: 50%;
}

#custom-timer {
  font-size: 2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  .custom-activetimer {
    font-size: 2rem;
    display: flex;
    align-items: flex-end;

    .mil {
      font-size: 0.75em;
    }
  }
  .turns-wrap {
    font-size: 1.5rem;
  }
}

#multiphase {
  display: none !important;
}

/* 상단 HUD: 100% 폭 */
.hud-top{display:flex;flex-direction:column;gap:10px;user-select:none;width:100%;max-width:700px}
.hud-row{display:flex;align-items:center;gap:10px;width:100%}
.label{font-size:15px;opacity:.9;min-width:70px;text-align:right}
.bar{position:relative;flex:1;height:16px;background:#333;border:1px solid #666;border-radius:6px;overflow:hidden}
.bar > .fill{position:absolute;left:0;top:0;bottom:0;width:0}
.bar.time  > .fill{background:#4ad;}
.bar.boost > .fill{background:#9f6;}
.bar .txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:12px;pointer-events:none}

/* 게임 캔버스(800x800), 컨테이너는 100% */
.game-wrap{width:100%;max-width:500px;display:flex;flex-direction:column;align-items:center}
#game canvas{
  border:3px solid #999;border-radius:6px; box-sizing:border-box; outline:none; display:block;
  margin:0 auto; transform-origin:top center;
}

/* 점수: 100% 폭 + 위/아래 여백 */
.custom-score-line{
  width:100%; max-width:700px;
  margin-top:8px; margin-bottom:8px;
  text-align:left; user-select:none;
}
.custom-score-line .label{display:inline-block;margin-right:6px;width:auto;text-align:left}
.custom-score-line .val{font-weight:700}

/* 메뉴/로딩 텍스트 */
.msg{font-size:16px;color:#ddd}
.btn{cursor:pointer}

.wrap{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px}

* {
  user-select: none;
  -webkit-user-select: none;
}

.help-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;

  .help {
    width: 100%;
    text-align: center;

    .title {
      font-size: 1.5rem;
      font-weight: bold;
    }

    img {
      width: 100%;
      max-width: 600px;
    }

    .button-wrap {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }
  }
}

.rank-wrap {
  position: relative;
  max-width: 600px;
  margin: 0 auto;

  .title-wrap {
    position: sticky;
    top: 0;
    background: #000;
    width: 100%;
    display: flex;
    padding: 0.25rem 0;
    align-items: center;
    justify-content: space-between;

    h2 {
      font-size: 1.5rem;
      font-weight: bold;
    }

    .button-wrap {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.25rem;

      a, span {
        padding: 0.5rem;
        color: #999;

        .xi {
          color: #999;
          padding: 0.5rem;
        }

        &:hover {
          color: #ccc;
          background: none;

          .xi {
            color: #ccc;
          }
        }
      }
    }
  }

  .rank-list-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;

    .rank-list {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #333;
      padding: 0.5rem;
      cursor: pointer;

      &:hover {
        background: #222;
      }

      &:last-child {
        border-bottom: none;
      }

      .rank {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        font-weight: bold;
        color: #ccc;
        width: 100px;
      }

      .nick {
        color: #ccc;
        font-size: 1.25rem;
        flex: 1;
      }

      .right-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        width: 150px;

        .score {
          font-size: 1.5rem;
          color: #ccc;
        }
        .created_at {
          text-align: right;
          color: #999;
        }
      }
    }
  }
}

#astouch {
  display: none !important;
}

#scramble-wrap {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}