/* ============================================================
   오리 레이스 — 기존 V3 스타일시트 이식본
   · 애니메이션/제스처/장식 규칙은 V3 원본 그대로 (동작 동일)
   · 색상·테두리·그림자·타이포만 Go-Go! Duck 디자인 토큰으로 교체
   dr- 접두사만 사용 — 다른 화면에는 영향 없음
   ============================================================ */

.dr-page { max-width: 900px; margin-left: auto; margin-right: auto; }

.dr-card { padding: 24px 26px 22px; }

/* ---------- 헤더 (제목 + 참가비/상금풀) ---------- */
.dr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.dr-title-wrap { display: flex; align-items: center; gap: 12px; }

.dr-title-duck {
  width: 52px;
  height: 46px;
  object-fit: contain;
  image-rendering: pixelated;
  animation: drTitleBob 1.6s ease-in-out infinite;
}
@keyframes drTitleBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.dr-title {
  margin: 0 0 3px;
  font-size: 23px;
  font-weight: 900;
  color: var(--tx);
  letter-spacing: -0.3px;
}

.dr-sub { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }

.dr-stats { display: flex; gap: 8px; flex-wrap: wrap; }

.dr-stat {
  min-width: 92px;
  padding: 9px 13px;
  border-radius: 13px;
  border: 1px solid var(--card-border);
  background: #f5faff;
  text-align: center;
}
.dr-stat span { display: block; font-size: 10.5px; font-weight: 800; color: var(--tx-sub); margin-bottom: 3px; }
.dr-stat b { font-size: 15px; font-weight: 900; color: var(--tx); font-variant-numeric: tabular-nums; }
.dr-stat b i { font-style: normal; }

.dr-stat.is-pot { border-color: #ffe0a8; background: linear-gradient(180deg, #fff9ec, #fff3dc); }
.dr-stat.is-pot b { color: #d98c07; }

/* ---------- 경주장 ---------- */
.dr-track {
  position: relative;
  background: #f7fbff;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 8px 0 2px;
  overflow: hidden;
  min-height: 96px;
}

.dr-lanes { display: flex; flex-direction: column; }

.dr-lane {
  position: relative;
  height: 64px;
  border-bottom: 2px dashed #d6e4f3;
}
.dr-lane:last-child { border-bottom: none; }

.dr-duck {
  position: absolute;
  left: 0;
  top: 4px;
  width: 64px;
  will-change: transform;
}

/* ============================================================
   레이스 아바타 — 사이트 공통 회원 아바타 + 걷는 다리
   구조:  .dr-duck (위치 이동)
            └ .dr-duck-img            기존 제스처(dr-g-*) CSS 대상
                ├ .dr-avatar-shadow   그림자
                ├ .dr-avatar-inner    상태 공통 변형 (가속 기울기·역주행 반전·골인 점프)
                │   ├ .dr-avatar-body   몸통 상하 (아바타 자체 발은 clip 으로 잘라냄)
                │   │    └ .gg-avatar-box  공통 아바타 레이어
                │   └ .dr-avatar-legs   픽셀 다리 2개 (앞뒤 교대 = 진짜 걷기)
                ├ .dr-avatar-dust     발밑 먼지
                └ .dr-avatar-spark    가속 광채 / 골인 반짝임
   ============================================================ */
.dr-duck-img {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
  margin-left: 4px;
  overflow: visible;               /* 왕관·머리 장식이 잘리지 않도록 */
  --dr-leg: #fec325;               /* 다리 색 (JS가 아바타에서 뽑아 덮어씀) */
}

.dr-avatar-inner { position: absolute; inset: 0; display: block; transform-origin: 50% 100%; }
.dr-avatar-body {
  position: absolute; inset: 0; display: block;
  transform-origin: 50% 88%;
  will-change: transform;
}
.dr-avatar-box { display: block; width: 100%; height: 100%; }
/* 아바타 원본 실측 : 몸통 아래 검은 윤곽선 80~82%, 발 80~90%, 그 아래는 여백.
   82% 에서 잘라야 몸통 아래 윤곽선은 남고 원래 발만 사라진다. */
/* 발 잘라내기는 "본체 레이어"에만 — 효과(gg-avatar-fx)는 아바타보다 크게 그려지므로
   박스 단위로 자르면 효과 바깥 부분이 통째로 사라진다 (2026-08-12) */
.dr-avatar-body .gg-avatar-box .gg-avatar-layer { clip-path: inset(0 0 18% 0); }

/* ---------- 붙이는 다리 (얇은 다리 + 물갈퀴 발) ----------
   원본 발 실측 그대로 : 발 중심 가로 35.8% / 64.4%, 발 폭 10px, 세로 80~90% */
.dr-avatar-legs {
  position: absolute; left: 50%; bottom: 6px;
  width: 26px; height: 6px; margin-left: -13px;
  z-index: 1;
}
.dr-avatar-legs i {                     /* 다리 — 원본처럼 가는 검은 선 */
  position: absolute; bottom: 2.5px;
  width: 2px; height: 4px;
  background: #141414;
  border-radius: 1px;
  transform-origin: 50% 0;
  will-change: transform;
}
.dr-avatar-legs i > b {                 /* 물갈퀴 발 */
  position: absolute; left: 50%; bottom: -4px; margin-left: -5px;
  width: 10px; height: 4.5px;
  background: var(--dr-leg);
  border-radius: 2px 2px 4px 4px;
  box-shadow: 0 0 0 1.3px #141414;
}
.dr-avatar-legs i:nth-child(1) { left: 5.7px;  z-index: 2; }
.dr-avatar-legs i:nth-child(2) { right: 5.7px; z-index: 1; filter: brightness(.82); }

/* 그림자 */
.dr-avatar-shadow {
  position: absolute; left: 50%; bottom: 1px;
  width: 26px; height: 6px; margin-left: -13px;
  border-radius: 50%;
  background: rgba(40, 70, 120, .22);
  filter: blur(1px);
  transition: opacity .18s ease;
}

/* 발밑 먼지 / 물보라 */
.dr-avatar-dust { position: absolute; left: 2px; bottom: -1px; width: 18px; height: 10px; opacity: 0; }
.dr-avatar-dust i {
  position: absolute; bottom: 1px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(150, 190, 235, .85);
}
.dr-avatar-dust i:nth-child(2) { left: 6px; width: 3px; height: 3px; }
.dr-avatar-dust i:nth-child(3) { left: 12px; width: 5px; height: 5px; }

/* 가속 광채 / 골인 반짝임 */
.dr-avatar-spark { position: absolute; inset: -6px; border-radius: 50%; opacity: 0; pointer-events: none; }

/* ============================================================
   상태별 애니메이션 (E안 : 다리 교대 + 몸통 상하 + 그림자 + 먼지)
   전환은 전부 steps() — 원본 스프라이트처럼 포즈가 딱딱 바뀌어야 걷는 것처럼 보인다
   ============================================================ */

/* ---------- 1. 일반 이동 ---------- */
.dr-duck.race-state-walk .dr-avatar-body { animation: drStep var(--dr-walk-ms, 560ms) steps(1, end) infinite; }
.dr-duck.race-state-walk .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 560ms) steps(1, end) infinite; }
.dr-duck.race-state-walk .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 560ms) steps(1, end) infinite; }
.dr-duck.race-state-walk .dr-avatar-shadow { animation: drShadowStep var(--dr-walk-ms, 560ms) steps(1, end) infinite; }
.dr-duck.race-state-walk .dr-avatar-dust { animation: drDust calc(var(--dr-walk-ms, 560ms) / 2) linear infinite; }

/* 몸통 : 딛는 순간 낮아지고, 다리가 스쳐 지나갈 때 떠오른다 (한 사이클에 2번) */
@keyframes drStep {
  /* 착지 = 낮아지고 옆으로 눌림 / 통과 = 떠오르고 세로로 늘어남 + 좌우 번갈아 기울기 */
  0%   { transform: translateY(0)    rotate(-2deg) scaleX(1.02) scaleY(.98); }
  25%  { transform: translateY(-4px) rotate(1deg)  scaleX(.98)  scaleY(1.03); }
  50%  { transform: translateY(0)    rotate(2deg)  scaleX(1.02) scaleY(.98); }
  75%  { transform: translateY(-4px) rotate(-1deg) scaleX(.98)  scaleY(1.03); }
  100% { transform: translateY(0)    rotate(-2deg) scaleX(1.02) scaleY(.98); }
}
/* 다리 : 앞으로 크게 내딛고 → 뒤로 밀어낸다 (반 사이클 차이로 교대) */
@keyframes drLegA {
  0%   { transform: translate(4px, 0)     scaleY(1); }    /* 앞에 착지 */
  25%  { transform: translate(1.5px, 0)   scaleY(.9); }   /* 몸 밑으로 */
  50%  { transform: translate(-4px, 0)    scaleY(.8); }   /* 뒤로 밀기 */
  75%  { transform: translate(0, -3px)    scaleY(1.05); } /* 들어서 앞으로 */
  100% { transform: translate(4px, 0)     scaleY(1); }
}
@keyframes drLegB {
  0%   { transform: translate(-4px, 0)    scaleY(.8); }
  25%  { transform: translate(0, -3px)    scaleY(1.05); }
  50%  { transform: translate(4px, 0)     scaleY(1); }
  75%  { transform: translate(1.5px, 0)   scaleY(.9); }
  100% { transform: translate(-4px, 0)    scaleY(.8); }
}
@keyframes drShadowStep {
  0%   { transform: scaleX(1.15); opacity: .95; }
  25%  { transform: scaleX(.78);  opacity: .5; }
  50%  { transform: scaleX(1.15); opacity: .95; }
  75%  { transform: scaleX(.78);  opacity: .5; }
  100% { transform: scaleX(1.15); opacity: .95; }
}
@keyframes drDust {
  0%   { opacity: .85; transform: translateX(0) scale(.5); }
  60%  { opacity: 0;   transform: translateX(-12px) scale(1.2); }
  100% { opacity: 0; }
}

/* ---------- 2. 대기 : 다리 멈추고 호흡만 ---------- */
.dr-duck.race-state-idle .dr-avatar-body { animation: drIdle 2.4s ease-in-out infinite; }
.dr-duck.race-state-idle .dr-avatar-legs i:nth-child(1) { transform: translate(1px, 0); }
.dr-duck.race-state-idle .dr-avatar-legs i:nth-child(2) { transform: translate(-1px, 0); }
@keyframes drIdle {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-1.5px) scaleY(1.02); }
}

/* ---------- 3. 정지 : 완전히 멈추고 살짝 눌림 ---------- */
.dr-duck.race-state-stop .dr-avatar-body {
  animation: none;
  transform: translateY(2px) scaleY(.9) scaleX(1.05);
}
.dr-duck.race-state-stop .dr-avatar-legs i { animation: none; }
.dr-duck.race-state-stop .dr-avatar-legs i:nth-child(1) { transform: translate(2px, 0) scaleY(.85); }
.dr-duck.race-state-stop .dr-avatar-legs i:nth-child(2) { transform: translate(-2px, 0) scaleY(.85); }
.dr-duck.race-state-stop .dr-avatar-shadow { animation: none; transform: scaleX(1.15); opacity: .9; }

/* ---------- 4. 가속 : 앞으로 기울고 다리는 더 빠르게 ---------- */
.dr-duck.race-state-boost .dr-avatar-inner { animation: drBoostLean .26s ease-in-out infinite; }
.dr-duck.race-state-boost .dr-avatar-body { animation: drStep var(--dr-walk-ms, 280ms) steps(1, end) infinite; }
.dr-duck.race-state-boost .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 280ms) steps(1, end) infinite; }
.dr-duck.race-state-boost .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 280ms) steps(1, end) infinite; }
.dr-duck.race-state-boost .dr-avatar-shadow { animation: drShadowStep var(--dr-walk-ms, 280ms) steps(1, end) infinite; }
.dr-duck.race-state-boost .dr-avatar-dust { animation: drDust calc(var(--dr-walk-ms, 280ms) / 2) linear infinite; }
.dr-duck.race-state-boost .dr-avatar-spark {
  opacity: 1;
  background: radial-gradient(circle at 50% 55%, rgba(255, 214, 110, .55) 0%, rgba(255, 190, 60, 0) 68%);
  animation: drGlow .5s ease-in-out infinite;
}
@keyframes drBoostLean {
  0%, 100% { transform: rotate(6deg) scaleX(1.02); }
  50%      { transform: rotate(8deg) scaleX(1.06) translateY(-2px); }
}
@keyframes drGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- 5. 역주행 : 아바타·다리·장착 아이템 통째로 좌우 반전 ---------- */
.dr-duck.race-state-backward .dr-avatar-inner { animation: drBackward .5s ease-in-out infinite; }
.dr-duck.race-state-backward .dr-avatar-body { animation: drStep var(--dr-walk-ms, 700ms) steps(1, end) infinite; }
.dr-duck.race-state-backward .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 700ms) steps(1, end) infinite; }
.dr-duck.race-state-backward .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 700ms) steps(1, end) infinite; }
.dr-duck.race-state-backward .dr-avatar-shadow { animation: drShadowStep var(--dr-walk-ms, 700ms) steps(1, end) infinite; }
@keyframes drBackward {
  0%, 100% { transform: scaleX(-1) rotate(2deg); }
  50%      { transform: scaleX(-1) rotate(-2deg) translateY(-2px); }
}

/* ---------- 6. 골인 : 다리 모으고 점프 + 폭죽 ---------- */
.dr-duck.race-state-finish .dr-avatar-inner { animation: drFinishJump .62s ease-out 2; }
.dr-duck.race-state-finish .dr-avatar-body { animation: none; }
.dr-duck.race-state-finish .dr-avatar-legs i { animation: none; }
.dr-duck.race-state-finish .dr-avatar-legs i:nth-child(1) { transform: translate(1.5px, 0); }
.dr-duck.race-state-finish .dr-avatar-legs i:nth-child(2) { transform: translate(-1.5px, 0); }
.dr-duck.race-state-finish .dr-avatar-spark {
  opacity: 1;
  background:
    radial-gradient(circle at 18% 24%, #ffe27a 0 2px, transparent 3px),
    radial-gradient(circle at 84% 30%, #9fd8ff 0 2px, transparent 3px),
    radial-gradient(circle at 50% 4%,  #ffd34d 0 2.5px, transparent 4px),
    radial-gradient(circle at 12% 74%, #ffb3d9 0 2px, transparent 3px),
    radial-gradient(circle at 90% 70%, #ffe27a 0 2px, transparent 3px);
  animation: drPop .9s ease-out 2;
}
@keyframes drFinishJump {
  0%, 100% { transform: translateY(0) scale(1); }
  40%      { transform: translateY(-14px) scale(1.07); }
}
@keyframes drPop {
  0%   { opacity: 0; transform: scale(.4); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ============================================================
   ⚠ 모션 최소화(prefers-reduced-motion) 설정 대응
   global.css 에 전역 킬 스위치가 있다:
     * , *::before, *::after { animation: none !important; }
   이게 걷기 애니메이션까지 통째로 죽여서 "고정 자세로 미끄러지는" 현상이 났다.
   걷기는 장식이 아니라 "지금 달리는 중"을 알려주는 게임 정보라서
   진폭이 작은 걷기 모션만 다시 살리고, 번쩍이는 장식(광채·먼지·폭죽)만 끈다.
   전역 규칙이 !important 라서 여기서도 !important 로 되살려야 한다.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  /* 걷기 — 몸통 · 다리 · 그림자 */
  .dr-duck.race-state-walk .dr-avatar-body { animation: drStep var(--dr-walk-ms, 560ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-walk .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 560ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-walk .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 560ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-walk .dr-avatar-shadow { animation: drShadowStep var(--dr-walk-ms, 560ms) steps(1, end) infinite !important; }
  /* 가속 */
  .dr-duck.race-state-boost .dr-avatar-body { animation: drStep var(--dr-walk-ms, 280ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-boost .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 280ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-boost .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 280ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-boost .dr-avatar-shadow { animation: drShadowStep var(--dr-walk-ms, 280ms) steps(1, end) infinite !important; }
  /* 역주행 (방향 반전은 유지, 걷기도 계속) */
  .dr-duck.race-state-backward .dr-avatar-inner { animation: none !important; transform: scaleX(-1); }
  .dr-duck.race-state-backward .dr-avatar-body { animation: drStep var(--dr-walk-ms, 700ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-backward .dr-avatar-legs i:nth-child(1) { animation: drLegA var(--dr-walk-ms, 700ms) steps(1, end) infinite !important; }
  .dr-duck.race-state-backward .dr-avatar-legs i:nth-child(2) { animation: drLegB var(--dr-walk-ms, 700ms) steps(1, end) infinite !important; }
  /* 가속 기울기는 흔들림 없이 고정 기울기로 */
  .dr-duck.race-state-boost .dr-avatar-inner { animation: none !important; transform: rotate(6deg); }
  /* 번쩍이는 장식만 끈다 */
  .dr-avatar-dust, .dr-avatar-spark { animation: none !important; opacity: 0 !important; }
  .dr-duck.race-state-boost .dr-avatar-spark { opacity: .5 !important; }
}

/* ---------- 닉네임 라벨 ----------
   .dr-duck 은 64px 고정이라 세 글자 이상이면 줄바꿈되거나 잘렸다.
   라벨을 오리 중앙 기준 절대배치 + 한 줄 고정으로 바꾸고,
   경주장 좌우 끝에서는 JS 가 --dr-lbl-shift 로 안쪽으로 밀어 넣는다. */
.dr-label {
  position: absolute;
  left: 50%;
  top: 44px;
  transform: translateX(calc(-50% + var(--dr-lbl-shift, 0px)));
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  white-space: nowrap;          /* 줄바꿈 금지 */
  width: auto;                  /* 폭 제한 금지 (예전 64px/48px 제한이 잘림의 원인) */
  max-width: none;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.1;
  pointer-events: none;
}
.dr-label .dr-rank { flex: none; color: #8ba3c2; font-weight: 900; }
.dr-label .dr-rank.is-final { color: #d98c07; }
.dr-label b { flex: none; font-weight: 900; }

/* 말풍선 */
.dr-bubble {
  position: absolute;
  top: 2px;
  left: 0;
  padding: 4px 9px;
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 9px;
  box-shadow: 0 3px 8px rgba(20, 45, 90, .10);
  font-size: 12px;
  font-weight: 800;
  color: var(--tx);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
  z-index: 5;
  will-change: transform;
}
.dr-bubble::after {
  content: "";
  position: absolute;
  left: 10px;
  bottom: -5px;
  border: 5px solid transparent;
  border-top-color: #fff;
  border-bottom: none;
  filter: drop-shadow(0 1px 0 var(--card-border));
}
.dr-bubble.is-left::after { left: auto; right: 10px; }
.dr-bubble.show { opacity: 1; }

/* 카운트다운 (경주장 내부 중앙) */
.dr-count {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 58px;
  font-weight: 900;
  color: var(--blue);
  text-shadow: 0 2px 0 #fff;
  background: rgba(247, 251, 255, .5);
  z-index: 10;
  pointer-events: none;
}
.dr-count[hidden] { display: none; }   /* hidden 속성이 display:flex 에 밀리지 않게 */
.dr-count.pop { animation: drCountPop .55s ease-out; }
@keyframes drCountPop {
  0%   { transform: scale(1.5); opacity: .3; }
  100% { transform: scale(1); opacity: 1; }
}

.dr-track-hint {
  padding: 30px 10px 32px;
  text-align: center;
  color: var(--tx-sub);
  font-size: 13.5px;
  font-weight: 700;
}

/* 자동 시작 카운트다운 배지 */
.dr-autostart {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 11;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 4px 10px rgba(37, 110, 235, .3);
}
.dr-autostart[hidden] { display: none; }
.dr-autostart b { font-size: 14px; font-weight: 900; }


/* ============================================================
   오리 상태 연출 — V3 원본 그대로
   ============================================================ */

/* 부스트: 앞으로 기울고 빠르게 통통 + 속도선 */
/* 가속 기울기는 이제 상태 클래스(.race-state-boost)가 안쪽에서 처리한다.
   여기서는 제스처(dr-g-boost)일 때 위아래 흔들림만 더해 기울기가 겹치지 않게 한다. */
.dr-duck.dr-g-boost .dr-duck-img { animation: drBoostBob .22s linear infinite; }
@keyframes drBoostBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.dr-lines { position: absolute; left: -26px; top: 12px; width: 26px; opacity: 0; }
.dr-lines i {
  display: block;
  height: 2px;
  margin: 4px 0;
  border-radius: 2px;
  background: #9fd7f0;
}
.dr-lines i:nth-child(2) { width: 70%; background: var(--gold); }
.dr-lines i:nth-child(3) { width: 85%; }
.dr-duck.is-boost .dr-lines,
.dr-duck.dr-g-boost .dr-lines { opacity: 1; animation: drLinesFlow .3s linear infinite; }
@keyframes drLinesFlow {
  from { transform: translateX(6px); opacity: 1; }
  to   { transform: translateX(-8px); opacity: .4; }
}
.dr-duck.dr-g-boost .dr-duck-img  { filter: drop-shadow(0 0 6px rgba(255, 205, 90, .8)); }
.dr-duck.dr-g-boost2 .dr-duck-img { filter: drop-shadow(0 0 9px rgba(255, 170, 60, .9)); }
.dr-boost-tag {
  position: absolute;
  left: -34px;
  top: -8px;
  font-size: 10px;
  font-weight: 900;
  color: #f39c12;
  letter-spacing: .5px;
}

/* 제스처 */
.dr-duck.dr-g-wobble .dr-duck-img { animation: drWobble .5s ease-in-out infinite; }
@keyframes drWobble { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.dr-duck.dr-g-shakehead .dr-duck-img { animation: drWobble .7s ease-in-out infinite; }
.dr-duck.dr-g-lookdown .dr-duck-img { transform: rotate(14deg); }
.dr-duck.dr-g-sit .dr-duck-img { transform: translateY(5px) scaleY(.82); }
.dr-duck.dr-g-dim .dr-duck-img { filter: brightness(.55); }
.dr-duck.dr-g-saver .dr-duck-img { filter: saturate(.25) brightness(.85); }
.dr-duck.dr-g-lookback .dr-duck-img { animation: drLookBack 1.2s ease-in-out; }
@keyframes drLookBack {
  0%, 100%  { transform: scaleX(1); }
  25%, 65%  { transform: scaleX(-1); }
}
.dr-duck.dr-g-hop .dr-duck-img { animation: drHop .5s ease-out 2; }
@keyframes drHop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.dr-duck.dr-g-lookup .dr-duck-img { transform: rotate(-12deg); }
.dr-duck.dr-g-wave .dr-duck-img { animation: drWave .4s ease-in-out 3; }
@keyframes drWave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-8deg) translateY(-2px); } }
.dr-duck.dr-g-headdown .dr-duck-img { transform: rotate(9deg) translateY(2px); }
.dr-duck.is-finished .dr-duck-img { animation: drHop .6s ease-out 2; }

/* 장식(머리 위 아이콘) */
.dr-acc { position: absolute; left: 12px; top: -14px; height: 14px; pointer-events: none; }
.dr-acc-txt { font-size: 13px; font-weight: 900; color: #e67e22; }
.dr-acc-star { font-size: 12px; color: #f1c40f; text-shadow: 0 0 4px rgba(241, 196, 15, .7); }
.dr-acc-bat { font-size: 9px; font-weight: 900; color: #e74c3c; border: 1px solid #e74c3c; border-radius: 2px; padding: 0 2px; background: #fff; }
.dr-acc-dots i, .dr-acc-bub i {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #8a9099;
  margin-right: 2px;
  animation: drBlink2 1s infinite;
}
.dr-acc-dots i:nth-child(2) { animation-delay: .2s; }
.dr-acc-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes drBlink2 { 50% { opacity: .2; } }
.dr-acc-bub i { background: #aadcf5; border-radius: 50%; animation: drBubUp 1s infinite; }
.dr-acc-bub i:nth-child(2) { width: 3px; height: 3px; animation-delay: .3s; }
@keyframes drBubUp { from { transform: translateY(2px); opacity: 1; } to { transform: translateY(-6px); opacity: 0; } }
.dr-acc-tear { display: inline-block; width: 4px; height: 6px; background: #6fb9ea; border-radius: 50% 50% 60% 60%; animation: drBubUp 1.1s infinite reverse; }
.dr-acc-flame i {
  display: inline-block;
  width: 5px; height: 8px;
  margin-right: 1px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, #ffb54d, #ff5c2e);
  animation: drFlame .3s ease-in-out infinite alternate;
}
.dr-acc-flame i:nth-child(2) { height: 10px; animation-delay: .1s; }
@keyframes drFlame { from { transform: scaleY(1); } to { transform: scaleY(1.35); } }

.dr-confetti {
  position: absolute;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  pointer-events: none;
}

/* ---------- 하단 ---------- */
.dr-divider { height: 1px; background: #eef4fb; margin: 18px 0 14px; }

.dr-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dr-status { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }
.dr-dot { width: 8px; height: 8px; border-radius: 50%; background: #35d07f; box-shadow: 0 0 6px rgba(53, 208, 127, .6); }
.dr-dot.is-off { background: #e74c3c; box-shadow: none; }
.dr-phase { color: var(--blue); font-weight: 900; margin-left: 4px; }
.dr-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dr-me { font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }
.dr-me b { color: var(--tx); font-weight: 900; }
.dr-hint { font-size: 12.5px; font-weight: 700; color: var(--tx-sub); }

.dr-btn {
  height: 40px;
  padding: 0 18px;
  background: #fff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  color: var(--tx);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: .15s;
}
.dr-btn:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-1px); }
.dr-btn-primary {
  background: linear-gradient(180deg, #3b86fa, #1d6bfa);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(29, 107, 250, .28);
}
.dr-btn-primary:hover { color: #fff; filter: brightness(1.05); }

.dr-admin {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 12px 14px;
  background: #f5faff;
  border: 1px solid var(--card-border);
  border-radius: 13px;
}
.dr-admin[hidden] { display: none; }   /* hidden 속성이 display:flex 에 밀리지 않게 */
.dr-admin-label {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 10.5px;
  font-weight: 900;
}
.dr-admin .dr-btn { height: 34px; padding: 0 14px; font-size: 12.5px; }

.dr-guide {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--tx-sub);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.9;
}
.dr-guide b { color: var(--tx); font-weight: 900; }

/* ---------- 결과 팝업 ---------- */
.dr-pop-back {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(120, 160, 195, .3);
  backdrop-filter: blur(2px);
}
.dr-pop {
  width: min(400px, 100%);
  background: #fff;
  border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 18px 46px rgba(20, 45, 90, .24);
  animation: drPopIn .3s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes drPopIn { from { transform: scale(.7); opacity: 0; } }
.dr-pop h3 { text-align: center; color: var(--tx); font-size: 20px; font-weight: 900; margin: 0 0 14px; }

.dr-pop-prize {
  margin-bottom: 14px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f5faff;
  border: 1px solid var(--card-border);
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--tx-sub);
}
.dr-pop-prize b { color: #d98c07; font-weight: 900; }
.dr-pop-prize.is-win {
  background: linear-gradient(180deg, #fff9ec, #fff1d6);
  border-color: #f5d98a;
  color: #a8620f;
  font-size: 14px;
}

.dr-pop-list { display: flex; flex-direction: column; gap: 6px; max-height: 44vh; overflow-y: auto; }
.dr-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: #f8fbfe;
  border: 1px solid #eef4fb;
  border-radius: 11px;
  font-size: 13.5px;
}
.dr-pop-row b { color: var(--tx-sub); min-width: 34px; font-weight: 900; }
.dr-pop-row span { flex: 1; font-weight: 900; }
.dr-pop-row i { font-style: normal; color: var(--tx-sub); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dr-pop-row em { font-style: normal; }
.dr-pop-row.is-winner { background: #fff8e6; border-color: #f5d98a; }
.dr-pop-row.is-winner b { color: #d4930d; }
.dr-pop-btns { display: flex; gap: 9px; justify-content: center; margin-top: 16px; }

/* ---------- 오리레이스 하단 사이드 카드 (출석 · 오늘의 미션) ---------- */
.dr-side {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 16px;
  align-items: start;
}
.dr-side .gg-card { width: auto; min-width: 0; height: auto; }

/* 배경음악 켜기/끄기 (하이로우·룰렛과 같은 자리·같은 모양) */
.dr-bgm {
  width: 34px; height: 34px; flex: none; margin-left: 8px;
  border: 1px solid #dbe6f5; border-radius: 11px; background: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.dr-bgm:hover { background: #f4f8fd; }
.dr-bgm.is-off { color: #9aa7bd; border-color: #e6edf6; background: #f6f9fd; }

/* ---------- 장착 아바타의 발 (2026-08-14) ----------
   발 잘라내기·물갈퀴 발 좌표는 기본 오리 그림 실측값이라, 몸 비율이 다른
   상점 아바타에서는 발이 몸과 어긋나 보였다. 장착 아바타는 원본 그대로
   (자기 발 포함) 보여주고 붙이는 다리는 숨긴다 — 걷기 통통거림(몸통 상하)과
   그림자·먼지는 그대로라 달리는 느낌은 유지된다. */
.dr-duck-img.is-custom-avatar .dr-avatar-body .gg-avatar-box .gg-avatar-layer { clip-path: none; }
.dr-duck-img.is-custom-avatar .dr-avatar-legs { display: none; }