/* 동물 레이스 */
.rc-setup { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 860px) { .rc-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rc-lineup-head { margin-bottom: 10px; }
.rc-lineup { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.rc-pick {
  --c: var(--primary);
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px 6px 8px;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: 12px;
}
.rc-pick-e { font-size: 26px; line-height: 1; flex: none; }
.rc-pick-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rc-pick-n { font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-pick-a { font-size: 12px; color: var(--text-3); font-weight: 600; }
.rc-flip { display: inline-block; transform: scaleX(-1); }

.rc-head { display: flex; align-items: center; gap: 10px; min-height: 48px; }
.rc-head .tag { flex: none; }
.rc-comment { margin: 0; flex: 1; min-width: 0; font-weight: 800; font-size: clamp(15px, 3.8vw, 18px); line-height: 1.35; }

.rc-board {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface-2);
}
.rc-lanes { display: flex; flex-direction: column; }
.rc-lane {
  --c: var(--primary); --nw: 110px; --lh: 46px;
  display: grid; grid-template-columns: var(--nw) minmax(0, 1fr); height: var(--lh);
}
.rc-lanes.is-dense .rc-lane { --lh: 40px; }
.rc-name {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 6px 0 10px;
  background: var(--surface); border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  font-weight: 800; font-size: 14px;
}
.rc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); flex: none; }
.rc-name-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rc-lane:last-child .rc-name { border-bottom: 0; }

.rc-track {
  position: relative; min-width: 0;
  background: color-mix(in srgb, var(--green) 15%, var(--surface));
  border-bottom: 1px dashed color-mix(in srgb, var(--green) 35%, var(--surface));
}
.rc-lane:nth-child(even) .rc-track { background: color-mix(in srgb, var(--green) 23%, var(--surface)); }
.rc-lane:last-child .rc-track { border-bottom: 0; }
.rc-track::before {
  content: ""; position: absolute; left: 40px; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--text) 18%, transparent);
}
.rc-track::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 10px;
  background: repeating-conic-gradient(#1d2030 0 25%, #ffffff 0 50%) 0 0 / 10px 10px;
  opacity: .85;
}
.rc-runner {
  position: absolute; left: 2px; top: 0; bottom: 0; width: 38px; z-index: 1;
  display: flex; align-items: center; justify-content: center; will-change: transform;
}
.rc-emoji { font-size: 30px; line-height: 1; }
.rc-bob { display: inline-block; transform-origin: 50% 90%; }
.rc-board.is-racing .rc-lane[data-st="run"] .rc-bob { animation: rc-bob .3s ease-in-out infinite alternate; }
.rc-board.is-racing .rc-lane[data-st="boost"] .rc-bob { animation: rc-bob .16s ease-in-out infinite alternate; }
.rc-board.is-racing .rc-lane[data-st="slow"] .rc-bob { animation: rc-wobble .5s ease-in-out infinite; }
.rc-lane[data-st="boost"] .rc-runner::before {
  content: "💨"; position: absolute; right: 88%; top: 50%; font-size: 17px; line-height: 1;
  transform: translateY(-40%) scaleX(-1); opacity: .9; animation: bb-fade .2s ease-out;
}
.rc-lane[data-st="slow"] .rc-runner::after {
  content: "💫"; position: absolute; right: -2px; top: 2px; font-size: 14px; line-height: 1; animation: bb-pop .25s ease-out;
}
.rc-rank {
  position: absolute; left: 6px; top: 50%; transform: translateY(-50%); z-index: 0;
  padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; font-family: var(--font-num);
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border); opacity: 0;
}
.rc-lane.is-done .rc-rank { opacity: 1; animation: bb-pop .3s cubic-bezier(.2, 1.4, .4, 1); }
.rc-lane.is-hit .rc-rank { background: var(--primary); border-color: var(--primary); color: #fff; }
.rc-lane.is-hit .rc-track { box-shadow: inset 0 0 0 3px var(--primary); }
.rc-lane.is-hit .rc-name { color: var(--primary); }
.rc-lane.is-hit .rc-bob { animation: bb-bounce .6s ease-in-out infinite; }

.rc-count {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none;
  font-size: clamp(56px, 16vw, 110px); font-weight: 900; font-family: var(--font-num); color: #fff;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .45); opacity: 0;
}
.rc-count.is-show { background: rgba(10, 12, 20, .22); animation: rc-count .7s ease-out forwards; }

@keyframes rc-bob { from { transform: translateY(1px) rotate(-4deg); } to { transform: translateY(-4px) rotate(4deg); } }
@keyframes rc-wobble { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }
@keyframes rc-count {
  0% { opacity: 0; transform: scale(1.7); }
  25% { opacity: 1; transform: scale(1); }
  85% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(.9); }
}

@media (max-width: 520px) {
  .rc-lane { --nw: 72px; --lh: 40px; }
  .rc-lanes.is-dense .rc-lane { --lh: 34px; }
  .rc-name { font-size: 12.5px; padding: 0 4px 0 6px; gap: 4px; }
  .rc-dot { width: 7px; height: 7px; }
  .rc-emoji { font-size: 25px; }
  .rc-runner { width: 32px; }
  .rc-track::before { left: 34px; }
  .rc-lanes.is-dense .rc-emoji { font-size: 22px; }
  .rc-rank { font-size: 11px; padding: 1px 6px; }
}
.game-shell.is-full .rc-lanes:not(.is-dense) .rc-lane { --lh: 58px; }
.game-shell.is-full .rc-lanes.is-dense .rc-lane { --lh: 46px; }
.game-shell.is-full .rc-emoji { font-size: 34px; }