/* 상단 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:700px;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% 폭 + 위/아래 여백 */
.score-line{
  width:100%; max-width:700px;
  margin-top:8px; margin-bottom:8px;
  text-align:left; user-select:none;
}
.score-line .label{display:inline-block;margin-right:6px;width:auto;text-align:left}
.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;
}



.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;
        }
      }
    }
  }
}

.rank-wrap {
  .help-button-wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
  }
}