.rank-people {display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:16px 0;}
.rank-person {display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);min-width:90px;max-width:140px;font-size:14px;}
.rank-person strong {overflow-wrap:anywhere;}
.rank-requests {display:grid;gap:12px;}
.rank-request {display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;padding:12px;background:var(--surface2,#f1f4fc);border-radius:var(--r-lg);}
.rank-bonus {color:#755000;background:#fff3c9;border:1px solid #e8bc4c;padding:var(--sp-3);border-radius:var(--r-md);font-weight:700;text-align:center;}
.bonus-pop {animation:rank-bonus-pop .7s ease-out;}
@keyframes rank-bonus-pop {0% {transform:scale(.9);box-shadow:0 0 0 0 #e8bc4c;} 40% {transform:scale(1.06);box-shadow:0 0 20px 4px #e8bc4c;} 100% {transform:scale(1);box-shadow:none;}}
@media(prefers-reduced-motion:reduce) {.bonus-pop {animation:none;}}
.rank-results {display:grid;gap:var(--sp-3);margin:16px 0;}
.rank-result {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px;background:#f1f4fc;color:#1b1f3b;border-radius:12px;}
.rank-live {display:flex;gap:8px;overflow-x:auto;padding:4px 0;}
.rank-live>span {flex:none;font-size:12px;white-space:nowrap;}
.nav-game-label span {display:block;line-height:1.1;}
.nav a[data-nav=battle] .nav-game-label {text-align:center;}
.home-mode-icon svg {width:30px;height:30px;}
.rank-title svg {width:26px;height:26px;vertical-align:middle;}
.rank-start-countdown {position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:rgba(17,24,46,.82);color:#fff;font-size:clamp(70px,18vw,160px);font-weight:800;pointer-events:auto;}
@media(orientation:landscape) and (max-height:500px) {.rank-people {gap:var(--sp-2);margin:8px 0;}.rank-person {min-width:80px;font-size:12px;}.rank-person svg.quto {width:40px;height:42px;}}

.quiz-screen .rank-live {max-width:140px;flex:1;min-width:0;}

@media(orientation:landscape) and (max-height:500px) {
  .rank-waiting {padding:12px;}
  #rankLobby {display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:var(--sp-1) var(--sp-3);align-items:center;}
  #rankLobby>.row,#rankLobby>.rank-bonus,#rankLobby>.rank-requests {grid-column:1/-1;}
  #rankLobby h2 {font-size:18px;margin:0;}
  #rankLobby .rank-people {grid-column:1;margin:4px 0;}
  #rankCountdown {grid-column:2;margin:0;font-size:14px;}
  #rankLobby .rank-bonus {margin:4px 0;padding:var(--sp-2);}
  #rankLobby .rank-requests:empty {display:none;}
  .rank-waiting>p {display:inline-flex;vertical-align:middle;margin:4px 8px!important;}
  .rank-waiting .rank-person .tier-badge {font-size:12px;}
}

/* 전원 진도 레일을 사용할 때2인 전용 진도와 겹치지 않게 한다. */
.quiz-screen .group-game .battle-progress {display:none!important;}
.quiz-screen .group-game .rank-live {max-width:none;min-width:0;flex:1;padding:0;align-items:center;}
.quiz-screen .group-game .rank-live>span {line-height:22px;height:22px;}

/* 봇은 모든 참가자 표시에서 공개하고, 결과 집계에서 구분한다. */
.bot-badge { display:inline-block; font-size:12px; color:var(--text); white-space:nowrap; }
.bot-result-note { text-align:center; color:var(--muted); }
.rank-live .bot-badge { font-size:var(--fs-caption,12px); }
/* 1:1 섹션 상태는 기존 공통 문항 무대 밖에 둔다. */
.duel-clock { flex: 1; min-width: 100px; }
.duel-clock .progress { height: 8px; }
#duelGrace { font-size: 14px; }
.duel-game #duelGrace { color:var(--bad); font-weight:700; }
#rankLive[data-verdict="correct"] { background: var(--ok); }
#rankLive[data-verdict="wrong"] { background: var(--bad); }
#duelSkip { min-height: 44px; }
.quiz-screen #app > .battle-status.duel-game { display:grid; grid-template-columns:90px minmax(0,1fr); gap:var(--sp-1) var(--sp-2); flex:none; min-width:0; padding:4px 8px; }
.quiz-screen #app > .battle-status.duel-game > .row { grid-column:1; gap:var(--sp-1); min-width:0; flex-wrap:wrap; }
.duel-game h2, .duel-game .contestant strong, .duel-game .contestant .tier-badge, .duel-game .contestant .row > :first-child { display:none; }
.duel-game .timer { font-size:16px; }
.duel-game .duel-clock { min-width:40px; }
.quiz-screen #app > .duel-game .battle-progress { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0; gap:8px; }
.duel-game .contestant { display:grid; grid-template-columns:auto 1fr; gap:0 4px; padding:0; border:0; }
.duel-game .contestant > .small { display:block!important; font-size:12px; }
.duel-game .contestant .row { margin:0; justify-content:flex-end; font-size:12px; }
.duel-game .contestant .progress { grid-column:1 / -1; height:4px; }
.quiz-screen #app > .duel-game .rank-live { grid-column:1 / -1; max-width:none; min-width:0; display:flex; justify-content:space-between; padding:0; gap:4px; }
.duel-game .rank-live > strong, .duel-game .rank-live > span { font-size:12px; line-height:20px; white-space:nowrap; }

/* 개인전 참가자별 정오와 섹션 점수. 문항 보기/정답 내용은 표시하지 않는다. */
.quiz-screen #app > .duel-game .rank-live {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-1) var(--sp-2);overflow:visible;}
.duel-game .rank-live > strong {grid-column:1 / -1;}
.duel-person {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 var(--sp-1);min-width:0;font-size:12px;border-radius:4px;padding:1px 3px;}
.duel-person > span {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.duel-person .progress {grid-column:1 / -1;height:4px;margin:0;}
.duel-person[data-verdict="correct"] {background:var(--ok);color:#fff;}
.duel-person[data-verdict="wrong"] {background:var(--bad);color:#fff;}
.quiz-screen #app > .duel-game.group-game .battle-progress {display:none!important;}
@media (min-width:700px) {.quiz-screen #app > .duel-game.group-game .rank-live {grid-template-columns:repeat(3,minmax(0,1fr));}}
/* 기존2인 진도 레일과 참가자별 점수 레일이 중복되어 글자가 겹치지 않게 한다. */
.quiz-screen #app > .duel-game .battle-progress {display:none!important;}
.quiz-screen #app > .battle-status.duel-game > .row {grid-column:1 / -1;flex-wrap:nowrap;}

/* 안내는 상태 레일 안에서 열고 문항·유예 시계를 덮지 않는다. */
.quiz-screen #app > .duel-game .duel-section,.quiz-screen #app > .duel-game .duel-notice {grid-column:1 / -1;min-width:0;}
.section-line {display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap;}
.section-line > span:last-child {margin-left:auto;}
.section-dots {display:flex;gap:4px;}
.section-dot {color:var(--muted);font-size:16px;line-height:20px;}
.section-dot.win {color:var(--ok);}.section-dot.loss {color:var(--bad);}.section-dot.draw {color:var(--accent);}.section-dot.current {color:var(--accent);font-weight:900;}
.section-situation {font-size:12px;line-height:18px;}
.duel-notice {display:grid;gap:var(--sp-1);text-align:left;background:var(--surface);color:var(--text);border:1px solid var(--accent);border-radius:8px;padding:var(--sp-2);min-height:44px;cursor:pointer;font:inherit;font-size:12px;}
.duel-notice[hidden] {display:none;}.duel-notice.승 {border-color:var(--ok);}.duel-notice.패 {border-color:var(--bad);}
.duel-notice:focus-visible {outline:2px solid var(--accent);outline-offset:2px;}
@media (orientation:landscape) and (max-height:500px) {.section-line,.section-situation {display:inline-flex;margin-right:8px;}.duel-notice {grid-template-columns:1fr auto;}.duel-notice small {grid-column:1 / -1;}}

/* #835: 낮은 화면의 현황판은 한 줄, 펼친 세부 정보와 섹션 배너는 오버레이. */
.quiz-screen #app > .battle-status.duel-game:has(.rank-summary-bar) { display:block; position:relative; z-index:20; }
.rank-summary-bar { display:none; align-items:center; gap:8px; min-height:44px; }
.rank-summary { flex:1; min-width:0; font-size:14px; white-space:nowrap; }
.rank-status-toggle { flex:none; min-width:64px; height:44px; font-size:12px; }
.rank-status-detail { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; }
.quiz-screen #app > .duel-game[data-compact=true] .rank-summary-bar { display:flex; }
.quiz-screen #app > .duel-game[data-compact=true] .rank-status-detail { display:none; }
.quiz-screen #app > .duel-game[data-compact=true][data-expanded=true] .rank-status-detail { display:grid; position:absolute; top:100%; left:0; right:0; padding:12px; max-height:50vh; overflow:auto; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.quiz-screen #app > .duel-game .duel-notice { position:absolute; top:4px; left:8px; right:8px; z-index:2; grid-template-columns:minmax(0,1fr) auto; align-items:center; height:44px; padding:4px 8px; }
.quiz-screen #app > .duel-game .duel-notice small { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }

.quiz-screen #app > .duel-game .duel-notice > strong { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

/* 새 후보 수락 조작을 모바일 화면의 하단 탭 위에서 읽고 누를 수 있게 한다. */
.rank-ready[hidden] {display:none;}
.rank-voting .rank-people {margin:8px 0;gap:8px;}
.rank-voting .rank-person {font-size:12px;gap:4px;}
.rank-voting .rank-person > :first-child {width:40px;height:40px;flex:none;}
.rank-join-vote {gap:8px;text-align:left;padding:10px;background:var(--surface2);border-radius:var(--r-md);}
.rank-join-vote h3,.rank-join-vote p {margin:0;font-size:14px;}
.rank-candidate .rank-person {flex-direction:row;max-width:none;min-width:0;}
.rank-candidate .rank-person strong {flex:1;min-width:0;}
.rank-candidate .tier-badge {flex:none;font-size:12px;}
.rank-join-vote .btn {flex:1;min-height:44px;}

/* 종료 직후와 최근 결과 재열람은 같은 참가자 카드로 표시한다. */
.result-heading { text-align:center; margin-bottom:20px; }
.result-heading .outcome { font-size:clamp(26px,5vw,34px); line-height:1.25; margin:0 0 8px; }
.result-heading p { margin:0; color:var(--muted); font-size:14px; }
.result-participants { grid-template-columns:minmax(0,1fr); gap:16px; margin:16px 0; }
.result-participant.rank-result { display:block; min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); container-type:inline-size; }
.result-participant.is-winner { border:2px solid var(--ok); background:color-mix(in srgb,var(--ok) 5%,var(--surface)); padding:15px; }
.result-person-heading { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.result-person-avatar { flex:0 0 64px; display:flex; justify-content:center; }
.result-person-identity { min-width:0; flex:1; }
.result-person-identity h2 { font-size:18px; line-height:1.4; margin:4px 0 0; overflow-wrap:anywhere; }
.result-person-title { margin:2px 0 0; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.result-person-tags { display:flex; flex-wrap:wrap; gap:8px; font-size:13px; font-weight:700; }
.result-place { color:var(--muted); }
.is-winner .result-place { color:var(--ok-ink,#08734b); }
.result-mine { color:var(--primary); }
.result-stats { display:grid; gap:10px; margin:0; }
.result-stat { display:grid; grid-template-columns:64px minmax(0,1fr); align-items:baseline; gap:8px; }
.result-stat dt { margin:0; font-size:14px; color:var(--muted); }
.result-stat dd { margin:0; text-align:right; font-size:16px; font-size:clamp(14px,4.8cqi,18px); font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.result-person-tier { margin-top:14px; border-top:1px solid var(--line); padding-top:12px; }
.result-person-tier .tier-badge { font-size:13px; }
.result-awards-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 14px; margin:20px 0 12px; }
.result-awards-summary .lp { font-size:22px; white-space:nowrap; }
.result-bonus { margin:0 0 12px; }
@media(min-width:700px) { .result-participants { grid-template-columns:repeat(2,minmax(0,1fr)); } }