/* ===== 나나컵마블 — 나나컵 디자인 시스템 ===== */

:root {
  --bg:          #0A0D14;
  --panel:       #0E121C;
  --panel-deep:  #080B12;
  --line:        #2A3142;
  --text:        #F5F7FA;
  --mute:        #8B95A8;
  --dim:         #5B6478;
  --accent:      #FF8C1A;
  --accent-deep: #E56F00;
  --accent-soft: #FFD23F;
  --red:         #FF3B5C;
  --green:       #22C55E;
  --blue:        #3B82F6;

  --font-display: 'Black Han Sans', 'Pretendard', sans-serif;
  --font-gaming:  'Chakra Petch', 'Black Han Sans', 'Pretendard', sans-serif;
  --font-impact:  'Russo One', 'Black Han Sans', sans-serif;
  --font-body:    'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;

  --shadow-panel: 0 0 0 1px rgba(0,0,0,0.55), 0 8px 48px rgba(0,0,0,0.75), 0 2px 8px rgba(0,0,0,0.9);
  /* 패널 스캔라인 텍스처 */
  --scanlines: repeating-linear-gradient(
    0deg,
    transparent 0px, transparent 3px,
    rgba(255,255,255,0.022) 3px, rgba(255,255,255,0.022) 4px
  );
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
}

/* ── 3D 뷰포트 ───────────────────────────────── */
#viewport {
  position: fixed;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  z-index: 1;
  background: #060810;
}
#viewport > canvas {
  position: absolute;
  top: 0; left: 0;
  width: 1920px !important;
  height: 1080px !important;
}

/* ── UI 루트 (1920×1080 고정) ────────────────── */
#ui-root {
  position: fixed;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  z-index: 100;
  pointer-events: none;
}

#branding, #gameInfo,
#startRace, #raceLeaderboard, #notifications {
  pointer-events: all;
}

/* ── 브랜딩 (좌상단) ─────────────────────────── */
#branding {
  position: absolute;
  top: 36px; left: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  text-decoration: none;
  color: var(--text);
  background: rgba(8, 11, 18, 0.82);
  padding: 16px 28px 16px 18px;
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  /* 좌→우 와이프 등장 */
  animation: wipeFromLeft 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 스캔라인 오버레이 */
#branding::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
}

#branding:hover { opacity: 0.85; }

#branding img {
  height: 52px;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 14px rgba(255, 140, 26, 0.8));
}

#branding span {
  font-family: var(--font-display);
  font-size: 2.4rem;
  letter-spacing: 0.06em;
  color: var(--text);
  position: relative; z-index: 1;
}


/* ── 게임 상태 패널 (우상단) ─────────────────── */
#gameInfo {
  position: absolute;
  top: 36px; right: 36px;
  background: var(--panel);
  border-top: 2px solid var(--accent);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%);
  padding: 20px 36px 22px 32px;
  text-align: right;
  min-width: 200px;
  box-shadow: var(--shadow-panel);
  overflow: hidden;
  /* clip-path 충돌 방지 — transform 기반 등장 */
  animation: panelEnterRight 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: border-top-color 0.4s ease, box-shadow 0.4s ease;
}

html.hanana-fans-header-mounted #branding,
html.hanana-fans-header-mounted #gameInfo {
  top: calc(36px + var(--hanana-fans-header-height, 44px));
}

html.hanana-fans-header-mounted #notifications {
  top: calc(20px + var(--hanana-fans-header-height, 44px));
}

/* 스캔라인 */
#gameInfo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scanlines);
  pointer-events: none;
}

/* 참가 중 — 초록 */
#gameInfo.enter {
  border-top-color: var(--green);
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(34, 197, 94, 0.12), 0 0 40px rgba(34, 197, 94, 0.06);
  animation: enterBorderPulse 2.2s ease-in-out infinite;
}

@keyframes enterBorderPulse {
  0%, 100% { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(34, 197, 94, 0.12), 0 0 30px rgba(34, 197, 94, 0.06); }
  50%       { box-shadow: var(--shadow-panel), 0 0 0 1px rgba(34, 197, 94, 0.25), 0 0 60px rgba(34, 197, 94, 0.12); }
}

/* 시작 카운트다운 — 황금 */
#gameInfo.starting {
  border-top-color: var(--accent-soft);
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(255, 210, 63, 0.2), 0 0 60px rgba(255, 210, 63, 0.1);
  transition: border-top-color 0.2s ease, box-shadow 0.2s ease;
}

/* 레이스 진행 중 — 상단 라인을 레드로 (LIVE) */
#gameInfo.started {
  border-top-color: var(--red);
  box-shadow: var(--shadow-panel), 0 0 0 1px rgba(255, 59, 92, 0.15), 0 0 40px rgba(255, 59, 92, 0.08);
}

/* 레이스 종료 — 흐리게 */
#gameInfo.finished {
  border-top-color: var(--dim);
  box-shadow: var(--shadow-panel);
}

#state {
  font-family: var(--font-gaming);
  font-size: 0.88rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--mute);
  margin-bottom: 10px;
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* 상태별 state 텍스트 색상 */
#gameInfo.enter   #state { color: var(--green); }
#gameInfo.starting #state { color: var(--accent-soft); }
#gameInfo.started  #state { color: var(--red); }
#gameInfo.finished #state { color: var(--dim); }

/* LIVE 펄스 도트 */
#gameInfo.started #state::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: liveDot 1.4s ease-in-out infinite;
  flex-shrink: 0;
  order: 999;
}

@keyframes liveDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--red); }
  50%       { opacity: 0.35; box-shadow: 0 0 2px var(--red); }
}

#timer {
  font-family: var(--font-impact);
  font-size: 3.6rem;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 32px rgba(255, 140, 26, 0.55), 0 2px 0 rgba(0,0,0,0.7);
  position: relative; z-index: 1;
}

/* 참가 중 타이머 — 초록 */
#gameInfo.enter #timer {
  color: var(--green);
  text-shadow: 0 0 32px rgba(34, 197, 94, 0.5), 0 2px 0 rgba(0,0,0,0.7);
}

/* 시작 카운트다운 타이머 — 황금 */
#gameInfo.starting #timer {
  color: var(--accent-soft);
  text-shadow: 0 0 40px rgba(255, 210, 63, 0.6), 0 2px 0 rgba(0,0,0,0.7);
}

/* 레이스 중 타이머 글로우 리듬 */
#gameInfo.started #timer {
  animation: timerLive 2.4s ease-in-out infinite;
}

@keyframes timerLive {
  0%, 100% { text-shadow: 0 0 32px rgba(255,140,26,0.55), 0 2px 0 rgba(0,0,0,0.7); }
  50%       { text-shadow: 0 0 64px rgba(255,140,26,0.9), 0 0 120px rgba(255,140,26,0.3), 0 2px 0 rgba(0,0,0,0.7); }
}

.themeNumber { font-variant-numeric: tabular-nums; }

/* ── 레이스 시작 버튼 (하단 중앙) ───────────── */
button {
  font-family: var(--font-gaming);
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

#startRace {
  position: absolute;
  bottom: 56px; left: 50%;
  transform: translateX(-50%) translateY(0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 20px 72px;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  background: var(--accent);
  color: var(--panel-deep);
  clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
  box-shadow: 0 0 40px rgba(255, 140, 26, 0.55);
  animation: fadeInUpCenter 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease, background 0.2s ease;
}
#startRace:hover {
  background: var(--accent-soft);
  box-shadow: 0 0 70px rgba(255, 210, 63, 0.75);
  transform: translateX(-50%) translateY(-3px);
}
#startRace:active {
  transform: translateX(-50%) translateY(0);
}

/* 레이스 진행 중 숨김 */
#ui-root:has(#gameInfo.preparing) #startRace,
#ui-root:has(#gameInfo.starting)  #startRace,
#ui-root:has(#gameInfo.started)   #startRace,
#ui-root:has(#gameInfo.finished)  #startRace {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(16px);
}

/* ── 마블 목록 (숨김 — DOM 처리 전용) ────────── */
#marbleListPanel, #marbleListTemplate { display: none; }

/* ── 레이스 결과 리더보드 (중앙 팝업) ─────────── */
#raceLeaderboard {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% - 80px)) scale(0.96);
  background: var(--panel);
  border-top: 3px solid var(--accent);
  overflow: hidden;
  box-shadow: var(--shadow-panel), 0 0 100px rgba(255, 140, 26, 0.12);
  min-width: 620px; max-width: 760px;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition:
    max-height 1s cubic-bezier(0.22, 1, 0.36, 1),
    opacity    0.5s ease 0.15s,
    transform  0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

#raceLeaderboard.visible {
  max-height: 75vh;
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

/* 상단 글로우 라인 */
#raceLeaderboard::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 25%, var(--accent-soft) 50%, var(--accent) 75%, transparent 100%);
  box-shadow: 0 0 20px var(--accent), 0 0 60px rgba(255, 140, 26, 0.35);
  z-index: 2;
}

.lb-header {
  padding: 22px 28px;
  background: linear-gradient(135deg, rgba(255, 140, 26, 0.12) 0%, transparent 55%);
  border-bottom: 1px solid var(--line);
}

.lb-header .levelName {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.05em;
  color: var(--text);
}

.lb-author {
  font-family: var(--font-gaming);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--mute);
  margin-left: 14px;
}

#results {
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#resultsList {
  overflow-y: auto;
  max-height: calc(75vh - 110px);
}
#resultsList::-webkit-scrollbar { width: 4px; }
#resultsList::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }

.results-header,
.resultsEntry {
  display: flex;
  align-items: center;
  padding: 10px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.results-header {
  background: rgba(255, 140, 26, 0.06);
  font-family: var(--font-gaming);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--dim);
}

#resultsListTemplate { display: none; }

.resultsEntry { font-size: 0.95rem; }
.resultsEntry:nth-child(odd) { background: rgba(255,255,255,0.015); }

/* 1등 금색 강조 */
.resultsEntry:first-child {
  background: rgba(255, 210, 63, 0.06) !important;
  border-left: 3px solid rgba(255, 210, 63, 0.55);
}
.resultsEntry:first-child .rank { color: var(--accent-soft); }

/* 리더보드 등장 시 row-by-row 와이프 (JS가 animation-delay 주입) */
#raceLeaderboard.visible .resultsEntry {
  animation: rowReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes rowReveal {
  from { opacity: 0; transform: translateX(-14px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: translateX(0);     clip-path: inset(0 0% 0 0); }
}

#results .rank        { width: 36px; text-align: right; padding-right: 12px; }
#results .name        { flex: 1; padding-left: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#results .record      { width: 20px; }
#results .time        { width: 74px; text-align: right; padding-right: 10px; }
#results .timediff    { width: 74px; text-align: right; padding-right: 10px; color: var(--mute); }
#results .points      { width: 48px; text-align: right; padding-right: 10px; }
#results .pointstotal { width: 60px; text-align: right; }

.resultsEntry .rank { font-family: var(--font-impact); font-size: 1.1rem; color: var(--accent); }
.resultsEntry .name { font-family: var(--font-body); }
.resultsEntry .time.dnf { color: var(--dim); }
.resultsEntry .none { display: none; }

/* ── 카운트다운 연출 ──────────────────────────── */
#countdown {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 160;
  opacity: 0;
  background: transparent;
  transition: opacity 0.25s ease;
}
#countdown.active { opacity: 1; }

/* GO! 화면 플래시 */
#countdown.flash {
  animation: screenFlash 0.55s ease-out forwards;
}
@keyframes screenFlash {
  0%   { background: rgba(255, 140, 26, 0.2); }
  100% { background: transparent; }
}

/* 비네트 */
#countdown::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 75% at 50% 50%, transparent 28%, rgba(0,0,0,0.65) 100%);
  pointer-events: none;
}

#countdown-number {
  position: relative;
  font-family: var(--font-impact);
  font-size: 320px;
  line-height: 1;
  color: #fff;
  text-shadow:
    0 0 60px rgba(255,255,255,0.4),
    0 0 120px rgba(255,140,26,0.2);
  opacity: 0;
  letter-spacing: -0.02em;
}

/* GO! — 오렌지 */
#countdown-number.go {
  font-size: 220px;
  color: var(--accent);
}

#countdown-number.pop {
  animation: cdPop 0.706s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 숫자 팝 — 블러에서 스케일 인 */
@keyframes cdPop {
  0%   { opacity: 0; transform: scale(1.9);  filter: blur(20px); }
  12%  { opacity: 1; transform: scale(1.04); filter: blur(0); }
  55%  { opacity: 1; transform: scale(1.0);  filter: blur(0); }
  100% { opacity: 0; transform: scale(0.82); filter: blur(8px); }
}

/* GO! 팝 — 임팩트 펀치 + 크로매틱 어버레이션 */
#countdown-number.go.pop {
  animation: cdGo 0.706s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cdGo {
  0%  {
    opacity: 0; transform: scale(0.45); filter: blur(28px);
    text-shadow: 0 0 30px var(--accent);
  }
  14% {
    opacity: 1; transform: scale(1.22); filter: blur(0);
    text-shadow:
      -8px  0 rgba(255, 20, 80,  0.9),
       8px  0 rgba(0,  210, 255, 0.9),
       0    0 90px  rgba(255, 140, 26, 1),
       0    0 180px rgba(255, 140, 26, 0.5);
  }
  35% {
    transform: scale(1.0);
    text-shadow:
      -4px  0 rgba(255, 20, 80,  0.5),
       4px  0 rgba(0,  210, 255, 0.5),
       0    0 60px  rgba(255, 140, 26, 0.9),
       0    0 120px rgba(255, 140, 26, 0.4);
  }
  72% { opacity: 1; transform: scale(1.0); text-shadow: 0 0 50px rgba(255,140,26,0.6); }
  100% {
    opacity: 0; transform: scale(1.1); filter: blur(10px);
    text-shadow: 0 0 20px rgba(255, 140, 26, 0.2);
  }
}

/* ── 알림 ─────────────────────────────────────── */
#notifications {
  position: absolute;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 200;
}

#notification-template { display: none; }

@keyframes notification-appear {
  from { max-height: 0; opacity: 0; transform: translateY(-10px) scaleX(0.94); }
  to   { max-height: 6em; opacity: 1; transform: translateY(0) scaleX(1); }
}

.notification {
  pointer-events: all;
  display: flex;
  align-items: center;
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  box-shadow: var(--shadow-panel);
  min-width: 320px; max-width: 520px;
  animation: notification-appear 0.38s cubic-bezier(0.22, 1, 0.36, 1);
  transition: opacity 1s, margin-top 1s;
}

.notification-status {
  width: 48px;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1em;
  flex-shrink: 0;
  padding: 12px 0;
  background: rgba(255,255,255,0.03);
}

.notification.exclamation .notification-status.exclamation,
.notification.wait        .notification-status.wait,
.notification.check       .notification-status.check,
.notification.cross       .notification-status.cross { display: flex; }

.notification-content { flex: 1; padding: 12px 18px; }

.notification-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  border-left: 1px solid var(--line);
}

.notification-progress-step {
  width: 8px; height: 8px;
  border-radius: 2px;
  background: rgba(255,255,255,0.1);
}
.notification-progress-step.completed { background: var(--green); }
.notification-progress-step.failed    { background: var(--red); }

@keyframes step-pulse {
  0%   { background: var(--accent); opacity: 1; }
  100% { background: rgba(255,140,26,0.18); opacity: 0.5; }
}
.notification-progress-step.loading {
  animation: step-pulse 1s ease-in-out alternate infinite;
  height: 16px;
}

.notification.blue  { border-top-color: var(--blue); }
.notification.green { border-top-color: var(--green); }
.notification.red   { border-top-color: var(--red); }
.notification.blue  .notification-status { color: var(--blue); }
.notification.green .notification-status { color: var(--green); }
.notification.red   .notification-status { color: var(--red); }

.notification.chaos {
  border-top-color: #FF3B30;
  background: linear-gradient(135deg, rgba(80,12,12,0.92), rgba(40,6,6,0.92));
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 12px rgba(255, 60, 0, 0.6);
  box-shadow: 0 4px 24px rgba(255, 50, 0, 0.45), var(--shadow-panel);
  animation: notification-appear 0.38s cubic-bezier(0.22, 1, 0.36, 1), chaosThrob 0.6s ease-in-out 0.4s 2;
}
.notification.chaos .notification-status { color: #FFD24A; font-size: 1.4em; }

@keyframes chaosThrob {
  0%, 100% { box-shadow: 0 4px 24px rgba(255, 50, 0, 0.45), var(--shadow-panel); }
  50%      { box-shadow: 0 6px 36px rgba(255, 200, 60, 0.85), var(--shadow-panel); }
}

#chaos-flash {
  position: absolute;
  top: 0; left: 0;
  width: 1920px; height: 1080px;
  pointer-events: none;
  z-index: 500;
  opacity: 0;
}
#chaos-flash.active {
  animation: chaosFlash 0.85s ease-out;
}
@keyframes chaosFlash {
  0%   { opacity: 1; background: radial-gradient(ellipse at center, rgba(255,80,30,0.35) 0%, rgba(255,180,40,0.12) 40%, transparent 75%); }
  35%  { opacity: 0.8; background: radial-gradient(ellipse at center, rgba(255,200,40,0.22) 0%, transparent 70%); }
  100% { opacity: 0; background: transparent; }
}

/* ── 공유 애니메이션 ──────────────────────────── */

/* 좌→우 클립 와이프 (브랜딩, 카메라 컨트롤) */
@keyframes wipeFromLeft {
  from { clip-path: inset(0 100% 0 0); opacity: 0.6; }
  to   { clip-path: inset(0 0%   0 0); opacity: 1; }
}

/* 우→좌 트랜슬레이트 (게임 인포 — clip-path 충돌 방지) */
@keyframes panelEnterRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 중앙 정렬 요소용 하단 페이드인 */
@keyframes fadeInUpCenter {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 하단 실시간 순위 바 ──────────────────────── */
#rankBar {
  position: absolute;
  bottom: 0; left: 0;
  width: 1920px;
  height: 88px;
  display: flex;
  gap: 2px;
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-top: 2px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#ui-root:has(#gameInfo.enter)     #rankBar,
#ui-root:has(#gameInfo.preparing) #rankBar,
#ui-root:has(#gameInfo.starting)  #rankBar,
#ui-root:has(#gameInfo.started)   #rankBar,
#ui-root:has(#gameInfo.finished)  #rankBar {
  opacity: 1;
  transform: translateY(0);
}

/* 순위 바가 보일 때 시작 버튼 위로 올리기 */
#ui-root:has(#gameInfo.enter) #startRace {
  bottom: 152px;
}

.rb-entry {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  border-left: 4px solid var(--team-color, var(--accent));
  position: relative;
  overflow: hidden;
  pointer-events: all;
  transition: background 0.4s ease;
}

.rb-entry::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--team-color, var(--accent)) 22%, transparent) 0%, transparent 55%);
  pointer-events: none;
}

.rb-rank {
  font-family: var(--font-impact);
  font-size: 2.8rem;
  line-height: 1;
  color: rgba(255,255,255,0.35);
  width: 52px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.3s ease;
  position: relative; z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
}
.rb-entry.finished .rb-rank { color: var(--accent-soft); text-shadow: 0 0 20px rgba(255,210,63,0.5), 0 2px 8px rgba(0,0,0,0.8); }

.rb-avatar {
  width: 58px; height: 58px;
  border-radius: 50%;
  border: 3px solid var(--team-color, var(--accent));
  background-size: cover;
  background-position: center top;
  flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow: 0 0 16px color-mix(in srgb, var(--team-color, var(--accent)) 60%, transparent), 0 2px 8px rgba(0,0,0,0.6);
}

.rb-camera {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  flex-shrink: 0;
  position: relative; z-index: 1;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.rb-camera:hover { border-color: var(--accent); color: var(--accent); background: rgba(255,140,26,0.12); }
.rb-camera.selected { border-color: var(--accent); color: var(--accent); background: rgba(255,140,26,0.2); }

.rb-name {
  font-family: var(--font-display);
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative; z-index: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,0.5);
}

.rb-status {
  font-family: var(--font-gaming);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  white-space: nowrap;
  position: relative; z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  transition: color 0.3s ease;
}
.rb-entry.finished .rb-status { color: var(--green); }

.rb-time {
  font-family: var(--font-impact);
  font-size: 2.2rem;
  color: #fff;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  position: relative; z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  transition: width 0.35s ease;
}
.rb-entry.finished .rb-time { width: 130px; }

.rb-timediff {
  font-family: var(--font-gaming);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: right;
  position: relative; z-index: 1;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  transition: width 0.35s ease 0.12s;
}
.rb-entry.finished .rb-timediff { width: 80px; }

.rb-entry.dnf { opacity: 0.45; filter: grayscale(0.6); }
.rb-entry.dnf .rb-rank { color: #FF5050; text-shadow: 0 0 12px rgba(255,80,80,0.6); }
.rb-entry.dnf .rb-status { color: #FF5050; }
.rb-entry.dnf .rb-time { width: 90px; color: #FF8080; }

/* ── 진로 막대 ─────────────────────────────── */
#raceProgress {
  display: none;
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  width: 1600px; height: 48px;
  pointer-events: none;
  z-index: 50;
}
#raceProgress.active {
  display: block;
  animation: raceProgressFadeIn 0.4s ease both;
}
@keyframes raceProgressFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
#raceProgress .rp-track {
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 4px;
  margin-top: -2px;
  background: linear-gradient(90deg,
    rgba(255,200,80,0.85) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(120,255,170,0.85) 100%);
  border-radius: 2px;
  box-shadow: 0 0 14px rgba(255,255,255,0.35);
}
#raceProgress .rp-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-impact);
  font-size: 1rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 2px 8px rgba(0,0,0,0.85);
}
#raceProgress .rp-start { left: -50px; color: #FFC850; }
#raceProgress .rp-end   { right: -50px; color: #78FFAA; }
#raceProgress .rp-markers {
  position: absolute;
  top: 0; left: 0; right: 0; height: 100%;
}
#raceProgress .rp-marker {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  transition: left 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
#raceProgress .rp-dot {
  width: 100%; height: 100%;
  border-radius: 50%;
  border: 3px solid var(--team-color, #FFF);
  background-color: rgba(0,0,0,0.4);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 12px rgba(0,0,0,0.5), 0 0 18px var(--team-color, transparent);
}
#raceProgress .rp-marker.finished .rp-dot {
  border-color: var(--green);
  box-shadow: 0 0 14px var(--green), 0 0 28px rgba(120,255,170,0.5);
}
#raceProgress .rp-marker.dnf {
  opacity: 0.4;
  filter: grayscale(0.8);
}