/* EP17 Bibi Loop Styles */
.ep17-loop-wrap {
  position: absolute; right: 20px; bottom: 20px; z-index: 100;
  display: flex; flex-direction: column; max-width: 400px; width: calc(100% - 40px);
  pointer-events: auto; animation: ep17FadeIn 0.3s ease;
}
@keyframes ep17FadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.ep17-panel {
  background: rgba(15, 23, 42, 0.92); backdrop-filter: blur(16px);
  border: 1px solid rgba(250, 204, 21, 0.4); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 36px rgba(0,0,0,0.5);
}
.ep17-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ep17-badge { background: linear-gradient(135deg, #facc15, #eab308); color: #0f172a; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 20px; }
.ep17-hint { font-size: 11px; color: #fde047; font-weight: 600; }

/* 3번 실제 점프 무대 */
.ep17-jump-stage {
  position: relative; height: 84px; background: rgba(30, 41, 59, 0.8);
  border-radius: 14px; border: 1px dashed rgba(250, 204, 21, 0.3);
  overflow: hidden; display: flex; align-items: flex-end; padding: 0 16px 8px;
  justify-content: space-between;
}
.ep17-stairs {
  display: flex; align-items: flex-end; width: 100%; height: 100%;
  justify-content: space-between; position: relative; padding-bottom: 2px;
}
.ep17-stair {
  flex: 1; margin: 0 4px; border-radius: 6px 6px 0 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  transition: all 0.3s ease; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.ep17-stair.stair-1 { height: 26px; background: linear-gradient(180deg, #f87171, #ef4444); }
.ep17-stair.stair-2 { height: 46px; background: linear-gradient(180deg, #facc15, #eab308); color: #0f172a; }
.ep17-stair.stair-3 { height: 66px; background: linear-gradient(180deg, #4ade80, #22c55e); }
.ep17-stair.reached { filter: brightness(1.25); box-shadow: 0 0 12px rgba(250, 204, 21, 0.8); }

/* 점프하는 비비 아바타 */
.ep17-bibi-jumper {
  position: absolute; bottom: 8px; left: 8px;
  width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle, #f472b6, #db2777);
  border: 2px solid #fff; box-shadow: 0 4px 12px rgba(219, 39, 119, 0.6);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; transition: left 0.4s cubic-bezier(0.25, 1, 0.5, 1), bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
}
.ep17-bibi-jumper.jumping {
  animation: ep17JumpBounce 0.45s infinite alternate ease-in-out;
}
@keyframes ep17JumpBounce {
  0% { transform: scale(1, 0.85); }
  50% { transform: scale(0.9, 1.15) translateY(-8px); }
  100% { transform: scale(1.05, 0.95); }
}

.ep17-steps-row { display: flex; align-items: center; justify-content: space-between; background: rgba(30,41,59,0.7); padding: 8px 14px; border-radius: 12px; }
.ep17-count-box { font-size: 13px; color: #f8fafc; }
.ep17-count-box b { color: #facc15; font-size: 16px; margin-left: 4px; }
.ep17-jump-dots { display: flex; gap: 6px; }
.ep17-dot { font-size: 18px; opacity: 0.3; transition: all 0.25s ease; }
.ep17-dot.active { opacity: 1; transform: scale(1.2); }

.ep17-btn {
  width: 100%; padding: 12px; font-size: 14px; font-weight: 800; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #facc15, #f59e0b); color: #0f172a; cursor: pointer; min-height: 48px;
  transition: transform 0.15s ease, filter 0.2s;
}
.ep17-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.08); }
.ep17-btn:disabled { opacity: 0.7; cursor: not-allowed; }

/* 그림 모드 전용 다음 버튼 */
.ep17-next-btn {
  width: 100%; padding: 10px; font-size: 13px; font-weight: 800; border: 1px solid rgba(250, 204, 21, 0.5);
  border-radius: 10px; background: rgba(250, 204, 21, 0.15); color: #fde047; cursor: pointer; margin-top: 8px;
}
.ep17-next-btn:hover { background: rgba(250, 204, 21, 0.3); }

.ep17-complete-wrap { width: 100%; max-width: 900px; margin: 14px auto 0; animation: ep17FadeIn 0.4s ease; }
.ep17-complete-card {
  background: rgba(15, 23, 42, 0.92); border: 1px solid rgba(250, 204, 21, 0.4);
  border-radius: 20px; padding: 20px 24px; text-align: center;
}
.ep17-complete-icon { display: inline-block; background: rgba(250, 204, 21, 0.2); color: #facc15; font-weight: 800; font-size: 13px; padding: 4px 12px; border-radius: 20px; margin-bottom: 8px; }
.ep17-comp-btn.primary { background: linear-gradient(135deg, #facc15, #f59e0b); color: #0f172a; border: none; padding: 10px 18px; border-radius: 12px; font-weight: 700; cursor: pointer; }

@media (max-width: 768px) {
  .ep17-loop-wrap { position: relative; right: auto; bottom: auto; width: 100%; max-width: 100%; margin: 12px auto 0; }
}