/* 곱절 — 로비(현황판).
 *
 * 위에 이름표, 가운데 오늘 현황과 순위, 오른쪽 아래에 시작 버튼.
 * 넓은 화면에서는 왼쪽 기둥(현황·순위)이 화면 아래까지 내려가고,
 * 남는 세로는 순위표가 먹는다 — 예전엔 여기가 검게 비어 있었다. */

/* ── ① 로비 = 현황판 ─────────────────────────────
   위: 이름표 / 가운데: 오늘 현황·순위·설정(넘치면 스크롤) / 오른쪽 아래: 시작 */

.lobby{
  flex:1; min-height:0; width:100%;
  display:flex; flex-direction:column; gap:10px; position:relative;
  animation:lobbyIn .28s ease-out;
}

@keyframes lobbyIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.lbtop{display:flex; align-items:center; justify-content:space-between; flex:none}

.logo{font-size:27px; font-weight:800; letter-spacing:-.045em; line-height:1}

.lang{
  appearance:none; cursor:pointer; background:transparent;
  border:1px solid var(--line); color:var(--dim);
  font-family:inherit; font-size:11.5px; font-weight:800; padding:6px 10px; border-radius:9px;
}

/* 넘치는 만큼만 스크롤. 화면이 넉넉하면 순위표가 늘어나고
   고르는 것들(+시작)은 아래에 붙는다 — 아래 화면폭별 규칙 참고. */

.lbscroll{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:grid; grid-template-columns:1fr; gap:13px; align-content:start;
}

.lbmain,.lbaside{display:flex; flex-direction:column; gap:13px; min-width:0}

.today{font-size:13px; font-weight:700; color:var(--dim); font-variant-numeric:tabular-nums}

.today b{color:var(--goldtext)}

/* 현황 카드 — 내 최고 / 오늘 등수 / 연속 출석 */

.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}

.stat{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:10px 8px; text-align:center;
}

.stat .k{font-size:10px; font-weight:700; color:var(--dim); letter-spacing:.02em}

.stat .v{font-size:19px; font-weight:800; margin-top:3px; font-variant-numeric:tabular-nums;
         white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.stat .v.gold{color:var(--goldtext)}

/* 시작 — 오른쪽 아래에 떠 있다 */

/* 시작 — 고르는 것들의 마지막 자리.
   예전엔 화면 오른쪽 아래에 띄워뒀는데(position:absolute), 폰에서는 엄지에 닿아 좋았지만
   넓은 화면에서는 고르는 칸(오른쪽 위)과 400px 떨어져 둘이 남남처럼 보였다.
   지금은 고른 것 바로 아래에 붙어 "고르고 → 시작"이 한 덩어리로 읽힌다. */
.startbtn{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  appearance:none; cursor:pointer; border:0; border-radius:14px;
  background:var(--gold); color:var(--ongold);
  font-family:inherit; font-size:17px; font-weight:800; letter-spacing:-.02em;
  padding:16px 20px; box-shadow:var(--fabsh);
}
.startbtn svg{width:21px; height:21px}
.startbtn:active{transform:translateY(2px); box-shadow:var(--fabsh2)}

/* 스크롤 내용이 버튼 뒤로 사라지지 않게 아래를 어둡게 깔아준다 */


@media (min-width:768px){
  /* 로비: 왼쪽 현황·순위 / 오른쪽 고르기 */
  /* 내용이 짧아도 왼쪽 기둥은 화면 아래까지 내려간다 — 아래 절반이 검게 비던 자리다.
     남는 세로는 순위표가 먹는다(기록이 늘면 그대로 더 보인다). */
  .lbscroll{grid-template-columns:1fr 300px; gap:16px;
            grid-template-rows:minmax(0,1fr); align-content:stretch}
  .lbmain{min-height:0}
  .lbmain .panel{flex:1; min-height:0}
  .lbmain .ranks{flex:1; min-height:0; max-height:none}
  .logo{font-size:31px}
}

@media (min-width:1200px){
  .lbscroll{grid-template-columns:1fr 360px; gap:22px}
  .logo{font-size:36px}
  .stat .v{font-size:22px}
}

/* 폰 로비: 아래가 남으면 순위표가 늘어나고, 고르는 것들은 엄지 쪽에 붙는다 */

@media (max-width:767px) and (min-height:720px){
  .lbscroll{grid-template-rows:minmax(0,1fr) auto; align-content:stretch}
  .lbmain{min-height:0}
  .lbmain .panel{flex:1; min-height:150px}
  .lbmain .ranks{flex:1; min-height:0; max-height:none}
}

/* 규칙 요약 — 넓은 화면에서만. 칸 맨 아래에 붙여 남는 세로를 메운다.
   시작 버튼과 붙여두면 "버튼 아래 딸린 설명"처럼 보여서 일부러 떼어 아래로 내렸다. */
.howto{display:none}

@media (min-width:768px){
  .howto{
    display:block; margin-top:auto;
    background:var(--panel); border:1px solid var(--line); border-radius:13px;
    padding:13px 15px;
  }
  .htlab{font-size:11.5px; font-weight:800; color:var(--goldtext); margin-bottom:8px;
         letter-spacing:.02em}
  .howto p{font-size:12px; line-height:1.65; color:var(--dim); font-weight:600}
  .howto p + p{margin-top:6px}
}