/* ============================================================
   🏳️ 예측 깃발 진영 — js/predict-crowd.js 의 옷
   깃발 아래 사람이 모여 호객하고, 가끔 한 명이 옆 깃발로 갈아탄다.
   이슈 줄다리기(css/vote-bar.css)와 같은 톤 — 선 굵기·말풍선·먼지.
   ============================================================ */
/* 말풍선이 깃발 위로 솟으므로 윗줄(작성자·질문)과 겹치지 않게 자리를 비워 둔다(26.9.20 QA) */
.pc { margin: 26px 0 2px; }
.pc-ground { position: relative; display: flex; align-items: flex-end; gap: 4px;
  padding: 0 2px 6px; border-bottom: 1px solid rgba(255,255,255,.10); }
/* 바닥 흙먼지 결 — 사람들이 서 있는 땅 */
.pc-ground::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); }

.pc-camp { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center;
  padding: 2px 2px 0; border-radius: 10px; transition: flex .5s cubic-bezier(.3,.7,.3,1), background .3s; }
/* 깃발 색은 선택지마다(--pc-h). 판세는 높낮이·사람 수·딱지가 말한다 — 색으로 편들지 않는다. */
.pc-camp { --pc-c: hsl(var(--pc-h, 212) 78% 68%); }
.pc-camp.pc-won  { --pc-c: #ffd166; }
.pc-camp.pc-lost { --pc-c: #7b8496; }
.pc-camp::before { content: ""; position: absolute; inset: auto 6px 4px; height: 3px; border-radius: 3px;
  background: color-mix(in srgb, var(--pc-c) 60%, transparent); }

/* 내가 참여한 깃발 — 금빛으로 표시(어디 섰는지 한눈에) */
.pc-camp.pc-mine { background: linear-gradient(180deg, rgba(255,209,102,.13), transparent 70%); }
.pc-camp.pc-mine::before { background: #ffd166; box-shadow: 0 0 10px -1px rgba(255,209,102,.8); }

/* 🎨 사람은 갈라 색(인디고) 하나로 — 우리 사람들이니까. 선택지 구분은 깃발 천이 한다(26.9.20 사장님) */
.pc-stage { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 0;
  height: 58px; color: var(--pc-c); }
.pc-folks { color: var(--accent-2, #6f86ff); }
.pc-camp.pc-mine .pc-folks { color: #ffd166; }            /* 내가 선 자리만 금빛 */
.pc-camp.pc-won .pc-folks { color: #ffd166; }             /* 적중한 자리도 */
.pc-camp.pc-lost .pc-folks { color: #7b8496; }
.pc-camp.pc-mine .pc-stage { color: #ffd98a; }
/* 가장 붐비는 깃발은 금빛 — 목록 줄도 1등만 금색이라 눈이 같은 곳을 본다 */
.pc-camp.pc-top:not(.pc-mine) .pc-stage { color: #ffc850; }
.pc-camp.pc-top:not(.pc-mine) .pc-pct { color: #ffd66b; }
.pc-camp.pc-top::before { background: rgba(255,200,80,.45); }

/* 🏳️ 깃발 — 천만 나부낀다. 높이는 그 선택지의 비율(--pc-fh): 몰릴수록 장대가 높이 선다(26.9.20 사장님) */
.pc-flag { height: var(--pc-fh, 30px); width: calc(var(--pc-fh, 30px) * .68); flex: 0 0 auto; overflow: visible;
  transition: height .6s cubic-bezier(.3,.7,.3,1), width .6s cubic-bezier(.3,.7,.3,1); }
.pc-cloth { transform-origin: 4px 6px; animation: pcWave 1.6s ease-in-out infinite; }
.pc-strong .pc-cloth { animation-duration: 1.1s; }            /* 유력 깃발만 더 힘차게 — 경합끼리는 똑같이 나부낀다 */
.pc-low .pc-cloth { animation-duration: 2.6s; opacity: .8; } /* 꼴찌 깃발은 축 늘어진다 */
@keyframes pcWave {
  0%, 100% { transform: skewY(0deg) scaleY(1); }
  35%      { transform: skewY(-5deg) scaleY(.94); }
  70%      { transform: skewY(4deg) scaleY(1.04); }
}

/* 🙋 사람들 — 겹쳐 세워 좁은 카드에서도 넘치지 않게 */
.pc-folks { display: flex; align-items: flex-end; }
.pc-folk { width: 19px; height: 26px; margin-left: -7px; flex: 0 0 auto; overflow: visible; }
.pc-folk:first-child { margin-left: -2px; }
.pc-folk-body { animation: pcHop .9s ease-in-out infinite; transform-origin: 12px 29px; }
.pc-folk:nth-child(2n) .pc-folk-body { animation-delay: .22s; }
.pc-folk:nth-child(3n) .pc-folk-body { animation-delay: .45s; }
.pc-folk-arm { transform-origin: 12px 12.6px; animation: pcBeckon .45s ease-in-out infinite alternate; }
.pc-folk:nth-child(2n) .pc-folk-arm { animation-delay: .18s; }
.pc-low .pc-folk-body { animation-duration: 1.5s; }        /* 텅 빈 깃발은 기운이 없다 */

/* 🎉 가장 붐비는 깃발 — 우글우글 파티(26.9.20 사장님). 두 팔 만세로 방방 뛰고 머리 위로 색종이가 떨어진다 */
.pc-strong .pc-folk-body { animation-duration: .5s; }
.pc-party .pc-arm-l { transform-origin: 12px 12.8px; animation: pcArmL .32s ease-in-out infinite alternate; }
.pc-party .pc-arm-r { transform-origin: 12px 12.8px; animation: pcArmR .32s ease-in-out infinite alternate; }
.pc-party:nth-child(2n) .pc-arm-l, .pc-party:nth-child(2n) .pc-arm-r { animation-delay: .16s; }
@keyframes pcArmL { from { transform: rotate(10deg); } to { transform: rotate(-12deg); } }
@keyframes pcArmR { from { transform: rotate(-10deg); } to { transform: rotate(12deg); } }
.pc-conf { display: none; position: absolute; top: -4px; width: 5px; height: 7px; border-radius: 1px; z-index: 2; pointer-events: none; }
.pc-strong .pc-conf { display: block; animation: pcConf 1.6s linear infinite; }
.pc-strong .pc-conf.c1 { left: 26%; background: #ffd166; }
.pc-strong .pc-conf.c2 { left: 44%; background: #ff5c8a; animation-delay: .4s; }
.pc-strong .pc-conf.c3 { left: 62%; background: #38d9a9; animation-delay: .8s; }
.pc-strong .pc-conf.c4 { left: 78%; background: #6aa8ff; animation-delay: 1.2s; }
@keyframes pcConf {
  0%   { opacity: 0; transform: translateY(-6px) rotate(0deg); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(46px) rotate(320deg); }
}
/* 파티 깃발엔 바닥 불빛도 한 겹 */
.pc-camp.pc-strong .pc-stage::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -2px; height: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, rgba(255,200,80,.35), transparent 70%); animation: pcGlow 1.2s ease-in-out infinite; }
@keyframes pcGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* 💪 중간 깃발 — 주먹 펌프질 + 이마의 땀. 몸도 조금 빠르게 뛴다 */
.pc-mid .pc-folk-body, .pc-tie .pc-folk-body { animation-duration: .72s; }
.pc-fight .pc-pump { transform-origin: 12px 12.8px; animation: pcPump .36s ease-in-out infinite alternate; }
.pc-fight:nth-child(2n) .pc-pump { animation-delay: .18s; }
@keyframes pcPump { from { transform: rotate(6deg) translateY(1px); } to { transform: rotate(-22deg) translateY(-2px); } }
.pc-sweat { opacity: 0; animation: pcSweat 1.8s ease-in infinite; }
.pc-fight:nth-child(3n) .pc-sweat { animation-delay: .9s; }
@keyframes pcSweat {
  0%   { opacity: 0; transform: translate(0, 0) scale(.7); }
  18%  { opacity: .9; transform: translate(-.5px, 1px) scale(1); }
  100% { opacity: 0; transform: translate(-2px, 9px) scale(.8); }
}

/* 😢 텅 빈 깃발 — 고개 숙이고 어깨를 들썩이며 운다, 눈물이 뚝뚝 */
.pc-cry .pc-folk-body { animation: pcSob 1.1s ease-in-out infinite; transform-origin: 12px 29px; }
@keyframes pcSob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(1.5px) rotate(-6deg); } }
.pc-tear { animation: pcTear 1.6s ease-in infinite; opacity: 0; }
.pc-tear.t2 { animation-delay: .8s; }
.pc-cry:nth-child(2n) .pc-tear { animation-delay: .5s; }
@keyframes pcTear {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  20%  { opacity: .95; transform: translateY(1px) scale(1); }
  100% { opacity: 0; transform: translateY(12px) scale(.85); }
}
@keyframes pcHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes pcBeckon { from { transform: rotate(-16deg); } to { transform: rotate(14deg); } }

/* 🏃 갈아타기 — 옆 깃발로 뛰어간다(가는 동안 살짝 뛴다).
   뛰는 건 복제한 그림자다 — 깃발 아래 정원(=비율)은 건드리지 않는다. */
.pc { position: relative; }
.pc-folk.pc-run { position: absolute; animation: pcRun 1.15s cubic-bezier(.4,.1,.4,1) forwards; z-index: 5; margin: 0; pointer-events: none; }
.pc-folk.pc-gone { opacity: .25; transition: opacity .2s; }
@keyframes pcRun {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(calc(var(--pc-dx) * .5), -7px); }
  100% { transform: translate(var(--pc-dx), 0); opacity: .25; }
}

/* 라벨·퍼센트 */
/* 라벨 줄 — 카드 배경(사진)이 비쳐 글씨가 묻히던 것(26.9.20 사장님: 「뒤에 글자가 잘 안 보이네」).
   어두운 알약을 깔고 글자를 키웠다. */
.pc-meta { display: flex; align-items: center; gap: 5px; max-width: 100%; margin-top: 4px; padding: 3px 7px;
  border-radius: 9px; background: rgba(5,7,11,.88); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), 0 2px 8px -4px #000;
  backdrop-filter: blur(4px); }
.pc-lab { font-size: 11.5px; font-weight: 900; letter-spacing: -.2px; color: #fff; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; text-shadow: 0 1px 3px rgba(0,0,0,1); }
.pc-pct { font-size: 12.5px; font-weight: 900; color: color-mix(in srgb, var(--pc-c) 55%, #fff); flex: 0 0 auto;
  text-shadow: 0 1px 3px rgba(0,0,0,1); font-variant-numeric: tabular-nums; }

/* 🏷️ 상태 딱지 — 유력 / 경합 / 적중 */
.pc-badge { flex: 0 0 auto; font-size: 9px; font-weight: 900; letter-spacing: -.2px; padding: 1px 5px; border-radius: 6px;
  line-height: 1.5; }
.pc-b-lead { background: rgba(255,200,80,.18); color: #ffd166; box-shadow: inset 0 0 0 1px rgba(255,209,102,.5); }
.pc-b-tight { background: rgba(120,160,255,.16); color: #9ec0ff; box-shadow: inset 0 0 0 1px rgba(140,175,255,.45);
  animation: pcTight 1.6s ease-in-out infinite; }
@keyframes pcTight { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
.pc-b-win { background: rgba(255,200,80,.28); color: #ffe19a; box-shadow: inset 0 0 0 1px rgba(255,209,102,.8); }
.pc-camp.pc-mine .pc-pct { color: #ffd166; }
.pc-rest { margin-top: 5px; font-size: 11px; font-weight: 700; color: #8b93a7; text-align: right; }

/* 💬 말풍선 — 평소엔 숨고, JS 가 .pc-talk 를 붙일 때 한 번 튀어나온다 */
.pc-bub { position: absolute; bottom: calc(100% - 6px); left: 50%; transform: translateX(-50%);
  max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 900; color: #10131a; background: #fff;
  box-shadow: 0 4px 14px -6px rgba(0,0,0,.8); opacity: 0; pointer-events: none; z-index: 4; }
.pc-bub::after { content: ""; position: absolute; left: 50%; bottom: -4px; margin-left: -4px;
  border: 4px solid transparent; border-top-color: #fff; border-bottom: 0; }
.pc-camp.pc-talk .pc-bub { animation: pcBubOnce 2.2s ease-out forwards; }
@keyframes pcBubOnce {
  0%   { opacity: 0; transform: translateX(-50%) translateY(6px) scale(.88); }
  12%  { opacity: 1; transform: translateX(-50%) translateY(0) scale(1.04); }
  20%  { transform: translateX(-50%) translateY(0) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.96); }
}
/* 가장자리 깃발의 말풍선이 카드 밖으로 잘리지 않게 안쪽으로 붙인다 */
.pc-camp:first-child .pc-bub { left: 0; transform: none; }
.pc-camp:first-child .pc-bub::after { left: 16px; }
.pc-camp:first-child.pc-talk .pc-bub { animation-name: pcBubOnceL; }
.pc-camp:last-child .pc-bub { left: auto; right: 0; transform: none; }
.pc-camp:last-child .pc-bub::after { left: auto; right: 16px; }
.pc-camp:last-child.pc-talk .pc-bub { animation-name: pcBubOnceL; }
@keyframes pcBubOnceL {
  0%   { opacity: 0; transform: translateY(6px) scale(.88); }
  12%  { opacity: 1; transform: translateY(0) scale(1.04); }
  20%  { transform: translateY(0) scale(1); }
  82%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px) scale(.96); }
}

/* 상세 페이지에선 조금 크게 — 자리가 넉넉하다 */
.pmd .pc-stage, .pm-crowd .pc-stage { height: 70px; }
.pmd .pc-flag, .pm-crowd .pc-flag { height: calc(var(--pc-fh, 30px) * 1.2); width: calc(var(--pc-fh, 30px) * .82); }
.pmd .pc-folk, .pm-crowd .pc-folk { width: 22px; height: 30px; }
.pmd .pc-lab, .pm-crowd .pc-lab, .pmd .pc-pct, .pm-crowd .pc-pct { font-size: 12px; }


/* ═══ 🏁 정산이 끝난 판 — 승자의 여유, 패자의 눈물(26.9.20 사장님) ═══ */
/* 이긴 깃발: 금빛으로 갈아입고 왕관이 뜬다. 색종이가 쉬지 않고 떨어진다. */
.pc-done .pc-camp.pc-won .pc-stage { color: #ffd166; }
.pc-done .pc-camp.pc-won::before { background: #ffd166; box-shadow: 0 0 12px rgba(255,209,102,.9); }
.pc-done .pc-camp.pc-won { background: linear-gradient(180deg, rgba(255,209,102,.18), transparent 72%); }
.pc-done .pc-camp.pc-won .pc-pct { color: #ffd166; }
.pc-done .pc-camp.pc-won .pc-stage::after {          /* 👑 왕관 — 깃발 위에 얹힌다 */
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 10px; margin-left: -8px;
  background: #ffd166; clip-path: polygon(0 100%, 12% 24%, 32% 62%, 50% 0, 68% 62%, 88% 24%, 100% 100%);
  filter: drop-shadow(0 0 6px rgba(255,209,102,.9)); animation: pcCrown 1.6s ease-in-out infinite; }
@keyframes pcCrown { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
.pc-done .pc-camp.pc-won .pc-conf { display: block; animation: pcConf 1.3s linear infinite; }
.pc-done .pc-camp.pc-won .pc-cloth { animation-duration: .9s; }

/* 진 깃발: 깃대가 기울고 천이 축 늘어진다. 색이 빠지고 눈물만 떨어진다. */
.pc-done .pc-camp.pc-lost { filter: grayscale(.55) brightness(.8); }
.pc-done .pc-camp.pc-lost .pc-flag { transform: rotate(14deg); transform-origin: 4px 100%; transition: transform .8s ease; }
.pc-done .pc-camp.pc-lost .pc-cloth { animation-duration: 3.4s; opacity: .55; }
.pc-done .pc-camp.pc-lost .pc-folk-body { animation-duration: 1.4s; }
.pc-done .pc-camp.pc-lost .pc-tear { animation-duration: 1.1s; }
.pc-done .pc-camp.pc-lost .pc-lab { opacity: .75; }
/* 끝난 판은 깃발 높이를 건드리지 않는다 — 결과가 곧 서열이다 */
.pc-done .pc-camp .pc-flag { transition: none; }


/* 🏕️ 기타 깃발 — 여럿을 묶은 자리라 색을 죽이고 점선으로 구분한다(26.9.20 사장님: 선택지가 30개까지 갈 수 있다) */
.pc-camp.pc-other { --pc-c: #98a1b3; }
.pc-camp.pc-other .pc-flag { opacity: .8; }
.pc-camp.pc-other::before { background: repeating-linear-gradient(90deg, rgba(152,161,179,.7) 0 5px, transparent 5px 9px); }
.pc-camp.pc-other .pc-lab { color: #c3cad8; }

/* ↔️ 선택지가 많은 상세 — 접지 않고 전부 세우고 옆으로 민다 */
.pc-scroll .pc-ground { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 10px; }
.pc-scroll .pc-ground::-webkit-scrollbar { display: none; }
.pc-scroll .pc-camp { flex: 0 0 74px !important; scroll-snap-align: center; }
/* 밀어 볼 수 있다는 힌트 — 오른쪽 끝을 살짝 어둡게 */
.pc-scroll { position: relative; }
.pc-scroll::after { content: ""; position: absolute; top: 0; right: 0; bottom: 18px; width: 26px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(8,10,14,.85)); }


/* ═══ 🚶 줄서기 판 — 선택지가 6개 이상이면 깃발 대신 이 그림(26.9.20 사장님) ═══
   창구마다 줄이 서고 줄 길이가 곧 비율. 세로로 쌓이니 20개도 읽힌다. */
.pc-queue { margin: 10px 0 2px; display: flex; flex-direction: column; gap: 6px; }
.pc-queue .pc-camp { position: relative; display: grid; grid-template-columns: 62px 1fr auto auto; align-items: center;
  gap: 7px; padding: 0; background: none; flex: none; }
.pc-queue .pc-camp::before { content: none; }
.pc-qlab { font-size: 11.5px; font-weight: 900; color: #e8ecf5; text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
.pc-qline { position: relative; display: flex; align-items: flex-end; min-height: 26px; min-width: 0; overflow: hidden;
  color: var(--pc-c); }
.pc-queue .pc-folks { color: var(--accent-2, #6f86ff); }  /* 줄 선 사람도 갈라 색 */
.pc-queue .pc-camp.pc-mine .pc-folks { color: #ffd166; }
.pc-queue .pc-camp.pc-won .pc-folks { color: #ffd166; }
.pc-queue .pc-camp.pc-lost .pc-folks { color: #7b8496; }
/* 창구 — 줄이 시작되는 자리 */
.pc-desk { flex: 0 0 auto; width: 9px; height: 18px; margin-right: 3px; border-radius: 2px; background: currentColor;
  box-shadow: 0 0 8px -2px currentColor; }
.pc-qman { width: 17px; height: 25px; margin-left: -3px; flex: 0 0 auto; overflow: visible; }
.pc-qbody { animation: pcShuffle 1.7s ease-in-out infinite; transform-origin: 8px 22px; }
.pc-qman:nth-child(2n) .pc-qbody { animation-delay: .35s; }
.pc-qman:nth-child(3n) .pc-qbody { animation-delay: .8s; }
@keyframes pcShuffle { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2px); } }
/* 1등 줄은 들썩이고, 텅 빈 줄은 축 처진다 */
.pc-queue .pc-strong .pc-qbody { animation: pcQHop .5s ease-in-out infinite; }
@keyframes pcQHop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
.pc-queue .pc-low .pc-qbody { animation-duration: 2.6s; opacity: .8; }
.pc-queue .pc-pct { font-size: 12px; min-width: 34px; text-align: right; }
.pc-queue .pc-badge { margin-left: 2px; }
.pc-queue .pc-bub { bottom: 24px; left: 6px; transform: none; max-width: 190px; }
.pc-queue .pc-bub::after { left: 14px; margin-left: 0; }
.pc-queue .pc-camp.pc-talk .pc-bub { animation-name: pcBubOnceL; }
.pc-queue .pc-camp.pc-mine .pc-qlab { color: #ffd166; }
.pc-queue .pc-rest { text-align: right; }
/* 정산 끝난 판 — 맞힌 줄만 살아 있다 */
.pc-queue.pc-done .pc-camp.pc-lost { filter: grayscale(.55) brightness(.8); }
.pc-queue.pc-done .pc-camp.pc-won .pc-qlab { color: #ffd166; }

@media (prefers-reduced-motion: reduce) {
  .pc-cloth, .pc-folk-body, .pc-folk-arm, .pc-folk.pc-run, .pc-camp.pc-talk .pc-bub,
  .pc-arm-l, .pc-arm-r, .pc-pump, .pc-sweat, .pc-tear, .pc-conf, .pc-qbody,
  .pc-camp.pc-strong .pc-stage::before, .pc-done .pc-camp.pc-won .pc-stage::after { animation: none !important; }
  .pc-camp.pc-talk .pc-bub { opacity: 1; }
}

/* ═══ ⚔️ 맞대결 + 도전자 대기줄 — 선택지 6개 이상(26.9.20 사장님: 「대결 구도여야 해」) ═══ */
.pc-duel { margin: 10px 0 2px; }
.pc-ring { position: relative; display: grid; grid-template-columns: 1fr 46px 1fr; align-items: end; gap: 6px;
  padding: 8px 6px 6px; border-radius: 12px;
  background: radial-gradient(90% 120% at 50% 100%, rgba(255,200,80,.10), transparent 70%); }
.pc-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.pc-side.pc-l { color: var(--pro-solid, #7d93ff); }
.pc-side.pc-r { color: var(--con-solid, #ff7a94); transform: scaleX(-1); }
.pc-side.pc-r .pc-vsmeta, .pc-side.pc-r .pc-bub { transform: scaleX(-1); }
.pc-side.pc-mine { color: #ffd166; }
.pc-vsman { width: 42px; height: 54px; overflow: visible; }
.pc-vsbody { animation: pcVsPush 1.05s ease-in-out infinite alternate; transform-origin: 21px 52px; }
.pc-side.pc-r .pc-vsbody { animation-delay: .12s; }
@keyframes pcVsPush { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
.pc-side.pc-top .pc-vsbody { animation-duration: .6s; }     /* 앞선 쪽이 더 세게 민다 */
.pc-side.pc-low .pc-vsbody { animation-duration: 1.8s; }
.pc-vsmeta { display: flex; flex-direction: column; align-items: center; gap: 1px; max-width: 100%;
  padding: 2px 6px; border-radius: 8px; background: rgba(5,7,11,.82); }
.pc-vs { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 18px;
  font-size: 15px; font-weight: 900; color: #ffc850; text-shadow: 0 0 12px rgba(255,200,80,.6);
  animation: pcVsPulse 1.4s ease-in-out infinite; }
@keyframes pcVsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* 둘 사이의 줄다리기 막대 — 매듭이 우세한 쪽으로 밀린다 */
.pc-vsbar { position: relative; height: 10px; margin: 8px 2px 0; border-radius: 6px; overflow: visible;
  background: linear-gradient(90deg, var(--pro-solid, #7d93ff) var(--pc-k), var(--con-solid, #ff7a94) var(--pc-k));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); transition: background .6s ease; }
.pc-vsknot { position: absolute; top: 50%; left: var(--pc-k, 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #ffc850; box-shadow: 0 0 10px rgba(255,200,80,.9);
  animation: pcKnotJit .35s linear infinite; transition: left .6s cubic-bezier(.3,.7,.3,1); }
@keyframes pcKnotJit { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } }

/* 도전자 대기줄 */
.pc-queue-rows { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.pc-duel .pc-camp.pc-q { position: relative; display: grid; grid-template-columns: 18px 76px 1fr auto;
  gap: 7px; align-items: center; padding: 0; background: none; flex: none; }
.pc-duel .pc-camp.pc-q::before { content: none; }
.pc-qno { font-size: 10.5px; font-weight: 900; color: #8b93a7; text-align: right; }
.pc-duel .pc-qlab { font-size: 11.5px; font-weight: 900; color: hsl(var(--pc-h, 212) 70% 82%); text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.9); }
/* 🏃 추격 트랙 — 도전자가 링(오른쪽)을 향해 달린다. 2위에 붙을수록 앞으로 간다(26.9.20 사장님) */
.pc-duel .pc-qline { position: relative; height: 26px; min-width: 0; overflow: hidden;
  color: hsl(var(--pc-h, 212) 80% 66%); }   /* 달리는 사람도 선택지 색 — 파랑 하나면 단조롭다(26.9.20 사장님) */
.pc-track { position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.22)); }
.pc-duel .pc-folks { position: absolute; bottom: 1px; display: flex; align-items: flex-end;
  transition: left .8s cubic-bezier(.3,.7,.3,1); }
.pc-runner { width: 22px; height: 22px; margin-left: -6px; flex: 0 0 auto; overflow: visible; }
.pc-runner:first-child { margin-left: 0; }
.pc-runbody { animation: pcRunBob .42s ease-in-out infinite alternate; transform-origin: 13px 22px; }
.pc-runner:nth-child(2) .pc-runbody { animation-delay: .1s; }
.pc-runner:nth-child(3) .pc-runbody { animation-delay: .21s; }
@keyframes pcRunBob { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-2px) rotate(2deg); } }
.pc-runner .pc-legs { transform-origin: 11.6px 15.4px; animation: pcStride .42s ease-in-out infinite alternate; }
.pc-runner .pc-arms { transform-origin: 13.4px 11.5px; animation: pcStride .42s ease-in-out infinite alternate-reverse; }
@keyframes pcStride { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
/* 발밑 먼지 */
.pc-runner i { position: absolute; left: -4px; bottom: 1px; width: 7px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: 0; animation: pcDust .42s linear infinite; }
@keyframes pcDust { 0% { opacity: .5; transform: translateX(0) scaleX(1); } 100% { opacity: 0; transform: translateX(-8px) scaleX(.5); } }
/* 바로 다음 차례는 더 빨리 달린다 */
.pc-duel .pc-next .pc-runbody, .pc-duel .pc-next .pc-legs, .pc-duel .pc-next .pc-arms { animation-duration: .3s; }
.pc-duel .pc-camp.pc-mine .pc-qline { color: #ffd166; }
.pc-duel .pc-camp.pc-other .pc-qline { color: #98a1b3; }
.pc-duel .pc-pct { font-size: 12px; min-width: 34px; text-align: right; color: hsl(var(--pc-h, 212) 85% 76%); }
/* 트랙에도 선택지 색이 옅게 깔린다 */
.pc-duel .pc-track { background: linear-gradient(90deg, transparent, hsl(var(--pc-h, 212) 70% 60% / .35)); }
/* 🈳 아직 아무도 안 온 판 알림 — 숫자는 보여 주되 균등값임을 밝힌다 */
.pc-empty-note { margin-top: 6px; font-size: 10.5px; font-weight: 800; color: #8b93a7; text-align: right; }
.pc-empty-note b { color: #cfd6e6; }
.pc-duel .pc-camp.pc-mine .pc-qlab { color: #ffd166; }
/* 정산이 끝난 판 — 진 쪽은 회색 */
.pc-duel.pc-done .pc-side.pc-lost { filter: grayscale(.6) brightness(.8); }
.pc-duel.pc-done .pc-side.pc-won { color: #ffd166; }
.pc-duel .pc-bub { bottom: 100%; }
.pc-duel .pc-camp.pc-q .pc-bub { bottom: 22px; left: 0; transform: none; }
.pc-duel .pc-camp.pc-q .pc-bub::after { left: 14px; margin-left: 0; }
.pc-duel .pc-camp.pc-talk .pc-bub, .pc-side.pc-talk .pc-bub { animation-name: pcBubOnceL; }

@media (prefers-reduced-motion: reduce) {
  .pc-vsbody, .pc-vs, .pc-vsknot, .pc-runbody, .pc-runner .pc-legs, .pc-runner .pc-arms, .pc-runner i { animation: none !important; }
}